如何自定义FLEX3的loading进度条

 

这是FLEX3默认的进度条，它起到等待加载FLEX文件的作用。如果你需要设计和自定义FLEX加载进度条，本文将介绍2种方法实现自定义FLEX3的loading进度条.

 

首先：修改下载进度的文字为中文 
 
建立扩展至 mx.preloaders.DownloadProgressBar 的一个类：

 
package myDownPro
{
 import mx.preloaders.DownloadProgressBar;
 public class myDownProBar extends DownloadProgressBar
 {
  public function myDownProBar()
  {
   //TODO: implement function
   super();
   downloadingLabel="正在下载中...";
   initializingLabel="正在初始化内容...";
  }
 }
}

然后在修改 preloader 为你建立的这个类：

 
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml "   preloader="myDownPro.myDownProBar" layout="absolute">
 <mx:Text text="程序进度条测试" x="37" y="71"/>
</mx:Application>

方法二：覆写 DownloadProgressBar 类的 preloader ，可以在其中加入你自已喜欢的标签或者图像

package myDownPro
{
 import mx.preloaders.DownloadProgressBar;
 import flash.display.Sprite;
import flash.events.ProgressEvent
import flash.events.*
import flash.text.TextField;
import  mx.events.*;
 public class myDownProBar2 extends DownloadProgressBar
 {
  public var msg:TextField
  public function myDownProBar2()
  {
   super(); 
   msg=new TextField()
   msg.x=200
   msg.y=200
  addChild(msg)
  }
  override public function set preloader(s:Sprite):void{
  s.addEventListener(ProgressEvent.PROGRESS,prog)
  s.addEventListener(Event.COMPLETE,ecom)
  s.addEventListener(FlexEvent.INIT_COMPLETE,flInC)
 s.addEventListener(FlexEvent.INIT_PROGRESS,flIn)
  }
private function prog(e:ProgressEvent):void{
msg.text=String(int(e.bytesLoaded/e.bytesTotal*100))+" %";
}
private function ecom(e:Event):void{
msg.text="完成了！！！！"
}
private function flInC(e:FlexEvent):void{
msg.text="初始化完毕！"//初始完后要派遣 Complete 事件，不然会停在这里，不会进入程序画面的
dispatchEvent(new Event(Event.COMPLETE))
}
private function flIn(e:FlexEvent):void{
msg.text="开始初始化程序"
}
 }
}

同样修改<mx:Application>标签的 preloader 为这个类。

 

 

自定义的Preloader：

package
{
  import flash.display.MovieClip;
  import flash.display.Sprite;
  import flash.events.Event;
  import flash.events.ProgressEvent;
  
  import mx.events.FlexEvent;
  import mx.preloaders.IPreloaderDisplay;
  import mx.preloaders.Preloader;
  public class nPreloader extends Sprite implements IPreloaderDisplay
  {
  [Embed(source="mc.swf", symbol="loader_mc")]
 private var LoaderMC:Class;
 private var _loader_mc:MovieClip
 
 private var _preloader:Preloader;
 
    public function nPreloader()
    {
      super();
      this._loader_mc = new LoaderMC()
      this.addChild(this._loader_mc);
     this._loader_mc.gotoAndStop(50)
    
    }
    
    public function get backgroundAlpha():Number
    {
      return 0;
    }
    
    public function set backgroundAlpha(value:Number):void
    {
    }
    
    public function get backgroundColor():uint
    {
      return 0;
    }
    
    public function set backgroundColor(value:uint):void
    {
    }
    
    public function get backgroundImage():Object
    {
      return null;
    }
    
    public function set backgroundImage(value:Object):void
    {
    }
    
    public function get backgroundSize():String
    {
      return null;
    }
    
    public function set backgroundSize(value:String):void
    {
    }
    
    public function set preloader(obj:Sprite):void
    {
      _preloader = obj as Preloader;
 _preloader.addEventListener(ProgressEvent.PROGRESS, progressEventHandler);
 _preloader.addEventListener(FlexEvent.INIT_COMPLETE,initCompleteEventHandler);
    }
    
    public function get stageHeight():Number
    {
      return 0;
    }
    
    public function set stageHeight(value:Number):void
    {
    }
    
    public function get stageWidth():Number
    {
      return 0;
    }
    
    public function set stageWidth(value:Number):void
    {
    }
    
    public function initialize():void
    {
      _loader_mc.x = stage.stageWidth / 2 - _loader_mc.width/2;
 _loader_mc.y = stage.stageHeight / 2 - _loader_mc.height/2;
    }
    
    private function progressEventHandler(eo:ProgressEvent):void
    {
      
     _loader_mc.gotoAndStop(Math.round((eo.bytesLoaded / eo.bytesTotal )*100))
     _loader_mc.show_txt.text =Math.round((eo.bytesLoaded / eo.bytesTotal )*100)+" %"
    }
    
    private function initCompleteEventHandler(eo:FlexEvent):void{
     dispatchEvent(new Event(Event.COMPLETE));
    }
    
    
  }
}

主文件：
<?xml version="1.0" encoding="utf-8"?>
<mx:Application preloader="nPreloader" creationComplete="init()" layout="vertical" xmlns:mx="http://www.adobe.com/2006/mxml" >
  <mx:Script>
    <![CDATA[

    [Embed(source="1.mp3")]
 private var _file:Class;

 
    ]]>
  </mx:Script>
  <mx:Button label="Button"/>
  <mx:ComboBox ></mx:ComboBox>
  <mx:Panel width="250" height="200" layout="absolute">
    <mx:Label text="我们是Flex组件，hoho" fontSize="15"/>
  </mx:Panel>

</mx:Application>