	Sign In Sign-Up

Creating a Button with Flash 4

by Bnuts40

Note: A button is a type of symbol.

In this example we will create "Button 1" (A button can be given any name).

You must first select the type of symbol (Button) that you are creating, and give the button a name as follows (see Figure 1) :

1. Open Flash 4 and create a new Flash Movie Project. See Flash Overview.

2. Select frame 1 with the mouse. (Frame 1 is a keyframe by default).

3. Select "Insert > New Symbol" from the menu at top of work area.

4. In the Symbol Properties dialog box that appears, select "Button" and type "Button 1" in the "Name Box" to name the button.

5. Select "OK". This will bring you to the Flash 4 "symbol layer" where the button will be created. See Figure 2.

Symbol Properties

Figure 1

Now design the button as follows (see Figure 2):

Note: A button can be created with any image including .jpg or .gif images (Flash 4 supports any pasted vector graphics)

6. Select the "Up" button frame and insert a Keyframe (F6).

7. Using the circle tool, draw a red circle in the center of the screen.
(This will be how the button appears without any mouse actions in the Flash Movie).

8. Select the "Over" button frame and insert a Keyframe (F6).

9. Fill the red button symbol with Blue.
(This will be how the button appears when the mouse pointer is placed over it).

10. Select the "Down" button frame and insert a Keyframe (F6).

11. Fill the button symbol with Yellow.
(This will be how the button appears when it is selected with the mouse).

12. Select the "Hit" button frame and insert a keyframe (F6).
(This determines the area of the button frame that will react to mouse actions, In this example leave the circle).

Button Design

Figure 2

Insert the button into the Flash Movie as follows (see Figure 3):

13. Select Scene 1 from under the menu at top of work area. See Figure 2.

14. Select "Window > Library" from the menu at top of work area. The library dialog box should appear with "Button 1 inside.

15. Click and drag "Button 1" from the dialog box to the work area of the screen.

Inserting Button

Figure 3

Congratulations - You have just created a button in Scene 1.

Test the button as follows:
Select "Control > Test Movie" from the Menu Bar. The button should be a red circle.
Move the mouse pointer over the button. The button should turn Blue.
Click the Button. The button should turn Yellow.
When button is released it should return to Blue.

Note: The button you've created will not perform any actions when selected. You must now assign an action to the button.

16. Export the movie to an .swf file as desired. See Flash Overview.