Creating nonrectangular slices

Rectangular slices may not be sufficient when youre trying to attach interactivity to a
nonrectangular image. If you plan to attach a rollover effect to a slice, for example, and your
slice
objects overlap or have irregular shapes, then a rectangular slice may swap unwanted
background
graphics along with the swap image. Fireworks solves this problem by allowing you to draw
slices
in any polygonal shape using the Polygon Slice tool.
You can also convert vector paths to slices to create irregular slice shapes.
To draw a polygon slice object:

Choose the Polygon Slice tool.

Click to place the vector points of the polygon. The Polygon Slice tool draws only straight
line segments.
3 When drawing a polygon slice object around objects with soft edges, be sure to include the
entire object to avoid creating unwanted hard edges in the slice graphic.
4 To stop using the Polygon Slice tool, choose an alternative tool from the Tools panel. You do
not have to click the first point again to close the polygon.
1
2

Note: Be careful not to overuse polygon slices, as they require more JavaScript code than similar rectangular
slices. A high number of polygon slices could adversely affect web browser processing time.

To create a polygon slice from a vector object or path:

Select a vector path.

Choose Edit > Insert > Hotspot.
Choose Edit > Insert > Slice.
A slice is generated that conforms to the shape of the vector object.
Viewing and displaying slices and slice guides
You can control the visibility of slices and other web objects in your document using the
Layers
panel and the Tools panel. When you turn slice visibility off for the whole document, slice
guides
are hidden too.
Using the Property inspector, you can organize slices by assigning a unique color to each
slice
object. Slice guide color can also be changed through the View menu.
1
2
3

Slices, Rollovers, and Hotspots 269

Viewing slices in the Layers panel

The Web Layer displays all the web objects in the document so that you can select and view
each one.
To view and select a slice in the Layers panel:

Choose Window > Layers to open the Layers panel.

Expand the Web Layer by clicking the Plus (+) button (Windows) or triangle (Macintosh).
The full list of web objects currently in your document is displayed in the Web Layer.
3 Click a slice name to select it.
The slice is highlighted in the Web Layer and is selected on the canvas.
Showing and hiding slices
Hiding a slice renders the slice invisible in the Fireworks PNG file. You can turn off all or some
web objects. Because slices are web objects, they are listed beneath the Web Layer in the
Layers
panel, where visibility can be toggled on or off for a selected slice. You can also control slice
visibility through the Tools panel. Hiding a slice object does not prevent the slice from being
exported in the HTML.
1
2

To hide and show particular slices and hotspots:

Click the eye icon next to the individual web objects in the Layers panel.
Click in the Eye column to turn visibility back on. The eye icon reappears when web objects
are visible again.
1
2

To hide or show all hotspots, slices, and guides, do one of the following:

Click the appropriate Hide/Show Slices button in the Tools panel.

270 Chapter 12

Click the eye icon next to the Web Layer in the Layers panel.
To hide or show slice guides in any document view:

Choose View > Slice Guides.

Changing slice and slice guide color
If the colors used in a document are similar to the slice color, viewing slices against objects
in the
document can prove difficult. To make viewing slices easier, you can assign a new slice color
to
selected slices. Assigning unique colors to individual slices also helps you organize them.
Slice
guide color can be altered as well.
Note: When you preview your document, deselected slices are visible as a white overlay.

To change the color of a selected slice object:

In the Property inspector, choose a new color from the color box.
To change the color of slice guides:

1
2

Choose View > Guides > Edit Guides.

Choose a new color from the Slice Color section of the Guides dialog box, and click OK.

Slices, Rollovers, and Hotspots 271

Editing slices
In Fireworks you can work with a slice layout as if it were a table in a word-processing
application.
When you drag a slice guide to resize a slice, all adjacent rectangular slices automatically
resize as
well. In addition, you can use the Tools panel to resize and transform slices as you would
vector
and bitmap objects.
Moving slice guides to edit slices
Slice guides define the perimeter and position of slices. Slice guides extending beyond slice
objects
define how the rest of the document will be sliced upon export. You can change the shape of
a
rectangular slice object by dragging the slice guides that surround it. Nonrectangular slice
objects
cannot be resized by moving slice guides.
Resizing a slice object by dragging its slice guides
Note: Dragging slice guides that surround a Fireworks button in the document window will resize the slice that
defines the active area (or slice) for that button. The active area for a Fireworks button cannot be deleted, however,
by dragging the slice guides that surround it.

If multiple slice objects are aligned along a single slice guide, you can drag that slice guide
to resize
all the slice objects simultaneously.
Resizing multiple slice objects by dragging a single guide
In addition, dragging one guide along a given coordinate will cause all other guides on that
same
coordinate to move with it.