Home > ActionScript 3.0 > Loading external images with ActionScript 3

Loading external images with ActionScript 3

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.



  1. February 23rd, 2009 at 07:15 | #1

    Thank you for this! After about 30 google searches I finally found an easy way to do it, all the other tutorials were huge, about loading xml, server scripts, etc, etc. I just wanted an image in my file lol!

    Anyways, thanks :)

  2. February 23rd, 2009 at 16:38 | #2

    I feel your pain Neticule. That’s the exact reason why I posted this article.

  3. February 26th, 2009 at 10:14 | #3

    Thank you for your work. But it is some problem in using your code.

    When I compile it then I recive the next error:

    ReferenceError: Error #1069:… addEventListner в flash.display.LoaderInfo;

    please help me?

  4. February 26th, 2009 at 14:43 | #4

    Hi Serge,
    There is a typo in the code. You need to change all the instances of addEventListner to addEventListener.

    Hope this helps.. If your still having trouble let me know and I’ll build the actual loader for you so you can download it.

  5. Groggles
    July 15th, 2009 at 22:59 | #5

    The code snippet below basically asks how you might check if a group of images has finished loading. Any help would be appreciated.

    imageA.load(new URLRequest(“http://www.example.com/someimage_1.jpg”));
    imageB.load(new URLRequest(“http://www.example.com/someimage_2.jpg”));
    //etc

    //make sure the image files are loaded
    //but how to do it without chaining functions called on successively completed events

    imageA.contentLoaderInfo.addEventListener( Event.COMPLETE, nextImgLoad);

    function nextImgLoad (e:Event):void {
    imageB.contentLoaderInfo.addEventListener( Event.COMPLETE, imageAnim);
    removeEventListener(Event.COMPLETE, nextImgLoad);
    //etc
    }

  6. August 4th, 2009 at 21:11 | #6

    Hi Groggles,
    I apologize for the late reply. Just got back from a well deserved holiday.

    Do you still need help with this? Or have you worked it out?

  7. Groggles
    August 10th, 2009 at 22:29 | #7

    Thanks for the response. I never did work it out. Just left an event listener on the last image. I’m assuming that using an array might be part of the answer. Anyhow, any help would be appreciated. Cheers.

  8. August 11th, 2009 at 16:14 | #8

    @Groggles

    There are a few ways you could achieve this and yes one of them is using an array.

    For example lets say you were reading the images from an xml file you would do the following.

    var numImages:Number; //declare total number of images var.
    var imgLoadedCount:Number;//declare the image counter variable.

    //once the xml is loaded start loading the images
    function xmlReady(evt:Event):void {

    xmlData = XML(xmlLoader.data);

    //get the total number of images
    numImages = xmlData.img.length();

    for( var i:Number = 0; i < numImages; ++i ){

    //get file name
    var imageName:String = xmlData.img[i].toString();

    var imgLoader:Loader = new Loader();

    // when image is ready call the imgReady function that
    will check if all images have been loaded.
    imgLoader.contentLoaderInfo.addEventListener
    (Event.COMPLETE, imgReady);

    imgLoader.load(new URLRequest(imageName));

    }
    }

    function imgReady(evt:Event):void{

    imgLoadedCount++; //update the image loaded count

    if(imgLoadedCount==numImages){
    //all images have finished loading
    }

    }

    Hope that makes sense…

  9. Groggles
    August 11th, 2009 at 19:00 | #9

    Complete sense. That’s really very helpful. I have integrated it into my code and it works as expected. any thanks.

  10. Groggles
    August 11th, 2009 at 19:00 | #10

    [Many]

  11. January 21st, 2010 at 18:10 | #11

    Would you be so kind to add the code that allows repositioning?

    The code works great, but I need to position the image.

    Thank you.

  12. January 21st, 2010 at 18:16 | #12

    Never mind. Figured it out.

    imgLoader.x=-100;
    imgLoader.y=-36;

  13. January 21st, 2010 at 18:28 | #13

    Hi Pharos,
    I was writing the response while you figured it out. Here it is any way..

    var imgLoader:Loader = new Loader();
    imgLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, loaderCompleteHandler);
    imgLoader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, preloaderHandler);

    function loaderCompleteHandler(e:Event):void{
    trace(‘Image has loaded.’);

    //create movieclip that will hold the img
    var imageHolder:MovieClip = new MovieClip();

    //Add the holder to the stage
    addChild(imageHolder);

    //Save the loaded bitmap to a local variable
    var image:Bitmap = (Bitmap)(e.target.content);

    // add the image to the movieclip
    imageHolder.addChild(image);

    //position the holder to where you want
    imageHolder.x = stage.width/2;
    imageHolder.y = 50;
    }

    function preloaderHandler(e:ProgressEvent):void{
    trace(‘bytesLoaded: ‘ + e.bytesLoaded);
    trace(‘bytesTotal: ‘ + e.bytesTotal);
    trace(‘percentage loaded: ‘ +
    Math.round((e.bytesLoaded/e.bytesTotal)*100) + “%”);
    }

    imgLoader.load(new URLRequest(‘http://www.flashnutz.com/FN.jpg’));

  14. cclater
    February 10th, 2010 at 16:02 | #14

    This was a very good description of the Loader class. Thank you. NOw my question is, how do you loop this code to outputting multiple images from an array? I can do it with shapes and such but for some reason this loader class seems to get in the way of allowing me to output more than just the last image in my array loop. I think it’s making me crazy…

  15. February 25th, 2010 at 05:24 | #15

    Thanks you very much!

    I am find to long time this codes! Wonderful working, thank again!

  16. April 30th, 2011 at 01:07 | #16

    It’s spooky how clever some ppl are. Tnhaks!

  1. March 1st, 2009 at 22:41 | #1
SEO Powered by Platinum SEO from Techblissonline