Home > ActionScript 3.0 > Building a Preloader in ActionScript 3

Building a Preloader in ActionScript 3

We are going to explore how to build a preloader in as3.  Before building the preloader you will need to understand how to load external images/data with ActionScript 3.

If you read the loading external images post you will know that the image was loaded into the contentLoaderInfo property of the Loader object. This is what the code looks like.

  1. var imgLoader:Loader = new Loader();
  2. imgLoader.contentLoaderInfo.addEventListner(Event.COMPLETE,
  3. loaderCompleteHandler);
  4.  
  5. function loaderCompleteHandler(e:Event):void{
  6. trace('Image has loaded.');
  7. }
  8.  
  9. imgLoader.load(new URLRequest('image.jpg'));

To monitor the loading progress of this externally loaded image we need to use the LoaderInfo object which is a package of information about the load that is passed to the event listener of contentLoaderInfo. The properties of the LoaderInfo class along with the event object will provide all the information needed to build our preloader.

The available properties of the LoaderInfo class are:

  • bytesLoaded
  • bytesTotal
  • content
  • frameRate
  • height
  • width
  • loader

The available event types of the LoaderInfo class are:

  • COMPLETE
  • INIT
  • PROGRESS
  • UNLOAD

From the event types above we need to use the PROGRESS event type like the following.

  1. imgLoader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS,
  2. preloaderHandler);

Then to display the bytes being loaded we need to use the bytesLoaded and bytesTotal properties, and trace them when the function preloaderHandler is triggered. If you divide the 2 and multiply by 100 you will get the percentage loaded.

  1. function preloaderhandler(e:ProgressEvent):void{
  2. trace('bytesLoaded:  ' + e.bytesLoaded);
  3. trace('bytesTotal:  ' + e.bytesTotal);
  4. trace('percentage loaded:  ' +
  5. Math.round((e.bytesLoaded/e.bytesTotal)*100) + "%");
  6. }

The complete source code looks like this.

  1. var imgLoader:Loader = new Loader();
  2. imgLoader.contentLoaderInfo.addEventListner(Event.COMPLETE,
  3. loaderCompleteHandler);
  4. imgLoader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS,
  5. preloaderHandler);
  6.  
  7. function loaderCompleteHandler(e:Event):void{
  8. trace('Image has loaded.');
  9. }
  10.  
  11. function preloaderhandler(e:ProgressEvent):void{
  12. trace('bytesLoaded:  ' + e.bytesLoaded);
  13. trace('bytesTotal:  ' + e.bytesTotal);
  14. trace('percentage loaded:  ' +
  15. Math.round((e.bytesLoaded/e.bytesTotal)*100) + "%");
  16. }
  17.  
  18. imgLoader.load(new URLRequest('image.jpg'));

Enjoy. I'll write a post soon on how to integrate this preloader script with a simple animation.

  1. Mark
    April 5th, 2009 at 03:18 | #1

    Thanks for the hints. I’ve really looked everywhere for this one.

  2. firos
    October 27th, 2009 at 02:56 | #2

    not very useful. because this type of examples we can see anywhere in the net. But who can write a function to load images dynamically in a loop. That means addEventListner must be inside a loop

    Thank you

  3. November 2nd, 2009 at 22:03 | #3

    huh? Was that a question firos?

  1. August 6th, 2009 at 16:09 | #1
SEO Powered by Platinum SEO from Techblissonline