从网上看到的一篇加载图片显示进度条的示例。该示例组要自定义了一个Image类作为控件,继承自Image,在自定义类里面实现了ProgressBar的监听,感觉不错,可以借鉴一下。
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:controls="com.favzone.controls.*"
layout="absolute" >
<mx:Style source="styles.css" />
<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='http://favzone.com/images/crybutton/button01.jpg?v=0&r='+Math.random();}" />
<controls:LoadImages width="75" height="75" source="http://favzone.com/images/crybutton/button02.jpg"
doubleClickEnabled="true" doubleClick="{loadingImage.source='http://favzone.com/images/crybutton/button02.jpg?v=0&r='+Math.random();}" />
<controls:LoadImages width="75" height="75" source="http://favzone.com/images/crybutton/button03.jpg"
doubleClickEnabled="true" doubleClick="{loadingImage.source='http://favzone.com/images/crybutton/button03.jpg?v=0&r='+Math.random();}" />
<controls:LoadImages width="75" height="75" source="http://favzone.com/images/crybutton/button04.jpg"
doubleClickEnabled="true" doubleClick="{loadingImage.source='http://favzone.com/images/crybutton/button04.jpg?v=0&r='+Math.random();}" />
<controls:LoadImages width="75" height="75" source="http://favzone.com/images/crybutton/button05.jpg"
doubleClickEnabled="true" doubleClick="{loadingImage.source='http://favzone.com/images/crybutton/button05.jpg?v=0&r='+Math.random();}" />
<controls:LoadImages width="75" height="75" source="http://favzone.com/images/crybutton/button06.jpg"
doubleClickEnabled="true" doubleClick="{loadingImage.source='http://favzone.com/images/crybutton/button06.jpg?v=0&r='+Math.random();}" />
<controls:LoadImages width="75" height="75" source="http://favzone.com/images/crybutton/button07.jpg"
doubleClickEnabled="true" doubleClick="{loadingImage.source='http://favzone.com/images/crybutton/button07.jpg?v=0&r='+Math.random();}" />
<controls:LoadImages width="75" height="75" source="http://favzone.com/images/crybutton/button08.jpg"
doubleClickEnabled="true" doubleClick="{loadingImage.source='http://favzone.com/images/crybutton/button08.jpg?v=0&r='+Math.random();}" />
<controls:LoadImages width="75" height="75" source="http://favzone.com/images/crybutton/button09.jpg"
doubleClickEnabled="true" doubleClick="{loadingImage.source='http://favzone.com/images/crybutton/button09.jpg?v=0&r='+Math.random();}" />
<controls:LoadImages width="75" height="75" source="http://favzone.com/images/crybutton/button10.jpg"
doubleClickEnabled="true" doubleClick="{loadingImage.source='http://favzone.com/images/crybutton/button10.jpg?v=0&r='+Math.random();}" />
<controls:LoadImages width="75" height="75" source="http://favzone.com/images/crybutton/button11.jpg"
doubleClickEnabled="true" doubleClick="{loadingImage.source='http://favzone.com/images/crybutton/button11.jpg?v=0&r='+Math.random();}" />
<controls:LoadImages width="75" height="75" source="http://favzone.com/images/crybutton/button12.jpg"
doubleClickEnabled="true" doubleClick="{loadingImage.source='http://favzone.com/images/crybutton/button12.jpg?v=0&r='+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 com.favzone.controls
{
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, false, 0, 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()
}
}
}