Creating Buttons

1
Creating Buttons

• Lesson 5

2
Objectives

• Create and edit rollover buttons.
• Make new buttons from an existing one.
• Use the library to add instances of a button.
• Add links to your buttons.
• Create a button from an existing graphic.

3
Create rollover buttons

• Rollover buttons are quite common on Web pages.
• A rollover button changes appearance when the
  user moves the pointer over it or clicks the
  button.
• There are four rollover states
• Up Active when the user is not interacting with
  the button.
• Down Active when the button is clicked.
• Over Active when the pointer is over the
  button.
• Over While Down Active when the user holds the
  pointer over the button on a page where the
  button is already depressed.

4
Use the Button editor

• When you create a button in Fireworks MX, the
  button appears in the Button editor.
• The Button editor contains tabs for each button
  state, making a button easy to create.
• When a button is created, it is automatically
  added to the symbol library, making it easy to
  use in other parts of your document.
• Open the Button editor by clicking the Edit menu,
  then Insert, then New Button.

5
The Button editor
This figure shows the Button editor with the
completed Up state for a button. This button is
composed of several objects. First, a rectangle
was created in a blue color.
Next, a smaller rectangle was created, colored
dark gray, and aligned with the left edge of the
first rectangle. Next, a small triangle was
created, colored white, and placed within the
gray rectangle. Finally, text was added to the
button. This is how the button will appear in the
Up state.
6
Create the Over state button from the Up state
button

• You can quickly create the Over state for a
  button using the button created for the Up state.
  To do so
• Click the Over tab in the Button editor.
• Click the Copy Up Graphic button in the Button
  editor window to copy the button.
• Change the color of the triangle to some new
  color, and change the color of the large
  rectangle as well.
• A color change indicates to the user that the
  button has been clicked.
• Select the Active Area tab and set the slice and
  slice guides for the button.
• Click the Done button when finished.

7
Create a new button from an existing button

• You can create a new button from an existing
  button using the Library panel.
• Click the Window menu, then Library.
• Click the button to be used to select it, click
  the Options menu of the Library panel, then click
  Duplicate.
• Double-click the new button just created and
  enter the name to use for the button.
• With the new button still selected, double-click
  the preview of the button at the top of the panel
  to open an editing window.
• Change the text or color as desired to modify the
  button for its new purpose.

8
The Library panel
The figure on the left is the Library panel. Note
the preview image of the button at the top. The
button name is listed below the preview window.
Double-click the name to rename it. Double-click
the preview to edit it.
The figure on the right shows the Options menu of
the Library panel. Note the Duplicate option used
to copy a button.
9
Add instances of a button to the canvas

• Once a button is in the Library, a new instance
  of the button can be used over and over in your
  document.
• Just drag a button from the library to the canvas
  to create a new instance.
• If you edit the master copy of the button in the
  library, all instances of the button will be
  automatically updated.

10
Establish links for your buttons

• Creating a button does not establish any action
  for the button.
• Buttons on Web pages are usually created for the
  purpose of linking to some other page or section
  of the page.
• You need to establish hyperlinks for your buttons
  before the buttons will do anything.
• Set the links in Fireworks MX before exporting
  the file to Web format.

11
Setting a link for the button

• Links can be set in the Property inspector.
• Click the Link box and enter the complete path
  name for the link for each button.
• When you export the file, the link will be
  exported with the button.
• You can enter alternative text for the button in
  the Alt box of the Property inspector.
• Hint Use the button labels (the text) as the
  alternative text.
• The Alt text will appear in some browsers while
  the image is loading. For browsers that dont
  support images, the Alt text appears in place of
  the button.

12
Create a button from an existing graphic

• Any existing bitmap graphic in your document can
  be used as a button.
• The graphic must first be converted to a
  Fireworks button. To do so
• Select the graphic to convert, click the Modify
  menu, then Symbol, then Convert to Symbol.
• In the Symbol Properties dialog box, assign a
  name to the button, click the Button option, then
  click OK. The graphic is now a button and has
  been copied to the Library panel.
• Double-click the button to open the Button editor
  and make any changes required for the button.

13
A sample page with buttons
This figure shows a page with several buttons.
The buttons across the top of the page were all
created and/or copied using the Button editor and
the Library panel. The buttons down the left side
of the page were all created from bitmap graphics.
Buttons created from scratch or copied from
existing buttons. Bitmaps converted into buttons.
14
Summary

• In this lesson, you learned
• How to create and edit rollover buttons.
• How to make new buttons from an existing one.
• To use the library to add instances of a button.
• How to add links to your buttons.
• How to create a button from an existing graphic.