===============================================================

Fireworks Buttons and Rollovers

Module D33i

* About this document... * Audience and Objectives *


If you are using a browser, you can click on this separator wherever you see it to return to the top of the page 
===============================================================

Overview

In this exercise, you'll be learning to use Fireworks to create buttons that change when the mouse "rolls over" them, and so are called rollovers. Details on how rollovers work are found in module D33c "Buttons, Slices, Layers, and Frames". In addition, you'll be putting a number of buttons together to form a "navigation bar" or navbar - a very common and useful element of the Web.

We'll start by creating a simple button for practice; then we'll create a navbar for the International Festival project you worked on in earlier lessons.

At this time, the instructions are in outline form only. For details on how to do things, consult the Fireworks Help system and Sandee Cohen's Fireworks book.

===============================================================

Practice Button

For practice (not for credit) we'll create a simple rollover button. If you haven't already read about how rollovers work, be sure to look through D33c before you start trying to make one. Here's how:

  1. In Fireworks, create a new canvass at least 200 by 200 pixels.
  2. Use Edit > Insert > New Button to start the "Button Editor" (illustration, right).
  3. Select one of the shape tools to create the graphic portion of the button, and drag it in the Button Editor to create a shape. Tips:
    1. Rectangles and rounded rectangles are the usual shapes for buttons, but you can actually use any shape, icon, or image to create the graphic portion. Be creative!
    2. The cross-hairs in the middle of the editor are there to help you center button components, but you may find it just as helpful to build your button in one of the corners.
Figure 1: Button Editor
Figure 1
Figure 2: Properties Inspector
Figure 2
  1. With the graphic selected, apply Effects using the Properties Inspector panel (See Figure 2). Tips:
    1. A 3-D effect is useful to give a Web page a feeling of depth, and to enhance the rollover behavior.
    2. The basic 3-D effect is Effects > Bevel and Emboss > Inner Bevel (Figure 3a).
    3. You can adjust many details of the bevel effect using the Effects Information panel (Figure 3b).
    4. Another 3-D effect is the Drop Shadow, under Shadow and Glow.

Figure 3a Figure 3a: Menu to select Inner Bevel
Figure 3b Figure 3b: Effects Innformation panel for Inner Bevel

 
 
===============================================================

Navigation Bar

A navigation bar, or navbar, is a group of links placed together in one part of a Web page to make it easy for users to move to hyperlinked locations. The navigation bar we're creating will have matching rollover buttons that allow people to link to information about music and dance in the countries represented on your International Festival page.

In a navbar, each button should have a uniform appearance and similar rollover characteristics. To create it, we'll start with one button, then duplicate it and change the appropriate parts.

The First Button
  1. Open the latest verson of your International Festival page (see modules D31i and D32i).
  2. Edit > Insert > New Button to begin creating a button.
  3. Create the graphic and text parts of the Up button-state. The text should be the name of one of the countries represented in your collage. Put the desired effects on both graphic and text parts of the button. Hint: you might want to make the button graphic almost totally transparent in the Up state, so the buttons don't interfere with the design of your collage.
  4. Create versions of the button for the Over, Down, and Over While Down button states. Alter the effects to get the desired results. Hint: These button-states need not be transparent.
Creating the Navbar
  1. When the button is done, close the Button Editor. With the button selected, copy it.
  2. Paste four times to get a total of five buttons.
  3. Move the buttons to the desired locations. Make sure the red slice-marks are visible, and line up the buttons very carefully, to insure there are no more red slice lines than necessary. (Many small slices make many small files, which increase network traffic unnecessarily.) Hint: With a button selected, you can line it up very precisely using the keyboard arrow keys.
  4. Of course, all the buttons will have the same label! Time to fix that. Click on each button in turn, and use the Properties Inspector to change the text (circled in yellow in Figure 4). The labels will represent the names of countries to which the button will link the viewer. These are the countries and areas represented in the festival; if possible, choose ones whose dancers are represented in your collage:
  • Venezuela
  • Ethiopia
  • Eritrea
  • Somalia
  • Ghana
  • Japan
  • China
  • Spain
  • Mexico
  • Argentina
  • Russia
  • Indonesia
  • Vietnam
  • Caribbean
  • Angola

Figure 4: Fireworks properties inspector for buttons
Figure 4

  1. Also, you'll be adding a URL for each button. To create a link for the button, do a search for a Web page that gives more information about that country's dance or cultural heritage, and link it in.
===============================================================

Save and Export

Warning: this will create many, many files to represent the different buttons and their states, so if you haven't already created a subdirectory for your Festival files, better do that now!

  1. File > Save the file as buttons.png
  2. File > Export the page. Figure 5 (at right) shows the lower half of the Export dialog. Use it with the tips below to help you get the settings right.

Export settings for Fireworks files with buttons.

Figure 5

Tips:

  • The file name doesn't matter, of course - though it should end in .htm or .html
  • You may check "Put images in Subfolder" if you like - that way, the HTML file will be in one folder, and the image files will be in a separate subfolder within the first.
  • The rest of the fields should be exactly as shown in Figure 5.

 

===============================================================

Upload and Email

Put your file, together with all the Fireworks button images, on your Web server space. Be sure you create or upload the festival directory, because of all the files Fireworks creates.

Check each of the buttons and links to make sure they still work on-line.

Email your instructor to give him/her the URL.


Audience: This is for people who have worked with Fireworks vector graphics (see D32i "Fireworks Vector Graphics" or D31h "Exploring Fireworks, Part 1" [deprecated]) and would like to create buttons and rollovers.
Objectives: When you successfully complete this lesson, you will be able to use Macromedia Fireworks to...

  1. Create a button
  2. Explain the four aspects of a rollover
  3. Create links between buttons and Web pages
  4. Explain Navbar Create a Navbar

About this document...
Module D31i: This document is part of a modular instruction series in computer technology. For more information, see the overview or the list of modules in this series, D: Desktop Publishing and Computer Graphics. This document has been used in the following classes:

Author: Laurence J. Krieg
Institution: Internet Professional Department, Washtenaw Community College
History: Original: November 2000; This revision posted Monday, 31-Aug-2009 11:47:56 EDT
Copyright © 2000, Laurence J. Krieg, Washtenaw Community College
Instructors: You are welcome to point to this file in your Web-based materials.
Students: you may make a copy for your personal use.
All other uses: contact the author, Laurence J. Krieg for permission.