Flex加载大图片等待特效 Flex特效 (利用了ProgressBar)

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
????xmlns:controls="*"
????layout="absolute" >

?
?
?<mx:HBox? horizontalCenter="0" top="20" horizontalGap="16">
??
??<mx:Panel title="Select a Source (double click)" width="281" height="374" >???????????
???<mx:Tile width="100%" height="100%"? tileHeight="75" tileWidth="75" paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" verticalScrollPolicy="off">
????<controls:LoadImages width="75" height="75" source="http://favzone.com/images/crybutton/button01.jpg"
????????? doubleClickEnabled="true" doubleClick="{loadingImage.source=&apos;http://favzone.com/images/crybutton/button01.jpg?v=0&amp;r=&apos;+Math.random();}" />
????
????<controls:LoadImages width="75" height="75" source="http://favzone.com/images/crybutton/button02.jpg"
????????? doubleClickEnabled="true" doubleClick="{loadingImage.source=&apos;http://favzone.com/images/crybutton/button02.jpg?v=0&amp;r=&apos;+Math.random();}" />
????
????<controls:LoadImages width="75" height="75" source="http://favzone.com/images/crybutton/button03.jpg"
????????? doubleClickEnabled="true" doubleClick="{loadingImage.source=&apos;http://favzone.com/images/crybutton/button03.jpg?v=0&amp;r=&apos;+Math.random();}" />
????
????
????<controls:LoadImages width="75" height="75" source="http://favzone.com/images/crybutton/button04.jpg"
????????? doubleClickEnabled="true" doubleClick="{loadingImage.source=&apos;http://favzone.com/images/crybutton/button04.jpg?v=0&amp;r=&apos;+Math.random();}" />
????
????
????<controls:LoadImages width="75" height="75" source="http://favzone.com/images/crybutton/button05.jpg"
????????? doubleClickEnabled="true" doubleClick="{loadingImage.source=&apos;http://favzone.com/images/crybutton/button05.jpg?v=0&amp;r=&apos;+Math.random();}" />
????
????
????<controls:LoadImages width="75" height="75" source="http://favzone.com/images/crybutton/button06.jpg"
????????? doubleClickEnabled="true" doubleClick="{loadingImage.source=&apos;http://favzone.com/images/crybutton/button06.jpg?v=0&amp;r=&apos;+Math.random();}" />
????
????
????<controls:LoadImages width="75" height="75" source="http://favzone.com/images/crybutton/button07.jpg"
????????? doubleClickEnabled="true" doubleClick="{loadingImage.source=&apos;http://favzone.com/images/crybutton/button07.jpg?v=0&amp;r=&apos;+Math.random();}" />
????
????
????<controls:LoadImages width="75" height="75" source="http://favzone.com/images/crybutton/button08.jpg"
????????? doubleClickEnabled="true" doubleClick="{loadingImage.source=&apos;http://favzone.com/images/crybutton/button08.jpg?v=0&amp;r=&apos;+Math.random();}" />
????
????
????<controls:LoadImages width="75" height="75" source="http://favzone.com/images/crybutton/button09.jpg"
????????? doubleClickEnabled="true" doubleClick="{loadingImage.source=&apos;http://favzone.com/images/crybutton/button09.jpg?v=0&amp;r=&apos;+Math.random();}" />???????????????
????
????
????<controls:LoadImages width="75" height="75" source="http://favzone.com/images/crybutton/button10.jpg"
????????? doubleClickEnabled="true" doubleClick="{loadingImage.source=&apos;http://favzone.com/images/crybutton/button10.jpg?v=0&amp;r=&apos;+Math.random();}" />???????????????
????
????
????<controls:LoadImages width="75" height="75" source="http://favzone.com/images/crybutton/button11.jpg"
????????? doubleClickEnabled="true" doubleClick="{loadingImage.source=&apos;http://favzone.com/images/crybutton/button11.jpg?v=0&amp;r=&apos;+Math.random();}" />???????????????
????
????
????<controls:LoadImages width="75" height="75" source="http://favzone.com/images/crybutton/button12.jpg"
????????? doubleClickEnabled="true" doubleClick="{loadingImage.source=&apos;http://favzone.com/images/crybutton/button12.jpg?v=0&amp;r=&apos;+Math.random();}" />???????????????
???</mx:Tile>???????????
??</mx:Panel>?????
??
??<mx:Panel title="Loading Image Component" >
???
???
???<controls:LoadImages id="loadingImage" width="500" height="333"
???????? progressPercentWidth="80" progressHeight="20" />
???
???
??</mx:Panel>
?</mx:HBox>
?
?
?<mx:ApplicationControlBar dock="true">
??<mx:Label text="Loading" styleName="headderText"/>???????
??<mx:Spacer width="-20" />???????
??<mx:Label text="Images" styleName="headderTextBlue"/>
??<mx:Script>
???<![CDATA[
????import flash.net.navigateToURL;???????????
???]]>
??</mx:Script>
??
?</mx:ApplicationControlBar>
?
</mx:Application>

?

?

?

package{?import flash.events.Event;?import flash.events.IOErrorEvent;?import flash.events.ProgressEvent;?import flash.events.SecurityErrorEvent;??import mx.controls.Image;?import mx.controls.ProgressBar;?import mx.controls.ProgressBarMode;?import mx.events.FlexEvent;?import mx.events.ResizeEvent;??public class LoadImages extends Image?{????//---------------------------------------------------------------------??// Private properties??//---------------------------------------------------------------------??private var _progressBar:ProgressBar;??????? ????private var _progressPercentWidth:Number = 80;??private var _progressHeight:Number = 20;??????//---------------------------------------------------------------------??// Public properties??//---------------------------------------------------------------------????/**?? * The relative width of the progress bar?? */??public function set progressPercentWidth( value:Number ):void??{???_progressPercentWidth = value;???evaluateProgressSize();??}??public function get progressPercentWidth():Number??{???return _progressPercentWidth;??? ??}????/**?? * The height of the progress bar?? */??public function set progressHeight( value:Number ):void??{???_progressHeight = value;???evaluateProgressSize();?????}??public function get progressHeight():Number??{???return _progressHeight;??}????/**?? * The progress bar label?? */??public function set progressLabel( value:String ):void??{???_progressBar.label = value;??}??public function get progressLabel():String??{???return _progressBar.label;??}??????//---------------------------------------------------------------------??// Constructior??//---------------------------------------------------------------------??public function LoadImages()??{???this.addEventListener( ResizeEvent.RESIZE,resizeHandler );???this.addEventListener( Event.OPEN,openHandler );???this.addEventListener( Event.COMPLETE,completeHandler );???this.addEventListener( IOErrorEvent.IO_ERROR,ioErrorHandler );???this.addEventListener( SecurityErrorEvent.SECURITY_ERROR,securityErrorHandler );??}??????????override protected function createChildren():void??{???_progressBar = new ProgressBar();???_progressBar.addEventListener( FlexEvent.CREATION_COMPLETE,progressCreated );???_progressBar.visible = false;???_progressBar.includeInLayout = false;??????_progressBar.mode = ProgressBarMode.EVENT;???_progressBar.source = this;??????_progressBar.label = "%3%%";???_progressBar.labelPlacement = "center";??????this.addChild( _progressBar );??}????/**?? * Set the dimensions of the progress bar?? */??protected function evaluateProgressSize():void??{???if( _progressBar == null )????return;??????_progressBar.x???????? = this.width * ( ( 1 - ( progressPercentWidth / 100 ) ) * 0.5 );???_progressBar.y???????? = ( this.height * 0.5 ) - ( progressHeight * 0.5 );???_progressBar.width???? = this.width * ( progressPercentWidth / 100 );???_progressBar.height = progressHeight??}????/**?? * Show the progress bar?? */??protected function showProgress():void??{???// resets the progress bar before it is shown???this.dispatchEvent( new ProgressEvent(ProgressEvent.PROGRESS,false,100 ) );??????_progressBar.visible = true;??}????/**?? * Hide the progress bar?? */??protected function hideProgress():void??{???_progressBar.visible = false;??}????????//---------------------------------------------------------------------??// Event handlers??//---------------------------------------------------------------------????private function progressCreated( event:FlexEvent ):void??{???evaluateProgressSize();??}????private function resizeHandler( event:ResizeEvent ):void??{???evaluateProgressSize();??}????private function openHandler( event:Event ):void??{???showProgress();??}??????private function completeHandler( event:Event ):void??{???hideProgress();??}????private function ioErrorHandler( event:IOErrorEvent ):void??{???hideProgress();??}??????private function securityErrorHandler( event:SecurityError ):void??{???hideProgress()??}???}?}