1. Code
  2. ActionScript

Create an Image Rotator in Flash Using XML and ActionScript 3.0


In this tutorial you will learn how to make a simple Image Rotator from scratch using Flash, XML and ActionScript 3.0.

Step 1: Brief Overview

This image rotator is created almost entirely out of code alone.

During the first steps we will set up the Fla file properties and embed some fonts to make the image information look better. We also add a preloader to indicate the automatic transition of the images.

Step 2: Set Up

Open Flash and create a new Flash File (ActionScript 3.0).

Set the stage size to 600 x 300 px and the frame speed to 24fps.

Step 3: Embed Fonts

In order to give a better look to our application we will make use of embedded fonts.

Open the Library Panel (Cmd+L) and right-click in the items area to bring up a context menu.

Select New Font and choose a font you like. Remember to select the actual size you are going to use in the movie.

I used Helvetica Bold for the image title, and FFF Harmony for the description.

Step 4: Preloader

A preloader MovieClip will be used as an indication of progress, this will tell the user that the images are playing automatically.

In this example, I used the Apple Inspired Preloader we created before here on ActiveTuts+. We'll just use the animation, so there's no need to copy the code. Our code will move on to the next image each time the preloader animation loops.

Step 5: Get Some Images

It wouldn't be an Image Rotator without images, so choose them from your personal collection or download a few for testing.

These are the images from the demo, obtained from Flickr, all with a Creative Commons License.

Images have been resized to 600x300 px to fit the movie size.

Step 6: Write the XML

An XML file will be loaded by the application; this file will contain all information about the images such as Title, URL of the image, and Description.

Open your favorite editor and write:

Step 7: Create the Document Class

Create a new ActionScript Document and save it as

Step 8: Import Necessary Classes

This are the required classes. For a more detailed description about every class, please refer to the Flash Help (Press F1 within Flash).

Step 9: Start the Class

The extends keyword defines a class that is a subclass of another class. The subclass inherits all the methods, properties and functions, that way we can use them in our class.

We'll make our document class extend Sprite, as it doesn't need a timeline.

Step 10: Declare Variables

These are the variables we will use; each is explained in the comments.

Step 11: Write Constructor Function

The constructor is a function that runs when an object is created from a class. This code is the first to execute when you make an instance of an object or runs using the Document Class. In this case, it will be the first code run when our SWF starts.

The initial parameters have default values; this will let us use the class as a document class and as an instance.

The parameters are the URL of the XML file and the time that the Timer object will wait to make a transition between images; this number has to be higher than the duration of the Tween transition (one second by default).

Step 12: Write the Constructor Code

This code goes inside the constructor. It starts the Timer, sets the default text format for the text fields and calls the loadXML function.

Step 13: Load the XML File

This function uses the URLLoader object to load the XML file specified in the constructor's parameter. The parseXML function (in the next step) is set to execute when the load is complete.

Step 14: Parse the XML File

The xml data is assigned to the xml object, and a function to load the images is called.

Step 15: Load the Images

A for statement is used to get the number of images in the xml, load the images using a Loader object and store this Loader in a Vector object, which was defined earlier. When the load of an image is complete, the sortImages function is executed.

Step 16: Sort the images

This function adds the images to the stage and sorts them; when all images are loaded, it calls the functions that create the information panel and the mouse listeners.

Step 17: Add Mouse Listeners to Images

We use a for statement to set the mouse listeners to every image. This is a very simple form of control; when the user clicks an image, the changeImage handler function will be called.

Step 18: Manual Transition

This code will be run when the user clicks an image. Read the comments in the code for details.

Step 19: Move Image to Back

The transition between images is based on alpha tween, so you will see the next image when the transition has finished. However, if you click it, you will be clicking the same image as before, although it's not visible. This will fix that.

Step 20: Create Information Panel

This will create a semi-transparent panel, with text generated from the XML's Title and Description tags.

Step 21: Handle Automatic Transition

This code handles the automatic transition; it is triggered by the Timer object's TIMER event.

Step 22: Position the Preloader MovieClip

This chunk of script adds and places the preloader.

This completes the ImageRotator class.

Step 23: Using the Class

There are two ways to use this class. You can use it in your code as an instance or as the document class with the default parameters we set earlier.

If you choose to instantiate this class and use it in your code, this is an example of how to use it:

This way you can set the xml file to be loaded and the interval of the transition without the need to edit the class code.

Otherwise, see the next step.

Step 24: Using the Document Class

In the .fla file, go to the Properties Panel and write ImageRotator in the Class field. Remember that this will use the default parameters.


This is just an example of an image rotator, and a good way to start making your own awesome image gallery.

Thanks for reading!

Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.