Load an image with Actionscript 3

To load an image into flash with actionscript 3 the first thing you need to do is set up 2 variables. The first will be the loader which is what will actually load in the image. The second is the URL request which will tell flash where the image to be loaded is.

  1. var url:URLRequest = new URLRequest("myimage.jpg");
  2. var loader:Loader = new Loader();

Now we will call flash to load the image into the loader variable.

  1. loader.load(url);

However if we just have this, flash wont know what to do with it. So what we have to do is setup some event listeners which will call a function to tell flash what to do when it loads the file.

We will create one event listener to check what is happening while the image is loading.

  1. loader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, loadProgress);

At first you may be thinking "why do I need contentLoaderInfo in there? Why can't I just add an event listener straight onto the loader?" The reason for this is basically that the loader just holds the image whereas the contentLoaderInfo hold all the information about the file. So if you don't use contentLoaderInfo then you can't get any information about the file.

Create another event listener to check if the file has finished loading;

  1. loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loadComplete);

Now these 2 event listeners are calling some functions one called loadProgress and the other called loadComplete. So lets create those functions.

  1. function loadProgress(event:ProgressEvent):void
  2. {
  3. }
  5. function loadComplete(event:Event):void
  6. {
  7. }

In the loadProgress function you will notice that it is looking for a progress event. What this means is that while the image is downloading flash keeps checking this function to check the progress of the image download. This is called in the event listener that we created earlier.

In the loadProgress function we want to see the percentage of the file being downloaded. for this example we will just use the trace function.

  1. function loadProgress(event:ProgressEvent):void
  2. {
  3. var percentLoaded:Number = Math.round((event.bytesLoaded/event.bytesTotal) * 100);
  4. trace("Loading: "+percentLoaded+"%");
  5. }

What is happening here is we are getting the bytesLoaded from the image and dividing that by the bytesTotal of the image. This will get a number between 0 and 1. We then multiply that by 100 to get the percentage of the download. We also want to round this off so it won't display a number with a long decimal at the end like 13.2352274564. We then trace this out and when the image is downloading we will see how much of it has been downloaded.

Once the image has been downloaded we then need to tell Flash what to do with that image. What we will do in this instance is add it to the stage. So go into the loadComplete function and add this

  1. function loadComplete(event:Event):void
  2. {
  3. trace("Complete");
  4. addChild(loader);
  5. }

This tells flash that once the image has been downloaded add the loader to the stage. This will now display the image.

Your code should now look like this.

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

If you are using this inside a class then you would also need to import:

  1. import flash.events.*;
  2. import flash.net.URLRequest;
  3. import flash.display.Loader;

3 Responses to “Load an image with Actionscript 3”

  1. Dinesh Says:

    No doubt, Simple but Useful

  2. Poqo Says:

    Thanks, it works perfectly.

  3. Ahmad Says:

    I LOVE this tutorial .. I just started on flash cs 5.5 and this tutorial is quite helpful .. thanks and keep up the good work 🙂

Leave a Reply