Saturday, 27 June 2009

Create an image rollover effect

In this tutorial you will learn how to create an image mouse rollover effect in Flash CS4. The results of this effect will show different images blending into each other when the mouse is over the image. For this tutorial I have used Actionscript 3.0 you will, of course, need images. I have used various free stock images which are available from: www.sxc.hu

Image rollover effect

Step 1

Open a new Flash Actionscript 3.0 file.
Import your images into the library by selecting File > Import > Import to Library.
On the timeline rename the “Layer 1” name to “image 1”.




Step 2

Drag your first image onto the stage from the library and convert it into a symbol by pressing F8. Give your symbol an appropriate name, check movie clip and click ok. Select your movie clip and give it the instance name: image1_mc.




Step 3

On the timeline select the 30th frame and hit F5 to insert a frame. Then right click anywhere in between the 1st and 30th frame and select Create Motion tween.

Now select the 30th frame then select the image on the stage and change the Alpha style to 0%. Your image on the stage should now disappear.




Step 4

On the timeline lock the “image 1” layer then insert a new layer called “image 2”. Select the 55th frame and hit F5 to insert a frame, and then select the 25th frame and hit F6 to insert a key frame.

Now drag your second image onto the stage. Convert it into a symbol by pressing F8. Give your symbol an appropriate name, check movie clip and click ok. Select your movie clip and give it the instance name: image2_mc.


Step 5

Right click anywhere in between the 25th and 55th frame and select Create Motion tween.

1. Select the 25th frame then the image on the stage and change the Alpha style to 0%.
2. Next select the 30th frame then the image on the stage and change the Alpha style to 100%.
3. Finally, select the 55th frame then the image on the stage and change the Alpha style to 0%.

Your timeline should look like below:



If you want to add more images simply repeat the steps 2 -5 above, but remember to change the instance names and the key frame numbers.


Step 6

On the timeline insert a new layer called “Actions”. Insert key frames (F6) on the 30th and 55th frames.Now right click on the 1st frame and select Actions and enter the following code:

stop();
image1_mc.addEventListener(MouseEvent.MOUSE_OVER,imageOver);
function imageOver(event:MouseEvent):void {
play();
}

Select the 30th frame and select Actions and enter the following code:
stop();
image2_mc.addEventListener(MouseEvent.MOUSE_OVER,imageOver2);
function imageOver2(event:MouseEvent):void {
play();
}

**The code above plays the motion tween on the timeline with the alpha effect, when the mouse is over the image and stops at the next image. Be sure to add a stop() at your last frame.


Step 7

Test your movie Ctrl + Enter. Now mouse over the image and it should fade into the next one.



You should now have an image mouse rollover effect.

4 comments:

veroniquetaylor 22 September 2011 at 12:16  

i keep coming up with a problem - I followed the steps (multiple time) and come up with the repeating image1 to image2.
i have included stops, and the problem persists.

also - i have an error that says"access of undefined property mouseEvent"

If you can offer any assitance, it would help!

veroniquetaylor 22 September 2011 at 12:20  

Nevermind! (Palm to face) I didn't capitalize M for Mouse and the script was considered wrong.

Excelent tutorial! Thanks!

Miss K 10 February 2012 at 07:46  

I followed the tutorial and this works like a charm, but since I'm new to the whole flash and AS thing, how do I get the image to change back when I move my mouse out of the image?

iliketo 11 February 2012 at 01:55  

@Miss k

You can use the gotoAndPlay() method.

  COPYRIGHT © 2014 · ILIKE2FLASH · Theme by Ourblogtemplates

Back to TOP