Load images from XML file only writing last file loaded to screen

Question

Im using an XML file to store info about sets of data, the code needs to load the XML file, loop through a subset of the root node and then use the information gathered to load in a number of image files.

I've got as far as loading an image in but it's always the last one from the set. Tracing the loadPath appears to work in that it displays 2 individual and correct paths

Presumably imgLoader is being overwritten each time the loop runs so how would I write the current instance to the stage and then move onto another? Have I been a bit cackhanded?

var thumbPath : String = "data/images/pre/thumbs/";
var loadPath : String;

xmlLoader.load(new URLRequest("data.xml"));

xmlLoader.addEventListener(Event.COMPLETE, processXML);
function processXML(e:Event):void {
    myXML = new XML(e.target.data);

    var dbLength:uint = myXML.SECTION[0].DOCUMENT.length();

    // For loop collects info
    for (var i:int = 0; i < dbLength; i++){
        mcArray[i] = myXML.SECTION.DOCUMENT.@TITLE[i];

    };
    for each (var value:String in mcArray) {
            loadPath = thumbPath + value + ".png";
            // trace(loadPath);
            imgLoader.load(new URLRequest(loadPath));
                this.addChild(imgLoader);
    };
} 

Answer 1

You could do a this a few different ways depending on how you want to display the images when they load. First/Easiest way is to create a new image loader for each image inside the for loop instead of overwriting it every time. The second way is to load one at a time (no loop), and on load complete take the bitmap data and create a new bitmap, display that new bitmap on the screen, and then load the next image with the same loader.