Archive

Posts Tagged ‘preloader’

Building a Preloader in ActionScript 3

March 1st, 2009 3 comments

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.

SEO Powered by Platinum SEO from Techblissonline