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

We are going to do two main things in this section, first we will create the MovieClip container that will hold all of our thumbs, and then we will load all the thumbnail images in one go using a loop and the Loader Class.

Here is the outline of this section:

Creating a container movie clip and positioning.
Use a loop to load all the thumbs using the Loader Class.

Creating a Container Movie Clip for the Thumbs

It is possible to load the thumbs directly on the stage without using a container MovieClip, but we use a container movie clip to easily later manipulate all the thumbs in one go for things like positioning and registering event handlers.

We are going to break down our code into functions so that they are arranged in a logical manner. Our first function will be typed at the very bottom of all the existing code we have. Call this function createContainer:

function createContainer():void{

}

The first task for this function is to create a MovieClip container, we can simply do that by using the new keyword, but before we do that we need to create a variable to hold a reference to this MovieClip. We can't create our variable inside the function because that will make it temporary. So we need to define this variable at the top of our code outside the function to make sure that it remains for the entire show. Use the var keyword to create a variable called container_mc at top of the code along with the other variable definitions:

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;

We can now put a new MovieClip in this variable using our createContainer function:

function createContainer():void{
container_mc = new MovieClip();
}

We now position this MovieClip in accordance to the variables we retrieved from the XML file, namely, using the my_x and my_y properties:

function createContainer():void{
container_mc = new MovieClip();
container_mc.x = my_x;
container_mc.y = my_y;
}

We will now add this MovieClip to the display list so that any content we add to it is later will be visible:

function createContainer():void{
container_mc = new MovieClip();
container_mc.x = my_x;
container_mc.y = my_y;
addChild(container_mc);
}

You can learn more about the Display List by reviewing our tutorial on this topic.

Our function is now ready, but we have not actually requested its execution from any point yet! We need this function to be called when all the variables are ready and extracted from the XML file. So call the function using the () operator from within the processXML() listener function this way:

function processXML(e:Event):void {
var myXML:XML = new XML(e.target.data);

columns = myXML.@COLUMNS;
my_x = myXML.@XPOSITION;
my_y = myXML.@YPOSITION;
my_thumb_width = myXML.@WIDTH;
my_thumb_height = myXML.@HEIGHT;
my_images = myXML.IMAGE;
my_total = my_images.length();

createContainer();

}

Loading the Thumbnails

The previous section was easy, it is now time for the first tricky part of this tutorial: loading the thumbnails. We are going to put all the code relevant to this part in a separate function to make things organized. Loading images and SWF files is done in AS3 using the Loader Class. We are going to make use of a loop to create multiple instances of the Loader Class and load all the thumbnails in one go.

We are going to do this step by step, first of all, we are going to create this new function at the bottom of our existing code, we will call it callThumbs():

function callThumbs():void{

}

All of the code inside this function will be executed through a loop, We need this loop because we need to execute the same command multiple times for each and every thumbnail. The repeated code will involve (1) retrieving the URL of the thumbnail from our image XML list, (2) creating a new instance of the loader class to load the thumb URL, and (3) registering the loader with an event listener to show the image once loaded.

We will start off by creating the loop. Our loop will cycle as long as the counter i, does not exceed our total number of images:

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

}
}

Now will retrieve the URL of the thumb and store it in a local variable called thumb_url. This variable is only used within the loop, so there is no need to create it outside. i below is used to cycle through the elements in the XML file and it retrieves the actual URL by using the @ operator to get the value of that attribute:

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

var thumb_url = my_images[i].@THUMB;;

}
}

We will now create a new temporary instance of the Loader Class using the new keyword, and then instantly load the thumb image using the .load() method. This is pretty simple:

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));

}
}

Review our tutorial on using the AS3 Loader Class to learn more about this topic.

We need to use an event listener to show the images when they are fully loaded. To do this we will register with the Event.COMPLETE to load a special listener function called thumbLoaded which we will define later. Register the event using the .addEventListener() method:

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);

}
}

The Loader Class can only register such events through its instance of the ContentLoaderInfo Class. Review our tutorial on using the AS3 Loader Class to learn more about this topic.

We will now create the thumbLoaded listener function at the bottom of all of our existing code. This function will add the Loader Instances of our thumbs to the container_mc MovieClip display list to make them visible:

function thumbLoaded(e:Event):void{
var my_thumb:Loader = Loader(e.target.loader);
container_mc.addChild(my_thumb);
}

e.target.loader holds a reference to the instance of the Loader Class on to which the event listener was registered to indirectly.

The type Loader "casted" on e.target.loader to override strict data-typing requirements of the Flash compiler as the data type cannot actually be determined at compile time.

Our listener function is now ready and our previous callThumbs() is also done, we need to call this function to make it execute it when needed. Call it right below the createContainer() function from within the processXML listener function at the top:

For the first time in this tutorial you can test your movie now to see a visual output! Press Ctrl+Enter to see your thumbnails loaded. Well, you are just going to see ONE thumbnail on the stage because all the thumbnails are loaded over each other because we have not repositioned them.

AS3 Grid Gallery - One Thumb Shown

We are going to position these thumbnails across the grid in the next page.

Summary of this Page

Created a MovieClip container and positioned it in accordance with the XML data.
Create a loop to load all the thumbs using the Loader Class.
Used an event listener to add the thumbnails to the display list only when fully loaded.

In the next section we will position our thumbs in a grid manner.