自定义Loading载入状态（含图标） 及解决Flex中GIF动画图片加载时显示动起来

自定义Flex加载的原理就是继承mx.preloaders.DownloadProgressBar类..然后重写相关的方法但发现一个严重问题，原来会动的图片在FLEX里不动了，使用Image和SWFLoader都不动

自定义了加载类后..新建一个app测试一下..

package
{   
     import flash.display.*;   
     import flash.events.*;   
     import flash.net.*;   
     import flash.text.TextField;   
     import flash.text.TextFormat;   
       
     import mx.events.FlexEvent;   
     import mx.preloaders.DownloadProgressBar;   
      import org.gif.player.GIFPlayer;
     

     public class LoadingExampleProgressBar extends DownloadProgressBar   
     {   
         private var logo:Loader;   
         private var txt:TextField;   
         private var _preloader:Sprite;   
         public function LoadingExampleProgressBar()   
         {   
               //此方法只能实现显示jpg,png等静态图
//             logo = new Loader();   
//             logo.load(new URLRequest("l4cd.png"));   
//             addChild(logo);   
            
              var request:URLRequest = new URLRequest("diego.gif");
              var player:GIFPlayer = new GIFPlayer();
              player.load(request);                          
              addChild(player);

               
//             var style:TextFormat = new TextFormat(null,null,0xFFFFFF,null,null,null,null,null,"center");   
//             txt = new TextField();   
//             txt.defaultTextFormat = style;   
//             txt.width = 200;   
//             txt.selectable = false;   
//             txt.height = 20;   
//             addChild(txt);   
               
             super();   
         }   
         //最重要的代码就在这里..重写preloader,让swf执行加载的时候~进行你希望的操作~   
         override public function set preloader(value:Sprite):void{   
             _preloader = value   
             //四个侦听~分别是 加载进度 / 加载完毕 / 初始化进度 / 初始化完毕   
             _preloader.addEventListener(ProgressEvent.PROGRESS,load_progress);   
             _preloader.addEventListener(Event.COMPLETE,load_complete);   
             _preloader.addEventListener(FlexEvent.INIT_PROGRESS,init_progress);   
             _preloader.addEventListener(FlexEvent.INIT_COMPLETE,init_complete);   
               
             stage.addEventListener(Event.RESIZE,resize)   
             resize(null);   
         }   
         private function remove():void{   
             _preloader.removeEventListener(ProgressEvent.PROGRESS,load_progress);   
             _preloader.removeEventListener(Event.COMPLETE,load_complete);   
             _preloader.removeEventListener(FlexEvent.INIT_PROGRESS,init_progress);   
             _preloader.removeEventListener(FlexEvent.INIT_COMPLETE,init_complete);   
             stage.removeEventListener(Event.RESIZE,resize)   
         }   
         private function resize(e:Event):void{   
             logo.x = (stage.stageWidth - 40)/2;   
             logo.y = (stage.stageHeight + 80)/2;   
             txt.x = (stage.stageWidth - 200)/2;   
             txt.y = logo.y + 40+5;   
               
             graphics.clear();   
             graphics.beginFill(0x333333);   
             graphics.drawRect(0,0,stage.stageWidth,stage.stageHeight);   
             graphics.endFill();   
         }   
         private function load_progress(e:ProgressEvent):void{   
             txt.text = "正在加载"+int(e.bytesLoaded/e.bytesTotal*100)+"%";   
         }   
         private function load_complete(e:Event):void{   
             txt.text = "加载完毕!"
         }   
         private function init_progress(e:FlexEvent):void{   
             txt.text = "正在初始化"
         }   
         private function init_complete(e:FlexEvent):void{   
             txt.text = "初始化完毕!"
             remove()   
             //最后这个地方需要dpe一个Event.COMPLETE事件..表示加载完毕让swf继续操作~   
             dispatchEvent(new Event(Event.COMPLETE))   
         }   
     }   
}

 

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" preloader="LoadingExampleProgressBar" backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#333333, #333333]" >
    
</mx:Application>

关键点：在Application 标签下设置preloader为刚自定义的类(如上面的LoadingExampleProgressBar类)

 

 

Flex没有内建的对GIF动画的支持……可恶吧？无论Flex 2还是Flex 3都没有
Adobe的说法是请把动画GIF转换成SWF来在Flex里使用。

没办法，唯有GIFPlayer 0.4.zip 予解决。。以下是官方地址，有类库及FAQ 及示例

http://code.google.com/p/as3gif/downloads/list

俺Fooo博客下载：/Files/Fooo/GIFPlayer-0.4.zip

(把该最新版本的org下所有目录及文件拷到我们的工程下，刷新后即可启用)

附上官方示例：

 

How_to_use

Basic UsageThe GIFPlayerThe GIFEncoder

The GIFPlayer class is used to play the gif animation.

It can load gif file from an URLRequest object or a ByteArray object.

Example:

package  
{ 
        import flash.display.Sprite; 
        import flash.net.URLRequest; 
        import org.gif.player.GIFPlayer; 
         
        public class Main extends Sprite 
        { 
                public function Main():void 
                { 
                        var request:URLRequest = new URLRequest("diego.gif"); 
                         
                        var player:GIFPlayer = new GIFPlayer(); 
                        player.load(request); 
                         
                        addChild(player); 
                } 
        } 
}

The GIFEncoder class use to create a gif file by frames.

Example(draw two frames and add to GIFEncoder then play the gif data by GIFPlayer):

package  
{ 
        import flash.display.BitmapData; 
        import flash.display.Shape; 
        import flash.display.Sprite; 
        import flash.utils.ByteArray; 
        import org.gif.encoder.GIFEncoder; 
        import org.gif.player.GIFPlayer; 
         
        public class Main extends Sprite 
        { 
                public function Main():void 
                { 
                        var frames:Array = createFrames(); 
                         
                        var encoder:GIFEncoder = new GIFEncoder(); 
                         
                        encoder.setRepeat(0);                   //AUTO LOOP 
                        encoder.setDelay(500); 
                         
                        encoder.start();                        //MUST HAVE! 
                         
                        encoder.addFrame(frames[0]); 
                        encoder.addFrame(frames[1]); 
                         
                        encoder.finish();                       //MUST HAVE! 
                         
                        playGIF(encoder.stream); 
                } 
                 
                private function playGIF(data:ByteArray):void 
                { 
                        data.position = 0; 
                         
                        var player:GIFPlayer = new GIFPlayer(); 
                        player.loadBytes(data); 
                         
                        addChild(player); 
                } 
                 
                private function createFrames():Array 
                { 
                        var shape:Shape = new Shape(); 
                        shape.graphics.lineStyle(1, 0); 
                         
                        shape.graphics.moveTo(60, 0); 
                        shape.graphics.lineTo(60, 120); 
                         
                        var frame1:BitmapData = new BitmapData(120, 120); 
                        frame1.draw(shape); 
                         
                        shape.graphics.clear(); 
                         
                        shape.graphics.lineStyle(1, 0); 
                        shape.graphics.moveTo(0, 60); 
                        shape.graphics.lineTo(120, 60); 
                         
                        var frame2:BitmapData = new BitmapData(120, 120); 
                        frame2.draw(shape); 
                         
                        return [frame1, frame2]; 
                } 
        } 
}