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

This tutorial will teach you how to create an XML slideshow in Flash using ActionScript 3.0. All the contents of our slideshow will be controlled via an XML file so that you can update the slideshow with new images and labels without having to go back to the FLA.

This is an intermediate level tutorial that will make use of the XML Class, the URLoader Class, the Loader Class, the Tween Class, the Timer Class, and some general AS3 tools and concepts such as the Display List, Event Handling, Arrays, and Loops. The usage of these classes will be explained in this tutorial, but you should review our previous tutorials on these topics if you would like to learn more about them.

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

The backend concept of our slideshow is simple, our SWF file will load an XML file that has the details regarding what images to load. The SWF file will then load all of these images in one go and start the show when all of those images have successfully loaded. The SWF itself will have no content in it other than ActionScript as the images and their details will be stored outside.

AS3 XML Slideshow - Start Diagram

Our tutorial is divided into the following sections:

  1. Preparing the external assets and the FLA.
  2. Loading and processing the XML file.
  3. Loading all the external images.
  4. Displaying the images on the screen.
  5. Displaying the labels on the screen.
  6. Polishing the code and adding a simple preloader.

Preparing the External Assets and the FLA

All of our assets will be loaded externally, so we will have to prepare them 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 can use your own images instead if you want to do that.

Start off by creating a main project folder for the slideshow. Inside this folder create a sub folder named images that will host our images. Unzip the file we have given you and put all the images inside the folder you just created. The XML file we will be placed next to the images folder.

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. If you are on Windows, then open your notepad and save an empty file as slideshow.xml. If you are a Mac, you can use TextEdit to create your file. You should end up now with a folder named images and an xml file both located in your project folder.

AS3 XML Slideshow - Folder Structure

Preparing the XML File

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

  1. Slideshow specific details such as the speed at which the slideshow will run.
  2. Image specific details such as the URL and the image title.

The general structure of our XML code is shown in the code below, one <slideshow> element will enclose several <image /> elements within it. The slideshow specific details will be set in parameters held within the <slideshow> 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"?>
<slideshow para1="value" para2="value" ... >
<image para1="value" ... />
<image para1="value" ... />
<image para1="value" ... />
</slideshow>

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

  1. The slideshow speed (number of seconds to display each image)

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

  1. Image URL
  2. Image Title

The values of all these parameters will be retrieved in Flash using the .attribute property of an 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 wish later on to configure your own slideshow.

<?xml version="1.0" encoding="utf-8"?>
<SLIDESHOW SPEED="2">
<IMAGE URL="images/image1.jpg" TITLE="Snow in Wessex Lane" />
<IMAGE URL="images/image2.jpg" TITLE="Riverside Park" />
<IMAGE URL="images/image3.jpg" TITLE="London Museum" />
<IMAGE URL="images/image4.jpg" TITLE="Castle in Wales" />
</SLIDESHOW>
You can review our AS3 XML Class tutorial to learn more about this topic.

You might have noticed that we did not specify the number of images in our slideshow, 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 <slideshow> element, i.e. the number of images in our slideshow.

Preparing the FLA

Our external assets are now ready, it is time to create the FLA. Create a new file in Flash in AS3 Format. Save it in the same folder as your XML file and your images folder. Set the dimensions of your FLA to 500x500 and the frame rate to 30 fps.

AS3 XML Slideshow - Properties Inspector

Our FLA is now set, our images are in their appropriate folder, and we have our XML file ready as well. The rest of our slideshow 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 folder.
  2. Create the XML file.
  3. Create the FLA file.

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

Next Page