Add JavaScript to Fireworks

Image Swapping

The second most commonly used Behavior is "Image Swapping" - millions of Websites have buttons whos appearance changes as the cursor moves over them.

The Behavior that creates this effect is called a "Simple Rollover". For this Behavior to work, the image to which the Simple Rollover is attached must be a "sliced image", and the graphic must be at least two frames long.

The GarageSale.com site uses buttons for its navigation. As a user moves over the nav bar, each button is modified with a drop shadow. To create this effect, you'll need two frames, so add a second frame in the Frames Inspector. Select the second frame, and your canvas will go blank. To keep the background color consistent across the entire movie, place the background objects in their own layer. Rename the new layer "Background" and select the option "Share Across Frames". This is particularly important, as the buttons for the GarageSale.com site have transparent background. If the background is not consistent across all frames, the roll over images will have a white background, which will dispell the illusion of the rollover effect.

Now that the background is consistent on all sites, select the layer that contains the buttons - this will also select each button's text. Select Edit, then Copy, to place the images into memory. Next, select Frame 2. Click on Edit, then Paste, to insert the buttons with text into exactly the same place as the objects in Frame 1. But these are now different objects. Select the first button and add a drop shadow live effect to it, then repeat the procedure for the remaining buttons.

The graphical changes have been made. Now the effect must be added. To create a "Simple Rollover" effect, a slice must be added to each button. Select the buttons in Frame 2 and insert a slice with the right click menu option "Insert Slice". Then, select the first button, and, with the Behaviors Inspector open, insert a "Simple Rollover" as shown in figure 8. Note that if you create the slices on frame 1, they won’t be large enough to cover the drop shadows. you should select the buttons on frame 2 and then choose "Insert Slice".


Figure 8. The Behaviors Inspector replaces Frame 1 images with Frame 2 images when the Simple Rollover is inserted.

Press F12 to preview the file in your Web browser. The effect works by replacing the image in Frame 1 with the corresponding image in Frame 2. A second Behavior replaces the original image onMouseOut.

New For Fireworks 4

Fireworks 4 users will find that an easy way to insert Behaviors onto a Slice or Hotspot is to select the target in the center of the graphic. Figure 9 demonstrates the target that provides direct access to the Behaviors.


Figure 9. Fireworks 4 has made it very easy to access Behaviors without opening the Behaviors Inspector.