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

 

最终的效果图

本文出自 “wIsper 把技术做成艺术” 博客，转载请与作者联系！