Add images from XML into a grid-like structure

I see there are many many tutorials on creating horizontally oriented scrolling image galleries.
I'm trying to load and display images (read in dynamicaly with xml) into a rectangular grid format, say, 2 rows of 3 images.

I believe I understand the nuts and bolts about xml loaders, but my code is only showing what I think is the last image:

Actionscript Code:

function loadComplete(evt:Event):void
{
    //flashprojXMLLoader.removeEventListener(Event.COMPLETE, loadComplete);
    var flashXMLInfo:XML = XML(evt.target.data);
    flashProjDate = flashXMLInfo.project.@date;
    flashProjName = flashXMLInfo.project.@pname;
    flashProjTitle = flashXMLInfo.project.@ptitle;
    flashProjDesc = flashXMLInfo.project.@description;
    flashImage = flashXMLInfo.project.@image;
    var n=0;

    while (n<flashImage.length())
    {           
        for(var i:int = 0; i < 2; i++)
        {
            for(var j:int = 0; j<3; j++)
            {
                imageLoader.load(new URLRequest(flashImage[n]));
                imageLoader.x = j*200;
                imageLoader.y = i*200;
                addChild(imageLoader);
                trace("positioned image " + flashImage[n] + " at " + imageLoader.x + " , " + imageLoader.y);
                n++;
            }
        }   
            
    }

}

the trace command reveals that the coordinates are indeed right on where I expect them to be... only thing is on the stage, only one image shows up. The very last one.
What am I doing incorrectly? I'm not very experienced with the Loader class, I admit.
thank you
Don

It happens because these loops work too fast. So the program loops thru them before any image can be loaded and added. When the last loop is finished it stops and program has time to add image to the stage. That's why you can see only the last one.
You can work around this problem by making sure that image is on the stage before loading next one.
Actually, you can do it without loops at all.
Load the first image, then add it to the stage, and when it's added it will trigger Event.ADDED. You just have to add event listener and handler for this event. When it's triggered, go to another image.

When I was making my first gallery, I also encountered this problem, and this way worked for me :)

Hi, thanks very much for your advice.
"You can work around this problem by making sure that image is on the stage before loading next one. " How would I do that? Is there something like a pause or wait command in AS3? Would I need to set up a timer, so each picture has, say, a third of a second to load before moving on to the next one in the loop?

"Actually, you can do it without loops at all." I don't know how to load/display an image from an XML file any other way, really.
I could just position the images directly onto the stage, but my intent is to have XML data with each image. Every image will have its own clickable external link, and description that will show up in a text field.

I'll provide the script in its entirety here: (some of the imported libraries may be extra and not necessary)

Actionscript Code:

import flash.display.MovieClip;
import flash.display.*;
import fl.transitions.*;
import fl.transitions.easing.*;
import flash.events.*;



// UPDATE THIS SECTION WITH FLASHPROJECTS.XML DATA
// -------------- Load FLASH XML  info   -----

var flashProjDate:XMLList; // xml tag: date
var flashProjName:XMLList; // xml tag: pname
var flashProjTitle:XMLList; //  xml tag: ptitle
var flashProjDesc:XMLList; // xml tag: description
var flashImage:XMLList; // xml tag: image

var imageLoader:Loader = new Loader();
var flashprojXMLLoader:URLLoader = new URLLoader();
flashprojXMLLoader.load(new URLRequest("flashprojectlist.xml"));
flashprojXMLLoader.addEventListener(Event.COMPLETE, loadComplete);

function loadComplete(evt:Event):void
{
    //flashprojXMLLoader.removeEventListener(Event.COMPLETE, loadComplete);
    var flashXMLInfo:XML = XML(evt.target.data);
    flashProjDate = flashXMLInfo.project.@date;
    flashProjName = flashXMLInfo.project.@pname;
    flashProjTitle = flashXMLInfo.project.@ptitle;
    flashProjDesc = flashXMLInfo.project.@description;
    flashImage = flashXMLInfo.project.@image;
    var n=0;

    while (n<flashImage.length())
    {           
        for(var i:int = 0; i < 2; i++)
        {
            for(var j:int = 0; j<3; j++)
            {
                addChild(imageLoader);
                imageLoader.load(new URLRequest(flashImage[n]));
                imageLoader.x = j*200;
                imageLoader.y = i*200;
                trace("positioned image " + flashImage[n] + " at " + imageLoader.x + " , " + imageLoader.y);
                trace(Event.ADDED);
                n++;
            }
        }   
            
    }

}

Hey,

I have a better solution for you, how to position objects in a custom grid:

Link for the grid:
http://www.actionscript-library.com/?p=270

Link where I use this technique in a XML gallery:
http://blog.activeden.net/resources/...3-and-milkbox/

yikes... this is turning out to be more difficult that I thought... I thought it would be a simple matter. Thanks very much gentlemen!

Might try to devise a different method. This is going to be my portfolio site, and I should have a darn good grasp of what I put up there so I can describe how the code works.