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 » Image RollOver using ActionScript 3

Image RollOver using ActionScript 3

Create an image rollover using ActionScript 3. This effect is popular in galleries to demonstrate before/after views.

Update: More advanced class based version now available.

A common technique used in photo galleries is to allow a before and after preview of an image. This is achieved by preloading both images and when the user rolls over the affter, the before is displayed.

In this tutorial you will learn how to create this effect very simply using ActionScript, but the overall concept can be adapted to previous versions.

Start off by creating a new Flash file (FLA) and saving that. Then find two images to load, which in this case will be named "before.jpg" and "after.jpg" for simplicity.

Once the new file is created and the images are ready to be loaded, open the Actions panel and begin creating the code for this effect.

Create an array which will hold the image references, this is done so you can expand the example, but if you prefer you can skip the array and enter the image paths directly within the URLRequest.

var images:Array = ["before.jpg", "after.jpg"]

The next step is to create the image loaders for each image. These will simply be Loader instances

// image 1
var image1:Loader = new Loader();
image1.load(new URLRequest(images[0]));
addChild(image1);

// image 2
var image2:Loader = new Loader();
image2.load(new URLRequest(images[1]));
image2.alpha = 0;
addChild(image2);

As you can see, those blocks of code are very similar and could be converted into a function which would be easier to duplicate. Feel free to do that, but its certainly not required.

The next step is to attach the Event handlers for the mouse movements on the stage. In this case, you will assign a roll over and roll out event.

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

The final bit of code is the creation of the event handlers. These functions are responsible for changing the alpha property on each of the image boxes, depending on whether the mouse is rolling over or off the image.

function mouseOverHandler(e:MouseEvent):void
{
	image1.alpha = 0;
	image2.alpha = 1.0;
}

function mouseOutHandler(e:MouseEvent):void
{
	image2.alpha = 0;
	image1.alpha = 1.0;	
}

The last step is to save and test the file. You should see the image load in, and when you mouse over, the other image should appear. Mouse off and the original should re-appear. This example was basic, but should explain the overall concept. A good way to expand this would be to using the Tween class and create a subtle fade, rather than a sharp alpha change.

I hope you enjoyed this tutorial, here is the completed code for easy copying/pasting. Enjoy!

var images:Array = ["before.jpg", "after.jpg"]

// image 1
var image1:Loader = new Loader();
image1.load(new URLRequest(images[0]));
addChild(image1);

// image 2
var image2:Loader = new Loader();
image2.load(new URLRequest(images[1]));
image2.alpha = 0;
addChild(image2);

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

function mouseOverHandler(e:MouseEvent):void
{
	image1.alpha = 0;
	image2.alpha = 1.0;
}

function mouseOutHandler(e:MouseEvent):void
{
	image2.alpha = 0;
	image1.alpha = 1.0;	
}

Follow Scriptplayground on Twitter (@scriptplay)

Comments: Image RollOver using ActionScript 3

 michael  Mon May 19, 2008 5:34 am  
plz give source file
 Omar  Tue May 20, 2008 12:20 pm  
Thanks for tutorial :)
i learned something new :)
i am still learning ActionScript 3
i hope we can see another tutorial :)
 mkeefe  Wed May 28, 2008 9:13 pm  
@michael - I will be uploading the source once I get a second.
@Omar - I will certainly be posting more tutorials :)
 Gerry  Mon Jul 14, 2008 12:25 pm  
@Michael. He gives the source right there in the code. All you have to do is put two images in the same location as your fla named before.jpg & after.jpg

That's it. No need for a source file.
 mkeefe  Mon Jul 14, 2008 3:08 pm  
@Gerry - Your indeed correct. I actually realized I don't even have source. Just coded it in the Flash editor, tested it, wrote about it and closed Flash. I tend to do this for "quick" tips.
 Michael  Fri Jul 25, 2008 6:33 pm  
This worked great when the images are located in the same directory as the FLA. But, when I changed reference to an 'image' directory, nothing was displayed. What am I doing wrong. Referencing 'images/image1.jpg' in the Array does not work, but 'image1.jpg' does work. The same images are both local to the FLA and in the images directory.
 mkeefe  Sun Jul 27, 2008 9:52 pm  
@Michael - Does Flash throw a loading error? Or simply not display the image?
 awais  Wed Apr 8, 2009 3:20 am  
vaery nice tutorial!
 Sarah  Wed Apr 8, 2009 5:42 pm  
what would you have to change in the code if you wanted the images to change without the mouse being placed over the image? just for the images to change automatically after 5 seconds for instance?
 mkeefe  Wed Apr 8, 2009 10:57 pm  
@Sarah - In order to automate that process, simply create a timer and in the event handler, add the code that is normally run on mouse over. Let me know if you need a hand setting it up.
 Sarah  Thu Apr 9, 2009 6:52 am  
Sorry im new to using AS3 so im not sure how to set up a timer. any help would be much appreciated! :)
 M.E.  Wed Jun 3, 2009 8:14 am  
Thanks for the tutorial - I've been working with Flash for three years but haven't had much of a chance to really get into ActionScript (which is heresy, I know). I'm trying to rectify that.

But I do have a question - if I wanted to put MovieClips in instead of images, how would that work out in the coding? Essentially, I want an image, then when the mouse pointer moves over it, I want it to animate it (by increasing it's size slightly and maybe another effect or two).

I have a basic picture in place and created a PNG cutout of the main item in the image that will grow in size when the mouse moves over it. I can create the MovieClip, I just am not sure how to integrate it. I'll work on it, maybe I can accidentally make it work.
 mkeefe  Mon Jun 29, 2009 9:52 am  
@Sarah - Here is a basic Timer introduction:

http://v2.scriptplayground.com/tutorials/as/Basic-Timer-in-AS3/

@M.E. - You can simply load a SWF in place of the graphic, in fact you use the same loader. Then once the file is fully loaded you can use the play(); command to start the animation.
 Nancy   Mon Jul 13, 2009 10:18 am  
This is a great tutorial. Thanks so much!!

I am also new to AS3. I am trying to use the rollover effect, but with multiple image rollovers. Right now, when I rollover any of the individual images, they are all changing.

Any help would be greatly appreciated!
 mkeefe  Mon Jul 13, 2009 11:57 am  
@Nancy - You would need to create "mouseOverHandler" and "mouseOutHandler" functions for each image as the image reference is located within those functions. Alternatively you could create a custom class that holds the reference to the image and applies the proper image swapping. I could write a tutorial on this if needed.
 Nancy  Mon Jul 13, 2009 12:06 pm  
That would be great if you could and would help so much! I'd really appreciate it. Seeing how I under the concepts of what you're saying, but not as sure how to actually write the functions as this early of a stage.
 Nancy  Mon Jul 13, 2009 12:16 pm  
Here is the code so far as I've tried to solve the problem:

var images:Array = ["dot_door.png", "door.png", "dot_sink.png","sink.png","dot_inside.png","inside.png","dot_outside.png","outside.png"]

// door tip
var image1:Loader = new Loader();
image1.load(new URLRequest(images[0]));
image1.x = 390.4;
image1.y = 175.5;
addChild(image1);

// door callout
var image2:Loader = new Loader();
image2.load(new URLRequest(images[1]));
image2.alpha = 0;
image2.x = 390.6;
image2.y = 135.5;
addChild(image2);

// sink tip
var image3:Loader = new Loader();
image3.load(new URLRequest(images[2]));
image3.x = 601;
image3.y = 152.8;
addChild(image3);

// sink callout
var image4:Loader = new Loader();
image4.load(new URLRequest(images[3]));
image4.alpha = 0;
image4.x = 411;
image4.y = 78;
addChild(image4);

// inside tip
var image5:Loader = new Loader();
image5.load(new URLRequest(images[4]));
image5.x = 332.9;
image5.y = 340.9;
addChild(image5);

// inside callout
var image6:Loader = new Loader();
image6.load(new URLRequest(images[5]));
image6.alpha = 0;
image6.x = 333;
image6.y = 208;
addChild(image6);

// outside tip
var image7:Loader = new Loader();
image7.load(new URLRequest(images[6]));
image7.x = 379.9;
image7.y = 296.9;
addChild(image7);

// outside callout
var image8:Loader = new Loader();
image8.load(new URLRequest(images[7]));
image8.alpha = 0;
image8.x = 380;
image8.y = 164;
addChild(image8);

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

stage.addEventListener(MouseEvent.MOUSE_OVER, mouseOverHandler2);
stage.addEventListener(MouseEvent.MOUSE_OUT, mouseOutHandler2);

stage.addEventListener(MouseEvent.MOUSE_OVER, mouseOverHandler3);
stage.addEventListener(MouseEvent.MOUSE_OUT, mouseOutHandler3);

stage.addEventListener(MouseEvent.MOUSE_OVER, mouseOverHandler4);
stage.addEventListener(MouseEvent.MOUSE_OUT, mouseOutHandler4);

//door
function mouseOverHandler(e:MouseEvent):void
{
image1.alpha = 0;
image2.alpha = 1.0;
}

function mouseOutHandler(e:MouseEvent):void
{
image2.alpha = 0;
image1.alpha = 1.0;
}

//sink
function mouseOverHandler2(e:MouseEvent):void
{
image3.alpha = 0;
image4.alpha = 1.0;
}

function mouseOutHandler2(e:MouseEvent):void
{
image4.alpha = 0;
image3.alpha = 1.0;
}

//inside
function mouseOverHandler3(e:MouseEvent):void
{
image5.alpha = 0;
image6.alpha = 1.0;
}

function mouseOutHandler3(e:MouseEvent):void
{
image6.alpha = 0;
image5.alpha = 1.0;
}

//outside
function mouseOverHandler4(e:MouseEvent):void
{
image7.alpha = 0;
image8.alpha = 1.0;
}

function mouseOutHandler4(e:MouseEvent):void
{
image8.alpha = 0;
image7.alpha = 1.0;
}

stop();
 mkeefe  Mon Jul 13, 2009 5:27 pm  
@Nancy - I have written a classed based version of this concept, which can be viewed here. I hope it helps.

http://v2.scriptplayground.com/tutorials/as/Dynamic-Image-RollOver-using-Classes/
 MarkM  Tue Jul 14, 2009 2:38 pm  
This is nice tutorial, but I'm looking for something a little different and have searched high and low... maybe you can help.

I want to place a group of thumbnails at the bottom of my stage and when I roll over them (not click but just roll over), I want the full size image to appear above the thumbnails. I've seen lots of examples that allow to do this if you click on a thumbnail, but nothing that lets you just roll over. To me, the difference isn't that great, but my client is adamant that they don't want to click.

Thanks.
 Breck  Mon Jul 27, 2009 6:38 pm  
This is exactly what I have been looking for!

Is there a way to automatically resize an image to fit within the stage dimensions that are set in the flash file, or vice versa? (resize the stage to fit the image).

Thank you!
 mkeefe  Mon Aug 3, 2009 10:09 am  
@Breck - That would only be possible if you used Javascript to watch the browser window and fire an event to resize the stage.
 suman  Wed Apr 14, 2010 7:27 am  
thank's a lot
 Kiran  Fri Apr 16, 2010 5:59 am  
Im trying to replicate the ecommerce product showcase (ex. Cloth shop ie., under the same code im having 2 or more images to display so tried to swap those images, but im getting some problem while doing that) using flash, will u pl help me....
 Glenn  Thu May 6, 2010 2:21 pm  
Hi,

I am getting a compiler message - 1084: Syntax error: expecting rightbrace before end of program.

Am not sure what is happening. Would anyone know what is happening? I'm using CS4.

Thanks, Glenn
 Silvia  Tue Jun 8, 2010 5:51 pm  
Hi,
I am having a very similar problem to Nancy in previous post. I don't think the class tut will help me, as I am already loading every image individually in a gallery. However when mouse is over any objects on the stage the image changes....

Help is Highly appreciated, have been struggling with this for days now..

Here's my code, I need to have it so that only the rollover only happens on the loaded image!

var images:Array = ["4.jpg", "4_over.jpg"]

// image 1
var image1:Loader = new Loader();
image1.load(new URLRequest(images[0]));
addChild(image1);

// image 2
var image2:Loader = new Loader();
image2.load(new URLRequest(images[1]));
image2.alpha = 0;
addChild(image2);

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

function mouseOverHandler(e:MouseEvent):void
{
image1.alpha = 0;
image2.alpha = 1.0;
}

function mouseOutHandler(e:MouseEvent):void
{
image2.alpha = 0;
image1.alpha = 1.0;
}

 alice  Tue Aug 10, 2010 6:17 pm  
how can i make dynamic text
 Leonardo  Tue Aug 17, 2010 10:08 am  
Hey, I'm having a serious problem when trying to load different images into the same loader. When a button is clicked, the image of the Request changes and the same Loader is asked to load them. Then i change it's witth and height. The problem is that the new image is getting the width and height previously stated. Yet, if I unload the image first, width and height for the loader and the parent become 0, and still the new image get the previous measurements (before the resizings kick in)...
 kenny  Tue Nov 9, 2010 7:23 am  
i need help with scripting
 kenny  Tue Nov 9, 2010 7:26 am  
i am working with cs3 actionscript2, slides and i really find it hard to create my form page...
name..
email..
tel....
message/ /comments....
 mkeefe  Tue Nov 9, 2010 9:56 am  
@alice - You can place it dynamically (actionscript) or use the TextField object of Flash Professional.

@Leonardo - I recommend attaching an Event.COMPLETE to the contentLoader property of the Loader object. Then when you load set the alpha to 0. Once the image is loaded resize and set the image alpha to 1.0 in the function called by the added event listener.

@kenny - I have a few examples on this site, in How to Wow with Flash book and Flash and PHP Bible, hope that helps.
 AMunshi  Fri Dec 17, 2010 11:05 am  
Hi...I am reading your script, but I think I am trying something different. I have for eg. 5 thumbnails next to each other. I want to get a rollover/ rollout effect on each thumbnail so that the one I rollover, should light up, rather the alpha should go to a 100%. & when I click that particular thumbnail, the image should come up. I have tried something i saw on youtube, but that wont work in my case...I am using, Flash CS5 with Actionscript 3.0. Can you please help. I could actually get the thumbnails to light up , but at rollout, they do not go back to the original alpha of 50%? What do I do? Any help is appreciated...thankU
 Andrew  Wed Feb 2, 2011 3:08 pm  
Someone earlier asked if there was a way to make this work with a movie clip instead of an image. I'd like to do something similar with a group of thumbnails that would be hidden by default, but when you mouseover the clip they appear.

I thought this would be pretty simple, but I've been looking for a solution for hours and can't find anything.
 Dee  Mon May 23, 2011 2:02 pm  
Hi I'm new to flash and actionscripts. I'm trying to create a mouse over effect whereby once you play your mouse corsor over a text or and image it will automatically slide out an object
 mkeefe  Tue May 24, 2011 11:35 am  
@Dee - You have a few options for this. You can create an animation in another MovieClip and onRollover simply play that animation or you could use the Tween library or 3rd party tweening framework to pragmatically display/hide the object.
 Dee  Wed May 25, 2011 3:49 am  
Hi mkeefe. I have tried tweening the object to slide in but it didn't work. I converted the image to a button and in the over state, I put an effect on the object to blur in from say right. But when I place the corsor over the main image, it's like the over object doesn't gave enough time to fully appear. I'm so crap at this. Is it possible to write a tutorial or do a video? Sorry for being do thick I've never used animation and wouldn't have a clue where to start. Thanks
 Yllis  Thu Jun 9, 2011 3:46 am  
It doesn't work. I keep getting the error:
"SecurityError: Error #2000: No active security context."
Could some one tell me why this is..
 mkeefe  Mon Jun 27, 2011 10:46 am  
@Dee - While I can't shoot a video or write a tutorial directly for this issue I do know AdobeTV has a bunch of videos on animation and the basics. Soon Scriptplayground will as well too.

@Yllis - This link might help with that issue:
http://www.actionscripterrors.com/?p=409

Matt
 jeetukhan@rocketmail.com  Fri Aug 26, 2011 11:30 pm  
ThankXXXX
 Miles  Wed Nov 30, 2011 5:24 am  
I am using CS5.I am very new to flash but i have been working with it for a 1 year and not very familiar with action script but that will change soon. I have a mouse over event that i would like to create but don't know where to start. When the cursor is on a button that i created i want to display an image which resides in my library. How do i go about it someone pls help.
Add a comment
The ability to add new comments has been disabled in this archived version.

Loading
Main | Tutorials | Articles