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

 

最终的效果图

本文转自chainli 51CTO博客，原文链接：http://blog.51cto.com/lichen/244538，如需转载请自行联系原作者