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

This tutorial will teach you how to create an XML grid image gallery in Flash using ActionScript 3.0. This gallery will let you supply it with any number of image thumbs which it will automatically align in a grid manner. All of our images will be loaded externally, these images are specified in an XML file that also controls the number of columns and the position of the gallery.

This is an intermediate ActionScript 3.0 tutorial that will make use of the XML Class, the URLLoader Class, the Loader Class, the Tween Class, and general AS3 methods and tools such as event handling, loops, functions, and conditionals. Make sure you read all of our relevant tutorials on those topics before attempting this tutorial.


All photographs © 2008 - Riyadh Al Balushi

The backend concept of our gallery is as follows: All the data of the gallery will be stored within an XML file that is loaded when the movie starts. The full version of all thumbnails is loaded only when a thumbnail is clicked. The details of our images are stored in the XML file, and all of our images are stored externally, so there is really nothing left in the SWF other than ActionScript.

AS3 - Grid Gallery - Introduction

Our Grid Gallery project can be broken down into the following sections:

  1. Preparing External Assets (XML, Thumbs, and Full Images) and the FLA.
  2. Loading and Processing the XML file
  3. Creating the Gallery Container and Loading all the Thumbs
  4. Positioning the Thumbs in a Gird Manner
  5. Loading a full image when a thumb is clicked
  6. Adding Preloaders to Thumbs and the Full Image
  7. Animating the Gallery Using the Tween Class
  8. Polishing the Gallery and Fixing Bugs

Preparing the External Assets and the FLA

All of our assets will be loaded externally, so we will have to prepare these before we start working with our FLA. The purpose of loading everything dynamically is to make it possible to update our content without having to go back to the FLA to generate a new SWF file and upload it each time we decide to change the images.

The images to be used in this tutorial can be found in this zip file here. You may want to use your own images instead, but our gallery will work properly only with thumbnail sets of the same size.

Start off by creating a main project folder for our gallery. Insider this folder create two sub folders named thumbs and full_images, the first folder will host our thumbs and the second one will host the larger full copies of the images. Unzip the file we have given you and put the thumbs and full images in their proper folders.

Folder Structure

The details of the images inside these folders will be stored in an XML file. An XML file is essentially a text file with user-defined structured coding. You can use any simple text editor to create your XML file, open the notepad and save a blank file as gallery.xml in your project folder along with your two image folders.

XML File Added

Preparing the XML File

We are going to edit our XML file with the information that we need to run our gallery. Our XML file will have two types of information:

  1. Gallery specific details such as the number of columns, the gallery's position, and the dimensions of the thumbs within it.
  2. Image specific details such as the thumb URL and the full image URL.

The general structure of our XML code is as shown in the code below, one <gallery> element will enclose several <image /> elements within it. The gallery specific details will be set in parameters held within the <gallery> element while the image specific details will be set in parameters held within each of the <image /> elements.

<?xml version="1.0" encoding="utf-8"?>
<gallery para1="value" para2="value" ... >
<image para1="value" ... />
<image para1="value" ... />
<image para1="value" ... />
</gallery>

Our actual code will have the following parameters specified in the <gallery> element.

  1. number of columns in our grid
  2. gallery horizontal position
  3. gallery vertical position
  4. thumbnail width
  5. thumbnail height

Each of our <image /> will have the following parameters:

  1. Thumb URL
  2. Full Image URL

The values of all these parameters will be retrieved in Flash using the .attribute property of a XML element. The value of these parameters is specified in the code below, you can copy and paste it into your XML file. You may change any of these values as you please later on to configure your own gallery.

<?xml version="1.0" encoding="utf-8"?>
<GALLERY COLUMNS="5" XPOSITION="30" YPOSITION="30" WIDTH="100" HEIGHT="100">
<IMAGE FULL="full_images/image1.jpg" THUMB="thumbs/thumb1.jpg" />
<IMAGE FULL="full_images/image2.jpg" THUMB="thumbs/thumb2.jpg" />
<IMAGE FULL="full_images/image3.jpg" THUMB="thumbs/thumb3.jpg" />
<IMAGE FULL="full_images/image4.jpg" THUMB="thumbs/thumb4.jpg" />
<IMAGE FULL="full_images/image5.jpg" THUMB="thumbs/thumb5.jpg" />
<IMAGE FULL="full_images/image6.jpg" THUMB="thumbs/thumb6.jpg" />
<IMAGE FULL="full_images/image7.jpg" THUMB="thumbs/thumb7.jpg" />
<IMAGE FULL="full_images/image8.jpg" THUMB="thumbs/thumb8.jpg" />
<IMAGE FULL="full_images/image9.jpg" THUMB="thumbs/thumb9.jpg" />
<IMAGE FULL="full_images/image10.jpg" THUMB="thumbs/thumb10.jpg" />
<IMAGE FULL="full_images/image11.jpg" THUMB="thumbs/thumb11.jpg" />
<IMAGE FULL="full_images/image12.jpg" THUMB="thumbs/thumb12.jpg" />
<IMAGE FULL="full_images/image13.jpg" THUMB="thumbs/thumb13.jpg" />
<IMAGE FULL="full_images/image14.jpg" THUMB="thumbs/thumb14.jpg" />
</GALLERY>

You might have noted that we did not specify the number of images in our gallery, that is because the ActionScript XML Class can detect the number of child nodes within an element, and that in our case is the number of <image /> elements within our <gallery> element, i.e. the number of images in our gallery.

Please refer to our AS3 XML tutorial to learn more about using XML in ActionScript 3.0.

Preparing the FLA

Our external assets are now ready, it is time to create the FLA. Create a new file in Flash, save it as My Grid Gallery in the same folder as your XML file and your image folder. Set the ActionScript version to 3.0, the dimensions to 600x600, and the frame rate to 30 fps.

Flash Grid Gallery - FLA Made

Our FLA is now set, our images are in their appropriate folders, and we have our XML file ready as well. The rest of our gallery project will be coded in ActionScript. In Flash, Right-Click the only frame you have on your timeline and select Action to open up the Action panel.

Summary of this Page

  1. Put the images in their specified folders.
  2. Created the XML file.
  3. Created the FLA file.

In the next page of our tutorial we will load and process the XML file in order to retrieve the data required to load our gallery.

Next page