Topics in Desktop Graphics - (CPTR240) - Lectures  

Arranged and adapted by: David Siguelnitzky -

Creating rollovers in Fireworks 3  

Typical rollover objects on a Web page change state when the user points to them or clicks them. This lecture shows you how to create the various states of a rollover in Fireworks by making a symbol, copying the symbol, and modifying the copies to make three rollover objects.

Download the source file billiard.zip (40K)

On this lecture:

• What is a rollover?
• Defining the Up state
• Defining the Over state
• Defining the Down state
• Defining the Over While Down state

What is a rollover?

Even though the term button is sometimes used to describe a rollover object, rollover objects do not have to look like traditional buttons. A rollover is any object that changes in appearance when the user points to it or clicks it. Each appearance, or state, of a rollover is a different image. Four states can be used when creating a rollover - Up, Over, Down, and Over Down. Each state is drawn on a different frame in Fireworks using frames one through four. The tabbed Fireworks Button Editor handles the frame management issues so that you can focus on designing the rollover states.

The following table describes the rollover states and their roles:

Defining the Up state

To use the example file as you step through this article, open the file Billiard.png in Fireworks.

To create the Up state of the rollover:

1. Use the Pointer tool to select the 7-ball and choose Edit > Copy.

2. Choose Insert > New Button to open the Button Editor.

3. Choose Edit > Paste to paste the 7-ball into the Up panel of the Button Editor. You have now defined the button's Up state. The Up state is the default appearance of the button.

Defining the Over state

The next step is creating a graphic for the Over state by modifying the Up state graphic.

To create the Over state of the rollover:

1. Click the Over tab of the Button editor and click the Copy Up Graphic button. This duplicates the Up panel's graphic in the Over panel.

2. Select the 7-ball and, using the arrow keys, move the ball five arrow key presses up and five arrow key presses to the left.

3. Add an Effect:  with the ball in the Over panel selected, choose Shadow and Glow > Drop Shadow from the Effect panel and choose settings for the effect.

The settings used in the example are 7 distance, 40% opacity, 4 softness, and 315 degree angle.

The graphic in the Over panel is now offset slightly from the graphic in the Up panel and it has a drop shadow. This graphic represents the Over state of the rollover.

Defining the Down state

In the example, the Down state doesn't have a drop shadow and isn't offset. To create this Down state graphic, copy the graphic from the Up state, rather than the Over state, and paste it into the Down panel.

To create the Down state of the rollover:

1. Click the Up tab to open the Up panel.

2. Select the #7 billiard ball graphic and copy it to the Clipboard.

3. Click the Button Editor's Down tab to open the Down panel and paste the graphic into the Down panel.

4. Using the Subselection tool, hold down the Shift key, select the number 7 and the white circle on the 7-ball, and delete the selected objects.

5. Still in the Down panel, use the Subselection tool and select the billiard ball.

6. Click the Info button on the Inner Bevel effect to open the Inner Bevel settings.

7. Choose Inset from the Effect panel's Button Preset pop-up.

8. Select Inset settings, as shown below.

You have now defined the Down state for the #7 billiard ball.

Defining the Over Down state

The Over Down state in the rollover example is a slightly modified version of the Down state.

To create the Over Down state of the rollover:

1. Click the Over While Down tab to open the Over While Down panel.

2. Click the Copy Down Graphic button to duplicate the Down panel's graphic in the Over While Down panel.

3. Using the Subselection tool, select the graphic in the Over While Down panel.

4. Click the Info button on the Inner Bevel effect to open the Inner Bevel settings.

5. Choose Inverted from the Effect panel's Button Preset pop-up.

This creates the Over Down rollover state. The billiard ball graphic now has four rollover states: Up, Over, Down, and Over Down. Close the Button Editor and save the file with the name Rollovers.png. 

Source: David Jacowitz and Gary White - Macromedia FIREWORKS MX (2004) - http://www.macromedia.com/support/fireworks/tutorial_index.html