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.

Grass 01 by 100kr

deep impact on planet color by spettacolopuro

Yosemite : fall colours by tibchris

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:

<?xml version="1.0"?>
<images>
	<image title="Grass 01" src="images/Grass.png" description="Photo by: 100kr on Flickr"/>
	<image title="Deep Impact on Planet Color" src="images/Water.png" description="Photo by: spettacolopuro on Flickr"/>
	<image title="Yosemite: Fall Colours" src="images/Yosemite.png" description="Photo by: tibchris on Flickr"/>
</images>

Step 7: Create the Document Class

Create a new ActionScript Document and save it as ImageRotator.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).


package 
{

	import fl.transitions.Tween;
	import fl.transitions.easing.Strong;
	import fl.transitions.TweenEvent;
	
	import flash.display.Sprite;
	import flash.net.URLLoader;
	import flash.net.URLRequest;
	import flash.display.Loader;
	import flash.text.TextField;
	import flash.text.TextFormat;
	import flash.text.TextFieldAutoSize;
	import flash.text.AntiAliasType;
	import flash.utils.Timer;
	import flash.events.TimerEvent;
	import flash.events.Event;
	import flash.events.MouseEvent;

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.

1
2	public class ImageRotator extends Sprite
3	{

Step 10: Declare Variables

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


private var xml:XML; // Stores the xml file info
private var urlLoader:URLLoader; //Loads the url of the xml file
private var imagesVector:Vector.<Loader> = new Vector.<Loader>(); //Stores the images loaded in the Loader object
private var imagesCounter:int = 0;
private var tween:Tween;
private var lastTarget:*; //Gets the last clicked image, in manual transition mode
private var tweening = false;
private var infoCounter:int = 0; //Changes the xml info to display
private var infoPanel:Sprite = new Sprite();
private var titleField:TextField = new TextField();
private var description:TextField = new TextField();
private var titleFormat:TextFormat = new TextFormat();
private var descriptionTF:TextFormat = new TextFormat();
private var timer:Timer;
private var preloader:Preloader = new Preloader(); //The Preloader in the Library
private var added:Boolean; //Checks if the preloader is in stage

private var titleFont:Helvetica = new Helvetica(); //Instantiate Embedded fonts
private var bitmapFont:Harmony = new Harmony();

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

1
2	public function ImageRotator(xmlPath:String = "images.xml", interval:int = 2000):void
3	{

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.


timer = new Timer(interval);

titleFormat.bold = true;
titleFormat.font = titleFont.fontName;
titleFormat.color = 0xFFFFFF;
titleFormat.size = 14;

descriptionTF.font = bitmapFont.fontName;
descriptionTF.color = 0xEEEEEE;
descriptionTF.size = 8;

titleField.defaultTextFormat = titleFormat;
titleField.autoSize = TextFieldAutoSize.LEFT;
titleField.embedFonts = true;
titleField.antiAliasType = AntiAliasType.ADVANCED;

description.defaultTextFormat = descriptionTF;
description.autoSize = TextFieldAutoSize.LEFT;
description.embedFonts = true;

loadXML(xmlPath);
}

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.


private function loadXML(file:String):void
{
	urlLoader = new URLLoader(new URLRequest(file));
	urlLoader.addEventListener(Event.COMPLETE, parseXML);
}

Step 14: Parse the XML File

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


private function parseXML(e:Event):void
{
	xml = new XML(e.target.data);
	loadImages();
}

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.


private function loadImages():void
{
	for (var i:int = 0; i < xml.children().length(); i++)
	{
		var loader:Loader = new Loader();

		loader.load(new URLRequest(xml.children()[i].@src));

		imagesVector.push(loader);

		loader.contentLoaderInfo.addEventListener(Event.COMPLETE, sortImages);

	}
}

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.


private function sortImages(e:Event):void
{
	imagesCounter++;

	for (var i:int = imagesVector.length - 1; i >= 0; i--) //go backwards...
	{
		addChild(imagesVector[i]); //...so that images at the start of the XML end up at the front
	}

	if (imagesCounter == imagesVector.length) //If all images are loaded
	{
		createInfoPanel();
		timer.addEventListener(TimerEvent.TIMER, autoChange);
		timer.start();
		addPreloader();
		addActions();
	}
}

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.


private function addActions():void
{
	for (var i:int = 0; i < imagesVector.length; i++)//Gets the number of images
	{
		//Sets the listener, changeImage function will be executed when an image is clicked
		imagesVector[i].addEventListener(MouseEvent.MOUSE_UP, changeImage);
	}
}

Step 18: Manual Transition

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


private function changeImage(e:MouseEvent):void
{
	timer.stop(); //Stop the timer
			
	if(added) //Check if the preloader is in stage, if true, removes it, if already removed, nothing happens
	{
		removeChild(preloader);
		added = false;
	}

	if (! tweening) //If a transition is not in progress
	{
		lastTarget = e.target; //Get the clicked image
		tween = new Tween(e.target,"alpha",Strong.easeOut,1,0,1,true); //Start a transition
		tween.addEventListener(TweenEvent.MOTION_FINISH, changeDepth); //The image will change its depth when the transition is done
		tweening = true; //Indicates a transition is in progress

		infoCounter++; //Changes the child that will be loaded from the xml

		if (infoCounter >= xml.children().length()) //If the infoCounter is grater than the total number of images
		{
			infoCounter = 0; //Reset
			titleField.text = xml.children()[infoCounter]. @ title; //Apply changes to text fields
			description.text = xml.children()[infoCounter]. @ description;
		}
		else
		{
			titleField.text = xml.children()[infoCounter]. @ title; //Apply changes to text fields
			description.text = xml.children()[infoCounter]. @ description;
		}
	}
}

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.


private function createInfoPanel():void
{
	//Draw a black rectangle with 50% alpha
	infoPanel.graphics.beginFill(0x000000, 0.5);
	infoPanel.graphics.drawRect(0, 0, 600, 50);
	infoPanel.graphics.endFill();

	//Position and set the value of the title field
	titleField.text = xml.children()[infoCounter]. @ title;
	titleField.x = 5;
	titleField.y = 5;

	//Position and set the value of the description field
	description.text = xml.children()[infoCounter]. @ description;
	description.x = 7;
	description.y = 22;

	infoPanel.y = 250; //Position this panel in the bottom
	
	//Add the children
	infoPanel.addChild(titleField);
	infoPanel.addChild(description);

	addChild(infoPanel);
}

Step 21: Handle Automatic Transition

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


private function autoChange(e:TimerEvent):void
{
	infoCounter++; //Changes the child that will be loaded from the xml

	lastTarget = imagesVector[xml 1="-" 2="infoCounter" language=".children().length()"][/xml]; //Gets the last image that was tweened
	tween = new Tween(imagesVector[xml 1="-" 2="infoCounter" language=".children().length()"][/xml],"alpha",Strong.easeOut,1,0,1,true); //Creates an alpha tween

	/* The same actions of the manual transition, change info etc. */

	tween.addEventListener(TweenEvent.MOTION_FINISH, changeDepth);
	tweening = true;

	if (infoCounter >= xml.children().length())
	{
		infoCounter = 0;
		titleField.text = xml.children()[infoCounter]. @ title;
		description.text = xml.children()[infoCounter]. @ description;
	}
	else
	{
		titleField.text = xml.children()[infoCounter]. @ title;
		description.text = xml.children()[infoCounter]. @ description;
	}
}

Step 22: Position the Preloader MovieClip

This chunk of script adds and places the preloader.


private function addPreloader():void
{
	added = true;
			
	preloader.scaleX = 0.08;
	preloader.scaleY = 0.08;
		
	preloader.x = (600 - preloader.width/2) - 12;
	preloader.y = (300 - preloader.height/2) - 12;
		
	addChild(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:


import ImageRotator;

var ir:ImageRotator = new ImageRotator("images.xml", 1100);

addChild(ir);

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.

Conclusion

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

Thanks for reading!