In the previous version we looked at how to create an image rollover in ActionScript 3. This article will expand on that concept and show how to build a more dynamic setup without a bunch of extra code. This will be achieved using a simple class for each image set.

Figure 1: The completed example.

Start by creating a new Flash document (AS3) and saving it inside a new directory on your machine.

Figure 2: New Document Window

Now find 2 images, one for the idle state of the image rollover and the other for the over state. Copy those images to the directory you saved the Flash document in.

Now while inside Flash select frame 1 in the timeline and open the Actions panel (F9) to begin adding the ActionScript shown in the figure below.

var images:Array = [
	{image1:"1.jpg", image2:"1_over.jpg",  x:20,	y:20},
	{image1:"2.jpg", image2:"2_over.jpg",  x:140,	y:20},
	{image1:"3.jpg", image2:"3_over.jpg",  x:260,	y:20}
];

for each(var img:Object in images)
{
	var image:Image = new Image(img.image1, img.image2);
	image.x = img.x;
	image.y = img.y;	
	addChild(image);
}

This code defines the images and coordinates to place the image for each instance of the Image class, which will be created in just a moment. Then the for each loop processes each image set and places it on the stage. Now if you ran this code at the moment it would throw errors because we have not created the Image class at this time.

Now that the ActionScript to run the example is created the next step is to create the Image class. In order to create a class simply go to File>New... and choose "ActionScript File". Save this new file with the name "Image.as" in the directory you saved the images and Flash document.

Once the ActionScript file is saved return to the Flash editor and start writing the code shown below. We will break down its functionality after the figure.

package
{
	import flash.display.MovieClip;
	import flash.events.MouseEvent;
	import flash.display.Loader;
	import flash.net.URLRequest;
	
	public class Image extends MovieClip
	{
		public var imageLoaderIdle:Loader;
		public var imageLoaderOver:Loader;
		
		function Image(idleImage:String, overImage:String)
		{			
			imageLoaderIdle = new Loader();
			imageLoaderIdle.load(new URLRequest(idleImage));			
			
			imageLoaderOver = new Loader();
			imageLoaderOver.load(new URLRequest(overImage));
			imageLoaderOver.alpha = 0;
			
			addChild(imageLoaderIdle);
			addChild(imageLoaderOver);
			
			addEventListener(MouseEvent.MOUSE_OVER, mouseOverHandler);
			addEventListener(MouseEvent.MOUSE_OUT, mouseOutHandler);
		}
		
		private function mouseOverHandler(evt:MouseEvent):void
		{
			imageLoaderIdle.alpha = 0;
			imageLoaderOver.alpha = 1.0;
		}
	
		private function mouseOutHandler(evt:MouseEvent):void
		{
			imageLoaderIdle.alpha = 1.0;
			imageLoaderOver.alpha = 0;
		}
		
	}
}

The idle and over images are passed into the constructor of the class and a separate Loader instance is created for each image. Then those Loader instances are attached to the stage and event handlers are created to handle the OVER and OUT state of the image set. When the user rolls over the image the alpha is changed to reveal the over image. Then when the user rolls out the idle image is displayed.

You should now have a fully working example that you can expand on as needed for your own projects. I hope you found this useful.