Part 1 : Defining the graphics and the interactive states

1. Create a new FLA
2. Using the rectangle tool create a 80x30 grey rectangle with a black stroke (fig1)

fig1

3. Select the button stroke and fill (by double clicking on it or by dragging and drawing a rectangle with the selection tool around it) and press F8. In the window which appears (fig2) type "myButton" in the Name field and select Button for the Type. Press Ok

fig2

4. Now select the Instance of the button that you just created and in the Properties panel enter "myButton" in the instance name field (fig3)

fig3

5. Double click on the Instance of the button on the stage (or if you right click on it you can select edit in place). You will notice that the timeline inside the button instance is different from the timeline of normal movie clips. We have 4 main keyframes (fig4) represented by the state Up, Over, Down, Hit.

fig4

The Up state represents the default appearance of the button.
The Over state represents the appearance and actions associated with the button when the mouse is over the button.
The Down state represents the appearance and actions associated with the button when the button is pressed.
The Hit area is often misunderstood. It actually defines a hit area that will respond to mouse interaction. Most of the time the hit area can be left blank. Below (fig5) you can see the Hit area in action when you draw a little blue circle (and no other graphic not even the grey rectangle graphic of the button) on the Hit keyframe.

fig5
roll over the button with your mouse. Notice that it only reacts when you roll over the blue circle which represents our Hit area as we defined it on the Hit keyframe.

6. Leave the hit area blank as we are perfectly happy to use the whole area of the rectangle as a hit area and let's define the Over state and the Down state.

Insert a keyframe under the Over frame label and fill your button with red (fig6)
Insert a keyframe under the Down frame label and fill your button with blue (fig6)
Don't insert any keyframe under the Hit area nor a blank keyframe. (fig6)

fig6

Press CTRL+ENTER or go in Control > Test Movie to test your button. You can see that the color changes to red as you roll over and to blue when you press on it.

If you want to add text to your button just create a new layer, insert a new keyframe under the Up state and create a text field with your text on that layer (fig7). You can even create a new keyframe under the Over and Down state if you want the color of your text to be different under those states.

fig7

In our case, I have added the text "Submit" on the button, see below :