ft0005 - How to create buttons in Flash

Tutorial 2 of chapter 3 (Working with Symbols and Instances) from Adobe Flash CS6 book:

In this tutorial, you will create button in Flash, as shown in Figure 1. You will also create the four states of button, namely up, over, down, and hit.

Figure 1

The following steps are required to complete this tutorial:

1. Create a primitive rectangle in the Stage. For the stroke of the rectangle choose the black color and for the fill select the linear gradient fill.

2. Rotate and scale the linear gradient fill in the rectangle using Gradient Transform Tool. Figure 2 shows the rectangle with the linear gradient fill scaled and rotated.

Figure 2

3. Select the rectangle in the Stage.Press the F8 key to display the Convert to Symbol dialog box. In this  dialog box, type Home in the Name text box and select Button from the Type drop-down list. Choose the OK button; a button symbol is created and saved in the Library.

4. Choose Edit > Edit Symbols from the menubar. Figure 3 shows the editing mode of the button symbol.

Figure 3

5. In the Timeline panel, select the Over frame. Next, press the F6 key to insert a keyframe. Select the rectangle in the Stage. In the Color panel, double-click on the right pointer of the gradient definition bar; a flyout is displayed. In this flyout, enter #999999 in the Hex edit box and press the ENTER key. Now, click in the blank area of the Stage to deselect the fill.

6. Select the Down frame and press the F6 key to insert a keyframe. Next, select the fill of the rectangle in the Stage. In the Color panel, double-click on the right pointer of the gradient definition bar; a flyout is displayed. In this flyout, enter #333333 in the Hex edit box and press the ENTER key.

7. Select the Hit frame and press the F7 key to insert a blank keyframe. Create a new layer above Layer 1. 

8. Choose Rectangle Tool from the Tools panel.

9. In Layer 2, select Hit frame and insert a blank keyframe. In the Stage (symbol-editing mode in the Scene area), create a rectangle covering the rectangle of the button symbol, as shown in Figure 4.

Figure 4

10. Press CTRL+ENTER to the preview window. Move the mouse pointer over the Home button instance to see its Over state and click on it to see its Down state. Figures 5 and 6 show the Over and Down states of the Home button instance, respectively.

Figure 5                                                          Figure 6