Flash AS3: position loaded images from loop based on image height

Question

I'm trying to dynamically stack images that are being pulled in via an xml file. Below is what I'm doing, and it almost works. The problem is that it only seems to fire off the event complete function on the very last one, instead of going for all of them. Is there a way to make it run the even.complete function for each image?

function aboutfileLoaded(event:Event):void {
    aboutXML = new XML(aboutTextLoader.data);
for(var l:int = 0; l < aboutXML.aboutimages.image.length(); l++)
    {
            imageLoader = new Loader();
            imageSource = aboutXML.aboutimages.image[l];

            if (imageSource != "") {
                    this.imageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, aboutimageLoaded);
                    this.imageLoader.load(new URLRequest(imageSource));

                    //aboutBox.aboutContent.addChild(imageLoader);
                    //imageLoader.y = imageYpos;
                    //imageYpos = imageYpos + 50;
            }

    }
}

function aboutimageLoaded(event:Event):void {
            aboutBox.aboutContent.addChild(imageLoader);
            this.imageLoader.y = imageYpos;
            imageYpos = imageYpos + this.imageLoader.height;
}

Answer 1

I use a simple Image class I wrote for loading all images.

public function loadImages(xml:XML):void {
    for each(var img:XML in xml.images) {
        var i:Image = new Image(img.src, img.width, img.height);

        i.loader.contentLoaderInfo.addEventListener(Event.COMPLETE, positionImage);
    }
}

/**/

private function positionImage(e:Event):void {
    var i:Image = e.target;
    gallery.addChild(i);
    // Do the positioning.
}

In your code above, you could always just change your aboutimageLoaded function:

// In aboutfileLoaded() change all "this.imageLoader" to just "imageLoader"

function aboutimageLoader(event:Event):void {
    aboutBox.aboutContent.addChild(event.target);
    event.target.y = imageYpos;
}

Answer 2

each Loader can only deal with one job at a time, so either you want to stack the jobs to load one after another:

//Global vars
loadIndex:int = 0; 
imageLoader = new Loader();
imageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, aboutimageLoaded);
loadImage();

private function loadimage(){
    if(aboutXML.aboutimages.image[loadIndex] != null){
        imageSource = aboutXML.aboutimages.image[loadIndex];
        if (imageSource != "") {
            imageLoader.load(new URLRequest(imageSource));
        }
    }
}

function aboutimageLoaded(event:Event):void {
    var holder = (ev.content as Bitmap).clone();
    aboutBox.aboutContent.addChild(holder);
    holder .y = imageYpos;
    imageYpos = imageYpos + holder.height;
    loadIndex ++;
    loadimage();
}

or make multiple instances of Loaders, one for each:

for(var l:int = 0; l < aboutXML.aboutimages.image.length(); l++)
    {
            var imageLoaderTemp = new Loader();
            imageSource = aboutXML.aboutimages.image[l];

            if (imageSource != "") {
                    imageLoaderTemp.contentLoaderInfo.addEventListener(Event.COMPLETE, aboutimageLoaded);
                    imageLoaderTemp.load(new URLRequest(imageSource));
            }
    }
}

function aboutimageLoaded(event:Event):void {
            aboutBox.aboutContent.addChild(event.target);
            event.target.y = imageYpos;
            imageYpos = imageYpos + event.target.height;
}