Print Version  Email to Friend  Post comment

In this tutorial you will learn how to create a image roll over. You will learn how to have an image change when a mouse goes over it. This is great for effects on your movie or to get people's attention etc.

Step 1 : Create frames and insert images

1. Create a new flash project and change the document size to 250 px by 250 px for easier viewing.
2. Use these 2 images below for testing or you can use your own.
   
   
    
3. Go to frame 2 and insert a new keyframe (F6)
4. On frame 1 add the "Image" (blue image) and then on frame 2 add the "Roll Over" (red image). You can do this by clicking File ð Import ð Import to Stage. 
5. Just make sure the images on both frames have the same x & y coordinates else it will not look right!
   
   
    

Step 2 : Actionscript

1. Select frame 1 and right click the image then click convert to symbol. Make sure button is selected the click ok. Then click frame 2 and do the same thing.
2. Click on frame 1 and then open the actions panel. Type in stop(); This tells flash to stop the movie else it will keep looping.
3. Click on frame 2 and then open the actions panel. Type in stop(); This tells flash to stop the movie else it will keep looping.
4. Now go back to frame 1 and click on the button. Then in the action panel type the following in...
    

   on(rollOver){gotoAndStop(2);}

   This means when the mouse goes over the image go to frame 2 and stop.
   
   

5. That's it! now test your movie..

Your Name:

Title:

Comment:

Verification code:

{show_comment}