How to Create Buttons in Flash - dummies

By David Karlins, Doug Sahlin

Navigation menus need buttons. Flash gives you all the tools to create some really cool buttons. If you haven’t created Flash buttons before, consider this your baptism by fire. To create a button for your menu, follow these steps:

1Choose Insert→New Symbol.

The Create New Symbol dialog box appears.

2Type a name for your symbol and choose the Button behavior from the Type drop-down menu.

You’re creating a menu, and the obvious place to start a menu is with the Home button. Therefore, name the button Home.

3Click OK and Flash enters symbol-editing mode.

You have one layer as well as four states, each driven by the user’s cursor position: Up, Over, Down, and Hit.

This state determines the target area of the button. You add the Hit state if you have a particularly dainty button that might be hard to select.

4If it’s not already open, choose Window→Properties.

The Properties Inspector opens.

5Create the shape size for your button.

When creating buttons, use the Rectangle tool with a corner radius of 50 px to get an oval shape. Before creating the shape, change the Rectangle Options value in the Properties Inspector to 50, which gives you a nice rounded edge. Choosing View→Rulers enables you to create an object that’s the approximate size of the button.

6Select the button shape, and in the Properties Inspector, type the desired dimensions for your button in the width and height fields.

To figure out what size to make each button, divide the width of your navigation menu by the number of buttons. In this example, you’re creating six buttons for a navigation (nav) menu that’s 600 pixels wide and 25 pixels high. Therefore, each button is 100 pixels wide and 25 pixels high.

7Select and then align the button to the center of the Stage.

Press Ctrl+K (Windows) or Apple+K (Mac) to open the Align panel. Select the To Stage check box, and then click the icons that center the button vertically and horizontally.

8Click the New Layer button in the lower-left corner of the Timeline.

Flash creates a new layer. All you need to know about layers for now is that layers help you organize your work. For the button, you’re creating a separate layer for button text.

9Double-click the button text layer title.

This opens a text box into which you can type a new name for the second layer. It’s not imperative, but crafting an intuitive name now helps you decipher later which layer is used for what when you’re creating a complex movie or symbol.

10Enter a name for the layer.

Text is as good a name as any. While you’re at it, rename the layer on which the button resides. Button Shape is a good name.

11Select the Text tool and type the desired name.

In this case, the button is called Home. When a visitor clicks this button, he goes to the home page.

A full-blown tutorial on the Text tool is beyond the scope of this book. However, if you look at the Properties Inspector, you see how easy it is to set parameters for the Text tool.

12Press F5 in the Down frame on the Text layer.

This copies the contents of the Up frame to the Over and Down states.

13Press F6 to create keyframes for the Over and Down states on the Button Shape layer.

Creating keyframes enables you to change or modify the contents of these frames, or make some other change that will notify users they have indeed found a clickable button. The graphic on the Down state appears when users successfully click the button.

14Make changes in the Over and Down states for the Button Shape layer.

For this running example, we changed the color of the button to red in the Over frame and to orange in the Down frame.

15Click the Back button (looks like an arrow, and is left of the Scene title above the uppermost layer).

The button is added to the Library and is ready for use.