How to Make a Rollover Button in Adobe Flash CS5
Rollover buttons change their appearance when a user hovers the mouse cursor over them. You can create a simple rollover animation in Flash CS5, a leading animation program, by editing the Button symbol's mouse states. Create the button with Flash's drawing and text tools, convert it to a Button symbol, and then change the button's appearance in the symbol's Over state.
Other People Are Reading
Instructions
-
-
1
Open an existing Flash FLA movie in which you want to create a rollover button, or start a new movie by clicking the "File" menu and choosing "New." This opens the "New Document" dialog box. Select "ActionScript 3.0" in the Type list. Type the width of your new movie in the "Width" field and the height in the "Height" field, and then click OK.
-
2
Select the "Rectangle Tool" in the Tools panel.
-
-
3
Go to the Fill and Stroke Section of the Properties panel, click the "Stroke" color swatch (the pencil icon) and choose the border color for your button.
-
4
Go to the Fill and Stroke Section of the Properties panel, click the "Fill" color swatch (the paint bucket icon) and choose the fill color for your button.
-
5
Adjust the "Stroke" slider to set the weight, or thickness, of the border.
-
6
Go to the "Rectangle Options" section of the Properties panel and adjust the slider to set the corner-roundness for your button. A setting of 25 creates a nice-looking, oval-shaped button.
-
7
Draw a button-sized rectangle on the stage. You can use the "Width" and "Height" options in the Position and Size section of the Properties panel to set the button's dimensions to an exact size.
-
8
Select the "Text Tool" in the Tools panel.
-
9
Go to the Properties panel and set the font, color, and size for the button label text.
-
10
Click in the rectangle on the stage and type your button label, then select both the label and the rectangle.
-
11
Click in the rectangle on the stage and type your button label, and then select both the label and the rectangle. To select both objects, click one of them, and then SHIFT + click the second object.
-
12
Click the "Window" menu and choose "Align" to open the Align panel. Click the "Align Horizontal Center" button, and then click the "Align Vertical Center" button. This aligns the label to the center of the rectangle.
-
13
Right-click the selected objects and choose "Convert to Symbol" from the pop-up menu. This opens the Convert to Symbol dialog box. Name the symbol in the "Name" field," click the "Type" drop-down menu and choose "Button," and then click "OK." Flash combines the two objects and converts them to a button symbol.
-
14
Right-click the button symbol and choose "Edit" from the pop-up menu. This places the symbol in Edit mode.
-
15
Go to the Timeline panel, right-click the "Over" frame and choose "Insert Keyframe." From here you can make changes to your button, so that it changes appearance in the Over state. You can, for example, change the rectangle or text color, or both. You can also make the rectangle slightly bigger or smaller, or move it slightly. Whatever changes you make in this frame will display when the user hovers her mouse cursor over the button.
-
16
Make the desired changes to your button, and then click "Scene 1" in the upper-right corner of the document window to return to the main stage.
-
17
Click the "Control" menu and choose "Enable Simple Buttons." Hover the mouse cursor over the Button symbol to see the rollover animation.
-
1
Tips & Warnings
You can also add a Down state to your button, so that the button changes appearance when the user clicks the button. Add a keyframe in the "Down" frame in the Button symbol's timeline, then make the desired changes to the button rectangle and label.
You can add a bevel, drop shadow, or other special effects from the Filters section of the Properties panel. Select the symbol, click the "Add Filter" button in the lower-left corner of the Filters section of the Properties panel, and then choose the desired effect from the popup menu.
References
Resources
- Photo Credit Photos.com/Photos.com/Getty Images
