Creating an XML Grid Image Gallery in Flash (ActionScript 3.0)

By Blue_Chi | Flash CS3 | ActionScript 3.0 | Intermediate | Page 1, 2, 3, 4, 5, 6, 7, 8

Our thumbs are all loaded over each other and cannot be seen. In this section of the tutorial we will fix that by aligning the thumbnails in a grid manner using the logic of an if conditional and a couple of variables. This section will update the code of the callThumbs() function as it is the one responsible for the loading and positioning of the thumbnails:

This section is divided into two sections:

Positioning the thumbs horizontally.
Converting the line of thumbs into a gird.

Positioning the Thumbs Horizontally

A grid is essentially a set of lines placed below each other, so it is easier to make one by creating a single row of thumbs and then breaking it down than trying to create a grid from scratch, and that is what we will do.

The horizontal place of an object is controlled by its .x property. We will use this property to place our thumbs next to each other. We are going to get the distance required to position each thumb by calculating the width of thumbs before it using the formulate illustrated below:

AS3 Grid Gallery - Horizontal Layout

If you recall that the first element in our XML list is actually as position zero (and our loop counter i starts counting from zero as well), and that the width of each thumb is equal to my_thumb_width then this means that we can multiply the my_thumb_width by i to get the right position for our current thumb in the loop. We write that in code this way:

You can now test your movie (Ctrl+Enter) to see that all your thumbs are now aligned horizontally.

AS3 Grid Gallery - Thumbs Horizontally Aligned

We are going to add some spacing to these images by adding a spacing value to the width before we multiply it. Update the last line we wrote as shown below:

Again, you can test your movie again to see your thumbs spaced out.

AS3 Grid Gallery - Spaced Out

We now have our thumbs aligned horizontally. We will next convert this into a grid layout.

Creating the Gird

When you create a grid layout you count the images horizontally until you reach the end of the row and then you go down and start all over again until you reach the same number, and just repeat:

AS3 Grid Gallery - Grid Counting

Currently, our code counts forwards forever and does not stop to start all over. The counter variable that we use in our code is i as you have seen and we cannot change the value of this one the go because it also refers to the number item in the XML list. We need to create another counter variable which we will call x_counter to take care of the positioning instead of relying on i alone. Define this variable at the top of the code and assign the value Zero as its initial value:

var columns:Number;
var my_x:Number;
var my_y:Number;
var my_thumb_width:Number;
var my_thumb_height:Number;
var my_images:XMLList;
var my_total:Number;

var container_mc:MovieClip;

var x_counter:Number = 0;

Then replace the width multiplier with x_counter instead of i in the callThumbs() loop:

function callThumbs():void{
for (var i:Number = 0; i < my_total; i++){

var thumb_url = my_images[i].@THUMB;;
var thumb_loader = new Loader();
thumb_loader.load(new URLRequest(thumb_url));
thumb_loader.contentLoaderInfo.addEventListener(Event.COMPLETE, thumbLoaded);

thumb_loader.x = (my_thumb_width+10)*x_counter;

}
}

We need the loop to increase the value of x_counter by 1 each time it cycles through the loop the same way i increases. We can do this by using the ++ operator this way:

function callThumbs():void{
for (var i:Number = 0; i < my_total; i++){

var thumb_url = my_images[i].@THUMB;;
var thumb_loader = new Loader();
thumb_loader.load(new URLRequest(thumb_url));
thumb_loader.contentLoaderInfo.addEventListener(Event.COMPLETE, thumbLoaded);

thumb_loader.x = (my_thumb_width+10)*x_counter;

x_counter++;
}
}

Just as I have explained earlier, we need this counter to restart and count from zero each time it hits the end of the row. The end of the row is maximum number of columns we have in each row. We are going to update the last line we added by using a conditional to increase the value of x_counter only if x_counter is less than the number of columns, if it is not then we will reset the value of x_couner to zero.

A small problem we have with our code is that the x_counter is zero relative just like i (this means that the first item in its list is at place zero), so to actually have the number of images currently on stage we need to add 1 to it before we check if it less the number of columns. Simply update the code this way to take this into consideration:

This should position your thumbs in a systematic horizontal manner, but if you have noticed we haven't said anything about the vertical position yet. You can test your movie now to see that your thumbs no longer go beyond the screen. Our line of thumbs is broken down to rows, but these rows are placed over each other.

AS3 Grid Gallery - Horizontal Sorted

We are going to deal with the vertical alignment now which works exactly the same way as the horizontal alignment, we are going to need a counter, and we will use the height obviously for it, but instead of increasing the counter in each loop cycle, we are only going to increase the counter only each time the x_counter is restarted. Start off by creating a new y_counter at the start of our code and set its initial value as zero.

We are now going to set the y property of our thumbs by using the new multiplier and the my_thumb_height value instead of the width this time. To do this update the callThumbs() function this way:

Finally we now need to increase the rows only each time the x_counter is restarted, we can do this by adding a line to do this in our conditional:

That should do it. You can test your movie now to see your thumbs aligned in a gird manner! Congratulations!

AS3 Grid Gallery - Aligned!

We have finished the hardest of the tutorial, but we still need to make our thumbs load the full version of themselves. That is an easy take which will take care of in the next page.

Summary of this Page

Aligned the thumbs horizontally by using the width of previous thumbs.
Used a counter and a conditional to restart the count once the row was filled.
Used another counter to move the thumbs to the next row each time the horizontal counter was restarted.

In the next section we will make our thumbs load a full image of each thumb.