<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    initialize="appInit()"
    layout="absolute" 
    viewSourceURL="srcview/index.html"
    backgroundGradientAlphas="[1.0, 1.0]" 
    backgroundGradientColors="[#FFFFFF, #FFFFFF]">
    
    <mx:Script>
        <![CDATA[
        
            // Progressive Image Loading
            // create by Ted Patrick ted@adobe.com
        
            import flash.net.URLStream;
            import flash.net.URLRequest;
            import flash.utils.getTimer;
            
            // loader to hold the loaded bytes
            public var loader:Loader;
            
            // URLStream to load the image bytes
            public var imageStream:URLStream;
            
            // ByteArray to hold aggregate image data 
            public var imageData:ByteArray;

            // Set up initial conditions when the application initializes            
            public function appInit():void
            {
                //create a URLStream to load data in. We will reuse this!
                imageStream = new URLStream();
                //add some event listeners for PROGRESS and COMPLETE
                imageStream.addEventListener( ProgressEvent.PROGRESS , imageStreamProgress );
                imageStream.addEventListener( Event.COMPLETE , imageStreamComplete );
                
                //create a fresh loader instance
                loader = new Loader();
                
                // add the new loader into the imageCanvas
                // since loader isn't a UIComponent we use the rawChildren
                // not a good practice but it works!                
                imageCanvas.rawChildren.addChild( loader );
            }
            
            public function imageStreamProgress( event:Event ):void
            {
                // if there are no bytes do nothing
                if( imageStream.bytesAvailable == 0 ) return
                
                // ooo bytes process the image data
                this.processImageData();
            }
            
            public function imageStreamComplete( event:Event ):void
            {
                // if connected, stop that.
                if ( imageStream.connected ) imageStream.close();
                
                // lets refresh the displayList after rendering cycle
                imageCanvas.callLater( this.processImageData );
            }
            
            public function processImageData():void
            {
                // if connected, read all the bytes that have been loaded into the aggregate bytearray
                if ( imageStream.connected ) imageStream.readBytes( imageData , imageData.length );
                
                // clean out all the crud in that loader
                loader.unload();
                
                //push the aggregate bytearray of loaded image data in there.
                loader.loadBytes( imageData );            
            }
            
            public function loadImage( input:String ):void
            {
                //if connected we need to stop that
                if ( imageStream.connected ) imageStream.close();
                
                //lets load a new image url
                imageStream.load( new URLRequest( input + '?' + getTimer() ) );
                
                // clean out all the crud in that loader
                loader.unload();    
                
                //create a fresh bytearray to store aggregate image data            
                imageData = new ByteArray();
            }
            
        ]]>
    </mx:Script>

    <mx:Button click="loadImage('http://onflex.org/flexapps/applications/ProgressiveImageLoading/png.png')" y="10" label="Load PNG1" x="10"/>
    <mx:Button click="loadImage('http://onflex.org/flexapps/applications/ProgressiveImageLoading/tpng.png')" y="10" label="Load PNG2" x="105"/>
    <mx:Button click="loadImage('http://onflex.org/flexapps/applications/ProgressiveImageLoading/gif.gif')" y="10" label="Load GIF" x="200"/>
    <mx:Button click="loadImage('http://onflex.org/flexapps/applications/ProgressiveImageLoading/jpg.jpg')" y="10" label="Load JPG" x="285"/>
    <mx:Canvas id="imageCanvas" left="10" top="40" right="10" bottom="10"/>
    
</mx:Application>