Macromedia Studio 8 [Electronic resources] : Training from the Source نسخه متنی

Creating Buttons

In this task, you'll create a button using Fireworks' Button Symbol editor. Before you start creating buttons for the Web, you should understand how button symbols work in Fireworks.

On the Web, the appearance of navigation buttons often changes depending on user actions. Actions such as clicking a button, rolling over a button, and moving the mouse away from a button can change the button's appearance. For example, when you mouse over a button, it may light up. To achieve this effect, designers have to create separate graphics to represent each of the different ways the button will appear.

Fireworks calls the various appearances of a button states. Fireworks buttons have the following four button states:

Up. The Up state is the default, at-rest appearance of the buttonthe version that most commonly appears when a page loads.

Over. The Over state appears when the mouse rolls over the button's active area. Many of the navigation buttons you see on Web sites have only the Up and Over states.

Down. The Down state is the appearance of the button after a user clicks it. This state is typically displayed on the destination Web page, to indicate which page the user is currently on (or, for larger sites, the section the user is viewing).

Over While Down. The Over While Down state is the appearance of the Down state button when the cursor is moved over it.

The following figure shows an example of the two most common states of a button: the Up state and the Over state. The Up state is the normal state of a button, and is displayed when the Web page first loads. The Over state is displayed when the mouse hovers over the button.

To create a button, you must create a separate graphic for each state you want to capture. But that's not all. You also need a script to instruct the browser to display the correct button graphic, depending on the user's activity. The script is usually written in JavaScript, a scripting language used for controlling the browser. This script has to account for each of the button graphics (which represent states) and respond to appropriate user events. It may sound complicated, especially for a nonprogrammer, but fortunately, Fireworks does just about all the work for you.

All you have to do to create a functional button is build a button symbol in Fireworks' Button Symbol editor. Once you've created it, Fireworks stores the button symbol in the Library. You can then create as many instances (that is, copies of the original button symbol) as you need.

Note

The Library is discussed in more detail later in this lesson.

Designating the button as a symbol has the following advantages:

Fireworks saves the button symbol in the Library, so you can reuse its instances as often as you like. Reusing symbols boosts productivity and ensures consistency.

Fireworks' Button Symbol editor contains a four-state environment in which you can use various vector and text tools to easily develop and modify the button's appearance in different states.

Fireworks automatically exports the necessar238 and JavaScript to accompany the different states of the button to ensure that the button effect functions properly and that each state is correctly referred to in the scripts.

Now that you have a basic understanding of how Fireworks handles buttons, we can return to the task at hand: creating the button's Up state. The button symbol you will be creating for Jade Valley's navigation system contains only two states: Up and Over. You'll start with the Up state. In the process, you'll get a hands-on review of what you learned from Lesson 1: drawing vector graphics, creating and formatting text, and sizing and positioning objects with numeric precision.

You'll begin by creating a new document.

Alternatively, you can use the keyboard shortcut Ctrl+N (Windows) or Command+N (Mac).

We need a canvas that is big enough to accommodate the final size of the button. In fact, the button you'll create is smaller than the canvas, but you can resize it later. It's better to have a little too much room than not quite enough.

As always, remember to save early and often.

Although buttons are eventually output using several files (one graphic for each state, as well as a227 file with the requisite JavaScript), Fireworks encapsulates them all in the button symbol. Therefore, you can create all the button assets in a single document.

Fireworks offers two ways to create symbols: converting existing graphics to symbols and creating symbols from scratch. Because you need a custom-design graphic for the Jade Valley navigation system, you will use the second method.

Tip

In addition to using the main menu to create a symbol, you can use Ctrl+F8 (Windows)/Command+F8 (Mac) or choose New Symbol from the Library panel's Options menu.

We need to designate the new symbol as a button symbol in order to develop two states using the Button Symbol editor.

When you click OK, Fireworks automatically opens the Button Symbol editor. This editor enables you to create the different button states. In addition, Fireworks adds this new symbol to the Library. You can see the button by choosing Windows > Library to open the Library panel, where the new button is listed.

Preparing Graphics . You'll customize the exact size and location of the circle in the next step.

The numeric settings do two things: ensure that the circle is exactly 24 pixels in diameter, and ensure that the circle is centered on the canvas. The X and Y coordinates represent the distance in pixels from the top-left corner of the graphic from the center of the canvas. Thus, to ensure that the graphic is centered on the canvas, half its pixels need to be above the center (12), and half need to be to the left of the center (12).

Fireworks' Property inspector is context sensitive; because you just drew an ellipse, the Property inspector updates to provide several options for formatting this new shape.

This sets the stroke to 1 pixel wide, with a soft, smooth edge.

The stroke options of this new circle should be the same as those of the one you just drew.

Don't worry about the location of the new circle in relation to the smaller one. In the next step you'll use the Align panel to align both circles properly in the Document window.

The Align panel enables you to align objects with precision on the canvas.

You will notice that the smaller circle disappears after you align the two circles. That's because the fill of both circles is set to white, so that the more recently drawn circle obscures the original circle.

You just used the Align panel's controls for aligning objects on the canvas. These alignment controls make it possible to precisely align as many objects as you want on the canvas. Now you're ready to resize and reposition the second circle.

Because you are creating only one of the six buttons that make up the Jade Valley Web site's navigation system, resizing and repositioning is necessary so all the buttons look consistent. In the next step, you'll complete the development of the button Up state by giving it a label.

This completes the button Up state development process, including how the button will look when it is first loaded on the page. Fortunately, creating the remaining states will be much easier, since you can reuse much of your work.