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

We have our XML data now ready. We are going to load all of our images in this section by using the Loader Class. Several instances of this class will be created using a loop and then stored inside an Array to make it easy for us to refer back to each image later. We will place all of our code for this process in a single function which we will call loadImages().

Here is the basic outline of this section:

  1. Create the loadImages() function.
  2. Use a loop to create multiple instances of the Loader Class.
  3. Creating the .onComplete event listener to track the loading process of the images.

Creating the loadImages() function

In order to keep our code organized and easy to update, we are going to place the relevant code for this process inside a separate function. We are going to call this function loadImages(). Go ahead and type the following at the bottom of all your existing code to do this:

function loadImages():void{

}
You can learn more about AS3 Functions by reviewing our tutorial on this topic.

Creating the Loop

We need a loop for our slideshow because we need to execute the same command multiple times for each and every image. The repeated code will involve:

  1. Retrieving the URL of the image from our image XML list
  2. Creating a new instance of the Loader Class to load the thumb URL
  3. Registering the loader with an event listener to show the image once loaded
  4. Inserting each Loader instance into an array to store a manipulate the images later.

We will start off by creating the loop. Our loop will cycle as long as the counter i does not exceed our total number of images:

function loadImages():void{
for (var i:Number = 0; i < my_total; i++){

}
}
You can learn more about AS3 Loops by reviewing our tutorial on this topic.

Now will retrieve the URL of the image and store it in a local variable called my_url. This variable is only used within the loop, so there is no need to create it outside the loop. i below is used to cycle through the elements in the XML file and it retrieves the actual URL by using the @ operator to get the value of that attribute:

function loadImages():void{
for (var i:Number = 0; i < my_total; i++){

var my_url:String = my_images[i].@URL;

}
}

We will now create a new temporary instance of the Loader Class using the new keyword, and then instantly load the thumb image using the .load() method. This is pretty simple:

function loadImages():void{
for (var i:Number = 0; i < my_total; i++){

var my_url:String = my_images[i].@URL;
var my_loader:Loader = new Loader();
my_loader.load(new URLRequest(my_url));


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

We need to use an event listener to take an action when the images when they are fully loaded. To do this we will register with the Event.COMPLETE to load a special listener function called onComplete which we will define later. Register the event using the .addEventListener() method:

function loadImages():void{
for (var i:Number = 0; i < my_total; i++){

var my_url:String = my_images[i].@URL;
var my_loader:Loader = new Loader();
my_loader.load(new URLRequest(my_url));
my_loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onComplete);

}
}
Registering for loading process events is not done directly on the Loader Class instance, but on a property called contentLoaderInfo which is an instance of a class of the same name. Again, review our tutorial on the AS3 Loader Class to learn more about this.

We now need to add each loader instance into an array. We need to do this to be able to refer back to each loader instance during the slideshow. However, before we add anything to an array we will have to create that array. Go back to the top of your code and define a new array called my_loader_array, we are defining this array outside because we need to refer to it later in the project as well as inside the loop.

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

var my_loaders_array:Array = [];

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();
}
You can learn more about AS3 Arrays by reviewing our tutorial on this topic.

We can now go back to the loop and use the array .push() method to insert each new loader instance in the array:

function loadImages():void{
for (var i:Number = 0; i < my_total; i++){

var my_url:String = my_images[i].@URL;
var my_loader:Loader = new Loader();
my_loader.load(new URLRequest(my_url));
my_loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onComplete);
my_loaders_array.push(my_loader);

}
}

That should do it. When called, this loop will cycle through the XML file, extract the URL, pass it to a Loader Class instance and then push that instance into our array. However, we have not specified what will happen when each Loader instance finishes loading the file. We are going to do this next.

Creating the .onComplete Event Listener function

The code we wrote earlier will load all the images in one go, but we did not specify what will happen when each image finishes loading. We are going to use an event listener to track how many images were successfully loaded. This section will only track the process, the action to actually start the show will be dealt with in the next page.

We will start off by defining the listener function onComplete. We have already registered this function for the event inside the loop. Type this at the bottom of all your existing code to define the function:

function onComplete(e:Event):void{

}

In this section of the tutorial, we will simply ask the event listener to update a counter to track how many images have successfully loaded. We need to create this counter at the top of our code:

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

var my_loaders_array:Array = [];
var my_success_counter:Number = 0;

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

Now our onComplete event listener function can simply add 1 to the value of this counter by using the ++ operator:

function onComplete(e:Event):void{

my_success_counter++;

}

This means that as each image completes loading, the value of my_success_counter will increase to eventually indicate the total number of images that have finished loading. In order to start the show when all the images finish loading, we can compare this value with the total number of images we have in the show using a conditional and start the show then.

function onComplete(e:Event):void{

my_success_counter++;
if (my_success_counter == my_total){

}


}
You can learn more about AS3 Conditionals by reviewing our tutorial on this topic.

We will let our conditional execute a function which will start the show called startShow():

function onComplete(e:Event):void{

my_success_counter++;
if (my_success_counter == my_total){
startShow();
}

}

Define the value of this function now at the bottom of all your existing code. We will deal with the content of this function in the next section:

function startShow():void{

}

Wrapping Up This Section

Our loadImages() function and its supporting event listener are now ready. However, in order to have them triggered we have to call the loadImages() function from our processXML() function to call it when the XML data is ready:

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

loadImages();

}
You can learn more about invoking AS3 Functions by reviewing our tutorial on this topic.

That should do it. In the next section we will start the slideshow by creating the function to display the next image.

Summary of This Page

  1. Loaded all the images.
  2. Created an event listener to track the successful loading of each image.

In the next page of our tutorial we start displaying the loaded images on the screen.

Next Page