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

In this part of the tutorial we will make our thumbs load the full version of themselves when a thumb is clicked. We are going to use the Loader Class to load the external image the same way we did with thumbs. However, to attach the code to all the thumbs in one go we will make use of some advanced AS3 Event Handling techniques.

The outline of this section is as follows:

  1. Registering for the mouse click event.
  2. Loading the full image when a thumb is clicked.
  3. Unloading the full image when the full image is clicked.

Registering For the Mouse Click

I wouldn't usually put the registration of an event handler as a step by itself in a tutorial, but this tutorial is a little bit different. We need to execute a unique command from each of our thumbs and that would usually require us to register each thumb on its own to an event listener. However, AS3 event handling system has a unique feature called event propagation. This feature lets a parent object pass an event listener registered to it to an unlimited number of children automatically - saving effort and time as you can register the event with a parent of a group of children instead of registering it with each and every child.

We are going to use this technique for registering the mouse click event to the thumbnails. Instead of registering the event listener to the thumbnails, we will register this event to the parent container_mc. The purpose of our event listener would be to load the full image, so we will call this function callFull(). We are going to register this function with container_mc in the createContainer() function:

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

container_mc.addEventListener(MouseEvent.CLICK, callFull);

}

Loading the Full Image

To actually load the full image we obviously have to define that callFull() listener function. We are going to create an instance of the Loader Class to load our external image. At the bottom of your entire code create this function:

function callFull(e:MouseEvent):void{
var full_loader:Loader = new Loader();
}

We need to pass the URL of the full image to load to this instance of the Loader Class. We have the URL as an attribute in our XML array of images. We need a unique reference from each thumb to tell us what image to load from that XML array. The easiest method for creating this reference is by setting the thumb's name property as its number in the XML list and this way we can know which full image to load. Go back to the callThumbs() function and add this line to save the value of i in each thumb as its name:

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.name = i;

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

if (x_counter+1 < columns){
x_counter++;
} else {
x_counter = 0;
y_counter++;
}

}
}

We now can use this reference to load the full image we need from the XML list the same way we retrieved the thumb url before. We will create a temporary variable and then pass it to the .load() method of the Loader Class to load the image:

function callFull(e:MouseEvent):void{
var full_loader:Loader = new Loader();
var full_url = my_images[e.target.name].@FULL;
full_loader.load(new URLRequest(full_url));
}
The reference to e.target is a reference to the thumbnails clicked. You can use e.currentTarget to refer to the parent MovieClip to which the event was registered.

Our image will not be displayed because we did not add it to the display list. Just like the thumbs we need to display it only after it successfully loads. However, instead of register for the event .COMPLETE this time we will register for the event .INIT which is triggered when the file is downloaded and initialized. When a file is initialized this means that we can retrieve all its properties, and that differs from the completion of the download process, as the file might be downloaded, but still not initialized. We need to access the properties of our image to be able to center it on the stage.

To do all of this we will start off by register for the event .INIT with a function called fullLoaded which will deal with the image once it loads:

function callFull(e:MouseEvent):void{
var full_loader:Loader = new Loader();
var full_url = my_images[e.target.name].@FULL;
full_loader.load(new URLRequest(full_url));
full_loader.contentLoaderInfo.addEventListener(Event.INIT, fullLoaded);
}

Our fullLoaded() listener function has two functions, (1) display the instance of the Loader Class on stage, and (2) center it. Adding the object to the display is pretty simple, you just use the addChild() method. Centering the image on the screen is a little bit trickier, as it will require us to retrieve the width of the stage, the width of the image and then use a little bit of algebra to get it centered. Here is a simple diagram showing how this is supposed to work:

AS3 Grid Gallery - Center Image

This same technique is used for the height as well. Now we can code it simply by pasting the following at the bottom of our existing code:

function fullLoaded(e:Event):void{
var my_loader:Loader = Loader(e.target.loader);
addChild(my_loader);
my_loader.x = (stage.stageWidth - my_loader.width)/2;
my_loader.y = (stage.stageHeight - my_loader.height)/2;
}

You can test your movie now to see that when you click on a thumb the full version of it shows! (You can't remove it though, and that's what we'll do next!)

AS3 Grid Gallery - Full Image Shown

So how do we remove this image from the screen? We need to add another event listener to it and simply tell it to unload the image and remove the loader from the display list. First, lets register the event listener. Go to the fullLoaded() listener function and register for the MouseEvent.CLICK:

function fullLoaded(e:Event):void{
var my_loader:Loader = Loader(e.target.loader);
addChild(my_loader);
my_loader.x = (stage.stageWidth - my_loader.width)/2;
my_loader.y = (stage.stageHeight - my_loader.height)/2;
my_loader.addEventListener(MouseEvent.CLICK,removeFull);
}

Our function now has to unload the image by using the unload() method of the Loader Class and then remove the loader completely from the display list using the removeChild() method. This function should go below all of your existing code:

function removeFull(e:MouseEvent):void{
var my_loader:Loader = Loader (e.currentTarget);
my_loader.unload();
removeChild(my_loader);
}

Okay, test your movie and you should see that you can click on a full image to remove it from the screen!

AS3 Grid Gallery - Full Image Shown

We could do this in the polishing up stage, but I thought I'll deal with it now because it is an obvious annoyance. You may have noticed that you can click on the thumbnails on the edges of the screen and they will show their full images, if you do that and then you click on a full image to remove it, you will see the previous one still behind it. You can also click multiple times on an image to load several copies of itself on top of each other.

The solution to this problem is to remove the event listener when not needed and put it back when needed. The event listener we are talking about is the one attached to the container_mc and which is responsible for loading the full images. We are going to unregister this event when someone clicks on a thumb. Look for the listener function called callFull() and simply let it unregister itself from the container this way:

function callFull(e:MouseEvent):void {
var full_loader:Loader = new Loader();
var full_url = my_images[e.target.name].@FULL;
full_loader.load(new URLRequest(full_url));
full_loader.contentLoaderInfo.addEventListener(Event.INIT, fullLoaded);

container_mc.removeEventListener(MouseEvent.CLICK, callFull);

}

We can register this one again when someone removes the full image. Find the removeFull() listener function and use it to register the callFull() listener function again:

function removeFull(e:MouseEvent):void{
var my_loader:Loader = Loader (e.currentTarget);
my_loader.unload();
removeChild(my_loader);

container_mc.addEventListener(MouseEvent.CLICK, callFull);

}

Great, that should do it perfectly now. Test it locally to see your grid gallery working like a charm!

AS3 Grid Gallery - Full Image Shown

We have done a lot but we are not finished yet. We still need to do add preloaders, add some tweens, and do some final polishing. We'll do these in order, first moving to the preloaders in the next page.

Summary of this Page

  1. Registered container_mc with a mouse click event.
  2. Creating an event listener to call the full image when a thumb is loaded.
  3. Created an event listener to remove the full image when it is clicked.

In the next section we will create preloaders for all our images.

Next page