Creating an XML Slideshow in Flash Using AS3

By Riyadh Al Balushi | Flash CS4 | ActionScript 3.0| Intermediate | Page 1, 2, 3, 4, 5, 6

In order to do anything with our slideshow, we must 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.

Here is the basic outline of this section:

  1. Creating the variables to store our data.
  2. Load our XML file.
  3. Process the XML file and extract the needed data.

Creating The Needed Variables

By the end of this section we will have extracted our XML data and stored it for use in the slideshow. Before attempting to load our data we need to create the variables that will store this data. The data which we will extract from the XML file is as follows:

  1. speed = a number that will indicate the amount of seconds for each slide in the show.
  2. total images = a number that will indicate the number of images in our slideshow.
  3. images = a reference to the list of images to retrieve the URL and title of each image.
We need these variables to remain available and accessible throughout the movie, so we need to declare them explicitly outside any function or loop. You can dot his by typing the following in your Actions panel:
var my_speed:Number;
var my_total:Number;
var my_images:XMLList;
You can learn more about AS3 Variables by reviewing our tutorial on this topic.

We will update the content of these variables after we load and process our XML file.

Loading the XML File Using the URLLoader Class

Loading any textual content such as XML, CASS, and HTML into Flash is managed by the URLLoader Class. This class is very simply to use. Start off by creating an instance of this class and then use the .load() method to load the slideshow.xml file:

var my_speed:Number;
var my_total:Number;
var my_images:XMLList;

var my_xml_loader:URLLoader = new URLLoader();
my_xml_loader.load(new URLRequest("slideshow.xml"));
You can learn more about the URLLoader Class by reviewing our tutorial on this topic.

This should load your XML file into Flash, but that on its own will not do anything as Flash is still not yet 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 my_speed:Number;
var my_total:Number;
var my_images:XMLList;

var my_xml_loader:URLLoader = new URLLoader();
my_xml_loader.load(new URLRequest("slideshow.xml"));
my_xml_loader.addEventListener(Event.COMPLETE, processXML);
You can learn more about AS3 Event Handling by reviewing our tutorial on this topic.

Using this event listener will let us take an action when the file completes loading. The action is obviously processing the XML data. We will deal with this next.

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 my_speed:Number;
var my_total:Number;
var my_images:XMLList;

var my_xml_loader:URLLoader = new URLLoader();
my_xml_loader.load(new URLRequest("slideshow.xml"));
my_xml_loader.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 or our XML file to it. Do that by using the code below inside the processXML function:

var my_speed:Number;
var my_total:Number;
var my_images:XMLList;

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

function processXML (e:Event):void{

var my_xml:XML = new XML(e.target.data);

}
You can learn more about the XML Class by reviewing our tutorial on this topic.

You should note that using the keyword var inside a function makes this variable local and 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 some of it only. That is why we created our other variable earlier so that we can use them now to store the data we need throughout the movie.

We can now use the various methods of the XML Class to retrieve the data that we need. We will use the @ operator to retrieve the attribute values we need. The reference to all the image elements will be made by storing a reference to the IMAGE nodes in the XML File, while the total number of images will be retrieved by using the .length() method on the XML list of images (my_images):

var my_speed:Number;
var my_total:Number;
var my_images:XMLList;

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

function processXML (e:Event):void{

var my_xml:XML = new XML(e.target.data);
my_speed=my_xml.@SPEED;
my_images=my_xml.IMAGE;
my_total=my_images.length();

}

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 load all the images in the next section.

Summary of This Page

  1. Created the variables necessary to store the data we need.
  2. Loaded the XML file.
  3. Processed the XML file and store the data need in in the variables we created earlier.

In the next page of our tutorial we will load all the images of our slideshow.

Next Page