Flex 的默認的 Preloader, 平心而論，不是很好看。一個個性化的Preloader，基本上要包括三個部分。

1. 公司或者網站Logo，或者個性化的預載圖片。好似是桌面軟件的Splash Screen。

2. 載入數據的進度，文字形式的百分比。

3. 載入進度條。

preloader不像Flex項目中普通的部件可以通過CSS進行設置，是因為當程序初始載入時，CSS文件的設定還未被載入，所以不好通過CSS進行外觀的控制。

這里有Ted把SWF，GIF 和 PNG 文件作為 Preloader 的教程。不過這里沒有上述元素三合一的例子。

把網上的資料總結一下，這里放個三合一的例子。最終效果預覽，

?

設置WEB程序的Preloader為自制的Preloader時，要修改主程序Application標簽中的preloader屬性，

?

view plaincopy to clipboardprint?

<?xml version="1.0"?encoding="utf-8"?> ??

<MX:APPLICATION xmlns:mx="http://www.adobe.com/2006/mxml"?layout="absolute"preloader="com.ibsol.view.Preloader"> ??

<MX:SCRIPT> ??

...</MX:SCRIPT></MX:APPLICATION>??

?

這里的com.ibsol.view.Preloader是自定義Preloader類的路徑。

Preloader要擴展DownloadProgressBar類才能設置自己的Preloader

?

view plaincopy to clipboardprint?

package?com.ibsol.view ??

{ ??

????import?flash.display.Sprite; ??

????import?flash.events.Event; ??

????import?flash.events.ProgressEvent; ??

????import?flash.events.TimerEvent; ??

????import?flash.text.TextField; ??

????import?flash.utils.Timer; ??

????import?mx.events.FlexEvent; ??

????import?mx.preloaders.DownloadProgressBar; ??

???? ??

????public?class?Preloader?extends?DownloadProgressBar ??

???? { ??

????????//顯示進度的文字???

????????private?var?progressText:TextField; ??

????????//進度條???

????????public?var?img:WelcomeScreen; ??

????????//logo頁面???

????????public?var?logo:WelcomeLogo; ??

????????private?var?_timer:Timer; ??

???????? ??

????????public?function?Preloader() ??

???????? { ??

????????????super(); ??

????????????//加入logo???

???????????? logo =?new?WelcomeLogo(); ??

????????????this.addChild(logo); ??

????????????//加入進度條???

???????????? img =?new?WelcomeScreen(); ??

????????????this.addChild(img); ??

????????????//加入進度文字???

???????????? progressText =?new?TextField(); ??

???????????? progressText.x = 40; ??

???????????? progressText.y = 90; ??

????????????this.addChild(progressText); ??

????????????//進度條計時器初始化，我們實現進度條的原理就是不停的刷新進圖條圖片???

????????????//因為每次進度條的長度不同，所以就有進度條在走的效果???

???????????? _timer =?new?Timer(1); ??

???????????? _timer.addEventListener(TimerEvent.TIMER, drawTimerHandler); ??

???????????? _timer.start(); ??

???????? } ??

????????/**

????????? * override這個函數，來實現自己Preloader的設置，而不是用其默認的設置

????????? */??

???????? override?public?function?set preloader(value:Sprite):void??

???????? { ??

???????????? value.addEventListener(ProgressEvent.PROGRESS, progHandler); ??

???????????? value.addEventListener(FlexEvent.INIT_COMPLETE, initCompleteHandler); ??

????????????//在這里設置預載界面居中???

????????????//如果在初始化函數中設置，會有stageWidth和最終界面大小不一致的錯誤，而導致不能居中???

???????????? x = (stageWidth/2) - (300/2); ??

???????????? y = (stageHeight/2) - (180/2); ??

???????? } ??

???????? ??

????????private?function?progHandler(e:ProgressEvent):void??

???????? { ??

????????????//計算進度，并且設置文字進度和進度條的進度。???

????????????var?prog:Number = e.bytesLoaded/e.bytesTotal*100; ??

???????????? progressText.text =?"已下載 "?+ String(int(prog)) +?"%"; ??

????????????if(img) ??

???????????? { ??

???????????????? img.progress = prog; ??

???????????? } ??

???????? } ??

???????? ??

????????private?function?compHandler(e:Event):void??

???????? { ??

???????????? ??

???????? } ??

???????? ??

????????private?function?initCompleteHandler(e:FlexEvent):void??

???????? { ??

????????????//如果載入完畢，則停止刷新???

???????????? img.ready =?true; ??

???????????? _timer.stop(); ??

????????????//測試專用。下載完畢后，不馬上跳到程序的默認界面。而是停頓10秒后再跳入。??

????????????var?timer:Timer =?new?Timer(10000, 1); ??

???????????? timer.addEventListener(TimerEvent.TIMER, dispatchComplete); ??

???????????? timer.start(); ??

???????? } ??

???????? ??

????????private?function?initProgHandler(e:FlexEvent):void??

???????? { ??

???????????? ??

???????? } ??

????????/**

????????? * 一定要分發這個事件，來通知程序已經完全下載，可以進入程序的默認界面了

????????? */??

????????private?function?dispatchComplete(event:TimerEvent):void??

???????? { ??

????????????this.dispatchEvent(new?Event(Event.COMPLETE)); ??

???????? } ??

????????/**

???????? * 每個時鐘周期都刷新進度條圖片

???????? */??

????????private?function?drawTimerHandler(event:TimerEvent):void??

???????? { ??

???????????? img.refresh(); ??

???????? } ??

??

???? } ??

}??

圖片logo層的實現方式是

?

view plaincopy to clipboardprint?

package?com.ibsol.view ??

{ ??

????import?flash.display.Loader; ??

????import?flash.utils.ByteArray; ??

???? ??

????public?class?WelcomeLogo?extends?Loader ??

???? { ??

???????? [Embed(source="assets/preloader.png", mimeType="application/octet-stream")] ??

????????public?var?WelcomeScreenGraphic:Class; ??

????????public?function?WelcomeLogo() ??

???????? { ??

????????????this.loadBytes(new?WelcomeScreenGraphic() as ByteArray); ??

???????? } ??

??

???? } ??

} ?

轉載于:https://www.cnblogs.com/ternastone/archive/2010/12/06/1897641.html

總結

以上是生活随笔為你收集整理的ZZ flex preloader的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。