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 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.

var myXMLLoader:URLLoader = new URLLoader();
myXMLLoader.load(new URLRequest("gallery.xml"));
Review our tutorial on how to load external text using the URLLoader Class to learn more about this topic.

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:

var myXMLLoader:URLLoader = new URLLoader();
myXMLLoader.load(new URLRequest("gallery.xml"));
myXMLLoader.addEventListener(Event.COMPLETE, processXML);
Review our tutorial on Event Handling in AS3 to learn more about this topic.

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:

var myXMLLoader:URLLoader = new URLLoader();
myXMLLoader.load(new URLRequest("gallery.xml"));
myXMLLoader.addEventListener(Event.COMPLETE, processXML);

function processXML (e:Event):void{

}

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:

var myXMLLoader:URLLoader = new URLLoader();
myXMLLoader.load(new URLRequest("gallery.xml"));
myXMLLoader.addEventListener(Event.COMPLETE, processXML);

function processXML (e:Event):void{
var myXML:XML = new XML(e.target.data);
}
Review our tutorial on using XML in AS3 to learn more about this topic.

You should note that using the keyword var inside a function makes this variable temporary. This means 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 do not get deleted we need to declare their existence using the var keyword at the beginning of 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:

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 myXMLLoader:URLLoader = new URLLoader();
myXMLLoader.load(new URLRequest("gallery.xml"));
myXMLLoader.addEventListener(Event.COMPLETE, processXML);

function processXML (e:Event):void{
var myXML:XML = new XML(e.target.data);
}
Review our tutorial on AS3 Variables and Datatypes to learn more about this topic.

 

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:

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 myXMLLoader:URLLoader = new URLLoader();
myXMLLoader.load(new URLRequest("gallery.xml"));
myXMLLoader.addEventListener(Event.COMPLETE, processXML);

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

}
Review our tutorial on AS3 XML to learn more about how to retrieve XML element attributes.

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 Page

  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.

Next page