Archive

Posts Tagged ‘LoaderInfo’

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.

Loading external images with ActionScript 3

February 22nd, 2009 16 comments

One technique of loading external images is using the Loader class. It's similar to the URLLoader class but the Loader class loads and displays loaded images and SWF content. The Loader class is a part of the DisplayObject class; it is capable of displaying content as well as loading it. The goal of this technique is to make the loading operation as fast and hassle free as the queuing process of Getminted and other websites of similar nature.

To load external images using the Loader class, you need to create an object of the Loader class.

  1. var imgLoader:Loader = new Loader();

To load an image into the Loader Object, the load method of the Loader class is used, along with a URLRequest.

  1. var imgLoader:Loader = new Loader();
  2. imgLoader.load(new URLRequest('image.jpg'));

The LoaderInfo class also has events and event types that dispatch information about the progress of the load through the Loader class.

The code below traces a loaded message after the loader object has completed loading the image.

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

At this point all you have done is loaded in the image to the Loader Object. For the loaded image to display you will need to add the Loader object to the display list.


  1. addChild(imgLoader);

The complete source code looks like this.

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

hope this helps...

Do you need a working .fla of this including a preloader? Buy me a coffee and I'll send it to you via email. Remember to reference your email address.



SEO Powered by Platinum SEO from Techblissonline