HOWTO: Using Loaders in AS3

September 20, 2007 — drawk

What are these ominous Loaders is what people ask when they first start into AS3?  Loaders help to facilitate the loading of sprites or content that aren’t in the DisplayObjectList tree just yet.  Loaders allow you to load all types of files swf, jpg, png, etc and put them right in the display list.  A very simple basic load is below to describe the basics of loading content.  This can be used many ways within individual classes or shared and add in multiple file downloading.  You might add zip file downloading and then automatic upzipping of assets to load in.  There are many ways to architect your downloading and preloading but this is the basics of a loader in AS3.


var request:URLRequest = new URLRequest("content.swf");
var loader:Loader = new Loader();

loader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, loadProgress);
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loadComplete);

function loadProgress(event:ProgressEvent):void {
var percentLoaded:Number = event.bytesLoaded/event.bytesTotal;
percentLoaded = Math.round(percentLoaded * 100);
trace("Loading: "+percentLoaded+"%");
}
function loadComplete(event:Event):void {
trace("Complete");
}

loader.load(request);
addChild(loader);

All DisplayObject instances have a loaderInfo property consisting of a LoaderInfo instance that provides information about that object’s loaded content (if applicable). The Loader instance contains this property along with an additional contentLoaderInfo property which represents the LoaderInfo instance of the content being loaded. When loading content into a Loader, the contentLoaderInfo property is the object you would want to add listeners to for information about the loaded content such as when new bytes are being loaded into the player (for a preloader) and when loading has completed.

The events associated with LoaderInfo instances includes:

  • complete:Event — Dispatched by the associated LoaderInfo object when the file has completed loading. The complete event is always dispatched after the init event.
  • httpStatus:HTTPStatusEvent — Dispatched by the associated LoaderInfo object when a network request is made over HTTP and Flash Player can detect the HTTP status code.
  • init:Event — Dispatched by the associated LoaderInfo object when the properties and methods of the loaded SWF file are accessible. The init event always precedes the complete event.
  • ioError:IOErrorEvent — Dispatched by the associated LoaderInfo object when an input or output error occurs that causes a load operation to fail.
  • open:Event — Dispatched by the associated LoaderInfo object when the loading operation starts.
  • progress:ProgressEvent — Dispatched by the associated LoaderInfo object as data is received while load operation progresses.
  • unload:Event — Dispatched by the associated LoaderInfo object when a loaded object is removed.

[source]

Possibly related posts: (automatically generated)

Posted in ACTIONSCRIPT3, AS3, FLASH, FLEX, GAMEDEV, PERFORMANCE, USER EXPERIENCE.

13 Responses to “HOWTO: Using Loaders in AS3”

  1. GadgetGadget.info - Gadgets on the web » Blog Archive » HOWTO: Using Loaders in AS3 Says:
    September 20, 2007 at 7:48 am

    [...] darmano wrote an interesting post today!.Here’s a quick excerptvar request:URLRequest = new URLRequest(”content.swf”); var loader:Loader = new Loader(); loader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, loadProgress); loader.contentLoaderInfo.addEventListener(Event. … [...]

  2. AS3 BulkLoader Useful Flash Asset Loading Kit by Arthur Debert « [ draw.logic ] Says:
    November 27, 2007 at 6:53 pm

    [...] AS3 Loaders are very useful, but when you have large projects there is always a pause and focus on loading scenarios and architecture needed for your loading scenarios, sometimes this can literally eat days and entirely change performance with wrong moves. BulkLoader is a well written kit from Authur Debert that makes loading scenarios or using BulkLoader as a base to your loading situations a great pluggable piece of code that has many excellent features. [...]

  3. cksachdev Says:
    December 3, 2007 at 4:40 am

    cool introduction to loader ..

  4. mode Says:
    December 19, 2007 at 3:55 pm

    kewl
    so if i wantd to load an external swf and display it twice on the screen, with different dimensions, how could that be done? could i make a copy of the loader?

  5. drawk Says:
    December 28, 2007 at 1:55 am

    Mode you could load the content into two Sprites. So instead of just addChild you would first add a sprite, then another and attach it to those, then add them to the main stage. Then you can size the Sprites as containers.

  6. bobcat goldthwait Says:
    January 8, 2008 at 1:48 am

    I have a list of images that i’ve looped overand loaded with the Loader class, but I’m having a tough time assigning them unique names.
    I want unique names because I want to know what loader the user clicks on (using mouse event handling).
    Is there a way to assign loaders a name or some unique tag so i can retrace what the user clicked on?

  7. drawk Says:
    January 8, 2008 at 8:07 am

    Sounds like you need aurthur debert’s bulk loader. This makes handling many loaders very simple.

    http://www.stimuli.com.br/trane/2007/nov/25/loading-reloaded/

  8. Xavier Says:
    February 6, 2008 at 11:07 pm

    Hey all, what do i do if i have an exsisting movie clip, and i want to load an external swf from a url into it?

    Thanks

    Xavier

  9. ryan Says:
    February 7, 2008 at 2:08 am

    You can do it in the movieclip but if you need to do it from the container (load one in then load another movie into that) you will have to get a reference to it and then you can just [obj].addChild like any other object. There are lots more ways to do it, it really depends on where the controller is at. This sample loads into itself, you can easily get the loader and add the child to an object already in your stage or loaded in.

  10. Ashok Says:
    March 4, 2008 at 3:22 am

    hi ,

    I have an issue .I have to load an dynamically load images into movie clip in flash cs3 as3.

    The code is available in the link: http://drawlogic.com/2007/09/20/howto-using-loaders-in-as3/

    with the code

    1. var request:URLRequest = new URLRequest(”content.swf”);
    2. var loader:Loader = new Loader();
    3.
    4. loader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, loadProgress);
    5. loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loadComplete);
    6.
    7. function loadProgress(event:ProgressEvent):void {
    8. var percentLoaded:Number = event.bytesLoaded/event.bytesTotal;
    9. percentLoaded = Math.round(percentLoaded * 100);
    10. trace(”Loading: “+percentLoaded+”%”);
    11. }
    12. function loadComplete(event:Event):void {
    13. trace(”Complete”);
    14. }
    15.
    16. loader.load(request);
    17. addChild(loader);

    But only one image can be uploaded I want to load External IMAGES into a Movie Clips.

    Pease help me in this.

    With Regards
    AShok

  11. common sense Says:
    July 4, 2008 at 10:00 am

    if you read event descriptions above, INIT is when the external is actually in a ‘ready’ state… COMPLETE you would use to inject variables required into an external asset if they were desired/required.

  12. coderx Says:
    July 6, 2008 at 3:09 pm

    good tutorial, just if addChild() could be in loadComplete -function.

    And your pages look WERY PERFECT!!!!! in my taste..

  13. Таракан Says:
    July 16, 2008 at 10:32 pm

    Нифтяк!

Leave a Reply

« HOWTO: Silverlight Preloader with Downloader

AS3 Animated Bitmap Class »