Flash Buttons: The Over State	Home • Food • Mates • Members • Tutorials • Forum • Buy Templates • Contact Us

Creating Buttons

Free Flash Tutorial

Step Four: The Over State

The Over State refers to what the button looks like when the mouse cursor is moved over the button. If the button looks different it is visually clearer to the user when the button is ready to be clicked, as they can see that the Mouse Cursor is in the correct place to click on the button. In this case I will show you how to change the Button's Font style and background color. Like this:

My Example: Download the Flash File:  Beg 005a

Click and drag your mouse over this button.

Note: It is not essential to have an Over State but the button will look better and be clearer to the user with an Over State.

1. In the Timeline right click (Mac - Ctrl click) in the: Over Frame
2. From the Menu select: Insert Keyframe


Right Click in the Over Frame and select: Insert Keyframe

Note: The Play Head will move to the Over Frame and your text and rectangle from Frame 1 is copied to the Over Frame:


The red Playhead is now in the Over Frame.

3. De-select both the rectangle and text by clicking on a blank area of the Stage: Deselect Button


The text & rectangle are no longer selected.

4. Select the: Text
5. Change the text to bold: Text > Style > Bold (Ctrl Shift B)


Text is now too big for the background rectangle!

6. If the Property Inspector is closed, open it: Window > Properties > Properties (Ctrl F3)
7. If the Text is too big go to the Property Inspector and: Reduce the Size


Reducing the text size in the Property Inspector.

8. In the Property Inspector change the Fonts colour. I selected: Black



9. So that you can get to the rectangle below: Drag the Text Aside



10. Click to select the: Rectangle Fill



11. In the Property Inspector change the Fill color:



You will now need to re-align the text to the centre of the Stage again:

12. If the Align panel is closed, open it: Window > Align (Ctrl K)
13. Select the: Text
14. Click on the Align Vertical centre button:
15. Click on the Align Horizontal centre button:

The Over State is now done! Although we changed the font style, colour and background color you could have changed any combination of attributes.