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

自定义Flex加载的原理就是继承mx.preloaders.DownloadProgressBar类..然后重写相关的方法

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))
}
}
}

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

<?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里不动了，使用Image和SWFLoader都不动

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下所有目录及文件拷到我们的工程下，刷新后即可启用)

附上官方示例[/u]：

How_to_use

Basic Usage

The GIFPlayer

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

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];
}
}
}