Subscribe to Tutorial Feed

Flash and PHP Bible

The Flash and PHP Bible has been released! The book can be found on Amazon or wherever fine books are sold in your area.

The Flash and PHP Bible has a forum for quick support.

Scriptplayground » tutorials » as » Dynamic Image RollOver using Classes

Dynamic Image RollOver using Classes

Learn how to create a dynamic image rollover using classes in AS3. This is a continuation of the previous static image rollover tutorial.

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.

Follow Scriptplayground on Twitter (@scriptplay)

Comments: Dynamic Image RollOver using Classes

 Nancy  Tue Jul 14, 2009 1:44 pm  
Thank you soooo much! This is perfect. One quick question, I need to add x and y coordinates to the over state image. I tried to just add them in the array, but it seems as if I need to add something in the function as well?
 alex  Tue Jul 14, 2009 7:45 pm  
How about:

private function mouseOverHandler(evt:MouseEvent):void
{
imageLoaderIdle.alpha = 0;
imageLoaderOver.alpha = 1.0;
imageLoaderOver.x +=...
imageLoaderOver.y +=...
}
 alex  Tue Jul 14, 2009 7:48 pm  
Thanks for the tutorial. It helped shed some more light on how classes work.
 Andrea  Wed Jul 22, 2009 5:24 pm  
Great tutorial!!

I want to add a tween so the images fade gradually, and I found this on another site:

var myTween:Tween = new Tween(img, "alpha", Strong.easeOut, 1, 0, 5, true);

I tried playing around with it (and I imported the tween classes) but I'm not having any luck. Any suggestions would be appreciated!
 alex  Sat Jul 25, 2009 7:18 am  
package
{
import flash.display.MovieClip;
import flash.events.MouseEvent;
import flash.display.Loader;
import flash.net.URLRequest;
import fl.transitions.*;
import fl.transitions.easing.*;

public class Image extends MovieClip
{
public var imageLoader:Loader;

function Image(overImage:String)
{
imageLoader = new Loader();
imageLoader.load(new URLRequest(overImage));
imageLoader.alpha = 0.1;

addChild(imageLoader);

addEventListener(MouseEvent.MOUSE_OVER, mouseOverHandler);
addEventListener(MouseEvent.MOUSE_OUT, mouseOutHandler);
}

private function mouseOverHandler(evt:MouseEvent):void
{
var t=new Tween(imageLoader,"alpha",Regular.easeIn,.1,1,20);
}

private function mouseOutHandler(evt:MouseEvent):void
{
var t=new Tween(imageLoader,"alpha",Regular.easeIn,1,.1,20);
}

}
}
 alex  Sat Jul 25, 2009 7:23 am  
this class requires only one argument, i.e, one image.
 Andrea  Sun Jul 26, 2009 9:40 pm  
Thanks, that is great!

I am going to try tweaking it a bit to get two images to fade into each other.
 mkeefe  Mon Aug 3, 2009 10:04 am  
@Alex - Thanks for answering that question in-depth. Really appreciate it.
 josh  Wed Mar 3, 2010 2:43 pm  
so, for the original example code here, what exactly do we have to name the images? And why start off by telling us to add just two images into a folder and then show us the code for an array of image sets? Somehow that is screwing me up as flash is reporting an error on line 7 for me.

1046: Type was not found or was not a compile-time constant: Image.

1180: Call to a possibly undefined method Image.

I see you are using an array again with this tut like in the previous one(classless). I'm guessing to help us expand this in the future. But adding in my file 2 file names and shortening the array to those two is not working for me.

I realize the activity on this page appears a year old, but if someone is still watching this page, could you give an example like yours above, but for only two images as it is described so I can understand what is or isn't working. I'm guessing I will get the same errors if I just go add more images to fit your current array list.

 Brett Hayvice  Mon Apr 5, 2010 6:36 am  
Mouseover image is larger than idle image: It only shows in three separate parts as mouse moves over each third.
Any way I can get entire loadover image to show at once?
Any help would be appreciated.
 Brett  Mon Apr 5, 2010 9:00 pm  
The entire image won't show because I have a page splitter script that divides it.
Somehow I have to layer this rollover script above the splitter script.
 Berner  Mon May 17, 2010 3:16 am  
I'm Beginner - Good Tutorial, but How to add my URL in each image?, please Help me,

Thanks
 Charlie  Mon Jun 21, 2010 2:16 pm  
I just found and tried this today. It is not working for me. I am totally new to Flash so need any help you can give.
I get these error messages

1046: Type was not found or was not a compile-time constant: Image.
1180: Call to a possibly undefined method Image.
Thanks in advance
 Tim Walls  Mon Jul 12, 2010 10:57 am  
Great tutorial, thank you very much!
I would like to add an individual URL for eacht X_over.img, so a new page will open on mouseclick (and after mouseover)? Any help welcome, thank you.
 jamie  Thu Jun 16, 2011 12:31 am  
Not working for me either:

1046: Type was not found or was not a compile-time constant: Image.
1180: Call to a possibly undefined method Image.
 mkeefe  Mon Jun 27, 2011 10:43 am  
@jamie & @Charlie - Make sure you are following from Part 1, it sounds like you don't have the "Image.as" class built or at least the app can't find it.
Add a comment
The ability to add new comments has been disabled in this archived version.

Loading
Main | Tutorials | Articles