Make a Mouse-over Button in Flash CS4

1. Open Flash CS4
2. Click Flash File (Actionscript 3.0)
3. Create a symbol with Insert>New Symbol
4. Name the file “button” and choose button from the drop-down box
5. Draw a light green rectangle
6. Make a text box and type anything you want
7. Center the text in the middle of the rectangle
8. Select everything
9. Create a keyframe underneath where it says “Over” on the timeline
10. Fill in the rectangle with dark green, making sure the text isn’t selected
11. Choose Edit>Edit Document to return to the document
12. Open the Library and drag the image of the button to the work area
13. Test the button by choosing Control>Test Movie

Now its time to make the button clickable:

1. Double click on button in your library. This should open up a new window where you can edit your button. Notice that the timeline has changed now. Now, the timeline says “Up” “Over” “Down” “Hit” This is where you edit how the button reacts to the mouse.
2. Leave the “Up” event the same and copy the “Up” event frame and paste the frame in the “Down” and “Hit” spots. Now, go to the “Over” event and change the color of your button to anything that looks good to you.
3. You can now test your movie. It should be when you roll over the button with your mouse that it changes color and when you click on the button, it changes to your “Hit” color.
4. Now it is time for the code part. This code will make the button change positions in the timeline. Go to frame one and press F9 to open the actions panel and put the following code:

   stop();
import flash.events.MouseEvent;
My_btn.addEventListener(MouseEvent.CLICK, CursorClick);
My_btn.addEventListener(MouseEvent.MOUSE_OUT, CursorOff);
function CursorClick(event:MouseEvent):void{
gotoAndStop("2");
}
function CursorOff(event:MouseEvent):void{
gotoAndStop(1);
}


5. Create a new keyframe and draw something on frame two.
6. Test your video and have fun!

©2011 Mr. D. Sader | Communication Technology | All Rights Reserved

.

Original post by Mr. D. Sader