Home / Tutorials / ActionScript / Progressive Image Loading /

Flash Tutorials

Progressive Image Loading - [ Tutorial ]

Posted by : Techload on Dec 02, 2010

 

5.0/5

To achieve this little trick we have to use a class called flash.display.Loader that has a method called loadBytes which allows to pass a ByteArray and fill the loader with incoming data.

Open a new project in Flash and press F9 to show the ActionScript editor.

Bellow is the code on how it works.

var _loader:Loader;
var _stream:URLStream;
var _data:ByteArray;

_loader = new Loader();         
addChild( _loader );

_data = new ByteArray();

_stream = new URLStream();
_stream.addEventListener( ProgressEvent.PROGRESS , Progress );
_stream.addEventListener( Event.COMPLETE , Complete );
_stream.load( new URLRequest( "test.jpg" ));


function Progress( e:Event ):void
{
    if( _stream.bytesAvailable != 0 )
    {
        DisplayData();
    }
}

function Complete( e:Event ):void
{
    if ( _stream.connected )
    { 
        _stream.close();
    }
}

function DisplayData():void
{
    if ( _stream.connected ) _stream.readBytes( _data , _data.length );
    _loader.unload();
    _loader.loadBytes( _data );            
}

Now I will explain the workflow of the code.

_loader - holds the loaded bytes

_stream - loads the image bytes

_data - holds image data

Next we've created a stream that loads the data. Also , to know the status of the loading we add two events listeners that can tell us in any moment the progress of the image loading.

During the loading we are calling a function DisplayData() to display the current data loaded.

In this function we push the bytearray data from the loading image inside the loader ( that was added to the stage )

Tot test the movie just press Ctrl+Enter. //push the aggregate bytearray of loaded image data in there.


Thanks for checking out this tutorial and hope you found it useful an easy to follow. If you have questions or just want to let me know it worked for you, drop a comment below anytime.

Visit my portfolio to see what else I'm working on.

Techload

1 comment

Add comment

  • Good article....

    It will be very helpful to me for my new file sharing application. :)

    Regards



    #  /  PM  /  posted on Jan 03, 2011
Please login to post comments.