Creating an XML Slideshow in Flash

By Blue_Chi | Flash CS3 | ActionScript 1/2 | Advanced | Page 1, 2, 3, 4, 5, 6

This tutorial will teach you how to create an XML slideshow in Flash using ActionScript 2.0. All the contents of our slideshow will be controlled through an XML file so that you can update your images and their description without going back to your FLA, the XML file will also control the speed of the slideshow.

This is an advanced level tutorial that will make use of the MovieClipLoader Class, the Tween Class, the XML Class, and other ActionScript features such as the setInterval method, functions, loops, arrays, and conditionals. Make sure that you've read all of our relevant tutorials on those topics before attempting this tutorial.

The back end concept of our slideshow is pretty 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 not have no content in it other than ActionScript as the images and their details will be stored outside.

XML Slideshow in Flash

Our tutorial will be divided into the following sections:

  1. Preparing external assets and the FLA
  2. Processing the XML file
  3. Creating the slideshow movie clip container
  4. Loading all external slideshow images
  5. Creating the slideshow function
  6. Creating the preloading text and the image titles

Preparing 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 slideshow will work properly only with image sets of the same size.

Start off by creating a main project folder for our slideshow. Insider this folder create a sub folder named images that will host our images. Unzip the file we have given you and put all your images inside it. Our XML file 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. Open your notepad and save an empty file as slideshow.xml. You should end up now with a folder named images and an xml file both located in your project folder.

External Assets

Preparing the XML File

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

  1. Slideshow specific details such as the dimensions of the sildeshow viewport and the speed of the slideshow.
  2. Image specific details such as the URL and the image title.

It is worth noting at this stage that our slideshow will only work for groups of images with the same dimensions. Of course, the slideshow can be edited to work with images with different dimensions, but that goes beyond the scope of this tutorial.

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.

<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 width
  2. The slideshow height
  3. 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 please later on to configure your own slideshow.

<slideshow width="400" height="400" speed="2">
<image url="images/image1.jpg" title="Market Walk" />
<image url="images/image2.jpg" title="History" />
<image url="images/image3.jpg" title="Ying Yang" />
<image url="images/image4.jpg" title="Kid Youth" />
<image url="images/image5.jpg" title="Heart of Spice" />
<image url="images/image6.jpg" title="Elissa" />
<image url="images/image7.jpg" title="Silver Secret" />
<image url="images/image8.jpg" title="Endless Mountains" />
<image url="images/image9.jpg" title="Light of Hope" />
<image url="images/image10.jpg" title="Bored?" />
</slideshow>

You might have noted 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, save it as My Slideshow in the same folder as your XML file and your image folder. Set the ActionScript version to 2.0, the dimensions to 500x500, and the frame rate to 30 fps.

Properties Inspector - Flash CS3

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. Created the XML file.
  3. Created the FLA file.

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

Next page