Display a Custom Loader while Loading Images
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
<mx:Canvas creationComplete="loadImage()">
<mx:Script>
private var m:Matrix;
private function loadImage():void {
var m:Matrix = new Matrix();
m.createGradientBox(450, 40);
img.addEventListener(ProgressEvent.PROGRESS, progress);
img.load("http://server.com/logo.jpg");
}
private function progress(event:Event):void{
grid.graphics.clear();
grid.graphics.beginGradientFill("linear", [0x0000ff, 0xffffff], [1, 1], [0x00, 0xff], m);
grid.graphics.drawRect(0, 0, (img.bytesLoaded / img.bytesTotal) * 300, 40);
grid.graphics.endFill();
}
</mx:Script>
<mx:Canvas id="grid" height="40" width="300"/>
<mx:Image id="img" y="40"/>
</mx:Canvas>
</mx:Application>
Related examples in the same category
