在Flex中打造漂亮的Loading

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

效果浏览
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 ) );
        }

	}
}