How to Create a Simple Two-State Button in Fireworks - dummies

How to Create a Simple Two-State Button in Fireworks

By David Karlins, Doug Sahlin

A two-state button is the default Fireworks button. You create the graphics and text for State 1, which is what the viewer sees when the page initially loads. Then you modify the same graphics for State 2, which is what the user sees when hovering the cursor over the button. The different graphics are a dead giveaway that something will happen when the button is clicked.

Before you can create any button in Fireworks, figure out what size to make it. When you decide to create a website, you do some sort of planning. Whichever method you use, you know how much area you delegated for navigation.

If you have only a few links, you can use a horizontal navigation menu. If you have lots of links, though, you need a vertical menu. After you meet with and create a mockup for your client, you should know the title for each button. Your button should be slightly larger than the longest title. With all that figured out, you’re ready to create a two-state button as follows:

1Choose Edit→Insert→New Button.

The Button Editor appears, with (alas) only guidelines in which to put the button graphics. Your mission, should you decide to accept it, is to populate the button symbol with a shape and text.

2Choose your drawing tool of choice and create a shape on the document.

The logical choice is the Rectangle tool. If you’re creating an oval-shaped button, you can choose the Rectangle tool and then use the Roundness parameter in the Properties Inspector to round the corners of the rectangle.

3In the Properties Inspector, specify the width and height of your button and any other parameters, such as stroke color and fill color.

The figure shows a button under construction.

4Center the button.

To center the button, drag the button toward the center of the document until you see a vertical and horizontal crosshair appear in the center of the graphic.

5Select the Text tool. In the Properties Inspector, specify the parameters for the button text.

Verdana and Arial are both good choices for the font face. Choose a color that’s harmonious with your design. The font size depends on the size of your button.

6Type the desired text on the button. Select the text and the button graphic and then choose Window→Align.

The Align Panel appears.

7Align the text to the button by clicking the desired icons.

In most instances, you’ll want the text aligned to the center of the button, which you can also accomplish by selecting the text with the Pointer tool and dragging it toward the center of the document until a vertical and horizontal crosshair appear. However, you may want to align the text to the left, right, top, or bottom of the shape. To achieve this result, you use the Align panel.

8Choose Select→Select All.

If you’re like us and like keyboard shortcuts, just press Ctrl+A (Windows) or Apple+A (Mac) instead. Selecting everything makes it easy to copy the graphics and text to another state.

9Choose Window→States.

The States panel opens in the Panel docker.

10Right-click (Windows) or Control-click (Mac) State 1 to display the contextual menu and then choose Copy to States.

The Copy to States dialog box opens. By default, All States is selected.

11Select the Next State radio button and then click OK.

You have a carbon copy of the shape and text in State 2, which is the graphic that users see when they pause their mouse over the button.

12Select State 2 and then modify or change the graphic you copied from State 1.

Of course, you could go with a different shape, but that’s not practical for a conventional navigation menu button. You modify the button by changing its color and/or the text. For a conventional site, change the color of the text.

13Click the Back button to return to the main window.

The button is added to your design.