Creating button symbols

Buttons are navigation elements for a web page. Buttons created in the Button Editor have the following characteristics:

• You can make almost any graphic or text object into a button.
• You can create a button from scratch, convert an existing object into a button, or import already created buttons.
• A button is a special type of symbol. You can drag instances of it from the symbol library into your document.

This allows you to change the graphical appearance of a single button and automatically update the appearance of all button instances in a nav bar. For more information on symbols, see Using symbols.

• You can edit the text, URL, and target for one button instance without affecting other instances of the same button, and without breaking the symbol-instance relationship.
• A button instance is encapsulated. When you drag the button instance in the document, Fireworks moves all the components and states associated with it, so there is no need for multiframe editing.
• A button is easy to edit. Double-click the instance on the canvas, and you can change it in the Button Editor or the Property inspector.
• Like other symbols, buttons have a registration point. The registration point is a center point that helps you align text and the different button states while in the Button Editor.

In Fireworks, you will create a graphic. Here is an example:

Select the graphic and then right click on it to use the shortcut menu.

Select convert to symbol.

Here is the Symbol Properties box:

Name the symbol and make it a button.

The graphic will now display in button state.

Notice the red lines, the blue rectangle, the plus sign in the middle, etc.

Double click on the button graphic.

Now the button is in edit mode with tabs to allow you to change the appearance of the button for different states:

· When the mouse is UP, or not over the button,

· When the mouse is OVER the button, (but the mouse is not pressed),

· When the mouse has been pressed DOWN on the button,

· When the mouse is OVER WHILE DOWN, and

· ACTIVE AREA allows one to make the button a hyperlink to a specific web page.

When the mouse is UP, or not over the button:

Use the PROPERTIES INSPECTOR and the EFFECTS tool.

At this point you must select the OVER tab.

Then press COPY UP GRAPHIC.

When the mouse is OVER the button, (but the mouse is not pressed):

Again, change the appearance of the button in this state using the PROPERTIES INSPECTOR and EFFECTS tool.

Similarly, select the DOWN tab, and press COPY UP GRAPHIC.

Change the buttons appearance.

Repeat for the other tabs.

The last tab, ACTIVE AREA, allows a link to be added to the button.

When the button is completed, click DONE.

The button needs to saved, of course.

Next it must be EXPORTED.

After entering the filename (and location), make sure that the selections are as indicated below.

Later, the buttons can be inserted into a web page.