自定義Flex的Loading界面(源碼)

這個方法網上已經有人寫過例子...

在這裏我只是自己做個實例並記錄一下..

首先~自定義Flex加載的原理其實就是繼承mx.preloaders.DownloadProgressBar類..然後重寫相關的方法..

package
{
  import flash.display.*;
  import flash.events.*;
  import flash.net.*;
  import flash.text.TextField;
  import flash.text.TextFormat;
  
  import mx.events.FlexEvent;
  import mx.preloaders.DownloadProgressBar;

  public class LoadingExampleProgressBar extends DownloadProgressBar
  {
    private var logo:Loader;
    private var txt:TextField;
    private var _preloader:Sprite;
    public function LoadingExampleProgressBar()
    {
      logo = new Loader();
      logo.load(new URLRequest("l4cd.png"));
      addChild(logo);
      
      var style:TextFormat = new TextFormat(null,null,0xFFFFFF,null,null,null,null,null,"center");
      txt = new TextField();
      txt.defaultTextFormat = style;
      txt.width = 200;
      txt.selectable = false;
      txt.height = 20;
      addChild(txt);
      
      super();
    }
    //最重要的代碼就在這裏..重寫preloader,讓swf執行加載的時候~進行你希望的操作~
    override public function set preloader(value:Sprite):void{
      _preloader = value
      //四個偵聽~分別是 加載進度 / 加載完畢 / 初始化進度 / 初始化完畢
      _preloader.addEventListener(ProgressEvent.PROGRESS,load_progress);
      _preloader.addEventListener(Event.COMPLETE,load_complete);
      _preloader.addEventListener(FlexEvent.INIT_PROGRESS,init_progress);
      _preloader.addEventListener(FlexEvent.INIT_COMPLETE,init_complete);
      
      stage.addEventListener(Event.RESIZE,resize)
      resize(null);
    }
    private function remove():void{
      _preloader.removeEventListener(ProgressEvent.PROGRESS,load_progress);
      _preloader.removeEventListener(Event.COMPLETE,load_complete);
      _preloader.removeEventListener(FlexEvent.INIT_PROGRESS,init_progress);
      _preloader.removeEventListener(FlexEvent.INIT_COMPLETE,init_complete);
      stage.removeEventListener(Event.RESIZE,resize)
    }
    private function resize(e:Event):void{
      logo.x = (stage.stageWidth - 40)/2;
      logo.y = (stage.stageHeight - 80)/2;
      txt.x = (stage.stageWidth - 200)/2;
      txt.y = logo.y + 40+5;
      
      graphics.clear();
      graphics.beginFill(0x333333);
      graphics.drawRect(0,0,stage.stageWidth,stage.stageHeight);
      graphics.endFill();
    }
    private function load_progress(e:ProgressEvent):void{
      txt.text = "正在加載..."+int(e.bytesLoaded/e.bytesTotal*100)+"%";
    }
    private function load_complete(e:Event):void{
      txt.text = "加載完畢!"
    }
    private function init_progress(e:FlexEvent):void{
      txt.text = "正在初始化..."
    }
    private function init_complete(e:FlexEvent):void{
      txt.text = "初始化完畢!"
      remove()
      //最後這個地方需要dpe一個Event.COMPLETE事件..表示加載完畢讓swf繼續操作~
      dispatchEvent(new Event(Event.COMPLETE))
    }
  }
}

自定義了加載類後..我們新建一個app測試一下..

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" 
  preloader="LoadingExampleProgressBar" 
  backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#333333, #333333]"
</mx:Application>

不需要寫任何代碼..
只需要在Application 標籤下設置preloader爲你剛剛自定義的類(我這是命令叫LoadingExampleProgressBar)
保存後即可看到效果~