Romulus 2 : Computer UK

x You are here: Home > Guides > Flash 4 Tutorials - Overview > Creating a Button

If you like this site, please support us by spreading the word.

We have made it easy to let your friends know about us. Just click on the Recommend-It icon below.

Flash 4 Tutorials

by Bnuts40

Creating a Button

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).

Index

Overview

Creating a Simple Flash Movie

Creating a Tween

Creating Advanced Tweens

Creating a Button

Assigning Actions to a Button

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

Figure 1

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.

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)

Figure 2

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).

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.

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.

Back to Top