AS3:: an array of loaded through xml images with different widths

Question

How to write the mini[i].x = i * 1280;? line, in the code below, to load images one next to the another.

Let's say 7 images - all with different widths. Because this mini[i].x = i * 1280; works only for image with the same width.

xml1 = new XML(URLLoader(event.target).data);
var i:Number;
mini = new Array(xml1.obrazek.length());            
count = xml1.obrazek.length();
for (i=0; i<count; i++)
{   
    mini[i] = new Miniaturka(xml1.obrazek[i].attribute("id"),i);
    addChild(mini[i]);
    mini[i].x = i * 1280;
}

I wan't to create a galery like you can find in this website...:

http://www.adartis.pl/#portfolio

Answer 1

You would use a variable to keep track of the current x position, and keep adding to it as you loop over the objects:

xml1 = new XML(URLLoader(event.target).data);
var i:Number;
var currentX:Number = 0;
mini = new Array(xml1.obrazek.length());            
count = xml1.obrazek.length();
for (i=0; i<count; i++)
{   
    mini[i] = new Miniaturka(xml1.obrazek[i].attribute("id"),i);
    addChild(mini[i]);
    mini[i].x = currentX;
    currentX += mini[i].width;
}

EDIT:

Since gathering the width of the object is an asynchronous process, you will likely need to wait until each Miniaturka has received its width from the sizeHandler method before attempting to create and position the next instance of Miniaturka.

One way you can do this is to re-dispatch the PARSE_COMPLETE event from your sizeHandler and listen for that event in the code where you're instantiating Miniaturka.

You would have to get rid of the for-loop, and instead position the old instance and create the new instance once the event has been handled.