Mega Code Archive

 

Categories / Flex / Graphics

 

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>