在Flex中打造漂亮的Loading

nbkangta

从RIACHINA转来的
原文地址: http://bbs.airia.cn/FLEX/thread-3292-1-1.aspx

效果浏览
http://www.dragonoffspring.cn/preloader/flexpreloaderexample.html

呵呵，看着Jesse Warden的教程来做的
http://jessewarden.com/2007/07/making-a-cooler-preloader-in-flex-part-1-of-3.html

flash里输出的swf实例控制在6k以内，很轻量的。基本不会出现载入preloader时间长的问题。

preloader.as的源码如下，至于swf的fla源文件，可以去Jesse Warden的那个教程里下来自己改动。
package{import flash.display.MovieClip;import flash.display.Sprite;import flash.events.Event;import flash.events.ProgressEvent;import mx.events.FlexEvent;import mx.preloaders.DownloadProgressBar;/** * This class extends the lightweight DownloadProgressBar class.  This class * uses an embedded Flash 8 MovieClip symbol to show preloading. *  * @author jessewarden *  */public class Preloader extends DownloadProgressBar{/*** The Flash 8 MovieClip embedded as a Class.*/[Embed(source="/assets/flash/myPreloader.swf", symbol="Preloader")]private var FlashPreloaderSymbol:Class;private var clip:MovieClip;private var _preloader:Sprite;public function Preloader(){super();// instantiate the Flash MovieClip, show it, and stop it.// Remember, AS2 is removed when you embed SWF's, // even "stop();", so you have to call it manually if you embed.this.clip = new FlashPreloaderSymbol();this.addChild(clip);this.clip.gotoAndStop("start");}public override function set preloader(preloader:Sprite):void         {                               preloader.addEventListener( ProgressEvent.PROGRESS , onSWFDownloadProgress );                preloader.addEventListener( Event.COMPLETE , onSWFDownloadComplete );            preloader.addEventListener( FlexEvent.INIT_PROGRESS , onFlexInitProgress );            preloader.addEventListener( FlexEvent.INIT_COMPLETE , onFlexInitComplete );            stage.addEventListener(Event.RESIZE, centerPreloader);            _preloader = preloader;            centerPreloader();        }                /**         * Makes sure that the preloader is centered in the center of the app.         *          */                private function centerPreloader(event:Event = null):void{var adjust_X:Number = 300;//X coodinate adjustion according to Object layout.var adjust_Y:Number = 500; //Y coodinate adjustion according to Object layout.x = ((stage.stageWidth+adjust_X) / 2) - (clip.width / 2);y = ((stage.stageHeight+adjust_Y) / 2) - (clip.height / 2);}/** * As the SWF (frame 2 usually) downloads, this event gets called. * You can use the values from this event to update your preloader. * @param event *  */private function onSWFDownloadProgress( event:ProgressEvent ):void        {        var t:Number = event.bytesTotal;        var l:Number = event.bytesLoaded;        var p:Number = Math.round( (l / t) * 100);        clip.preloader.gotoAndStop(p);        clip.preloader.amount_txt.text = String(p);        clip.preloader.amount_txt_img.text = String(p);        }                /**         * When the download of frame 2         * is complete, this event is called.           * This is called before the initializing is done.         * @param event         *          */                private function onSWFDownloadComplete( event:Event ):void        {       clip.preloader.gotoAndStop(100);        clip.preloader.amount_txt.text = "100";        clip.preloader.amount_txt_img.text = "100";        }                /**         * When Flex starts initilizating your application.         * @param event         *          */                private function onFlexInitProgress( event:FlexEvent ):void        {        clip.preloader.gotoAndStop(100);        clip.preloader.amount_txt.text = "Init...";        }                /**         * When Flex is done initializing, and ready to run your app,         * this function is called.         *          * You're supposed to dispatch a complete event when you are done.         * I chose not to do this immediately, and instead fade out the          * preloader in the MovieClip.  As soon as that is done,         * I then dispatch the event.  This gives time for the preloader         * to finish it's animation.         * @param event         *          */                private function onFlexInitComplete( event:FlexEvent ):void         {_preloader.removeEventListener( ProgressEvent.PROGRESS ,     onSWFDownloadProgress );    _preloader.removeEventListener( Event.COMPLETE ,             onSWFDownloadComplete );_preloader.removeEventListener( FlexEvent.INIT_PROGRESS ,     onFlexInitProgress );_preloader.removeEventListener( FlexEvent.INIT_COMPLETE ,     onFlexInitComplete );stage.removeEventListener(Event.RESIZE, centerPreloader);        clip.addFrameScript(21, onDoneAnimating);        clip.gotoAndPlay("fade out");        }                /**         * If the Flash MovieClip is done playing it's animation,         * I stop it and dispatch my event letting Flex know I'm done.         * @param event         *          */                private function onDoneAnimating():void        {        clip.stop();        dispatchEvent( new Event( Event.COMPLETE ) );        }}}