Add GIF image in flex

By default, only one frame is displayed for the GIF animation inserted to the image control in flex. That is, the GIF animation is not moved. We can use the GIF player package to insert the GIF image into flex.

Download gifplayer: Ghost.

Example 1: simply add a GIF

<? XML version = "1.0" encoding = "UTF-8"?> <S: Application xmlns: FX = "http://ns.adobe.com/mxml/2009" xmlns: S = "Library: // ns.adobe.com/flex/spark" xmlns: MX = "Library: // ns.adobe.com/flex/mx "minwidth =" 955 "minheight =" 600 "> <FX: SCRIPT> <! [CDATA [import org.bytearray.gif. player. gifplayer; private var gifplay: gifplayer = new gifplayer (); Private function Init (): void {var Req: URLRequest = new URLRequest (".. /flex_src/images/replica -rain map .gif "); GIF play. load (req); gifimg. addchild (gifplay);}]> </FX: SCRIPT> <mx: titlewindow Title = "ABC" id = "adwindow" width = "1000" Height = "800"> <mx: image id = "gifimg" width = "221" Height = "92" creationcomplete = "Init ()"/> </MX: titlewindow> </S: Application>

Example 2: demonstrate several common functions: Play, stop, play to the nth frame, and stop to the nth frame.

<? XML version = "1.0" encoding = "UTF-8"?> <S: Application xmlns: FX = "http://ns.adobe.com/mxml/2009" xmlns: S = "Library: // ns.adobe.com/flex/spark" xmlns: MX = "Library: // ns.adobe.com/flex/mx "minwidth =" 955 "minheight =" 600 "creationcomplete =" Init () "> <FX: SCRIPT> <! [CDATA [import flash.net. URLRequest; import org.bytearray.gif. player. gifplayer; import org.bytearray.gif. events. filetypeevent; import org.bytearray.gif. events. gifplayerevent; import org.bytearray.gif. events. frameevent; import org.bytearray.gif. events. timeoutevent; private VaR _ mygifplayer: gifplayer = new gifplayer (); // instantiate the private VaR _ totalframe: Number; // total number of frames // Private VaR _ currentframe: Nu Mber; Private function Init (): void {var request: URLRequest = new URLRequest (".. /flex_src/images/replica -rain map .gif "); // The md.gif image _ mygifplayer in the same level directory. load (request); IMG. addchild (_ mygifplayer); // Add play_mygifplayer to the IMG control. addeventlistener (gifplayerevent. complete, oncompletegif); // callback function _ mygifplayer when the GIF image is loaded. addeventlistener (frameevent. frame_rendered, onframerendered); // callback function for reading frames // _ mygifplayer. addeventlistener (Timeoutevent. time_out, ontimeout);} private function oncompletegif (Event: gifplayerevent): void {_ totalframe = _ mygifplayer. totalframes; // total number of frames totalframe. TEXT = string (_ totalframe);} private function onframerendered (Event: frameevent): void {currentframe. TEXT = string (_ mygifplayer. currentframe); // Number of frames currently played} private function ontimeout (Event: timeoutevent): void {trace ("gif is error! ");} Private function play (): void {_ mygifplayer. play ();} private function stop (): void {_ mygifplayer. stop ();} private function gotoandplay (): void {var numframe: Number = math. floor (math. random () * _ totalframe) + 1; _ mygifplayer. gotoandplay (numframe); gotoplaybtn. label = "gotoplay (" + numframe + ")";} private function gotoandstop (): void {var numframe: Number = math. floor (math. random () * _ total Frame) + 1; _ mygifplayer. gotoandstop (numframe); gotostopbtn. label = "gotostop (" + numframe + ")";}]> </FX: SCRIPT> <s: layout> <s: basiclayout/> </s: layout> <FX: declarations> <! -- Place non-visual elements (such as services and value objects) Here --> </FX: declarations> <mx: image id = "IMG" width = "217" Height = "300" Top = "30" Left = "240"/> <mx: applicationcontrolbar width = "80%" Bottom = "20" horizontalcenter = "0"> <mx: button label = "play" Height = "22" Click = "Play (); "stylename =" primarybutton "/> <mx: button label =" stop "Height =" 22 "Click =" Stop (); "/> <mx: button id = "gotoplaybtn" Height = "22" label = "gotoplay (RAND)" Click = "gotoandplay ();"/> <mx: button id = "gotostopbtn" Height = "22" label = "gotostop (RAND)" Click = "gotoandstop ();"/> <mx: Label text = "totalframe: "/> <mx: Label id =" totalframe "/> <mx: Label text =" currentframe: "/> <mx: label id = "currentframe"/> </MX: applicationcontrolbar> </S: Application>