loading问题

以前看到各式各样的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();

    }

  }

}