flex自定義preloader預加載進度條

flex預設的preloader已經很不錯了,可是有時候還是需要自定義的.

需要在要出現自定義預加載的程式的<mx:Application>标簽裡加入preloader="".

preloader="com.lichen.component.CustomPreloader"

其中,com.lichen.component是我的包名,CustomPreloader這個類是繼承了DownloadProgressBar

這句就是指明了程式preloader的時候加載哪個類

CustomPreloader.as

package com.lichen.component

{

  import flash.display.Sprite;

  import flash.events.Event;

  import flash.events.ProgressEvent;

  import flash.text.TextField;

  import flashx.textLayout.BuildInfo;

  import mx.events.*;

  import mx.preloaders.DownloadProgressBar;

  public class CustomPreloader extends DownloadProgressBar {

    public var wcs:WelcomeScreen;

    public var msg:TextField;

    public function CustomPreloader()    

    {

      super();    

      msg=new TextField();

      wcs = new WelcomeScreen();

      this.addChild(wcs);

      this.addChild(msg);

    }

    override public function set preloader( preloader:Sprite ):void    

    {                                        

      preloader.addEventListener( ProgressEvent.PROGRESS , SWFDownloadProgress );        

      preloader.addEventListener( Event.COMPLETE , SWFDownloadComplete );

      preloader.addEventListener( FlexEvent.INIT_PROGRESS , FlexInitProgress );

      preloader.addEventListener( FlexEvent.INIT_COMPLETE , FlexInitComplete );

    private function SWFDownloadProgress( event:ProgressEvent ):void {

      msg.text=String(int(event.bytesLoaded/event.bytesTotal*100))+" %";

      msg.background=true;

      msg.backgroundColor=0xD4E4FF;

      msg.width=200;

      msg.height=20;

      msg.textColor=0x444444;

    private function SWFDownloadComplete( event:Event ):void {}

    private function FlexInitProgress( event:Event ):void {

//      wcs.ready = true;

      msg.text="完成了!";

      wcs.closeScreen();

      dispatchEvent(new Event(Event.COMPLETE));

    private function FlexInitComplete( event:Event ):void    

    {            

//      wcs.ready = true;            

//      dispatchEvent( new Event( Event.COMPLETE ) );

  }

}

這其中使用了WelcomeScreen,這個類的作用是使用圖檔,并且設定定時器控制圖檔顯示的alpha屬性.

WelcomeScreen.as

package com.lichen.component    

{        

  import flash.display.Loader;

  import flash.events.MouseEvent;

  import flash.events.TimerEvent;

  import flash.utils.ByteArray;

  import flash.utils.Timer;

  public class WelcomeScreen extends Loader

  {

    [ Embed(source="p_w_picpaths/mt.jpg", mimeType="application/octet-stream") ]

    public var WelcomeScreenGraphic:Class;

    public var timer:Timer;

    private var fadeInRate:Number    = .05;

    private var fadeOutRate:Number = .08;

    private var timeAutoClose:int = 500;

    public var ready:Boolean = false;    

    public function WelcomeScreen()

      this.visible = false;

      this.alpha = 0.5;

      timer = new Timer( 1 );

      timer.addEventListener( TimerEvent.TIMER, updateView );

      timer.start();

      this.loadBytes( new WelcomeScreenGraphic() as ByteArray );

      this.addEventListener( MouseEvent.MOUSE_DOWN, mouseDown );                            

    public function updateView( event:TimerEvent ):void

      if( this.alpha < 1)        this.alpha = this.alpha + this.fadeInRate;

      if( this.stage.stageWidth>0){

        this.stage.addChild(this);

        this.x = this.stage.stageWidth/2 - this.width/2;

        this.y = this.stage.stageHeight/2 - this.height/2;

        this.visible=true;

      }

      if( this.ready && timer.currentCount > this.timeAutoClose ) closeScreen()        

    public function closeScreen():void

      timer.removeEventListener( TimerEvent.TIMER, updateView );

      timer.removeEventListener( MouseEvent.MOUSE_DOWN, mouseDown);

      timer.addEventListener( TimerEvent.TIMER, closeScreenFade );                                        

    public function closeScreenFade( event:TimerEvent ):void

      if( this.alpha > 0){

        this.alpha = this.alpha - fadeOutRate;

      } else {

        timer.stop()

        this.parent.removeChild(this);

      }                

    }                

    public function mouseDown( event:MouseEvent ):void

      closeScreen();                

}    

最終的效果圖