以前看到各式各样的Flash启动时的进度条和各式动态显示，就想自己定义一个可以完全自定义的Preloader。
Google了一下，好像很简单的样子，可实际一操作，还是遇到一些问题。
首先要完全自定义，只要实现mx.preloaders.IPreloaderDisplay, 然后自定义Listener监听下载
进度就可以了。道理很简单，但实际做来和自己的想像就不一样了。主要的监听有一下几个：
value.addEventListener(FlexEvent.INIT_PROGRESS, initProgressHandler);
value.addEventListener(FlexEvent.INIT_COMPLETE, initCompleteHandler);
value.addEventListener(ProgressEvent.PROGRESS, progressHandler);
我以为把进度处理的代码放到progressHandler里面就可以了，因为ProgressEvent里面包含了bytesLoaded和
bytesTotal，这样就可以计算进度了。但我发现progressHandler每次只进入两次，而且bytesLoaded都是等于bytesTotal的，就是说没有进度了，一次就装入了。我以为是我的swf文件太小，我手工使用embbed font的方法
加大swf文件大小，加到了30M左右，仍然一次就装入了，哦，我的my god。
另外一方面，INIT_PROGRESS我以为只会执行一次的，反而执行了多次。而且，执行顺序是：
PROGRESS两次
INIT_PROGRESS十次
INIT_COMPLETE一次
So, 说明只能使用INIT_PROGRESS来定义进度，反而PROGRESS来进行初始化操作。
另外还有两个要点：
1. 要在initComplete里面 dispatchEvent(new Event(Event.COMPLETE));
否则Preloader完了以后进入不了应用。
2. 我尝试在Sprite里面直接addChild ProgressBar，直接用Skin来定义ProgressBar，岂不是很简单。
但没有成功。Preloader里面的进度条要自己用graphics直接画出来。
3. 用initProgress来定义进度，我用12来定义进度的总数。Google上的回答是建议用20左右的总数来定义，
因为虽然实际只有10个左右，但最后会很快的闪过，所以没有关系。
下面是全部的代码，希望有人可以用到：
package assets.preloader {
import mx.preloaders.*;
import flash.events.*;
import mx.events.*;
import mx.core.BitmapAsset;
import flash.display.*;
import flash.utils.*;
import flash.net.URLRequest;
import spark.components.Label;
import flash.text.TextField;
import flash.text.TextFormat;
import flash.geom.Matrix;
import spark.effects.Fade;
import spark.effects.Wipe;
public class MyPreloader extends Sprite implements IPreloaderDisplay {
private var progressCount:int;
private static var progressTotal:int = 11;
public function MyPreloader() {
super();
progressCount = 0;
}
private var _backgroundAlpha:Number = 1;
public function get backgroundAlpha():Number {
if ( !isNaN(_backgroundAlpha) )
return _backgroundAlpha;
else
return 1;
}
public function set backgroundAlpha(value:Number):void {
_backgroundAlpha = value;
}
private var _backgroundColor:uint;
public function get backgroundColor():uint {
return _backgroundColor;
}
public function set backgroundColor(value:uint):void {
_backgroundColor = value;
}
private var _backgroundImage:Object;
public function get backgroundImage():Object {
return _backgroundImage;
}
public function set backgroundImage(value:Object):void {
_backgroundImage = value;
}
private var _backgroundSize:String = "";
public function get backgroundSize():String {
return _backgroundSize;
}
public function set backgroundSize(value:String):void {
_backgroundSize = value;
}
private var _stageHeight:Number = 375;
public function get stageHeight():Number {
return _stageHeight;
}
public function set stageHeight(value:Number):void {
_stageHeight = value;
}
private var _stageWidth:Number = 500;
public function get stageWidth():Number {
return _stageWidth;
}
public function set stageWidth(value:Number):void {
_stageWidth = value;
}
public function initialize():void {
}
private function showDisplayForInit(elapsedTime:int, count:int):Boolean {
return true;
}
private function showDisplayForDownloading(elapsedTime:int, event:ProgressEvent):Boolean {
return true;
}
private var _preloader:Sprite;
public function get preloader():Sprite {
return _preloader;
}
public function set preloader(value:Sprite):void {
_preloader = value;
value.addEventListener(FlexEvent.INIT_PROGRESS, initProgressHandler);
value.addEventListener(FlexEvent.INIT_COMPLETE, initCompleteHandler);
value.addEventListener(ProgressEvent.PROGRESS, progressHandler);
}
private function initCompleteHandler(event:Event):void {
progressText.text = "";
var coverX:uint = 0;
var coverY:uint = startY;
graphics.lineStyle(0, 0, 0);
graphics.beginFill(0x393b3e, backgroundAlpha);
graphics.drawRect(coverX, coverY, event.target.loaderInfo.width, event.target.loaderInfo.height);
var fadeToApp:Fade = new Fade();
fadeToApp.target = image;
fadeToApp.alphaFrom = 1.0;
fadeToApp.alphaTo = 0.0;
fadeToApp.duration = 1000;
fadeToApp.play();
setTimeout(endPreloader, 1000);
}
private function endPreloader():void {
dispatchEvent(new Event(Event.COMPLETE));
}
private function initProgressHandler(event:Event):void {
progressCount++;
var percent:int = Math.min(Math.round(100*progressCount/progressTotal), 100);
progressText.text = percent.toString() + "%";
drawTrack(percent);
}
protected function get labelFormat():TextFormat {
var tf:TextFormat = new TextFormat();
tf.color = 0xffffff;
tf.font = "Arial";
tf.size = 20;
tf.bold = true;
return tf;
}
[Embed(source="/assets/images/logo.png")]
public var logoImage:Class;
private var image:BitmapAsset = BitmapAsset(new logoImage());
private var progressText:TextField = new TextField();
private var startX:uint;
private var startY:uint;
private function progressHandler(event:ProgressEvent):void {
if( progressCount == 0 ) {
graphics.beginFill(0x393b3e, backgroundAlpha);
graphics.drawRect(0, 0, event.target.loaderInfo.width, event.target.loaderInfo.height);
startX = (event.target.loaderInfo.width/2) - (barWidth/2);
startY = (event.target.loaderInfo.height/2) + 30;
drawBar();
addChild(image);
image.x = (event.target.loaderInfo.width/2)-(image.width/2);
image.y = (event.target.loaderInfo.height/2)-(image.height/2) - 80;
progressText.defaultTextFormat = labelFormat;
addChild(progressText);
progressText.x = (event.target.loaderInfo.width/2) - (progressText.width/2) + 30;
progressText.y = (event.target.loaderInfo.height/2)-(progressText.height/2) + 50;
++progressCount;
}
}
private const barWidth:int = 300;
private const barHeight:int = 15;
private function drawBar():void {
graphics.drawRect(startX, startY, barWidth, barHeight);
}
private function drawTrack(percent:int):void {
const outerHighlightColors:Array = [0xFFFFFF, 0xFFFFFF];
const outerHighlightAlphas:Array = [0.12, 0.80];
const fillColors:Array = [0xA9A9A9, 0xBDBDBD];
const fillAlphas:Array = [1, 1];
const ratios:Array = [0, 255];
var trackWidth:Number = Math.round(barWidth*percent/100);
var m:Matrix = new Matrix();
m.createGradientBox(trackWidth, barHeight, 90);
graphics.lineStyle(1);
graphics.lineGradientStyle("linear", outerHighlightColors, outerHighlightAlphas, ratios, m);
graphics.drawRect(startX, startY, trackWidth, barHeight);
graphics.lineStyle(1, 0x636363);
graphics.beginGradientFill("linear", fillColors, fillAlphas, ratios, m);
graphics.drawRect(startX+1, startY+1, trackWidth - 2, barHeight - 2);
graphics.endFill();
}
}
}