Making slices interactive

The basic building blocks for creating interactivity in Fireworks are slice objects. Fireworks
offers
two ways to make slices interactive:
The drag-and-drop rollover method is the easiest way to make a slice interactive. By
merely
dragging a slices behavior handle and dropping it onto a target slice, you can quickly create
simple interactivity.
The Behaviors panel allows you to create more complex interactivity. The Behaviors panel
contains a variety of interactive behaviors you can attach to slices. By attaching multiple
behaviors to a single slice, you can create interesting effects. You can also create your own
custom interactions by editing existing behaviors.
Behaviors in Fireworks MX are compatible with Macromedia Dreamweaver MX behaviors.
When you export a Fireworks rollover to Dreamweaver, you can edit Fireworks behaviors
using
the Dreamweaver Behaviors panel.
Adding simple interactivity to slices
The drag-and-drop rollover method is a fast and efficient way to create rollover and swapimage effects.
Specifically, the drag-and-drop rollover method allows you to determine what happens to a
slice when the pointer passes over it. The end result is commonly referred to as a rollover
image.
Rollover images are graphics that change appearance in a web browser when you move the
pointer over them.
When a slice is selected, a round circle with cross hairs appears in the center of the slice.
This is
called a behavior handle.
By dragging the behavior handle from a triggering slice and dropping it onto a target slice,
you
can easily create rollover and swap-image effects. The trigger and target can be the same
slice.
Hotspots also have behavior handles for incorporating rollover effects. For more information,
see
Creating hotspots on page 285.
Slice name
Behavior handle
Selection handle
274 Chapter 12

About rollovers
Rollovers all work the same way. One graphic triggers the display of another when the
pointer
rolls over it. The trigger is always a web objecta slice, hotspot, or button.
The simplest rollover swaps an image in Frame 1 with an image directly below it in Frame 2.
You
can build more complicated rollovers as well. Swap-image rollovers can swap an image from
any
frame; disjoint rollovers display an image away from the pointer.
In Fireworks, when you select a trigger web object created using a behavior handle or the
Behaviors panel, all of its behavior relationships are displayed. By default, a rollover
interaction is
represented by a blue behavior line.
Creating a simple rollover
A simple rollover swaps an image with another image on a frame under the same web
object. A
simple rollover involves only one slice or hotspot.
You can choose the swap image from any frame.

To attach a simple rollover to a selected image or object:

Ensure that the image or object is not on a shared layer. For more information, see
Sharing
layers on page 228.
2 Choose Edit > Insert > Slice to create a slice on top of the image or object.
3 Create a new frame in the Frames panel by clicking the New/Duplicate Frame button.
4 Create, paste, or import an image to use as the swap image.
Position the image beneath the slice you created in step 2, which is still visible even though
youre in Frame 2. Slices are visible across all frames.
1

Slices, Rollovers, and Hotspots 275

Select Frame 1 in the Frames panel to return to the frame that has the original image.
Select the slice and place the pointer over the behavior handle. The pointer changes into a
hand.
5
6

Note: You can select the slice while in any frame.

Drag the behavior handle to the upper left edge of the slice.
A blue behavior line extends from the center to the upper left corner of the slice, and the
Swap
Image dialog box opens.
8 In the Swap Image From pop-up menu, select the frame in which the image to be swapped
is
located, and click OK.
9 Click the Preview tab to view and test the rollover, or press F12 to preview it in a browser.
Creating a disjoint rollover
A disjoint rollover swaps an image under a web object when the pointer rolls over another
web
object. In response to a pointer rolling over or clicking a trigger image, an image appears in
a
different location on the web page. The image that is rolled over is considered the trigger;
the
image that changes is considered the target.
As with simple rollovers that use just one slice, you first have to set up the trigger and target
slices
and the frame in which the swap image resides. Then you can link the trigger to the target
slice
with a behavior line.
7

Note: The trigger for a disjoint rollover doesnt have to be a slice. Hotspots and buttons also have behavior handles
that can be used to create disjoint rollovers. For more information on hotspots, see Creating hotspots on page
285. For more information about buttons, see Creating button symbols on page 289.

276 Chapter 12
To attach a disjoint rollover to a selected image:

Choose Edit > Insert > Slice to attach a slice to the trigger image.

Note: This step is not necessary if the selected object is a button or if a slice or hotspot already covers the image.

Create a new frame by clicking the New/Duplicate Frame button in the Frames panel.
Place a second image, to be used as the target, in the new frame in the desired location on
the
canvas. You can place the image anywhere other than beneath the slice you created in step
1.
4 Select the image, and then choose Edit > Insert > Slice to attach a slice to the image.
5 Select Frame 1 in the Frames panel to return to the frame that has the original image.
6 Select the slice, hotspot, or button that covers the trigger area (the original image) and
place
the pointer over the behavior handle. The pointer changes into a hand.
7 Drag the behavior handle for the trigger slice to the target slice you created in step 4.
The behavior line extends from the center of the trigger to the upper left corner of the target
slice, and the Swap Image dialog box opens.
8 From the Swap Image From pop-up menu, select the frame you created in step 2, and click
OK.
9 Click the Preview tab to view and test the disjoint rollover.
2
3

Applying multiple rollovers to a slice

You can drag more than one behavior handle from a single slice to create multiple rollover
interactions. For example, you can trigger a rollover and a disjoint rollover from the same
slice.
A slice triggering a rollover behavior and a disjoint rollover behavior