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="images/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();                
    }
  }
}    

最终的效果图