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 add preloaders for both the thumbnails and the full images. For doing this we will be using the ProgressBar component. You should be able to use it with ease if you have read our previous tutorial on using the Loader Class.

Adding the ProgressBar Component graphical assets to our SWF.
Adding the ProgressBar to the thumbnails.
Adding the ProgressBar to the full image.

Adding the ProgressBar Component graphical assets to our SWF

The graphical assets of the ProgressBar components are not by default included in any SWF you make. We need to add it to the library of your FLA in order to be able to use it. Doing this is pretty easy: Open up the Components Panel by going through Window>Components. Now look for the ProgressBar Component under the User Interface category, once you find it drag a copy of the ProgressBar component to the stage... then delete it! If you open your library now (Ctrl+L), you will see that you have the assets needed for the ProgressBar in there.

AS3 Grid Gallery - ProgressBar Component

You can learn more about the ProgressBar Component by reviewing our tutorial on the AS3 Loader Class which explains in detail how it's used in practice.

We have the ProgressBar Component graphical assets available for use in our grid gallery. We will now move back to ActionScript.

Adding the ProgressBar to the Thumbs

Back to the Actions panel, we have the graphical assets ready, but we also need to import the ActionScript Class of the ProgressBar as well to use it in ActionScript. So right at the top of your code, use the import command to import the class we need this way:

import fl.controls.ProgressBar;

Just the same way we created a MovieClip container for our thumbs, we need to create a MovieClip container for our progress bars, we can use the same container we used before, but that will make our preloaders clickable (because the event handler is passed to all the children of that MovieClip). This means that we have to create a separate container. So start off by defining a variable to hold this MovieClip and call it preloaders_mc:

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 preloaders_mc:MovieClip;

var x_counter:Number = 0;
var y_counter:Number = 0;

We will now put an actual MovieClip in the variable and set it up, use the same function we used to create the first container (createContainer()) to create this one as well:

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

preloaders_mc = new MovieClip();

}

We need this MovieClip to be positioned in the same exact place as the first container, so we will set its x and y properties to the same values that container_mc has:

Now add this MovieClip to the display list to make its content visible when we add them later:

Our container is now ready, we will now create some instances of the ProgressBar class, set them up, and display them using the callThumbs() function and loop. The code you should add is pretty self explanatory:

The ProgressBar Class is configured by setting its .source instance property to an instance of the ContentLoaderInfo class attached to a loader class instance. Please refer to the Loader Class tutorial for more info on this topic.

You can test your movie now by by pressing Ctrl+Enter and then pressing it again Ctrl+Enter simulate download.

AS3 Grid Gallery - Preloaders in Action

It should work, but you will notice that the preloaders do not go away, and that they look pretty messed up: Wrong width and strange positioning. The trick is to make the ProgressBar just as wide and tall as the thumbs themselves. To do this we can simply set its width and height properties to the thumb width and height properties which have retrieved from the XML file:

Test your move once again, you see that your preloaders look nice, BUT they do not go away once they are done and they cover up the actual thumbs, so they are no good!

AS3 Grid Gallery - Preloaders Resized

Removing these preloaders once they finish their job will require us to register an event listener to check for an event to check that they are done loading and then simply use the removeChild() method to remove them from the display list. Start off by registering for the event listener:

We will now create the listener function called donePb() which will simply have the roll of removing the progress bar from the display list, type this at the bottom of your entire code:

function donePb (e:Event):void{
var my_pb:ProgressBar = ProgressBar(e.target);
preloaders_mc.removeChild(my_pb);
}

Test your movie once again now and simulate download, the progress bars should work fine and then disappear when their job is done!

AS3 Grid Gallery - Preloaders Perfect

This does it for the thumb preloaders, we will now work with the full image.

Adding a ProgressBar Preloader for the Full Image

Adding a progress bar preloader for the full image is much easier because it is a single image and because we already have our container now, so all we have to do is just create an instance of the ProgressBar Class, set it up, and center it on stage. Go to your callFull() method and just add the code highlighted below, which is again pretty self explanatory:

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

var full_pb:ProgressBar = new ProgressBar();
full_pb.source = full_loader.contentLoaderInfo;
full_pb.x = (stage.stageWidth - full_pb.width)/2;
full_pb.y = (stage.stageHeight - full_pb.height)/2;
preloaders_mc.addChild(full_pb);

container_mc.removeEventListener(MouseEvent.CLICK, callFull);

}

We used the same technique we used before to center the preloader.

You can test your movie now to see that it works, but again the progress bar does not go away. We can register the same event listener we used before here and it will remove the progress bar once it is done loading. Simply register for the same event and there is no need to create the function again because we already have it.

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

var full_pb:ProgressBar = new ProgressBar();
full_pb.source = full_loader.contentLoaderInfo;
full_pb.x = (stage.stageWidth - full_pb.width)/2;
full_pb.y = (stage.stageHeight - full_pb.height)/2;
preloaders_mc.addChild(full_pb);

full_pb.addEventListener(Event.COMPLETE, donePb);

container_mc.removeEventListener(MouseEvent.CLICK, callFull);

}

Great, you can test your movie now, simulate download and you will see that you have a perfectly working grid gallery!

AS3 Grid Gallery - ProgressBars ALL Done

Our grid gallery now has all the mechanical functionality we need for it to run online. The next page of the tutorial will teach you how to make it fancier by using the Tween Class to add its fade-in and fade-out animation.

Summary of this Page

Added the graphical assets of the ProgressBar Component to the library.
Added a ProgressBar preloader to all the thumbs.
Added a ProgressBar preloader to the full image.

In the next section we add a fade in and out animation for all of our images.