Fireworks Rollovers
Sophisticated rollovers
In addition to creating buttons, Fireworks makes it easy for you to create sophisticated JavaScript rollover effects. For example, when the pointer passes over a button, in addition to changing the appearance of the button, you can change the appearance of another area of the page. In Fireworks, this type of rollover effect is called a disjoint rollover.
1 If the Layers panel isn't visible, choose Window > Layers. Click Layer 1 to make it the active layer. The changes you are about to make must be to Layer 1.
2 Display the Frames panel (choose Window > Frames if it isn't visible).

3 Click the New / Duplicate Frame button at the bottom of the Frames panel.

4 Click Frame 2 in the Frames panel. Everything except the buttons disappeared because the artwork is in Frame 1. The buttons, however, are on a layer that is shared among all frames. Next, you'll place artwork in Frame 2 that serves as the source of the rollover. You need to turn on onion skinning to help you align the artwork in Frame 2 with the artwork in Frame 1. Onion skinning lets you display dimmed versions of more than one frame at a time.

5 Click in the column to the left of Frame 1 in the Frames panel. Fireworks displays the contents of Frame 1 as if it were on translucent onion skin. To save you time, we've created the artwork you'll use for the rollover.

6 If the Library panel isn't visible, choose Window > Library. The Library panel stores buttons and other artwork that you want to reuse throughout a design. For more information on using the Library panel, see Symbols and instances.

7 Click Swap Text from the list of items. A preview of the artwork appears in the top of the Library panel.

8 Drag the Swap Text artwork from the preview area in the Library panel and align it over the welcome message text.

9 Make frame 1 active by clicking its name in the Frames panel.

10 Use the Pointer tool to select the tan rectangle behind the welcome message text and choose Insert > Slice. Fireworks inserts a light green, transparent rectangle on top of the image to represent the slice.

11 In the Object inspector (choose Windows > Object if it isn't visible), deselect the Auto-Name slices option and enter text_slice in the text box at the bottom of the panel. Naming slices distinctly helps you to identify the slice images when maintaining and updating a Web site. You'll attach a behavior—prewritten JavaScript code—to the Gifts button that targets this slice as the area to change when the pointer rolls over the button.

12 Select the Gifts button.

13 In the Behaviors inspector (choose Window > Behaviors if it isn't visible), click the button with a plus sign (+) and choose Swap Image from the pop-up menu. The Swap Image dialog box appears.
14 Make sure that text_slice is selected in the list of slices on the left side of the dialog box, and click OK.

15 Click the Hide Hotspots and Slices button in the Toolbox. Click the Preview tab in the workspace and move the pointer over the buttons. Point at the Gifts button and notice that the message to the right changes. The Preview tab displays the image, buttons, and JavaScript behaviors as they'll appear in a Web browser.

16 Click the Original tab and save the image.


Windows Tutorials
Windows 98 Basics
Multimedia Tutorials
Planning A Website
Creating an HTML page
Dreamweaver 3
Fireworks 3
  Adobe Photoshop 6