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.

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 14: Parse the XML File

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 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.

private function changeDepth(e:TweenEvent):void //When the alpha is 0
{
setChildIndex(lastTarget, 0); //move the image so it is behind the others
lastTarget.alpha = 1; //Restore its visibility
tweening = false; //Mark the tween as being complete
}

Step 20: Create Information Panel

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