Button tutorial Flash - Simple buttons

Buttons are one of the building blocks of interactivity. They are used to capture user events such as mouse roll overs or clicks. You can use buttons to perform various tasks such as loading external movies, stopping sounds etc. Creating a button is as simple as creating a graphic symbols because buttons are symbols themselves.

Step 1

Open a new file. Give a descriptive name to the layer.

Step 2

Draw a rectangle that will serve as a button graphic. Put some text inside the rectangle. Select the rectangle and the text and align them to the center of the page. Click Insert - Convert to Symbol. Name this symbol "rect" and select Graphic as its Behavior.
Graphic symbol that will be used inside the button.
If not already open, click on Window - Library to display the library. You will find your newly created graphic symbol rect listed in the library. We will use this graphic symbol inside our buttons and change its instances to differentiate between the various button states.
You can now delete the graphic symbol from the stage. (Don't delete the symbol from the library, just its instance on the main movie).

Step 3

Click on Insert - New Symbol. In the Symbol Properties window, type mybutton in the name field and select Button as the Behavior.

Step 4

Whenever a new symbol is created, you are directly taken to Symbol Editing mode. In this mode, you can edit the symbol only. (You can always go back to editing the movie by clicking Edit - Edit Movie).
The button symbol consists of only four frames called Up, Down, Over and Hit.

• Over: Determines the button state when the mouse cursor is taken over it.
• Down: Determines the button state when the mouse cursor is taken over it and the mouse button is pressed (but not released).
• Up: Determines the state of the button when a mouse button button is pressed and then released over it.
• Hit: Determines the area of the button.

When the mouse cursor is moved over a Flash button its shape changes to a hand. Hit determines this active area.

Step 5

Drag an instance of the rect symbol onto the Up frame of the button. Align it to the center of the page.
Select the remaining three frames (use the SHIFT key for multiple selections), right-click and select Insert Keyframe.
To differentiate between various button states, we'll change the instances of the rect graphic which now occurs in all the four frames.
For mouse-over effect, hightlight the Over frame and click Modify - Instance. Change the Brightness in the Color Effect to 50%. Click OK
Then change the instance of the symbol in the Down frame. In the Frame Properties window, select Special from Color Effect drop down menu and change the Red value to 219.

We've change the instances of rect symbol for Over and Down button states. Our button is now complete. We now need to place it in the main movie and check our results.

Step 6

If in symbol editing mode, go to movie editing mode (click Edit - Edit Movie).
Drag an instance of the button symbol onto the main movie stage. Align it to the center of the movie.
Click Control - Test Movie to see how this button works.

Move your mouse cursor over the button and click on it to see how it functions.

Note: It's not necessary to use the same graphic symbol for each of the button states. You can have freaky buttons if you combine different graphic symbols.

Using only text as buttons

Buttons can be made using only text. However, in such cases, use a geometrical shape such as a rectangle to define the area for the Hit frame of the button because the area enclosed by the text is thin and irregular.