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

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.

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.

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.

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.

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.

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.

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.

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.

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 section

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

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

In order to do anything with our gallery we will have to load and process our XML file then store all the data we need in easily accessible variables. Loading the data will require using the URLLoader Class while processing it will require using the XML Class. This should be a very simple process if you have read our tutorials on these two topics. Here is a basic outline of what we will do in this section:

1. Loading the XML file using the URLLoader Class.
2. Processing the XML file using the XML Class.
3. Storing the data we retrieve in easily accessibly variables.

Loading the XML File Using the URLLoader Class

The first thing we have to do is load our XML file into Flash. The loading of any textual content such as XML, CSS, and HTML is managed by the URLLoader Class. This class is very simple to use. Start off by creating an instance of it and then use the .load() method to load the gallery.xml file.

This should load your XML file into Flash, but that on its own will not do anything as Flash is not told what to do when the file loads. To take an action once the file is loaded we need to use an event handler to listen to the Event.COMPLETE. We will register this event with a function which we will create later called processXML(). Simply add the following code to use the .addEventListener() method to register for this event:

Using the event listener will let us take an action when the file loads. This action is obviously processing the XML data. We will deal with this in the next section.

Processing the XML Data

We are going to process our XML through the function processXML() which is triggered when the XML file finishes loading. The code to be triggered must reside in this function. Simply create it under the code we currently have:

Processing our XML data will require creating an instance of the XML Class and assigning the data of our XML file to it. Do that by using the code below inside the processXML() function:

You should note that using the keyword var inside a function makes this variable temporary. This meaning that it will be deleted once the function finishes executing. We have used this approach because we don't need the entire reference for the XML data later, but we need to some of it. We are going to create regular variables to hold the all the specific details we need and use these in the rest of our gallery. This will make our life easier later on as everything will be more organized.

To make sure that our variables are permanent and not deleted we need to declare their existence using the var keyword at the beginning our code and NOT inside the function. The variables we need are as follows:

1. columns - This variable will specify how many columns we are going to have in the grid.
2. my_x - This variable will specify the position of the gallery along the x-axis.
3. my_y - This variable will specify the position of the gallery along the y-axis.
4. my_thumb_width - This variable will specify the width of a single thumb.
5. my_thumb_height - This variable will specify the height of a single thumb.
6. my_images - This variable will hold a reference to the actual XML nodes that have the images.
7. my_total - This variable will specify the number of images we have in the gallery.

All the variables above, except the one before last, will have their type set to Number, the my_images variable will contain a reference to the list of images we have in our XML file, so we will set its type as XMLList.

We are going to declare these variables at the start of our code and not inside the function so that they remain permanent. Type the highlighted code above all of your existing code:

We will now set the value for all of these images inside the processXML function. This is a simple process that uses the methods of the XML Class:

We used the @ operator to retrieve the attribute values we need, the reference to all the image elements was made by storing a reference to the IMAGE nodes in the XML file, and the total number of images we retrieved using the .length() method on the XML list of images (my_images).

Cool, we now have all the details we need to create our gallery, except the specific image details, and those will be retrieved through the my_images variable and not directly from the XML file later on when needed. We have completed this section of the tutorial and will work next to create the container movie clip of our gallery and load all the thumbs of the gallery.

Summary of this section

1. Created an instance of the URLLoader class, named it myXMLLoader and used it to load the XML file.
2. Used an event listener to trigger the processXML function when the XML file finishes loading.
3. Created an instance of the XML Class, named it myXML, and used to extract the data of the XML file.
4. Stored all the information retrieved from the XML file in separate variables to use later.

In the next section  we will create the container movie clip for our gallery and will load all the thumbnails.