Instructional Technology Resource Center - Saint Mary's College - Notre Dame, Indiana

Creating Buttons in Fireworks: Using the Macromedia Button Library

Choose:

1. Insert > New Button

2. then choose:

     Insert > Libraries 
and choose from any of the pre-built Buttons or Nav Bars libraries or choose Other...to select a button symbol from another file on your system that contains one. Select a button you like from the library by clicking "import". The button will be placed in the Button Editor in a workspace corresponding to the size of the current canvas.

3. The Button Editor provides the same access to Grids, Guides, Rulers, drawing and editing tools as the workspace. The button can now be resized, modified, and have custom text added, not just in the initial view (the default view is the UP view of the button, a view of the normal appearance of the button when the page first loads in a browser and before the button is selected). Adding text involves selecting the Text tool, and clicking in the center of the button editor display. Enter the text you want to add to the button...and select the font, and text attributes. When the text window is closed, answer yes when asked whether you want to this same text to appear on all other states of the button.

Up State

Over State

Down State

4. Once the initial (UP) button state has been completed, click the Over tab. This tab allows you to modify the look of the button when the mouse cursor passes over the button (but not clicked). Depending on the design of the button chosen, this view may be adequately designed as it is. (N.B. If you want to redesign the appearance of the Over state of the button you can either start with the Up state of the button or can simply modify the appearance of the pre-designed button. If you waish to start with the Up state of the button, click the "Copy Up Graphic" button to bring a copy of the Up state of the previously designed button into the Over tab, where colors, effects, text or the shape of the button itself can be made to make the rollover interesting to the viewer. Caution, this action will overwrite the current appearance of the Over state.

N.B. The Onion Skinning button allows you to compare the location of the Over state button with the Up state button. Be careful not to confuse Onion Skinning with the actual presence of a graphic in the Over state tab. If you use the "Copy Up Graphic" option, check to make sure the graphic has really been copied to this view by turning off Onion Skinning.

5. Continue creating the other states of the button by clicking the Down tab, and clicking the "Copy Over Graphic" tab in the Button Editor. The Down state is the "depressed" condition of the button when the mouse button is clicked down on this button. It is not used in simple rolloevers. It is used primarily in navigation bars; the button will display the Down (depressed) state when the page loads.

As in the Over state, this view of the graphic may be perfectly adequate as it comes from the Library, or you can completely customize the color, size, effects, etc.of the Over state of the button. The graphic can even be from an entirely different source than the other states. Set the colors, effects, text and location to make the Down state unique and interesting.

6. Continue creating the button by clicking the Active Area tab. The active area is merely a "smart slice" that moves with the button graphic on the canvas and defines the size of the a table cell where the rollover action will occur. The active area can normally be set automatically, but if you prefer, deselect this option, and use the Pointer or Subselection tools to reposition the selection handles. Or the Polygon Slice tool (located immdiately above the stroke color box on the tool bar) can be used to create an active area.

7. Finish the button by using the Link Wizard to quickly define Link URLs, Alt tags, Status Bar messages, Frame and Page targets. Once the Link Wizard settings are made, click OK. The initial button will appear in the center of the canvas and in the Library panel. Drag the button from the Library to the canvas whenever needed.

What's next? Learn from Macromedia how to embed buttons in a Navigation Bar in Fireworks.

Return to the Fireworks Training Guide