Using Fireworks - endoftether.net

Using Fireworks
Trademarks
Afterburner, AppletAce, Attain, Attain Enterprise Learning System, Attain Essentials, Attain Objects for Dreamweaver,
Authorware, Authorware Attain, Authorware Interactive Studio, Authorware Star, Authorware Synergy, Backstage, Backstage
Designer, Backstage Desktop Studio, Backstage Enterprise Studio, Backstage Internet Studio, Contribute, Design in Motion,
Director, Director Multimedia Studio, Doc Around the Clock, Dreamweaver, Dreamweaver Attain, Drumbeat, Drumbeat 2000,
Extreme 3D, Fireworks, Flash, Fontographer, FreeHand, FreeHand Graphics Studio, Generator, Generator Developer's Studio,
Generator Dynamic Graphics Server, Knowledge Objects, Knowledge Stream, Knowledge Track, LikeMinds, Lingo, Live Effects,
MacRecorder Logo and Design, Macromedia, Macromedia Contribute, Macromedia Coursebuilder for Dreamweaver,
Macromedia M Logo & Design, Macromedia Flash, Macromedia Xres, Macromind, Macromind Action, MAGIC, Mediamaker,
Multimedia is the Message, Object Authoring, Power Applets, Priority Access, Roundtrip HTML, Scriptlets, SoundEdit,
ShockRave, Shockmachine, Shockwave, shockwave.com, Shockwave Remote, Shockwave Internet Studio, Showcase, Tools to
Power Your Ideas, Universal Media, Virtuoso, Web Design 101, Whirlwind and Xtra are trademarks of Macromedia, Inc. and
may be registered in the United States or in other jurisdictions including internationally. Other product names, logos, designs,
titles, words or phrases mentioned within this publication may be trademarks, servicemarks, or tradenames of Macromedia, Inc.
or other entities and may be registered in certain jurisdictions including internationally.
This guide contains links to third-party Web sites that are not under the control of Macromedia, and Macromedia is not
responsible for the content on any linked site. If you access a third-party Web site mentioned in this guide, then you do so at your
own risk. Macromedia provides these links only as a convenience, and the inclusion of the link does not imply that Macromedia
endorses or accepts any responsibility for the content on those third-party sites.
Apple Disclaimer
APPLE COMPUTER, INC. MAKES NO WARRANTIES, EITHER EXPRESS OR IMPLIED, REGARDING THE
ENCLOSED COMPUTER SOFTWARE PACKAGE, ITS MERCHANTABILITY OR ITS FITNESS FOR ANY
PARTICULAR PURPOSE. THE EXCLUSION OF IMPLIED WARRANTIES IS NOT PERMITTED BY SOME STATES.
THE ABOVE EXCLUSION MAY NOT APPLY TO YOU. THIS WARRANTY PROVIDES YOU WITH SPECIFIC
LEGAL RIGHTS. THERE MAY BE OTHER RIGHTS THAT YOU MAY HAVE WHICH VARY FROM STATE TO
STATE.
Copyright © 2003 Macromedia, Inc. All rights reserved. This manual may not be copied, photocopied, reproduced,
translated, or converted to any electronic or machine-readable form in whole or in part without prior written approval of
Macromedia, Inc. Part Number ZFW70M200
Acknowledgments
Project Management: Gary White
Writing: Dale Crawford, Tonya Estes, Naheeda Ravjani
Editing Management: Rosana Francescato
Editors: Linda Adler, Mary Kraemer, Noreen Maher
Production Management: Patrice O’Neill
Multimedia Development: Aaron Begley
Photography: Chris Basmajian
Production: Adam Barnett, John Francis, Jeff Harmon
Special thanks to Jeff Ahlquist, Doug Benson, Rob McCullough, Joe Merritt, Melana Orton
First Edition: September 2003
Macromedia, Inc.
600 Townsend St.
San Francisco, CA 94103
CONTENTS
CHAPTER 1: Selecting and Transforming Objects
......................... 7
Selecting objects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
Selecting pixels . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
Editing selected objects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
Transforming and distorting selected objects and selections . . . . . . . . . . . . . . . . . 21
Organizing objects. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
CHAPTER 2: Working with Bitmaps .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
Working with bitmaps. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
Creating bitmap objects. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
Drawing, painting, and editing bitmap objects . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
Retouching bitmaps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34
Adjusting bitmap color and tone . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39
Blurring and sharpening bitmaps. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49
Adding noise to an image . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53
CHAPTER 3: Working with Vector Objects
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55
Drawing vector objects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55
Editing paths. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71
CHAPTER 4: Using Text
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79
Entering text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Editing text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Applying strokes, fills, and effects to text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Attaching text to a path . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Transforming text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Converting text to paths . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Importing text. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Checking spelling . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Using the Text Editor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
79
81
89
90
92
92
93
94
95
3
CHAPTER 5: Applying Color, Strokes, and Fills .
. . . . . . . . . . . . . . . . . . . . . . . . . 97
Using the Colors section of the Tools panel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98
Organizing swatch groups and color models . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98
Using color boxes and color pop-up windows . . . . . . . . . . . . . . . . . . . . . . . . . . . 105
Working with strokes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106
Working with fills . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110
Applying gradient and pattern fills . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 111
Adding texture to strokes and fills . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116
CHAPTER 6: Using Live Effects
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119
Applying Live Effects. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 120
Editing Live Effects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 124
CHAPTER 7: Layers, Masking, and Blending .
. . . . . . . . . . . . . . . . . . . . . . . . . . 129
Working with layers. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 129
Masking images. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 134
Blending and transparency . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 152
CHAPTER 8: Using Styles, Symbols, and URLs . . . . . .
. . . . . . . . . . . . . . . . . . . 155
Using styles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 155
Using symbols . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 158
Working with URLs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 164
CHAPTER 9: Slices, Rollovers, and Hotspots .
. . . . . . . . . . . . . . . . . . . . . . . . . . 167
Creating and editing slices . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 167
Making slices interactive . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 173
Preparing slices for export . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 180
Working with hotspots and image maps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 185
CHAPTER 10: Creating Buttons and Pop-up Menus
. . . . . . . . . . . . . . . . . . . . . 191
Creating button symbols . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 191
Creating navigation bars . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 200
Creating pop-up menus . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 200
CHAPTER 11: Creating Animation . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 211
Building animation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 211
Working with animation symbols . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 212
Working with frames . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 216
Tweening. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 220
Previewing an animation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 221
Exporting your animation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 221
Working with existing animations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 223
Using multiple files as one animation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 224
4
Contents
CHAPTER 12: Optimizing and Exporting
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 225
About optimizing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Using the Export Wizard. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Optimizing in the workspace. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Exporting from Fireworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Sending a Fireworks document as an e-mail attachment . . . . . . . . . . . . . . . . . . .
Using the File Management button . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
CHAPTER 13: Automating Repetitive Tasks .
226
226
231
247
262
262
. . . . . . . . . . . . . . . . . . . . . . . . . . . 263
Finding and replacing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 264
Batch processing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 267
Extending Fireworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 275
CHAPTER 14: Preferences and Keyboard Shortcuts .
. . . . . . . . . . . . . . . . . . . . 281
Setting preferences. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Changing keyboard shortcut sets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Working with configuration files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
About reinstalling Fireworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Viewing package contents (Macintosh only) . . . . . . . . . . . . . . . . . . . . . . . . . . . .
INDEX
281
284
286
287
287
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 289
Contents
5
6
Contents
CHAPTER 1
Selecting and Transforming Objects
As you work in Macromedia Fireworks MX 2004, you manipulate vector and bitmap objects, text
blocks, slices and hotspots, and areas of pixels. Using the selection and transformation tools, you
can move, copy, delete, rotate, scale, or skew objects. In documents that have multiple objects,
you can organize the objects by stacking, grouping, and aligning them.
Selecting objects
Before you can do anything with any object on the canvas, you must select it. This applies to a
vector object, path, or points; a text block, word, or letter; a slice or hotspot; an instance; or a
bitmap object.
You can use any of the following to select objects:
The Layers panel displays each object. You can click an object in the Layers panel to it select
when the panel is open and layers are expanded. For more information, see Chapter 7, “Layers,
Masking, and Blending,” on page 129.
The Pointer tool selects objects when you click the objects or drag a selection area around
them.
The Subselection tool selects an individual object in a group or the points of a vector object.
The Select Behind tool selects an object that is behind another object.
The Export Area tool selects an area to be exported as a separate file.
For information about selecting specific areas of pixels in a bitmap image, see “Selecting pixels”
on page 10.
7
Using the Pointer tool
The Pointer tool selects objects when you click them or when you drag a selection area around all
or part of the objects.
To select an object by clicking, do one of the following:
• Move the Pointer tool over the object’s path or bounding box and click.
• Click the object’s stroke or fill.
• Select the object in the Layers panel.
Tip: To preview what you would select if you were to click on an object beneath the pointer on the
canvas, choose the Mouse Highlight option in the Editing tab of the Preferences dialog box. For
more about preferences, see “Setting preferences” on page 281.
To select objects by dragging:
• Drag the Pointer tool to include one or more objects in the selection area.
Using the Subselection tool
You use the Subselection tool to select, move, or modify points on a vector path or an object that
is part of a group.
To move or modify objects with the Subselection tool:
1 Choose the Subselection tool.
2 Make a selection.
Selection handles appear.
3 Do one of the following:
■ To modify an object, drag one of its points or selection handles.
■ To move the entire object, drag anywhere in the object except a point or selection handle.
8
Chapter 1: Selecting and Transforming Objects
Using the Select Behind tool
When working with graphics that contain multiple objects, you can use the Select Behind tool to
select an object that is hidden or obscured by other objects.
To select an object that is behind other objects:
• Click the Select Behind tool repeatedly over the stacked objects, progressing through the
objects top to bottom in stacking order until you select the object you want.
Note: You also can select a hard-to-reach object by clicking it in the Layers panel when the layers
are expanded.
Selection information in the Property inspector
Whenever you select an object, the Property inspector identifies the selection. The upper left area
of the Property inspector contains the following information about the selection:
• A description of the item being inspected
• A text box to enter a name for that item
Note: The name appears in the title bar of the document whenever you select this item. For slices
and buttons, the name is the filename when exported.
• The number of objects when more than one object is selected
Note: If the status bar is turned on (Windows only), selected objects are also identified in the status
bar at the bottom of the document window.
The Property inspector also displays information and settings for the object type selected. For
example, when you select a vector path, the Property inspector displays vector path properties,
such as stroke width and color.
Modifying a selection
After you select a single object, you can add objects to the selection and deselect objects that are
selected. Using a single command, you can select or deselect everything on every layer in a
document. You can also hide the selection path so that you can edit a selected object while
viewing it as it will appear on the web or in print.
To add to a selection:
• Hold down Shift while clicking additional objects with the Pointer, Subselection, or Select
Behind tool.
To deselect an object while leaving other objects selected:
• Hold down Shift while clicking the selected object.
Selecting objects
9
To select everything on every layer in the document:
• Choose Select > Select All.
Note: Select All does not select hidden objects.
To deselect all selected objects:
• Choose Select > Deselect.
Note: You must deselect the Single Layer Editing preference to select all visible objects on all
layers in a document. When you choose the Single Layer Editing preference, only objects on the
current layer are selected. For more information, see “Organizing layers” on page 131.
To hide the path selection feedback of a selected object:
• Choose View > Hide Edges.
Note: You can use the Layers panel or the Property inspector to identify the selected object when
the outline and points are hidden.
To hide selected objects:
• Choose View > Hide Selection.
Note: Hidden objects are not exported. (This does not apply to slice and hotspot web objects on
the Web Layer.)
To show all objects:
• Choose View > Show All.
Note: To hide objects whether they are selected or not, you can click or drag along the Eye column
in the Layers panel.
Selecting pixels
You can edit pixels over an entire canvas or choose one of the selection tools to constrain your
editing to a particular area of an image:
The Marquee tool selects a rectangular area of pixels in an image.
The Oval Marquee tool selects an elliptical area of pixels in an image.
The Lasso tool selects a freeform area of pixels in an image.
The Polygon Lasso tool selects a straight-edged freeform area of pixels in an image.
The Magic Wand tool selects an area of similarly colored pixels in an image.
The pixel selection tools draw selection marquees that define the area of selected pixels. After you
draw the selection marquee, you can manipulate it by moving it, adding to it, or basing another
selection on it. You can edit the pixels inside the selection, apply filters to the pixels, or erase pixels
without affecting the pixels beyond the selection. You can also create a floating selection of pixels
that you can edit, move, cut, or copy.
10
Chapter 1: Selecting and Transforming Objects
Bitmap selection tool options
When you choose the Marquee, Oval Marquee, Lasso, Polygon Lasso, or Magic Wand tool, the
Property inspector displays three Edge options for the tool:
Hard
creates a marquee selection with a defined edge.
Anti-alias
Feather
prevents jagged edges in the marquee selection.
lets you soften the edge of the pixel selection.
You must set the Feather option before creating a feathered selection using a selection tool. You
can feather existing selections using the Feather command in the Select menu. For more
information, see “Feathering a pixel selection” on page 16.
When you choose the Marquee or Oval Marquee, the Property inspector also displays three
style options:
Normal
lets you create a marquee in which the height and width are independent of each other.
Fixed Ratio
Fixed Size
constrains the height and width to defined ratios.
sets the height and width to a defined dimension.
Note: The Magic Wand tool also has a Tolerance setting. For more information, see “Selecting areas
of similar color” on page 12.
Creating pixel selection marquees
The Marquee, Oval Marquee, and Lasso tools in the Bitmap section of the Tools panel allow you
to select specific pixel areas of a bitmap image by drawing a marquee around them.
To select a rectangular or elliptical area of pixels:
1 Choose the Marquee or Oval Marquee tool.
2 Set the Style and Edge options in the Property inspector. For more information, see “Bitmap
selection tool options” on page 11.
3 Drag to draw a selection marquee, which defines the pixel selection.
Hold down Shift as you drag the Marquee or Oval Marquee tool to draw square or circular
marquees. To draw a marquee from a center point, deselect any other active marquees, and
then hold down Alt (Windows) or Option (Macintosh) while you draw.
To select a freeform area of pixels:
1 Choose the Lasso tool.
2 Choose an Edge option in the Property inspector. For more information, see “Bitmap selection
tool options” on page 11.
3 Drag the pointer around the pixels you want to select.
Selecting pixels
11
Plotting points to create a marquee selection
The Polygon Lasso tool allows you to select specific pixels in a bitmap image by clicking
repeatedly around the perimeter of the pixel area you want to select.
To select a polygonal area of pixels:
1 Choose the Polygon Lasso tool.
2 Choose an Edge option in the Property inspector. For more information, see “Bitmap selection
tool options” on page 11.
3 Click to plot points around the perimeter of the object or area to outline the selection.
Hold down Shift to constrain Polygon Lasso marquee segments to 45° increments.
4 Do one of the following to close the polygon:
■ Click the starting point.
■ Double-click in the workspace.
Selecting areas of similar color
The Magic Wand tool allows you to select areas of pixels that are similar in color. By adjusting the
Magic Wand’s Tolerance and Edge options in the Property inspector, you can control how the
Magic Wand selects pixels.
To select an area of pixels of similar color range:
1 Choose the Magic Wand tool.
2 Choose an Edge option in the Property inspector. For more information, see “Bitmap selection
tool options” on page 11.
3 Set the tolerance level by dragging the tolerance slider in the Property inspector.
Tolerance represents the tonal range of colors that are selected when you click a pixel with the
Magic Wand. If you enter 0 and click a pixel, only adjacent pixels of exactly the same tone are
selected. If you enter 65, a wider range of tones is selected.
4 Click the area of color you want to select.
12
Chapter 1: Selecting and Transforming Objects
A marquee appears around the selected range of pixels.
Pixels selected with a lower tolerance (above), then a higher tolerance (below)
To select similar colors throughout the document:
1 Select an area of color with a marquee or lasso tool, or with the Magic Wand tool.
2 Choose Select > Select Similar.
One or more marquees show all areas containing the selected range of pixels, according to the
current Tolerance setting in the Property inspector for the Magic Wand tool.
Note: To adjust the tolerance for the Select Similar command, choose the Magic Wand tool and
then change the Tolerance setting in the Property inspector before using the command.
Removing a selection marquee
You can remove a selection marquee without affecting the document.
To remove a marquee, do one of the following:
•
•
•
•
Draw another marquee.
Click outside the current selection with a marquee or lasso tool.
Press Escape.
Choose Select > Deselect.
Selecting pixels
13
Adjusting selection marquees
After selecting pixels with a marquee or lasso tool, you can edit or move the marquee border
without affecting the pixels beneath it. You can manually add pixels to or delete pixels from a
marquee border using modifier keys.
In addition, you can expand or contract the marquee border by a specified amount, select an
additional area of pixels around the existing marquee, or smooth the border of the marquee.
Moving a marquee
You can move a marquee to place it over a different area of pixels.
To move the marquee, do one of the following:
• Drag the marquee with a marquee or lasso tool or the Magic Wand tool.
• Use the arrow keys to nudge the marquee in 1-pixel increments.
• Press Shift and use the arrow keys to move the marquee in 10-pixel increments.
Adjusting a marquee selection with the Spacebar
You can easily reposition a marquee as you draw it by pressing the Spacebar while drawing.
To reposition a selection with the Spacebar:
1 Begin dragging to draw the selection.
2 Without releasing the mouse button, hold down the Spacebar.
3 Drag the marquee to another location on the canvas.
4 While still holding down the mouse button, release the Spacebar.
5 Continue dragging to draw the selection.
Adding to a pixel selection
After drawing a selection marquee with any bitmap selection tool, you can add to the selection
with the same tool or another bitmap selection tool.
To add to an existing pixel selection:
1 Choose any bitmap selection tool.
2 Hold down Shift and draw additional selection marquees.
3 Repeat steps 1 and 2 with any bitmap selection tool to continue adding to the selection.
Overlapping marquees join to form a contiguous marquee.
Subtracting pixels from a selection
You can subtract pixels from a selection, or punch out parts of a selection, defining pixel areas
inside the original marquee that will no longer be part of the selection.
To subtract pixels from a selection:
• Hold down Alt (Windows) or Option (Macintosh) and use a bitmap selection tool to select the
pixel area to be punched out.
14
Chapter 1: Selecting and Transforming Objects
Creating a marquee from intersecting marquees
You can select pixels in an existing marquee by drawing a marquee that overlaps the original.
To select a pixel area defined by the intersection of two marquees:
1 Hold down Alt+Shift (Windows) or Option+Shift (Macintosh) while creating a new marquee
selection that overlaps the original marquee.
2 Release the mouse button.
Only the pixels in the intersection area of the two marquees are selected.
Using thumbnails and modifier keys to modify pixel selections
With a bitmap selected, you can create a pixel selection on that bitmap using the opacity of any
object or mask in the Layers panel. For more information about the Layers panel, see “Working
with layers” on page 129.
To create or replace a pixel selection on a selected bitmap using the opacity of an object:
1 In the Layers panel, position the pointer over the thumbnail of the object you want to use to
create the pixel selection.
2 Hold down Control (Windows) or Command (Macintosh).
The pointer changes to indicate you are about to select the alpha channel, or the opaque area,
of the object.
3 Click the thumbnail.
A new pixel selection is created on the selected bitmap.
To add to the current pixel selection:
• Control-Shift-click (Windows) or Command-Shift-click (Macintosh) the thumbnail of an
object in the Layers panel to add the shape of its opaque area to the current pixel selection.
Tip: When you position the pointer over the thumbnail and hold down the specified modifier keys,
the pointer indicates that you are about to add to the pixel selection.
To subtract from the current pixel selection:
• Control-Alt-click (Windows) or Command-Option-click (Macintosh) the thumbnail of
an object in the Layers panel to subtract the shape of its opaque area from the current
pixel selection.
Tip: When you position the pointer over the thumbnail and hold down the specified modifier keys,
the pointer indicates that you are about to subtract from the pixel selection.
To create a pixel selection on a selected bitmap from the intersection of overlapping objects:
1 Control-click (Windows) or Command-click (Macintosh) an object’s thumbnail to select its
alpha channel, or opaque area.
2 Control-Shift-Alt-click (Windows) or Command-Shift-Option-click (Macintosh)
another object.
A pixel selection is created on the selected bitmap from the intersection of the opaque areas of
the two overlapping objects.
Tip: When you position the pointer over the thumbnail and hold down the specified modifier keys,
the pointer indicates that you are about to create a pixel selection from the intersection of the
opaque areas of two overlapping objects.
Selecting pixels
15
Creating an inverse pixel selection
Starting with a current pixel selection, you can create another pixel selection that selects all the
pixels that are not currently selected. You can use this method to select and then erase all pixels
surrounding the original selection, for example.
To create an inverse pixel selection:
1 Make a pixel selection using any bitmap selection tool.
2 Choose Select > Inverse Selection.
All pixels that were not in the original selection are now selected.
Feathering a pixel selection
Feathering creates a see-through effect for the selected pixels. When using the Feather command,
you can try out various feather amounts and view the results before deselecting the pixels. You can
also feather a selection by setting a feather amount in the Property inspector before using a
bitmap selection tool. For more information, see “Bitmap selection tool options” on page 11.
To feather a pixel selection:
1 Choose Select > Feather.
2 Enter a Feather amount in the Feather dialog box.
The selection marquee changes size to reflect the feather amount.
3 If necessary, change the number in the Feather dialog box to adjust the feather amount.
4 Click OK.
Tip: To view the appearance of the feathered selection without the surrounding pixels, choose
Select > Select Inverse, and then press Delete. You can then use the History panel or Edit > Undo
to try again.
Expanding or contracting a marquee
After you draw a marquee to select pixels, you can expand or contract its border.
To expand the border of a marquee:
1 After drawing the marquee, choose Select > Expand Marquee.
2 Enter the number of pixels by which you want to expand the border of the marquee, and
click OK.
To contract the border of a marquee:
1 After drawing the marquee, choose Select > Contract Marquee.
2 Enter the number of pixels by which you want to contract the border of the marquee, and
click OK.
16
Chapter 1: Selecting and Transforming Objects
Selecting an area around an existing marquee
You can create an additional marquee to frame an existing marquee at a specified width. This lets
you create special graphics effects, such as feathering the edges of a pixel selection.
To select an area around an existing marquee:
1 After drawing a marquee, choose Select > Border Marquee.
2 Enter the width of the marquee that you want to place around the existing marquee, and
click OK.
Smoothing the border of a marquee
You can eliminate excess pixels along the edges of a pixel selection. This is useful if excess pixels
appear along the border of a pixel selection or marquee after you use the Magic Wand tool.
A pixel selection before and after smoothing
To smooth the border of a marquee:
1 Choose Select > Smooth Marquee.
2 Enter a sample radius to specify the desired degree of smoothing, and click OK.
Transferring a marquee selection
You can transfer a marquee selection from one bitmap to another bitmap object on the same layer
or one on a different layer. You can also transfer the marquee selection to a mask.
To transfer a marquee selection to another bitmap object:
1 Make a selection by drawing the marquee.
2 In the Layers panel, select a different bitmap object on the same layer or an object on a
different layer.
The marquee is transferred to that object.
Note: Fireworks treats masks and masked objects as separate objects. For more information on
masks, see “Masking images” on page 134.
Selecting pixels
17
Saving and restoring marquee selections
You can save the size, shape, and location of a selection to reapply later.
To save a marquee selection:
• Choose Select > Save Bitmap Selection.
To restore a marquee selection:
• Choose Select > Restore Bitmap Selection.
Note: You can save only one selection at a time.
Creating and moving a floating pixel selection
When you drag a marquee to a new location, the marquee itself moves. If you want to move, edit,
cut, or copy a selection of pixels, you must first make the pixels a floating selection.
To create a floating pixel selection:
1 Make a pixel selection with a bitmap selection tool.
2 Do one of the following:
■
■
Hold down Control (Windows) or Command (Macintosh) and drag the selection using any
tool from the Bitmap section of the Tools panel.
Choose the Pointer tool and drag the selection.
To move a floating selection, do one of the following:
• Drag the floating selection with the Pointer tool or any bitmap selection tool.
• If a nonselection bitmap tool is active, hold down Control (Windows) or Command
•
(Macintosh) and drag the floating selection.
Use the arrow keys or Shift+arrow keys.
When you deselect the floating pixel selection or choose any vector or web tool, the floating
selection becomes part of the current bitmap object.
Inserting a new bitmap by cutting or copying
You can insert a new bitmap based on a pixel selection into the current layer of a document by
cutting or copying the selected pixels.
To insert a new bitmap by cutting and pasting a pixel selection:
1 Select an area of pixels using a pixel selection tool.
2 Choose Edit > Insert > Bitmap via Cut.
A new bitmap object based on the pixel selection is created in the current layer, and the
selected pixels are removed from the original bitmap object. In the Layers panel, a thumbnail
of the new bitmap appears in the current layer, above the object from which it was cut.
18
Chapter 1: Selecting and Transforming Objects
To insert a new bitmap by copying and pasting a pixel selection:
1 Select an area of pixels using a pixel selection tool.
2 Choose Edit > Insert > Bitmap via Copy.
A new bitmap object based on the pixel selection is created in the current layer, and the
selected pixels remain in the original bitmap object. In the Layers panel, a thumbnail of the
new bitmap appears in the current layer, above the object from which it was copied.
Editing selected objects
Fireworks gives you a number of ways to edit selected objects: you can move objects on the canvas
or from application to application, you can replicate objects with the Clone and Duplicate
commands, or you can remove objects from the workspace altogether.
To move a selection, do one of the following:
•
•
•
•
•
Drag it with the Pointer, Subselection, or Select Behind tool.
Press any arrow key to move the selection in 1-pixel increments.
Hold down Shift while pressing any arrow key to move the selection in 10-pixel increments.
In the Property inspector, enter the X and Y coordinates for the location of the top left corner
of the selection.
Enter the object’s x and y coordinates in the Info panel. If the X and Y boxes aren’t visible, drag
the bottom edge of the panel.
To move or copy selected objects by pasting:
1 Select an object or multiple objects.
2 Choose Edit > Cut or Edit > Copy.
3 Choose Edit > Paste.
To duplicate one or more selected objects:
• Choose Edit > Duplicate.
As you repeat the command, duplicates of the selected object appear in a cascading arrangement
from the original, 10 pixels lower and 10 pixels to the right of the previous duplicate. The most
recently duplicated object becomes the selected object.
Note: You cannot use the Duplicate or Clone commands with bitmap selections. Use the
Subselection tool or Rubber Stamp tool to duplicate parts of a bitmap image. For more information
about using the Subselection tool, see the following procedures. For more information about using
the Rubber Stamp tool, see “Retouching bitmaps” on page 34.
Editing selected objects
19
To duplicate a selected object by dragging:
• Alt-drag (Windows) or Option-drag (Macintosh) the object using the Pointer tool.
To duplicate a pixel selection, do one of the following:
• Drag the pixel selection using the Subselection tool.
• Alt-drag (Windows) or Option-drag (Macintosh) the object using the Pointer tool.
To clone a selection:
• Choose Edit > Clone.
The clone of the selection is stacked precisely in front of the original and becomes the selected
object.
Note: To move a selected clone away from the original with pixel-by-pixel precision, use the arrow
keys or Shift+arrow keys. This is a convenient way to maintain a specific distance between clones
or maintain the vertical or horizontal alignment of the clones.
To delete selected objects, do one of the following:
•
•
•
•
Press Delete or Backspace.
Choose Edit > Clear.
Choose Edit > Cut.
Right-click (Windows) or Control-click (Macintosh) the object and choose Edit > Cut from
the context menu.
To cancel or deselect a selection, do one of the following:
• Choose Select > Deselect.
• Click anywhere in the image outside of the selected area if you are using the Marquee, Oval
Marquee, or Lasso tool.
• Press Escape.
20
Chapter 1: Selecting and Transforming Objects
Transforming and distorting selected objects and selections
You can transform a selected object or group, or a pixel selection, using the Scale, Skew, and
Distort tools and menu commands:
Scale enlarges or reduces an object.
Skew slants an object along a specified axis.
Distort moves the sides or corners of an object in the direction you drag a selection handle
while the tool is active. This is helpful in creating a 3D look.
When you choose any transformation tool or Transform menu command, Fireworks displays
transform handles around selected objects.
Transform handles
Center point
Original object
Object rotated, scaled, skewed, distorted, and flipped vertically and horizontally
To transform selected objects using the transform handles:
1 Choose a transformation tool.
As you move the pointer on or near the selection handles, the pointer changes to indicate the
current transformation.
2 Do one of the following to transform the objects:
■ Place the pointer near a corner point and then drag to rotate.
■ Drag a transform handle to transform according to the active transformation tool.
3 Double-click inside the window or press Enter to apply your changes.
Transforming and distorting selected objects and selections
21
Resizing (scaling) objects
Scaling an object enlarges or reduces it horizontally, vertically, or in both directions.
To scale a selected object:
1 Do one of the following to display the transform handles:
Choose the Scale tool.
■ Choose Modify > Transform > Scale.
2 Drag the transform handles:
■ To scale the object both horizontally and vertically, drag a corner handle. Proportions are
constrained if you press the Shift key as you scale.
■ To scale the object horizontally or vertically, drag a side handle.
■ To scale the object from the center, press Alt while dragging any handle.
■
Note: You can also resize selected objects by entering dimensions in the Property inspector.
For more information, see “Transforming objects numerically” on page 24.
Rotating objects
When rotated, an object pivots on its center point. You rotate an object by choosing a preset angle
or by placing the pointer outside an object’s transform handles to display the rotation pointer
before you drag.
Note: You can also rotate the document canvas. For more information, see Fireworks Help.
To rotate a selected object 90° or 180°:
• Choose Modify > Transform and choose a Rotate command from the submenu.
To rotate a selected object by dragging:
1 Choose any transformation tool.
2 Move the pointer outside the object until the rotation pointer appears.
3 Drag to rotate the object.
Tip: To constrain rotation to 15° increments relative to the horizon, Shift-drag the pointer.
4 Double-click inside the window or press Enter to apply your changes.
To relocate the axis of rotation:
• Drag the center point away from the center.
To reset the axis of rotation to the center of the selection, do one of the following:
• Double-click the center point
• Press Escape to deselect the object, then select it again.
22
Chapter 1: Selecting and Transforming Objects
Flipping objects
You can flip an object across its vertical or horizontal axis without moving its relative position on
the canvas.
To flip a selected object:
• Choose Modify > Transform > Flip Horizontal or Flip Vertical.
Skewing objects
Skewing an object transforms it by slanting it along the horizontal or vertical axis, or both axes.
To skew a selected object:
1 Do one of the following to display the transform handles:
Choose the Skew tool.
■ Choose Modify > Transform > Skew.
2 Drag a handle to skew the object.
3 Double-click inside the window or press Enter to remove the transform handles.
■
To achieve the illusion of perspective:
• Drag a corner point.
Distorting objects
You change the size and proportions of an object by dragging a selection handle with the
Distort tool.
To distort a selected object:
1 Do one of the following to display the transform handles:
Choose the Distort tool.
■ Choose Modify > Transform > Distort.
2 Drag a handle to distort the object.
3 Double-click inside the window or press Enter to apply your changes.
■
Transforming and distorting selected objects and selections
23
Transforming objects numerically
Instead of dragging to scale, resize, or rotate an object, you can transform it by entering
specific values.
To resize selected objects using the Property inspector or Info panel:
• Enter new width (W) or height (H) measurements.
Note: If the W and H boxes aren’t visible in the Property inspector, click the expander arrow to see
all properties.
To scale or rotate selected objects using Numeric Transform:
1 Choose Modify > Transform > Numeric Transform.
2
3
4
5
6
The Numeric Transform dialog box opens.
From the pop-up menu, choose the type of transformation to perform on the current selection:
Scale, Resize, or Rotate.
Choose Constrain Proportions to maintain horizontal and vertical proportions when scaling or
resizing a selection.
Choose Scale Attributes to transform the fill, stroke, and effects of the object along with the
object itself.
Deselect Scale Attributes to transform the path only.
Type numeric values to transform the selection, then click OK.
Viewing transformation information in the Info panel
The Info panel lets you view numerical transformation information for the currently selected
object. The information updates as you edit the object.
• For scaling and free transformations, the Info panel shows the width (W) and height (H) of the
•
original object before transformation and the percentage of increase or decrease in width and
height during the transformation.
For skewing and distorting, the Info panel shows the skew angle in one-degree increments and
the X and Y pointer coordinates during the transformation.
To view transformation information as you transform a selection:
• Choose Window > Info.
Organizing objects
When working with multiple objects in a single document, you can use several techniques to
organize the document:
• You can group individual objects to treat them as one or protect each object’s relationship to
the others in the group.
• You can arrange objects behind or in front of other objects. The way objects are arranged is
called the stacking order.
• You can align selected objects to an area of the canvas or to a vertical or horizontal axis.
24
Chapter 1: Selecting and Transforming Objects
Grouping objects
You can group individual selected objects and then manipulate them as if they were a single
object. For example, after drawing the petals of a flower as individual objects, you can group them
to select and move the entire flower as a single object.
You can edit groups without ungrouping them. You can select an individual object in a group for
editing without ungrouping the objects. You can also ungroup the objects at any time.
To group two or more selected objects:
• Choose Modify > Group.
To ungroup selected objects:
• Choose Modify > Ungroup.
Selecting objects within groups
To work with individual objects within a group, you can either ungroup the objects or use the
Subselection tool to select individual objects while leaving the group intact.
Subselection tool
Modifying the attributes of a subselected object changes only the subselected object, not the
entire group. Moving a subselected object to another layer removes the object from the group.
Subselecting an object within a group
To select an object that is part of a group:
• Choose the Subselection tool and click the object or drag a selection area around it. To add
objects to or remove them from the selection, hold down Shift as you click or drag.
To select the group that contains a subselected object, do one of the following:
• Right-click (Windows) or Control-click (Macintosh) anywhere in the group and choose
•
Select > Superselect from the context menu.
Choose Select > Superselect.
To select all objects within a selected group, do one of the following:
• Right-click (Windows) or Control-click (Macintosh) anywhere on the group and choose
Select > Subselect from the context menu.
• Choose Select > Subselect.
Organizing objects
25
Stacking objects
Within a layer, Fireworks stacks objects based on the order in which they were created, placing the
most recently created object on the top of the stack. The stacking order of objects determines how
they appear when they overlap.
Layers also affect the stacking order. For example, suppose a document has two layers named
Layer 1 and Layer 2. If Layer 1 is listed below Layer 2 on the Layers panel, then everything on
Layer 2 appears in front of everything on Layer 1. You can change the order of layers by dragging
the layer in the Layers panel to a new position. For more information, see “Organizing layers”
on page 131.
To change the stacking order of a selected object or group within a layer:
• Choose Modify > Arrange > Bring to Front or Send to Back to move the object or group to the
top or bottom of the stacking order.
• Choose Modify > Arrange > Bring Forward or Send Backward to move the object or group up
or down one position in the stacking order.
If more than one object or group is selected, the objects move in front of or behind all unselected
objects while maintaining their order relative to one another.
Aligning objects
The Align commands in the Modify menu give you a wide range of arrangement options,
allowing you to do any of the following:
Align objects
along a horizontal or vertical axis.
Align selected objects vertically along their right edge, center, or left edge, or horizontally along
their top edge, center, or bottom edge.
Note: Edges are determined by the bounding boxes enclosing each selected object.
Distribute selected objects
so that their centers or edges are evenly spaced.
You can apply one or more Align commands to selected objects.
To align selected objects, do one of the following:
• Choose Modify > Align > Left to align the objects to the leftmost selected object.
• Choose Modify > Align > Center Vertical to align the center points of the objects along a
•
•
•
•
vertical axis.
Choose Modify > Align > Right to align the objects to the rightmost selected object.
Choose Modify > Align > Top to align the objects to the topmost selected object.
Choose Modify > Align > Center Horizontal to align the center points of the objects along a
horizontal axis.
Choose Modify > Align > Bottom to align the objects to the bottommost selected object.
To evenly distribute the widths or heights of three or more selected objects:
• Choose Modify > Align > Distribute Widths or Modify > Align > Distribute Heights.
26
Chapter 1: Selecting and Transforming Objects
About arranging objects among layers
The Layers panel offers another dimension of organizational control. You can move selected
objects from one layer to another by dragging the object thumbnail or the blue selection indicator
in the Layers panel to another layer. For more information, see “Organizing layers” on page 131.
Organizing objects
27
28
Chapter 1: Selecting and Transforming Objects
CHAPTER 2
Working with Bitmaps
Bitmaps are graphics composed of small colored squares called pixels, which combine like the
tiles of a mosaic to create an image. Examples of bitmap graphics include photographs,
scanned images, and graphics created from paint programs. They are sometimes referred to
as raster images.
Macromedia Fireworks MX 2004 combines the functionality of photo-editing, vector-drawing,
and painting applications. You can create bitmap images by drawing and painting with bitmap
tools, by converting vector objects to bitmap images, or by opening or importing images.
Fireworks has a powerful set of Live Effects for tone and color adjustment, as well as a number of
ways to retouch your bitmap images, including cropping, feathering, and duplicating or cloning
images. In addition, Fireworks has a set of image-retouching tools—Blur, Sharpen, Dodge, Burn,
and Smudge.
For information on methods for selecting and transforming images and pixel areas, see
Fireworks Help.
Working with bitmaps
The Bitmap section of the Tools panel contains bitmap selection and editing tools. To edit the
pixels of a bitmap in your document, you can choose a tool from the Bitmap section. Unlike in
previous versions of Fireworks, you do not need to deliberately switch between bitmap mode and
vector mode, but you can still work with bitmaps, vector objects, and text. Switching to the
appropriate mode is as simple as choosing a vector or bitmap tool from the Tools panel.
Note: Previous versions of Fireworks display a striped border around the canvas to indicate that
Fireworks is in bitmap mode. If you prefer to see the familiar striped border when working with
bitmaps, you can choose Bitmap Options > Display Striped Border from the Edit category of the
Preferences dialog box.
29
Creating bitmap objects
You can create bitmap graphics by using the Fireworks bitmap drawing and painting tools, by
cutting or copying and pasting pixel selections, or by converting a vector image into a bitmap
object. Another way to create a bitmap object is to insert an empty bitmap image in your
document and then draw, paint, or fill it.
When you create a new bitmap object, it is added to the current layer. In the Layers panel with
layers expanded, you can see a thumbnail and name for each bitmap object under the layer on
which it resides. Although some bitmap applications consider each bitmap object a layer,
Fireworks organizes bitmap objects, vector objects, and text as separate objects that reside on
layers. For more information, see “Working with layers” on page 129.
To create a new bitmap object:
1 Choose the Brush or Pencil tool from the Bitmap section of the Tools panel.
2 Paint or draw with the Brush or Pencil tool to create bitmap objects on the canvas.
A new bitmap object is added to the current layer in the Layers panel. For more information
on using the Pencil or Brush tools, see “Drawing, painting, and editing bitmap objects”
on page 31.
You can create a new empty bitmap, and then draw or paint pixels in the empty bitmap.
To create an empty bitmap object, do one of the following:
• Click the New Bitmap Image button in the Layers panel.
• Choose Edit > Insert > Empty Bitmap.
• Draw a selection marquee, starting in a blank area of the canvas, and fill it. For more
information, see “Creating pixel selection marquees” on page 11.
An empty bitmap is added to the current layer in the Layers panel. If the empty bitmap is
deselected before any pixels have been drawn, imported, or otherwise placed on it, the empty
bitmap object automatically disappears from the Layers panel and the document.
To cut or copy pixels and paste them as a new bitmap object:
1 Make a pixel selection using the Marquee tool, Lasso tool, or Magic Wand tool.
For more information, see “Selecting pixels” on page 10.
2 Do one of the following:
Choose Edit > Cut, then Edit > Paste.
Choose Edit > Copy, then Edit > Paste.
■ Choose Edit > Insert > Bitmap via Copy to copy the current selection into a new bitmap.
■ Choose Edit > Insert > Bitmap via Cut to cut the current selection for placement into a
new bitmap.
The selection appears in the Layers panel as an object on the current layer.
■
■
Note: You can also Right-click (Windows) or Control-click (Macintosh) a pixel marquee selection
and choose a cut or copy option from the context menu. For more information about the Bitmap
via Cut and Bitmap via Copy options, see “Inserting a new bitmap by cutting or copying”
on page 18.
30
Chapter 2: Working with Bitmaps
To convert selected vector objects to a bitmap image, do one of the following:
• Choose Modify > Flatten Selection.
• Choose Flatten Selection from the Layers panel Options menu.
A vector-to-bitmap conversion is irreversible, except when Edit > Undo or undoing actions in
the History panel is still an option. Bitmap images cannot be converted to vector objects.
Drawing, painting, and editing bitmap objects
The Bitmap section of the Tools panel contains tools for selecting, drawing, painting, and editing
pixels in a bitmap image.
Drawing bitmap objects
You can use the Pencil tool to draw 1-pixel lines, either freehand lines or constrained, straight
lines, much as you use a real pencil, with or without a ruler, to draw hard-edged lines. You can
also zoom in on a bitmap and use the Pencil tool to edit individual pixels.
To draw an object with the Pencil tool:
1 Choose the Pencil tool.
2 Set tool options in the Property inspector:
smooths the edges of the lines you draw.
Auto Erase uses the fill color when the Pencil tool is clicked over the stroke color.
Preserve Transparency restricts the Pencil tool to drawing only in existing pixels, not in
transparent areas of a graphic.
3 Drag to draw. Shift-drag to constrain the path to a horizontal, vertical, or diagonal line.
Anti-aliased
Painting bitmap objects
You can use the Brush tool to paint a brush stroke using the color in the Stroke Color box, or you
can use the Paint Bucket tool to change the color of selected pixels to the color in the Fill Color
box. With the Gradient tool, you can fill bitmap or vector objects with a combination of colors in
adjustable patterns.
To paint an object with the Brush tool:
1 Choose the Brush tool.
2 Set the stroke attributes in the Property inspector.
3 Drag to paint.
For more information about setting Brush tool options, see “Working with strokes”
on page 106.
Drawing, painting, and editing bitmap objects
31
To change the color of pixels to the color in the Fill Color box:
1 Choose the Paint Bucket tool.
2 Choose a color in the Fill Color box.
3 Set the tolerance value in the Property inspector.
Note: The tolerance determines how similar in color pixels must be to be filled. A low tolerance
value fills pixels with color values similar to the pixel you click. A high tolerance fills pixels with a
broader range of color values.
4 Click the image.
All pixels within the tolerance range change to the fill color.
To apply a gradient fill to a pixel selection:
1 Make the selection.
2 Choose the Gradient tool.
3 Set the fill attributes in the Property inspector.
4 Click the pixel selection to apply the fill.
The Paint Bucket and Gradient tools can also fill selected vector objects. For more information
about creating, applying, and editing gradient fills, see “Working with fills” on page 110.
Sampling a color to use as a stroke or fill color
With the Eyedropper tool, you can sample color from an image to designate a new stroke or fill
color. You can sample the color of a single pixel, an average of color values within a 3-by-3-pixel
area, or an average of color values within a 5-by-5-pixel area.
To sample a stroke or fill color:
1 If the correct attribute is not already active, do one of the following:
■
■
Click the stroke icon next to the Stroke Color box in the Tools panel to make it the active
attribute.
Click the fill icon next to the Fill Color box in the Tools panel to make it the active
attribute.
Note: Do not click the color box itself. If you do, the eyedropper pointer that appears is not the
Eyedropper tool. For information on the color box eyedropper pointer, see “Sampling colors from
a color pop-up window” on page 105.
2 Open a Fireworks document or any file that Fireworks can open. For more information, see
Chapter 9, “Slices, Rollovers, and Hotspots,” on page 167.
3 Choose the Eyedropper tool from the Bitmap section of the Tools panel. Set the Color
Averaging Sample setting in the Property inspector:
1-pixel creates a stroke or fill color from a single pixel.
3x3 pixels creates a stroke or fill color from the average of color values in a 3-by-3-pixel area.
5x5 pixels creates a stroke or fill color from the average of color values in a 5-by-5-pixel area.
4 Click the Eyedropper tool anywhere in the document.
The sampled color appears in all Stroke Color or Fill Color boxes throughout Fireworks.
32
Chapter 2: Working with Bitmaps
Erasing bitmap objects
You can use the Eraser tool to remove pixels. By default, the Eraser tool pointer represents the size
of the current eraser, but you can change the size and appearance of the pointer in the Preferences
dialog box. For more information, see “Editing preferences” on page 282.
Eraser tool
To erase pixels in a selected bitmap object or pixel selection:
1 Choose the Eraser tool.
2 In the Property inspector, choose the round or square eraser shape.
3 Drag the Edge slider to set the softness of the eraser’s edge.
4 Drag the Size slider to set the size of the eraser.
5 Drag the Eraser Opacity slider to set the degree of opacity.
6 Drag the Eraser tool over the pixels you want to erase.
Feathering pixel selections
Feathering blurs the edges of a pixel selection and helps the selected area blend with
the surrounding pixels. Feathering is useful when you copy a selection and paste it onto
another background.
To feather the edges of a pixel selection as you make a pixel selection:
1 Choose a bitmap selection tool from the Tools panel.
2 Choose Feather from the Edge pop-up menu in the Property inspector.
3 Drag the slider to set the number of pixels you want to blur along the edge of the selection.
4 Make a selection.
To feather the edges of a pixel selection from the menu bar:
1 Choose Select > Feather.
2 Type a value in the Feather Selection dialog box to set the feather radius, and click OK.
The radius value determines the number of pixels that are feathered on each side of the
selection border.
Drawing, painting, and editing bitmap objects
33
Retouching bitmaps
Fireworks provides a wide range of tools to help you retouch your images. You can alter an image’s
size, reduce or sharpen its focus, or copy and “stamp” a part of it to another area.
The Rubber Stamp tool lets you copy or clone one area of an image to another.
The Blur tool decreases the focus of selected areas in an image.
The Smudge tool picks up color and pushes it in the direction that you drag in an image.
The Sharpen tool sharpens areas in an image.
The Dodge tool lightens parts of an image.
The Burn tool darkens parts of an image.
The Red-eye Removal tool reduces the appearance of red eye in photos
The Replace Color tool paints over one color with another color
Cloning pixels
The Rubber Stamp tool clones an area of a bitmap image so that you can stamp it elsewhere in
the image. Cloning pixels is useful when you want to fix a scratched photograph or remove dust
from an image; you can copy a pixel area of a photo and replace the scratch or dust spot with the
cloned area.
To clone portions of a bitmap image:
1 Choose the Rubber Stamp tool.
2 Click an area to designate it as the source, or the area you want to clone.
The sampling pointer becomes a cross-hair pointer.
Note: To designate a different area of pixels to clone, you can Alt-click (Windows) or Option-click
(Macintosh) another area of pixels to designate it as the source.
3 Move to a different part of the image and drag the pointer.
You will see two pointers. The first one, the source of the cloning, is in the shape of a cross hair.
For more information, see “Editing preferences” on page 282.
Depending upon the brush preferences you’ve selected, the second pointer is a rubber stamp, a
cross hair, or a blue circle. As you drag the second pointer, pixels beneath the first pointer are
copied and applied to the area beneath the second.
34
Chapter 2: Working with Bitmaps
To set Rubber Stamp tool options:
1 Choose the Rubber Stamp tool.
2 Choose from among the following options in the Property inspector:
determines the size of the stamp.
Edge determines the softness of the stroke (100% is hard; 0% is soft).
Source Aligned affects the sampling operation. When Source Aligned is selected, the
sampling pointer moves vertically and horizontally in alignment with the second. When
Source Aligned is deselected, the sample area is fixed, regardless of where you move and click
the second pointer.
Use Entire Document samples from all objects on all layers. When this option is deselected,
the Rubber Stamp tool samples from the active object only.
Opacity determines how much of the background can be seen through the stroke.
Blend Mode affects how the cloned image affects the background.
Size
To duplicate a pixel selection, do one of the following:
• Drag the pixel selection with the Subselection tool.
• Alt-drag (Windows) or Option-drag (Macintosh) the pixel selection using the Pointer tool.
Blurring, sharpening, and smudging pixels
The Blur and Sharpen tools affect the focus of pixels. The Blur tool lets you emphasize or
deemphasize parts of an image by selectively blurring the focus of elements, much as a
photographer controls depth of field. The Sharpen tool can be useful for repairing scanning
problems or out-of-focus photographs. The Smudge tool lets you gently blend colors, as when
creating a reflection of an image.
To blur or sharpen an image:
1 Choose the Blur or Sharpen tool.
2 Set brush options in the Property inspector:
sets the size of the brush tip.
specifies the softness of the brush tip.
Shape sets a round or square brush tip shape.
Intensity sets the amount of blurring or sharpening.
3 Drag the tool over the pixels to be sharpened or blurred.
Size
Edge
Tip: Hold down Alt (Windows) or Option (Macintosh) to change from one tool behavior to
the other.
Retouching bitmaps
35
To smudge colors in an image:
1 Choose the Smudge tool.
2 Set the tool options in the Property inspector:
specifies the size of the brush tip.
Shape sets a round or square brush tip shape.
Edge specifies the softness of the brush tip.
Pressure sets the intensity of the stroke.
Smudge Color allows you to smudge using a specified color at the beginning of each stroke.
If this option is deselected, the tool uses the color under the tool pointer.
Use Entire Document smudges using color data from all objects on all layers. If this option is
deselected, the Smudge tool uses colors from the active object only.
3 Drag the tool over the pixels to be smudged.
Size
Lightening and darkening pixels
You use the Dodge or Burn tool to lighten or darken parts of an image, respectively. This is
similar to the darkroom technique of increasing or decreasing light exposure as the photograph
is developed.
To lighten or darken parts of an image:
1 Choose the Dodge tool to lighten parts of an image or the Burn tool to darken parts of an image.
2 Set the brush options in the Property inspector:
sets the size of the brush tip.
Shape sets a round or square brush tip shape.
Edge sets the softness of the brush tip.
3 Set the exposure in the Property inspector.
The exposure ranges from 0% to 100%. For a lessened effect, specify a lower percentage value;
for a stronger effect, specify a higher value.
4 Set the range in the Property inspector:
Shadows changes mainly the dark portions of the image.
Highlights changes mainly the light portions of the image.
Midtones changes mainly the middle range per channel in the image.
5 Drag over the part of the image you want to lighten or darken.
Hold down Alt (Windows) or Option (Macintosh) as you drag the tool to temporarily switch
from the Dodge tool to the Burn tool or from the Burn tool to the Dodge tool.
Size
36
Chapter 2: Working with Bitmaps
Removing red-eye from photos
In some photographs, the subjects’ pupils are an unnatural shade of red. You can use the Red-eye
Removal tool to correct this red-eye effect. The Red-eye Removal tool paints red areas of a
photograph only, replacing reddish colors with grays and blacks.
Original photograph; after using the Red-eye Removal tool
To correct the red-eye effect in a photograph:
1 Choose the Red-eye Removal tool from its pop-up menu.
2 Set the stroke attributes in the Property inspector:
sets the size of the brush tip.
Shape sets a round or square brush tip shape.
Tolerance determines the range of hues to replace (0 replaces only red; 255 replaces all hues
that contain red).
Strength sets the darkness of the grays used to replace reddish colors.
3 Drag or click the red pupils in the photograph.
Size
Retouching bitmaps
37
Replacing colors
The Replace Color tool lets you select a color and paint over that color with a different color.
Original photograph; after using the Replace Color tool
To replace one color with another:
1 Choose the Replace Color tool from its pop-up menu.
2 Click the Change color well in the Property inspector to select the color probe, and choose a
color from the pop-up menu, or click in the image to choose the color you want to replace.
3 Click the To color well in the Property inspector to select the color probe, then choose a color
from the pop-up menu, or click in the image to choose the color you want to use as a
replacement.
4 Set the other stroke attributes in the Property inspector:
Size sets the size of the brush tip.
Shape sets a round or square brush tip shape.
Tolerance determines the range of colors to replace (0 replaces only the To color; 255 replaces
all colors similar to the To color).
Strength determines how much of the Change color is replaced.
Colorize replaces the Change color with the To color. Deselect Colorize to tint the Change
color with the To color, leaving some of the Change color intact.
5 Drag the tool over the color you want to replace.
38
Chapter 2: Working with Bitmaps
Cropping a selected bitmap
You can isolate a single bitmap object in a Fireworks document and crop only that bitmap object,
leaving other objects on the canvas intact.
To crop a bitmap image without affecting other objects in the document:
1 Select a bitmap object by clicking the object on the canvas or by clicking its thumbnail in the
Layers panel, or draw a selection marquee using a bitmap selection tool.
2 Choose Edit > Crop Selected Bitmap.
The crop handles appear around the entire selected bitmap or around the selection marquee, if
you drew one in step 1.
3 Adjust the crop handles until the bounding box surrounds the area of the bitmap image that
you want to keep.
Note: To cancel a crop selection, press Escape.
Bounding box
4 Double-click inside the bounding box or press Enter to crop the selection.
Every pixel in the selected bitmap outside the bounding box is removed, but other objects in
the document remain.
Adjusting bitmap color and tone
Fireworks has color- and tone-adjustment filters to help you improve and enhance the colors in
your bitmap images. You can adjust the contrast and brightness, the tonal range, and the hue and
color saturation of your images.
Applying filters as Live Effects from the Property inspector is nondestructive. Live Effects do not
permanently alter the pixels; you can remove or edit them anytime.
If you prefer to apply filters in an irreversible, permanent way, you can choose them from the
Filters menu. However, Macromedia recommends that you use filters as Live Effects whenever
possible.
Adjusting bitmap color and tone
39
You can apply filters from the Filters menu to pixel selections, but not Live Effects. You can,
however, define an area of a bitmap and create a separate bitmap from it, and then apply a Live
Effect to it.
If you apply a filter to a selected vector object using the Filters menu, Fireworks converts the
selection to a bitmap.
To apply a Live Effect to an area defined by a bitmap selection marquee:
1 Choose a bitmap selection tool and draw a selection marquee.
2 Choose Edit > Cut.
3 Choose Edit > Paste.
Fireworks pastes the selection exactly where the pixels were originally located, but the selection
is now a separate bitmap object.
4 Click the thumbnail of the new bitmap object in the Layers panel to select the bitmap object.
5 Apply a Live Effect from the Property inspector.
Fireworks applies the Live Effect only to the new bitmap object, simulating the application of a
filter to a pixel selection.
Note: Although Live Effects are more flexible, large numbers of Live Effects in a document can
slow down Fireworks performance. For more information, see Fireworks Help.
Adjusting tonal range
You can use the Levels and Curves features to adjust a bitmap’s tonal range. With Levels, you can
correct bitmaps that contain a high concentration of pixels in the highlights, midtones, or
shadows. Or you can use Auto Levels and let Fireworks adjust the tonal range for you. If you want
more precise control over a bitmap’s tonal range, you can use the Curves feature, which lets you
adjust any color along the tonal range without affecting other colors.
Using the Levels feature
A bitmap with a full tonal range should have an even number of pixels in all areas. The
Levels feature corrects bitmaps with a high concentration of pixels in the highlights, midtones,
or shadows.
Highlights
40
corrects an excess of light pixels, which makes the image look washed out.
Midtones
corrects an excess of pixels in the midtones, which makes the image bland.
Shadows
corrects an excess of dark pixels, which hides much of the detail.
Chapter 2: Working with Bitmaps
The Levels feature sets the darkest pixels as black and the lightest pixels as white, then
redistributes the midtones proportionally. This produces an image with the sharpest detail in all
of its pixels.
Original with pixels concentrated in the highlights; after adjusting with Levels
You can use the Histogram in the Levels dialog box to view the pixel distribution of a bitmap. The
Histogram is a graphical representation of the distribution of pixels in the highlights, midtones,
and shadows.
The Histogram helps you determine the best method of correcting an image’s tonal range. A high
concentration of pixels in the shadows or highlights indicates that you could improve the image
by applying the Levels or Curves feature.
The horizontal axis represents color values from darkest (0) to brightest (255). Read the
horizontal axis from left to right: the darker pixels are on the left, the midtone pixels are in the
center, and the brighter pixels are on the right.
The vertical axis represents the number of pixels at each brightness level. Typically, you should
adjust the highlights and shadows first. Adjusting the midtones second lets you improve their
brightness value without affecting the highlights and shadows.
Adjusting bitmap color and tone
41
To adjust highlights, midtones, and shadows:
1 Select the bitmap image.
2 Do one of the following to open the Levels dialog box:
■
■
In the Property inspector, click the Add Effects button, and then choose Adjust Color >
Levels from the Add Effects pop-up menu.
Choose Filters > Adjust Color > Levels.
Note: Applying a filter from the Filters menu is destructive; that is, it cannot be undone except
when Edit > Undo is an option. To maintain the ability to adjust, turn off, or remove this filter, apply it
as a Live Effect, as described in the first bulleted option in this step. For more information, see
“Using Live Effects” on page 119.
Levels dialog box
Tip: To view your changes in the workspace, choose Preview in the dialog box. As you make
changes, the image updates automatically.
3 In the Channel pop-up menu, choose whether you want to apply changes to individual color
channels (Red, Blue, or Green) or to all color channels (RGB).
4 Drag the Input Levels sliders under the Histogram to adjust the highlights, midtones, and
shadows:
■ The right slider adjusts the highlights using values from 255 to 0.
■ The center slider adjusts the midtones using values from 10 to 0.
■ The left slider adjusts the shadows using values from 0 to 255.
As you move the sliders, the values are automatically entered in the Input Levels boxes.
Note: The shadow value cannot be higher than the highlight value; the highlight value cannot be
lower than the shadow value; and the midtones must fall between the shadow and highlight
settings.
5 Drag the Output Levels sliders to adjust the contrast values in the image:
The right slider adjusts the highlights using values from 255 to 0.
■ The left slider adjusts the shadows using values from 0 to 255.
As you move the sliders, the values are automatically entered in the Output Levels boxes.
■
42
Chapter 2: Working with Bitmaps
Using Auto Levels
You can use Auto Levels to have Fireworks make tonal range adjustments for you.
To adjust highlights, midtones, and shadows automatically:
1 Select the image.
2 Do one of the following to choose Auto Levels:
■
■
In the Property inspector, click the Add Effects button, and then choose Adjust Color >
Auto Levels from the Add Effects pop-up menu.
Choose Filters > Adjust Color > Auto Levels.
Note: Applying a filter from the Filters menu is destructive; that is, it cannot be undone except
when Edit > Undo is an option. To maintain the ability to adjust, turn off, or remove this filter, apply it
as a Live Effect, as described in the first bulleted option in this step. For more information, see
“Using Live Effects” on page 119.
Tip: You can also adjust highlights, midtones, and shadows automatically by clicking the Auto
button in the Levels or Curves dialog box.
Using Curves
The Curves feature is similar to the Levels feature but it provides more precise control over the
tonal range. Whereas Levels uses highlights, shadows, and midtones to correct the tonal range,
Curves lets you adjust any color along the tonal range, instead of only three variables, without
affecting other colors. For example, you can use Curves to correct for a color cast caused by
lighting conditions.
The grid in the Curves dialog box illustrates two brightness values:
The horizontal axis
represents the original brightness of the pixels, shown in the Input box.
The vertical axis represents
the new brightness values, shown in the Output box.
When you first open the Curves dialog box, the diagonal line indicates that no changes have been
made, so the input and output values are the same for all pixels.
Adjusting bitmap color and tone
43
To adjust a specific point in the tonal range:
1 Select the image.
2 Do one of the following to open the Curves dialog box:
■
■
In the Property inspector, click the Add Effects button, and then choose Adjust Color >
Curves from the Add Effects pop-up menu.
Choose Filters > Adjust Color > Curves.
Note: Applying a filter from the Filters menu is destructive; that is, it cannot be undone except
when Edit > Undo is an option. To maintain the ability to adjust, turn off, or remove this filter, apply it
as a Live Effect, as described in the first bulleted option in this step. For more information, see
“Using Live Effects” on page 119.
Curves dialog box
3 In the Channel pop-up menu, choose whether you want to apply changes to individual color
channels or to all colors.
4 Click a point on the grid’s diagonal line and drag it to a new position to adjust the curve.
■
■
Each point on the curve has its own Input and Output values. When you drag a point, the
Input and Output values update automatically.
The curve displays brightness values of 0 to 255, with 0 representing the shadows.
Curve after dragging a point to adjust
44
Chapter 2: Working with Bitmaps
Tip: You can also adjust highlights, midtones, and shadows automatically by clicking the Auto
button in the Curves dialog box.
To delete a point along the curve:
• Drag the point off the grid.
Note: You cannot delete the end points of the curve.
Using tonal eyedroppers
You can adjust the highlights, shadows, and midtones using the Shadow, Highlight, or Midtone
eyedropper in the Levels or Curves dialog box.
To adjust the tonal balance manually using the tonal eyedroppers:
1 Open the Levels or Curves dialog box, and choose a color channel from the Channel pop-up
menu.
2 Choose the appropriate eyedropper to reset the tonal values in the image:
■ Click the lightest pixel in the image with the Highlight eyedropper to reset the
highlight value.
■ Click a pixel of neutral color in the image with the Midtone eyedropper to reset the
midtone value.
■ Click the darkest pixel in the image with the Shadow eyedropper to reset the shadow value.
3 Click OK.
Adjusting brightness and contrast
The Brightness/Contrast feature modifies the contrast or brightness of pixels in an image. This
affects the highlights, shadows, and midtones of an image. You typically use Brightness/Contrast
when correcting images that are too dark or too light.
Original; after adjusting brightness
Adjusting bitmap color and tone
45
To adjust the brightness or contrast:
1 Select the image.
2 Do one of the following to open the Brightness/Contrast dialog box:
■
■
In the Property inspector, click the Add Effects button, and then choose Adjust Color >
Brightness/Contrast from the Add Effects pop-up menu.
Choose Filters > Adjust Color > Brightness/Contrast.
Note: Applying a filter from the Filters menu is destructive; that is, it cannot be undone except
when Edit > Undo is an option. To maintain the ability to adjust, turn off, or remove this filter, apply it
as a Live Effect, as described in the first bulleted option in this step. For more information, see
“Using Live Effects” on page 119.
3 Drag the Brightness and Contrast sliders to adjust the settings.
Values range from –100 to 100.
4 Click OK.
Applying the Color Fill Live Effect
You can use the Color Fill Live Effect to change the color of objects quickly, either by replacing
the pixels entirely with a given color or by blending a color into an existing object. When you
blend colors, the color is added on top of the object. Blending a color into an existing object is
much like using Hue/Saturation; however, blending lets you apply a specific color from a color
swatch panel quickly.
To add a Color Fill effect to a selected object:
1 In the Property inspector, click the Add Effects button, and then choose Adjust Color >
Color Fill from the Add Effects pop-up menu.
2 Choose a blending mode.
The default mode is Normal. For information about each blending mode, see “About blending
modes” on page 152.
3 Choose a fill color from the color box pop-up menu.
4 Choose a percentage of opacity for the fill color and press Enter.
46
Chapter 2: Working with Bitmaps
Adjusting hue and saturation
You can use the Hue/Saturation feature to adjust the shade of a color, its hue; the intensity of a
color, its saturation; or the lightness of a color in an image.
Original; after adjusting the saturation
To adjust the hue or saturation:
1 Select the image.
2 Do one of the following to open the Hue/Saturation dialog box:
■
■
In the Property inspector, click the Add Effects button, and then choose Adjust Color >
Hue/Saturation from the Add Effects pop-up menu.
Choose Filters > Adjust Color > Hue/Saturation.
Note: Applying a filter from the Filters menu is destructive; that is, it cannot be undone except
when Edit > Undo is an option. To maintain the ability to adjust, turn off, or remove this filter, apply it
as a Live Effect, as described in the first bulleted option in this step. For more information, see
“Using Live Effects” on page 119.
3 Drag the Hue slider to adjust the color of the image.
Values range from –180 to 180.
4 Drag the Saturation slider to adjust the purity of the colors.
Values range from –100 to 100.
5 Drag the Lightness slider to adjust the lightness of the colors.
Values range from –100 to 100.
6 Click OK.
To change an RGB image to a two-tone image or to add color to a grayscale image:
• Choose Colorize in the Hue/Saturation dialog box.
Note: When you choose Colorize, the value range of the Hue and Saturation sliders changes. Hue
changes to 0 to 360. Saturation changes to 0 to 100.
Adjusting bitmap color and tone
47
Inverting an image’s color values
You can use Invert to change each color in an image to its inverse on the color wheel. For
example, applying the filter to a red object (R=255, G=0, B=0) changes the color to light blue
(R=0, G=255, B=255).
A monochrome image; after inverting
A color image; after inverting
To invert colors:
1 Select the image.
2 Do one of the following:
■
■
In the Property inspector, click the Add Effects button, and then choose Adjust Color >
Invert from the Add Effects pop-up menu.
Choose Filters > Adjust Color > Invert.
Note: Applying a filter from the Filters menu is destructive; that is, it cannot be undone except
when Edit > Undo is an option. To maintain the ability to adjust, turn off, or remove this filter, apply it
as a Live Effect, as described in the first bulleted option in this step. For more information, see
“Using Live Effects” on page 119.
48
Chapter 2: Working with Bitmaps
Blurring and sharpening bitmaps
Fireworks has a set of blurring and sharpening options that you can apply as Live Effects or as
irreversible, permanent filters.
Blurring an image
Blurring softens the look of a bitmap image. Fireworks has six blurring options:
Blur
softens the focus of selected pixels.
Blur More
blurs about three times as much as Blur.
Gaussian Blur
applies a weighted average of blur to each pixel to produce a hazy effect.
Motion Blur creates
the appearance that the image is moving.
Radial Blur
creates the appearance that the image is spinning.
Zoom Blur
creates the appearance that the image is moving toward or away from the viewer.
Note: Applying filters from the Filters menu is destructive; that is, it cannot be undone except when
Edit > Undo is an option. To maintain the ability to adjust, turn off, or remove a filter, apply it as a Live
Effect, as described in the first bulleted option in each of the following procedures. For more
information, see “Using Live Effects” on page 119.
To blur an image:
1 Select the image.
2 Do one of the following:
■
■
In the Property inspector, click the Add Effects button, and then choose Blur > Blur or Blur
More from the Add Effects pop-up menu.
Choose Filters > Blur > Blur or Blur More.
To blur an image using Gaussian Blur:
1 Select the image.
2 Do one of the following to open the Gaussian Blur dialog box:
In the Property inspector, click the Add Effects button, and then choose Blur > Gaussian
Blur from the Add Effects pop-up menu.
■ Choose Filters > Blur > Gaussian Blur.
3 Drag the Blur Radius slider to set the strength of the blur effect.
Values range from 0.1 to 250. An increase in radius results in a stronger blur effect.
4 Click OK.
■
Blurring and sharpening bitmaps
49
To blur an image using Motion Blur:
1 Select the image.
2 Do one of the following to open the Motion Blur dialog box:
In the Property inspector, click the Add Effects button, and choose Blur > Motion Blur
from the Add Effects pop-up menu.
■ Choose Filters > Blur > Motion Blur.
3 Drag the Angle dial to set the direction of the blur effect.
4 Drag the Distance slider to set the strength of the blur effect.
Values range from 1 to 100. An increase in distance results in a stronger blur effect.
5 Click OK.
■
To blur an image using Radial Blur:
1 Select the image.
2 Do one of the following to open the Radial Blur dialog box:
In the Property inspector, click the Add Effects button, and choose Blur > Radial Blur from
the Add Effects pop-up menu.
■ Choose Filters > Blur > Radial Blur.
3 Drag the Amount slider to set the strength of the blur effect.
Values range from 1 to 100. An increase in amount results in a stronger blur effect.
4 Drag the Quality slider to set the smoothness of the blur effect.
Values range from 1 to 100. An increase in quality results in a blur effect with fewer repetitions
of the original image.
5 Click OK.
■
To blur an image using Zoom Blur:
1 Select the image.
2 Do one of the following to open the Zoom Blur dialog box:
In the Property inspector, click the Add Effects button, and choose Blur > Zoom Blur from
the Add Effects pop-up menu.
■ Choose Filters > Blur > Zoom Blur.
3 Drag the Amount slider to set the strength of the blur effect.
Values range from 1 to 100. An increase in amount results in a stronger blur effect.
4 Drag the Quality slider to set the smoothness of the blur effect.
Values range from 1 to 100. An increase in quality results in a blur effect with fewer repetitions
of the original image.
5 Click OK.
■
50
Chapter 2: Working with Bitmaps
Using the Find Edges effect to create a sketch look
The Find Edges effect changes your bitmaps to look like line drawings by identifying the color
transitions in the images and changing them to lines.
Original; after applying Find Edges
To apply the Find Edges effect to a selected area, do one of the following:
• In the Property inspector, click the Add Effects button, and then choose Other > Find Edges
from the Add Effects pop-up menu.
• Choose Filters > Other > Find Edges.
Note: Applying a filter from the Filters menu is destructive; that is, it cannot be undone except
when Edit > Undo is an option. To maintain the ability to adjust, turn off, or remove this filter, apply it
as a Live Effect, as described in the first bulleted option in this step. For more information, see
“Using Live Effects” on page 119.
Converting an image to a transparency
You can use the Convert to Alpha effect to convert an object or text into a transparency based
upon the transparency of the image.
To apply the Convert to Alpha effect to a selected area, do one of the following:
• In the Property inspector, click the Add Effects button, and then choose Other >
•
Convert to Alpha from the Add Effects pop-up menu.
Choose Filters > Other > Convert to Alpha.
Note: Applying a filter from the Filters menu is destructive; that is, it cannot be undone except
when Edit > Undo is an option. To maintain the ability to adjust, turn off, or remove this filter, apply it
as a Live Effect, as described in the first bulleted option in this step. For more information, see
“Using Live Effects” on page 119.
Blurring and sharpening bitmaps
51
Using the Sharpen feature to sharpen an image
You can use the Sharpen feature to correct images that are blurry. Fireworks has three Sharpen
options:
Sharpen
adjusts the focus of a blurred image by increasing the contrast of adjacent pixels.
Sharpen More
increases the contrast of adjacent pixels about three times as much as Sharpen.
Unsharp Mask sharpens an image by adjusting the contrast of the pixel edges. This option offers
the most control, so it is usually the best option for sharpening an image.
Original; after sharpening
To sharpen an image using a sharpen option:
1 Select the image.
2 Do one of the following to choose a sharpen option:
■
■
In the Property inspector, click the Add Effects button, and then choose Sharpen >
Sharpen or Sharpen More from the Add Effects pop-up menu.
Choose Filters > Sharpen > Sharpen or Sharpen More.
Note: Applying a filter from the Filters menu is destructive; that is, it cannot be undone except
when Edit > Undo is an option. To maintain the ability to adjust, turn off, or remove this filter, apply it
as a Live Effect, as described in the first bulleted option in this step. For more information, see
“Using Live Effects” on page 119.
To sharpen an image using Unsharp Mask:
1 Select the image.
2 Do one of the following to open the Unsharp Mask dialog box:
■
■
In the Property inspector, click the Add Effects button, and then choose Sharpen >
Unsharp Mask from the Add Effects pop-up menu.
Choose Filters > Sharpen > Unsharp Mask.
Note: Applying a filter from the Filters menu is destructive; that is, it cannot be undone except
when Edit > Undo is an option. To maintain the ability to adjust, turn off, or remove this filter, apply it
as a Live Effect, as described in the first bulleted option in this step. For more information, see
“Using Live Effects” on page 119.
3 Drag the Sharpen Amount slider to select the amount of sharpening effect from 1% to 500%.
4 Drag the Pixel Radius slider to select a radius from 0.1 to 250.
An increase in radius results in a greater area of sharp contrast surrounding each pixel edge.
52
Chapter 2: Working with Bitmaps
5 Drag the Threshold slider to select a threshold of 0 to 255.
Values between 2 and 25 are most commonly used. An increase in threshold sharpens only
those pixels of a higher contrast in the image. A decrease in threshold includes pixels of lower
contrast. A threshold of 0 sharpens all pixels in the image.
6 Click OK.
Adding noise to an image
When viewed at high magnification levels, most images obtained from digital cameras and
scanners do not have perfectly uniform colors. Instead, the colors you see consist of pixels of
many different colors. In image editing, “noise” refers to these random color variations in the
pixels that make up an image.
Sometimes, such as when you are pasting part of one image into another, the difference in the
amount of random color variation in the two images can stand out, preventing the images from
blending together smoothly. In such a case, you can add noise to one or both images to create the
illusion that both images come from the same source. You can also add noise to an image for
artistic reasons, for instance, to simulate an old photograph or static on a television screen.
Original photograph; after adding noise
Adding noise to an image
53
To add noise to an image:
1 Select the image.
2 Do one of the following to open the Add Noise dialog box:
■
■
In the Property inspector, click the Add Effects button, and choose Noise > Add Noise from
the Add Effects pop-up menu.
Choose Filters > Noise > Add Noise.
Note: Applying a filter from the Filters menu is destructive; that is, it cannot be undone except
when Edit > Undo is an option. To maintain the ability to adjust, turn off, or remove this filter, apply it
as a Live Effect, as described in the first bulleted option in this step. For more information, see
“Using Live Effects” on page 119.
3 Drag the Amount slider to set the amount of noise.
Values range from 1 to 400. An increase in amount results in an image with more randomly
placed pixels.
4 Select the Color check box to apply color noise. Leave the check box unchecked to apply
monochrome noise only.
5 Click OK.
54
Chapter 2: Working with Bitmaps
CHAPTER 3
Working with Vector Objects
A vector object is a computer graphic whose shape is defined by a path. The shape of a vector path
is determined by points that are plotted along the path. A vector object’s stroke color follows the
path. Its fill occupies the area inside the path. The stroke and fill typically determine how the
graphic looks when published in print or on the web.
Macromedia Fireworks MX 2004 has many tools for drawing and editing vector objects using a
variety of techniques. With the basic shape tools, you can quickly draw straight lines, circles and
ellipses, squares and rectangles, stars, and any equilateral polygon with 3 to 360 sides.
You can draw freeform vector paths with the Vector Path and Pen tools. Using the Pen tool, you
can draw complex shapes with smooth curves and straight lines by plotting points one by one.
Fireworks offers several methods for editing the vector objects you have drawn. You can change an
object’s shape by moving, adding, or deleting points. You can use point handles to change the
shape of adjacent path segments. Freeform tools let you alter the shape of objects by editing paths
directly. You can also edit Auto Shapes using their predefined editing methods.
Commands on the Modify menu give you more options for editing objects, including combining
objects to create a single object, creating an object from the intersection of several objects, and
expanding the stroke of an object. You can also import graphics and manipulate them using
these commands.
Drawing vector objects
Fireworks has many tools for drawing vector objects. With these you can draw basic shapes,
freeform paths, and complex shapes by plotting points one by one. You can also draw Auto
Shapes, which are vector object groups that have special controls for adjusting their attributes.
Drawing basic lines, rectangles, and ellipses
You can use the Line, Rectangle, or Ellipse tool to draw basic shapes quickly. The Rectangle tool
draws rectangles as grouped objects. To move a rectangle corner point independently, you must
ungroup the rectangle or use the Subselection tool. To draw a basic rectangle with beveled,
chamfered, or rounded corners, see the following procedure. To draw a Auto Shape rectangle with
rounded corners, see “Adjusting beveled, chamfered, and rounded rectangle Auto Shapes”
on page 59.
55
To draw a line, rectangle, or ellipse:
1 Choose the Line, Rectangle, or Ellipse tool.
2 If desired, set the stroke and fill attributes in the Property inspector. See Chapter 5, “Applying
Color, Strokes, and Fills,” on page 97.
3 Drag on the canvas to draw the shape.
For the Line tool, Shift-drag to constrain lines to 45° increments.
For the Rectangle or Ellipse tool, Shift-drag to constrain shapes to squares or circles.
To draw a line, rectangle, or ellipse from a specific center point:
• Position the pointer at the intended center point and Alt-drag (Windows) or Option-drag
(Macintosh) the drawing tool.
To constrain a shape and draw from the center point:
• Position the pointer at the intended center point and Shift-Alt-drag (Windows) or
Shift-Option-drag (Macintosh) the drawing tool.
To adjust the position of a basic shape as you draw it:
• While holding down the mouse button, press and hold the Spacebar, then drag the object to
another location on the canvas. Release the Spacebar to continue drawing the object.
Note: An exception is the Line tool. Pressing the Spacebar while using the Line tool does not
change a line’s position on the canvas.
To resize a selected line, rectangle, or ellipse, do one of the following:
• Enter new width (W) or height (H) values in the Property inspector or the Info panel.
• Choose the Scale tool in the Select section of the Tools panel and drag a corner transform
handle. This resizes the object proportionally.
Note: You can also resize an object proportionally by choosing Modify > Transform > Scale and
dragging a corner transform handle, or by choosing Modify > Transform > Numeric Transform and
entering new dimensions. For more information on resizing and scaling objects, see “Transforming
and distorting selected objects and selections” on page 21.
• Drag a corner point on a rectangle.
Note: Note: Scaling a vector object does not change its stroke width.
Drawing basic rounded rectangles
You can draw rectangles with rounded corners by using the Rounded Rectangle tool, or by using
the Roundness option in the Property inspector to adjust the roundness of the corners of a
selected rectangle. The Rounded Rectangle tool draws rectangles as grouped objects. To
move rounded rectangle points independently, you must ungroup the rectangle or use the
Subselection tool.
To draw a rectangle with rounded corners:
1 Choose the Rounded Rectangle tool, located in the Rectangle tool pop-up menu.
2 Drag the canvas to draw the rectangle.
Tip: You can adjust the roundness of the corners as you draw by pressing any of the arrow keys or
the 1 or 2 number keys repeatedly.
56
Chapter 3: Working with Vector Objects
To round the corners of a selected rectangle:
• Enter a value from 0 to 100 in the Roundness box in the Property inspector and press Enter,
or drag the pop-up slider.
Note: If the Property inspector is at half height, click the expander arrow in the lower right corner to
expand it to full height.
Drawing basic polygons and stars
With the Polygon tool, you can draw any equilateral polygon or star, from a triangle to a polygon
or star with 360 sides.
To draw a polygon:
1 Choose the Polygon tool, which is one of the basic shape drawing tools in the Vector section
of the Tools panel.
2 In the Property inspector, do one of the following to specify the number of sides for
the polygon:
■ Use the Sides pop-up slider to choose 3 to 25 sides.
■ Enter a number from 3 to 360 in the Sides text box.
3 Drag to draw the polygon.
To constrain a polygon’s orientation to increments of 45°, hold down Shift as you draw. The
Polygon tool always draws from a center point.
To draw a star:
1 Choose the Polygon tool.
2 In the Property inspector, choose Star from the Shape pop-up menu.
3 In the Sides text box, enter the number of points for the star.
4 Choose Automatic or enter a value in the Angle text box. Values closer to 0 result in long, thin
points; values closer to 100 result in short, stubby points.
5 Drag the canvas to draw the star.
To constrain a star’s orientation to increments of 45°, hold down Shift as you drag. The
Polygon tool always draws from a center point.
Drawing Auto Shapes
Auto Shapes are intelligent vector object groups that adhere to specialized rules to simplify the
creation and editing of common visual elements. Auto Shape tools draw object groups. Unlike
other object groups, selected Auto Shapes have diamond-shaped control points in addition to the
object group handles. Each control point is associated with a particular visual property of the
shape. Dragging a control point alters only the associated visual property. Most Auto Shape
control points have tooltips that describe how they affect the Auto Shape. Move the pointer over
a control point to see a tooltip that describes the property governed by that control point.
Drawing vector objects
57
Auto Shape tools create shapes in preset orientations. For example, the Arrow tool draws arrows
horizontally. You can transform Auto Shapes to change their orientation. For more information,
see “Transforming and distorting selected objects and selections” on page 21.
Although each Auto Shape tool in the Tools panel uses the same easy drawing method, the
editable attributes for each Auto Shape are different.
Arrow draws object groups that appear as simple arrows of any proportions. Using control points,
you can adjust the arrowhead flare, the tail length and width, and the tip length.
draws object groups that appear as right-angled arrows of any proportions. Using
control points, you can adjust the arrowhead flare, the tail length and width, and the tip length.
Bent Arrow
Beveled Rectangle draws object groups that appear as rectangles with beveled corners. Using
control points, you can edit the amount of bevel for all corners together, or change the bevel of
individual corners.
Chamfer Rectangle draws object groups that appear as rectangles with chamfers, corners that are
rounded to the inside of the rectangle. You can edit the chamfer radius of all corners together, or
change the chamfer radius of individual corners.
Connector Line draws object groups that appear as three-segment connector lines, such as those
used to connect the elements of a flowchart or organizational chart. Using control points, you can
edit the end points for the first and third sections of the connector line, as well as the location of
the second section, which connects the first and last sections.
draws object groups that appear as filled rings. Using control points, you can adjust
the inner perimeter or split the shape into pieces.
Doughnut
draws object groups that appear as right-angled corner shapes. Using control points,
you can edit the length and width of the horizontal and vertical sections, as well as the curvature
of the corner.
L-Shape
Pie draws object groups that appear as pie charts. Using control points, you can split the shape
into pieces.
Smart Polygon draws object groups that appear as equilateral polygons with 3 to 25 sides.
Using control points, you can resize and rotate, add or remove segments, increase or decrease
the number of sides, or add an inner polygon to the shape.
Rounded Rectangle draws object groups that appear as rectangles with rounded corners. Using
control points, you can edit the roundness of all corners together, or change the roundness of
individual corners.
Spiral draws object groups that appear as open spirals. Using control points, you can edit the
number of spiral rotations, and you can determine whether the spiral is open or closed.
Star draws object groups that appear as stars with any number of points from 3 to 25. Using
control points, you can add or remove points, and adjust the inner and outer angles of the points.
To draw a Auto Shape using the Tools panel:
1 Choose a Auto Shape tool from its pop-up menu in the Vector section of the Tools panel.
2 Do one of the following:
■
■
58
Drag the canvas to draw the shape.
Click on the canvas to place the shape at its default size.
Chapter 3: Working with Vector Objects
Adjusting arrow Auto Shapes
Arrows have five control points. There are control points for adjusting the flare of the arrowhead,
the length of the arrow tail, the length of the arrowhead tip, and the width of the arrow tail.
To adjust the flare of an arrowhead:
• Drag the flare control point of a selected arrow.
To increase or decrease the sharpness of an arrowhead:
• Drag the tip control point of a selected arrow.
To lengthen or shorten an arrow tail:
• Drag the body length control point of a selected arrow.
To adjust the width of an arrow tail:
• Drag the body width control point of a selected arrow.
Adjusting bent arrow Auto Shapes
Bent arrows have five control points. There are control points for adjusting the flare of the
arrowhead, the length of the arrowhead tip, the length of the arrow tail, the width of the arrow
tail, and the roundness of the arrow’s bend.
To adjust the flare of the arrowhead of a bent arrow:
• Drag the arrowhead control point of a selected bent arrow.
To increase or decrease the sharpness of the arrowhead of a bent arrow:
• Drag the tip control point of a selected bent arrow.
To lengthen or shorten a bent arrow tail:
• Drag the handle length control point of a selected bent arrow.
To adjust the width of a bent arrow tail:
• Drag the handle width control point of a selected bent arrow.
To adjust the corner roundness of a bent arrow tail:
• Drag the corner radius control point of a selected arrow.
Adjusting beveled, chamfered, and rounded rectangle Auto Shapes
Beveled, chamfered, and rounded rectangles have five control points. The control point on each
corner adjusts all corners together. You can also Alt-drag (Windows) or Option-drag (Macintosh)
to edit a single corner. The remaining control point resizes the rectangle without changing the
roundness of the corner.
Note: To edit the corner radius of rectangles drawn with the Rectangle tool, use the Rectangle
Roundness setting in the Property inspector.
To adjust the corners of a beveled, chamfered, or rounded rectangle Auto Shape:
• Drag a corner control point of a selected shape.
Drawing vector objects
59
To adjust a single corner of a beveled, chamfered, or rounded rectangle Auto Shape:
• Alt-drag (Windows) or Option-drag (Macintosh) a corner control point of a selected shape.
To resize a beveled, chamfered, or rounded rectangle Auto Shape without affecting
the corners:
• Drag the drag-to-resize control point.
To convert the corners of a rectangle to a different type:
• Alt-click (Windows) or Option-click (Macintosh) any corner control point.
To convert a single corner to a different type:
• Shift-Alt-click (Windows) or Shift-Option-click (Macintosh) any corner control point.
Adjusting connector line Auto Shapes
Connector lines have five control points. There are control points for placing the start and end
points, for adjusting the position of the cross bar (the line that connects the start and end line
segments), and for adjusting the roundness of the corners.
To move the start or end point of a connector line:
• Drag the control point at the start or end of the connector line.
To reposition the cross bar of a connector line:
• Drag the horizontal position control point.
To adjust all corners of a selected connector line:
• Drag a corner control point.
To adjust a single corner of a selected connector line:
• Alt-drag (Windows) or Option-drag (Macintosh) a corner control point.
Adjusting doughnut Auto Shapes
Doughnut Auto Shapes initially have three control points. There are control points for adjusting
the inner perimeter, for setting the inner perimeter to zero, and for dividing the shape into slices
to resemble a pie chart. You can add as many sections as you want using control points. For each
new section, Fireworks adds a control point for resizing or splitting the new section.
To add sections to a selected doughnut:
• Alt-drag (Windows) or Option-drag (Macintosh) an add/divide sector control point on the
outer perimeter of the shape.
To remove a section from a selected doughnut:
• Drag the add/divide sector control point on the outer perimeter of the shape to define the
portion of the shape that you want to remain on the canvas.
To resize the inner radius of a selected doughnut:
• Drag the inner radius control point.
60
Chapter 3: Working with Vector Objects
To set the inner radius of a selected doughnut to zero:
• Click the reset radius control point.
Adjusting pie Auto Shapes
Pie Auto Shapes initially have three control points. There are control points for dividing the shape
into slices, adjusting slice size, and for resetting the pie to one slice. You can add as many sections
as you want using control points. For each new section, Fireworks adds a control point for
resizing or splitting the new section.
To add sections to a selected pie:
• Alt-drag (Windows) or Option-drag (Macintosh) a drag-to-segment control point on the outer
perimeter of the shape.
To resize a slice of a selected pie:
• Drag a drag-to-segment control point on the outer perimeter of the shape.
To reset the a selected pie to one slice:
• Click the Reset control point.
Adjusting L-shaped Auto Shapes
L-shapes have four control points. There are control points for adjusting the length and width of
each section of the L-shape, and for adjusting the roundness of the L-shape’s bend.
To change the length or width of a selected L-shape’s section:
• Drag one of the two length/width control points.
To adjust the roundness of the corners of a selected L-shape:
• Drag the corner radius control point.
Adjusting smart polygon Auto Shapes
Smart Polygons initially appear as pentagons with four control points. There are control points
for resizing and rotating, adding or removing polygon segments, increasing or decreasing the
number of polygon sides, and adding an inner polygon to the shape to create a ring.
To resize or rotate a selected smart polygon, do one of the following:
• Drag the scale/rotate control point.
• Alt-drag (Windows) or Option-drag (Macintosh) the scale/rotate control point to rotate only.
To add or remove sections from a selected smart polygon:
• Drag the sections control point.
To change the number of sides on a selected smart polygon:
• Drag the sides control point.
To split a selected smart polygon into segments.
• Alt-drag (Windows) or Option-drag (Macintosh) the sides control point.
Drawing vector objects
61
To resize the inner polygon of a smart polygon, do one of the following:
• If the polygon has an inner polygon, drag the inner polygon control point.
• If the polygon has no inner polygon, drag the reset inner polygon control point.
To reset the inner polygon of a selected smart polygon:
• Click the reset inner polygon control point.
Adjusting spiral Auto Shapes
Spirals have two control points. There are control points for adjusting the number of turns in the
spiral, and for making the spiral open or closed.
To adjust the number of turns in a selected spiral:
• Drag the spirals control point.
To open or close a selected spiral:
• Click the open/close spiral control point.
Adjusting star Auto Shapes
Stars initially have five control points. There are control points for adding or removing points, for
adjusting the inner and outer angles of the points, and for adjusting the roundness of the peaks
and valleys.
To change the number of sides on a selected star:
• Drag the Points control point.
To adjust the valleys of a selected star:
• Drag the valley control point.
To adjust the points of a selected star:
• Drag the peak control point.
To adjust the roundness of a selected star’s peaks or valleys:
• Drag a Roundness control point.
Using the Assets panel to add Auto Shapes to a drawing
The Assets panel contains a Shapes tab where you can find additional Auto Shapes. These Auto
Shapes are generally more complex than those that appear in the Tools panel. Instead of drawing
these Auto Shapes directly on the canvas, you place these Auto Shapes into your drawing by
dragging them from the Assets panel to the canvas.
To create a Auto Shape using the Assets panel:
1 Choose Window > Auto Shapes to display the Shapes tab, if it is not already visible.
2 Drag a Auto Shape preview from the Assets panel to the canvas.
3 If desired, edit the Auto Shape by dragging any of its control points.
62
Chapter 3: Working with Vector Objects
Adding new Auto Shapes to Fireworks
You can add new Auto Shapes to Fireworks using the Fireworks Exchange website. Some new
Auto Shapes will appear in the Shapes tab in the Assets panel, and others will appear in the Tools
menu, grouped with the other Auto Shapes.
You can also add new Auto Shapes to Fireworks by writing the JavaScript code for the Auto
Shapes yourself. For more information, see Extending Fireworks.
To add new Auto Shapes to Fireworks:
1 Choose Window > Auto Shapes to display the Shapes tab, if it is not already visible.
2 Choose Get More Auto Shapes from the Auto Shapes panel Options menu.
Fireworks connects to the web and navigates to the Fireworks Exchange website.
3 Follow the onscreen instructions to select new Auto Shapes and add them to Fireworks.
Drawing freeform paths
You can draw freeform vector paths with the Vector Path tool, much as you draw using a felt-tip
marker or crayon. The Vector Path tool is located in the Pen tool pop-up menu.
You can change the stroke and fill attributes of paths drawn with the Vector Path tool.
See Chapter 5, “Applying Color, Strokes, and Fills,” on page 97.
Using the Vector Path tool
The Vector Path tool has a wide variety of brush stroke categories, including Air Brush,
Calligraphy, Charcoal, Crayon, and Unnatural. Each category typically has a choice of strokes,
such as Light Marker and Dark Marker, Splattered Oil, Bamboo, Ribbon, Confetti, 3D,
Toothpaste, and Viscous Alien Paint.
Although the strokes may look like paint or ink, each has the points and paths of a vector object.
That means that you can change the shape of the stroke using any of several vector-editing
techniques. After you reshape the path, the stroke is redrawn.
A painting edited by moving vector points
Drawing vector objects
63
You can also modify existing brush strokes and add fills to selected objects you have drawn with
the Vector Path tool. The new stroke and fill settings are retained for subsequent use of the Vector
Path tool in the current document.
To draw a freeform vector path:
1 Choose the Vector Path tool, located in the Pen tool pop-up menu.
2 If desired, set stroke and fill attributes in the Property inspector. See Chapter 5, “Applying
Color, Strokes, and Fills,” on page 97.
3 Drag to draw. To constrain the path to a horizontal or vertical line, hold down Shift while
dragging.
4 Release the mouse button to end the path. To close the path, release the mouse button when
you return the pointer to the point at the beginning of the path.
Drawing paths by plotting points
One way to draw and edit vector objects in Fireworks is to plot points as if drawing a
connect-the-dots picture. When you click each point with the Pen tool, Fireworks automatically
draws the path of the vector object from the last point you clicked.
In addition to connecting the points with only straight segments, the Pen tool can draw smooth,
mathematically derived curve segments known as Bézier curves. Each point’s type—corner point
or curve point—determines whether the adjacent curves are straight lines or curves.
You can modify straight and curved path segments by dragging their points. You can further
modify curved path segments by dragging their point handles. You can also convert straight path
segments to curved (and vice versa) by converting their points.
Drawing straight path segments
Drawing straight line segments with the Pen tool is a simple matter of clicking to place the points.
Each click with the Pen tool plots a corner point.
64
Chapter 3: Working with Vector Objects
To draw a path with straight line segments:
1 Choose the Pen tool.
2 If desired, choose Edit > Preferences and enable any of the following options on the Editing tab
of the Preferences dialog box, then click OK:
Show Pen Preview previews the line segment that would result from the next click.
Show Solid Points shows solid points while you draw.
Note: On Mac OS X, choose Fireworks > Preferences to open the Preferences dialog box.
3 Click on the canvas to place the first corner point.
4 Move the pointer and click to place the next point. A straight line segment joins the two points.
5 Continue plotting points. Straight segments bridge each gap between points.
6 Do one of the following to end the path, either open or closed:
■
■
Double-click the last point to end the path as an open path.
Choose another tool to end the path as an open path.
Note: When you choose any selection tool or vector tool other than the Text tool and then return
to the Pen tool, Fireworks resumes drawing the object at your next click.
■
To close the path, click the first point you plotted. The beginning and end points of a closed
path are the same.
Note: Loops formed by a path overlapping itself are not closed paths. Only paths that begin and
end on the same point are closed paths.
Drawing curved path segments
To draw curved path segments, you click and drag as you plot points. As you draw, the current
point shows point handles. Whether drawn with the Pen tool or with another Fireworks drawing
tool, all points on all vector objects have point handles. These handles are visible only on curve
points, however.
Drawing vector objects
65
To draw an object with curved segments:
1 Choose the Pen tool.
2 Click to place the first corner point.
3 Move to the location of the next point, then click and drag to produce a curve point. Each time
you click and drag, Fireworks extends the line segment to the new point.
4 Continue plotting points. If you click and drag a new point, you produce a curve point; if you
just click, you produce a corner point.
Tip: You can temporarily switch to the Subselection tool to change the location of points and the
shape of curves as you draw. Press Control (Windows) or Command (Macintosh) while dragging a
point or point handle with the Pen tool.
5 Do one of the following to end the path, either open or closed:
■
■
■
Double-click the last point to end the path as an open path.
Choose another tool to end the path as an open path. When you choose certain tools and
then return to the Pen tool, Fireworks resumes drawing the object at your next click.
To close a path, click the first point you plotted. The beginning and end points of a closed
path are the same.
Adjusting the shape of a straight path segment
You can lengthen, shorten, or change the position of a straight path segment by moving its points.
To change a straight path segment:
1 Select the path with the Pointer or Subselection tool.
2 Click a point with the Subselection tool to select it.
Selected corner points appear as solid blue squares.
3 Drag the point or use the arrow keys to move the point to a new location.
66
Chapter 3: Working with Vector Objects
Adjusting the shape of a curved path segment
You can change the shape of a vector object by dragging its point handles with the Subselection
tool. The point handles determine the degree of curvature between fixed points. These curves are
known as Bézier curves.
To edit the Bézier curve of a path segment:
1 Select the path with the Pointer or Subselection tool.
2 Click a curve point with the Subselection tool to select it.
A selected curve point appears as a solid blue square. The point handles extend from the point.
3 Drag the handles to a new location. To constrain handle movement to 45° angles, press Shift
while dragging.
The blue path preview shows where the new path will be drawn if you release the
mouse button.
Point handles
Subselection pointer
Path preview
Path
Selected point
For example, if you drag the left point handle downward, the right point handle goes up.
Alt-drag a handle to move it independently
Drawing vector objects
67
Converting path segments to straight or curved
Straight path segments are intersected by corner points. Curved path segments contain
curve points.
You can convert a straight segment to a curved segment and vice versa by converting its point.
To convert a corner point to a curve point:
1 Choose the Pen tool.
2 Click a corner point on a selected path and drag away from it.
The handles extend, curving the adjacent segments.
Note: To edit the point’s handles, choose the Subselection tool or press Control (Windows) or
Command (Mac) while the Pen tool is active.
68
Chapter 3: Working with Vector Objects
To convert a curve point to a corner point:
1 Choose the Pen tool.
2 Click a curve point on a selected path.
The handles retract, and the adjacent segments straighten.
Selecting points
The Subselection tool allows you to select multiple points. Before selecting a point with the
Subselection tool, you must select the path using the Pointer or Subselection tool or by clicking its
thumbnail in the Layers panel.
To select specific points on a selected path:
1 Choose the Subselection tool.
2 Do one of the following:
■
Click a point, or hold down Shift and click multiple points one by one.
■
Drag around the points to be selected.
To display a curve point’s handles:
• Click the point with the Subselection tool. If either point nearest the clicked point is a curve
point, the near handle is also displayed.
Drawing vector objects
69
Moving points and point handles
You can change an object’s shape by dragging its points and point handles with the
Subselection tool.
To move a point:
• Drag it with the Subselection tool.
Fireworks redraws the path to reflect the point’s new position.
To change the shape of a path segment:
• Drag a point handle with the Subselection tool. Alt-drag (Windows) or Option-drag
(Macintosh) to drag one handle at a time.
To adjust the handle of a corner point:
1 Choose the Subselection tool.
2 Select a corner point.
3 Alt-drag (Windows) or Option-drag (Macintosh) the point to display its handle and bend the
adjacent segment.
Dragging a corner point handle with the Subselection tool to edit the adjacent path segment
Inserting and deleting points on a path
You can add points to a path and delete points from a path. Adding points to a path gives you
control over a specific segment within the path. Deleting points from the path reshapes it or
simplifies editing.
To insert a point on a selected path:
• Using the Pen tool, click anywhere on the path where there is not a point.
To delete a point from a selected path segment, do one of the following:
• Click a corner point on a selected object with the Pen tool.
• Double-click a curve point on a selected object with the Pen tool.
• Select a point with the Subselection tool and press Delete or Backspace.
70
Chapter 3: Working with Vector Objects
Continuing an existing path
You can use the Pen tool to continue drawing an existing open path.
To resume drawing an existing open path:
1 Choose the Pen tool.
2 Click the end point and continue the path.
The Pen tool pointer changes to indicate that you are adding to a path.
Merging two open paths
You can connect two open paths to form one continuous path. When you connect two paths, the
topmost path’s stroke, fill, and effect attributes become the attributes of the newly merged path.
To merge two open paths:
1 Choose the Pen tool.
2 Click the end point of one of the paths.
3 Move the pointer to the end point of the other path and click.
Auto-joining similar open paths
You can easily join one open path with another that has similar stroke and fill characteristics.
To auto-join two open paths:
1 Select an open path.
2 Choose the Subselection tool and drag an end point of the path within a few pixels of the end
point of the similar path.
The end point snaps to the other path, and the two become a single path.
Editing paths
Fireworks offers several methods for editing vector objects. You can change an object’s shape by
moving, adding, or deleting points, or you can move point handles to change the shape of
adjacent path segments. Freeform tools let you alter the shape of objects by editing paths directly.
You can also use path operations to create new shapes by combining or altering existing paths.
Editing with vector tools
In addition to dragging points and point handles, you can use several Fireworks tools to edit
vector objects directly.
Editing paths
71
Bending and reshaping vector objects
The Freeform tool allows you to bend and reshape vector objects directly instead of manipulating
points. You can push or pull any part of a path, regardless of where the points are located.
Fireworks automatically adds, moves, or deletes points along the path as you change the vector
object’s shape.
Specified length
Freeform tool pulling a path segment
Freeform tool pushing a path segment
As you move the pointer over a selected path, it changes to the push or pull pointer, depending on
its location relative to the selected path.
Pointer
Meaning
The Freeform tool is in use.
The Freeform tool is in use, and the pull pointer is in position to pull the selected path.
The Freeform tool is in use, and the pull pointer is pulling the selected path.
The Freeform tool is in use, and the push pointer is active.
The Reshape Area tool is in use, and the reshape area pointer is active. The area from
the inner circle to the outer circle represents reduced strength.
When the pointer is directly over the path, you can pull the path. When the pointer is not directly
over the path, you can push the path. You can change the size of the push or pull pointer.
Note: The Freeform tool also responds to pressure from a Wacom or other compatible tablet.
72
Chapter 3: Working with Vector Objects
To pull a selected path:
1 Choose the Freeform tool.
2 Move the pointer directly over the selected path.
The pointer changes to the pull pointer.
3 Drag the path.
To push a selected path:
1 Choose the Freeform tool.
The pointer changes to the push or pull pointer.
2 Point slightly away from the path.
3 Drag toward the path to push it. Nudge the selected path to reshape it.
To change the size of the push pointer, do one of the following:
• While holding down the mouse button, press the Right Arrow key or 2 to increase the width of
•
•
the pointer.
While holding down the mouse button, press the Left Arrow key or 1 to decrease the width of
the pointer.
To set the size of the pointer and set the length of the path segment that it affects, deselect all
objects in the document, and then enter a value from 1 to 500 in the Size text box of the
Property inspector. The value indicates the size of the pointer in pixels.
Distorting paths
You can use the Reshape Area tool to pull the area of all selected paths within the outer circle of
the reshape area pointer.
The pointer’s inner circle is the boundary of the tool at full strength. The area between the inner
and outer circle reshapes paths at less than full strength. The pointer’s outer circle determines the
gravitational pull of the pointer. You can set its strength.
Note: The Reshape Area tool also responds to pressure from a Wacom or other compatible tablet.
Editing paths
73
To distort selected paths:
1 Choose the Reshape Area tool, located in the Freeform tool pop-up menu.
2 Drag across the paths to redraw them.
To change the size of the reshape area pointer, do one of the following:
• While holding down the mouse button, press the Right Arrow key or 2 to increase the width of
the pointer.
• While holding down the mouse button, press the Left Arrow key or 1 to decrease the width of
the pointer.
• To set the size of the pointer and set the length of the path segment that it affects, deselect all
objects in the document, and then enter a value from 1 to 500 in the Size text box of the
Property inspector. The value indicates the size of the pointer in pixels.
To set the strength of the inner circle of the reshape area pointer:
• Enter a value from 1 to 100 in the Strength text box of the Property inspector. The value
indicates the percentage of the pointer’s potential strength. The higher the percentage, the
greater the strength.
Redrawing paths
You can use the Redraw Path tool to redraw or extend a segment of a selected path while retaining
the path’s stroke, fill, and effect characteristics.
To redraw or extend a segment of a selected path:
1 Choose the Redraw Path tool, located in the Pen tool pop-up menu.
2 Move the pointer directly over the path.
The pointer changes to the redraw path pointer.
3 Drag to redraw or extend a path segment. The portion of the path to be redrawn is
highlighted in red.
4 Release the mouse button.
Changing a path’s appearance by varying pressure and speed
You can change the appearance of a path using the Path Scrubber tools. Using varying pressure or
speed, you can change a path’s stroke properties. These properties include stroke size, angle, ink
amount, scatter, hue, lightness, and saturation. You can specify which of these properties is
affected by the Path Scrubber tools using the Sensitivity tab of the Edit Stroke dialog box. You can
also specify how much pressure and speed affects these properties. For details on setting options in
the Edit Stroke dialog box, see “Working with strokes” on page 106.
74
Chapter 3: Working with Vector Objects
Cutting paths into multiple objects
The Knife tool allows you to slice a path into two or more paths.
To cut a selected path:
1 Choose the Knife tool.
Note: Using the eraser on Wacom pens automatically selects the Knife tool.
2 Do one of the following:
Drag the pointer across the path.
Click on the path.
3 Deselect the path.
■
■
Editing with path operations
You can use path operations in the Modify menu to create new shapes by combining or altering
existing paths. For some path operations, the stacking order of selected path objects defines how
the operation works. For information on arranging the stacking order of selected objects, see
“Stacking objects” on page 26.
Note: Using a path operation removes all pressure and speed information from the affected paths.
Combining path objects
You can combine path objects into a single path object. You can connect the end points of
two open paths to create a single closed path, or you can join multiple paths to create a
composite path.
To create one continuous path from two open paths:
1 Choose the Subselection tool.
2 Select two end points on two open paths.
3 Choose Modify > Combine Paths > Join.
To create a composite path:
1 Select two or more open or closed paths.
2 Choose Modify > Combine Paths > Join.
To break apart a composite path:
1 Select the composite path.
2 Choose Modify > Combine Paths > Split.
Editing paths
75
To combine selected closed paths as one path enclosing the entire area of the
original paths:
• Choose Modify > Combine Paths > Union. The resulting path assumes the stroke and fill
attributes of the object that is placed farthest back.
Creating an object from the intersection of other objects
Using the Intersect command, you can create an object from the intersection of two or more
objects.
To create a closed path that encloses the area common to all selected closed paths:
• Choose Modify > Combine Paths > Intersect. The resulting path assumes the stroke and fill
attributes of the object that is placed farthest back.
Removing portions of a path object
You can remove portions of a selected path object as defined by the overlapping portions of
another selected path object arranged in front of it.
To remove portions of a path object:
1 Select the path object that defines the area to be removed.
2 Choose Modify > Arrange > Bring to Front.
3 Hold down Shift and add to the selection the path object from which the portions are to
be removed.
4 Choose Modify > Combine Paths > Punch.
Stroke and fill attributes remain unchanged.
76
Chapter 3: Working with Vector Objects
Cropping a path
You can crop a path using the shape of another path. The front or topmost path defines the shape
of the cropped area.
To crop a selected path:
1 Select the path object that defines the area to be cropped.
2 Choose Modify > Arrange > Bring to Front.
3 Hold down Shift and add to the selection the path object to be cropped.
4 Choose Modify > Combine Paths > Crop.
The resulting path object retains the stroke and fill attributes of the object that is placed
farthest back.
Simplifying a path
You can remove points from a path while maintaining its overall shape. The Simplify command
removes redundant points on your path by an amount you specify.
You might want to use Simplify if you have a straight line that contains more than two points,
for example. (Only two points are necessary to produce a straight line.) Or perhaps your path
contains points that lie exactly on top of one another. Simplify removes points that are
unnecessary to reproduce the path you’ve drawn.
To simplify a selected path:
1 Choose Modify > Alter Path > Simplify.
The Simplify dialog box appears.
2 Enter a simplification amount and click OK.
As you increase the amount of simplification, you increase the degree to which Fireworks can
alter the path to reduce the number of points on that path.
Editing paths
77
Expanding a stroke
You can convert the stroke of a selected path into a closed path. The resulting path creates the
illusion of a path with no fill and a stroke that takes on the same attributes as the original
object’s fill.
Note: Expanding the stroke of a path that intersects itself can produce interesting results. If the
original path contains a fill, the intersecting portions of the path will not contain a fill after the stroke
is expanded.
To expand a selected object’s stroke:
1 Choose Modify > Alter Path > Expand Stroke to open the Expand Stroke dialog box.
2 Set the width of the resulting closed path.
3 Specify a corner type: miter, round, or beveled.
4 If you chose miter, set the miter limit, the point at which a miter corner automatically becomes
a beveled corner. The miter limit is the ratio of miter corner length to stroke width.
5 Choose an end cap option: butt, square, or round. Then click OK.
A closed path in the shape of the original and with the same stroke and fill attributes replaces
the original path.
Contracting or expanding a path
You can contract or expand the path of a selected object by a specific number of pixels.
To expand or contract a selected path:
1 Choose Modify > Alter Path > Inset Path to open the Inset Path dialog box.
2 Choose a direction to contract or expand the path:
contracts the path.
expands the path.
Set the width between the original path and the contracting or expanding path.
Specify a corner type: miter, round, or beveled.
If you chose miter, set the miter limit, the point at which a miter corner automatically becomes
a beveled corner. The miter limit is the ratio of miter corner length to stroke width.
Click OK.
A smaller or larger path object with the same stroke and fill attributes replaces the original
path object.
Inside
Outside
3
4
5
6
78
Chapter 3: Working with Vector Objects
CHAPTER 4
Using Text
Macromedia Fireworks MX 2004 has many text features typically reserved for sophisticated
desktop publishing applications. You can create text in a variety of fonts and sizes and adjust
kerning, spacing, color, leading, baseline shift, and more. Combining Fireworks text-editing
features with the wide range of strokes, fills, effects, and styles makes text a lively element of your
graphic designs. You can also use the Fireworks spell-checker to correct misspellings.
The capability to edit text anytime—even after you apply Live Effects such as drop shadows and
bevels—means you can easily make changes to text. You can also copy objects that include text
and change the text for each copy. Vertical text, transformed text, text attached to paths, and text
converted to paths and images extend the design possibilities.
You can import text while retaining rich text format attributes. Also, when you import a
Photoshop document containing text, the text remains editable. Fireworks handles missing
fonts upon import by asking you to choose a substitute font or allowing you to import text as
a static image.
Entering text
You can enter, format, and edit text in your graphics using the Text tool and the options in the
Property inspector.
Text tool
Note: If the Property inspector is minimized, click the expander arrow in the lower right corner to see
all text properties.
The Property inspector when the Text tool is selected
79
Creating text blocks
All text in a Fireworks document appears inside a rectangle with handles called a text block.
To enter text:
1 Choose the Text tool.
The Property inspector displays options for the Text tool.
2 Choose color, font, size, spacing, and other text characteristics.
3 Do one of the following:
Click in your document where you want the text block to begin. This creates an auto-sizing
text block.
■ Drag to draw a text block. This creates a fixed-width text block.
For information on the different types of text blocks, see “Using auto-sizing and fixed-width
text blocks” on page 81.
4 Type your text. To enter a paragraph break, press Enter.
5 If desired, highlight text within the text block after you type it and reformat it.
6 When you have finished entering text, do one of the following:
■ Click outside the text block.
■ Choose another tool in the Tools panel.
■ Press Escape.
■
Moving text blocks
You can select a text block and move it anywhere in your document, as you would any other
object. You can also move text blocks as you drag to create them.
To move a text block:
• Drag it to the new location.
To move a text block while you drag to create it:
1 While holding down the mouse button, press and hold down the Spacebar, then drag the text
block to another location on the canvas.
2 Release the Spacebar to continue drawing the text block.
80
Chapter 4: Using Text
Using auto-sizing and fixed-width text blocks
Fireworks has both auto-sizing text blocks and fixed-width text blocks. An auto-sizing text block
expands horizontally as you type. If you remove text, the auto-sizing text block shrinks to
accommodate only the remaining text. Auto-sizing text blocks are created by default when you
click on the canvas with the Text tool and start typing.
Fixed-width text blocks allow you to control the width of wrapped text. Fixed-width text blocks
are created by default when you drag to draw a text block using the Text tool.
When the text pointer is active within a text block, a hollow circle or hollow square appears in the
upper right corner of the text block. The circle indicates an auto-sizing text block; the square
indicates a fixed-width text block. Double-click the corner to change from one kind of text block
to the other.
Fixed-width indicator
Auto-sizing indicator
A fixed-width text block and an auto-sizing text block
To change a text block to fixed-width or auto-sizing:
1 Double-click inside the text block.
2 Double-click the circle or square in the upper right corner of the text block.
The text block changes to the other type.
To change a selected text block to fixed-width by resizing it:
• Drag a resize handle.
This automatically changes the text block from auto-sizing to fixed-width.
Editing text
Within a text block, you can vary all aspects of text, including size, font, spacing, leading,
and baseline shift. When you edit text, Fireworks redraws its stroke, fill, and effect
attributes accordingly.
You can change a text block’s attributes using the Property inspector. If the Property inspector is
minimized, click the expander arrow in the lower right corner to see all text properties.
Property inspector when a text block is selected
Editing text
81
You can also use the Text Editor and the commands in the Text menu to edit text, but the
Property inspector offers the quickest way to change text attributes and provides more detailed
editing control than the other two options. For more information about the Text Editor, see
“Using the Text Editor” on page 95.
Note: Changes you make during a text-editing session constitute only one Undo. Choosing Edit >
Undo while editing text will undo every text edit you’ve made from the time you double-clicked the
text block to edit its contents.
To edit text:
1 Select the text you want to change:
Click a text block with the Pointer or Subselection tool to select the entire block. To select
multiple blocks simultaneously, hold down Shift as you select each block.
■ Double-click a text block with the Pointer or Subselection tool, and highlight a range
of text.
■ Click inside a text block with the Text tool, and highlight a range of text.
2 Make your changes.
For information about changing text attributes, see “Choosing a font, size, and text style”
on page 82, “Applying text color” on page 82, “Setting kerning” on page 84, “Setting leading”
on page 85, “Setting text orientation” on page 85, “Setting text alignment” on page 86, and
“Indenting text” on page 87.
3 Do one of the following to apply your changes:
■ Click outside the text block.
■ Choose another tool in the Tools panel.
■ Press Escape.
■
Choosing a font, size, and text style
You use the Property inspector to change the font, size, and style attributes of the text in a
text block.
To change the font, size, and style of selected text using the Property inspector:
1 To change the font, choose a font from the Font pop-up menu.
2 To change the font size, drag the Font Size pop-up slider or enter a value in the text box. Font
size is measured in points.
3 To apply a bold, italic, or underline style, click the corresponding style button.
Applying text color
Text color is controlled by the Fill Color box. By default, text is black and has no stroke. You can
change the color of all text in a selected text block or of highlighted text in a text block. The Text
tool retains the current text color from text block to text block.
82
Chapter 4: Using Text
The Text tool retains the current text color independently of the fill color of other tools. When
you use another tool after using the Text tool, the fill and stroke settings revert to the most recent
settings from before the Text tool was used. Likewise, when you return to the Text tool, the fill
color reverts to the most recent Text tool setting, and the stroke is reset to None. Fireworks
retains the current Text tool color as you switch from document to document or close and
reopen Fireworks.
You can add a stroke and Live Effects to all text in a selected text block, but not to highlighted
text in a text block. Fireworks updates stroke characteristics and Live Effects applied to a text
block as you edit text in the text block, but the Text tool does not retain stroke characteristics or
Live Effects if you create a new text block. For more information, see “Applying strokes, fills, and
effects to text” on page 89.
Applying color to all text in selected text blocks
You can apply text color to all text in selected text blocks using the Property inspector, any Fill
Color box, or the Eyedropper tool. You can also use any of these methods to set the text color for
the Text tool.
To set the color of all text in a selected text block, do one of the following:
• Click the Fill Color box in the Property inspector and choose a color from the color pop-up
window, or sample a color from anywhere on the screen using the eyedropper pointer while
either color pop-up window is open.
Fill Color box
Stroke Color box
Fill Color pop-up
window
Fill Color box in the Property inspector
• Click the Fill Color box in the Tools panel and choose a color from the color pop-up window,
•
or sample a color from anywhere on the screen using the eyedropper pointer while the Fill
Color box pop-up window is open.
Click the icon next to the Fill Color box in the Tools panel, choose the Eyedropper tool, and
then click to sample a color anywhere in any open document.
Editing text
83
The color of the Fill Color box in the Tools panel changes to reflect the color you sample
with either the eyedropper pointer or the Eyedropper tool, and the color of the selected text
also changes.
Applying color to highlighted text in a text block
You can change the text color of highlighted text in a text block using the Property inspector or
any Fill Color box. You cannot use the Eyedropper tool to edit the color of highlighted text.
Note: If you attempt to apply a stroke or Live Effect to highlighted text in a text block, the entire text
block is automatically selected.
To apply text color only to highlighted text in a text block, do one of the following:
• Click the Fill Color box in the Property inspector and choose a color from the color pop-up
•
window, or sample a color from anywhere on the screen using the eyedropper pointer while the
Fill Color box pop-up window is open.
Click the Fill Color box in the Tools panel and choose a color from the color pop-up window,
or sample a color from anywhere on the screen using the eyedropper pointer while the Fill
Color box pop-up window is open.
Setting kerning
Kerning increases or decreases the spacing between certain pairs of letters to improve their
appearance. Most fonts include information that automatically reduces the amount of space
between certain letter pairs, such as “TA” or “Va.” Fireworks auto-kerning uses a font’s kerning
information when displaying text, but you may want to turn it off at smaller point sizes, or when
the text has no anti-aliasing. Kerning is measured as a percentage.
You can use the Property inspector or the keyboard to set kerning.
To disable automatic kerning:
• In the Property inspector, deselect Auto Kern. If the Property inspector is minimized, click the
expander arrow in the lower right corner to see all properties.
To set kerning:
1 Do one of the following to select the text you want to kern:
Click between two characters with the Text tool.
Use the Text tool to highlight the characters you want to change.
■ Use the Pointer tool to select an entire text block. Shift-click to select multiple text blocks.
2 Do one of the following:
■ In the Property inspector, drag the Kerning pop-up slider or enter a percentage in the
text box.
■
■
Kerning percentage
Kerning pop-up slider
84
Chapter 4: Using Text
■
Zero represents normal kerning. Positive values move letters farther apart. Negative values
move letters closer together.
Hold down Control (Windows) or Command (Macintosh) while pressing the Left Arrow or
Right Arrow keys on the keyboard.
The Left Arrow key increases the space between letters by 1%, and the Right Arrow key
moves letters closer together by 1%.
Tip: Hold down Shift and Control (Windows) or Shift and Command (Macintosh) while pressing
the Left Arrow or Right Arrow keys to adjust kerning by 10% increments.
Setting leading
Leading determines the distance between adjacent lines in a paragraph. Leading can be measured
in pixels or as a percentage of the distance, in points, separating the lines baseline to baseline.
You can use the Property inspector or the keyboard to set leading.
Leading options in the Property inspector
To set the leading of selected text in the Property inspector:
1 In the Property inspector, drag the Leading pop-up slider or enter a value in the text box. The
default is 100%.
2 To change the leading unit type, choose % or px (pixels) from the Leading Units pop-up menu.
To set the leading of selected text using the keyboard:
• Hold down Control (Windows) or Command (Macintosh) while pressing the Up Arrow or
Down Arrow keys.
The Up Arrow key increases the space between lines, and the Down Arrow key moves lines
closer together.
Tip: Hold down Shift and Control (Windows) or Shift and Command (Macintosh) while pressing
the Up Arrow or Down Arrow keys to adjust leading by increments of 10.
Setting text orientation
A text block can be oriented horizontally or vertically. By default, text is oriented horizontally.
Horizontal and vertical orientation
Editing text
85
Text can also flow right to left or left to right.
Text flowing right to left and left to right
In Fireworks, you set horizontal and vertical orientation as well as the direction of text flow in the
Property inspector. These settings apply to entire text blocks only.
To set the orientation of a selected text block:
1 Click the Text Orientation button in the Property inspector.
2 Select an orientation option from the pop-up menu:
Horizontal Left to Right is the default setting for text in Fireworks for most languages. It
orients text horizontally and displays characters from left to right.
Horizontal Right to Left orients text horizontally and displays characters from right to left.
It is useful for displaying text in languages where text flows from right to left, such as Hebrew
or Arabic.
Vertical Left to Right orients text vertically. If you apply this to lines of text separated by hard
or soft returns, each line of text is displayed as a column. The columns flow from left to right.
Vertical Right to Left orients text vertically. Multiple lines of text separated by returns are
displayed as columns that flow from right to left. This option is useful for displaying text in
languages such as Japanese in which text flows from right to left in columns.
Note: Vertical text characters always flow from top to bottom. Choosing one of the Vertical
orientation options affects only the order of text columns, not the order of text characters.
Setting text alignment
Alignment determines the position of a paragraph of text relative to the edges of its text block. In
horizontal alignment, text is aligned relative to the left and right edges of a text block. In vertical
alignment, text is aligned relative to the top and bottom edges of a text block. For more
information on setting horizontal or vertical text orientation, see “Setting text orientation”
on page 85.
You can align horizontal text to the left or right edges of the text block, center it, or fully justify it,
so that text aligns to both the left and right edges. By default, horizontal text is left-aligned.
Vertical text can be aligned to the top or bottom of a text block, centered within the text block, or
fully justified between both the top and bottom edges.
To achieve a stretched effect, or to fit text into a specific space, you can set the alignment
to stretch the text horizontally (for horizontally oriented text) or vertically (for vertically
oriented text).
Horizontal text stretched to fill a text block
86
Chapter 4: Using Text
The alignment controls appear in the Property inspector when text is highlighted or a text block
is selected.
Text alignment options in the Property inspector
To set text alignment:
1 Select the text.
2 Click an alignment button in the Property inspector.
Indenting text
You can indent the first line of a paragraph using the Property inspector. Indention is measured
in pixels.
Paragraph indent option in the Property inspector
If the Property inspector is minimized, click the expander arrow in the lower right corner to see
all properties.
To indent the first line of selected paragraphs:
• In the Property inspector, drag the Paragraph Indent pop-up slider or enter a value in the
text box.
Setting paragraph spacing
You can specify the amount of spacing you want before and after paragraphs using the Property
inspector. Paragraph spacing is measured in pixels.
Paragraph spacing options in the Property inspector
If the Property inspector is minimized, click the expander arrow in the lower right corner to see
all properties.
To set the space that precedes selected paragraphs:
• In the Property inspector, drag the Space Preceding Paragraph pop-up slider or enter a value in
the text box.
To set the space after selected paragraphs:
• In the Property inspector, drag the Space After Paragraph pop-up slider or enter a value in the
text box.
Editing text
87
Smoothing text edges
To smooth out a text edge, you anti-alias it. This makes the edges of the text blend into the
background so that the text is cleaner and more readable when it is large.
Original text; after smoothing
You use the Property inspector to set anti-aliasing. If the Property inspector is minimized, click
the expander arrow in the lower right corner to see all properties. Anti-aliasing applies to all
characters in a given text block.
No Anti-Alias disables
text smoothing.
Crisp Anti-Alias creates
a sharp transition between the edges of the text and the background.
Strong Anti-Alias creates a very abrupt transition between the edges of the text and the
background, preserving the shapes of the text characters and enhancing detailed areas of
the characters.
Smooth Anti-Alias creates
System Anti-Alias uses
a soft transition between the edges of the text and the background.
the text smoothing method provided by Windows XP or Mac OS X.
Custom Anti-Alias provides
the following expert-level controls over anti-aliasing:
determines the amount of detail used for creating the transition between the
text edges and the background.
Sharpness determines the smoothness of the transition between the text edges and
the background.
Strength determines how much the text edges blend into the background.
Oversampling
To apply an anti-aliased edge to selected text:
• In the Property inspector, choose one of options from the Anti-Aliasing pop-up menu:
Note: When you open vector files, such as FreeHand files, in Fireworks, text is anti-aliased. You can
edit this attribute using the Property inspector.For more information, see Fireworks Help.
Expanding and contracting character width
You can expand or contract the character width of horizontal text using the Horizontal Scale
option in the Property inspector.
Horizontal scale is measured in percentage values. 100% is the default.
Horizontal Scale option in the Property inspector
If the Property inspector is minimized, click the expander arrow in the lower right corner to see
all properties.
88
Chapter 4: Using Text
To expand or contract selected characters:
• In the Property inspector, drag the Horizontal Scale pop-up slider or enter a value in the text
box. Drag the slider higher than 100% to expand the width or height of the characters, and
drag it lower to reduce their width or height.
Setting baseline shift
Baseline shift determines how closely text sits above or below its natural baseline. If there is no
baseline shift, the text sits on the baseline. You can use baseline shift to create subscript and
superscript characters.
The baseline shift controls are in the Property inspector. Baseline shift is measured in pixels.
Baseline Shift option in the Property inspector
To set baseline shift for selected text:
• In the Property inspector, drag the Baseline Shift pop-up slider or enter a value in the text box
to specify how low or high, respectively, Fireworks should place the subscript or superscript
text. Enter positive values to create superscript characters. Enter negative values to create
subscript characters.
Applying strokes, fills, and effects to text
You can apply strokes, fills, and effects to text in a selected text block as you would to any other
object. You can apply any style in the Styles panel to text, even if it is not a text style. You can also
create a new style by saving text attributes.
After you create text, it remains editable in Fireworks. Strokes, fills, effects, and styles are updated
automatically as you edit the text.
Text with stroke, fill, effect, and style applied
You can apply solid text color to highlighted text in a text block. However, stroke attributes, Live
Effects, and nonsolid fill attributes such as gradient fills are applied to all text in a selected text
block, not just to the highlighted text.
For more information about strokes and fills, see Chapter 5, “Applying Color, Strokes, and Fills,”
on page 97. For more information about using styles, see “Using styles” on page 155. For
information about Live Effects, see “Applying Live Effects” on page 120.
The Text tool does not retain stroke or Live Effect settings when you create a new text block.
However, you can save stroke, fill, and Live Effects attributes that you apply to text for reuse as a
style in the Styles panel. Saving text attributes as a style saves only the attributes, not the text itself.
Applying strokes, fills, and effects to text
89
To save text attributes as a style:
1 Create a text object and apply the attributes you want.
2 Select the text object.
3 Choose New Style from the Styles panel Options menu.
4 Choose the properties for the new style and name it.
5 Click OK.
Attaching text to a path
To free text from the restrictions of rectangular text blocks, you can draw a path and attach text to
it. The text flows along the shape of the path and remains editable.
A path to which you attach text temporarily loses its stroke, fill, and effect attributes. Any stroke,
fill, and effect attributes you apply subsequently are applied to the text, not the path. If you then
detach the text from the path, the path regains its stroke, fill, and effect attributes.
Note: Attaching text that contains hard or soft returns to a path can produce unexpected results.
If text attached to an open path exceeds the length of the path, the remaining text returns and
repeats the shape of the path.
Text on a path that returns and repeats the path shape
To place text on a path:
1 Shift-select a text block and a path.
2 Choose Text > Attach to Path.
To detach text from a selected path:
• Choose Text > Detach from Path.
Editing paths and text attached to paths
Text that you have attached to a path remains editable. In addition, you can edit the shape of
the path.
To edit text attached to a path, do one of the following:
• Double-click the text-on-a-path object with the Pointer or the Subselection tool.
• Choose the Text tool and select the text to edit.
90
Chapter 4: Using Text
To edit the shape of the path:
1 Choose Text > Detach from Path.
2 Edit the path.
3 Place the text back on the path.
Changing text orientation and direction on a path
The order in which you draw a path establishes the direction of the text attached to it.
For example, if you draw a path from right to left, the attached text appears backward and
upside down.
Text attached to a path drawn right to left
You can change the orientation or reverse the direction of the text attached to a path. You can also
change the starting point of text on a path.
To change the orientation of text on a selected path:
• Choose Text > Orientation and select an orientation.
Text rotated around a path
Text oriented vertically on a path
Text skewed vertically around a path
Text skewed horizontally around a path
To reverse the direction of text on a selected path:
• Choose Text > Reverse Direction.
Attaching text to a path
91
To move the starting point of text attached to a path:
1 Select the text-on-a-path object.
2 In the Property inspector, enter a value in the Text Offset text box. Then press Enter.
Note: If the Property inspector is minimized, click the expander arrow in the lower right corner to
see all properties.
Transforming text
You can transform text blocks in the same ways you can transform other objects. You can scale,
rotate, skew, and flip text to create unique text effects.
You can still edit the transformed text, although severe transformations may make the text
difficult to read. When a text block transformation causes text to be resized or scaled, the resulting
font size appears in the Property inspector when the text is selected.
Converting text to paths
You can convert text to paths and then edit the shapes of the letters as you would any vector
object. All vector-editing tools are available after you convert text to paths. However, you can no
longer edit it as text.
To convert selected text to paths:
• Choose Text > Convert to Paths.
Text converted to paths retains all of its visual attributes, but you can edit it only as paths. You
can edit the converted text as a group or edit the converted characters individually.
To edit converted text character paths individually, do one of the following:
• Select the converted text with the Subselection tool.
• Select the converted text and choose Modify > Ungroup.
You can edit the individual converted character paths using the vector-editing tools. For more
information on editing paths, see “Editing paths” on page 71.
You can create a composite path from a text object that was created by converting text to paths.
To create a composite path from a path group that was created by converting text to paths:
1 Select the path group.
2 Choose Modify > Ungroup.
3 Choose Modify > Combine Paths > Join.
92
Chapter 4: Using Text
Importing text
You can copy text from a source document and paste into the current Fireworks document, or
you can drag it from the source to the current document. You can also open or import an entire
text file in Fireworks.
Fireworks can import RTF (rich text format) and ASCII (plain text) formats.
To open or import a text file:
1 Choose File > Open or File > Import.
2 Navigate to the folder containing the file.
3 Choose the file and click OK.
Photoshop text
You can open or import a Photoshop file containing text. You can also copy text from a
Photoshop file and paste into the current Fireworks document or drag it from the Photoshop file
to the current document.For more information, see Fireworks Help.
RTF files
When importing RTF text, Fireworks maintains these attributes:
•
•
•
•
•
•
•
Font, size, and style (bold, italic, underline)
Alignment (left, right, center, justified)
Leading
Baseline shift
Range kerning
Horizontal scale
Color of the first character
All other RTF information is ignored.
In Fireworks, you cannot import RTF text by copying and pasting or dragging and dropping.
ASCII text
You can import ASCII text using any of the import methods. Imported ASCII text is set to the
current default font, 12 pixels high, and to the current fill color.
Handling missing fonts
If you open a document in Fireworks that contains fonts not installed on your computer,
Fireworks asks if you want to replace the fonts or maintain their appearance. This is useful if you
share files with users on other computers that may not have the same fonts installed.
Choosing Maintain Appearance replaces the text with a bitmap image that represents the
appearance of the text in its original font. You can still edit the text, but when you do so,
Fireworks replaces the bitmap image with a font that’s installed on your system. This can cause
the appearance of the text to change.
Importing text
93
You can choose fonts to replace the missing fonts. After you replace fonts, the document opens
and you can edit and save the text. When the document is reopened on a computer that contains
the original fonts, Fireworks remembers and uses the original fonts.
To select a replacement font:
1 Open a document with missing fonts.
The Missing Fonts dialog box opens.
2 Choose a missing font from the Change Missing Font list.
3 Do one of the following:
■ Choose a replacement font from the To list.
■ Choose to display the text in the default system font.
■ To leave the missing font as is, click No Change.
4 Click OK.
The next time you open a document with the same missing fonts, the Missing Fonts dialog box
includes the font you chose.
Checking spelling
You can use the Check Spelling command in the Text menu to check spelling for specific text
blocks or all text in a document.
To spell-check text:
1 Select one or more text blocks. If no text blocks are selected, Fireworks checks spelling in the
entire document.
2 Choose Text > Check Spelling.
3 If you have not checked spelling before in Fireworks, you see a dialog box asking you to choose
a dictionary. Click OK to close the dialog box. Choose a language from the Dictionary list, and
click OK.
If you don’t choose a language, Fireworks prompts you to choose a language dictionary every
time you spell-check a document.
Note: The Macromedia.tlx option is always selected at the top of the Dictionary list. For more
information about this option, see “Customizing spell checking” on page 95.
4 The Check Spelling dialog box opens. For each word found, choose the appropriate option:
adds the unrecognized word to your personal dictionary.
skips the current instance of the unrecognized word.
Ignore All skips all instances of the unrecognized word during the current spell-check session.
The next time you spell-check, Fireworks once again identifies the word as unrecognized.
Change replaces the current instance of the unrecognized word with text that you type in the
Change To box or with the selection in the Suggestions list.
Change All replaces all instances of the unrecognized word in the same manner.
Delete removes a duplicate word when one is found.
When it finishes checking the spelling in a document, Fireworks closes the Check Spelling
dialog box and displays a message indicating that the spell-check is complete.
Add to Personal
Ignore
94
Chapter 4: Using Text
Customizing spell checking
You can customize the way Fireworks spell-checks documents using the Spelling Setup dialog box.
From here you can specify one or more language dictionaries for Fireworks to use during spell
checking, as well as edit the words in your personal dictionary. You can also specify which items
you want Fireworks to spell-check, including Internet and file addresses.
To customize spell checking in Fireworks:
1 Do one of the following:
Choose Text > Spelling Setup.
Click the Setup button in the Check Spelling dialog box.
2 Choose the desired options in the Spelling Setup dialog box:
■ Choose one or more language dictionaries.
■
■
Note: The Macromedia.tlx option is always selected at the top of the dictionary list. This is the file
that contains your custom spelling dictionary.
Browse for a custom dictionary by clicking the folder icon beside the Personal Dictionary
Path text box.
■ Edit the custom dictionary by clicking the Edit Personal Dictionary button and adding,
deleting, or modifying words in the list.
■ Choose the types of words you want to include in the spell-check.
3 Click OK.
■
Using the Text Editor
In Fireworks 4 and previous versions, the Text Editor was used to create and edit text. All textediting and formatting options found in the Text Editor are now located in the Property
inspector. However, you still have access to the Text Editor through the Text menu.
The Text Editor is useful for working with text that might be difficult to edit onscreen, such as
large text blocks, text attached to a path, or text with hard-to-read fonts and sizes. You can choose
to display such text in the system font and default size if necessary to make editing easier.
To display the Text Editor:
1 Select a text block and choose Text > Editor.
2 Modify and format the text using the options available.
3 Click OK to apply changes and close the Text Editor.
To view text in the system font:
• Deselect Show Font in the Text Editor.
To view text in the default size:
• Deselect Show Size & Color in the Text Editor.
Using the Text Editor
95
96
Chapter 4: Using Text
CHAPTER 5
Applying Color, Strokes, and Fills
Macromedia Fireworks MX 2004 has a wide range of panels, tools, and options for organizing
and choosing colors, and applying colors to bitmap images and vector objects.
In the Swatches panel, you can choose a preset swatch group such as Color Cubes, Continuous
Tone, or Grayscale, or you can create custom swatch groups that include your favorite colors or
colors approved by your client. In the Color Mixer, you can choose a color model such as
Hexadecimal, RGB, or Grayscale, and then choose stroke and fill colors directly from the color
bar or by entering specific color values.
Throughout the Fireworks workspace you will find color boxes that show the current color
choices for options and object characteristics. When you click a color box, you see a color pop-up
window from which you can choose a color for the color box. Move the pointer away from an
open color pop-up window, and you can click any color on your screen to apply it to the
color box.
The Colors section of the Tools panel contains stroke and fill color controls and other color
options. The Bitmap section contains the Paint Bucket, Gradient Fill, and Eyedropper tools,
which you can use to apply color to bitmap selections, areas of similar color, and vector objects.
For information on these bitmap tools, see Chapter 2, “Working with Bitmaps,” on page 29.
Note: For information about color correction using Live Effects and filters, see “Adjusting bitmap
color and tone” on page 39.
97
Using the Colors section of the Tools panel
The Colors section of the Tools panel contains controls for activating the Stroke Color and Fill
Color boxes, which in turn determine whether the strokes or fills of selected objects are affected
by color choices. Also, the Colors section has controls for quickly resetting colors to the default,
setting the stroke and fill color settings to None, and swapping fill and stroke colors.
To make the Stroke Color or Fill Color box active:
• Click the icon next to the Stroke Color or Fill Color box in the Tools panel. The active color
box area appears as a depressed button in the Tools panel.
Note: The Paint Bucket tool fills pixel selections and vector objects with the color shown in the Fill
Color box in the Tools panel.
Color boxes in the Tools panel and the color pop-up window
To reset colors to the default:
• Click the Default Colors button in the Tools panel or in the Color Mixer.
To remove the stroke and fill from selected objects using the No Stroke or Fill button:
1 Click the No Stroke or Fill button in the Colors section of the Tools panel.
The active characteristic changes to a stroke or fill of None.
2 To set the inactive characteristic to None as well, click the No Stroke or Fill button again.
Note: You can also set the fill or stroke of selected objects to None by clicking the Transparent
button in any Fill Color or Stroke Color box pop-up window, or by choosing None from the Fill
Options or Stroke Options pop-up menu in the Property inspector.
To swap fill and stroke colors:
• Click the Swap Colors button in the Tools panel or in the Color Mixer.
Organizing swatch groups and color models
The Swatches panel and Color Mixer combine to form the Colors panel group. In the Swatches
panel you can view, change, create, and edit swatch groups, as well as choose stroke and fill colors.
You can use the Color Mixer to choose a color model, mix stroke and fill colors by dragging color
value sliders or entering color values, and choose stroke and fill colors directly from the color bar.
98
Chapter 5: Applying Color, Strokes, and Fills
Applying colors using the Swatches panel
The Swatches panel displays all the colors in the current swatch group. You can use the Swatches
panel to apply stroke and fill colors to selected vector objects or text.
To apply a color to the stroke or fill of a selected object using the Swatches panel:
1 Click the icon next to the Stroke Color or Fill Color box in the Tools panel or Property
inspector to make it active.
2 If the Swatches panel is not already open, choose Window > Swatches.
3 Click a swatch to apply the color to the stroke or fill of the selected object. The color appears in
the active Stroke Color or Fill Color box.
Changing swatch groups
You can easily switch to another swatch group or create your own. The Swatches panel Options
menu contains the following swatch groups: Color Cubes, Continuous Tone, Macintosh System,
Windows System, and Grayscale. You can import custom swatches from color palette files saved
as ACT or GIF files.
To choose a swatch group:
• Choose a swatch group from the Swatches panel Options menu.
Note: Choosing Color Cubes returns you to the default swatch group.
To choose a custom swatch group:
1 Choose Replace Swatches from the Swatches panel Options menu.
2 Navigate to the folder and choose a swatch file.
3 Click Open.
The color swatches in the swatch file replace the previous swatches.
Note: For information on creating a custom swatch group, see “Customizing the Swatches panel”
on page 100 and “Saving palettes” on page 240.
To add swatches from an external color palette to the current swatches:
1 Choose Add Swatches from the Swatches panel Options menu.
2 Navigate to the desired folder and choose a color palette file.
Note: Fireworks can add new swatches from palettes exported as ACT or GIF files.
3 Click OK.
Fireworks adds the new swatches at the end of the current swatches.
Organizing swatch groups and color models
99
Customizing the Swatches panel
You can add, delete, replace, and sort color swatches or entire swatch groups using the Swatches
panel.
Note: Choosing Edit > Undo does not undo swatch additions or deletions.
Swatches panel
To add a color to the Swatches panel:
1 Choose the Eyedropper tool from the Tools panel.
2 Choose the number of pixels to sample from the Sample pop-up menu in the Property
inspector: 1 pixel, 3x3 Average, or 5x5 Average.
3 Click anywhere inside any open Fireworks Document window to sample a color.
4 Move the tip of the eyedropper pointer to the open space after the last swatch in the
Swatches panel.
The eyedropper pointer becomes the paint bucket pointer.
5 Click to add the swatch.
Tip: When you choose Snap to Web Safe in the Options menu of the color pop-up window, any
non-websafe color you pick up with the eyedropper pointer is changed to the nearest websafe
color.
To replace a swatch with another color:
1 Choose the Eyedropper tool from the Tools panel.
2 Choose the number of pixels to sample from the Sample pop-up menu in the Property
inspector: 1 pixel, 3x3 Average, or 5x5 Average.
3 Click anywhere inside any Fireworks Document window to sample a color.
4 Hold down Shift and place the pointer over a swatch in the Swatches panel.
The pointer becomes the paint bucket pointer.
5 Click the swatch to replace it with the new color.
To delete a swatch from the Swatches panel:
1 Hold down Control (Windows) or Command (Macintosh) and place the pointer over a swatch.
The pointer becomes the scissors pointer.
2 Click the swatch to delete it from the Swatches panel.
100
Chapter 5: Applying Color, Strokes, and Fills
To save a selection of sampled colors:
1 Add sampled colors to the Swatches panel.
2 Choose Save Swatches from the Swatches panel Options menu.
The Export Swatches dialog box opens.
3 Choose a filename and directory and click Save.
Clearing and sorting swatches
You can clear and sort swatches using the Swatches panel Options menu.
To clear or sort swatches:
• Choose one of the following from the Swatches panel Options menu:
clears the entire Swatches panel.
Sort by Color sorts the swatches by color value.
Clear Swatches
Creating colors in the Color Mixer
In the Color Mixer, you can create colors by dragging sliders or entering values for each
component of a color model such as RGB, Hexadecimal, or CMY. The color you create is applied
to the active Stroke Color or Fill Color box. The Color Mixer also has a color bar displaying the
range of colors in the current color model. You can click anywhere in the color bar to apply a
color. You can also click the system color picker button to choose a Windows or Macintosh
system color.
Tip: Although CMY is a color model option, graphics directly exported from Fireworks are not ideal
for printing. To repurpose exported Fireworks graphics for print, you can import them into FreeHand
MX, which automatically performs CMYK conversion of RGB images when output to digital color
separations. For more information, see FreeHand documentation.
Mixing colors in the Color Mixer
You can use the Color Mixer to view the values of the active color and edit color values to create
new colors.
Organizing swatch groups and color models
101
By default, the Color Mixer identifies RGB colors as hexadecimal, displaying hexadecimal color
values for red (R), green (G), and blue (B) color components. Hexadecimal RGB values are
calculated based on a range of values from 00 to FF.
Color model
Mode of color expression
RGB
Values of Red, Green, and Blue, where each component has a value from 0 to 255.
0-0-0 is black and 255-255-255 is white.
Hexadecimal
RGB values of Red, Green, and Blue, where each component has a hexadecimal
value from 00 to FF. 00-00-00 is black and FF-FF-FF is white.
HSB
Values of Hue, Saturation, and Brightness, where Hue has a value from 0 to 360
degrees, and Saturation and Brightness have a value from 0 to 100%.
CMY
Values of Cyan, Magenta, and Yellow, where each component has a value from 0 to
255. 0-0-0 is white and 255-255-255 is black.
Grayscale
A percentage of black. The single Black (K) component has a value from 0 to
100%, where 0 is white, 100 is black, and values in between are shades of gray.
You can choose alternative color models from the Color Mixer Options menu. The current color’s
component values change with each new color model.
To display the Color Mixer:
• Choose Window > Color Mixer.
To apply a color from the color bar to a selected vector object:
1 Click the icon next to the Stroke Color or Fill Color box in the Color Mixer.
2 Move the pointer over the color bar.
The pointer becomes the eyedropper pointer.
3 Click to pick a color.
The color is applied to the selected object and becomes the active stroke or fill color.
To pick a color from the Color Mixer:
1 Deselect all objects before mixing a color to prevent unwanted object editing as you mix colors.
2 Click either the Stroke Color or Fill Color box to make it the destination for the new color.
3 Choose a color model from the Color Mixer Options menu.
4 Do any of the following to specify color component values:
■
■
■
Enter values in the color component text boxes.
Use the pop-up sliders.
Pick a color from the color bar.
You can add this color to the Swatches panel to reuse. For more information, see “Customizing
the Swatches panel” on page 100.
To cycle the color bar through the color models:
• Shift-click the color bar at the bottom of the Color Mixer.
Note: The options in the Color Mixer do not change.
102
Chapter 5: Applying Color, Strokes, and Fills
Creating colors using the system color pickers
You can create colors using the Windows System or the Macintosh System dialog boxes, instead
of using the Color Mixer and Swatches panel.
To pick a color from the system color picker:
1 Click any color box.
2 Choose Windows OS or Mac OS from any color pop-up window Options menu.
The system color swatches are displayed in the pop-up window.
3 Choose a color from the system color picker.
The color becomes the new stroke or fill color.
For information on adding a color to the Swatches panel from the color picker, see “Customizing
the Swatches panel” on page 100.
Viewing color values
In addition to the Color Mixer and color pop-up window, you can use the Info panel to identify
color values.
To view the color value of any part of your document using the Info panel:
1 Click the Eyedropper tool in the Tools panel.
2 Choose Window > Info to display the Info panel.
3 Move the pointer over the object containing the color you want to view (Windows only).
To view the color value of the active stroke or fill color, do one of the following:
• Choose Window > Color Mixer for RGB or other color system values.
• Click a color box to open the color pop-up window and view the hexadecimal value at the top
•
of the window.
Place the pointer over a color box and read the tooltip (Windows only).
Note: By default, the color’s RGB values appear in the Info panel and the Color Mixer, and its
hexadecimal value appears in the color pop-up window, as well as the color box tooltip in
Windows. However, you can change the color model displayed in the Color Mixer or the Info
panel anytime.
To display color information for another color model:
• Choose another color model from the Info panel Options menu or the Color Mixer
Options menu.
Organizing swatch groups and color models
103
Dithering with websafe colors
Sometimes you might need to use a color that is not a websafe color. For example, your company
logo may use a color that is not websafe. To approximate a websafe color that doesn’t shift or
dither when exported with a websafe palette, you use a web dither fill.
Note: Web dithering can increase the size of the file.
Two websafe colors create a web dither fill.
To use the web dither fill:
1 Select an object containing a non-websafe color.
2 Choose Web Dither from the Fill Options pop-up menu in the Property inspector.
3 Click the Fill Color box in the Property inspector.
The color pop-up window opens, displaying options for web dither fills. The object’s
non-websafe color appears in the Source color box in the Fill Options window. The two
websafe dither colors appear in the color boxes to the right. The web dither appears on the
object and becomes the active fill color.
Note: Setting the edge of a web dither fill to Anti-Alias or Feather results in colors that are
not websafe.
4 Click outside the pop-up window to close it.
To create the illusion of a true transparent fill in a web browser:
1 Select the object to which you want to apply a transparent fill.
2 Choose Web Dither from the Fill Options pop-up menu in the Property inspector.
3 Click the Fill Color box in the Property inspector. The color pop-up window opens, displaying
options for web dither fills.
4 Click the Transparent option.
The color boxes on the right side of the pop-up window change to reflect your selection, and
the object on the canvas becomes semi-opaque, or translucent.
5 Click outside the pop-up window to close it.
6 Export the object as a GIF or PNG file with Index Transparency or Alpha Channel
Transparency set. For more information on exporting files with transparency, see “Making areas
transparent” on page 241.
When you view the graphic in a web browser, the web page background shows through every
other pixel of the transparent web dither fill, creating the appearance of transparency.
Note: Not all browsers support PNG files.
104
Chapter 5: Applying Color, Strokes, and Fills
Using color boxes and color pop-up windows
Throughout Fireworks you will find color boxes—from the Colors section of the Tools panel
to the Property inspector to the Color Mixer. Each displays the current color assigned to the
associated object property.
Choosing colors from a color pop-up window
When you click any color box, a color pop-up window similar to the Swatches panel opens. You
can choose to display the same swatches in a color pop-up window as those that are displayed in
the Swatches panel, or you can display different swatches.
To choose a color for a color box:
1 Click the color box.
The color pop-up window opens.
2 Do one of the following:
■
■
■
Click a swatch to apply it to the color box.
Click the eyedropper pointer on a color anywhere on the screen to apply it to the color box.
Click the Transparent button in the pop-up window to make the stroke or fill transparent.
To display the current Swatches panel swatch group in the color pop-up window:
• Choose Swatches Panel from the color pop-up window Options menu.
To display a different swatch group in the color pop-up window:
• Choose a swatch group from the color pop-up window Options menu. Choosing a swatch
group here does not affect the Swatches panel.
Sampling colors from a color pop-up window
When a color pop-up window is open, the pointer becomes a special eyedropper that can take up
colors from almost anywhere on the screen. This is known as sampling.
To sample a color from anywhere on the screen for the current color box:
1 Click any color box.
The color pop-up window opens, and the pointer changes to an eyedropper.
2 Click anywhere in the Fireworks workspace to choose a color for the color box.
The color is applied to the characteristic or feature associated with the color box, and the color
pop-up window closes.
Tip: Shift-click to choose a websafe color.
Using color boxes and color pop-up windows
105
Working with strokes
Using the Property inspector, the Stroke Options pop-up menu, and the Edit Stroke dialog box,
you can have full control of every brush nuance, including ink amount, tip size and shape,
texture, edge effect, and aspect.
Applying strokes
You can change the stroke attributes of the Pen, Pencil, and Brush tools so that the next vector
object you draw has the new stroke attributes, or you can apply stroke attributes to an object or
path after you draw it.
The current stroke color appears in the Stroke Color box in the Tools panel, the Property
inspector, and the Color Mixer. You can change the stroke color of a drawing tool or selected
object from any of these three panels.
The pencil icon indicates the Stroke Color box in the Tools panel, the Property inspector, and the Color
Mixer.
To change stroke attributes of selected objects, do one of the following:
• Choose from among the stroke attributes in the Property inspector.
Tip: Choose Stroke Options from the Stroke Options pop-up menu for more attributes.
• Click the Stroke Color box in the Tools panel and click Stroke Options. Choose from among
the stroke attributes in the Stroke Options pop-up window.
Use the options in the Property inspector or the Stroke Options pop-up window to change the stroke
applied to an object.
To change the stroke color of a drawing tool:
1 Press Control+D (Windows) or Command+D (Macintosh) to deselect all objects.
2 Choose a drawing tool in the Tools panel.
3 Click the Stroke Color box in the Tools panel or Property inspector to open the color
pop-up window.
4 Choose a color for the stroke from the set of swatches.
5 Drag to draw the object.
Note: A newly created stroke assumes the color currently displayed in the Stroke Color box.
106
Chapter 5: Applying Color, Strokes, and Fills
To remove all stroke attributes from a selected object, do one of the following:
• Choose None from the Stroke Options pop-up menu in the Property inspector or the Stroke
•
Options pop-up window.
Click the Stroke Color box in either the Tools panel or the Property inspector and click the
Transparent button.
Creating custom strokes
You can use the Edit Stroke dialog box to change specific stroke characteristics.
The Edit Stroke dialog box has three tabs: Options, Shape, and Sensitivity.
The stroke preview at the bottom of each tab shows the current brush with the current settings.
The current pressure- and speed-sensitivity settings are reflected in the preview by a stroke that
tapers or fades or otherwise changes from left to right.
To open the Edit Stroke dialog box:
1 Do one of the following to open the Stroke Options pop-up window:
Choose Stroke Options from the Stroke Options pop-up menu in the Property inspector.
■ Choose Stroke Options from the Stroke Color box pop-up window in the Tools panel.
2 Click Advanced.
The Edit Stroke dialog box opens.
■
Working with strokes
107
To set general brush stroke options:
1 On the Options tab of the Edit Stroke dialog box, set the ink amount, spacing, and flow rate.
Higher flow rates create brush strokes that flow over time, as with an airbrush.
2 To overlap brush strokes for dense strokes, choose Build-up.
3 To set the stroke texture, change the Texture option. The higher the number, the more apparent
4
5
6
7
8
the texture becomes.
To set texture on the edges, enter a number in the Edge Texture text box and choose an edge
effect from the Edge Effect pop-up menu.
Set the number of tips you want the brush stroke to have. For multiple tips, enter a Tip Spacing
value and choose the color variation method. You can choose Random, Uniform,
Complementary, Hue, or Shadow.
To choose a dotted or dashed line, select an option from the Dash pop-up menu.
To set the lengths of dashes and spaces for a dotted line, use the three sets of On and Off text
input boxes to control the first, second, and third dashes, respectively.
Click Apply to apply the settings to selected strokes, then click OK.
To modify the brush tip:
1 On the Shape tab of the Edit Stroke dialog box, select Square for a square tip, or deselect it for
a round tip.
2 Enter values for the brush tip size, edge softness, tip aspect, and tip angle.
3 Click Apply, then click OK.
Fireworks has stroke settings for fine-tuning the stroke attributes controlled by speed and pressure
when you use a Wacom pressure-sensitive tablet and pen. You can choose the stroke attribute to
control with the pen.
To set stroke sensitivity:
1 On the Sensitivity tab of the Edit Stroke dialog box, choose a stroke property such as Size, Ink
Amount, or Saturation from the Stroke Property pop-up menu.
2 From the Affected By options, choose the degree to which sensitivity data affects the current
stroke property.
3 Click OK.
108
Chapter 5: Applying Color, Strokes, and Fills
Placing strokes on paths
By default, an object’s brush stroke is centered on a path. You have the option of placing the brush
stroke completely inside or outside the path. This allows you to control the overall size of stroked
objects and to create effects such as strokes on the edges of beveled buttons.
Centered stroke, stroke inside, and stroke outside
You can use the Stroke pop-up menu in the Stroke Options window to reorient brush strokes.
To move a brush stroke inside or outside the selected path:
1 Click the Stroke Color box in the Tools panel or the Property inspector to open the color box
pop-up window.
2 Choose an option from the Location of Stroke Relative to Path pop-up menu: Inside, Centered,
or Outside.
3 Optionally, choose the Fill over Stroke option.
Normally, the stroke overlaps the fill. Choosing Fill over Stroke draws the fill over the stroke. If
you choose this option for an object with an opaque fill, any part of the stroke that falls inside
the path is obscured. A fill with a degree of transparency may tint or blend with a brush stroke
inside a path.
Creating stroke styles
You can change specific stroke characteristics such as ink amount, tip shape, and tip sensitivity,
and save the custom stroke as a style for reuse across many documents.
To create custom strokes:
1 Do one of the following:
Click the Stroke Color box in the Tools panel and then click Stroke Options.
Choose Stroke Options from the Stroke Options pop-up menu in the Property inspector.
The Stroke Options pop-up window opens.
2 Edit the desired brush stroke attributes.
3 Save your custom stroke attributes as a style. For more information, see “Creating and deleting
styles” on page 156.
■
■
Working with strokes
109
Working with fills
Using the Property inspector, the Fill Options pop-up menu, the Fill Options pop-up window,
and the Gradient pop-up window, as well as a collection of bitmap textures and patterns, you can
create a wide variety of fills for vector objects and text. Using the Paint Bucket or Gradient tool,
you can also fill pixel selections based on current fill settings.
Setting fill attributes of the drawing tools
You can set the fill attributes of the Rectangle, Rounded Rectangle, Ellipse, and Polygon drawing
tools that are applied to objects as you draw. The current fill appears in the Fill Color box in the
Property inspector, the Tools panel, and the Color Mixer. You can use any of these panels to
change a drawing tool’s fill.
The paint bucket icon indicates the Fill Color box in the Tools panel, the Property inspector, and the
Color Mixer.
To change the solid fill color of applicable vector drawing tools and the Paint Bucket tool:
1 Choose a vector drawing tool or the Paint Bucket tool.
2 Do one of the following:
Press Control+D (Windows) or Command+D (Macintosh) to deselect all objects, and then
click the Fill Color box in the Property inspector to open the Fill Color pop-up window.
■ Click the Fill Color box in the Tools panel or Color Mixer to open the color pop-up
window.
3 Choose a color for the fill from the set of swatches, or sample a color from anywhere on the
screen using the eyedropper pointer.
4 Use the tool as desired.
■
Note: Choosing the Text tool always causes the Fill Color box to revert to the last solid text color
used by the Text tool.
Editing solid fills
A solid fill is a solid color that fills the interior of an object. You can change an object’s fill color in
the Tools panel, Property inspector, or Color Mixer.
To edit a selected vector object’s solid fill:
1 Click the Fill Color box in the Property inspector, Tools panel, or Color Mixer to open the color
pop-up window.
2 Choose a swatch from the color pop-up window.
The fill appears in the selected object and becomes the active fill color.
110
Chapter 5: Applying Color, Strokes, and Fills
Applying gradient and pattern fills
You can change fills to display a variety of solid, dithered, pattern, or gradient characteristics that
range from solid colors to gradients. These characteristics resemble satin, ripples, folds, or
gradients that conform to the contour of the object to which you apply them. Additionally, you
can change various attributes of a fill, such as color, edge, texture, and transparency.
You can choose from a number of preset gradient and pattern fills, or you can create your own.
Note: A newly created fill assumes the current color displayed in the Fill Color box in the Tools panel.
Use the Fill options in the Property inspector or the Fill Options pop-up window to edit fill attributes.
Applying a pattern fill
You can fill a path object with a bitmap graphic, known as a pattern fill. Fireworks ships with
more than a dozen pattern fills, including Berber, Leaves, and Wood.
To apply a pattern fill to a selected object:
1 Do one of the following:
Choose Pattern from the Fill Options pop-up menu in the Property inspector.
■ Click the Fill Color box in the Tools panel, click Fill Options, and choose Pattern from the
Fill Options pop-up menu.
2 Choose a pattern from the Pattern Name pop-up menu.
The pattern fill appears in the selected object and becomes the active fill color.
■
Applying gradient and pattern fills
111
Adding a custom pattern
You can set a bitmap file as a new pattern fill. You can use files with these formats as patterns:
PNG, GIF, JPEG, BMP, TIFF, and PICT (Macintosh only). When a pattern fill is a 32-bit
transparent image, the transparency affects the fill when used in Fireworks. If an image is not
32-bit, it becomes opaque.
When you add a new pattern, its name appears in the Pattern Name pop-up menu of the Fill
Options pop-up window.
To create a new pattern from an external file:
1 With vector object properties displayed in the Property inspector, choose Pattern from the Fill
Options pop-up menu.
2 Click the Fill Color box and choose Other from the Pattern Name pop-up menu.
3 Navigate to the bitmap file you want to use as the new pattern, and click Open.
The new pattern is added to the Pattern Name list in alphabetical order.
Applying a gradient fill
Fill categories other than None, Solid, Pattern, and Web Dither are gradient fills. These fills blend
colors to create various effects.
Objects with various gradient fills
To apply a gradient fill to a selected object:
• Choose a gradient from the Fill Options pop-up menu in the Property inspector. The fill
appears in the selected object and becomes the active fill.
112
Chapter 5: Applying Color, Strokes, and Fills
Editing a gradient fill
You can edit the current gradient fill by clicking any Fill Color box and then using the Edit
Gradient pop-up window.
Color ramp
Preview
Edit Gradient pop-up window
To open the Edit Gradient pop-up window:
1 Select an object that has a gradient fill or choose a gradient fill from the Fill Options pop-up
menu in the Property inspector.
2 Click the Fill Color box in the Property inspector or Tools panel to open the pop-up window.
The Edit Gradient pop-up window opens with the current gradient in the color ramp
and preview.
To add a new color or opacity swatch to the gradient, do one of the following:
• To add a color swatch, click the area below the gradient color ramp.
• To add an opacity swatch, click the area above the gradient color ramp.
To remove a color or opacity swatch from the gradient:
• Drag the swatch away from the Edit Gradient pop-up window.
To set or change the color of a color swatch:
1 Click the color swatch.
2 Choose a color from the pop-up window.
To set or change the transparency of an opacity swatch:
1 Click the opacity swatch.
2 Do one of the following:
■
■
Drag the slider to the percentage of transparency, where 0 is completely transparent and 100
is completely opaque.
Enter a numeric value from 0 to 100 to set the opacity value.
Note: The transparency checkerboard shows through the gradient in transparent areas.
3 When you have finished editing the gradient, press Enter or click outside the Edit Gradient
pop-up window. The gradient fill appears in any selected objects and becomes the active fill.
To adjust the transition between colors in the fill:
• Drag color swatches left or right.
Applying gradient and pattern fills
113
Creating fills with the Gradient tool
The Gradient tool is in the same tool group as the Paint Bucket tool. This new tool works much
as the Paint Bucket tool does, but it fills an object with a gradient instead of a solid color. Like the
Paint Bucket tool, it retains the properties of the last-used element.
To use the Gradient tool:
1 Click the Paint Bucket tool in the Tools panel and choose the Gradient tool from the
pop-up menu.
2 Choose from the following attributes in the Property inspector:
is a pop-up menu from which you can choose a gradient type.
when clicked, displays the Edit Gradient pop-up window, from which you can
set a variety of color and transparency options.
Edge determines if the gradient has a hard, anti-aliased, or feathered fill edge. If you choose a
feathered edge, you can specify the amount of the feathering.
Texture gives you many options to choose from, including Grain, Metal, Hatch, Mesh,
or Sandpaper.
3 Click and drag the pointer to establish a starting point of the gradient as well as the direction
and length of the gradient area.
Fill Options
Fill Color box,
Transforming and distorting fills
You can move, rotate, skew, and change the width of an object’s pattern or gradient fill. When
you use the Pointer or Gradient tools to select an object with a pattern or gradient fill, a set of
handles appears on or near the object. You can drag these handles to adjust the object’s fill.
Use the fill handles to interactively adjust a pattern or gradient fill.
To move the fill within an object:
• Drag the round handle, or click in a new location in the fill using the Gradient tool.
To rotate the fill:
• Drag the lines connecting the handles.
To adjust the fill width and skew:
• Drag a square handle.
114
Chapter 5: Applying Color, Strokes, and Fills
Setting hard-edged, anti-aliased, or feathered fill edges
In Fireworks, you can make the edge of a fill a regular hard line or soften the edge by anti-aliasing
or feathering it. By default, edges are anti-aliased. Anti-aliasing smooths jagged edges that
may occur on rounded objects, such as ellipses and circles, by subtly blending the edge into
the background.
Feathering, however, produces a noticeable blending on either side of the edge. This softens the
edge, creating an effect similar to a glow.
To change the edge of a selected object:
1 Do one of the following to display the Edge pop-up menu:
Click the Edge pop-up menu in the Property inspector.
■ Click the Fill Color box in the Tools panel, click Fill Options, and click the Edge
pop-up menu.
2 Choose an edge option: Hard Edge, Anti-Alias, or Feather.
3 For a feathered edge, also choose the number of pixels on each side of the edge that are to
be feathered.
The default is 10. You can choose from 0 to 100. The higher the level, the more
feathering occurs.
■
About saving a custom gradient fill
To save the current gradient settings as a custom gradient for use across many documents, you
must create a style. For more information, see “Creating and deleting styles” on page 156.
Removing a fill
You can easily remove fill attributes from selected objects.
To remove the fill from a selected object, do one of the following:
• Choose None from the Fill Options pop-up menu in the Property inspector or from the Fill
•
Options pop-up menu in the Fill Options pop-up window.
Click any Fill Color box and click the Transparent button. This option removes only solid fills.
Applying gradient and pattern fills
115
Adding texture to strokes and fills
You can add three-dimensional effects to both strokes and fills by adding texture. Fireworks
provides several textures, or you can use external textures.
Adding texture to a stroke
Textures modify the brightness of the stroke, but not the hue, and give strokes a less mechanical,
more organic look, as if you were applying paint to a textured surface. Textures are more effective
when used with wide strokes. You can add a texture to any stroke. Fireworks ships with several
textures to choose from, such as Chiffon, Oilslick, and Sandpaper.
Use the Stroke options in the Property inspector or the Stroke Options pop-up window to add a texture
to a brush stroke.
To add texture to the stroke of a selected object:
1 Do one of the following to open the Stroke Texture pop-up menu:
Click the Stroke Texture pop-up menu in the Property inspector.
Click the Stroke Color box in the Tools panel, click Stroke Options, and click the Texture
pop-up menu.
2 Do one of the following:
■ Choose a texture from the pop-up menu.
■ Choose Other from the pop-up menu and navigate to a texture file to use an
external texture.
■
■
Note: You can apply textures from files with these formats: PNG, GIF, JPEG, BMP, TIFF, and
PICT (Macintosh only).
3 Enter a percentage from 0 to 100 to control the depth of the texture.
Increasing the percentage increases the texture intensity.
116
Chapter 5: Applying Color, Strokes, and Fills
Adding texture to a fill
Textures modify the brightness of a fill, but not the hue, and give fills a less mechanical, more
organic look. You can add a texture to any fill. Fireworks ships with several textures from which to
choose, such as Chiffon, Oilslick, and Sandpaper. You can also use bitmap files as textures.This
allows you to create almost any type of custom texture.
To add texture to the fill of a selected object:
1 Do one of the following to open the Fill Texture pop-up menu:
Click the Fill Texture pop-up menu in the Property inspector.
■ Click the Fill Color box in the Tools panel, click Fill Options, and click the Texture
pop-up menu.
2 Do one of the following:
■ Choose a texture from the pop-up menu.
■ Choose Other from the pop-up menu and navigate to a texture file to use an
external texture.
3 Enter a percentage from 0 to 100 to control the depth of the texture.
Increasing the percentage increases the texture intensity.
4 Choose Transparent to introduce a level of transparency to the fill.
The Texture percentage also controls the degree of transparency.
■
Adding a custom texture
You can use bitmap files from Fireworks and other applications as textures. You can apply textures
from files with these formats: PNG, GIF, JPEG, BMP, TIFF, and PICT (Macintosh only).
When you add a new texture, its name appears in the Texture Name pop-up menu.
To create a new texture from an external file:
1 With vector object properties displayed in the Property inspector, choose Other from either of
the Texture Name pop-up menus.
2 Navigate to the bitmap file you want to use as the new texture, and click Open.
The new texture is added to the Texture Name list in alphabetical order.
Adding texture to strokes and fills
117
118
Chapter 5: Applying Color, Strokes, and Fills
CHAPTER 6
Using Live Effects
Macromedia Fireworks MX 2004 Live Effects are enhancements that you can apply to vector
objects, bitmap images, and text. Live Effects include bevels and embossing, drop shadows and
glows, color correction, and blurring and sharpening. You can apply Live Effects to selected
objects directly from the Property inspector.
Fireworks automatically updates Live Effects when you edit objects that have them applied.
After you apply a Live Effect, you can change its options anytime, or rearrange the order of
effects to experiment with a combined effect. You can turn Live Effects on and off or delete
them in the Property inspector. When you remove an effect, the object or image returns to its
previous appearance.
Some effects now listed among Fireworks Live Effects—such as Auto Levels, Gaussian Blur, and
Unsharp Mask—were once available only as irreversible plug-ins or filters. In addition to these,
you can add third-party plug-ins to be used in Fireworks as Live Effects. If you prefer, you can use
these filters in the traditional manner using the Filters menu. For more information, see
“Adjusting bitmap color and tone” on page 39.
119
Applying Live Effects
You can apply one or more Live Effects to selected objects using the Property inspector. Each time
you add a new effect to the object, it is added to the list in the Effects pop-up menu in the
Property inspector. You can turn each effect on or off.
Effects pop-up menu in the Property inspector
When you select objects eligible for Live Effects, the location of the Live Effects options differs
slightly depending on whether the Property inspector is at full height or half height:
• When the Property inspector is maximized to full height, use the Add Effects button, the
•
Delete Effects button, and the list of applied Live Effects displayed in the Property inspector.
When the Property inspector is at half height, click Edit Effects to display the Add Effects
button, the Delete Effects button, and the list of applied Live Effects.
Note: In Using Fireworks MX 2004, steps involving Live Effects assume the Property inspector is
open at full height.
You can customize each Live Effect to get the look you want. When you choose Bevel, Blur,
Emboss, Glow, Shadow, or Sharpen, a pop-up window opens in which you can adjust the effect
settings. When you choose color correction effects, dialog boxes open containing controls to
adjust color characteristics such as auto levels, brightness and contrast, hue and saturation, color
inversion, curves, and color fill. When you choose a blur or sharpen effect, it is applied directly to
the object.
120
Chapter 6: Using Live Effects
Experiment with the settings until you get the look you want. If you want to change the effect
settings later, see “Editing Live Effects” on page 124.
Width of bevel
Contrast
Softness
Angle of bevel
Button bevel preset
Inner Bevel pop-up window
To apply a Live Effect to selected objects:
1 Click the Add Effects button in the Property inspector, then choose an effect from the Effects
pop-up menu.
The effect is added to the Effects list for the selected object.
Tip: To apply a Live Effect so that it appears to affect only a pixel selection within an image, you
can cut and paste the selection in place to create a new bitmap image, select it, and then apply the
Live Effect.
2 If a pop-up window or dialog box opens, enter the settings for the effect and then do one of
the following:
■ If the Live Effect has a dialog box, click OK.
■ If the Live Effect has a pop-up window, press Enter or click anywhere in the workspace.
3 Repeat steps 1 and 2 to apply more Live Effects.
Note: The order in which Live Effects are applied affects the overall effect. You can drag Live
Effects to rearrange their stacking order. For more information, see “Reordering Live Effects”
on page 125.
To enable or disable an effect applied to an object:
• Click the check box next to the effect in the Effects list in the Property inspector.
To enable or disable all effects applied to an object:
• Click the Add Effects button in the Property inspector, then choose Options > All On
or Options > All Off from the pop-up menu.
For information on permanently removing effects, see “Removing Live Effects” on page 125.
Applying Live Effects
121
Applying beveled edges
Applying a beveled edge to an object gives it a raised look. You can create an inner bevel or an
outer bevel.
A rectangle, with Inner Bevel, and with Outer Bevel
To apply a beveled edge to a selected object:
1 Click the Add Effects button in the Property inspector, then choose a bevel option from the
pop-up menu:
■ Bevel and Emboss > Inner Bevel
■ Bevel and Emboss > Outer Bevel
2 Edit the effect settings in the pop-up window.
3 Click outside the window or press Enter to close it.
Applying embossing
You can use the Emboss effect to make an image, object, or text appear inset into or raised from
the canvas.
An object, with Inset Emboss, and with Raised Emboss
To apply an Emboss effect:
1 Click the Add Effects button in the Property inspector, then choose an emboss option from the
pop-up menu:
■ Bevel and Emboss > Inset Emboss
■ Bevel and Emboss > Raised Emboss
2 Edit the effect settings in the pop-up window.
If you want the original object to appear in the embossed area, choose Show Object.
3 When you finish, click outside the window or press Enter to close it.
Note: For backward compatibility, Emboss effects on objects in older documents open with the
Show Object option deselected.
122
Chapter 6: Using Live Effects
Applying shadows and glows
Fireworks makes it easy to apply drop shadows, inner shadows, and glows to objects. You can
specify the angle of the shadow to simulate the angle of the light shining on the object.
Drop Shadow, Inner Shadow, and Glow effects
To apply a shadow or inner shadow:
1 Click the Add Effects button in the Property inspector, then choose a shadow option from the
pop-up menu:
■ Shadow and Glow > Drop Shadow
■ Shadow and Glow > Inner Shadow
2 Edit the effect settings in the pop-up window:
■ Drag the Distance slider to set the distance of the shadow from the object.
■ Click the color box to open the color pop-up window and set the shadow color.
■ Drag the Opacity slider to set the percentage of transparency in the shadow.
■ Drag the Softness slider to set the sharpness of the shadow.
■ Drag the Angle dial to set the direction of the shadow.
■ Select Knock Out to hide the object and display the shadow only.
3 When you finish, click outside the window or press Enter to close it.
To apply a glow:
1 Click the Add Effects button in the Property inspector, then choose Shadow and Glow > Glow.
2 Edit the effect settings in the pop-up window:
Click the color box to open the color pop-up window and set the glow color.
■ Drag the Width slider to set the width of the glow.
■ Drag the Opacity slider to set the percentage of transparency in the glow.
■ Drag the Softness slider to set the sharpness of the glow.
■ Drag the Offset slider to specify the distance of the glow from the object.
3 When you finish, click outside the window or press Enter to close it.
■
Applying filters and Photoshop plug-ins as Live Effects
You can apply all the built-in filters and plug-ins in the Filters menu as Live Effects using the
Property inspector. Applying them as Live Effects ensures that you can edit or remove them from
an object anytime.
Note: Photoshop 6 and 7 plug-ins are not compatible with Fireworks MX 2004.
Note: The menu known as the Xtras menu in some previous versions of Fireworks is called the Filters
menu in Fireworks MX 2004. Fireworks Xtra extensions are now known as filters.
Applying Live Effects
123
Plug-ins from the Filters menu
When you install a Photoshop plug-in in Fireworks, it is added to the Filters menu and to the
Property inspector. You should use the Filters menu to apply filters and Photoshop plug-ins only
when you are certain that you will not want to edit or remove the effect. You can remove a filter
only if the Undo command is available.
Installing Photoshop plug-ins
You can use the Property inspector to apply some Photoshop plug-ins as Live Effects. Not all
Photoshop plug-ins can be used as Live Effects. You can also import Photoshop plug-ins by
pointing to a plug-ins folder using the Preferences dialog box. For more information, see “Folders
preferences” on page 283.
When you share a Fireworks file in which a Photoshop plug-in is applied as a Live Effect, whoever
opens it can view the effect only on a computer in which the plug-in is installed. Built-in
Fireworks effects, however, are saved with the Fireworks file.
To install Photoshop plug-ins:
1 Click the Add Effects button in the Property inspector, then choose Options > Locate Plugins.
2 Navigate to the folder where the Photoshop plug-ins are installed and click OK.
3 Restart Fireworks to load the plug-ins.
Note: If you move the plug-ins to a different folder, repeat the above steps, or choose File >
Preferences and click the Folders tab to change the path to the plug-ins. Then restart Fireworks.
To apply a Photoshop plug-in to a selected object as a Live Effect:
• Click the Add Effects button in the Property inspector, then choose an effect from the
Options submenu.
About applying effects to grouped objects
When you apply an effect to a group, the effect is applied to all objects in the group. If the objects
are ungrouped, each object’s effect settings revert to those applied to the object individually.
You can apply an effect to an individual object within a group by selecting only that object with
the Subselection tool. For information on selecting a group or objects within a group, see
“Selecting objects within groups” on page 25.
Editing Live Effects
When you click a Live Effect’s info button in the Property inspector, Fireworks opens a pop-up
window with the current settings for the effect, which you can edit.
To edit a Live Effect:
1 In the Property inspector, click the info button next to the effect you want to edit.
The corresponding pop-up window or dialog box opens.
2 Adjust the effect settings.
Note: If an effect is not editable, the info button is dimmed. For example, you cannot edit
Auto Levels.
3 Click outside the window or press Enter.
124
Chapter 6: Using Live Effects
Reordering Live Effects
You can rearrange the order of the effects applied to an object. Reordering effects changes the
sequence in which the effects are applied, which can change the combined effect.
In general, effects that change the interior of an object, such as the Inner Bevel effect, should be
applied before effects that change the object’s exterior. For example, you should apply the Inner
Bevel effect before you apply the Outer Bevel, Glow, or Shadow effect.
To reorder effects applied to a selected object:
• Drag an effect to the desired position in the list in the Property inspector.
Note: Effects at the top of the list are applied before the effects at the bottom.
Removing Live Effects
You can easily remove individual effects or all effects from an object.
To remove a single effect applied to a selected object:
• Select the effect you want to remove from the Effects list in the Property inspector, then click
the Delete Effects button.
To remove all effects from a selected object:
• Click the Add Effects button in the Property inspector, then choose None from the
pop-up menu.
Creating custom Live Effects
You can save a particular combination of settings for Live Effects by creating a custom Live Effect.
All custom Live Effects appear in the Add Effects pop-up menu in the Property inspector and in
the Styles panel. Custom Live Effects are actually styles with all property options deselected except
for the Effect option.
• You can create a custom Live Effect using the Property inspector or Styles panel.
• You can apply a custom Live Effect to selected objects from the Add Effects pop-up menu or
•
the Styles panel.
You can rename or delete a custom Live Effect using the Styles panel.
To create a custom Live Effect using the Property inspector:
1 Apply Live Effect settings to selected objects. For more information, see “Applying Live Effects”
on page 120.
2 Click the Add Effects button in the Property inspector, then choose Options > Save As Style.
The Add Style dialog box opens.
3 Type a name for the style and click OK.
The custom Live Effect name is added to the Add Effects pop-up menu, and a style icon
representing the Live Effect is added to the Styles panel.
Editing Live Effects
125
To create a custom Live Effect using the Styles panel:
1 Apply Live Effect settings to selected objects. For more information, see “Applying Live Effects”
on page 120.
2 Choose Add Style from the Styles panel Options menu.
The Add Style dialog box opens.
3 Deselect all properties except the Effect property, enter a name, and click OK.
The custom Live Effect name is added to the Add Effects pop-up menu, and a style icon
representing the Live Effect is added to the Styles panel.
Note: If you choose any additional properties in the Add Style dialog box, the style will no longer
be an item on the Add Effects pop-up menu in the Property inspector, although it will remain on
the Styles panel as a typical style.
To apply a custom Live Effect to selected objects, do one of the following:
• Click the Add Effects button in the Property inspector, then choose the custom Live Effect.
• Click the icon for the custom Live Effect in the Styles panel.
You can rename or delete a custom Live Effect as you would any other style in the Styles panel.
For more information, see “Creating and deleting styles” on page 156 and “Editing styles”
on page 157.
Note: You cannot rename or delete a standard Fireworks effect.
Saving Live Effects as commands
You can save and reuse an effect by creating a command based on it. Using the History panel, you
can automate all the Live Effects applied to an object by creating a command available from the
Commands menu. You can use these commands in batch processing. For more information, see
“Performing commands with a batch process” on page 272.
To save effect settings as a command:
1 Apply the effects to the object.
2 If the History panel is not visible, choose Window > History.
3 Shift-click the range of actions you want to save as a command.
126
Chapter 6: Using Live Effects
4 Do one of the following:
■
■
Choose Save as Command from the History panel Options menu.
Click the Save button at the bottom of the History panel.
Save button
5 Enter a command name and click OK to add the command to the Commands menu.
Editing Live Effects
127
128
Chapter 6: Using Live Effects
CHAPTER 7
Layers, Masking, and Blending
Layers divide a Macromedia Fireworks MX 2004 document into discrete planes, as though the
components of the illustration were drawn on separate tracing paper overlays. A document can be
made up of many layers, and each layer can contain many objects. In Fireworks, the Layers panel
lists layers and the objects contained in each layer. Fireworks layers are similar to layer sets in
Photoshop. Photoshop layers are similar to individual Fireworks objects.
Masking gives you creative control over layers and objects. You can apply masks and blending
modes from the Layers panel. You can also create masks using options on the Select and Modify
menus. You can use a vector object or a bitmap object to block out part of the underlying image.
For example, if you want to block out part of a photograph so that it appears to have an elliptical
frame around it, you can paste an elliptical shape as a mask on top of the photograph. All areas
outside the ellipse disappear as if cropped, showing only the part of the picture inside the ellipse.
Blending techniques give you another level of creative control. You can create unique effects by
blending the colors in overlapping objects. Fireworks has several blending modes to help you
achieve the look you want.
Working with layers
Each object in a document resides on a layer. You can either create layers before you draw or add
layers as needed. The canvas is below all layers and is not itself a layer. For more information, see
Fireworks Help.
You can view the stacking order of layers and objects in the Layers panel. This is the order in
which they appear in the document. Fireworks stacks layers based on the order in which you
created them, placing the most recently created layer on the top of the stack. The stacking order
determines how objects on one layer overlap objects on another. You can rearrange the order of
layers and of objects within layers.
129
The Layers panel displays the current state of all layers in the current frame of a document. To
view other frames, you can use the Frames panel or choose an option from the Frame pop-up
menu at the bottom of the Layers panel. For more information, see “Working with frames”
on page 216.
The name of the active layer is highlighted in the Layers panel. You can expand a layer to view a
list of all the objects on it. The objects are displayed in thumbnails.
Masks are also shown in the Layers panel. Selecting the mask thumbnail allows you to edit the
mask. You can also create new bitmap masks using the Layers panel. For more information about
masking, see “Masking images” on page 134.
Opacity and blend mode controls are at the top of the Layers panel. For more information, see
“Adjusting opacity and applying blends” on page 154.
Expand/Collapse Layer
Show/Hide Layer
Lock/Unlock Layer
Active Layer
Delete Layer
New Bitmap Image
Add Mask
New/Duplicate Layer
Activating layers
When you click a layer or an object on a layer, that layer becomes the active layer. Objects that
you subsequently draw, paste, or import reside initially at the top of the active layer.
To activate a layer, do one of the following:
• Click the layer name in the Layers panel.
• Select an object on that layer.
Adding and removing layers
Using the Layers panel, you can add new layers, delete unwanted layers, and duplicate existing
layers and objects.
When you create a new layer, a blank layer is inserted above the currently selected layer. The new
layer becomes the active layer and is highlighted in the Layers panel. When you delete a layer, the
layer above it becomes the active layer.
Creating a duplicate layer adds a new layer that contains the same objects as the currently selected
one. Duplicated objects retain the opacity and blending mode of the objects from which they
were copied. You can make changes to the duplicated objects without affecting the originals.
130
Chapter 7: Layers, Masking, and Blending
To add a layer, do one of the following:
• Click the New/Duplicate Layer button with no layer selected.
• Choose Edit > Insert > Layer.
• Choose New Layer from the Layers panel Options menu, and click OK.
To delete a layer, do one of the following:
• Drag the layer to the trash can icon in the Layers panel.
• Select the layer and click the trash can icon in the Layers panel.
To duplicate a layer, do one of the following:
• Drag a layer to the New/Duplicate Layer button.
• Select a layer and choose Duplicate Layer from the Layers panel Options menu. Then choose
the number of duplicate layers to insert and where to place them in the stacking order:
At the Top places the new layer or layers at the top of the Layers panel. The Web Layer is
always the top layer, so choosing At the Top places the duplicate layer below the Web Layer.
Before Current Layer places the new layer or layers above the selected layer.
After Current Layer places the new layer or layers below the selected layer.
At the Bottom places the new layer or layers at the bottom of the Layers panel.
To duplicate an object:
• Alt-drag (Windows) or Option-drag (Macintosh) the object to the desired location.
Viewing layers
The Layers panel displays objects and layers in a hierarchical structure. If a document contains
many objects and layers, the Layers panel can become cluttered and difficult to navigate.
Collapsing the display of layers helps eliminate clutter. When you need to view or select specific
objects on a layer, you can expand that layer. You can also expand or collapse all layers at once.
To expand or collapse the objects on a layer:
• Click the Plus (+) or Minus (-) button (Windows) or the triangle (Macintosh) to the left of the
layer name in the Layers panel.
To expand or collapse all layers:
• Alt-click the Plus (+) or Minus (-) button (Windows) or Option-click the triangle (Macintosh)
to the left of the layer name in the Layers panel.
Organizing layers
You can organize layers and objects in a document by naming them and rearranging them in the
Layers panel. Objects can be moved within a layer or between layers.
Moving layers and objects in the Layers panel changes the order in which objects appear on the
canvas. Objects at the top of a layer appear above other objects in that layer on the canvas.
Objects on the topmost layer appear in front of objects on lower layers.
Note: The Layers panel auto-scrolls when you drag a layer or object up or down beyond the bounds
of the viewable area.
Working with layers
131
To name a layer or object:
1 Double-click a layer or object in the Layers panel.
2 Type a new name for the layer or object and press Enter.
Note: The Web Layer cannot be renamed. However, you can name web objects on the Web
Layer, such as slices and hotspots. For more information, see “Using the Web Layer”
on page 134.
To move a layer or object:
• Drag the layer or object to the desired location in the Layers panel.
To move all selected objects on a layer to another location:
• Drag the layer’s blue selection indicator to another layer.
All selected objects on the layer move to the other layer simultaneously.
To copy all selected objects on a layer to another location:
• Alt-drag (Windows) or Option-drag (Macintosh) the layer’s blue selection indicator to
another layer.
Fireworks copies all selected objects on the layer to the other layer.
Protecting layers and objects
The Layers panel offers a number of options that let you control the accessibility of objects.
You can protect objects in your document from inadvertent selection and editing. Locking a layer
prevents objects on that layer from being selected or edited. The Single Layer Editing feature
protects objects on all but the active layer from unwanted selection or changes. You can also use
the Layers panel to control the visibility of objects and layers on the canvas. When an object or
layer is hidden in the Layers panel, it does not appear on the canvas, so it cannot be inadvertently
changed or selected.
Note: Hidden layers and objects are not included when you export your document. Objects on the
Web Layer can always be exported, however, whether they are hidden or not. For more information
about exporting, see “Exporting from Fireworks” on page 247.
To lock a layer:
• Click the square in the column immediately to the left of the layer name.
A padlock icon indicates that the layer is locked.
Note: Although layers can be locked, individual objects cannot.
To lock multiple layers:
• Drag the pointer along the Lock column in the Layers panel.
To lock or unlock all layers:
• Choose Lock All or Unlock All from the Layers panel Options menu.
To turn on or off Single Layer Editing:
• Choose Single Layer Editing from the Layers panel Options menu.
A check mark indicates that Single Layer Editing is active.
132
Chapter 7: Layers, Masking, and Blending
To show or hide a layer or objects on a layer:
• Click the square in the middle column to the left of a layer or object name.
The eye icon indicates that a layer is visible.
To show or hide multiple layers or objects:
• Drag the pointer along the Eye column in the Layers panel.
To show or hide all layers and objects:
• Choose Show All or Hide All from the Layers panel Options menu.
Merging objects in the Layers panel
If you work with bitmap objects, you may find that the Layers panel easily becomes cluttered. You
can merge objects in the Layers panel, if the bottommost selected object is immediately above a
bitmap object. Objects and bitmaps to be merged do not have to be adjacent in the Layers panel
or reside on the same layer.
Merging down causes all selected vector objects and bitmap objects to be flattened into the
bitmap object that lies just beneath the bottommost selected object. The result is a single bitmap
object. Vector objects and bitmap objects cannot be edited separately once merged, and editability
for vector objects is lost.
To merge objects:
1 Select the object or objects on the Layers panel that you want to merge with a bitmap object.
Shift-click to select more than one object.
Tip: You can merge the contents of a selected layer into a bitmap object that is the topmost object
on the layer immediately beneath the selected layer.
2 Do one of the following:
Choose Merge Down from the Layers panel Options menu.
■ Choose Modify > Merge Down.
■ Choose Merge Down from the context menu that appears when you right-click (Windows)
or Control-click (Macintosh) the selected objects on the canvas.
The selected object or objects merge with the bitmap object. The result is a single
bitmap object.
■
Note: Merge Down does not affect slices, hotspots, or buttons.
Sharing layers
You can share a layer across all frames in a document. This allows you to update an object on a
layer and have that object be updated automatically in all frames. This is useful when you want
objects such as background elements to appear on all frames of an animation.
To share a selected layer across frames, do one of the following:
• Choose Share This Layer from the Layers panel Options menu.
• Double-click the layer name in the Layers panel, and select Share Across Frames.
Working with layers
133
Using the Web Layer
The Web Layer is a special layer that appears as the top layer in each document. The Web Layer
contains web objects, such as slices and hotspots, used for assigning interactivity to exported
Fireworks documents. For more information on web objects, see Chapter 9, “Slices, Rollovers,
and Hotspots,” on page 167.
You cannot unshare, delete, duplicate, move, or rename the Web Layer. You also cannot merge
objects that reside on the Web Layer. It is always shared across all frames, and web objects are
visible on every frame.
To rename a slice or hotspot in the Web Layer:
1 Double-click the slice or hotspot in the Layers panel.
2 Type the new name, and then click outside the window or press Enter.
Note: When you rename a slice, that name is used when the slice is exported.
About importing Photoshop grouped layers
Photoshop files that contain layers are imported with each layer placed as a separate object on a
single Fireworks layer. Grouped layers are imported as individual layers, as if the layers were
ungrouped in Photoshop before being imported into Fireworks. The clipping effect on
Photoshop grouped layers is lost on import.
Masking images
As the name suggests, masks hide or show parts of an object or image. You can use several
masking techniques to achieve many kinds of creative effects with objects.
You can create a mask that acts as a cookie cutter, cropping or clipping underlying objects or
images. Or you can create a mask that gives the effect of a foggy window, revealing or hiding
portions of the objects beneath it. This type of mask uses grayscale to make selected objects less
visible or more so. Or you can create a mask that uses its own transparency to affect visibility.
You can create a mask using the Layers panel or the Edit, Select, or Modify menus. After you
create a mask, you can adjust the position of the masked selection on the canvas or modify the
appearance of a mask by editing the mask object. You can also apply transformations to the mask
as a whole or to the components of a mask individually.
About masks
You can create a mask object from either a vector object (a vector mask) or a bitmap object (a
bitmap mask). You can also use multiple objects or grouped objects to create a mask.
134
Chapter 7: Layers, Masking, and Blending
About vector masks
If you have used other vector-illustration applications such as Macromedia FreeHand, you may
be familiar with vector masks, which are sometimes called clipping paths or paste insides. The
vector mask object crops or clips the underlying objects to the shape of its path, creating a
cookie-cutter effect.
A vector mask applied using its path outline
When you create a vector mask, a mask thumbnail with a pen icon appears in the Layers panel to
indicate you’ve created a vector mask.
A vector mask thumbnail in the Layers panel
When a vector mask is selected, the Property inspector displays information about how the mask
is applied. The bottom half of the Property inspector displays additional properties that allow you
to edit the mask object’s stroke and fill.
Vector mask properties in the Property inspector
By default, vector masks are applied using their path outline, but you can also apply them in other
ways. For more information, see “Changing the way masks are applied” on page 149.
Note: Vector masks created in Fireworks 4 that were applied using their grayscale appearance are
imported as uneditable bitmap masks in Fireworks MX 2004.
Masking images
135
About bitmap masks
If you’re Photoshop user, you may be familiar with layer masks. Fireworks bitmap masks are
similar to layer masks in that the pixels of a mask object affect the visibility of underlying objects.
However, Fireworks bitmap masks are much more versatile: you can easily change how they are
applied, whether using their grayscale appearance or their own transparency. In addition, the
Fireworks Property inspector makes mask properties and bitmap tool options more readily
available, greatly simplifying the mask-editing process. When a mask is selected, the Property
inspector displays a variety of properties not only for a selected mask but also for any bitmap tools
you might use to edit the mask.
Original objects and a bitmap mask applied using its grayscale appearance
You can apply bitmap masks in two ways:
• Using an existing object to mask other objects. This technique is similar to applying a
•
vector mask.
Creating what’s known as an empty mask. Empty masks start out as either totally transparent
or totally opaque. A transparent (or white) mask shows the masked object in its entirety, and an
opaque (or black) mask hides the masked object completely. You can use the bitmap tools to
draw on or modify the mask object, revealing or hiding the underlying masked objects.
When you create a bitmap mask, the Property inspector displays information about how the
mask is applied. If you choose a bitmap tool when a bitmap mask is selected, the Property
inspector displays the mask’s properties and options for the selected tool, simplifying the
mask-editing process.
Bitmap mask properties in the Property inspector when a bitmap tool is selected
136
Chapter 7: Layers, Masking, and Blending
By default, most bitmap masks are applied using their grayscale appearance, but you can also
apply them using their alpha channel. For more information, see “Changing the way masks are
applied” on page 149.
Note: Fireworks MX and Fireworks MX 2004 grayscale masks behave more like masks in other
graphics applications than masks in previous versions of Fireworks do. In grayscale masks created in
Fireworks MX and Fireworks MX 2004, white always reveals masked objects, and black always
hides masked objects. Compare this with Fireworks 4, where a black mask reveals underlying objects
and a white mask hides underlying objects.
Creating a mask from an existing object
You can create a mask from an existing object. When used as a mask, a vector object’s path outline
can be used to clip or crop other objects. When a bitmap object is used as a mask, either the
brightness of its pixels or its transparency affects the visibility of other objects.
Masking objects using the Paste as Mask command
Using the Paste as Mask command, you can create masks by masking an object or group of
objects with another object. Paste as Mask creates either a vector mask or a bitmap mask. When
you use a vector object as the mask, Paste as Mask creates a vector mask that crops or clips masked
objects using the path outline of the vector object. When you use a bitmap image as the mask,
Paste as Mask creates a bitmap mask that affects the visibility of masked objects using the
grayscale color values of the bitmap object.
To create a mask with the Paste as Mask command:
1 Select the object you want to use as the mask. Shift-click to select multiple objects.
Note: If you use multiple objects as the mask, Fireworks always creates a vector mask, even if both
objects are bitmaps.
2 Position the selection so that it overlaps the object or group of objects to be masked.
The object or objects you want to use as the mask can be either in front of or behind the
objects or group to be masked.
3 Choose Edit > Cut to cut the object or objects you want to use as the mask.
Masking images
137
4 Select the object or group you want to mask.
If you are masking multiple objects, the objects must be grouped. For more information about
grouping objects, see “Grouping objects” on page 25.
5 Do one of the following to paste the mask:
■
■
Choose Edit > Paste as Mask.
Choose Modify > Mask > Paste as Mask.
A mask applied to an image with a black canvas
The mask in the Layers panel
138
Chapter 7: Layers, Masking, and Blending
Masking objects using the Paste Inside command
If you are a Macromedia FreeHand user, you may be familiar with the Paste Inside method of
creating masks. Paste Inside creates either a vector mask or a bitmap mask, depending on the type
of mask object you use. The Paste Inside command creates a mask by filling a closed path or
bitmap object with other objects: vector graphics, text, or bitmap images. The path itself is
sometimes referred to as a clipping path, and the items it contains are called contents or paste
insides. Contents extending beyond the clipping path are hidden.
The Paste Inside command in Fireworks produces a similar effect to the Paste as Mask command,
with a couple of differences:
• With Paste Inside, the object you cut and paste is the object to be masked. Compare this with
Paste as Mask, where the object you cut and paste is the mask object.
• With vector masks, Paste Inside shows the fill and stroke of the mask object itself. A vector
mask object’s fill and stroke are not visible by default with Paste as Mask. You can turn a vector
mask’s fill and stroke on or off, however, using the Property inspector. For more information,
see “Changing the way masks are applied” on page 149.
To create a mask using the Paste Inside command:
1 Select the object or objects to use as the paste inside contents.
2 Position the object or objects so that they overlap the object into which you want to paste
the contents.
Note: Stacking order is not important, as long as the objects you want to use as the paste
inside contents remain selected. These objects can be above or below the mask object in the
Layers panel.
3 Choose Edit > Cut to move the objects to the Clipboard.
Masking images
139
4 Select the object into which you want to paste the contents. This object will be used as the mask,
or clipping path.
5 Choose Edit > Paste Inside.
The objects you pasted appear to be inside or clipped by the mask object.
Using text as a mask
Text masks are a type of vector mask. You apply text masks just as you apply masks using existing
objects: you simply use text as the mask object. The usual way to apply a text mask is to use its
path outline, but you can apply a text mask using its grayscale appearance as well.
A text mask applied using its path outline
For more information, see “Creating a mask from an existing object” on page 137. For more
information about the different ways masks can be applied, see “Changing the way masks are
applied” on page 149.
140
Chapter 7: Layers, Masking, and Blending
Masking objects using the Layers panel
The quickest way to add an empty, transparent bitmap mask is through the Layers panel. The
Layers panel adds a white mask to an object, which you can customize by drawing on it with the
bitmap tools.
Note: For details on creating empty, opaque (or black) masks, see “Masking objects using the Reveal
and Hide commands” on page 142.
To create a bitmap mask using the Layers panel:
1 Select the object you want to mask.
2 Click the Add Mask button at the bottom of the Layers panel.
3
4
5
6
Fireworks applies an empty mask to the selected object. The Layers panel displays a mask
thumbnail representing the empty mask.
Optionally, if the masked object is a bitmap, use one of the marquee or lasso tools to create a
pixel selection.
Choose a bitmap painting tool from the Tools panel, such as the Brush, Pencil, Paint Bucket,
or Gradient tool.
Set the desired tool options in the Property inspector.
With the mask still selected, draw on the empty mask. In the areas where you draw, the
underlying masked object is hidden.
Image with mask applied
The mask as it appears in the Layers panel
Note: For more information about modifying a bitmap mask’s appearance by drawing on it, see
“Modifying a mask’s appearance” on page 148.
Masking images
141
Masking objects using the Reveal and Hide commands
The Modify > Mask submenu has several options for applying empty bitmap masks to objects:
Reveal All applies an empty, transparent mask to an object, revealing the entire object. To achieve
the same effect, click the Add Mask button in the Layers panel.
Hide All applies
an empty, opaque mask to an object, which hides the entire object.
Reveal Selection can be used only with pixel selections. It applies a transparent pixel mask using
the current pixel selection. The other pixels in the bitmap object are hidden. To achieve the same
effect, make a pixel selection, then click the Add Mask button.
Hide Selection can
be used only with pixel selections. It applies an opaque pixel mask using the
current pixel selection. The other pixels in the bitmap object are shown. To achieve the same
effect, make a pixel selection, then Alt-click (Windows) or Option-click (Macintosh) the Add
Mask button.
To use the Reveal All and Hide All commands to create a mask:
1 Select the object you want to mask.
2 Do one of the following to create the mask:
Choose Modify > Mask > Reveal All to show the object.
■ Choose Modify > Mask > Hide All to hide the object.
3 Choose a bitmap painting tool from the Tools panel, such as the Brush, Pencil, or Paint Bucket.
4 Set the desired tool options in the Property inspector.
If you’ve applied a Hide All mask, you must choose a color other than black.
5 Draw on the empty mask. In the areas where you draw, the underlying masked object is either
hidden or shown, depending on the type of mask you applied.
■
Note: For more information about modifying a bitmap mask’s appearance by drawing on it, see
“Modifying a mask’s appearance” on page 148.
To use Reveal Selection and Hide Selection commands to create a mask:
1 Choose the Magic Wand or any marquee or lasso tool from the Tools panel.
2 Select pixels in a bitmap.
Original image; pixels selected with the Magic Wand
142
Chapter 7: Layers, Masking, and Blending
3 Do one of the following to create the mask:
■
■
Choose Modify > Mask > Reveal Selection to show the area defined by the pixel selection.
Choose Modify > Mask > Hide Selection to hide the area defined by the pixel selection.
The results of Reveal Selection and Hide Selection
A bitmap mask is applied using the pixel selection. You can further edit the mask to reveal
or hide the remaining pixels of the masked object using the bitmap tools in the Tools panel.
For more information about modifying a bitmap mask’s appearance by drawing on it, see
“Modifying a mask’s appearance” on page 148.
About importing and exporting Photoshop layer masks
In Photoshop, you can mask images using layer masks or grouped layers. Fireworks lets you
successfully import images that employ layer masks without losing the ability to edit them. Layer
masks are imported as bitmap masks.
Fireworks masks can also be exported to Photoshop. They are converted into Photoshop layer
masks. If the masked objects include text and you want to maintain text editability in Photoshop,
you must choose Maintain Editability over Appearance when exporting.
Note: If text is used as the mask object, it is converted to a bitmap and is no longer editable as text
after it is imported into Photoshop.
Grouping objects to form a mask
You can group two or more objects to create a mask. The topmost object becomes the
mask object.
You can group objects as either bitmap masks or vector masks. The stacking order determines the
type of mask applied. If the top object is a vector object, the result is a vector mask. If the top
object is a bitmap object, the result is a bitmap mask.
Note: For more information about vector and bitmap masks, see “About masks” on page 134.
Masking images
143
To group objects to form a mask:
1 Shift-click two or more overlapping objects.
You can select objects from different layers.
2 Choose Modify > Mask > Group as Mask.
Editing masks
You can modify masks in many ways. By modifying a mask’s position, shape, and color, you can
change the visibility of masked objects. You can also change a mask’s type and the way it is
applied. In addition, masks can be replaced, disabled, or deleted.
The results of editing a mask are immediately visible, even if the mask object itself is not visible
on the canvas. The mask thumbnail in the Layers panel displays the edits you make to the mask.
Masked objects can also be modified. You can rearrange masked objects without moving the
mask. You can also add additional masked objects to an existing mask group.
Selecting masks and masked objects using mask thumbnails
Masks and masked objects can be easily identified and selected using the thumbnails in the Layers
panel. Thumbnails allow you to easily select and edit just the mask or the masked objects, without
affecting the other objects.
144
Chapter 7: Layers, Masking, and Blending
When you select the mask thumbnail, the mask icon appears beside it in the Layers panel, and the
mask’s properties show in the Property inspector, where they can be changed if desired.
To select a mask:
• Click the mask thumbnail in the Layers panel.
The Layers panel displays a yellow highlight around a mask thumbnail when it is selected.
To select masked objects:
• Click the masked object thumbnail in the Layers panel.
The Layers panel displays a blue highlight around a masked object’s thumbnail when it is
selected.
Selecting masks and masked objects using the Subselection tool
You can use the Subselection tool to select individual masks and masked objects on the canvas
without selecting the other components of the mask.
When you select a mask or a masked object with the Subselection tool, the Property inspector
shows the properties for the selected object.
To select a mask or masked object independently:
• Click the object on the canvas with the Subselection tool.
When selected, masks have a yellow highlight and masked objects have a blue highlight.
Masking images
145
Moving masks and masked objects
You can reposition masks and masked objects. They can be moved together or independently.
To move a mask and its masked objects together:
1 Select the mask on the canvas using the Pointer tool.
2 Drag the mask to a new location, but don’t drag the move handle unless you want to move the
masked object separately from the mask.
To move masks and masked objects independently by unlinking:
1 Click the link icon on the mask in the Layers panel.
This unlinks masks from masked objects so that they can be moved independently.
Link icon
2 Select the thumbnail of the object you want to move: the mask or the masked objects.
3 Drag the object or objects on the canvas with the Pointer tool.
Note: If there is more than one masked object, all masked objects move together.
4 Click between the mask thumbnails in the Layers panel. This relinks the masked objects
to the mask.
146
Chapter 7: Layers, Masking, and Blending
To move a mask independently using its move handle:
1 Select the mask on the canvas using the Pointer tool.
2 Choose the Subselection tool and drag the mask’s move handle to a new location.
To move masked objects independently of the mask using the move handle:
1 Select the mask on the canvas using the Pointer tool.
2 Drag the move handle to a new location.
The objects move without affecting the position of the mask.
Note: If there is more than one masked object, all masked objects move together.
To move masked objects independently of each other:
• Click the object with the Subselection tool to select it, then drag the object.
This is the only way to select and move an individual masked object without moving other
masked objects.
Masking images
147
Modifying a mask’s appearance
By modifying a mask’s shape and color, you can change the visibility of masked objects.
You change the shape of a bitmap mask by drawing on it with the bitmap tools. You change the
shape of a vector mask by moving the mask object’s points.
If a mask is applied using its grayscale appearance, you can modify its colors to affect the opacity
of the underlying masked objects. Using midtone colors on a grayscale mask gives masked objects
a translucent appearance. Use lighter colors to display the masked objects, and darker colors to
hide masked objects and show the background.
You can also alter a mask by adding mask objects to it or using the transformation tools.
To modify a selected mask’s shape, do one of the following:
• Draw on a bitmap mask with any of the bitmap drawing tools.
• Move the points of a vector mask object with the Subselection tool.
To modify a selected mask’s color, do one of the following:
• For grayscale bitmap masks, use the bitmap tools to draw on the mask using various grayscale
•
color values.
For grayscale vector masks, change the color of the mask object.
Note: Use lighter colors to display the masked objects and darker colors to hide the masked
objects.
To modify a mask by adding more mask objects:
1 Choose Edit > Cut to cut the selected object or objects you want to add.
2 Select the thumbnail of the masked object in the Layers panel.
3 Choose Edit > Paste as Mask.
4 Choose Add when asked whether to replace the existing mask or add to it.
The object or objects are added to the mask.
To modify a mask using the transformation tools:
1 Select the mask on the canvas using the Pointer tool.
2 Use a transformation tool or a command from the Modify > Transform submenu to apply a
transformation to the mask. For more information about using the transformation tools, see
“Transforming and distorting selected objects and selections” on page 21.
The transformation is applied to the mask and its masked objects.
Note: You can apply a transformation to the mask object alone by first unlinking the mask from the
mask objects in the Layers panel and then performing the transformation.
148
Chapter 7: Layers, Masking, and Blending
Changing the way masks are applied
You can use the Property inspector to ensure that you are editing a mask and to identify the type
of mask you are working on. When a mask is selected, the Property inspector lets you change the
way the mask is applied. If the Property inspector is minimized, click the expander arrow to see all
properties.
Vector masks are applied using their path outline by default. The outline of the path or text is
used as the mask. Optionally, you can show the mask’s fill and stroke. This produces the same
result as using Paste Inside to create masks. For more information, see “Creating a mask from an
existing object” on page 137.
A vector mask applied using its path outline with Show Fill and Stroke enabled
By applying a bitmap mask using its alpha channel, you can create a mask that looks similar to a
vector mask applied using its path outline. When you apply a mask using its alpha channel, the
transparency of the mask object affects the visibility of the object being masked.
A bitmap mask applied using its alpha channel
Masking images
149
Both vector and bitmap masks can be applied using their grayscale appearance. Bitmap masks are
applied using their grayscale appearance by default. When a mask is applied using its grayscale
appearance, the lightness of its pixels determines how much of the masked object is displayed.
Light pixels display the masked object. Darker pixels in the mask knock out the image and show
the background. Applying masks using their grayscale appearance creates interesting effects if the
mask object contains a pattern or gradient fill.
A vector mask with a pattern fill applied using its grayscale appearance
You can also convert vector masks into bitmap masks. Bitmap masks cannot be converted into
vector masks, however.
For more information about vector and bitmap masks, see “About masks” on page 134.
To apply a vector mask using its path outline:
• Choose Path Outline in the Property inspector when a vector mask is selected.
To show a vector mask’s fill and stroke:
• Choose Show Fill and Stroke in the Property inspector when a vector mask that has been
applied using its path outline is selected.
To apply a bitmap mask using its alpha channel:
• Choose Alpha Channel in the Property inspector when a bitmap mask is selected.
To apply a vector or bitmap mask using its grayscale appearance:
• Choose Grayscale Appearance in the Property inspector when a mask is selected.
To convert a vector mask to a bitmap mask:
1 In the Layers panel, select the thumbnail of the mask object.
2 Choose Modify > Flatten Selection.
150
Chapter 7: Layers, Masking, and Blending
Adding objects to a masked selection
You can add more objects to an existing masked selection.
To add masked objects to a masked selection:
1 Choose Edit > Cut to cut the selected object or objects you want to add.
2 Select the thumbnail of the masked object in the Layers panel.
3 Choose Edit > Paste Inside.
The object or objects are added to the masked objects.
Note: Using the Paste Inside command on an existing mask won’t show the mask object’s stroke
and fill unless the original mask was applied using its stroke and fill.
Replacing, disabling, and deleting masks
You can replace a mask with a new mask object. You can also disable or delete a mask. Disabling a
mask temporarily hides it. Deleting a mask permanently removes it.
To replace a mask:
1 Choose Edit > Cut to cut the selected object or objects you want to use as the mask.
2 Select the thumbnail of the masked object in the Layers panel and choose Edit > Paste as Mask.
3 Click Replace when asked whether to replace the existing mask or add to it.
The existing mask object is replaced with the new one.
To disable or enable a selected mask, do one of the following:
• Choose Disable Mask or Enable Mask from the Layers panel Options menu.
• Choose Modify > Mask > Disable Mask or Modify > Mask > Enable Mask.
A red X appears on the mask thumbnail when it is disabled. Clicking the X enables the mask.
To delete a selected mask:
1 Do one of the following to delete the mask:
Choose Delete Mask from the Layers panel Options menu.
■ Choose Modify > Mask > Delete Mask.
■ Drag the mask thumbnail to the trash can icon in the Layers panel.
2 Choose whether you want to apply or discard the effect of the mask on the masked objects
before deleting the mask:
Apply keeps the changes you have made to the object, but the mask is no longer editable. If the
object being masked is a vector object, the mask and vector object are converted into a single
bitmap image.
Discard gets rid of the changes you have made and restores the object to its original form.
Cancel stops the delete operation and leaves the mask intact.
■
Masking images
151
Blending and transparency
Compositing is the process of varying the transparency or color interaction of two or more
overlapping objects. In Fireworks, blending modes allow you to create composite images.
Blending modes also add a dimension of control to the opacity of objects and images.
About blending modes
When you choose a blending mode, Fireworks applies it to the selected objects in their entirety.
Objects in a single document or on a single layer can have blending modes that differ from those
of other objects in the document or on the layer.
When objects with different blending modes are grouped, the group’s blending mode
overrides individual blending modes. Ungrouping the objects restores each object’s individual
blending mode.
A blending mode contains these elements:
is the color to which the blending mode is applied.
Blend color
is the degree of transparency to which the blending mode is applied.
Opacity
Base color is
Result color
the color of pixels underneath the blend color.
is the result of the blending mode’s effect on the base color.
These are the blend modes in Fireworks:
Normal
applies no blending mode.
Multiply
multiplies the base color by the blend color, resulting in darker colors.
Screen
multiplies the inverse of the blend color by the base color, resulting in a bleaching effect.
Darken selects the darker of the blend color and base color to use as the result color. This replaces
only pixels that are lighter than the blend color.
Lighten selects the lighter of the blend color and base color to use as the result color. This replaces
only pixels that are darker than the blend color.
Difference subtracts the blend color from the base color or the base color from the blend color.
The color with less brightness is subtracted from the color with more brightness.
Hue combines the hue value of the blend color with the luminance and saturation of the base
color to create the result color.
combines the saturation of the blend color with the luminance and hue of the base
color to create the result color.
Saturation
combines the hue and saturation of the blend color with the luminance of the base color
to create the result color, preserving the gray levels for coloring monochrome images and tinting
color images.
Color
Luminosity
combines the luminance of the blend color with the hue and saturation of the
base color.
Invert
Tint
adds gray to the base color.
Erase
152
inverts the base color.
removes all base color pixels, including those in the background image.
Chapter 7: Layers, Masking, and Blending
Blending mode examples
Original image
Normal
Multiply
Screen
Darken
Lighten
Difference
Hue
Saturation
Color
Luminosity
Invert
Tint
Erase
Blending and transparency
153
Adjusting opacity and applying blends
You can use the Property inspector or the Layers panel to adjust the opacity of selected objects and
to apply blending modes. An Opacity setting of 100 renders an object completely opaque. A
setting of 0 (zero) renders an object completely transparent.
You can also specify a blending mode and opacity before you draw an object.
To specify a blending mode and opacity before you draw an object:
• With the desired tool selected in the Tools panel, set blend and opacity options in the Property
inspector before you draw the object.
Note: Blend and opacity options are not available for all tools.
To set a blending mode and opacity level for existing objects:
1 With two objects overlapping, select the top object.
2 Choose a blending option from the Blend Mode pop-up menu in the Property inspector or the
Layers panel.
3 Choose a setting from the Opacity pop-up slider or type a value in the text box.
To set a default blending mode and opacity level to be applied to objects as you draw them:
1 Choose Select > Deselect to avoid inadvertently applying a blending mode and opacity.
2 With a vector or bitmap drawing tool selected, choose a blending mode and opacity level in the
Property inspector.
The blending mode and opacity level you choose are used as the default for any objects you
subsequently draw with that tool.
About the Fill Color Live Effect
Fireworks also offers a Live Effect that allows you to adjust the color of an object by altering the
object’s opacity and blend mode. This Live Effect, called Fill Color, produces the same effect as
overlapping an object with one that has a different opacity and blend mode. For more details on
using the Fill Color Live Effect, see Chapter 6, “Using Live Effects,” on page 119.
154
Chapter 7: Layers, Masking, and Blending
CHAPTER 8
Using Styles, Symbols, and URLs
Macromedia Fireworks MX 2004 provides three panels in which you can store and reuse styles,
symbols, and URLs. Styles are stored in the Styles panel, symbols are stored in the Library panel,
and URLs are stored in the URL panel. By default, all three panels are organized in the Assets
panel group.
The Styles panel contains a set of predefined Fireworks styles to choose from. In addition, if you
have created a combination of strokes, fills, effects, and text attributes and want to reuse it, you
can save the attributes as a style. Rather than rebuilding attributes each time, you can simply save
them in the Styles panel and then apply that combination of attributes to other objects.
Fireworks has three types of symbols: graphic, animation, and button. Each has unique
characteristics for its specific use. You can create new symbols, as well as duplicate, import, and
edit symbols, using the Library panel. For information on specific features built into the
animation and button symbols, see Chapter 11, “Creating Animation,” on page 211 and
Chapter 10, “Creating Buttons and Pop-up Menus,” on page 191.
A URL, or Uniform Resource Locator, is an address of a specific page o r file on the Internet. If
you are using the same URL many times, you can add it to the URL panel. You can organize and
group your URLs in URL libraries.
Using styles
You can save and reapply a set of predefined fill, stroke, effect, and text attributes by creating a
style. When you apply a style to an object, that object takes on the style’s characteristics.
Fireworks has many predefined styles. You can add, change, and remove styles. The Fireworks
CD-ROM and the Macromedia web site have many more predefined styles that you can import
into Fireworks. You can also export styles and share them with other Fireworks users or import
styles from other Fireworks documents.
Note: You cannot apply styles to bitmap objects.
155
Applying a style
You can use the Styles panel to create, store, and apply styles to objects or text.
Styles panel
When you apply a style to an object, you can later update the style without affecting the original
object. Fireworks does not keep track of which style you applied to an object. If you delete a
custom style, you cannot recover it; however, any object currently using the style retains its
attributes. If you delete a style supplied in Fireworks, you can recover it and all other deleted styles
using the Reset Styles command in the Styles panel Options menu. However, resetting styles also
deletes your custom styles.
To apply a style to a selected object or text block:
1 Choose Window > Styles to open the Styles panel.
2 Click a style in the Styles panel.
Creating and deleting styles
You can create a style based on the attributes of a selected object. The style is displayed in
the Styles panel.
You can also delete styles from the Styles panel.
The following attributes can be saved in a style:
• Fill type and color, including patterns, textures, and vector gradient attributes such as angle,
position, and opacity
• Stroke type and color
• Effects
• Text attributes such as font, point size, style (bold, italic, or underline), alignment, antialiasing, auto-kerning, horizontal scale, range kerning, and leading
156
Chapter 8: Using Styles, Symbols, and URLs
To create a new style:
1 Create or select a vector object or text with the stroke, fill, effect, or text attributes you want.
2 Click the New Style button at the bottom of the Styles panel.
3 Choose the attributes you want to be part of the style from the New Style dialog box.
Note: To save other text attributes not listed, such as alignment, anti-aliasing, auto-kerning,
horizontal scale, range kerning, and leading, choose the Text Other option.
4 Name the style if you wish, and click OK.
An icon depicting the style appears in the Styles panel.
To base a new style on an existing style:
1 Apply the existing style to a selected object.
2 Edit the attributes of the object.
3 Save the attributes by creating a new style, as described in the previous procedure.
To delete a style:
1 Select a style from the Styles panel.
Shift-click to select multiple styles; Control-click (Windows) or Command-click (Macintosh)
to select multiple noncontiguous styles.
2 Click the Delete Style button in the Styles panel.
Editing styles
If you want to change the attributes that a style contains, you can edit the style from the
Styles panel.
To edit a style:
1 Choose Select > Deselect to deselect any objects on the canvas.
2 Double-click a style in the Styles panel.
3 In the Edit Style dialog box, choose or deselect components of the attributes you wish to apply.
The Edit Style dialog box contains the same options as the New Style dialog box. For details on
choosing attributes to include in a style, see “Creating and deleting styles” on page 156.
4 Click OK to apply the changes to the style.
Exporting and importing styles
You may want to share styles with other Fireworks users to save time and maintain consistency.
You can share styles by exporting them for use on other computers.
To export styles:
1 Select a style from the Styles panel.
Shift-click to select multiple styles; Control-click (Windows) or Command-click (Macintosh)
to select multiple noncontiguous styles.
2 Choose Export Styles from the Styles panel Options menu.
3 Enter a name and location for the document that will contain the saved styles.
4 Click Save.
Using styles
157
To import styles:
1 Choose Import Styles from the Styles panel Options menu.
2 Choose a styles document to import.
All styles in the styles document are imported and placed directly after the selected style in the
Styles panel.
Using style defaults
If you want to delete all custom styles from the Styles panel and restore any deleted default styles,
you can reset the Styles panel to its default state. You can also change the size of the icons
displayed in the Styles panel.
To reset the Styles panel to the default styles:
• Choose Reset Styles from the Styles panel Options menu.
Note: Resetting styles to the default removes any custom styles you may have saved.
To change the size of the style preview icons:
• Choose Large Icons from the Styles panel Options menu to switch between large and small
preview sizes.
Applying attributes without creating a style
You can copy attributes from one object and apply them to other objects, without creating a new
style in the Styles panel. You can use this method to quickly apply attributes to an object when
you are not planning to reapply those attributes to other objects. Attributes that can be copied
and applied include fills, strokes, effects, and text attributes.
To copy attributes from one object and apply them to other objects:
1 Select the object whose attributes you want to copy.
2 Choose Edit > Copy.
3 Deselect the original object, then select the object or objects to which you want to apply the
new attributes.
4 Choose Edit > Paste Attributes.
The selected objects take on the same attributes as the original object.
Using symbols
Fireworks has three types of symbols: graphic, animation, and button. Each has unique
characteristics for its specific use. Instances are representations of a Fireworks symbol. When the
symbol object (the original) is edited, the instances (copies) automatically change to reflect the
modifications to the symbol.
Symbols are useful whenever you want to reuse a graphic element. You can place instances in
multiple Fireworks documents and retain the association with the symbol. Symbols are helpful for
creating buttons and animating objects across multiple frames. For more information about the
additional features built into animation and button features, see “Creating animation symbols”
on page 212 and “Creating button symbols” on page 191.
158
Chapter 8: Using Styles, Symbols, and URLs
Creating a symbol
You can create graphic, animation, and button symbols using the Edit > Insert submenu. You
can create a symbol from any object, text block, or group, and then organize them in the Library
panel. To place instances in a document, you simply drag them from the Library panel onto
the canvas.
To create a new symbol from a selected object:
1 Select the object and choose Modify > Symbol > Convert to Symbol.
2 Type a name for the symbol in the Name text box of the Symbol Properties dialog box.
3 Choose a symbol type: Graphic, Animation, or Button. Then click OK.
The symbol appears in the library, the selected object becomes an instance of the symbol, and
the Property inspector displays symbol options.
To create a symbol from scratch:
1 Do one of the following:
Choose Edit > Insert > New Symbol.
Choose New Symbol from the Library panel Options menu.
2 Choose a symbol type: Graphic, Animation, or Button. Then click OK.
Depending on which symbol type you choose, the Symbol Editor or Button Editor opens.
3 Create the symbol using the tools in the Tools panel, then close the editor.
■
■
For more information, see “Creating button symbols” on page 191 and “Creating animation
symbols” on page 212.
Placing instances
You can place instances of a symbol in the current document.
To place an instance:
• Drag a symbol from the Library panel to the current document.
An instance of a symbol on the canvas
Using symbols
159
Editing symbols
You can modify a symbol in the Symbol Editor, which automatically updates all associated
instances when you finish editing.
Note: For most types of edits, modifying an instance affects the symbol and all other instances. There
are some exceptions, however. For more information, see “Editing instances” on page 160.
To edit a symbol and all its instances:
1 Do one of the following to open the Symbol Editor:
Double-click an instance.
Select an instance and choose Modify > Symbol > Edit Symbol.
2 Make changes to the symbol and close the window.
The symbol and all instances reflect the modifications.
■
■
To rename a symbol:
1 Double-click the symbol name in the Library panel.
2 Change the name in the Symbol Properties dialog box and click OK.
To duplicate a symbol:
1 In the Library panel, select the symbol.
2 Choose Duplicate from the Library panel Options menu.
To change a symbol’s type:
1 Double-click the symbol name in the Library.
2 Choose a different Symbol Type option.
To select all unused symbols in the Library panel:
• Choose Select Unused Items from the Library panel Options menu.
To delete a symbol:
1 In the Library panel, select the symbol.
2 Choose Delete from the Library panel Options menu.
3 Click Delete. The symbol and all its instances are deleted.
Editing instances
When you double-click an instance to edit it, you’re actually editing the symbol itself in the
Symbol Editor or Button Editor. To edit only the current instance, you need to break the link
between the instance and the symbol. This permanently breaks the relationship between the two,
however, and any future edits you make to the symbol won’t be reflected in the former instance.
Button symbols have several convenient features that allow you to retain the symbol-instance
relationship for a group of buttons, while assigning unique button text and URLs to each
instance. For more information, see “Editing button symbols” on page 196.
160
Chapter 8: Using Styles, Symbols, and URLs
Breaking symbol links
You can modify an instance without affecting the symbol or other instances by first breaking the
link between it and the symbol.
To release an instance from a symbol:
1 Select the instance.
2 Choose Modify > Symbol > Break Apart.
The selected instance becomes a group. The symbol in the Library panel is no longer
associated with that group. After separation from the symbol, a former button instance
loses its button symbol characteristics and a former animation instance loses its animation
symbol characteristics.
Editing instance properties
These instance properties can be modified in the Property inspector without affecting the symbol
or other instances:
•
•
•
•
•
Blending mode
Opacity
Effects
Width and height
x and y coordinates
Note: Button instances have additional properties that can be edited without affecting the symbol.
For more information about editing button instances, see “Editing button symbols” on page 196.
To edit instance properties without affecting the symbol or breaking the symbol link:
1 Select the instance.
2 Modify instance properties in the Property inspector.
Importing and exporting symbols
The Library panel stores animation, graphic, and button symbols that you create in the current
document. It also stores symbols that you import into the current document. The Library panel is
specific to the current document, but you can use the symbols from one library in more than one
Fireworks document by importing and exporting, cutting and pasting, or dragging and dropping.
You can import symbols from other libraries, including libraries containing symbols prepared in
Macromedia Fireworks and libraries containing symbols that you or someone else previously
exported. Conversely, if you have created symbols that you would like to reuse or share, you can
export your own symbol libraries. When you export a symbol library, it is exported as a PNG file.
Using symbols
161
Importing symbols
Fireworks has symbol libraries in the Edit > Libraries submenu from which you can import
prepared animation symbols, graphic symbols, and button symbols, as well as navigation bars and
multisymbol themes. Using these symbols, you can quickly create a sophisticated web page
containing advanced navigation elements without having to spend time creating original symbols.
To import one or more prepared symbols from a Fireworks symbol library:
1 Open a Fireworks document.
2 Choose Edit > Libraries and choose a library:
opens a collection of animated symbols.
opens a collection of graphic symbols resembling various list bullets.
Buttons opens a collection of 2-, 3-, and 4-state Fireworks button symbols.
Themes opens a list of animation, graphic, and button symbols; each theme consists of a
similarly designed and similarly named trio of symbols that are color-coordinated to be
used together.
Other opens an Open dialog box from which you can navigate to previously exported symbol
library PNG files. For more information, see the next procedure.
Animations
Bullets
In addition, you can import symbols from previously exported library PNG files located on your
hard disk, on a CD, or on a network. For more information about exporting symbols, see
“Exporting symbols” on page 163.
To import symbols from another file into the current document:
1 Do one of the following:
Choose Import Symbols from the Library panel Options menu.
■ Choose Edit > Libraries > Other.
2 Navigate to the folder containing the file, choose the file, and click Open.
3 Select the symbols to import and click Import.
The imported symbols appear in the Library panel.
■
You can also import and export individual symbols into and out of the Library panels of multiple
documents by dragging and dropping or copying and pasting instances.
162
Chapter 8: Using Styles, Symbols, and URLs
To import a symbol by dragging and dropping or copying and pasting, do one of the
following:
• Drag a symbol instance from the document containing the symbol into the
destination document.
• Copy a symbol instance in the document containing the symbol, then paste it into the
destination document.
The symbol is imported into the Library panel of the destination document and retains a
relationship to the symbol in the original document. For more information, see “Updating
exported symbols and instances in multiple documents” on page 163.
Exporting symbols
If you have created or imported symbols in a Fireworks document and want to save them to reuse
in other documents or share with others, you can use the Library panel Options menu to export
them in a PNG file. You can then import the symbols by navigating to the PNG file that contains
the symbols using the Edit > Libraries submenu. For more information, see “Importing symbols”
on page 162.
To export symbols:
1 Choose Export Symbols from the Library panel Options menu.
2 Select the symbols to export, and click Export.
3 Navigate to a folder, type a name for the symbol file, and click Save.
Fireworks saves the symbols in a single PNG file.
Updating exported symbols and instances in multiple documents
Imported symbols maintain their link to their original symbol document. You can edit the
original symbol document, and then update the target documents to reflect the edits.
To update all exported symbols and instances:
1 In the original document, double-click an instance or select an instance and choose
Modify > Symbol > Edit Symbol to open the appropriate symbol editor.
2 Modify the symbol, and close the editor.
3 Save the file.
4 In the document into which the symbol was imported, select the symbol in the Library panel.
5 Choose Update from the Library panel Options menu.
Note: To update all imported symbols, select all the symbols in the Library panel and
choose Update.
Using symbols
163
Working with URLs
Assigning a URL to a web object creates a link to a file such as a web page. You can assign URLs
to hotspots, buttons, and slice objects. When you intend to use the same URLs several times, you
can create a URL library in the URL panel and store the URLs in the library. You use the URL
panel to add, edit, and organize your URLs.
For example, if your website contains several navigation buttons to return to your home page, you
can add the URL for your home page to the URL panel. Then you assign this URL to each
navigation button by selecting it in the URL library. You can use the Find and Replace feature to
change a URL across multiple documents (see “Finding and replacing” on page 264).
URL libraries are available for all Fireworks documents and are saved between sessions.
URL panel
Assigning a URL to a web object
To assign a URL to a web object:
1 Enter the URL in the Link text box.
2 Click the Plus (+) button to add the URL.
3 Select a web object.
4 Select the URL from the URL preview pane.
Creating a URL library
You can group URLs in libraries. This keeps related URLs together, making them easier to
access. You can save URLs in the default URL library, URLs.htm, or in new URL libraries that
you create. You can also import an existing HTML document’s URLs and then create a library
of them.
URLs.htm and any new libraries you create are stored in the URL Libraries folder in the
Macromedia/Fireworks MX 2004 folder in your user-specific Application Data (Windows) or
Application Support (Macintosh) folder. For information on locating this folder, see “Working
with configuration files” on page 286.
164
Chapter 8: Using Styles, Symbols, and URLs
To create a new URL library:
1 Choose New URL Library from the URL panel Options menu.
2 Enter the library name in the text box and click OK.
The new library name appears in the Library pop-up menu in the URL panel.
To add a new URL to a URL library:
1 Choose a library from the Library pop-up menu.
2 Enter a URL in the Link text box.
3 Click the Plus (+) button.
The Plus (+) button adds the current URL to the library.
You can further organize your URLs by adding only those that are in use in your document.
To simultaneously add a URL to the library while assigning it to a web object:
1 Select the object.
2 Do one of the following to enter the URL:
Choose Add URL from the URL panel Options menu, enter an absolute or relative URL,
and click OK.
■ Enter a URL in the Link text box. Click the Plus (+) button.
The URL appears in the URL preview pane. See “Assigning URLs” on page 180 and “Setting
the URL for a button symbol or instance” on page 198.
■
To add used URLs to a URL library:
1 Choose a library from the Library pop-up menu.
2 Choose Add Used URLs to Library from the URL panel Options menu.
To delete a selected URL from the URL preview panel:
• Click the Delete URL from Library button at the bottom of the URL panel.
To delete all unused URLs from the library:
1 Choose Clear Unused URLs from the URL panel Options menu.
2 Click OK.
Editing URLs
You can easily edit URLs using the URLs panel. You can edit just a single occurrence of a URL,
or you can make your changes ripple throughout the document.
To edit a URL:
1 Select the URL to be edited from the URL preview pane.
2 Choose Edit URL from the URL panel Options menu.
3 Edit the URL. Select Change All Occurrences in Document if you want to update this link
throughout the entire document.
Working with URLs
165
About absolute and relative URLs
When you enter a URL in the URL panel, you can enter an absolute or relative URL:
• If you are linking to a web page that is beyond your own website, you must use an
•
absolute URL.
If you are linking to a web page within your website, you can use an absolute URL or a
relative URL.
Absolute URLs are complete URLs that include the server protocol, which is usually http:// for
web pages. For example, http://www.macromedia.com/support/fireworks is the absolute URL for
the Macromedia Fireworks Support web page. Absolute URLs remain accurate regardless of the
location of the source document, but they do not link correctly if the target document is moved.
Relative URLs are relative to the folder containing the source document. These examples show
the navigation syntax of relative URLs:
• file.htm links to a file located in the same folder as the source document.
• ../../file.htm links to a file located in the folder two levels above the folder containing the
source document. Each ../ represents one level.
• htmldocs/file.htm links to a file located in a folder named htmldocs, which is in the folder
containing the source document.
Relative URLs are usually the simplest ones to use for links to files that will always remain in the
same folder as the current document.
Importing and exporting URLs
If the URL panel contains URLs that you want to use again in other Fireworks documents, you
can export them for later use. You can then easily import them into any of your other Fireworks
documents for easy access.
You can also import all URLs referenced in any existing HTML document.
To export URLs:
1 Choose Export URLs from the URL panel Options menu.
2 Enter a filename and click Save.
An HTML file is created. This file contains the URLs you have exported.
To import URLs:
1 Choose Import URLs from the URL panel Options menu.
2 Select an HTML file and click Open.
All URLs in this file are imported.
166
Chapter 8: Using Styles, Symbols, and URLs
CHAPTER 9
Slices, Rollovers, and Hotspots
Slices are the basic building blocks for creating interactivity in Macromedia Fireworks MX 2004.
Slices are web objects—they exist not as images, but ultimately as HTML code. You can view,
select, and rename them through the Web Layer in the Layers panel. This chapter discusses the
concepts central to slicing and gives procedures for using slices to incorporate interactivity into
your web pages.
Using the drag-and-drop rollover method of attaching interactivity to slices, you can quickly
create rollover and swap-image effects in the workspace. You can view the assigned behaviors in
the Behaviors panel and create more complex interactions using this panel.
You can also incorporate interactivity into your web pages with hotspots. Hotspots are used to
create an image map, which is HTML code that defines a hot region in an HTML document.
These regions do not necessarily link anywhere; they could just trigger a behavior or define
alternate text. Hotspots can also receive mouse events, allowing JavaScript behaviors to be acted
on in slices.
Creating and editing slices
Slicing cuts up a Fireworks document into smaller pieces and exports each piece as a separate file.
Upon export, Fireworks also creates an HTML file containing table code to reassemble the
graphic in a browser.
Slicing cuts a document into multiple pieces, which are exported as separate files.
Slicing an image has at least three major advantages:
167
Optimizing One challenge of web graphic design is ensuring that images download quickly
without sacrificing quality. Slicing enables you to optimize each individual slice using the most
appropriate file format and compression settings. For more information, see Chapter 12,
“Optimizing and Exporting,” on page 225.
You can use slices to create areas that respond to mouse events. For information on
attaching interactivity to slices, see “Making slices interactive” on page 173.
Interactivity
Updating parts of a web page Slicing allows you to easily update parts of a web page that
change frequently. For example, your company’s web page might have an employee-of-the-month
section that changes monthly. Slicing enables you to quickly change just the employee’s name and
photo without replacing the entire page.
Creating slice objects
You can create a slice object by drawing it with the Slice tool or by inserting a slice based on a
selected object.
The lines extending from the slice object are slice guides, which determine the boundaries of the
separate image files into which the document is split on export. These guides are red by default.
To insert a rectangular slice based on a selected object:
1 Choose Edit > Insert > Slice. The slice is a rectangle whose area includes the outermost edges of
the selected object.
2 If more than one object is selected, choose how to apply slices:
Single
creates a single slice object that covers all selected objects.
creates a slice object for each selected object.
Multiple
To draw a rectangular slice object:
1 Choose the Slice tool.
2 Drag to draw the slice object. The slice object appears on the Web Layer, and the slice guides
appear in the document.
Note: You can adjust the position of a slice as you drag to draw it. While holding down the mouse
button, simply press and hold down the Spacebar, then drag the slice to another location on the
canvas. Release the Spacebar to continue drawing the slice.
168
Chapter 9: Slices, Rollovers, and Hotspots
Creating HTML slices
An HTML slice designates an area where ordinary HTML text appears in the browser. An
HTML slice does not export an image; it exports HTML text that appears in the table cell
defined by the slice.
HTML slices are useful if you want to quickly update text that appears on your website without
having to create new graphics.
To create an HTML slice:
1 Draw a slice object and leave it selected.
2 In the Property inspector, choose HTML from the Type pop-up menu.
3 Click Edit.
4 Type text in the Edit HTML Slice window, and format the text if desired by adding HTML
text-formatting tags.
Note: Alternatively, you can add HTML text-formatting tags to the HTML after it has been
exported using a text editor or HTML editor such as Macromedia Dreamweaver.
5 Click OK to apply your changes and close the Edit HTML Slice window.
The text and HTML tags you entered appear in your Fireworks PNG file on the body of the
slice as raw HTML code.
Note: HTML text slices may vary in appearance when viewed in different browsers and on
different operating systems, because font size and type can be set in the browser.
Creating nonrectangular slices
Rectangular slices may not be sufficient when you’re trying to attach interactivity to a
nonrectangular image. If you plan to attach a rollover behavior 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.
Creating and editing slices
169
You can also insert a slice on top of the vector path to create irregular slice shapes.
To draw a polygon slice object:
1 Choose the Polygon Slice tool.
2 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 another tool from the Tools panel. You do not
have to click the first point again to close the polygon.
Note: Be careful not to overuse polygon slices, because they require more JavaScript code
than similar rectangular slices. Using too many polygon slices can increase web browser
processing time.
To create a polygon slice from a vector object or path:
1 Select a vector path.
2 Choose Edit > Insert > Hotspot.
3 Choose Edit > Insert > Slice.
A slice is generated that conforms to the shape of the vector object.
Note: To avoid exporting an unnecessary image map into the HTML, you may want to delete the
hotspot after completing these steps.
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. You can also change the color of slice guides through the View menu.
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:
1 Choose Window > Layers to open the Layers panel.
2 Expand the Web Layer by clicking the Plus (+) button (Windows) or triangle (Macintosh).
The Web Layer displays the full list of web objects currently in your document.
3 Click a slice name to select it.
The slice is highlighted in the Web Layer and is selected on the canvas.
170
Chapter 9: Slices, Rollovers, and Hotspots
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 turned 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.
To hide and show particular slices and hotspots:
1 Click the eye icon next to the individual web objects in the Layers panel.
2 Click in the Eye column to turn visibility back on. The eye icon reappears when web objects are
visible again.
To hide or show all hotspots, slices, and guides, do one of the following:
• Click the appropriate Hide/Show Slices button in the Web tools section of the Tools panel.
• 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, it can be difficult to see slices against
the objects in the document. For ease of viewing, you can assign a new color to selected slices.
Assigning unique colors to individual slices also helps you organize them. You can alter slice guide
color 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 Choose View > Guides > Edit Guides.
2 Choose a new color from the Slice Color section of the Guides dialog box and click OK.
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, Fireworks automatically resizes all adjacent
rectangular slices as well. In addition, you can use the Property inspector to resize and transform
slices as you would vector and bitmap objects.
Creating and editing slices
171
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 is 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: If you drag slice guides that surround a Fireworks button in the Document window, Fireworks
resizes the slice that defines the active area for that button. However, you cannot delete the active
area for a Fireworks button 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, if you drag one guide along a given coordinate, all other guides on that same
coordinate move with it.
To resize one or more slices:
1 Position the Pointer or Subselection tool over a slice guide.
The pointer changes to the guide movement pointer.
2 Drag the slice guide to the desired location.
The slices are resized, and all adjacent slices are automatically resized as well.
To reposition a slice guide to the far edge of the canvas,
• Use the Pointer or Subselection tool to drag the slice guide beyond the edge of the canvas.
172
Chapter 9: Slices, Rollovers, and Hotspots
To move adjacent slice guides:
1 Shift-drag a slice guide across adjacent slices guides.
2 Release the slice guide in the desired location.
All slice guides that you dragged across are moved to this location.
Tip: You can cancel this operation by releasing the Shift key before you release the mouse button.
All slice guides that were picked up snap back to their original positions.
Using tools to edit slice objects
You can use the Pointer, Subselection, and Transform tools to reshape or resize a slice. You can
skew and distort only polygon slices.
Note: Resizing and reshaping slices using these tools can create overlapping slices, because the size
of adjacent slice objects is not automatically adjusted. When slices overlap, the topmost slice takes
precedence if interactivity is involved. To avoid overlapping slices, use slice guides to edit slices. For
more information, see “Moving slice guides to edit slices” on page 172.
To edit the shape of a selected slice, do one of the following:
• Choose the Pointer or Subselection tool and drag the slice’s corner points to modify its shape.
• Use a transformation tool to perform the desired transformation.
For more information on using the transformation tools, see “Transforming and distorting
selected objects and selections” on page 21.
Note: Transforming a rectangular slice may change its shape, position, or dimensions, but the slice
itself remains rectangular.
About using the Property inspector or Info panel to edit slice objects
You can also change a slice object’s position and size numerically using the Property inspector. For
more information about changing an object’s dimensions numerically, see “Transforming objects
numerically” on page 24. For more information about changing an object’s position numerically,
see “Editing selected objects” on page 19.
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 slice’s 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 choose from a variety
of mouse events that trigger interactive behaviors.
Behaviors in Fireworks are compatible with Macromedia Dreamweaver behaviors. When you
export a Fireworks rollover to Dreamweaver, you can edit Fireworks behaviors using the
Dreamweaver Behaviors panel.
Making slices interactive
173
Adding simple interactivity to slices
The drag-and-drop rollover method is a fast and efficient way to create rollover and
swap-image 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.
Slice name
Behavior handle
Selection 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 185.
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 object—a 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 in images from any
frame; disjoint rollovers swap in an image from a slice other than the trigger slice.
174
Chapter 9: Slices, Rollovers, and Hotspots
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 in the frame directly under the top frame and involves only one slice.
To attach a simple rollover to a slice:
1 Ensure that the trigger object is not on a shared layer. For more information, see “Sharing layers”
on page 133.
2 Choose Edit > Insert > Slice to create a slice on top of the trigger 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 on the new frame.
Position the image beneath the slice you created in step 2, which is still visible even though
you’re in Frame 2. Slices are visible across all frames.
5 Select Frame 1 in the Frames panel to return to the frame that has the original image.
6 Select the slice and place the pointer over the behavior handle. The pointer changes to a hand.
Note: You can select the slice while in any frame.
7 Click the behavior handle and choose Simple Rollover from the menu.
8 Click the Preview tab and test the simple rollover, or press F12 to preview it in a browser.
Making slices interactive
175
Creating a disjoint rollover
A disjoint rollover swaps in 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.
Note: The trigger for a disjoint rollover doesn’t 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 185. For more information about buttons, see “Creating button
symbols” on page 191.
To attach a disjoint rollover to a selected image:
1 Choose Edit > Insert > Slice or Hotspot to attach a slice or hotspot 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.
2 Create a new frame by clicking the New/Duplicate Frame button in the Frames panel.
3 Place a second image, to be used as the target, in the new frame in the desired location on the
4
5
6
7
canvas. You can place the image anywhere other than beneath the slice you created in step 1.
Select the image, and then choose Edit > Insert > Slice to attach a slice to the image.
Select Frame 1 in the Frames panel to return to the frame that has the original image.
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 to a hand.
Drag the behavior handle for the trigger slice or hotspot 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 button to preview and test the disjoint rollover.
176
Chapter 9: Slices, Rollovers, and Hotspots
Applying multiple rollovers to a slice
You can drag more than one behavior handle from a single slice to create multiple swap behaviors.
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
Note: You can also add multiple behaviors using the Behaviors panel. For more information, see
“Using the Behaviors panel to add interactivity to slices” on page 177.
To apply more than one rollover to a selected slice:
1 Drag a behavior handle from the selected slice to the edge of the same slice or onto another slice.
Dragging the handle to the upper left edge of the same slice creates a swap image, and dragging
it to another slice creates a disjoint rollover.
2 Select the frame of the swap image and click OK.
3 Create more rollovers by repeating steps 1 and 2 as many times as desired.
Removing a drag-and-drop rollover
You can easily remove a drag-and-drop rollover from a slice, hotspot, or button.
To remove a drag-and-drop rollover from a selected web object or button:
1 Click on the blue behavior line you want to remove.
2 Click OK to remove the swap image behavior.
Using the Behaviors panel to add interactivity to slices
In addition to rollovers, you can attach other types of interactivity to slices using the Behaviors
panel. You can create custom interactions by editing existing behaviors.
Note: Although you can create simple, disjoint, and complex rollovers with the Behaviors panel, the
drag-and-drop rollover method is recommended. For more information, see “Adding simple
interactivity to slices” on page 174.
The following behaviors are available in Fireworks:
Simple Rollover adds
a rollover behavior to the selected slice using Frame 1 as the Up state and
Frame 2 as the Over state. After you select this behavior, you need to create an image in the
second frame, under the same slice, to create the Over state. The Simple Rollover option is
actually a behavior group containing the Swap Image and Swap Image Restore behaviors.
Swap Image replaces the image under the specified slice with the contents of another frame or
the contents of an external file.
Making slices interactive
177
Swap Image Restore restores
the target object to its default appearance in Frame 1.
Set Nav Bar Image sets a slice to be a part of a Fireworks navigation bar. Each slice that is part of
the navigation bar must have this behavior. The Set Nav Bar Image option is actually a behavior
group containing the Nav Bar Over, Nav Bar Down, and Nav Bar Restore behaviors. This
behavior is automatically set for you by default when you use the Button Editor to create a button
that includes an Include Over While Down state or Show Down Image Upon Load state. When
you create a two-state button, a simple rollover behavior is assigned to its slice. When you create a
three- or four-state button, a Set Nav Bar Image behavior is assigned to its slice. For more
information on buttons, see “Creating button symbols” on page 191.
Nav Bar Over specifies
the Over state for the currently selected slice when it is part of a
navigation bar and optionally specifies the Preload images state and Include Over While
Down state.
Nav Bar Down specifies a Down state for the currently selected slice when it is part of a
navigation bar and optionally specifies a Preload images state.
Nav Bar Restore restores
all the other slices in the navigation bar to their Up state.
Set Pop-up Menu attaches a pop-up menu to a slice or hotspot. When you apply a pop-up menu
behavior, you can use the Pop-up Menu Editor. For more information, see “Creating pop-up
menus” on page 200.
Set Text of Status Bar lets
you define text for display in the status bar at the bottom of most
browser windows.
Attaching behaviors
Using the Behaviors panel, you can attach a behavior to a slice. You can also attach more than
one behavior.
To attach a behavior to a selected slice using the Behaviors panel:
1 Click the Add Behavior button (the Plus button) in the Behaviors panel.
Add Behavior button
Remove Behavior button
2 Select a behavior from the Add Behavior button. For an explanation of each behavior, see
“Using the Behaviors panel to add interactivity to slices” on page 177.
178
Chapter 9: Slices, Rollovers, and Hotspots
Editing behaviors
The Behaviors panel also gives you the ability to edit existing behaviors. You can specify the type
of mouse event (such as onClick) that triggers the behavior.
Note: You cannot change the event for Simple Rollover and Set Nav Bar Image.
To change the mouse event that activates the behavior:
1 Select the trigger slice or hotspot containing the behavior you want to modify.
All behaviors associated with that slice or hotspot are displayed in the Behaviors panel.
2 Select the behavior you want to edit.
3 Click the arrow beside the event and choose a new event from the pop-up menu:
triggers the behavior when the pointer rolls over the trigger area.
onMouseOut triggers the behavior when the pointer leaves the trigger area.
onClick triggers the behavior when the trigger object is clicked.
onLoad triggers the behavior when the web page is loaded.
onMouseOver
Using external image files for swap image
You can use an image outside the current Fireworks document as the source for a swap image.
Source images can be in GIF, animated GIF, JPEG, or PNG format. When you choose an
external file as the image source, Fireworks swaps that file with the target slice when the swap
image is triggered in a web browser.
The file must have the same width and height as the slice it is swapping into. If it does not, the
browser resizes the file to fit within the slice object. Resizing the file may reduce its quality,
especially in the case of an animated GIF.
To choose an external image file as the source for a swap image:
1 While in the Swap Image, Nav Bar Over, or Nav Bar Down dialog box, choose Image File and
click the folder icon.
Note: If you don’t see this option in the Swap Image dialog box, choose More Options and then
perform step 1.
2 Navigate to the file you want to use, and click Open.
3 If necessary, deselect Preload Images (if the external file is an animated GIF).
Precaching can interrupt the display of animated GIFs as rollover states. To avoid this problem,
deselect Preload Images when setting up the rollover.
Note: If you plan to export your document for use on the web, be sure that your external image file
is accessible from the exported Fireworks HTML. Fireworks creates document-relative paths to
image files. It is a good idea to place external files in your local site before using them as swap
images in Fireworks. When you upload your files to the web, be sure that the external image file is
uploaded as well. For more information on Fireworks HTML, see “Exporting HTML” on page 252.
Making slices interactive
179
Preparing slices for export
Using the Property inspector, you can make slices interactive by assigning links and targets to the
slices. You can also specify alternate text to be displayed in a browser while an image is loading.
In addition, you can choose an export file format to optimize a selected slice. If the Property
inspector is minimized, click the expander arrow in the lower right corner to see all
slice properties.
Slice properties in the Property inspector
Using the Property inspector or the Layers panel, you can give slices unique names. Fireworks uses
the name you specify to name the files that are generated from slicing upon export. If you don’t
enter a slice name in the Property inspector or the Layers panel, Fireworks automatically names
slices for you upon export. You can change the auto-naming convention that Fireworks uses
through the HTML Setup dialog box.
Fireworks exports a sliced Fireworks document as an HTML file and a series of graphic files. You
can define properties for the exported HTML file using the HTML Setup dialog box.
Assigning URLs
A URL, or Uniform Resource Locator, is the address of a specific page or file on the Internet.
When you assign a URL to a slice, users can navigate to that address by clicking the area defined
by the slice in their web browser.
To assign a URL to a selected slice:
• Enter a URL in the Link text box of the Property inspector.
Tip: If you intend to reuse URLs, you can create a URL library in the URL panel and then store URLs
in the URL library. For more information, see “Working with URLs” on page 164.
Entering alternate text
Alternate, or alt, text appears on the image placeholder while the image is downloading from the
web; it also substitutes for graphics that fail to download. In some newer versions of browsers, the
text also appears next to the pointer as a tooltip.
Entering brief, meaningful alternate text has become increasingly important in web design. A
growing number of visually impaired people are using screen-reading applications, which read
alternate text in a computer-generated voice as the pointer passes over graphics on a web page.
To specify alt text for a selected slice or hotspot:
• In the Property inspector, type the text in the Alt Text box.
180
Chapter 9: Slices, Rollovers, and Hotspots
Assigning a target
A target is an alternate web page frame or web browser window in which the linked document
opens. You can specify a target for a selected slice in the Property inspector. If the Property
inspector is minimized, click the expander arrow to see all properties.
To specify a target for a selected slice or hotspot in the Property inspector:
• Type the name of the HTML frame in the Target text box or choose a reserved target from the
Target pop-up menu:
blank loads the linked documents in a new, unnamed browser window.
parent loads the linked document in the parent frameset or window of the frame that contains
the link. If the frame containing the link is not nested, then the linked document loads into the
full browser window.
self loads the linked document in the same frame or window as the link. This target is implied,
so you usually need not specify it.
_top loads the linked document in the full browser window, thereby removing all frames.
Export settings
You can optimize a slice by selecting an option from the Export Settings pop-up menu in the
Property inspector or Optimize panel. You can choose from common export settings to quickly
set a file format and apply several format-specific settings. For more information on using and
customizing these settings, see “Using optimization settings” on page 231.
Naming slices
Slicing cuts an image into pieces. Fireworks exports each piece on each frame as a separate file, so
each file must have a name.
Fireworks automatically names each slice file upon export. You can accept the default naming
convention, change the convention, or enter a custom name for each slice.
Custom-naming slice files
You can assign names to slices so that you can easily identify slice files in your website file
structure. For example, if you have a button on a navigation bar that returns to the home page,
you could name the slice Home.
To enter a custom slice name, do one of the following:
• Select the slice on the canvas, enter a name in the Object Name box in the Property inspector,
•
and press Enter.
Double-click the name of the slice in the Web Layer, enter a new name, and press Enter.
Do not add a file extension to the base name. Fireworks automatically adds file extensions to
slice files upon export.
Preparing slices for export
181
Auto-naming slice files
If you do not enter a slice name in either the Property inspector or the Layers panel, Fireworks
reverts to auto-naming. Auto-naming assigns a unique name to each slice file automatically based
on the default naming convention.
To auto-name a slice file:
• When you export your sliced image, enter a name in the File Name (Windows) or Name
(Macintosh) text box in the Export dialog box. Do not add a file extension. Fireworks
automatically adds file extensions to slice files upon export.
Changing the default auto-naming convention
You can change the naming convention for slices from the Document Specific tab in the HTML
Setup dialog box.
Fireworks lets you specify your own naming convention using a wide range of naming options.
You can create a naming convention that contains up to eight elements. An element can consist of
any of the following auto-naming options.
Option
Description
None
No name is applied to the element.
doc.name
The element takes the name of the document.
“slice”
You can insert the word “slice” into the naming convention.
Slice # (1,2,3...)
Slice # (01,02,03...)
Slice # (A,B,C...)
Slice # (a,b,c...)
The element is labeled numerically or alphabetically, according to the
style you choose.
row/column (r3_c2,
r4_c7...)
Row (r##) and Col (c##) designate the rows and columns of the table that
web browsers use to reconstruct a sliced image. You can use this
information in the naming convention.
Underscore
Period
Space
Hyphen
The element uses any of these characters typically as separators between
other elements.
For example, if the document name is mydoc, the naming convention doc.name + “slice” + Slice
# (A,B,C...) results in a slice called mydocsliceA. Chances are that you will never require a naming
convention that uses all eight elements.
If a slice has more than one frame, by default Fireworks adds a number to each frame’s file. For
example, if you enter the custom slice filename home for a three-state button, then Fireworks
names the Up state graphic home.gif, the Over state graphic home_f2.gif, and the Down state
graphic home_f3.gif. You can create your own naming convention for multiframe slices using the
HTML Setup dialog box.
182
Chapter 9: Slices, Rollovers, and Hotspots
To change the default auto-naming convention:
1 Choose File > HTML Setup to open the HTML Setup dialog box.
2 Click the Document Specific tab.
3 In the File Names section, create your new naming convention by selecting from the lists.
4 (Optional) To set this information as the default for all new Fireworks documents, click
Set Defaults.
Note: Use caution when choosing None as a menu option for slice auto-naming. If you choose
None as the option for any of the first three menus, Fireworks exports slice files that overwrite one
another, resulting in a single exported graphic and a table that displays this graphic in every cell.
Defining how HTML tables are exported
Slicing defines how the HTML table structure appears when a Fireworks document is exported
for use on the web.
When you export a sliced Fireworks document to HTML, your document is reassembled using
an HTML table. Each sliced element from the Fireworks document resides in a table cell. Once
exported, a Fireworks slice translates to a table cell in HTML.
You can specify how a Fireworks table is reconstructed in a browser. Among other options, you
can choose whether to use spacers or nested tables when exporting to HTML:
• Spacers are images that help table cells align properly when viewed in a browser.
• A nested table is a table within a table. Nested tables do not use spacers. They may load more
slowly in browsers, but because there are no spacers, it is easier to edit their HTML.
For more information about HTML, see “Exporting HTML” on page 252.
Preparing slices for export
183
To define how Fireworks exports HTML tables:
1 Choose File > HTML Setup, or click the Options button in the Export dialog box.
2 Click the Table tab.
3 Choose a spacing option from the Space With pop-up menu:
Nested Tables — No Spacers
creates a nested table with no spacers.
Single Table — No Spacers creates a single table with no spacers. This option can cause tables
to be displayed incorrectly in some cases.
1-Pixel Transparent Spacer uses a 1-pixel-by-1-pixel transparent GIF as a spacer that is
resized as needed in the HTML. This generates a 1-pixel-high row across the top of the table
and a 1-pixel-wide column down the right side.
4 Choose a cell color for HTML slices:
■ To give cells the same background color as the document canvas, choose Use Canvas Color.
■ To choose a different color, deselect Use Canvas Color and choose a color from the color
pop-up window.
Note: If you choose a color from the color pop-up window, it applies only to HTML slices; image
slices continue to use the canvas color.
5 Choose what to place in empty cells from the Contents pop-up menu:
causes empty cells to remain blank.
Spacer Image places a small transparent image called spacer.gif in empty cells.
Non-breaking Space places an HTML space tag in empty cells. The cell appears hollow.
None
Note: Empty cells occur only if you deselect Include Areas Without Slices in the Export dialog box
during export.
6 Click OK.
For more information about specifying HTML export options, see “Setting HTML export
options” on page 259.
Note: You can specify unique table export settings for sliced objects for each document. Or you
can use the Set Defaults button on the Document Specific tab of the HTML Setup dialog box to
apply defaults for all new documents.
184
Chapter 9: Slices, Rollovers, and Hotspots
Working with hotspots and image maps
Web designers can use hotspots to make small parts of a larger graphic interactive, linking areas of
web graphics to a URL. You can create an image map in Fireworks by exporting HTML from a
document that contains hotspots.
An image map with hotspots
Hotspots and image maps are often less resource-intensive than sliced graphics. Slicing can be
more resource-intensive to web browsers because of the additional HTML code they must
download and the processing power required to reassemble sliced graphics.
Note: It is possible to create a sliced image map. Exporting a sliced image map typically generates
many graphic files. For more information about slicing, see “Creating slice objects” on page 168.
Hotspots are ideal when you want areas of an image to link to other web pages, but you don’t
need those areas to highlight or produce rollover effects in response to mouse movement or
actions. Hotspots and image maps are also ideal when the graphic onto which you’ve placed your
hotspots would be best exported as a single graphic file—in other words, the entire graphic would
best be exported using the same file format and optimization settings.
Creating hotspots
After you identify areas on a source graphic that would make good navigation points, you create
the hotspots and then assign URL links, pop-up menus, status bar messages, and alt text to them.
There are two ways to create hotspots:
• You can draw the hotspot around a target area in the graphic using the Rectangle, Circle, or
•
Polygon (odd-shaped) Hotspot tools.
You can select an object and insert the hotspot over it.
A hotspot need not always be a rectangle or a circle. You can also create polygon hotspots
composed of many points. This can be a good approach when working with intricate images.
Working with hotspots and image maps
185
To create a rectangular or circular hotspot:
1 Choose the Rectangle Hotspot or Circle Hotspot tool from the Web section of the Tools panel.
2 Drag the hotspot tool to draw a hotspot over an area of the graphic. Hold down Alt (Windows)
or Option (Macintosh) to draw from a center point.
Note: You can adjust the position of a hotspot as you drag to draw it. While holding down the
mouse button, simply press and hold down the Spacebar, then drag the hotspot to another
location on the canvas. Release the Spacebar to continue drawing the hotspot.
To create an odd-shaped hotspot:
1 Choose the Polygon Hotspot tool.
2 Click to place vector points, much as you would draw straight line segments with the Pen tool.
Whether the path is open or closed, the fill defines the hotspot area.
To create a hotspot by tracing one or more selected objects:
1 Choose Edit > Insert > Hotspot.
If you selected more than one object, a message appears asking whether you want to create a
single rectangular hotspot covering all objects or multiple hotspots, one for each object.
2 Click Single or Multiple. The Web Layer displays the new hotspot or hotspots.
Editing hotspots
Hotspots are web objects, and like many other objects, they can be edited using the Pointer,
Subselection, and Transform tools. For more information on using these tools to edit a web
object, see “Using tools to edit slice objects” on page 173.
You can change a hotspot’s position and size numerically using the Property inspector or the Info
panel. For more information about changing an object’s dimensions numerically, see
“Transforming objects numerically” on page 24. For more information about changing an object’s
position numerically, see “Editing selected objects” on page 19.
You can also change a hotspot’s shape using the Property inspector.
To convert a selected hotspot to a rectangle, circle, or polygon hotspot:
• In the Property inspector, choose Rectangle, Circle, or Polygon from the Hotspot Shape
pop-up menu.
186
Chapter 9: Slices, Rollovers, and Hotspots
Preparing hotspots for export
You can use the Property inspector to assign URLs, alternate text, targets, and custom names to
hotspots. If the Property inspector is minimized, click the expander arrow in the lower right to see
all properties.
You assign hotspot properties the same way you assign slice properties. For more information on
using the Property inspector to assign URLs, alt text, target frames, and custom names, see
“Preparing slices for export” on page 180.
Creating image maps
After you’ve inserted several hotspots on top of a desired graphic, you must export the graphic as
an image map so it will function in a web browser. Exporting an image map generates the
graphics and the HTML containing map information for hotspots and corresponding URL links.
Note: Fireworks produces only client-side image maps when exporting.
As an alternative to exporting, you can copy your image map to the Clipboard and paste it into
Dreamweaver or another HTML editor.
To export an image map or copy it to the Clipboard:
1 Optimize the graphic to prepare it for export.
2
3
4
5
6
For more information, see “About optimizing” on page 226.
Choose File > Export.
If you are exporting your image (as opposed to copying it to the Clipboard), navigate to the
folder where you want to place the HTML file, and name the file.
If you have already built a local file structure for your website, you can save the graphic in the
appropriate folder for the site from here.
In the Save as Type pop-up menu, choose HTML and Images.
Choose an option from the HTML pop-up menu:
Export HTML File generates the required HTML file and corresponding graphics files, which
you can later import into Dreamweaver or another HTML editor.
Copy to Clipboard copies all required HTML, including a table if the document is sliced, to
the Clipboard so that you can later paste it into Dreamweaver or another HTML editor.
For Slices, choose None only if the document contains no slices.
Working with hotspots and image maps
187
7 If necessary, choose Put Images in Subfolder and browse to the appropriate folder.
Note: If you choose Copy to Clipboard, this step is not required, and thus the option is disabled.
8 Click Save to close the Export dialog box.
Tip: When you are exporting files, Fireworks can use HTML comments to clearly label the
beginning and end of code for image maps and other web features created in Fireworks. By
default, HTML comments are not included in the code. To include them, choose Include HTML
Comments in the General tab of the HTML Setup dialog box.
For information on placing exported Fireworks content into Dreamweaver, see “Working with
Macromedia Dreamweaver MX 2004” in Working with Other Applications on the Fireworks
Support Center at www.macromedia.com/support/fireworks.
Creating rollovers with hotspots
Using the drag-and-drop rollover method of creating interactivity, you can easily attach a disjoint
rollover effect to a hotspot if the target area is defined by a slice. Rollover effects are applied to
hotspots the same way that they are to slices. For more information, see “Adding simple
interactivity to slices” on page 174.
Note: A hotspot can trigger only a disjoint rollover. It cannot be the target of a rollover coming from
another hotspot or slice.
After you create a disjoint rollover with a hotspot, the connecting blue line remains visible only
while the hotspot is selected.
188
Chapter 9: Slices, Rollovers, and Hotspots
Using hotspots on top of slices
You can place a hotspot on top of a slice to trigger an action or behavior. You may want to do
this if you have a large graphic and you want only a small portion of it to act as the trigger for
an action.
For example, perhaps you have a large graphic with text on it, and you want just the text to trigger
an action or behavior, such as a rollover effect. You could place a slice on top of the graphic, and
then a hotspot on top of the text. Rolling over just the text triggers the rollover effect, yet the
entire graphic beneath the slice swaps out when the rollover effect occurs. Avoid creating hotspots
that overlap more than one slice, or unpredictable behavior may result.
To create a trigger for a rollover effect using a hotspot on top of a slice:
1 Insert a slice on top of the image you want to swap out.
2 Create a new frame in the Frames panel, and insert an image that you will use as your swapped
image. Be sure to place it beneath the slice you inserted in step 1.
3 Drag a behavior line from the hotspot to the slice that contains the image you want to swap.
The Swap Image dialog box opens.
4 Choose the frame holding the rollover image from the Swap Image From list, and click OK.
Working with hotspots and image maps
189
190
Chapter 9: Slices, Rollovers, and Hotspots
CHAPTER 10
Creating Buttons and Pop-up Menus
In Macromedia Fireworks MX 2004 you can create a variety of JavaScript buttons and pop-up
menus, even if you know nothing about JavaScript.
The Fireworks Button Editor leads you through the button-creation process, automating many
button-making tasks. The result is a convenient button symbol. After you’ve created a button
symbol, you can easily create instances of the symbol to make a navigation bar, or nav bar.
Fireworks also has a Pop-up Menu Editor, which allows you to quickly and easily create vertical or
horizontal pop-up menus. The Advanced tab of the Pop-up Menu Editor gives you creative
control over cell spacing and padding, text indention, cell borders, and other properties.
When you export a button or pop-up menu, Fireworks automatically generates the JavaScript
necessary to display it in a web browser. In Macromedia Dreamweaver, you can easily insert
JavaScript and HTML code from Fireworks into your web pages, or you can cut and paste the
code into any HTML file.
Creating button symbols
Buttons are navigation elements for a web page. Buttons created in the Button Editor have the
following characteristics:
• You can make almost any graphic or text object into a button.
• You can create a button from scratch, convert an existing object into a button, or import
•
•
•
already created buttons.
A button is a special type of symbol. You can drag instances of it from the symbol library into
your document.
This allows you to change the graphical appearance of a single button and automatically
update the appearance of all button instances in a nav bar. For more information on symbols,
see “Using symbols” on page 158.
You can edit the text, URL, and target for one button instance without affecting other
instances of the same button, and without breaking the symbol-instance relationship.
A button instance is encapsulated. When you drag the button instance in the document,
Fireworks moves all the components and states associated with it, so there is no need for
multiframe editing.
191
• A button is easy to edit. Double-click the instance on the canvas, and you can change it in the
Button Editor or the Property inspector.
• Like other symbols, buttons have a registration point. The registration point is a center point
that helps you align text and the different button states while in the Button Editor.
About button states
A button can have up to four different states. Each state represents the button’s appearance in
response to a mouse event:
The Up state
is the default or at-rest appearance of the button.
The Over state is the way the button appears when the pointer is moved over it. This state alerts
the user that clicking the mouse is likely to result in an action.
represents the button after it is clicked. Often a concave image of the button is
used to signify that it has been pressed. This button state typically represents the current web page
on multibutton navigation bars.
The Down state
is the appearance when the user moves the pointer over a button
that is in the Down state. This button state typically shows that the pointer is over the button for
the current web page on multibutton navigation bars.
The Over While Down state
With the Button Editor, you can create all of these different button states, as well as an area for
triggering the button action.
Using the Button Editor
The Button Editor is where you create and edit a JavaScript button symbol in Fireworks. The tabs
along the top of the Button Editor correspond to the four button states and the active area. The
tips on each option in the Button Editor help you make design decisions for all four button states.
Creating a simple two-state button
With the Button Editor, you can create custom buttons by drawing shapes, importing graphic
images, or dragging objects from the Document window. The Button Editor then takes you
through the steps to control the button’s behavior.
To create an Up state:
1 Choose Edit > Insert > New Button to open the Button Editor.
The Button Editor opens to the Up state tab.
2 Import or create the Up state graphic:
■ Drag and drop or import the graphic that will appear as the button’s Up state into the work
area of the Button Editor.
■ Use the drawing tools to create a graphic or use the Text tool to create a button from text.
■ Click Import a Button and select a ready-made editable button from the Button Import
library. If you choose this option, you won’t have to worry about creating the remaining
states for your button. Each of the button’s states will be automatically filled with the
appropriate graphics and text.
3 If desired, choose the Text tool and create text for the button.
192
Chapter 10: Creating Buttons and Pop-up Menus
To create an Over state:
1 With the Button Editor open, click the Over tab.
2 Do one of the following to create the button’s Over state:
■
■
Click Copy Up Graphic to paste a copy of the Up state button into the Over window, and
then edit it to change its appearance or text.
Drag and drop, import, or draw a graphic.
Creating a three- or four-state button
When creating a button, you may want to add a Down state and an Over While Down state in
addition to the Up and Over states. These states give web page users additional visual cues.
You can create a nav bar using two-state or three-state buttons, but only a button with all four
states qualifies as a real nav bar button in Fireworks. Fireworks has several Nav Bar behaviors that
make buttons act as though they are related to each other. For example, you can create nav bar
buttons that act like the push buttons on an old car radio: when the user clicks a button, it
remains down until another button is clicked.
Although four-state buttons are not mandatory in a nav bar, using them allows you to take
advantage of the built-in Nav Bar behaviors in Fireworks.
For details about creating the Up and Over states for a button, see “Creating a simple two-state
button” on page 192.
To create a Down state:
1 With a two-state button open in the Button Editor, click the Down tab.
2 Do one of the following to create the button’s Down state:
■
■
Click Copy Over Graphic to paste a copy of the Over state button into the Down window,
and then edit it to change its appearance.
Drag and drop, import, or draw a graphic.
Note: When you insert or create a graphic for the Down state, the Include Nav Bar Down State
option is automatically chosen. This button state is for buttons that are part of navigation bars.
To create an Over While Down state:
1 With a three-state button open in the Button Editor, click the Over While Down tab.
2 Do one of the following to create the button’s Over While Down state:
■
■
Click Copy Down Graphic to paste a copy of the Down state graphic into the Over While
Down window, and then edit it to change its appearance.
Drag and drop, import, or draw a graphic.
Note: When you insert or create a graphic for the Over While Down State, the Include Nav Bar
Over While Down State option is automatically chosen. This button state is for buttons that are
part of navigation bars.
Creating button symbols
193
Using bevel effects to draw button states
As you create graphics for each button state, you can apply preset Live Effects to create common
appearances for each state. For example, if you are creating a four-state button, you can apply the
Raised effect to the Up state graphic, the Highlighted effect to the Down state graphic, and so on.
To apply preset Live Effects to a button symbol:
1 With the desired button symbol open in the Button Editor, select the graphic to which you
want to add a Live Effect.
2 Click the Add Effects button in the Property inspector.
3 In the pop-up menu that appears, do one of the following:
Choose Bevel and Emboss > Inner Bevel.
■ Choose Bevel and Emboss > Outer Bevel.
4 In the pop-up window that appears, choose a button preset effect. These are described below.
■
Button preset effect
Description
Raised
The bevel appears to rise from the underlying objects.
Highlighted
The button’s colors lighten.
Inset
The bevel appears to sink into the underlying objects.
Inverted
The bevel appears to sink into the underlying objects, and the colors
lighten.
5 Repeat steps 1 through 4 for the remaining button states, giving each state a different button
preset effect.
Converting Fireworks rollovers into buttons
You can create buttons from rollovers that you created in previous versions of Fireworks. The
components convert to a button, and the new button is placed in the library.
For more information about rollovers, see “Making slices interactive” on page 173.
To convert a Fireworks rollover into a button:
1 Delete the slice or hotspot covering the rollover images.
2 Choose Show All Frames from the Onion Skinning pop-up menu in the Frames panel.
3 Select all the objects to be included in the button.
Tip: Use the Select Behind tool to select objects that are hidden behind others. For more
information, see “Using the Select Behind tool” on page 9.
4 Choose Modify > Symbol > Convert to Symbol.
The Symbol Properties dialog box opens.
5 Enter a name for the symbol in the Name text box.
194
Chapter 10: Creating Buttons and Pop-up Menus
6 Choose the Button symbol type.
7 Click OK.
The new button is added to the library.
Tip: You can also convert four-frame animations to buttons. Simply select all four objects, and each is
placed on its own button state.
Inserting buttons into a document
You can insert instances of button symbols into a document from the Library panel.
To place instances of a button symbol in a document:
1 Open the Library panel.
2 Drag the button symbol to the document.
To place additional instances of a button symbol in a document, do one of the following:
• Select an instance, and then choose Edit > Clone to place another instance directly in front of
the selected instance. The new instance becomes the selected object.
Tip: Cloning button instances is convenient when you create an aligned nav bar, because you can
move the clones in one direction with the arrow keys while maintaining alignment with the other
position coordinate.
• Drag another button instance from the Library panel to the document.
• Alt-drag (Windows) or Option-drag (Macintosh) an instance on the canvas to create another
button instance.
• Copy an instance and then paste additional instances.
Importing button symbols
Button symbols in the Library panel are document-specific. If you have an open document with
symbols in the Library panel and then create a new document, the Library panel in the new
document will be empty. However, there are several ways to import button symbols into a
document’s Library panel, either from a library or from another Fireworks document.
To import button symbols into a document’s Library panel, do one of the following:
•
•
•
•
•
Drag and drop a button instance from another Fireworks document into the document.
Cut and paste a button instance from another Fireworks document into the document.
Import button symbols from a Fireworks PNG file.
Export button symbols from another Fireworks document to a PNG library file, and then
import button symbols from the PNG library file into the document.
Choose Edit > Libraries and import button symbols into the document’s Library panel from
the button libraries on the submenu. These libraries contain a wide variety of premade button
symbols prepared by Macromedia.
You import and export button symbols just as you import and export animation and graphic
symbols. For more information, see “Importing symbols” on page 162 and “Exporting symbols”
on page 163.
Creating button symbols
195
Editing button symbols
Fireworks button symbols are a special kind of symbol. They have two kinds of properties: some
properties change in all instances when you edit an instance of the symbol, and other properties
affect only the current instance.
Fireworks button symbols let you take advantage of the convenience of symbols yet allow you to
edit certain properties of a button instance, such as text, without affecting other instances.
Editing symbol-level properties
You edit button symbols in the Button Editor. The instance properties that you can modify are
those that are typically consistent among buttons in a nav bar:
• Modifications to graphical appearance such as stroke color and type, fill color and type, path
•
•
•
•
•
•
shape, and images
Live Effects, opacity, or blend mode applied to individual objects in the button symbol
Size and position of the active area
Core button behavior
Optimization and export settings
URL link (also available as an instance-level property)
Target frame (also available as an instance-level property)
To edit button properties at the symbol level:
1 Do one of the following to open the button in the Button Editor:
Double-click a button instance in the workspace.
In the Library panel, double-click the button preview or the symbol icon beside the
button symbol.
2 Make changes to the button’s characteristics, and click Done.
Changes are applied to all instances of the button symbol.
■
■
Editing instance-level properties
Instance-level properties are edited in the Property inspector when a single instance is selected.
You change these properties for an instance without affecting the associated symbol or any other
instances of that symbol. These properties typically differ from button to button in a series
of buttons:
• An instance’s object name, which appears in the Layers panel and is used for naming the
•
•
•
•
•
196
exported slices for the button instance upon export
Live Effects, opacity, or blend mode applied to the entire instance
Text characters and text formatting, such as font, size, orientation, and color
URL link (overrides any URL that exists as a symbol-level property)
Alternate (alt) image description
Target frame (overrides any target frame that exists as a symbol-level property)
Chapter 10: Creating Buttons and Pop-up Menus
• Additional behaviors assigned to an instance using the Behaviors panel
• The Show Down State on Load option in the Property inspector for instances in a nav bar
Note: In Fireworks MX 2004, you need not choose the Show Down State on Load option for
every button instance in a nav bar. The Document Specific section of the HTML Setup dialog box
contains an option called Export Multiple Files. When you choose this option and then export a
nav bar, Fireworks MX 2004 exports each HTML page with the corresponding button’s Down
state. For more information, see “Setting HTML export options” on page 259.
To edit instance-level properties of a single button symbol instance:
1 Select the button instance in the work area.
2 Set the properties in the Property inspector.
Setting interactive button properties
With Fireworks, you can control the interactive elements of a button, including the active area,
URL, target, and alternative (alt) image description.
Modifying the active area of a button symbol
The active area of a button symbol triggers interactivity when a user moves the pointer over it or
clicks it in a web browser. The active area of a button is a symbol-level property and is unique to
button symbols.
When a button symbol is created, Fireworks automatically creates a special slice large enough to
enclose all the states of a button. You can edit a button slice only in the Active Area tab of the
Button Editor. Each button can have only one slice. If you draw a slice using a slice tool in the
active area, the previous slice is replaced by the newly drawn slice. You can draw hotspot objects in
the Active Area tab, but you can edit those hotspots only in the Button Editor.
Note: Web objects that define a button symbol’s active area appear in the document when slices and
hotspots are not hidden, but a button’s web objects are not listed in the Layers panel and cannot be
edited in the workspace.
To edit a slice or hotspot in a button symbol’s active area:
1 Do one of the following to open the button symbol in the Button Editor:
Double-click a button instance in the workspace.
In the Library panel, double-click the button preview or the symbol icon beside the
button symbol.
2 Click the Active Area tab.
3 Do one of the following:
■ Use the Pointer tool to move or reshape the slice or move a slice guide.
■ Use any of the slice or hotspot tools to draw a new active area.
■
■
Creating button symbols
197
Setting the URL for a button symbol or instance
A URL, or Uniform Resource Locator, is a link to another web page, website, or anchor on the
same web page. The URL can be a symbol- or instance-level button property. You can attach a
URL to a selected button instance in the Property inspector or in the URL panel.
You can attach a URL to a symbol, so that the same URL appears in the Link text box in the
Property inspector for each instance. This is helpful when entering absolute URLs within a site;
you need only complete the last part of the URL in each instance’s Link text box in the Property
inspector to link the button instances.
Note: For information on absolute versus relative URLs, see “About absolute and relative URLs”
on page 166.
To set the URL for a button symbol in the Button Editor:
1 Do one of the following to open the button in the Button Editor:
Double-click a button instance in the workspace.
In the Library panel, double-click the button preview or the symbol icon beside the
button symbol.
2 Click the Active Area tab in the Button Editor.
3 Select the Active Area slice or hotspot.
4 Do one of the following:
■ Enter the URL in the Link text box in the Property inspector.
■ Choose a URL from the URL panel.
■
■
Note: Changing the URL for a button symbol won’t change the URL for existing button instances
of that symbol that already have unique URLs assigned to them. This also applies to changes
made to a button symbol’s target and alt text.
To set the URL for a selected button instance in the workspace, do one of the following:
• Enter the URL in the Link text box in the Property inspector.
• Choose a URL from the URL panel.
Setting the target for a button
The target is the window or frame in which the destination web page appears when a button
instance is clicked. If you don’t enter a target in the Property inspector, the web page appears in
the same frame or window as the link that called it. The target can be a symbol- or instance-level
button property. You can set the target for a symbol, so that all instances of the symbol have the
same target option.
To set the target for a button symbol in the Button Editor:
1 Do one of the following to open the button in the Button Editor:
■
■
198
Double-click a button instance in the workspace.
In the Library panel, double-click the button preview or the symbol icon beside the
button symbol.
Chapter 10: Creating Buttons and Pop-up Menus
2 Do one of the following in the Property inspector:
■
■
Choose a preset target from the Target pop-up menu:
None or _self loads the web page into the same frame or window as the link.
blank loads the web page into a new, unnamed browser window.
parent loads the web page into the parent frameset or window of the frame that contains
the link.
top loads the web page into the full browser window, removing all frames.
Enter a target in the Target text box.
Note: Changing the target for a button symbol won’t change the target for existing button
instances of that symbol that already have unique targets assigned to them. This also applies to
changes made to a button symbol’s URL and alt text.
To set the target for a button instance in the workspace:
1 Select the button instance in the workspace.
2 Do one of the following in the Property inspector:
■
■
Choose a preset target from the Target pop-up menu:
None or _self loads the web page into the same frame or window as the link.
_blank loads the web page into a new, unnamed browser window.
_parent loads the web page into the parent frameset or window of the frame that contains
the link.
_top loads the web page into the full browser window, removing all frames.
Enter a target in the Target text box.
Setting the alternate (alt) text for a button symbol or instance
Alternate (alt) text appears on or near an image placeholder while an image is downloading from
the web or in place of an image if it fails to download. It also replaces graphics if the user has the
browser set to refrain from displaying images. Alt text can be a symbol- or instance-level button
property. You can set alternate text for a button symbol or instance in the Property inspector.
Tip: Applications that assist the visually impaired audibly read the alternate text for graphics
on web pages in a browser. For your alternate text, use concise, meaningful descriptions of
graphical elements.
To set the alt text for a button symbol in the Button Editor:
1 Do one of the following to open the button in the Button Editor:
Double-click a button instance in the workspace.
In the Library panel, double-click the button preview or the symbol icon beside the
button symbol.
2 In the Property inspector, enter the text that you wish to appear as alt text in a browser.
■
■
Note: Changing the alt text for a button symbol won’t change the alt text for existing button
instances of that symbol that already have unique alt text assigned to them. This also applies to
changes made to a button symbol’s target and URL.
Creating button symbols
199
To set the alt text for a button instance in the workspace:
1 Select the button instance in the workspace.
2 Enter the description in the Alt Text box in the Property inspector.
Creating navigation bars
A navigation bar, or nav bar, is a group of buttons that provide links to different areas of a website.
It generally remains consistent throughout the site, providing a constant method of navigation,
no matter where the user is within the site. The nav bar looks the same from web page to web
page, but in some cases, the links may be specific to the function of each page.
In Fireworks, you make a nav bar by creating a button symbol in the Button Editor and then
placing instances of that symbol in the workspace.
To create a basic nav bar:
1 Create a button symbol. For more information, see “Creating button symbols” on page 191.
2 Drag an instance (copy) of the symbol from the Library panel to the workspace.
3 Do one of the following to make a copy of the button instance:
Select the button instance and choose Edit > Clone.
Alt-drag (Windows) or Option-drag (Macintosh) the button instance.
4 Shift-drag a button to align it horizontally or vertically. For more precise control, use the arrow
keys to move the instance.
5 Repeat steps 3 and 4 to create additional button instances.
6 Select each instance and assign it unique text, a URL, and other properties using the
Property inspector.
■
■
Creating pop-up menus
Pop-up menus are displayed in a browser when the user moves a pointer over or clicks a triggering
web object, such as a slice or hotspot. You can attach URL links to pop-up menu items for
navigation. For example, you can use pop-up menus to organize several navigation options
that are related to a button in a nav bar. You can create as many submenu levels as you like in
pop-up menus.
Each pop-up menu item appears as an HTML or image cell, which has an Up state, an Over state,
and text in both states. To preview a pop-up menu, press F12 to preview it in a browser. The
previews in the Fireworks workspace do not display pop-up menus.
200
Chapter 10: Creating Buttons and Pop-up Menus
About the Pop-up Menu Editor
The Pop-up Menu Editor is a tabbed dialog box that guides you through the creation of a pop-up
menu. Its many options for controlling the characteristics of a pop-up menu are organized in
four tabs:
Content has options for determining the basic menu structure, as well as the text, URL link, and
target for each menu item.
Appearance contains options that determine the appearance of each menu cell’s Up state and
Over state, as well as the menu’s vertical and horizontal orientation.
contains options that determine the cell dimensions, padding, and spacing; the cell
border width and color; menu delay; and text indention.
Advanced
Position
contains options that determine the menu and submenu placement:
• The Menu setting places the pop-up menu relative to the slice. Preset positions include
bottom, lower right, top, and upper right of a slice.
• The Submenu setting places the pop-up submenu to the right or lower right of the parent
menu, or below it.
Depending on the design of the pop-up menu, you may not use all the tabs or options in the
Pop-up Menu Editor. You can edit settings in any tab anytime, but you must add at least one
menu item in the Content tab to create a menu that you can preview in a browser.
Creating pop-up menus
201
Creating a basic pop-up menu
The Content tab of the Pop-up Menu Editor is where you determine the basic structure and
content of the pop-up menu. The current or default settings for the options on the other Pop-up
Menu Editor tabs are applied to the menu when you create it.
To create a simple pop-up menu:
1 Select a hotspot or slice that will be the trigger area for the pop-up menu.
2 Do one of the following to open the Pop-up Menu Editor:
Choose Modify > Pop-up Menu > Add Pop-up Menu.
■ Click the behavior handle in the middle of the slice and choose Add Pop-up Menu.
3 Click the Content tab if it is not already visible.
4 Click the Add Menu button to add an empty menu item.
You can add, delete, and edit cells at any time.
5 Double-click each cell and enter or choose the appropriate information:
Text specifies the text for the menu item.
Link determines the URL of the menu item. You can enter a custom link, or choose one from
the Link pop-up menu, if any are available. If you’ve entered URLs for other web objects in the
document, those URLs appear in the Link pop-up menu.
Target designates the target for the URL. You can enter a custom target, or choose a preset one
from the Target pop-up menu.
Entering content on the last line in the window adds an empty line below it.
■
Tip: To navigate from an active cell to another cell and continue entering information, press the
Tab key to move between cells and the Up Arrow and Down Arrow keys to scroll through the
list vertically.
6 Repeat steps 4 and 5 until you have added all menu items.
7 Optionally, to delete a menu item, highlight it and click the Delete Menu button.
8 Do one of the following:
Click Next to move to the Appearance tab or choose another tab to continue building the
pop-up menu.
■ Create submenu entries for the pop-up menu. For information, see “Creating submenus
within a pop-up menu” on page 203.
■ Click Done to complete the pop-up menu by closing the Pop-up Menu Editor.
In the workspace, the hotspot or slice on which you built the pop-up menu displays a blue
behavior line attached to an outline of the top level of the pop-up menu.
■
Note: To view a pop-up menu, you must press F12 to preview it in a browser. The previews in the
Fireworks workspace do not display pop-up menus.
202
Chapter 10: Creating Buttons and Pop-up Menus
Creating submenus within a pop-up menu
Using the Indent Menu and Outdent Menu buttons on the Content tab of the Pop-up Menu
Editor, you can create submenus—pop-up menus that appear when the user moves the pointer
over or clicks another pop-up menu item. You can create as many levels of submenus as you want.
To create a pop-up submenu:
1 Open the Content tab of the Pop-up Menu Editor and create menu items. Create the menu
2
3
4
5
6
items that you wish to use for the submenu as well, placing them directly under the menu item
for which they will be a submenu. For more information, see “Creating a basic pop-up menu”
on page 202.
Click to highlight a pop-up menu item that you wish to make a submenu item.
Click the Indent Menu button to designate the item as a submenu item under the item directly
above it on the menu item list.
To add the next item to the submenu, highlight it and click Indent Menu.
All items that are contiguously indented at the same level constitute a single pop-up submenu.
Optionally, highlight a menu or submenu item and click Add Menu to insert a new item just
below the highlighted item.
Do one of the following:
■ Click Next to move to the next tab or choose another tab to continue building the
pop-up menu.
■ Click Done to close the Pop-up Menu Editor.
To create a pop-up submenu within a pop-up submenu:
1 Highlight a submenu item in the Content tab of the Pop-up Menu Editor. For more
information, see the previous procedure.
2 Click the Indent Menu button to indent it again, so that it is indented from the submenu item
directly above it.
You can continue indenting to create as many levels of nested submenus as you want.
To move a menu item into a higher-ranking submenu or into the main pop-up menu:
1 Highlight the menu item in the Content tab of the Pop-up Menu Editor.
2 Click the Outdent Menu button.
For more information about positioning submenus, see “Positioning pop-up menus and
submenus” on page 208.
3 Do one of the following to complete the pop-up menu or continue building it:
■ Click Next to move to the Appearance tab or choose another tab to continue building the
pop-up menu.
■ Click Done to close the Pop-up Menu Editor.
In the workspace, the hotspot or slice on which you built the pop-up menu displays a blue
behavior line attached to an outline of the top level of the pop-up menu.
Note: To view a pop-up menu, press F12 to preview it in a browser. The previews in the Fireworks
workspace do not display pop-up menus.
Creating pop-up menus
203
To move an entry in the pop-up menu:
1 With the desired pop-up menu displayed in the Pop-up Menu Editor, click the Content tab.
2 Drag the menu item to a new location in the list.
3 Click Done.
Designing the appearance of a pop-up menu
After you create a basic menu and optional submenus, you can format the text, apply graphic
styles to the Over and Up states, and choose vertical or horizontal orientation in the Appearance
tab of the Pop-up Menu Editor.
To set the orientation of a pop-up menu:
1 With the desired pop-up menu open in the Pop-up Menu Editor, click the Appearance tab.
For information on opening an existing pop-up menu in the Pop-up Menu Editor, see
“Editing pop-up menus” on page 209.
2 Choose Vertical or Horizontal from the Orientation pop-up menu.
204
Chapter 10: Creating Buttons and Pop-up Menus
To set whether a pop-up menu is HTML- or image-based:
1 With the desired pop-up menu open in the Pop-up Menu Editor, click the Appearance tab.
For information on opening an existing pop-up menu in the Pop-up Menu Editor, see
“Editing pop-up menus” on page 209.
2 Choose a Cells option:
HTML sets the menu’s appearance using HTML code only. This setting produces pages with
smaller file sizes.
Image gives you a selection of graphic image styles to use as the cell background. This setting
produces pages with larger file sizes.
Note: You can add to this selection of styles by creating custom pop-up menu styles. For more
information, see “Adding pop-up menu styles” on page 206.
To format text in the current pop-up menu:
1 With the desired pop-up menu open in the Pop-up Menu Editor, click the Appearance tab.
For information on opening an existing pop-up menu in the Pop-up Menu Editor, see
“Editing pop-up menus” on page 209.
2 Choose a preset size from the Size pop-up menu or enter a value in the Size text box.
Note: When cell width and height are set to Automatic in the Advanced tab of the Pop-up Menu
Editor, text size determines the size of graphics associated with the menu item.
3 Choose a system font group from the Font pop-up menu or enter the name of a custom font.
Note: Be careful when choosing a font. If users who will view your web page don’t have the font
you choose installed on their system, a replacement font will be displayed in their web browser.
4 Optionally, click a text style button to apply a bold or italic style.
5 Click a justification button to align text to the left or right or center it.
6 Choose a text color from the Text Color box.
To set the appearance of the menu cells:
1 With the desired pop-up menu open in the Pop-up Menu Editor, click the Appearance tab.
For information on opening an existing pop-up menu in the Pop-up Menu Editor, see
“Editing pop-up menus” on page 209.
2 Choose the text and cell colors for each state.
3 If Image is selected as the cell type, choose a graphical style for each state.
4 Do one of the following:
■ Click Next to move to the Advanced tab or choose another tab to continue building the
pop-up menu.
■ Click Done to close the Pop-up Menu Editor.
In the workspace, the hotspot or slice on which you built the pop-up menu displays a blue
behavior line attached to an outline of the top level of the pop-up menu.
Note: To view a pop-up menu, press F12 to preview it in a browser. The previews in the Fireworks
workspace do not display pop-up menus.
Creating pop-up menus
205
Adding pop-up menu styles
You can add custom cell styles to the Pop-up Menu Editor. Custom cell styles are available along
with the preset choices on the Appearance tab when you choose the Image option as the cell type,
which sets pop-up menus to use graphical backgrounds in their cells.
To add a custom cell style to the Pop-up Menu Editor:
1 Apply any combination of stroke, fill, texture, and Live Effects to an object, and save it as a style
using the Styles panel. For more information, see “Creating and deleting styles” on page 156.
2 Select the new style in the Styles panel, and then choose Export Style from the Styles panel
Options menu.
3 Navigate to the Nav Menu folder on your hard disk, rename the style file if you wish, and
click Save.
Note: The exact location of the Nav Menu folder varies depending on your operating system. For
more information, see “Working with configuration files” on page 286.
When you return to the Appearance tab of the Pop-up Menu Editor and choose the Image Cell
background option, the new style is available along with the preset styles for the Up and Over
states of the pop-up menu cells.
Setting advanced pop-up menu properties
The Advanced tab of the Pop-up Menu Editor offers additional settings to control cell size,
padding, and spacing; text indention; menu disappearance delay; and border width, color,
shadow, and highlight.
206
Chapter 10: Creating Buttons and Pop-up Menus
To set advanced cell properties for the current pop-up menu:
1 With the desired pop-up menu open in the Pop-up Menu Editor, click the Advanced tab.
2
3
4
5
6
7
For information on opening an existing pop-up menu in the Pop-up Menu Editor, see
“Editing pop-up menus” on page 209.
Choose a width or height constraint from the Automatic/Pixels pop-up menu:
Automatic forces the cell height to conform to the text size set in the Appearance tab of the
Pop-up Menu Editor and the cell width to conform to the menu item that contains the
longest text.
Pixels allows you to enter specific measurements in pixels in the Cell Width and Cell Height
text boxes.
Enter a value in the Cell Padding text box to determine the distance between pop-up menu text
and the edge of the cell.
Enter a value in the Cell Spacing text box to set the amount of space between menu cells.
Enter a value in the Text Indent text box to set the amount of indention for pop-up menu text.
Enter a value in the Menu Delay text box to set the amount of time in milliseconds that the
menu remains visible after the pointer is moved away from it.
Set pop-up border properties:
Show Borders allows you to show or hide pop-up menu borders. If this option is not selected,
the following options are disabled.
Border Width sets the width of the pop-up menu border.
Border Color, Shadow, and Highlight allow you to modify the color of pop-up
menu borders.
Note: Many of these options are disabled if the Image Cell type is selected on the Appearance tab.
8 Do one of the following to complete the pop-up menu or continue building it:
■
■
Click Next to move to the Position tab or choose another tab to continue building the
pop-up menu.
Click Done to close the Pop-up Menu Editor. In the workspace, the hotspot or slice on
which you built the pop-up menu displays a blue behavior line attached to an outline of the
top level of the pop-up menu.
Note: To view a pop-up menu, press F12 to preview it in a browser. The previews in the Fireworks
workspace do not display pop-up menus.
Creating pop-up menus
207
Positioning pop-up menus and submenus
The Position tab of the Pop-up Menu Editor lets you specify a pop-up menu’s position. You can
also position a top-level pop-up menu by dragging its outline in the workspace when the Web
Layer is visible.
To set the position for a pop-up menu using the Pop-up Menu Editor:
1 With the desired pop-up menu open in the Pop-up Menu Editor, click the Position tab.
For information on opening an existing pop-up menu in the Pop-up Menu Editor, see
“Editing pop-up menus” on page 209.
2 Do one of the following to define the menu position:
■ Click a Position button to position the pop-up menu relative to the slice that triggers it.
■ Enter x and y coordinates. Coordinates of 0,0 align the upper left corner of the pop-up
menu with the upper left corner of the slice or hotspot that triggers it.
3 Do one of the following:
■ If you have submenus, position them as described in the next procedure.
■ Click Back to modify properties on other tabs.
■ Click Done to close the Pop-up Menu Editor.
208
Chapter 10: Creating Buttons and Pop-up Menus
To set the position for a pop-up submenu using the Pop-up Menu Editor:
1 With the desired pop-up menu open in the Pop-up Menu Editor, click the Position tab.
For information on opening an existing pop-up menu in the Pop-up Menu Editor,
see “Editing pop-up menus” on page 209.
2 Do one of the following to define the submenu position:
■ Click a Submenu Position button to position the submenu relative to the pop-up menu
item that triggers it.
■ Enter x and y coordinates. Coordinates of 0,0 align the upper left corner of the pop-up
submenu with the upper right corner of the menu or menu item that triggers it.
3 Do one of the following:
■ To make each submenu’s position relative to the parent menu item that triggers it, deselect
the Place in Same Position option for the submenu position.
■ To make each submenu’s position relative to the parent pop-up menu, select Place in
Same Position.
4 Click Done to close the Pop-up Menu Editor or click Back to modify properties on other tabs.
To set the position for a pop-up menu by dragging it:
1 If necessary, do one of the following to display the Web Layer:
Click the Show Slices and Hotspots button in the Tools panel.
Click the Eye column in the Layers panel.
2 Select the web object that is the trigger for the pop-up menu.
3 Drag the pop-up menu outline to another location in the workspace.
■
■
Editing pop-up menus
In the Pop-up Menu Editor, you can edit or update the contents of a pop-up menu, rearrange the
menu items, or change other properties on any of the four tabs.
To edit a pop-up menu in the Pop-up Menu Editor:
1 If necessary, do one of the following to display the Web Layer:
Click the Show Slices and Hotspots button in the Tools panel.
■ Click the Eye column in the Layers panel.
2 Select the slice to which the pop-up menu is attached.
3 Double-click the pop-up menu’s blue outline in the workspace.
The Pop-up Menu Editor opens with your pop-up menu entries displayed.
4 Make the desired modifications on any of the four tabs and click Done.
■
To change a pop-up menu entry:
1 With the desired pop-up menu displayed in the Pop-up Menu Editor, click the Content tab.
2 Double-click the Text, Link, or Target text boxes and edit the menu text.
3 Click outside the entry list to apply the change.
4 Click Done.
Creating pop-up menus
209
To move an entry in the pop-up menu:
1 With the desired pop-up menu displayed in the Pop-up Menu Editor, click the Content tab.
2 Drag the menu item to a new location in the list.
3 Click Done.
About exporting pop-up menus
Fireworks generates all the JavaScript necessary to view pop-up menus in web browsers. When a
Fireworks document containing pop-up menus is exported to HTML, a JavaScript file called
mm_menu.js is exported to the same location as the HTML file.
When you upload your files, you should upload mm_menu.js to the same directory location as
the web page containing the pop-up menu. If you want to post the file to a different location, you
must update the hyperlink referencing mm_menu.js in the Fireworks HTML code to reflect the
custom location. If your document contains several pop-up menus, or you have several
documents with pop-up menus, Fireworks does not create extra mm_menu.js files; only a single
file is used for all menus in all documents.
When you include submenus, Fireworks generates an image file called arrows.gif. This image is
the tiny arrow that appears next to a menu entry that tells users a submenu exists. No matter how
many submenus a document contains, Fireworks always uses the same arrows.gif file.
For more information about exporting HTML and JavaScript, see “Exporting HTML”
on page 252.
210
Chapter 10: Creating Buttons and Pop-up Menus
CHAPTER 11
Creating Animation
Animated graphics add an exciting, sophisticated look to your website. In Macromedia Fireworks
MX 2004, you can create animated graphics with banner ads, logos, and cartoons that move. For
example, you can make your company mascot dance across a page while the logo fades in and out.
One way to create animations in Fireworks is by creating symbols and changing their properties
over time to produce the illusion of motion. A symbol is like an actor whose movements you
choreograph. The action of each symbol is stored in a frame. When you play all the frames
together in a sequence, you get animation.
You can apply different settings to the symbol to gradually change the content of successive
frames. You can make a symbol appear to move across the canvas, fade in or out, get bigger or
smaller, or rotate.
Because you can have multiple symbols in a single file, you can create a complex animation in
which different types of action occur all at once.
The Optimize panel lets you set optimization and export settings to control how your file is
created. Fireworks can export animations as animated GIF or Flash SWF files. You can also
import Fireworks animations directly into Macromedia Flash for further editing.
Building animation
In Fireworks, you can create animation by assigning properties to objects called animation
symbols. The animation of a symbol is broken down into frames, which contain the images and
objects that make up each step of the animation. You can have more than one symbol in an
animation, and each symbol can have a different action. Different symbols can contain differing
numbers of frames. The animation ends when all the action of all the symbols is complete.
To build an animation using animation symbols in Fireworks:
1 Create an animation symbol, either by creating a symbol from scratch or by converting an
existing object into a symbol. For more information, see “Creating animation symbols”
on page 212.
2 Use the Property inspector or the Animate dialog box to enter settings for the animation
symbol. You can set the degree and direction of movement, scaling, opacity (fading in or out),
and angle and direction of rotation. For more information, see “Editing animation symbols”
on page 213.
Note: Degree and direction of movement options are found only in the Animate dialog box.
211
3 Use the Frame Delay controls in the Frames panel to set the speed of the animated motion. For
more information, see “Setting the frame delay” on page 216.
4 Optimize the document as an animated GIF. For more information, see “Optimizing an
animation” on page 222.
5 Export the document as an Animated GIF or SWF, or save it as a Fireworks PNG and import
it into Macromedia Flash for further editing. For more information, see “Animation export
formats” on page 223.
Working with animation symbols
Animation symbols perform the action in your Fireworks file like actors in a movie. For example,
in an animation of three geese flying across the sky, each goose is a cast member.
An animation symbol can be any object you create or import, and you can have many symbols in
one file. Each symbol has its own properties and animates independently. So you can create
symbols that move across the screen while others fade or shrink.
You do not need to use symbols for every aspect of your animation. However, using symbols and
instances for graphics that appear in multiple frames keeps your animation file size smaller, in
addition to the other advantages discussed in this chapter.
You can change animation symbol properties at any time using the Animate dialog box or the
Property inspector. You can also edit symbol artwork in the Symbol Editor. The Symbol Editor
lets you edit your symbol without affecting the rest of the document. You can also change a
symbol’s motion by moving its motion path.
Because animation symbols are automatically placed in the library, you can reuse them to create
other animations.
Creating animation symbols
After you create an animation symbol, you can set properties that determine the number of
frames in the animation and the type of action, such as scaling or rotation. By default, a new
animation symbol has five frames, each with a delay time of 0.07 seconds.
To create an animation symbol:
1 Choose Edit > Insert > New Symbol.
2 In the Symbol Properties dialog box, enter a name for the new symbol.
3 Choose Animation and click OK.
4 In the Symbol Editor, use the drawing or text tools to create a new object.
You can draw either vector or bitmap objects.
5 Close the Symbol Editor window.
Fireworks places the symbol in the library and a copy in the center of the document.
You can add new frames to the symbol using the Frames slider in the Property inspector.
Choose Window > Properties to open the Property inspector, if it’s not already open.
212
Chapter 11: Creating Animation
To convert an object to an animation symbol:
1 Select the object.
2 Choose Modify > Animation > Animate selection.
3 Enter the desired settings in the dialog box. For more information on settings, see “Editing
animation symbols” on page 213.
Animation controls appear on the object’s bounding box, and a copy of the symbol is added
to the library.
Editing animation symbols
You can manipulate the properties of animation symbols to make your website come alive. You
can change a variety of properties in a symbol, from the animation speed to the opacity and
rotation. By manipulating these properties, you can make a symbol appear to rotate, speed up,
fade in and out, or any combination of these.
A key property for any animation symbol is number of frames. This property determines how
many steps it takes the symbol to complete its animation. When you set the number of frames for
a symbol, Fireworks automatically adds the required number of frames to the document to
complete the action. If the symbol requires more frames than currently exist in the animation,
Fireworks asks if you want to add extra frames.
Changing animation properties
You can change animation properties using either the Animate dialog box or the
Property inspector.
Animation symbol properties in the Property inspector
You can edit any of the following properties for an animation symbol:
Frames is the number of frames you want to include in the animation. Although the slider limits
you to a maximum of 250, you can enter any number you wish in the Frames text box. The
default is 5.
Move is the distance, in pixels, that you want each object to move. This option is available only in
the Animate dialog box. Although the default is 72, you can enter any number you wish in the
Move text box. Movement is linear, and there are no keyframes (unlike in Macromedia Flash
and Director).
Direction is the
direction, in degrees, in which you want the object to move. Values range from 0
to 360º. This option is available only in the Animate dialog box.
You can also change Movement and Direction values by dragging the object’s animation handles
(see “Editing symbol motion paths” on page 215).
Working with animation symbols
213
is the percent change in size from start to finish. Although the default is 100%, you can
enter any number you wish in the Scaling text box. To scale an object from 0 to 100%, the
original object must be very small; vector objects are recommended.
Scaling
Opacity is the degree of fading in or out from start to finish. Values range from 0 to 100, and the
default is 100%. Creating a fade in/fade out requires two instances of the same symbol—one to
play the fade in, and the other to play the fade out.
Rotation is the amount, in degrees, that the symbol rotates from start to finish. Values range from
0 to 360º. You can enter higher values for more than one rotation. The default is 0º.
indicate the direction in which the object rotates. CW indicates clockwise and
CCW indicates counterclockwise rotation.
CW and CCW
To change animation symbol properties:
1 Select an animation symbol.
2 Choose Modify > Animation > Settings to open the Animate dialog box or
Window > Properties to open the Property inspector if it is not already open.
3 Change the desired properties.
4 If you’re using the Animate dialog box, click OK to accept the changed properties.
Removing animations
You can remove animations either by deleting the animation symbol from the library or by
removing the animation from the symbol.
To remove a symbol from the library:
1 In the Library panel, select the animation symbol you want to remove.
2 Drag the symbol to the trash can icon in the lower right corner.
To remove the animation from a selected animation symbol:
• Choose Modify > Animation > Remove Animation.
The symbol becomes a graphic symbol and is no longer animated. If you later convert the
symbol back into an animation symbol, the previous animation settings return.
214
Chapter 11: Creating Animation
Editing symbol graphics
You can change the graphic your symbol is based on as well as its properties. You edit symbol
graphics in the Symbol Editor. The Symbol Editor lets you use any of the drawing, text, or
color tools to edit the graphic. While you’re working in the Symbol Editor, only the selected
symbol is affected.
The symbol is a library item. Thus, if you change the appearance of one of its instances, all the
other instances change as well.
To change a selected symbol’s graphic attributes:
1 Do one of the following to open the Symbol Editor:
Double-click the symbol object.
■ Choose Modify > Symbol > Edit Symbol.
■ Click the Edit button in the Animate dialog box.
2 Modify the animation symbol and change any text, strokes, fills, and effects as appropriate.
3 Close the Symbol Editor.
■
Editing symbol motion paths
When you select an animation symbol, it has a unique bounding box and a motion path attached
that indicates the direction in which the symbol moves.
The green dot on the motion path indicates the starting point, and the red dot shows the end
point. The blue points on the path represent frames. For example, a symbol with five frames
would have one green dot, three blue dots, and one red dot on its path. The position of the object
on the path indicates the current frame. So, if the object appears at the third dot, Frame 3 is the
current frame.
You can change the direction of the motion by changing the angle of the path.
To change movement or direction:
• Drag one of the symbol’s animation start or end handles to a new location. The green point
indicates the starting point; the red indicates the ending point.
Shift-drag to constrain the direction of movement to 45° increments.
Working with animation symbols
215
Working with frames
You build animations by creating a number of frames. You can see the contents of each frame
using the Frames panel. The Frames panel is where you create and organize frames. You can name
the frames, reorganize them, manually set the timing of the animation, and move objects from
one frame to another.
Onion Skinning column
Frame name
Frame Delay
column
Onion Skinning
options
Delete Frame
New/Duplicate Frame
Distribute to Frames
Each frame also has a number of associated properties. By setting the frame delay or hiding
a frame, you can make your animation look the way you want during the building and
editing process.
Setting the frame delay
The frame delay determines how long the current frame is displayed. It is specified in hundredths
of a second. For example, a setting of 50 displays the frame for half a second, and a setting of 300
displays it for three seconds.
To set the frame delay value:
1 Select one or more frames:
To select a contiguous range of frames, Shift-click the first and last frame names.
To select a noncontiguous range of frames, hold down Control (Windows) or Command
(Macintosh) and click each frame name.
2 Do one of the following:
■ Choose Properties from the Frames panel Options menu.
■ Double-click the frame delay column.
The Frame Properties pop-up window appears.
3 Enter a value for the frame delay.
4 Press Enter, or click outside the panel to close the pop-up window.
■
■
216
Chapter 11: Creating Animation
Showing and hiding frames for playback
You can show or hide frames for playback. If a frame is hidden, it is not displayed during playback
and it is not exported.
To show or hide a frame:
1 Do one of the following:
Choose Properties from the Frames panel Options menu.
Double-click the frame delay column.
The Frame Properties pop-up window appears.
2 Deselect Include when Exporting.
A red X is displayed in place of the frame delay time.
3 Press Enter or click outside the Frame Properties pop-up window to close it.
■
■
Naming animation frames
As you set up an animation, Fireworks creates the appropriate number of frames and displays
them in the Frames panel. By default the frames are named Frame 1, Frame 2, and so on. When
you move a frame in the panel, Fireworks renames each one to reflect the new order.
It’s a good idea to name your frames for easy reference and to keep track of them. That way you
always know which frame contains which part of the animation. Moving a renamed frame has no
effect on the name; it remains the same.
To change a frame’s name:
1 In the Frames panel, double-click the frame’s name.
2 In the pop-up text box, type a new name and press Enter.
Adding, moving, copying, and deleting frames
You can add, copy, delete, and change the order of frames in the Frames panel.
To add a new frame:
• Click the New/Duplicate Frame button at the bottom of the Frames panel.
To add frames to a specific place in the sequence:
1 Choose Add Frames from the Frames panel Options menu.
2 Enter the number of frames to add.
3 Choose where to insert the frames: before the current frame, after it, or at the beginning or end.
Then click OK.
To make a copy of a frame:
• Drag an existing frame to the New/Duplicate Frame button at the bottom of the Frames panel.
Working with frames
217
To copy a selected frame and place it in a sequence:
1 Choose Duplicate Frame from the Frames panel Options menu.
2 Enter the number of duplicates to create for the selected frame, choose where the duplicate
frames are to be inserted, and click OK.
Duplicating a frame is useful when you want objects to reappear in another part of
the animation.
To reorder frames:
• Drag the frames one by one to a new location in the list.
To delete the selected frame, do one of the following:
• Click the Delete Frame button in the Frames panel.
• Drag the frame to the Delete Frame button.
• Choose Delete Frame from the Frames panel Options menu.
Moving selected objects in the Frames panel
You can use the Frames panel to move objects to a different frame. Objects that appear in only a
single frame appear to vanish as the animation plays. You can move objects to make them appear
or disappear at different points in the movie.
To move a selected object to a different frame:
• In the Frames panel, drag the selection indicator (the small blue square at the right of the frame
delay time) to the new frame.
Sharing layers across frames
Layers divide a Fireworks document into discrete planes, like separate tracing paper overlays.
With animations, you can use layers to organize objects that are part of the scenery or backdrop
for the animation. This gives you the convenience of being able to edit objects on one layer so
that they don’t affect the rest of your animation. For more information, see “Working with layers”
on page 129.
If you want objects to appear throughout an animation, you can place them on a layer and then
use the Layers panel to share the layer across frames. When a layer is shared across frames, all
objects on that layer are visible in every frame.
You can edit objects on shared layers from any frame; those edits are reflected in all other frames.
In this example, the red square layer is shared across frames.
218
Chapter 11: Creating Animation
To share a layer across frames:
1 Double-click the layer.
2 Select Share Across Frames.
Note: All the contents in a shared layer appear in every frame.
To disable the sharing of a layer across frames:
1 Double-click the shared layer.
2 Deselect Share Across Frames.
3 Choose one of the following options for how to copy objects to frames:
■
■
Leave the contents of the shared layer in the current frame only.
Copy the contents of the shared layer to all frames.
Viewing objects in a specific frame
You can easily view objects in a specific frame using the Frame pop-up menu in the Layers panel.
To view objects in a specific frame:
• Choose the desired frame from the Frame pop-up menu at the bottom of the Layers panel.
All objects in the selected frame are listed in the Layers panel and displayed on the canvas.
Working with frames
219
Using onion skinning
Onion skinning lets you view the contents of frames preceding and following the currently
selected frame. You can smoothly animate objects without having to flip back and forth through
them. The term onion skinning comes from a traditional animation technique of using thin,
translucent tracing paper to view animated sequences.
When onion skinning is turned on, objects in frames before or after the current frame are
dimmed so that you can distinguish them from objects in the current frame.
By default, Multi-Frame Editing is enabled, which means you can select and edit dimmed objects
in other frames without leaving the current frame. You can use the Select Behind tool to select
objects in frames in sequential order.
To adjust the number of frames visible before and after the current frame:
1 In the Frames panel, click the Onion Skinning button.
2 Choose a display option:
No Onion Skinning
turns off onion skinning and displays only the contents of the
current frame.
displays the contents of the current frame and the next frame.
Before and After displays the contents of the current and adjacent frames.
Show All Frames displays the contents of all frames.
Custom sets a custom number of frames and controls the opacity of onion skinning.
Multi-Frame Editing lets you select and edit all visible objects. Deselect this option to select
and edit only objects in the current frame.
Show Next Frame
Tweening
Tweening is a traditional animation term that describes the process in which a lead animator draws
only the keyframes (frames containing major changes) while assistants draw the frames
in between.
In Fireworks, tweening blends two or more instances of the same symbol, creating interim
instances with interpolated attributes. Tweening is a manual process useful for more sophisticated
movement of an object across the canvas and for objects whose Live Effects change in each frame
of the animation.
For example, you can tween an object so that it seems to move along a linear path.
To tween instances:
1 Select two or more instances of the same graphic symbol on the canvas. Do not select instances
of different symbols.
2 Choose Modify > Symbol > Tween Instances.
3 Enter the number of tween steps to be inserted between the original pair in the Tween Instances
dialog box.
220
Chapter 11: Creating Animation
4 To distribute the tweened objects to separate frames, choose Distribute to Frames and click OK.
If you choose not to distribute the objects to separate frames, you can do it later by selecting all
instances and clicking the Distribute to Frames button in the Frames panel.
Note: In most cases, using animation symbols is preferable to tweening. For more information, see
“Working with animation symbols” on page 212.
Previewing an animation
You can preview an animation while you are working on it to check its progress. You can also
preview an animation after optimization to see how it will look in a web browser.
To preview an animation in the workspace:
• Use the frame controls that appear at the bottom of the Document window.
Frame controls
Keep the following in mind when previewing animations:
• To set how long each frame appears in the Document window, enter frame delay settings in the
•
•
Frames panel.
Frames excluded from the export do not appear in the preview.
Previewing the animation in the Original view displays the full-resolution source graphic, not
the optimized preview used for the exported file.
To preview an animation in Preview view:
1 Click the Preview button at the upper left of the Document window.
2 Use the frame controls.
Note: Previewing animations in 2-Up or 4-Up view is not recommended.
To preview an animation in a web browser:
• Choose File > Preview in Browser, and choose a browser from the submenu.
Note: Animated GIF must be selected as the Export file format in the Optimize panel, or no motion
will be visible when you preview the document in your browser. This is required even if you plan to
import your animation into Flash as a SWF or Fireworks PNG file.
Exporting your animation
After you set up the symbols and frames that make up your animation, you are ready to export
the file as an animation. Before you export the files, you need to enter a few settings to make your
animation load more easily and play more smoothly. You can set playback settings like looping
and transparency and then use optimization to make your exported file smaller and easier
to download.
Note: If you plan to import your animation into Macromedia Flash for further editing, you do not need
to export it. Flash can directly import Fireworks PNG source files. For more information, see
“Working with Macromedia Flash MX 2004” in Working with Other Applications on the Fireworks
Support Center at www.macromedia.com/support/fireworks/.
Exporting your animation
221
Setting the animation repetition
The Loop setting in the Frames panel determines how many times the animation repeats. This
feature loops frames over and over so you can minimize the number of frames needed to build
the animation.
To set the selected animation to repeat:
1 Choose Window > Frames to display the Frames panel.
2 Click the GIF Animation Looping button at the bottom of the panel.
3 Choose the number of times to repeat the animation after the first time.
If you choose 4, for example, the animation plays five times in all. Forever repeats the
animation continuously.
Setting transparency
As part of the optimization process, you can have one or more colors in an animated GIF be
displayed as transparent in a web browser. This is useful when you want a web page background
color or image to show through the animation.
To display a color as transparent in a web browser:
1 Choose Window > Optimize if the Optimize panel is not visible.
2 From the Transparency pop-up menu in the Optimize panel, choose either Index Transparency
or Alpha Transparency. For a description of these options, see “Making areas transparent”
on page 241.
3 Use the transparency tools in the Optimize panel to select colors for transparency.
Optimizing an animation
Optimization compresses your file into the smallest package for fast loading and exporting,
making downloading time much quicker on your website.
To optimize an animation:
1 If you plan to export your animation as an animated GIF, choose Animated GIF as the Export
file format in the Optimize panel.
If the panel is not visible, choose Window > Optimize.
2 Set the Palette, Dither, or Transparency options. For more information on optimizing options,
see “Optimizing GIF, PNG, TIFF, BMP, and PICT files” on page 235.
3 In the Frames panel, set the frame delay. For more information, see “Setting the frame delay”
on page 216.
222
Chapter 11: Creating Animation
Animation export formats
After you create and optimize an animation, it is ready to export.
Animated GIFs give the best results for clip art and cartoonlike graphics. For information about
exporting animated GIFs, see “Exporting an animation” on page 250.
You can export the animation as a Flash SWF file, and then import it into Macromedia Flash. Or
you can skip the export step and import your Fireworks PNG source file directly into Flash. This
option gives you the most control over how your animation is imported. You can import all layers
and frames of your animation if desired, and then further edit them within Flash. For more
information, see “Working with Macromedia Flash MX 2004” in Working with Other
Applications on the Fireworks Support Center at www.macromedia.com/support/fireworks.
You can also export frames or layers from your animations as multiple files. This can be useful
when you have many symbols on different layers for the same object. For example, you can export
a banner ad as multiple files if each letter of a company name is animated in a graphic. Each letter
is separate from the others. For more information about exporting layers or frames to multiple
files, see “Exporting frames or layers” on page 251.
Working with existing animations
You can use an existing animated GIF file as part of your Fireworks animation. There are two
ways of using the file: you can import the GIF into an existing Fireworks file, or you can open the
GIF as a new file.
When you import an animated GIF, Fireworks converts it to an animation symbol and places it in
the currently selected frame. If the animation has more frames than the current movie does, you
can choose to automatically add more frames.
Imported GIFs lose their original frame delay settings and assume the frame delay of the current
document. Because the imported file is an animation symbol, you can apply additional motion to
it. For example, you can import an animation of a man walking in place and then apply direction
and motion properties to have the man walk across the screen.
When you open an animated GIF in Fireworks, a new file is created and each frame in the GIF is
placed in a separate frame. Although the GIF is not an animation symbol, it does retain all the
frame delay settings from the original file.
After the file is imported, you need to set its file format to Animated GIF to export the motion
from Fireworks.
To import an animated GIF:
1 Choose File > Import.
2 Locate the file and click Open.
3 Click Yes to add additional frames to your animation.
If you click Cancel, only the first frame of the animated GIF is displayed. Although the whole
document is imported, you must add additional frames to view it.
To open an animated GIF:
• Choose File > Open and locate the GIF file.
Working with existing animations
223
Using multiple files as one animation
Fireworks can create an animation based on a group of image files. For example, you can create a
banner ad based on several existing graphics by opening each graphic and placing it in a separate
frame in the same document.
To open multiple files as an animation:
1 Choose File > Open.
2 Shift-click to select multiple files.
3 Select Open as Animation and click OK.
Fireworks opens the files in a new single document, placing each file in a separate frame in the
order in which you selected it.
224
Chapter 11: Creating Animation
CHAPTER 12
Optimizing and Exporting
The ultimate goal in web graphic design is to create great-looking images that download as fast as
possible. To do that, you must select a file format with the best compression for your image while
maintaining as much quality as possible. This balancing act is optimization—finding the right
mix of color, compression, and quality.
Exporting graphics from Macromedia Fireworks MX 2004 is a two-step process:
• First, you prepare a document or individual sliced graphics for export by choosing
•
optimization settings and comparing previews to determine an acceptable balance between
quality and file size.
Second, you export (or in some cases, save) the document or individual sliced graphics using
export settings suitable for their destination on the web or elsewhere.
If you are new to optimizing and exporting web graphics, you can use the Export Wizard. The
wizard guides you through the export process and suggests settings. It also displays the Export
Preview, where you can optimize a document as part of the export process.
If you are comfortable with the tasks of optimizing and exporting graphics, you’ll want to use the
other tools available in Fireworks for optimizing and exporting. For optimizing, you use the
Optimize panel and the preview buttons in the Document window. They offer you greater
control over the optimization process. For exporting, you use the Export dialog box or the Quick
Export button. In some cases, you can simply save the graphic without exporting. For more
information, see Fireworks Help.
The Quick Export button makes exporting graphics for use in other applications easy by
automatically setting the appropriate options in the Export dialog box for you. If you use
Fireworks with other applications, the Quick Export button can simplify your design workflow.
225
About optimizing
Optimizing graphics in Fireworks involves doing the following:
• Choosing the best file format. Each file format has a different method of compressing color
•
•
information. Choosing the appropriate format for certain types of graphics can greatly
reduce file size.
Setting format-specific options. Each graphic file format has a unique set of options. You can
use options such as color depth to reduce file size. Some graphic formats such as GIF and
JPEG also have options for controlling image compression.
Adjusting the colors in the graphic (for 8-bit file formats only). You can limit colors by
confining the image to a specific set of colors called a color palette. Then you trim unused
colors from the color palette. Fewer colors in the palette means fewer colors in the image,
which results in a smaller file size for paletted image file types.
You should experiment with all optimization controls to find the best balance of quality and size.
Using the Export Wizard
You can use the Export Wizard if you are new to optimizing and exporting web graphics. Using
the Export Wizard, you can easily export graphics without understanding the details of
optimizing and exporting.
The Export Wizard takes you step by step through the optimization and export process. Answer
questions about the file destination and intended use, and the Export Wizard suggests file type
and optimization settings.
If you prefer to optimize to a target file size, the Export Wizard optimizes the exported file to fit
within the size constraint you set.
Once you are more comfortable with optimizing and exporting, you’ll want to use the Optimize
panel and the preview buttons in the Document window to optimize graphics. They are more
convenient than the Export Wizard and offer more optimization control for users who are
familiar with the optimization process. After you optimize graphics in this manner, you must
perform an additional step to export (or in some cases, save) the graphics. For more information
on exporting, see “Optimizing in the workspace” on page 231 or “Exporting from Fireworks”
on page 247. For more information on saving, see Fireworks Help.
To export a document using the Export Wizard:
1 Choose File > Export Wizard.
2 Answer any questions that appear and click Continue in each panel.
Fireworks makes recommendations about file formats.
Tip: Choose Target Export File Size in the first panel to optimize to a maximum file size.
3 Click Exit in the Analysis Results window of the wizard.
The Export Preview opens with recommended export options. For more information, see
“Using Export Preview” on page 227.
226
Chapter 12: Optimizing and Exporting
Using Export Preview
When accessed through the Export Wizard, the Export Preview displays recommended
optimization and export options for the current document. When selected directly from the File
menu, the Export Preview displays the current document export settings as defined in the
optimize panel.
The preview area of the Export Preview displays the document or graphic exactly as it will be
exported and estimates file size and download time with the current export settings.
File size and download time estimates
Save export settings
in the active view
Preview chosen
export settings
Saved set of options for the selected export
You can use split views to compare various settings to find the smallest file size that maintains an
acceptable level of quality. You can also constrain the file size using the Optimize to Size wizard.
When you export animated GIFs or JavaScript rollovers, the estimated file size represents the total
size across all frames.
Note: To increase redraw speed of the Export Preview, deselect Preview. To stop the redraw of the
preview area when changing settings, press Escape.
Using the Export Wizard
227
To export using Export Preview:
1 Choose File > Export Preview to open the Export Preview.
To edit optimization settings, click the Options tab. For information about the options
available on this tab, see the following procedures.
■ To edit the size and area of the exported image, click the File tab and change the
desired settings. For information about the options available on this tab, see the
following procedures.
■ To edit animation settings for the image, click the Animation tab and change the desired
settings. For information about the options available on this tab, see the following
procedures.
2 Use the Zoom button at the bottom of the dialog box to zoom in or out in the preview. Click
this button to activate the Zoom magnification tool and then click in the preview to magnify
the preview. Alt-click (Windows) or Option-click (Macintosh) the button in the preview to
zoom out.
3 Do one of the following to pan the preview area:
■ Click the Pointer button at the bottom of the dialog box and drag in the preview.
■ Hold down the Spacebar when the Zoom pointer is active and drag in the preview.
4 Click a split-view button to divide the preview area into two or four previews to
compare settings.
■
Each preview window can display a preview of the graphic with different export settings.
Note: When you zoom or pan while multiple views are open, all views zoom and
pan simultaneously.
5 Click Export when you have finished changing settings.
6 In the Export dialog box, type a name for the file, choose a destination, set any other options if
desired, and click Save.
For more information about the options in the Export dialog box, see “Exporting from
Fireworks” on page 247.
228
Chapter 12: Optimizing and Exporting
To set optimization settings using Export Preview:
1 Click the Options tab. Most of the options available here are similar to those in the Optimize
panel. For more about these options, see “Using optimization settings” on page 231.
2 Click the Optimize to Size Wizard button to optimize a graphic based on a target file size.
Enter a file size in kilobytes and click OK.
The Optimize to Size Wizard attempts to match the requested file size using these methods:
■ Adjusting JPEG quality
■ Modifying JPEG smoothing
■ Altering the number of colors in 8-bit images
■ Changing dither settings in 8-bit images
■ Enabling or disabling optimization settings
To set exported image dimensions using Export Preview:
1 Click the File tab.
2 Specify a scale percentage or enter the desired width and height in pixels. Select Constrain to
scale the width and height proportionally.
To define only a portion of an image for export using Export Preview:
1 Click the File tab.
2 Select the Export Area option and do one of the following to specify the export area:
■
■
Drag the dotted border that appears around the preview until it encloses the desired export
area. (Drag inside the preview to move hidden areas into view.)
Enter pixel coordinates for the boundaries of the export area.
Using the Export Wizard
229
To set animation settings using Export Preview:
1 Click the Animation tab.
2 Use the following techniques to preview animation frames:
To display a single frame, select the desired frame in the list on the left side of the dialog
box, or use the frame controls in the lower right area of the dialog box.
■ To play the animation, click the Play/Stop control in the lower right area of the dialog box.
3 Make edits to the animation:
■ To specify the frame disposal method, select the desired frame in the list and choose an
option from the pop-up menu (indicated by the trash can icon).
■ To set the frame delay, select the desired frame in the list and enter the delay time in
hundredths of a second in the Frame Delay field.
■
■
■
■
230
To set the animation to play repeatedly, click the Looping button and choose the desired
number of repetitions from the pop-up menu.
Choose the Auto-Crop option to crop each frame as a rectangular area, so that only the
image area that differs between frames is output. Selecting this option reduces file size.
Choose the Auto-Difference option to output only pixels that change between frames.
Selecting this option reduces file size.
Chapter 12: Optimizing and Exporting
Optimizing in the workspace
Exporting graphics for use on the web is a two-step process: optimizing, then exporting (or in
some cases, simply saving). Optimizing graphics ensures they possess the right mix of color,
compression, and quality. After you finalize a graphic’s optimization settings, the graphic is ready
for export.
You don’t have to use the Export Wizard and Export Preview in Fireworks if you’re comfortable
optimizing and exporting graphics. Fireworks has optimization and export features in the
workspace that give you greater control over how files are exported:
• The Optimize panel contains the key controls for optimizing. For 8-bit file formats, it also
contains a color table that displays the colors in the current export color palette.
Note: When a slice is selected, the Optimize panel displays optimize settings for the selected
slice. Likewise, when the whole document is selected, the Optimize panel displays optimize
settings for the whole document. In other words, the active selection determines what is displayed
in the Optimize panel.
• When a slice is selected, the Property inspector has a Slice Export Settings pop-up menu from
•
which you can choose preset or saved optimization settings.
The preview buttons in the Document window show how the exported graphic would appear
with the current optimization settings.
You can optimize the whole document the same way, or select individual slices or selected areas of
a JPEG and assign different optimization settings for each.
Using optimization settings
You can choose from common optimization settings in the Property inspector or the Optimize
panel to quickly set a file format and apply several format-specific settings. When you choose an
option from the Default export options pop-up menu in the Property inspector, the rest of the
options in the Optimize panel are automatically set for you. You can further adjust each option
individually if desired.
If you need more custom optimization control than the preset options offer, you can create
custom optimization settings in the Optimize panel. You can also modify a graphic’s color palette
using the color table in the Optimize panel.
Optimizing in the workspace
231
To choose a preset optimization:
• Choose a preset from the Settings pop-up menu in the Property inspector or the
Optimize panel:
GIF Web 216 forces all colors to websafe colors. The color palette contains up to 216 colors
(see “Optimizing GIF, PNG, TIFF, BMP, and PICT files” on page 235).
GIF WebSnap 256 converts non-websafe colors to their closest websafe color. The color
palette contains up to a maximum of 256 colors.
GIF WebSnap 128 converts non-websafe colors to their closest websafe color. The color
palette contains up to 128 colors.
GIF Adaptive 256 is a color palette that contains only the actual colors used in the graphic.
The color palette contains up to a maximum of 256 colors.
JPEG – Better Quality sets quality to 80 and smoothing to 0, resulting in a high-quality but
larger graphic.
JPEG – Smaller File sets quality to 60 and smoothing to 2, resulting in a graphic less than half
the size of a Better Quality JPEG but with reduced quality.
Animated GIF Websnap 128 sets the file format to Animated GIF and converts non-websafe
colors to their closest websafe color. The color palette contains up to 128 colors.
For more information about file types, see “Choosing a file type” on page 234.
To specify custom optimization settings:
1 In the Optimize panel, choose an option from the Export File Format pop-up menu.
2 Set format-specific options, such as color depth, dither, and quality.
3 Choose other optimization settings from the Optimize panel Options menu, as necessary.
For more information about specific optimization controls, see the appropriate sections in
“Optimizing in the workspace” on page 231.
4 You can name and save custom optimization settings. Names of saved settings are displayed in
the preset optimization settings in the Settings pop-up menu in the Optimize panel and the
Property inspector when slices, buttons, or the canvas are selected. For more information, see
“Saving and reusing optimization settings” on page 246.
To modify the color palette:
• If the Optimize panel isn’t already open, choose Window > Optimize to view and edit a
document’s color palette.
For more information, see “Optimizing GIF, PNG, TIFF, BMP, and PICT files” on page 235.
To optimize individual slices:
1 Click a slice to select it. Shift-click to select more than one slice.
2 Optimize the selected slices using the Optimize panel.
232
Chapter 12: Optimizing and Exporting
Previewing and comparing optimization settings
The document preview buttons display the graphic as it would appear in a web browser, based on
optimization settings. You can preview rollover and navigation behaviors, as well as animation.
The Original button and the document preview buttons
The document preview buttons display a document’s total size, estimated download time, and file
format. The estimated download time is the average amount of time it would take to download
all the document’s slices and frames on a 56K modem. The 2-Up and 4-Up views display
additional information that varies depending on the file type selected.
You can use the Optimize panel to optimize a document while viewing a preview as if you were in
Original view. You can optimize the entire document at once or only selected slices. The slice
overlay helps you differentiate the slices currently being optimized from the rest of the document.
The slice overlay displays areas not currently being optimized with a dimmed, transparent white
tint. You can turn the slice overlay on or off.
When you optimize a selected slice, the slices not being optimized are dimmed.
To preview a graphic based on the current optimization settings:
• Click the Preview button in the upper left of the Document window.
Note: Click Hide Slices in the Tools panel to hide slices and slice guides while previewing.
Optimizing in the workspace
233
To compare views with different optimization settings:
1 Click the 2-Up or 4-Up button in the upper left of the Document window.
2 Click one of the split-view previews to select it.
3 Enter settings in the Optimize panel.
4 Select the other previews and specify different optimization settings for each preview to
compare them.
When you choose 2-Up or 4-Up view, the first split-view displays the original Fireworks PNG
document so that you can compare it with optimized versions. You can switch this view with
another optimized version.
To switch any optimized view to the Original view from 2-Up or 4-Up view:
1 Select an optimized view.
2 Choose Original (No Preview) from the Preview pop-up menu at the bottom of the
preview window.
To switch the Original view to an optimized view from 2-Up or 4-Up view:
1 Select the view containing the original.
2 Choose Export Preview from the Preview pop-up menu.
To hide or show the slice overlay:
• Choose View > Slice Overlay.
Note: This command is useful when you are in either the Preview, 2-Up preview, or 4-Up preview.
Choosing a file type
You should base your choice of file format upon the design and use of your graphic. A graphic’s
appearance can vary from one format to another, especially when different types of compression
are used. In addition, only certain graphic file types are accepted by most web browsers. Still other
file types are ideal for print publishing or use in multimedia applications.
The following file types are available:
GIF, or Graphics Interchange Format, is a popular web graphic format. GIFs contain a maximum
of 256 colors. GIFs can also contain a transparent area and multiple frames for animation. Images
with areas of solid color compress best when exported as GIFs. A GIF is usually ideal for cartoons,
logos, graphics with transparent areas, and animations.
was developed by the Joint Photographic Experts Group specifically for photographic or
high-color images. JPEG supports millions of colors (24-bit). The JPEG format is best for
scanned photographs, images using textures, images with gradient color transitions, and any
images that require more than 256 colors.
JPEG
PNG, or Portable Network Graphic, is a versatile web graphic format. However, not all web
browsers can view PNG graphics. A PNG can support up to 32-bit color, can contain
transparency or an alpha channel, and can be progressive. PNG is the native file format for
Fireworks. However, Fireworks PNG files contain additional application-specific information
that is not stored in an exported PNG file or in files created in other applications.
WBMP, or Wireless Bitmap, is a graphic format created for mobile computing devices such as cell
phones and PDAs. This format is used on Wireless Application Protocol (WAP) pages. WBMP is
a 1-bit format, so only two colors are visible: black and white.
234
Chapter 12: Optimizing and Exporting
TIFF, or Tagged Image File Format, is a graphic format used for storing bitmap images. TIFFs are
most commonly used in print publishing. Many multimedia applications also accept imported
TIFF graphics.
BMP, the Microsoft Windows graphic file format, is a common file format used to display bitmap
images. BMPs are used primarily on the Windows operating system. Many applications can
import BMP images.
PICT,
developed by Apple Computer, is a graphic file format commonly used on Macintosh
operating systems. Most Mac applications are capable of importing PICT images.
Optimizing GIF, PNG, TIFF, BMP, and PICT files
Each graphic file format in Fireworks has a set of optimization options. For the most part, only
the 8-bit file types such as GIF, PNG 8, TIFF 8, BMP 8, and PICT 8 offer a significant amount
of optimization control.
Note: JPEG files are an exception. For more on JPEG optimization controls, see “Optimizing
JPEGs” on page 243.
Fireworks optimization settings are similar for all 8-bit graphic file formats. For web file formats
such as GIF and PNG, you can also specify the amount of compression you want on the graphic.
You can optimize 8-bit file types by adjusting their color palettes. Fewer colors in the palette
means fewer colors in the image, resulting in a smaller file size. The drawback to reducing colors
is that it can also diminish image quality.
As you experiment with different optimization settings, you can use the 2-Up and 4-Up buttons
to test and compare a graphic’s appearance and estimated file size. For more information on using
the document preview buttons, see “Previewing and comparing optimization settings”
on page 233.
Note: All file types mentioned above (except PICT) can be opened and saved in Fireworks MX 2004
using their original filename extensions and optimization settings. This behavior differs from that in
previous versions of Fireworks. For more information, see Fireworks Help.
Choosing a color palette
GIFs and other 8-bit image formats contain a color palette. A color palette is a list of up to 256
colors available to the file. Only colors defined in the color palette appear in the graphic; however,
some color palettes contain colors that are not in the graphic.
The following palettes are available in Fireworks:
Adaptive is a custom palette derived from the actual colors in the document. Adaptive palettes
most often produce the highest quality image.
Web Adaptive is an adaptive palette in which colors that are close to websafe colors are converted
to the closest websafe color. Websafe colors are those that come from the Web 216 palette.
is a palette of the 216 colors common to both Windows and Macintosh computers.
This palette is often called a websafe or browser-safe palette because it produces fairly consistent
results in various web browsers on either platform when viewed on 8-bit monitors.
Web 216
contains the exact colors used in the image. Only images containing 256 or fewer colors
may use the Exact palette. If the image contains more than 256 colors, the palette switches
to Adaptive.
Exact
Optimizing in the workspace
235
Windows and Macintosh each
contain the 256 colors defined by the Windows or Macintosh
platform standards, respectively.
Grayscale is a palette of 256 or fewer shades of gray. Choosing this palette converts the image
to grayscale.
Black and White
is a two-color palette consisting only of black and white.
Uniform
is a mathematical palette based on RGB pixel values.
Custom
is a palette that has been modified or loaded from an external palette (ACT file) or a
GIF file.
Adjusting the color palette during optimization affects the colors in the image. You can optimize
and customize color palettes using the color table in the Optimize panel.
To choose a color palette:
• Choose an option from the Indexed Palette pop-up menu in the Optimize panel.
To import a custom palette:
1 Do one of the following:
Choose Load Palette from the Optimize panel Options menu.
■ Choose Custom from the Optimize panel Indexed Palette pop-up menu.
2 Navigate to an ACT or GIF palette file and click Open.
The colors from the ACT or GIF file are added to the color table in the Optimize panel.
■
Note: Windows users must choose GIF Files from the Files of Type pop-up menu to see files with
a .gif extension in the Open dialog box.
Setting the color depth
Color depth is the number of colors in the graphic. You can make your files smaller by reducing
the number of colors they use. Reducing color depth discards some colors in the image, beginning
with those used least. Pixels containing discarded colors convert to the closest color remaining in
the palette. This can reduce the quality of the image.
Note: The color depth option is available only for GIFs and other 8-bit graphic file formats.
To choose a color depth:
• Choose an option from the Colors pop-up menu in the Optimize panel or type a value in the
text box. You can choose from 2 to 256 colors.
Note: The actual colors in the image could be lower than the maximum number of colors you
choose. The number at the bottom of the color table indicates the actual number of colors visible in
the image. If no number is visible, you’ll see a Rebuild button, which indicates you should rebuild
the color palette. For more information, see “Viewing colors in a palette” on page 237.
To choose a color depth beyond 256 colors:
• Choose a 24- or 32-bit file format from the Export File Format pop-up menu in the
Optimize panel.
Note: Higher color depths create larger files and are typically not ideal for web graphics. Use only
24- or 32-bit color depths when exporting or saving photographic images with continuous tones
or complex gradient blends of colors. For high-color-depth graphics on the web, use JPEG files.
For more information, see “Optimizing JPEGs” on page 243.
236
Chapter 12: Optimizing and Exporting
Removing unused colors
Removing unused colors from an image before exporting or saving makes its file size smaller.
Note: This option is available only for GIFs and other 8-bit graphic file formats.
To remove unused colors:
• Choose Remove Unused Colors from the Optimize panel Options menu.
To include all colors in the palette, including colors that are not present in the exported or
saved image:
• Deselect Remove Unused Colors.
Dithering to approximate lost colors
Dithering approximates colors not in the current palette by alternating similarly colored pixels.
From a distance, the colors blend to create the appearance of the missing color. Dithering is
especially helpful when exporting images with complex blends or gradients or when exporting
photographic images to an 8-bit graphic file format such as GIF.
Dithering can greatly increase file size.
Note: The dithering option is available only for GIFs, other 8-bit graphic file formats, and WBMPs.
To dither a graphic:
• Enter a percentage value in the Dither text box of the Optimize panel.
Viewing colors in a palette
The color table in the Optimize panel displays colors in the current preview when you are
working in 8-bit color or less and lets you modify an image’s palette. The color table updates
automatically when you are in Preview mode. It appears empty if you are optimizing more than
one slice at a time or if you are not optimizing in an 8-bit format such as GIF.
Optimizing in the workspace
237
Various small symbols appear on some color swatches, indicating certain characteristics of
individual colors, as follows:
Symbol
Meaning
The color has been edited, affecting only the exported document. This does not change
the color in the source document.
The color is locked.
The color is transparent.
The color is websafe.
The color has multiple attributes. In this case, the color is websafe, is locked, and has
been edited.
If you edit the document, the color table may no longer show all the colors in the document.
When this occurs, you should rebuild the color table. A Rebuild button appears at the bottom of
the Optimize panel when you need to rebuild the color table.
To rebuild the color table to reflect edits in the document:
• Click Rebuild at the bottom of the Optimize panel.
When the table is rebuilt, the Rebuild button disappears, and the actual number of colors used
in the image is displayed in its place.
To select a color:
• Click the color in the Optimize panel color table.
To select multiple colors:
• Control-click (Windows) or Command-click (Macintosh) the colors.
To select a range of colors:
1 Click a color.
2 Hold Shift and click the last color in the range you want to select.
To preview all the pixels in the document that contain a specific color:
1 Click the Preview button at the upper left of the Document window.
2 Click and hold on a swatch in the Optimize panel color table.
The pixels that contain the selected swatch temporarily change to another highlight color until
you release the mouse button.
Note: When previewing pixels in the document using the 2-Up or 4-Up view, select a view other
than the Original view.
238
Chapter 12: Optimizing and Exporting
Locking colors in a palette
You can lock individual colors so that you cannot remove or change them when changing palettes
or when reducing the number of colors in a palette. If you switch to another palette after colors
have been locked, locked colors are added to the new palette.
To lock a selected color, do one of the following:
• Click the Lock button at the bottom of the Optimize panel.
• Right-click (Windows) or Control-click (Macintosh) the color swatch, and choose Lock Color
from the context menu.
To unlock a color:
1 Select a locked color in the Optimize panel color table.
2 Click the Lock button in the Optimize panel, or right-click (Windows) or Control-click
(Macintosh) the color swatch and choose Lock Color.
To unlock all colors:
• Choose Unlock All Colors from the Optimize panel Options menu.
Editing colors in a palette
You can change a color in the current palette by editing it in the Optimize panel color table.
Editing a color replaces all instances of that color in the image to be exported or to be saved as a
bitmap. Editing does not replace the color in the original image, unless you are working with a
bitmap and save the image as such; in this case, you should also save the image as a PNG file to
retain an editable version of the original image.
To edit a color:
1 Do one of the following to open the system color picker:
Select a color and click the Edit Color button at the bottom of the Optimize panel.
■ Double-click a color in the color table.
2 Change the color using the system color picker.
The new color replaces every instance of the replaced color in the preview area.
■
Note: Right-click (Windows) or Control-click (Macintosh) a color in the palette to display a
shortcut menu of edit options for the color.
Using websafe colors
Websafe colors are colors that are common to both Macintosh and Windows platforms. These
colors are not dithered when viewed in a web browser on a computer display set to 256 colors.
Fireworks has several methods of applying and using websafe colors.
To force all colors to be websafe colors:
• Choose Web 216 from the Indexed Palette pop-up menu in the Optimize panel.
To create an adaptive palette that favors websafe colors:
• Choose Web Adaptive from the Indexed Palette pop-up menu in the Optimize panel.
Non-websafe colors that are close to websafe colors are converted to the closest websafe color.
Optimizing in the workspace
239
To force a color to its closest websafe equivalent:
1 Select a color in the Optimize panel color table.
2 Click the Snap to Web Safe button.
If you save a Fireworks PNG, changing colors to websafe in the Optimize panel affects only the
exported version of the image, not the actual image.
Saving palettes
You can save custom palettes as external palette files. You can use saved palettes with other
Fireworks documents or in other applications that support external palette files, such as
Macromedia FreeHand, Macromedia Flash, and Adobe Photoshop. Saved palette files have the
.act extension.
To save a custom color palette:
1 Choose Save Palette from the Optimize panel Options menu.
2 Type a name for the palette and choose a destination folder.
3 Click Save.
You can load the saved palette file into the Swatches panel or Optimize panel for use when
exporting other documents.
Adjusting compression
You can compress GIF files to make them even smaller than usual by changing their loss setting.
Higher loss settings can yield smaller files but lower image quality. A loss setting between 5 and
15 typically yields the best results.
Original GIF; loss value of 30; loss value of 100
To change a GIF’s compression:
• Enter a Loss setting in the Optimize panel.
240
Chapter 12: Optimizing and Exporting
Making areas transparent
You can set transparent areas for GIFs and 8-bit PNGs so that in a web browser the background
of the web page is visible through those areas. In Fireworks, a gray-and-white checkerboard on
document previews denotes transparent areas.
Optimized image preview in Fireworks; image exported with transparency and placed on a web page
with a colored background
Note: 32-bit PNGs automatically contain transparency, though you won’t see a transparency option
for 32-bit PNGs in the Optimize panel.
You should use index transparency when exporting GIF images that contain transparent areas.
With index transparency, you set specific colors to be transparent upon export. Index
transparency turns on or turns off pixels with specific color values. Because GIFs support index
transparency, it is the most common form of transparency used on the web.
Note: GIF images are exported without transparency by default in Fireworks. Even if the canvas
behind an image or object appears transparent in Original view in Fireworks, this does not mean that
the background for that image will be transparent when you export it as a GIF for use on the web. You
must choose Index Transparency before export.
You can also use alpha transparency, although it is not often used with web graphics because only
PNGs support it and most web browsers do not support PNG format. Alpha transparency is
often used in exported graphics that contain gradient transparency and semi-opaque pixels. Alpha
transparency is also useful for exporting files to Macromedia Flash or Director, because both
applications support this type of transparency.
Note: Setting colors to transparent affects only the exported version of the image, not the actual
image. You can see what the exported image will look like in a preview. For information about the
document preview buttons, see “Previewing and comparing optimization settings” on page 233.
Optimizing in the workspace
241
To select a color for transparency:
1 Click the Preview, 2-Up, or 4-Up button at the upper left of the Document window. In 2-Up
or 4-Up view, click a view other than the original.
2 In the Optimize panel, choose Index Transparency from the Transparency pop-up menu at the
bottom of the panel.
The canvas color is made transparent in the preview.
3 To choose a different color, click the Select Transparency Color button.
The pointer changes to an eyedropper.
4 Do one of the following to choose the color to make transparent:
■ Click a color swatch in the Optimize panel color table.
■ Click a color in the document.
To add or remove transparent colors:
1 Click the Preview, 2-Up, or 4-Up button at the upper left of the Document window. In 2-Up
or 4-Up view, click a view other than the original.
Note: You can add or remove transparent colors in Original view but won’t be able to see your
results until you display a preview.
2 In the Optimize panel, click the Add Color to Transparency or Remove Color from
Transparency button.
3 Do one of the following to choose a color to add or remove from transparency:
■
■
Click a color swatch in the Optimize panel color table.
Click a color in the preview.
To make an image background transparent:
1 Click the Preview, 2-Up, or 4-Up button at the upper left of the Document window. In 2-Up
or 4-Up view, click a view other than the original.
2 Choose GIF as the file format in the Optimize panel, and choose Index Transparency from the
Transparency pop-up menu.
The canvas color is made transparent in the preview, and the graphic is ready for export.
Interlacing: Downloading gradually
When viewed in a web browser, interlaced images appear gradually while they are downloading.
They display at a low resolution first and then transition to full resolution by the time the
download is complete.
Note: This option is available only for GIF and PNG file formats. You can get similar results with a
JPEG by making it progressive. For more information, see “Optimizing JPEGs” on page 243.
To make a GIF or non-Fireworks PNG interlaced:
• Choose Interlaced from the Optimize panel Options menu.
242
Chapter 12: Optimizing and Exporting
Optimizing JPEGs
Using the Optimize panel, you can optimize JPEGs by setting compression and
smoothing options.
JPEGs are always saved and exported in 24-bit color, so you can’t optimize a JPEG by editing its
color palette. The color table is empty when a JPEG image is selected.
As you experiment with different optimization settings, you can use the 2-Up and 4-Up buttons
to test and compare a JPEG’s appearance and estimated file size. For more information on using
the document preview buttons, see “Previewing and comparing optimization settings”
on page 233.
Note: JPEGs can be opened and saved in Fireworks MX 2004 using their original filename
extension and optimization settings. This behavior differs from that in previous versions of Fireworks.
For more information, see Fireworks Help.
Adjusting JPEG Quality
JPEG is a lossy format, which means that some image data is discarded when it is compressed,
reducing the quality of the final file. However, image data can sometimes be discarded with little
or no noticeable difference in quality.
Original image; quality setting of 50; quality setting of 20
To control how much quality is lost when compressing a JPEG file:
• Adjust the quality with the Quality slider pop-up menu in the Optimize panel.
A high percentage setting maintains image quality but compresses less, producing larger files.
A low percentage setting yields a small file but produces a lower-quality image.
Optimizing in the workspace
243
Selectively compressing areas of a JPEG
Selective JPEG compression lets you compress different areas of a JPEG at different levels. Areas
of particular interest in an image can be compressed at a higher quality level. Areas of lesser
significance, such as backgrounds, can be compressed at a lower quality level, reducing the overall
size of the image while retaining the quality of the more important areas.
The selected area in this image is being compressed at a quality level of 90, while the unselected area is
being compressed at a quality level of 50.
To compress selected areas of a JPEG:
1 In Original view, select an area of the graphic for compression using one of the Marquee tools.
2 Choose Modify > Selective JPEG > Save Selection as JPEG Mask.
3 Choose JPEG from the Export File Format pop-up menu in the Optimize panel, if it’s not
4
5
6
7
8
9
already selected.
Click the Edit Selective Quality Options button in the Optimize panel.
The Selective JPEG Settings dialog box opens.
Choose Enable Selective Quality and enter a value in the text box.
Entering a low value compresses the Selective JPEG area more than the rest of the image.
Entering a high value compresses the Selective JPEG area less than the rest of the image.
Change the Overlay Color for the Selective JPEG area if desired. This does not affect
the output.
Select Preserve Text Quality. All text items will automatically be exported at a higher level,
regardless of the Selective Quality value.
Select Preserve Button Quality. All button symbols will automatically be exported at a
higher level.
Click OK.
To modify the selective JPEG compression area:
1 Choose Modify > Selective JPEG > Restore JPEG Mask as Selection.
The selection is highlighted.
2 Use the Marquee tool or another selection tool to make changes to the size of the area.
3 Choose Modify > Selective JPEG > Save Selection as JPEG Mask.
4 Change selective quality settings in the Optimize panel if desired.
Note: To undo a selection, choose Modify > Selective JPEG > Remove JPEG Mask.
244
Chapter 12: Optimizing and Exporting
Blurring or sharpening detail
You can set Smoothing in the Optimize panel to help decrease the file size of JPEGs. Smoothing
blurs hard edges, which do not compress well in JPEGs. Higher numbers produce more blurring
in the exported or saved JPEG, typically creating smaller files. A smoothing setting of about 3
reduces the size of the image while still maintaining reasonable quality.
To help preserve fine edges between two colors:
• Choose Sharpen JPEG Edges from the Optimize panel Options menu.
Use Sharpen JPEG Edges when exporting or saving JPEGs with text or fine detail to preserve
the sharpness of these areas. Choosing Sharpen JPEG Edges increases file size.
Using progressive JPEGs
Progressive JPEGs, such as interlaced GIFs and PNGs, are displayed at a low resolution initially
and then increase in quality as they download.
To export or save a progressive JPEG:
• Choose Progressive JPEG from the Optimize panel Options menu.
Note: Some older bitmap-editing applications cannot open progressive JPEGs.
Matching a target background color
Anti-aliasing makes an object appear smoother by blending the color of an object into the
background on which it is placed. For example, if the object is black and the page on which it
rests is white, anti-aliasing adds several shades of gray to the pixels surrounding the object’s border
to make a smoother transition between the black and white.
By setting the Matte option in the Optimize panel, you can anti-alias objects that lie directly
above the canvas to the Matte color. This is useful when exporting or saving graphics for
placement on web pages with colored backgrounds.
To match a target background color:
• In the Optimize panel, select a color from the Matte pop-up menu. Match it as closely as
possible to the target background color on which the graphic will be placed.
Note: Anti-aliasing is applied only to soft-edged objects that lie directly on top of the canvas.
Optimizing in the workspace
245
Removing halos
When you make the canvas color transparent on an image that was previously anti-aliased, the
pixels from the anti-aliasing remain. Then when you export (or in some cases, save) the graphic
and place it on a web page with a different background color, the perimeter pixels of the antialiased object may be apparent on the web page’s background. These form a halo, which is
especially noticeable on a dark background.
You can easily prevent halos in native Fireworks PNG files and in imported Photoshop files.
For other file types such as GIF, however, you must remove the halo manually.
To prevent halos in native Fireworks PNG files and imported Photoshop files, do one of
the following:
• Set the Canvas Color in the Property inspector or the Matte Color in the Optimize panel to
•
the color of the target web page background.
With the object you want to export selected, choose Hard from the Edge pop-up menu in the
Property inspector.
To remove a halo manually from a GIF or other graphic file:
1 With the file open in Fireworks, click the Preview, 2-Up, or 4-Up button at the upper left of
the Document window. In 2-Up or 4-Up view, click a view other than the original.
2 In the Optimize panel, choose Index Transparency from the Transparency pop-up menu.
3 Click the Add Color to Transparency button and click a pixel in the halo.
All pixels of the same color are removed in the preview.
4 If the halo is still there, repeat step 3 until the halo is gone.
Saving and reusing optimization settings
You can save custom optimization settings for future use in optimization or batch processing. The
following information is saved in custom preset optimizations:
• Settings and color table in the Optimize panel
• Frame delay settings chosen in the Frames panel (for animations only)
246
Chapter 12: Optimizing and Exporting
To save optimization settings as a preset:
1 Select Save Settings from the Optimize panel Options menu.
2 Type a name for the optimization preset and click OK.
Saved optimization settings appear at the bottom of the Settings pop-up menu in the Optimize
panel and in the Property inspector. They are available in all subsequent documents. The
preset file is saved in the Export Settings folder in your user-specific Fireworks configuration
folder. For information on the location of this folder, see “About user configuration files”
on page 286.
To share saved optimization settings with another Fireworks user:
• Copy the saved optimization preset file from the Export Settings folder to the same folder on
another computer.
Note: The location of the Export Settings folder varies depending on your operating system. For
more information, see the previous procedure.
To delete a custom preset optimization:
1 In the Optimize panel Saved Settings pop-up menu, choose the optimization setting you
want to delete.
2 Select Delete Settings from the Optimize panel Options menu.
You cannot delete a Fireworks preset optimization setting.
Exporting from Fireworks
Exporting from Fireworks is a two-step process. First you must prepare your graphic or document
for export by optimizing it. After your graphic or document has been optimized, you can export it
(or save it, depending on its originating file type). For more information on optimizing, see
“About optimizing” on page 226. For more information on saving, see Fireworks Help.
You can export Fireworks graphics in a number of ways. You can export (or in some cases, save) a
document as a single image in GIF, JPEG, or another graphic file format. Or you can export the
entire document as an HTML file and associated image files. Or you can choose to export
selected slices only. You can also export only a specified area of your document. In addition, you
can export Fireworks frames and layers as separate image files.
The default location to which Fireworks exports files is determined by the following, in this order:
1 The document’s current export preference, which is defined if you’ve ever exported the
document and then saved the PNG
2 The current export/save location, which is defined anytime you browse away from the default
location presented in a Save, Save As, Save a Copy, or Export dialog box
3 The current file’s location
4 The default location where new documents or images are saved on your operating system
In contrast, the default location where Fireworks saves a document is determined by a different set
of criteria. For more information, see Fireworks Help.
Exporting from Fireworks
247
Exporting a single image
You use the File > Export command to export a graphic after you have finished optimizing it in
the workspace.
If you are working with an existing image that you opened in Fireworks, you may be able to save
it rather than export it, depending on the image’s original file type. For more information, see
Fireworks Help.
Note: To export only certain images in a document, you must first slice your document and then
export only the desired slices. For more information, see “Exporting selected slices” on page 249.
To export a Fireworks document as a single image:
1 Choose the file format you would like to use for exporting in the Optimize panel and set format2
3
4
5
6
specific options.
Choose File > Export.
Choose a location to export the image file to.
For web graphics, the best location is typically a folder within your local website.
Enter a filename. You do not need to enter a file extension; Fireworks does that for you upon
export using the file type you specified in your optimization settings. For more information on
optimizing, see “About optimizing” on page 226.
Choose Images Only from the Save As Type pop-up menu.
Click Save.
Exporting a sliced document
By default, when you export a sliced Fireworks document, an HTML file and associated images
are exported. The exported HTML file can be viewed in a web browser or imported into other
applications for further editing.
Note: You can get Fireworks HTML into other applications using any of several techniques. For more
about HTML and the other ways to export Fireworks HTML, see “Exporting HTML” on page 252.
Before export, be sure you have the appropriate HTML style selected in the HTML Setup dialog
box. For more information, see “Setting HTML export options” on page 259.
To export a sliced Fireworks document:
1 Choose File > Export.
2 Navigate to the desired folder on your hard drive.
3 Choose HTML and Images from the Save as Type pop-up menu.
4 Type a filename in the File Name (Windows) or Save As (Macintosh) box.
5 Choose Export HTML File from the HTML pop-up menu.
6 Choose Export Slices from the Slices pop-up menu.
7 (Optional) Choose Put Images in Subfolder.
8 Click Save.
The files Fireworks exported appear on your hard disk. Images and an HTML file are
generated in the location you specified in the Export dialog box. For more information about
the options available in the Export dialog box when HTML and Images is selected as the file
type, see “Exporting Fireworks HTML” on page 253.
248
Chapter 12: Optimizing and Exporting
Exporting selected slices
You can export selected slices in a Fireworks document. Shift-click to select multiple slices.
Note: For more information on slicing, see “Creating and editing slices” on page 167.
To export selected slices:
1 Do one of the following:
Choose File > Export.
To export an individual slice, right-click (Windows) or Control-click (Macintosh) the slice
and choose Export Selected Slice.
Choose a location in which to store the exported files.
Typically, the best location is a folder within your local website.
Enter a filename. You do not need to enter an extension; Fireworks does that for you.
If you are exporting multiple slices, Fireworks uses the name you enter as the root name for all
exported graphics, excluding those you have custom-named using the Layers panel or the
Property inspector.
Choose Export Slices from the Slices pop-up menu.
To export only the slices you selected before export, choose Selected Slices Only, and ensure
that the Include Areas Without Slices option is not selected.
Click Save.
Each slice is exported using its optimization settings as defined in the Optimize panel. For
more information about optimizing, see “About optimizing” on page 226.
■
■
2
3
4
5
6
Updating a slice
If you’ve already exported a sliced document, and you’ve made changes to the original document
in Fireworks since you exported it, you can update just the image or slice that changed without
having to export and upload the entire sliced image. It is recommended that you custom-name
slices so that you can easily locate the replacement slice. For more information, see “Naming
slices” on page 181.
To update a single slice:
1 Hide the slice and edit the area underneath.
2 Show the slice again.
3 Right-click (Windows) or Control-click (Macintosh) the slice and choose Export Selected Slice
from the context menu.
4 Click Save to export the slice into the same folder as the original slice using the same base name.
5 Click OK when asked to replace the existing file.
If you retain the original filename for the updated slice and upload the slice to the same place
on your website where the original came from, the new slice replaces the original slice in the
HTML document.
Note: Avoid resizing the slice beyond its original export size in Fireworks, or you could create
unexpected results in the HTML document after the slice is updated.
Exporting from Fireworks
249
Exporting an animation
After you create and optimize an animation, it is ready to export. You can export an animation as
an Animated GIF, as a Flash SWF file, or as multiple files.
If your document contains more than one animation, you can insert slices on top of each
animation to export each using different animation settings, such as looping and frame delay.
For information about exporting to multiple files, see “Exporting frames or layers” on page 251.
For information about exporting animations as Flash SWF files, see “Working with Macromedia
Flash MX 2004” in Working with Other Applications on the Fireworks Support Center at
www.macromedia.com/support/fireworks/.
To export an animation as an animated GIF:
1 Choose Edit > Deselect to deselect all slices and objects, and choose Animated GIF as the file
format in the Optimize panel.
For more information on optimizing, see “Optimizing GIF, PNG, TIFF, BMP, and PICT files”
on page 235.
2 Choose File > Export.
3 In the Export dialog box, type a name for the file and choose the destination.
4 Click Save.
To export multiple animations with different animation settings as animated GIFs:
1 Shift-click the animations to select them all.
2 Choose Edit > Insert > Slice.
A message box appears, asking if you want to insert one slice or multiple slices.
3 Click Multiple.
4 Select each slice individually and use the Frames panel to set different animation settings for
each. For more information about animation settings, see Chapter 11, “Creating Animation,”
on page 211.
5 Select all the slices you would like to animate, and choose Animated GIF as the file format in
the Optimize panel.
For more information on optimizing, see “Optimizing GIF, PNG, TIFF, BMP, and PICT files”
on page 235.
6 Right-click (Windows) or Control-click (Macintosh) each slice and choose Export Selected
Slice from the context menu to export each slice individually. In the Export dialog box, type a
name for each file, choose the destination, and click Save.
250
Chapter 12: Optimizing and Exporting
Exporting frames or layers
Fireworks can export each layer or frame in a document as a separate image file, using the
optimization settings specified in the Optimize panel. The name of the layer or frame determines
the filename of each exported file. This export method is sometimes used to export animations.
To export frames or layers as multiple files:
1 Choose File > Export.
2 Type a filename and choose a destination folder.
3 In the Save As Type pop-up menu, choose one of the following:
exports frames as multiple files.
exports layers as multiple files.
Frames to Files
Layers to Files
Note: This exports all layers on the current frame.
4 Choose Trim Images to automatically crop the exported images to fit the objects on each frame.
If you want to export frames or layers the same size as the document, deselect Trim Images.
5 Click Save.
Exporting an area
You can use the Export Area tool to export a portion of a Fireworks document.
To export a portion of a document:
1 Choose the Export Area tool from the Tools panel.
2 Drag a marquee defining the portion of the document to export.
Note: You can adjust the position of the marquee as you drag. While holding down the mouse
button, press and hold down the Spacebar, then drag the marquee to another location on the
canvas. Release the Spacebar to continue drawing the marquee.
3
4
5
6
7
8
When you release the mouse button, the export area remains selected.
Resize the export area if necessary:
■ Shift-drag a handle to resize the export area marquee proportionally.
■ Alt-drag (Windows) or Option-drag (Macintosh) a handle to resize the marquee from
the center.
■ Alt-Shift-drag (Windows) or Option-Shift-drag (Macintosh) a handle to constrain the
proportions and resize from the center.
Double-click inside the export area marquee to go to Export Preview.
Adjust settings in the Export Preview, and click Export.
In the Export dialog box, type a filename and choose a destination folder.
In the Save As pop-up menu, choose Images Only.
Click Save.
Note: To cancel without exporting, double-click outside the export area marquee, press Escape,
or choose another tool.
Exporting from Fireworks
251
Exporting HTML
Unless you specify otherwise, when you export a sliced Fireworks document, what you’re actually
exporting is an HTML file and its images.
Fireworks generates pure HTML that can be read by most web browsers and HTML editors.
There are a variety of ways to export Fireworks HTML:
• Export an HTML file, which you can later open for editing in an HTML editor.
• Copy HTML code to the Clipboard in Fireworks, and then paste that code directly into an
•
•
existing HTML document.
Export an HTML file, open it in an HTML editor, manually copy sections of code from the
file, and paste that code into another HTML document.
Use the Update HTML command to make changes to an HTML file you’ve
previously created.
Note: Macromedia Dreamweaver shares a tight integration with Fireworks. Fireworks handles the
export of HTML to Dreamweaver differently than it handles export to other HTML editors. If you are
exporting Fireworks HTML to Dreamweaver, see “Working with Macromedia Dreamweaver MX
2004” in Working with Other Applications on the Fireworks Support Center at
www.macromedia.com/support/fireworks/.
You can also export HTML as Cascading Style Sheet (CSS) layers. Fireworks supports UTF-8
encoding and XHTML, so you can export documents using these standards as well.
To define how Fireworks exports HTML, you use the HTML Setup dialog box. These settings
can be document-specific or used as your default settings for all HTML that Fireworks exports.
About HTML
HTML code is automatically generated by Fireworks when you export, copy, or update HTML.
You do not need to understand it to use it. After it is generated there is no need to change it to
make it work, as long as you do not rename or move files.
HTML, or Hypertext Markup Language, is currently the standard for displaying web pages on
the Internet. An HTML file is a text file that contains these elements:
• Text that will appear on the web page
• HTML tags that define the formatting and structure of that text and of the entire document as
well as links to images and other HTML documents (web pages)
HTML tags are enclosed in brackets and look something like this:
<TAG> affected text </TAG>
The opening tag tells a browser to format the text following in a certain way or to include a
graphic. The closing tag (</TAG>), when there is one, indicates the end of that formatting.
252
Chapter 12: Optimizing and Exporting
Including comments in HTML
Fireworks HTML is well commented, telling you what the pieces of code relate to. Fireworks
HTML comments begin with <!-- and end with -->. Anything between these two markers is
not interpreted as HTML or JavaScript code. If you want comments included in your HTML,
you must tell Fireworks you want this option turned on.
To include comments in exported HTML:
• Before exporting, choose the Include HTML Comments option on the General tab of the
HTML Setup dialog box.
Results of exporting
When you export or copy HTML from Fireworks, the following is generated so that your
Fireworks image can be re-created on a web page:
• The HTML code necessary to reassemble sliced images and any JavaScript code if the
•
•
•
•
document contains interactive elements. Fireworks HTML contains links to the exported
images and sets the web page background color to the canvas color.
One or more image files, depending on how many slices are in your document and how many
states you include in buttons.
A file called spacer.gif, if necessary. Spacer.gif is a transparent, 1-pixel-by-1-pixel GIF that
Fireworks uses to fix spacing problems when sliced images are reassembled in an HTML table.
You can choose whether Fireworks exports a spacer. For more information, see “Setting HTML
export options” on page 259.
If your Fireworks document contains pop-up menus, a file called mm_menu.js.This file
contains the code necessary for displaying pop-up menus. If your pop-up menus contain
submenus, an arrows.gif file is also exported.
If you export or copy HTML to Macromedia Dreamweaver, notes files that facilitate the
integration between Fireworks and Dreamweaver. These files have an .mno extension.
Exporting Fireworks HTML
Fireworks lets you export HTML in Generic, Dreamweaver, FrontPage, and Adobe® GoLive®
formats. Generic HTML works in most HTML editors. Exporting Fireworks HTML generates
an HTML file and the associated image files in a location you specify.
Note: Fireworks also exports HTML when you export to CSS layers and to Macromedia Director. For
more information about CSS layers, see “Exporting CSS layers” on page 258. For more about
Director, see “Working with Macromedia Director MX” in Working with Other Applications on the
Fireworks Support Center at www.macromedia.com/support/fireworks/.
The export method of getting Fireworks HTML into other applications is ideal if you are
working in a team environment. Exporting an HTML file divides the workflow into segments so
that one person can perform a task in one application, and another can take over at a later time
using another application.
Exporting from Fireworks
253
You can set up global HTML export preferences using the HTML Setup dialog box. For more
information, see “Setting HTML export options” on page 259.
Note: Macromedia Dreamweaver shares a tight integration with Fireworks. Fireworks handles the
export of HTML Dreamweaver differently than that of other HTML editors. If you are exporting
Fireworks HTML to Dreamweaver, follow these instructions, but for additional application-specific
notes, also see “Working with Macromedia Dreamweaver MX 2004” in Working with Other
Applications on the Fireworks Support Center at www.macromedia.com/support/fireworks/.
To export Fireworks HTML:
1 Do one of the following to open the Export dialog box:
■
■
Choose File > Export.
Click the Quick Export button at the upper right corner of the Document window, then
choose an export option from the destination application’s pop-up menu. Fireworks
automatically fills in the text boxes of the Export dialog box with the appropriate settings for
the selected application.
Note: Non-Macromedia applications are found in the Quick Export > Other submenu.
2 Navigate to the desired site folder on your hard drive.
3 Choose HTML and Images from the Save as Type pop-up menu.
4 Click the Options button and choose your HTML editor from the HTML Style pop-up
menu on the General tab of the HTML Setup dialog box. If your HTML editor is not listed,
choose Generic.
Note: It’s important that you choose your HTML editor as the HTML style; if you do not,
interactive elements such as buttons and rollovers may not function correctly when imported into
your HTML editor.
5 Click OK to return to the Export dialog box.
6 Choose Export HTML file from the HTML pop-up menu.
Choosing Export HTML generates an HTML file and the associated image files in the
location you specify.
7 Choose Export Slices from the Slices pop-up menu if your document contains slices.
8 Choose Put Images in Subfolder if you want images stored in a separate folder. You can choose
a specific folder or use the Fireworks default, which is a folder named images.
9 Click Save.
After export, you’ll see the files Fireworks exported on your hard drive. Images and an HTML
file are generated in the location you specified in the Export dialog box.
254
Chapter 12: Optimizing and Exporting
Copying HTML‘ to the Clipboard
A fast way to export Fireworks-generated HTML is to copy it to the Clipboard.
You can copy HTML code in Fireworks in either of two ways. You can use the Copy HTML
Code command, or you can choose Copy to Clipboard as an option in the Export dialog box.
Doing so will copy the Fireworks HTML to the Clipboard and generate the associated image files
in the location you specify. You’ll later paste this HTML into a document in your preferred
HTML editor.
Although copying to the Clipboard is a fast way to get Fireworks HTML into other applications,
it is not ideal in every situation. Copying HTML to the Clipboard has the following
disadvantages:
• You don’t have the option to save images into a subfolder. They must reside in the same folder
•
•
as the HTML file where you paste the copied HTML. An exception is HTML copied to
Macromedia Dreamweaver.
Any links or paths used in Fireworks pop-up menus will map to your hard drive. HTML
copied to Dreamweaver is an exception.
If you use an HTML editor other than Dreamweaver or Microsoft FrontPage, JavaScript
code associated with buttons, behaviors, and rollover images is copied but may not
function correctly.
If these issues pose a problem for you, use the Export HTML option instead of copying HTML
to the Clipboard.
Note: Before you copy HTML code, be sure that you’ve selected the appropriate HTML style and
chosen Include HTML Comments from the General tab of the HTML Setup dialog box. For more
information, see “Setting HTML export options” on page 259.
To copy Fireworks HTML using the Copy HTML Code option:
1 Do one of the following:
Choose Edit > Copy HTML Code.
■ Click the Quick Export button and choose Copy HTML Code from the pop-up menu.
2 Follow the wizard as it guides you through the settings for exporting your HTML and images.
When prompted, specify a desired folder as the destination for the exported images. This must
be the location where your HTML file will reside.
■
Note: If you plan to paste the HTML code into Macromedia Dreamweaver, it does not matter
where you export the images, as long as they reside in the same Dreamweaver site as the HTML
file into which you will paste your code.
The wizard exports the images to the specified destination and copies the HTML code to
the Clipboard.
Exporting from Fireworks
255
To copy Fireworks HTML using the Export dialog box:
1 Choose File > Export.
Note: Optionally, if you are exporting to Dreamweaver, click the Quick Export button and choose
Copy HTML to Clipboard from the Dreamweaver submenu.
2 In the Export dialog box, specify a folder as the destination for the exported images. This must
be the same location where your HTML file will reside.
Note: If you plan to paste the HTML code into Macromedia Dreamweaver, it does not matter
where you export the images, as long as they reside in the same Dreamweaver site as the HTML
file into which you will paste your code.
3 Choose HTML and Images from the Save as Type pop-up menu.
4 Choose Copy to Clipboard from the HTML pop-up menu.
5 If your document contains slices, choose Export Slices from the Slices pop-up menu.
6 Click the Options button, choose your HTML editor from the HTML Setup dialog box,
and click OK.
7 Click Save in the Export dialog box.
To paste HTML copied from Fireworks into an HTML document:
1 In your HTML editor, open an existing HTML document or create a new one. Save the
document to the same location in which you exported your images.
Note: Saving the HTML file to the same location as the exported images is not necessary if you
use Macromedia Dreamweaver. As long as you export the images from Fireworks to a
Dreamweaver site, and save the HTML file to a location somewhere within that site, Dreamweaver
automatically resolves the paths to the associated images.
2 View the HTML code, and place the insertion point in the desired location between the
<BODY>
tags.
Note: HTML code copied from Fireworks does not include the opening or closing <HTML> and
<BODY> tags.
3 Paste the HTML code. Refer to the help system within your specific HTML editor for
instructions on pasting contents from the Clipboard.
When pasting code into HTML editors, it is important to keep images and HTML files in
the correct location, or links could be broken. If possible when you copy to the Clipboard,
make sure images are exported to the final location where they will reside on the website.
Fireworks uses document-relative URLs, so if the HTML or images are moved, the URL links
are broken.
256
Chapter 12: Optimizing and Exporting
Copying and pasting HTML from an exported Fireworks file
You can open exported Fireworks HTML in an HTML editor and copy and paste sections of
code into another HTML file.
To copy code from an exported Fireworks file and paste it into another HTML document:
1 Open the Fireworks HTML file you exported in an HTML editor.
2 Highlight the necessary code and copy it to the Clipboard.
3 Open an existing HTML document or create a new one.
4 Paste the code from the Clipboard at the desired location in the new HTML file. You do not
have to copy the <HTML> and <BODY> tags, because these should already be included in the
destination HTML document.
If you chose Include HTML Comments in the HTML Setup dialog box in Fireworks, follow
the instructions in the comments to copy and paste the code into the appropriate location.
5 If your Fireworks document contains interactive elements, you’ll need to copy the JavaScript
code as well.
JavaScript code is surrounded by <SCRIPT> tags and is located in the <HEAD> section of the
document. Copy and paste the entire <SCRIPT> section, unless your destination document
already has a <SCRIPT> section. In this case you should copy and paste only the contents of the
<SCRIPT> section into the existing <SCRIPT> section, being careful not to overwrite the
contents of the existing section. Also ensure there are no duplicate JavaScript functions in the
<SCRIPT> section after you paste the code.
Updating exported HTML
The Update HTML command allows you to make changes to a Fireworks HTML document
you’ve previously exported. This feature is useful if you want to update only a portion of
a document.
Note: Update HTML works differently with Macromedia Dreamweaver documents than it does with
other HTML documents. For more information, see “Working with Macromedia Dreamweaver MX
2004” in Working with Other Applications on the Fireworks Support Center at
www.macromedia.com/support/fireworks/.
When updating Fireworks HTML, you can choose to replace just the images that changed, or
overwrite all code and images. If you choose to replace only the images that changed, any changes
you made to the HTML file outside of Fireworks are preserved.
Note: For considerable changes to document layout, make your changes in Fireworks and re-export
the HTML file.
Exporting from Fireworks
257
To update HTML using the Update HTML command:
1 Do one of the following:
Choose File > Update HTML.
Click the Quick Export button and choose Update HTML from the pop-up menu.
Select the file to update in the Locate HTML File dialog box.
Click Open.
If no Fireworks-generated HTML is found, click OK to insert new HTML at the end of the
document.
If Fireworks-generated HTML is found, choose one of the following and click OK:
Replace Images and Their HTML replaces the previous Fireworks HTML.
Update Images Only overwrites only the images.
If the Select Images Folder dialog box appears, choose a folder and click Open.
■
■
2
3
4
5
6
Exporting CSS layers
Cascading Style Sheets (CSS) give you added control over how web pages are displayed. CSS
layers let you create style sheets or templates that define how different elements, such as headers
and links, should appear. With CSS, you can control the style and layout of multiple web pages at
once. CSS layers can overlap and be stacked on top of one another. In Fireworks, normal HTML
output does not overlap.
To export a graphic in CSS layers:
1 Choose File > Export.
2 In the Export dialog box, type a filename and choose a destination folder.
3 Choose CSS Layers from the Save As Type pop-up menu.
4 In the Source pop-up menu, choose one of the following:
exports all layers as CSS layers.
Fireworks Frames exports all frames as CSS layers.
Fireworks Slices exports the slices in the document as CSS layers.
5 Select Trim Images to automatically crop the exported images and layers to fit the objects.
6 Select Put Images in Subfolder to choose a folder for images.
7 Click Save.
Fireworks Layers
Exporting XHTML
In the not-too-distant future, XHTML is expected to replace HTML as the standard for
displaying web content. Not only is XHTML backward-compatible—meaning that most current
web browsers can view it—but it can also be read by any device that displays XML content, such
as PDAs, mobile phones, and other handheld devices.
XHTML is a combination of HTML, the current standard for formatting and displaying web
pages, and XML (Extensible Markup Language). XHTML contains the elements of HTML while
adhering to the more strict syntax rules of XML.
To support this standard, Fireworks allows you to export XHTML.
Note: Fireworks can also import XHTML. For more information, see Fireworks Help.
258
Chapter 12: Optimizing and Exporting
For more information on XHTML, visit the World Wide Web Consortium (W3C) XHTML
specification at www.w3.org.
To export XHTML from Fireworks:
1 Choose File > HTML Setup, choose an XHTML style from the HTML Style pop-up menu on
the General tab, and click OK.
2 Export your document using any of the methods available for exporting or copying HTML. For
more information about the various ways you can export and copy HTML from Fireworks, see
“Exporting HTML” on page 252.
Note: Fireworks uses UTF-8 encoding when exporting to XHTML. For more information about
UTF-8 encoding, see “Exporting files with UTF-8 encoding” on page 259.
Exporting files with UTF-8 encoding
Historically, web browsers were not able to display different character sets in a single HTML
document. For example, Chinese text and English text could not be displayed on the same page
because web browsers weren’t capable of displaying different character sets in a single document.
UTF-8, which stands for Universal Character Set Transformation Format-8, is a text-encoding
method that allows web browsers to display different character sets on the same HTML page.
Fireworks allows you to export HTML with UTF-8 encoding.
Note: Fireworks can also import documents that use UTF-8 encoding. For more information, see
Fireworks Help.
To export documents with UTF-8 encoding:
1 Choose File > HTML Setup, choose Use UTF-8 Encoding on the Document Specific tab,
and click OK.
Note: For more information on HTML setup options, see “Setting HTML export options”
on page 259.
2 Export your document using any of the methods available for exporting or copying HTML. For
information about the various ways you can export and copy HTML from Fireworks, see
“Exporting HTML” on page 252.
Setting HTML export options
The HTML Setup dialog box allows you to define how Fireworks exports HTML. These settings
can be document-specific or can be used as your default setting for all HTML exports. Changes
made in the Document Specific tab affect the current document only, but you can use these
settings as defaults for new documents if you click the Set Defaults button before closing the
HTML Setup dialog box. General and Table settings are global preferences and affect all
new documents.
To define how Fireworks exports HTML:
1 Choose File > HTML Setup or click the Options button in the Export dialog box.
2 In the General tab, choose from the following options:
■
Choose an HTML Style to set the style for exported HTML.
Generic HTML works in any HTML editor. However, if your document contains behaviors
or other interactive content, choose your specific editor if it appears in the list. Interactive
elements export differently from Fireworks depending on the selected HTML style.
Exporting from Fireworks
259
■
■
■
To export your document using the XHTML standard, choose the appropriate XHTML
style from the pop-up menu. For more information about XHTML, see “Exporting
XHTML” on page 258.
Choose a file extension from the Extension pop-up menu or enter a new one.
Choose Include HTML Comments to include comments regarding where to copy and paste
in the HTML. This option is recommended if your document contains interactive elements
such as buttons, behaviors, or rollover images. HTML comments help you determine which
parts of the code to copy and paste.
Choose Lowercase File Name to make the name of the HTML file and the associated image
files lowercase on export.
Note: This will not lowercase the HTML file’s extension if an uppercase extension was selected
in the Extension pop-up menu.
Choose an associated application from the File Creator pop-up menu (Macintosh). When
you double-click the exported HTML file on your hard disk, it automatically opens in the
application you specified.
3 In the Table tab, choose settings for your HTML tables. For information on defining properties
for exported Fireworks HTML tables, see “Defining how HTML tables are exported”
on page 183.
4 In the Document Specific tab, choose from the following options:
■ Choose a formula for auto-naming slices in the Slice Auto-Naming pop-up menus. You can
use the default settings, or choose your own options.
■
Note: Use caution when choosing None as a menu option for slice auto-naming. If you choose
None as the option for any of the first three menus, Fireworks exports slice files that overwrite
one another, resulting in a single exported graphic and a table that displays this graphic in
every cell.
Enter text in the Alternate Image Description text box. This alt text appears in place of all
images while they are downloading from the web and in place of any images that fail to
download. In some browsers it may also appear as a tooltip when the pointer passes over the
image. This is also an aid for vision-impaired web users.
■ Choose Multiple Nav Bar HTML Pages when exporting a navigation bar that links several
pages together. When this option is chosen, Fireworks exports additional pages for each
button in the navigation bar.
■ Choose UTF-8 Encoding if your document displays characters from multiple character sets.
For more information about UTF-8 encoding, see “Exporting files with UTF-8 encoding”
on page 259.
5 Click Set Defaults to save these settings as your global default settings.
6 Click OK.
■
260
Chapter 12: Optimizing and Exporting
Using the Quick Export button
The Quick Export button, located in the upper right corner of the Document window, offers easy
access to common options for exporting Fireworks files to other applications. Using the Quick
Export button, you can export to a variety of formats, including Macromedia applications and
other applications, such as Microsoft FrontPage and Adobe GoLive®.
All the export options available through the Quick Export button are also available elsewhere in
Fireworks, such as the Export dialog box and the Edit menu. The Quick Export button provides
a shortcut to the most common export options. For more information on exporting to each
format, see Working with Other Applications on the Fireworks Support Center at
www.macromedia.com/support/fireworks/.
For most formats, several export methods are available. You can export Dreamweaver HTML, for
example, or update existing Dreamweaver HTML. Or you can copy Dreamweaver HTML to the
Clipboard. You can export a Flash SWF file or copy selected objects as vectors.
You can even use the Quick Export button to start other applications, as well as preview Fireworks
documents in a preferred browser. By streamlining the export process, the Quick Export button
saves time and improves the design workflow.
Note: The Quick Export button exports graphics and slices using the settings you specify in the
Optimize panel. Be sure to optimize your graphic before exporting with the Quick Export button. For
more information on optimization, see “About optimizing” on page 226.
To export a Fireworks document or selected graphics using the Quick Export button:
1 Click the Quick Export button and choose an export option from the pop-up menu displayed.
The appropriate options are automatically set for you in the Export dialog box. Make changes
to the options if desired.
2 Choose a location to store the exported files, type a filename, and click Save.
To start another Macromedia application using the Quick Export button:
• Click the Quick Export button and choose the Launch option from the application submenu.
Customizing the Quick Export pop-up menu
You can add additional options to the Quick Export pop-up menu if you know JavaScript
and XML.
To add options to the Quick Export pop-up menu:
1 Create your own JSF files and drop them into the Quick Export Menu folder on your hard disk.
Note: The exact location of this folder varies depending on your operating system. The Quick
Export Menu folder is located in the English subfolder of the Fireworks application folder on
Windows systems. On Macintosh systems, this folder is located in the Contents/Resources/
English.lproj folder in the Fireworks application package. For more information about application
packages, see “Viewing package contents (Macintosh only)” on page 287.
2 Edit the Quick Export Menu.xml file by including references to the new JSF files.
The next time you start Fireworks, the new options you created are added to the Quick Export
pop-up menu. For more information, see Extending Fireworks.
Exporting from Fireworks
261
Sending a Fireworks document as an e-mail attachment
You can easily send documents as e-mail attachments from within Fireworks. You can send a
Fireworks PNG, a compressed JPEG, or a document using other file formats and optimization
settings available in the Optimize panel.
To send a document as an e-mail attachment using your default e-mail client:
1 Choose File > Send to E-mail.
2 Select one of the following options:
attaches the current PNG document to a new e-mail message.
attaches the current document to a new e-mail message using the
JPEG - Better Quality optimization setting.
Use Export Settings attaches the current document to an e-mail message using the settings
defined in the Optimize panel.
Fireworks PNG
JPG Compressed
Note: Mozilla, Netscape 6, and Nisus Emailer are not supported on the Macintosh.
Using the File Management button
The File Management button, located at the top of the Document window next to the Quick
Export button, offers easy access to file-transport commands. You can use the File Management
button if your document lives in a Studio MX 2004 site folder and if the site has access to a
remote server. Fireworks recognizes your folder as a site if you have used the Manage Site dialog
box in Dreamweaver MX 2004 to define the target folder, or a folder that contains the target
folder, as the local root folder for a site.
The File Management button displays the following menu commands:
Get copies the remote version of the file to the local site, overwriting the local file with the
remote copy.
checks the file out, overwriting the local file with the remote copy. Check Out is
enabled in Fireworks only if the Enable File Check In and Check Out option is enabled in
Dreamweaver for the site in which the document lives.
Check Out
copies the local version of the file to the remote site, overwriting the remote file with the
local copy.
Put
checks the local file in, overwriting the remote file with the local copy. Check In is
enabled in Fireworks only if the Enable File Check In and Check Out option is enabled in
Dreamweaver for the site in which the document lives.
Check In
Undo Check Out undoes Check Out of the local file and checks it in, overwriting the local file
with the remote copy. Undo Check Out is enabled in Fireworks only if the Enable File Check In
and Check Out option is enabled in Dreamweaver for the site in which the document lives.
Note: File Management commands are enabled in Fireworks only if your document lives in a Studio
MX 2004 site folder with a remote server defined. Fireworks File Management commands can be
used only for files that live in sites that use the Local/Network and FTP transport methods. Files in
sites that uses FTP or third-party transport methods such as SourceSafe, WebDAV, and RDS
cannot be transported to and from the remote server from within Fireworks.
For more information about the File Management menu, see “Working with Macromedia
Dreamweaver MX 2004” in Working with Other Applications on the Fireworks Support Center
at www.macromedia.com/support/fireworks/.
262
Chapter 12: Optimizing and Exporting
CHAPTER 13
Automating Repetitive Tasks
Web designers often spend lots of time doing repetitive tasks, such as optimizing images or
converting images to fit within certain constraints. Part of the power of Macromedia Fireworks
MX 2004 is its capability to automate and simplify many tedious drawing, editing, and fileconversion tasks.
To speed up your editing process, you can use Find and Replace to search for and replace elements
within a file or elements from multiple files. You can find and replace elements such as URLs,
fonts, color, text, and commands created in the History panel.
You can use the Batch Process feature to convert entire groups of image files into other formats
or to change their color palettes. Batch Process can apply custom optimization settings to
groups of files. You can also resize a group of files, making Batch Process an ideal tool for
creating thumbnails.
Using the History panel, you can create commands that are shortcuts for commonly used features
or create a script that can perform a complex series of steps. Fireworks can understand and execute
JavaScript, so advanced users can automate very complex tasks by writing JavaScript commands
and then executing them in Fireworks. You can control nearly every Fireworks command or
setting through JavaScript using special JavaScript commands that Fireworks can interpret.
The Extension Manager lets you import, install, and delete extensions in Macromedia
applications to extend the capabilities of Fireworks.
263
Finding and replacing
The Find and Replace feature helps you search for and replace elements, such as text, URLs,
fonts, and colors. Find and Replace can search the current document or multiple files.
Find and Replace works only in Fireworks PNG files or in files containing vector objects, such as
FreeHand, uncompressed CorelDraw, and Illustrator files.
Search option
Find option
Find panel
To select the source for the search:
1 Open the document.
2 Do one of the following to open the Find panel:
■
■
■
Choose Window > Find.
Choose Edit > Find.
Press Control+F (Windows) or Command+F (Macintosh).
Note: If the files you select are locked or checked in from a Macromedia Dreamweaver site, you
are prompted to unlock them or check them out before proceeding.
3 From the Search pop-up menu, choose a source for the search:
Search Selection
finds and replaces elements only among the currently selected objects
and text.
finds and replaces elements only in the current frame.
Search Document finds and replaces elements in the active document.
Search Files finds and replaces elements across multiple files. If this option is not already
chosen in the Search pop-up menu, choosing it opens a dialog box in which you can choose
which files to search. If Search Files is already selected in the Search pop-up menu, you have
the option to choose which files to search after you begin the search operation by clicking Find,
Replace, or Replace All.
4 From the Find pop-up menu, choose an attribute to search for. The options in the panel change
according to your selection.
Search Frame
264
Chapter 13: Automating Repetitive Tasks
5 Set the options for the selected Find attribute.
6 Choose a find-and-replace operation:
locates the next instance of the element. Found elements appear selected in
the document.
Replace changes a found element with the contents of the Change To option.
Replace All finds and replaces every occurrence of a found element throughout the
search range.
Find
Note: Replacing objects in multiple files automatically saves those files; you cannot reverse the
change using Edit > Undo. For more information, see “Finding and replacing during a batch
process” on page 271.
Setting options for finding and replacing in multiple files
When finding and replacing among multiple files, you can determine how Fireworks handles
multiple open files after the search.
To save, close, and back up each file after it is searched:
1 Choose Replace Options from the Find panel Options menu.
2 Choose Save and Close Files to save and close each file after the find and replace.
Only the originally active documents remain open.
Note: If Save and Close is disabled and you are batch-processing a large number of files,
Fireworks may run out of memory and cancel the batch process.
3 Choose one of the following from the Backups pop-up menu:
No Backups finds and replaces without backing up original files. The changed files replace the
original files.
creates and stores only one backup copy of each file changed
during a find and replace. If you perform additional find-and-replace operations, the previous
original file always replaces the backup copy. The backup copies are stored in a subfolder called
Original Files.
Incremental Backups saves all backup copies of files changed during a find and replace. The
original files are moved to an Original Files subfolder within their current folder, and an
incremental number is appended to each filename. If you perform additional find-and-replace
operations, the original file is copied to the Original Files folder, and the next higher number is
added to its filename. For example, for a file named Drawing.png, the first time you find and
replace, the backup file is named Drawing-1.png. The second time you find and replace, the
backup file is named Drawing-2.png, and so on.
4 Click OK.
Overwrite Existing Backups
Finding and replacing
265
Finding and replacing text
Fireworks makes it easy to search for and replace text. You have a variety of options to refine your
search to consider case or to find entire words or parts of words.
To search for and replace words, phrases, or text strings:
1 Choose Find Text from the Find pop-up menu of the Find panel.
2 Enter the text to search for in the Find text box.
3 Enter the replacement text in the Change To text box.
4 If you want, choose options to further define the search:
finds the text only in the same form in which it appears in the Find option, not
as part of any other word.
Match Case distinguishes between uppercase and lowercase letters during the search.
Regular Expressions matches parts of words or numbers conditionally during a search.
Whole Word
Finding and replacing fonts
You can also quickly find and replace fonts in your Fireworks documents.
To search for and replace fonts in one or more Fireworks documents:
1 Choose Find Font from the Find pop-up menu of the Find panel.
2 Choose the font and font style to find.
Tip: You can restrict your search by minimum and maximum point sizes.
3 Specify the font, font style, and point size to use as a replacement in the Change To area.
Finding and replacing colors
You can find all instances of a certain color in your Fireworks documents and then change it to
something else.
To search for and replace colors in Fireworks documents:
1 Choose Find Color from the Find pop-up menu.
2 Choose an item from the Apply To pop-up menu to determine how the colors found
are applied:
finds and replaces both fill and stroke colors.
All Properties finds and replaces fill, stroke, and effect colors.
Fills finds and replaces a fill color, except within pattern fills.
Strokes finds and replaces stroke colors only.
Effects finds and replaces effect colors only.
Fills & Strokes
266
Chapter 13: Automating Repetitive Tasks
Finding and replacing URLs
In addition to words, typefaces, and colors, Fireworks allows you to find and replace URLs
assigned to interactive elements in your documents.
To search for and replace URLs assigned to web objects:
1 Choose Find URL from the Find pop-up menu of the Find panel.
2 Enter the URL to search for in the Find text box.
3 Enter the replacement URL in the Change To text box.
4 If you want, choose options to further define the search:
finds the text only in the same form in which it appears in the Find option, not
as part of any other word.
Match Case distinguishes between uppercase and lowercase letters during the search.
Regular Expressions matches parts of words or numbers conditionally during a search.
Whole Word
Finding and replacing non-websafe colors
A non-websafe color is a color not included in the Web216 color palette. A color is websafe if it
dependably appears to be the same color on both Macintosh and Windows platforms. For more
information about websafe colors, see “Optimizing GIF, PNG, TIFF, BMP, and PICT files”
on page 235.
To search for all non-websafe colors and replace them with websafe colors:
• Choose Find Non-Web216 from the Find pop-up menu of the Find panel.
Note: Find Non-Web216 does not find or replace pixels within image objects.
Batch processing
Batch processing is a convenient way to automatically convert a group of graphic files. These are
the batch-processing options:
•
•
•
•
•
•
Convert a selection of files to another format.
Convert a selection of files to the same format with different optimization settings.
Scale exported files.
Find and replace text, colors, URLs, fonts, and non-Web216 colors.
Rename groups of files by adding a prefix or suffix.
Perform commands on a selection of files.
Batch processing
267
To batch-process files:
1 Choose File > Batch Process, and select the files to process. You can select files from different
folders or group them by file type.
Note: If the files you select are locked or checked in from a Dreamweaver site, you are prompted
to unlock them or check them out before proceeding.
2 Click one of the following in the Batch (Windows) or Batch Process (Macintosh) dialog box:
Add adds selected files and folders to the list of files to batch-process. If a folder is selected, all
valid, readable files in the folder are added to the batch process.
Note: Valid files are files that have been created, named, and saved. If the latest file version is not
saved, you are asked to save it, and you can then continue the batch process. If you don’t save the
file, the entire batch process ends.
adds all valid files in the currently selected folder to the list of files to batch-process.
Remove removes selected files from the list of files to batch-process.
3 Choose Include Current Open Files to add all currently open files.
These files do not appear in the list of files to batch-process, but they are included in
the process.
Add All
268
Chapter 13: Automating Repetitive Tasks
4 Click Next, then do one or both of the following:
■
■
To add a task to the batch, select it in the Batch Options list and click Add. Each task can be
added only once. For more information on adding commands, see “Performing commands
with a batch process” on page 272.
To reorder the list, select the task in the Include in Batch list and click the up and down
arrow buttons.
Note: The order in which tasks appear in the Include in Batch list is the order in which the tasks
are performed during the batch process, with the exception of Export, which is always
performed last.
5 To view extra options for a task, select the task in the Include in Batch list.
6 Choose settings for each option as required.
To remove a task from the batch, select the task in the Include in Batch list and click Remove.
7 Click Next.
8 Choose options for saving processed files:
saves the file in the same location as its source file and
overwrites the source file if the filenames are the same and in the same format.
Custom Location lets you choose a location in which to save the processed files.
9 Select Backups to choose backup options for the original files.
It is always safer to back up files. For more information, see “Specifying the batch process
output location” on page 273.
10 Click Save Script if you want to save the batch process settings for future use.
For more information, see “Saving batch processes as scripts” on page 274.
11 Click Batch to perform your batch process.
Same Location as Original File
Batch processing
269
Changing optimization settings with a batch process
You can change file optimization settings using the Export option in the Batch Process dialog box.
To set export settings for a batch process:
1 Choose Export from the Batch Options list and click Add.
2 From the Settings pop-up menu, choose from the following options and click OK:
Choose Use Settings from Each File to keep each file’s previous export settings during the
batch process. For example, when you batch-process a folder of GIFs and JPEGs, the
resulting files remain GIFs and JPEGs, and Fireworks uses the original palette and
compression settings when exporting each file.
■ Choose Custom or click Edit to change settings in the Export Preview dialog box.
■ Choose a preset export setting such as GIF Web216 or JPEG – Better Quality. All files are
converted to this setting.
3 Click Next to continue the batch process.
For information on completing the batch process, see “Batch processing” on page 267.
■
270
Chapter 13: Automating Repetitive Tasks
Scaling graphics with a batch process
You can alter the height and width of images being exported using the Scale option in the Batch
Process dialog box.
To set scaling options for batch-processed files:
1 Choose Scale from the Batch Options list and click Add.
2 In the Scale pop-up menu, choose an option:
exports files unaltered.
Scale to Size scales images to the exact width and height you specify.
Scale to Fit Area makes images fit proportionally with the maximum width and height
range you specify.
No Scaling
Tip: Use Scale to Fit Area to convert a group of images to uniformly sized thumbnail images.
scales images by a percentage.
3 Click Next to continue the batch process.
For information on completing the batch process, see “Batch processing” on page 267.
Scale to Percentage
Finding and replacing during a batch process
You can find and replace text, fonts, colors, or URLs in buttons, hotspots, or slices using the Find
and Replace option in the Batch Process dialog box.
Batch Replace affects only the following file formats: Fireworks PNG, Illustrator, FreeHand, and
CorelDraw. Batch Replace does not affect GIFs and JPEGs.
Batch processing
271
To select attributes to find and replace during a batch process:
1 Choose Find and Replace from the Batch Options list and click Add.
2 Click Edit.
3 Select the type of attribute to find and replace from the Find pop-up menu: text, font, color,
URL, or Non-Web216.
4 Enter or select the specific element to find in the Find box.
5 Enter or select the specific element to replace in the Change To box.
6 Click OK to store Find and Replace settings.
7 Click Next to continue the batch process.
For information on completing the batch process, see “Batch processing” on page 267. For
more information about Find and Replace options, see “Finding and replacing” on page 264.
Changing filenames with a batch process
You can change the names of files being processed using the Rename option in the Batch Process
dialog box.
To set naming options for batch-processed files:
1 Choose Rename from the Batch Options list and click Add.
2 Choose an option from the Rename pop-up menu:
leaves filenames unchanged.
Add Prefix lets you enter text to add to the beginning of the filename. For example, if
you enter “night_”, then the file Sunrise.gif is renamed night_Sunrise.gif when it is
batch processed.
Add Suffix lets you enter text to add to the end of the filename before the file extension. For
example, if you enter “_day”, then the file Sunset.gif is renamed Sunset_day.gif when it is
batch-processed.
3 Click Next to continue the batch process.
For information on completing the batch process, see “Batch processing” on page 267.
Original Name
Performing commands with a batch process
You can perform JavaScript commands on files using the Commands option in the Batch Process
dialog box.
To set command options for batch-processed files:
1 Click the Plus (+) button (Windows) or the triangle (Macintosh) beside the Commands option
in the Batch Options list to view the available commands.
2 Select a command and click Add to add it to the Include in Batch list.
Note: These commands cannot be edited.
3 Click Next to continue the batch process.
For information on completing the batch process, see “Batch processing” on page 267. For
more information on creating commands, see “Scripting with the History panel” on page 276.
Note: Some commands do not work during a batch process. Choose commands that work within
the document without requiring any object to be selected.
272
Chapter 13: Automating Repetitive Tasks
Specifying the batch process output location
After you choose all batch options in the Batch Process dialog box, you must choose options for
saving your files. You can save backup copies of the original files from a batch process. Backup
copies of files are placed in an Original Files subfolder in the same folder as each original file.
To back up batch-processed files:
1 Choose a location for the batch output.
2 Choose Backups to set your backup options.
3 Choose how you want to back up the files:
overwrites the previous backup file.
Incremental Backups keeps copies of all the backup files. When you run a new batch process,
a number is appended to the end of the filename of the new backup copy.
Overwrite Existing Backups
Note: If Backup is deselected, batch processing in the same file format overwrites the original file
if the name is the same. However, batch processing in a different file format creates a new file and
does not move or delete the original file.
4 Click Batch to finish the batch process, or click Back to return to the Batch Process dialog box.
Batch processing
273
Saving batch processes as scripts
You can save batch process settings as a script or command to re-create the batch process easily in
the future. After you choose all batch options in the Batch dialog box, you are given options for
saving your files.
To create a batch script:
1 Click Save Script to create a batch script.
2 Enter a name and destination for the script.
3 Click Save.
Saving your script into the Commands folder on your hard disk adds it to the Commands
menu in Fireworks.
Note: The exact location of this folder varies from system to system and depends on whether you
want the command to be available just to your user profile or to all users. Commands folders are
located in the Configuration folder in the Fireworks application folder and also in your user-specific
Fireworks configuration folder. For more information, see “Working with configuration files”
on page 286.
To run a batch script:
1 Do one of the following:
In Fireworks, choose Commands > Run Script.
Outside Fireworks, double-click the script filename on your hard disk.
2 Select a script and click Open.
3 Choose the files to process with the script:
Current Open Files processes all open documents.
Custom lets you select files to process.
■
■
Note: Click the Ellipsis (...) button beside the Files to Process pop-up menu to select files
to process.
4 Click OK.
For more information on choosing files, see “Batch processing” on page 267.
Running scripts by dragging and dropping
If you have a batch process that you repeat frequently, save it as a script, then drag that script from
your hard drive to the Fireworks icon on your desktop to run the batch process. The Fireworks
application launches and runs that script.
To run a script by dragging and dropping:
1 Save a script.
2 Do one of the following:
■
■
Drag the script file icon onto the Fireworks desktop icon.
Drag the script file icon into an open Fireworks document.
Note: Dragging multiple script files and multiple graphic files into Fireworks processes the graphic
files multiple times, once for each script.
274
Chapter 13: Automating Repetitive Tasks
Extending Fireworks
Extending Fireworks has never been easier. Fireworks offers a variety of different ways you can
create custom commands that enhance its capabilities.
With the Extension Manager, you can install and manage extensions that augment the
functionality of Fireworks. Or you can write custom JavaScript code and use it as a custom
command in Fireworks. You can also use Flash SWF movies as custom commands in Fireworks.
In addition, the Fireworks History panel provides an easy-to-use interface that allows you to
create custom commands from a series of recorded tasks.
After you install an extension or create a custom command, Fireworks places it in the
Commands menu.
Note: If stored as a SWF file in the Command Panels folder on your hard disk, commands are
available as panels in the Window menu. For more information, see “About scripting with Flash SWF
files” on page 278.
Using the Macromedia Extension Manager
An extension is a command script, command panel, library, filter, pattern, texture, or Auto Shape
that can be added to Fireworks to enhance its capabilities. Fireworks ships with the Macromedia
Extension Manager, which allows you to easily install, manage, and delete extensions. Upon
installation, Fireworks includes a collection of default extensions in the Commands menu.
You can also use the Extension Manager to bundle your own extensions and send them to the
Macromedia Exchange for Fireworks. Through the Exchange, you can share your extensions with
other Fireworks users.
Third-party extensions are stored in subfolders (depending upon the type of extension) in the
Configuration folder in the Fireworks application folder on your hard disk.
Commands that you create and save using the History panel are stored in your user’s Commands
folder. For information on the location of this folder, see “About user configuration files”
on page 286.
To open the Extension Manager from within Fireworks, do one of the following:
• Choose Commands > Manage Extensions.
• Choose Help > Manage Extensions.
For more information about using the Extension Manager, see Extension Manager Help.
To visit the Macromedia Fireworks Exchange:
• From within Fireworks, choose Help > Fireworks Exchange.
• Browse to www.macromedia.com/go/fireworks_exchange in your web browser.
Extending Fireworks
275
Scripting with the History panel
The History panel records a list of the steps you have performed while working in Fireworks.
Each step is stored on a separate line of the History panel, starting with the most recent. By
default, the panel remembers 20 steps. However, you can change this value at any time.
Creating commands
You can save groups of steps in the History panel as a command that you can reuse. You can
execute saved commands in any Fireworks document. They are not document-specific.
Saved commands are stored as JSF files in the Commands folder in your user-specific Fireworks
configuration folder. For information on the location of this folder, see “About user configuration
files” on page 286.
To save steps as a command:
1 Choose the steps to save as a command:
Click a step, then Shift-click another to select a range of steps to save as a command.
Control-click (Windows) or Command-click (Macintosh) to select noncontiguous steps.
2 Click the Save Steps as Command button at the bottom of the History panel.
3 Enter a name for the command and click OK.
The command appears on the Commands menu.
■
■
To undo or redo steps using the History panel:
• Drag the Undo Marker up the panel until you reach the last step you want to undo or redo.
• Click along the Undo Marker track on the left of the History panel.
Note: Undone steps remain in the History panel highlighted in gray.
To change the number of steps the History panel remembers:
1 Choose Edit > Preferences (Windows) or Fireworks > Preferences (Macintosh).
2 Change Undo Steps to the number of steps you want the History panel to record.
Note: Additional steps require more computer memory.
To clear all steps from the History panel:
• Choose Clear History from the History panel Options menu.
This frees memory and disk space.
Note: Clearing actions from the History panel removes your ability to undo edits.
276
Chapter 13: Automating Repetitive Tasks
Playing commands
You can execute recorded commands or a selection of actions in the History panel at any time.
To play back a saved command:
1 If necessary, select one or more objects.
2 Choose the command from the Commands menu.
To replay a selection of steps:
1 Select one or more objects.
2 Choose the steps in the History panel.
3 Click the Replay button at the bottom of the History panel.
Steps marked with an X are nonrepeatable and cannot be played back. Separator lines indicate
that a different object has become selected. Commands created from steps that cross a
separator line can produce unpredictable results.
To apply selected steps to objects in many documents:
1 Select a range of steps.
2 Click the Copy Steps to Clipboard button at the bottom of the History panel.
3 Select one or more objects in any Fireworks document.
4 Choose Edit > Paste.
To repeat the last step:
• Choose Edit > Repeat Command Script.
About scripting with JavaScript
You can reduce the tedium of some repetitive tasks by writing your own JavaScript in a text
editor to run within Fireworks. You can control nearly every command or setting in Fireworks
through JavaScript.
Macromedia Dreamweaver also uses JavaScript. You can write scripts that control Fireworks from
within Dreamweaver.
For documentation on the JavaScript API, see Extending Fireworks.
Extending Fireworks
277
About scripting with Flash SWF files
With Flash, you can create SWF movies that contain JavaScript code. These movies can be used
as Fireworks commands, accessible from the Commands menu in Fireworks.
You can even create a SWF movie and use it as a Fireworks panel, accessible from the Window
menu. The Align panel in Fireworks is an example of a Flash movie imported as a panel.
SWF movies that are used as commands are stored in the Commands folder on your hard disk,
and SWF movies that are used as panels are stored in the Command Panels folder.
Note: The exact location of these folders varies from system to system and depends on whether you
want the command or panel to be available just to your user profile or to all users. Commands and
Command Panels folders are located in the Configuration folder in the Fireworks application folder
and also in your user-specific Fireworks configuration folder. For more information, see “Working
with configuration files” on page 286.
For more detailed instructions about creating commands or panels from Flash SWF movies, see
Extending Fireworks.
Managing commands
You can rename or delete any commands that appear in the Commands menu.
You can rename or delete any commands that you create using the Manage Saved Commands
option in Fireworks. You must use the Extension Manager for other commands and extensions
that were installed with Fireworks or that you downloaded and installed from the Macromedia
Exchange website.
To rename a custom command that you created:
1 Choose Commands > Manage Saved Commands.
2 Select the command.
3 Click Rename, enter a new name, and click OK.
To delete a custom command that you created, do one of the following:
• In Fireworks, choose Commands > Manage Saved Commands. Then select the command and
click Delete.
• On your hard disk, delete the JSF file for the command from the Commands folder in your
user-specific Fireworks configuration folder. For information on locating this folder, see
“About user configuration files” on page 286.
To rename or delete a command that shipped with Fireworks or that you downloaded from
the Macromedia Exchange:
• Choose Command > Manage Extensions.
• Choose Help > Manage Extensions.
The Extension Manager opens. For information about how to manage extensions, see
Extension Manager Help.
278
Chapter 13: Automating Repetitive Tasks
Editing or customizing a command script
Command scripts are saved as JavaScript. If you know JavaScript, you can open and edit
commands in any text editor, such as Notepad (Windows) or TextEdit (Macintosh).
To edit a command using JavaScript:
1 From your desktop, navigate to the appropriate Commands or Command Panels folder on your
hard disk.
Note: The exact location of these folders varies from system to system and depends on whether
you want the command or panel to be available just to your user profile or to all users. Commands
and Command Panels folders are located in the Configuration folder in the Fireworks application
folder and also in your user-specific Fireworks configuration folder. For more information, see
“Working with configuration files” on page 286.
2 Open the desired script file in a text editor and modify the JavaScript code.
3 Save and close the script.
To edit selected actions from the History panel using JavaScript:
1 In Fireworks, select a range of steps in the History panel.
2 Click the Copy Steps to Clipboard button at the bottom of the History panel.
3 Create a new document in a text-editing application.
4 Paste the steps into the new text document.
5 Modify the steps as desired.
6 Save and close the script.
7 Copy the script to the Commands folder on your hard disk.
Note: The exact location of this folder varies from system to system and depends on whether you
want the command to be available just to your user profile or to all users. Commands folders are
located in the Configuration folder in the Fireworks application folder and also in your user-specific
Fireworks configuration folder. For more information, see “Working with configuration files”
on page 286.
Commands saved directly into the Commands folder, as well as those saved in the History
panel, appear in the Commands menu as soon as you save them, so restarting Fireworks is not
necessary. However, commands saved in the Command Panels folder will be available in the
Window menu only after you restart Fireworks.
Extending Fireworks
279
280
Chapter 13: Automating Repetitive Tasks
CHAPTER 14
Preferences and Keyboard Shortcuts
Macromedia Fireworks MX 2004 preference settings let you control the general appearance of the
user interface, as well as editing and folder aspects. In addition, Fireworks allows you to customize
your keyboard shortcuts. This means that you can customize your shortcuts and standardize them
among your favorite software programs.
Setting preferences
Fireworks has preference settings that control the general appearance of the user interface as well
as options related to specific features such as default colors, tool options, folder locations, and
file conversions.
To set preferences:
1 Choose Edit > Preferences (Windows) or Fireworks > Preferences (Macintosh).
2 Select the preferences group you wish to modify: General, Editing, Launch and Edit, Folders,
or Import.
3 Make your changes and click OK.
General preferences
The following options are on the General preferences tab:
Undo Steps sets undo/redo steps to a number between 0 and 1009. This setting applies to both
the Edit > Undo command and the History panel. A large number of undos can increase the
amount of memory Fireworks requires. You must restart Fireworks for the change in this setting
to take effect.
Color Defaults sets the default colors for brush strokes, fills, and highlight paths. The Stroke and
Fill options do not automatically change the colors displayed in the color boxes of the Tools
panel; they allow you to change the default colors that are specified by the Set Default Stroke/Fill
Colors button in the Tools panel.
Interpolation sets one of four different scaling methods that Fireworks uses to interpolate pixels
when images are scaled:
• Bicubic interpolation gives the sharpest and highest quality most of the time and is the default
scaling method.
• Bilinear interpolation gives sharper results than Soft interpolation but not as sharp as Bicubic.
281
• Soft interpolation, which was used in Fireworks 1, gives a soft blur and eliminates sharp details.
This method is useful when others produce unwanted artifacts.
• Nearest Neighbor interpolation results in jagged edges and sharp contrasts with no blurring.
The effect is similar to zooming in or out on an image with the Zoom tool.
is deselected by default. It allows you to display or hide the
graphical icons on panel tabs that were visible in previous versions of Fireworks. This option also
affects the display of the Mini-Launcher at the bottom of the Document window.
Workspace: Show Tab Icons
Saving files: Add Preview Icons (Macintosh only) allows
you to display or hide thumbnails of
Fireworks PNG files on your hard disk. Deselecting this option displays the traditional Fireworks
icon used for Fireworks PNG files. This option takes effect after you save the file.
Editing preferences
The editing preferences control pointer appearance and visual cues for working with
bitmap objects.
Precise Cursors
replaces tool icon pointers with the cross-hair pointer.
Delete Objects While Cropping permanently deletes pixels or objects that are outside the
bounding box of a selection when you choose Edit > Crop Document or Modify > Canvas >
Canvas Size.
Brush Size Painting Cursors sets the size and shape of the Brush, Eraser, Blur, Sharpen, Dodge,
Burn, and Smudge tool pointers to accurately reflect what you are about to draw or erase. For
certain large multi-tipped brushes, the cross-hair pointer is used by default. When this option and
Precise Cursors are turned off, tool icon pointers are displayed.
Display Striped Border places the familiar striped border around the entire canvas when you are
working with bitmap objects (bitmap mode).
provides a preview of the next path segment that will be created if you click
at that moment with the Pen tool.
Show Pen Preview
Show Solid Points
shows selected points as hollow and deselected points as solid.
Turn off “Hide Edges” automatically
disables Hide Edges when the selection changes.
Pick Distance lets you specify how close to an object the pointer must be before you can select it.
Pick Distance can be between 1 and 10 pixels.
Snap Distance lets
you specify how close the object you are moving must be before it snaps to a
grid or guide line. Snap Distance works when Snap to Grid or Snap to Guides is turned on. Snap
Distance can be between 1 and 10 pixels.
Launch and Edit preferences
By setting launch-and-edit preferences, you can control how external applications, such as
Macromedia Flash, Macromedia Director, and Microsoft FrontPage, launch and edit graphics
in Fireworks.
In most cases, Fireworks attempts to locate the source PNG for a graphic on its own. When it
can’t locate the source PNG, Fireworks uses the launch-and-edit preferences that you set to
determine how it will handle locating the source PNG file.
282
Chapter 14: Preferences and Keyboard Shortcuts
Note: Macromedia Flash is an exception. When launching and editing graphics in Flash, Fireworks
always uses the preferences you set in the Launch and Edit section of the Preferences dialog box.
determines whether the original Fireworks PNG file
opens when you use Fireworks to edit images from within other applications.
When Editing from External Application
When Optimizing from External Application
determines whether the original Fireworks PNG
file opens when you optimize a graphic.
Note: This setting does not apply to Director, which always automatically opens and optimizes a
graphic without asking for a source PNG, even if you set this preference differently in Fireworks.
For more information on working with Fireworks graphics within Flash, see “Working with
Macromedia Flash MX 2004” in Working with Other Applications on the Fireworks Support
Center at www.macromedia.com/support/fireworks/.
For more information on working with Fireworks graphics in Director, see “Working with
Macromedia Director MX” in Working with Other Applications on the Fireworks Support
Center at www.macromedia.com/support/fireworks/.
For more information on working with Fireworks graphics within FrontPage, see “Working with
Microsoft FrontPage” in Working with Other Applications on the Fireworks Support Center at
www.macromedia.com/support/fireworks/.
Note: Macromedia Dreamweaver handles launch-and-edit settings differently. Dreamweaver always
opens the source PNG, even if you set launch-and-edit preferences differently in Fireworks. If no
Design Note exists or if the path to the source PNG is broken, Dreamweaver always prompts you to
locate the source PNG file. For more information on working with Fireworks graphics and interactive
elements within Dreamweaver, see “Working with Macromedia Dreamweaver MX 2004” in
Working with Other Applications on the Fireworks Support Center at www.macromedia.com/
support/fireworks/.
Folders preferences
The folders preferences give you access to additional Photoshop plug-ins, texture files, and pattern
files from external sources.
targets folders containing
plug-ins, textures, and patterns. The folders can be in another folder on your hard disk, on a CDROM or other external drive, or on a network volume.
Additional Materials (Photoshop Plug-Ins, Textures, and Patterns)
Photoshop plug-ins appear in the Fireworks Filters menu and the Property inspector’s Add Effects
menu. Textures or patterns stored as PNG, JPEG, and GIF files appear as options in the Pattern
and Texture pop-up menus in the Property inspector.
For more information about textures and patterns, see “Adding texture to a fill” on page 117.
Photoshop Import preferences
The preferences in the Import tab let you manage Photoshop file conversions:
• You can convert layers as objects or new frames.
• You can choose between editing imported text or maintaining its appearance.
• You can import a Photoshop file as a flattened bitmap object.
For more information on the Import preferences, see “Working with Adobe Photoshop” in
Working with Other Applications on the Fireworks Support Center at www.macromedia.com/
support/fireworks/.
Setting preferences
283
Restoring preferences
You can restore preferences to their original settings by deleting the preferences file. The first time
Fireworks is launched after the preferences file has been deleted, a new preferences file is created,
restoring Fireworks to its original configuration.
To restore default preferences:
1 Quit Fireworks.
2 Locate the Fireworks MX 2004 Preferences file on your hard disk and delete it.
The exact location of this file varies from system to system. For more information, see
“Location of the Fireworks preferences file” on page 287.
3 Restart Fireworks.
Changing keyboard shortcut sets
Fireworks lets you use keyboard shortcuts to choose menu commands, choose tools from the
Tools panel, and speed up miscellaneous tasks that do not exist as menu commands. Using
shortcuts increases your productivity by allowing you to perform simple actions quickly. If you are
accustomed to using shortcuts from other applications such as FreeHand, Illustrator, Photoshop,
or products that use the Macromedia standard, you can switch to the shortcut set you prefer.
To change the current shortcut set:
1 Choose Edit > Keyboard Shortcuts (Windows) or Fireworks > Keyboard Shortcuts (Macintosh)
to open the Keyboard Shortcuts dialog box.
2 Select the shortcut set you prefer from the Current Set pop-up menu and click OK.
Creating custom and secondary shortcuts
You can create your own custom keyboard shortcuts, and you can create secondary shortcuts if
you need to have several different ways to perform an action. A custom shortcut set is always
based on a preinstalled set.
Note: In Fireworks, shortcuts to tools cannot include modifier keys: Control, Shift, and Alt (Windows)
or Command, Shift, Option, and Control (Macintosh). Tool shortcuts consist of a single letter or
number key.
To create a custom or secondary shortcut for a menu command, tool, or miscellaneous
action:
1 Choose Edit > Keyboard Shortcuts to open the Keyboard Shortcuts dialog box.
2 Click the Duplicate Set button.
3 Enter a name for the custom set in the Duplicate Set dialog box and click OK.
The name of the new custom menu appears in the Current Set text box.
4 Choose the appropriate shortcut category from the Commands list:
creates a custom shortcut for any command accessed through the
menu bar.
■ Tools creates a custom shortcut for any tool on the Tools panel.
■ Miscellaneous creates a custom shortcut for a range of predefined actions.
Once selected, all possible shortcuts in the particular category appear in the Commands
scroll list.
■
284
Menu Commands
Chapter 14: Preferences and Keyboard Shortcuts
5 Choose the command whose shortcut you want to modify from the Commands list.
If a shortcut exists, it is displayed in the Shortcuts list.
6 Click in the Press Key text box, and press the desired keys for the new shortcut on the keyboard.
If the key combination you choose is already used by another shortcut, a warning message
appears below the Press Key text box.
7 Do one of the following:
■ Click the Add a New Shortcut (+) button to add a secondary shortcut to the shortcut list.
■ Click Change to replace the selected shortcut.
Deleting custom shortcuts and custom shortcut sets
You can delete any custom shortcut or any custom shortcut set.
To delete a custom shortcut set:
1 Choose Edit > Keyboard Shortcuts to open the Keyboard Shortcuts dialog box.
2 Click the Delete Set button (trash can icon).
3 Choose the shortcut set you want to delete from the Delete Set dialog box.
4 Click the Delete button.
To delete a custom shortcut:
1 Choose the command in the Commands list.
2 Choose the custom shortcut from the Shortcuts list.
3 Click the Delete a Selected Shortcut (-) button.
Creating a reference sheet for the current shortcut set
A reference sheet is a record of the current shortcut set stored in HTML table format. You can
view the reference sheet in a web browser or print it.
Note: Reference sheets exported from Fireworks are UTF-8 encoded.
To create a reference sheet:
1 Choose Edit > Keyboard Shortcuts to open the Keyboard Shortcuts dialog box.
2 Click the Export Set as HTML button beside the Current Set text box.
The Save As (Windows) or Save (Macintosh) dialog box is displayed.
3 Enter the name for the reference sheet, and select the appropriate location for the file.
4 Click Save.
Changing keyboard shortcut sets
285
Working with configuration files
To accommodate multiuser systems, Fireworks supports user-specific configuration files. This lets
you customize features in Fireworks such as styles, keyboard shortcuts, commands, and so forth,
without affecting the configuration of Fireworks for other users.
Fireworks creates a different set of configuration files for each user. Fireworks also installs master
configuration files in the Fireworks application folder. Master configuration files contain the
default settings for Fireworks and affect all users. Some configuration files, such as Fireworks
plug-ins, are located only in the Fireworks application folder. On some systems, only system
administrators have access to the master configuration files in the Fireworks application folder.
Note: Windows systems often hide certain files and folders by default. Ensure that your Folder View
options are set to display all files and folders. On some systems, you may also need to click Show
Files once you get to a folder in order to see its contents. For information about viewing all files and
folders, see Windows Help.
About user configuration files
Fireworks user configuration files are stored in the Macromedia/Fireworks MX 2004 folder in
your user-specific Application Data folder (Windows) or Application Support folder (Macintosh).
The location of this folder varies depending on what operating system you use and on whether
your system is a multiuser system or a single-user system. For information on locating this folder,
see your operating system documentation.
Note: The names of some system folders may vary on localized and customized systems.
About master configuration files that affect all users
Master configuration files that affect all users are located in the Fireworks application folder,
which is the location on your hard disk where you installed Fireworks.
Note: Many configuration files are stored in subfolders within the Fireworks application folder. Their
location varies depending on your operating system. Also, Macintosh users should be familiar with
the package concept from Apple. For more information see “Viewing package contents (Macintosh
only)” on page 287.
Whether you’re on a multiuser or a single-user system, Fireworks changes your user-specific
configuration files and not the master configuration files in the Fireworks application folder when
you save most settings. This is because many users don’t have access to all files if they are on
multiuser systems.
Users with administrator-level access can customize features for all users by modifying the master
configuration files in the Fireworks application folder.
To save a master configuration setting for all users:
• Save or drag a copy of the file into the appropriate location in the Fireworks application folder.
286
Chapter 14: Preferences and Keyboard Shortcuts
Location of the Fireworks preferences file
Fireworks preferences are stored in a file named Fireworks MX 2004 Preferences.txt (Windows)
or Fireworks MX 2004 Preferences (Macintosh). The location of this file varies depending on
your operating system.
• In Windows, preferences are in your user-specific Fireworks configuration folder. For more
information about locating this folder, see “About user configuration files” on page 286.
• On the Macintosh, preferences are in the Library/Preferences folder in your user folder. For
information about locating your Macintosh user folder, see Apple Help.
Note: On the Macintosh, most Fireworks user-specific configuration files are stored in a different
folder, your user-specific Application Support folder. The Fireworks MX 2004 Preferences file is
an exception.
About reinstalling Fireworks
When you uninstall or reinstall Fireworks, your user-specific configuration files are left
untouched on most systems. If you want to reinstall Fireworks using the default settings, you
must manually delete your user-specific configuration files before reinstalling the application.
Note: Your user-specific configuration files are located in your user-specific Application Data
(Windows) or Application Support (Macintosh) folder. For information on locating this folder, see
“About user configuration files” on page 286.
On Windows XP, Windows 2000, and Windows NT 4 systems, you will be asked during the
uninstall process if you want to remove preferences and user-specific configuration files. Doing so
will remove these files for all users on the system.
Viewing package contents (Macintosh only)
On the Macintosh, Fireworks is installed in a format called the application program package. This
is a feature from Apple that allows applications to be installed in a self-contained package.
The application package is where the Fireworks application file is stored, along with all default
configuration files that come with Fireworks. Package contents are hidden by default.
After you open the package, you’ll notice a number of files and folders.
To show or hide the contents of the Fireworks application program package:
1 Navigate to the location on your hard disk where you installed Fireworks.
2 Control-click the Fireworks MX 2004 icon and choose Show Package Contents from the
context menu.
A new window opens displaying the package contents.
Viewing package contents (Macintosh only)
287
288
Chapter 14: Preferences and Keyboard Shortcuts
INDEX
Numerics
24-bit color 236
32-bit color 236
A
absolute URLs, entering 166
ACT file format, swatches 99
Add Noise filter 54
Add Preview Icons preference 282
adding
frames 217
styles 157
adjusting
hue or saturation 47
tonal range using eyedropper 45
Adobe GoLive 261
aligning objects 26
alpha channel of an object, selecting 15
alpha, converting images to 51
alt (alternate) text 180
assigning to buttons or instances 199
animation 211
adding frames 217
creating from multiple files 224
custom frame viewing 220
deleting frames 218
disabling layer sharing 219
exporting 223
frames 213
inserting frames 217
looping 222
managing frames 216
movement 213
moving objects to another frame 218
multiframe editing 220
naming frames 217
onion skinning 220
opacity 214
opening 223
optimizing 222
playing 221
previewing 221
properties 213
removing 214
reordering frames 218
rotation 214
scaling 214
setting frame delay 216
sharing layers across frames 218
transparency 222
turning frames on and off 217
viewing all frames 220
viewing current and adjacent frames 220
viewing multiple frames 220
viewing next frame 220
anti-aliasing
edges 115
removing halos 246
smoothing text edges 88
target background color 245
application program package 287
arranging frames 218
Arrow tool 58
Auto Levels feature for adjusting tonal range 40
Auto Shapes 57, 58, 62, 63
auto-naming slices 181, 182
changing default naming convention 183
289
B
backing up during Find and Replace 265
baseline shift 89
Batch Process dialog box 268
batch processing 267
backing up files 273
commands 272
export settings 270
filenames 272
Find and Replace 271
optimization settings 270
saving as scripts 274
saving files 269
scaling graphics 271
batch scripts 274
dragging and dropping 274
running 274
behaviors
Behaviors panel 177
Macromedia Dreamweaver 4 173
Nav Bar Down 178
Nav Bar Over 178
Nav Bar Restore 178
Set Nav Bar Image 178
Set Pop-up Menu 178
Set Text of Status Bar 178
Simple Rollover 177
Swap Image 177
Behaviors panel 177
Bent Arrow Tool 58
beveled edges 122
Beveled Rectangle tool 58
bicubic interpolation scaling method 281
bilinear interpolation scaling method 281
bitmap masks 134, 136
creating 141
using an existing object as 139, 141
bitmap mode
Display Striped Border preference 282
switching to 29
bitmaps
adjusting brightness and contrast 45
adjusting color and tone 39
adjusting hue and saturation 47
blurring and sharpening 49
erasing 33
retouching 34
290
Index
blending
applying 154
colors of overlapping objects 152
objects 220
setting blending mode 154
blending modes 152
Color 152
Darken 152
Difference 152
Erase 152
Hue 152
Invert 152
Lighten 152
Luminosity 152
Multiply 152
Saturation 152
Screen 152
Tint 152
Blur filter 49
Blur More filter 49
Blur tool 34
blurring 49
bitmap areas 34
images 35
BMP file format 235
bold text 82
Border command 17
boundaries 106
brightness 45
Brightness/Contrast filter 45
Bring Forward command 26
Bring to Front command 26
Brush Size Painting Cursors preference 282
Brush tool 31, 63
brushes
saving settings 109
setting tip 108
stroke options 108
Burn tool 34
Button Editor 192
creating symbols in 159
editing symbols in 160
button states
Down 192, 193
Over 192, 193
Over While Down 192, 193
Up 192
button symbols
editing 196
inserting in a document 195
buttons
active area 197
Button Editor 191
creating 191
defined 192
Live Effects 194
navigation bars 200
overview 191
setting a target 198
C
cell border properties 207
center point and axis of rotation 22
Chamfer Rectangle tool 58
character spacing. See kerning
Check Spelling command 94
cloning
bitmap areas 34
images 34
objects 20
CMY color model 102
color
adjusting 39
applying from Swatches panel 99
changing 32
changing stroke 106
choosing color depth 236
choosing swatch group 99
choosing using Eyedropper tool 105
color models 102
creating in Color Mixer 102
creating with system color picker 103
deleting from Swatches panel 100
dithering with websafe 104
fills 46
finding and replacing 266
finding and replacing non-websafe 267
gradient fills 112
inverting values 48
picking from color bar 102
pop-up window 105
removing unused 237
replacing a swatch 100
resetting default 98
sampling 32, 105
saving custom swatches 101
setting preferences 281
viewing color values 103
color bar 98, 101
choosing a color with 102
cycling through color models 102
color correction
brightness and contrast 45
Curves 43
Levels 40
using eyedropper 45
Color Mixer 101
creating colors with 102
displaying 102
mixing colors in 101
resetting default colors in 98
swapping stroke and fill colors in 98
color models
CMY 102
Grayscale 102
Hexadecimal 102
HSB 102
RGB 102
color palettes
Adaptive 235
appending to current swatches 99
Black and White 236
Custom 236
editing 239
Exact 235
Grayscale 236
importing 236
locking colors 239
optimizing 239
saving 240
setting number of colors 236
System (Macintosh) 236
System (Windows) 236
Uniform 236
viewing 237
Web 216 235
WebSnap Adaptive 235
color picker, system 103
color table 237
edited swatch in 238
locked swatch in 238
selecting colors in 238
swatch with multiple attributes in 238
transparent swatch in 238
updating 238
websafe swatch in 238
colorizing images 47
command scripts, editing 279
Index
291
commands
batch processing 272
creating 276
deleting custom 278
editing 279
renaming custom 278
renaming or deleting Fireworks commands 278
Commands menu 277
managing saved commands 278
composite paths 75
compositing 152
compression
adjusting 240
and optimization 231
blurring edges 245
choosing a file type 234
selective 244
configuration files 286
customizing for all users 286
for all users 286
location of 286
master 286
configuring Fireworks 281
Connector Line tool 58
constraining rotation 22
Contract command 16
contracting paths 78
contrast 45
copying
all selected objects on a layer 132
bitmaps 19
frames 217
HTML 255
object attributes 158
objects 19
pixels 10
copying and pasting
Fireworks HTML 255, 256
symbol instances 163
corner points 65
Crop command 77
CSS layers, exporting 258
curve points 65
curve segments, editing 67
custom shortcut sets. See keyboard shortcuts
cutting paths 75
292
Index
D
darkening
bitmap areas 34
images 36
default preferences 284
Delete Objects While Cropping preference 282
deleting
frames 218
layers 131
Live Effects 125
masks 151
points 70
points on curves 45
selected objects 20
styles 157
swatches 100
Deselect command 13
deselecting all objects 10
disjoint rollovers 176
applying to a slice 177
attaching to hotspots 188
creating 176
Display Striped Border preference 282
Distort tool 23
distorting objects 23
dithering 237
with websafe colors 104
documents
default mode 55
Dodge tool 34
Doughnut tool 58
Down button state 192
drag-and-drop behaviors
blue line 175
definition 174
deleting 176, 177
for single slice 175
drawing 58
arrows 58
bending adjacent segments 70
beveled rectangles 58
chamfer rectangles 58
changing adjacent segments 70
connector lines 58
converting straight paths to curved 68
distorting objects 23
doughnuts 58
ellipses 56
L-shapes 58
lines 56
pie charts 58
polygons 57, 58
rectangles 56
rounded rectangles 56, 58
selecting a point 69
spirals 58
splitting paths 75
stars 57
drop shadows 123
duplicating
by dragging 20
selected objects 19
E
e-mail 262
edges
beveled 122
showing and hiding 10
Edit Gradient dialog box 113
Edit Stroke dialog box 107
editing
actions in the History panel 279
animation symbols 213
behaviors 179
bitmap objects 31
gradient fills 113
Live Effects 124
paths 71
pixels 10
pop-up menus 209
selected objects 19
single layer 132
solid fills 110
styles 157
effects
applying to objects 121
editing 124
finding and replacing 266
glow 123
Live Effects 119
plug-ins 124
removing 125
setting defaults 126
Effects pop-up menu 120
ellipse 56
embossing 122
Eraser tool 33
erasing bitmaps 33
Expand command 16
Expand Stroke command 78
expanding strokes 78
Export Area tool 251
Export Preview 227
comparing optimization settings 228
optimizing 227
panning area 228
previewing 227
previewing optimization 227
zooming 228
exporting 247
an area 251
animated GIFs 223
animations 221, 250
batch process settings 270
CSS layers 258
default location for 247
frames as multiple files 251
hotspots 187
HTML 252
images 248
layers as multiple files 251
results 253
slices 180, 249
styles 157
symbols 163
to WBMP files 234
UTF-8 259
XHTML 258
Extension Manager 275
external files, converting to swap image 179
eyedropper pointer 102, 105, 110
Eyedropper tool 32, 100
F
Feather command 33
feathering 33
creating feathered edges 115
pixel selections 16
file formats
BMP 235
GIF 234
JPEG 234
PNG 234
TIFF 235
File Management button 262
File Management menu 262
file size
reducing quality 243
setting loss to reduce size 240
filenames, changing in a batch process 272
Index
293
files, unlocking 262
Fill Color box 32
Fill Color Live Effect 154
fills
adding texture to 117
adjusting 114
applying color fills 46
applying gradient 32, 112
applying pattern 111
applying solid 110
changing color for basic shape tools 110
changing edges 115
drawing over strokes 109
editing gradient 113
editing solid 110
feathering or anti-aliasing 115
finding and replacing 266
moving 114
resetting default color 98
rotating 114
saving custom gradient 115
saving gradient 115
swapping stroke and fill colors 98
transforming gradient 114
transforming pattern 114
transparency illusion 104
web dither fill 104
filters
Add Noise 54
Blur 49
Blur More 49
Brightness/Contrast 45
Find Edges 51
Gaussian Blur 49
Hue/Saturation 47
Invert 48
Motion Blur 50
Photoshop plug-ins 123
Radial Blur 50
Sharpen 52
Sharpen More 52
Unsharp Mask 52
Zoom Blur 50
Find and Replace panel 264, 266
Find Edges filter 51
294
Index
finding and replacing 264
batch processed files 271
colors 266
fonts 266
multiple files 265
non-websafe colors 267
selecting source for search 264
text 266
URLs 267
uses 264
Flatten Selection command 31
flipping objects 23
floating pixel selections
creating 18
moving 18
fonts
finding and replacing 266
handling missing 93
styles 82
type sizes 82
frame delay
animations 216
frames
adding 217
custom viewing 220
deleting 218
disabling layer sharing 219
exporting 251
inserting 217
managing 216
moving objects to another frame 218
multiframe editing 220
names in animation 217
onion skinning 220
reordering 218
setting delay 216
sharing layers for animation 218
turning off onion skinning 220
turning on and off 217
viewing all 220
viewing current and adjacent 220
viewing next 220
Frames panel 216
freeform paths 63
FrontPage 261
G
Gaussian Blur filter 49
GIF file format
choosing 234
choosing a color palette 235
swatches 99
glow effects 123
GoLive 261
gradient fills 32
adding new color 113
adjusting 114
adjusting color transition 113
applying 112
changing colors 113
converting images to transparency 51
Edit Gradient dialog box 113
editing 113
moving 114
removing colors from 113
rotating 114
saving custom 115
transforming 114
Grayscale color model 102
grouping objects 25
H
halos, removing 246
handles, transform 21
Hexadecimal color model 102
Hide All command 142
Hide Selection command 142
hiding
edges 10
layers 133
objects on layers 133
highlights 41
Histogram 41
History panel
changing the number of steps in 276
clearing all steps from 276
editing actions with 279
replaying steps 277
hotspots
applying drag-and-drop rollovers 188
assigning URLs 180
creating 185
editing shape 186
irregular 186
on top of slices 189
HSB color model 102
HTML 252
copying and pasting from Fireworks to
Dreamweaver 255, 256
exporting 252, 254
replacing older version 257
Setup 259
hue, adjusting 39, 47
Hue/Saturation filter 47
I
icon images. See thumbnails
image maps
creating 185
exporting 187
images
exporting 248
painting 31
saving 248
selecting 10
selecting pixels 10
images as fills. See Paste Inside command
import text 93
ASCII text 93
Photoshop files 93
RTF files 93
importing
Photoshop import preferences 283
styles 158
symbols 163
indenting text 87
Inset Path command 78
installing Photoshop plug-ins 124
instance-level properties 196
instances
defined 158
editing 160
placing in document 159
tweening 220
interactive button properties 197
interlacing graphics 242
interpolation (scaling) 281
Intersect command 76
Invert filter 48
italic text 82
Index
295
J
JPEG files
choosing JPEG format 234
editing selected areas 244
optimization settings 243
progressive 245
Selective JPEG compression 244
Sharpen JPEG Edges command 245
K
kerning 84
keyboard shortcuts 284
changing current set 284
custom shortcut sets 284
deleting custom shortcut sets 285
reference sheet for current set 285
secondary shortcuts 284
UTF-8 encoded reference sheets 285
Knife tool 75
L
L-shape tool 58
layers 129
activating 130
adding and removing 130
disabling sharing across frames 219
duplicating 131
exporting 251
locking 132
moving 132
naming 132
organizing 131
sharing 133
sharing across frames for animation 218
viewing 131
Layers panel
naming slices 181
viewing slices 170
leading 85
letter spacing. See kerning
Levels feature for adjusting tonal range 40
Library panel 159
inserting button symbols 195
lightening
bitmap areas 34
images 36
line spacing
See also leading
lines 56
See also strokes
296
Index
Live Effects
applying 126
creating 125
editing 124
enabling or disabling 121
Fill Color 154
in buttons 194
Photoshop plug-ins 123
removing 125
renaming 126
locked files 262
locking layers 132
M
Macromedia Dreamweaver
Dreamweaver 4 behaviors 173
macros 277
marquees 10
contracting 16
deselecting 13
expanding 16
moving 14
removing 13
saving and restoring 18
selecting area around 17
selecting pixels by intersecting 15
smoothing 17
transferring to another object 17
masks 134
adding objects to a masked selection 151
bitmap 136
creating empty 142
deleting 151
disabling 151
enabling 151
grouping objects to form a mask 143
modifying 148
moving with masked objects 146
replacing 151
text as a mask 140
using an existing object as 139, 141
vector 135
merging paths 71, 75
midtones 41
mirroring. See flipping objects
modes
vector 55
Motion Blur filter 50
mouse events 179
N
nav (navigation) bars
creating 200
Down state 178
Over state 178
Restore behavior 178
nearest neighbor interpolation scaling method 282
nested tables 183
Numeric Transform command 24
O
objects
converting to animation 213
creating bitmaps 30
distorting 23
grouping 25
merging 133
moving selected 19
removing an effect 125
selecting 8
selecting alpha channel 15
skewing 23
slanting 23
stacking 26
ungrouping 25
onion skinning
Button Editor 191
custom viewing 220
defined 220
multiframe editing 220
turning off 220
viewing all frames 220
viewing current and adjacent frames 220
viewing next frame 220
opacity
adjusting 154
See also transparency
opening
animated GIFs 223
multiple files as animations 224
optimization settings
changing in a batch process 270
comparing two or four settings 234
deleting preset settings 247
JPEG 243
preset 181, 232
reusing 232, 246
saving 232, 246
sharing with another user 247
Optimize to Size wizard 229
optimizing
animations 222
basics 226
using Export Wizard 227
outlines 106
See also strokes
Over button state 192
Over While Down button state 192
overlapping slices 173
P
package contents, viewing 287
panels
Behaviors 177
Find and Replace 264, 266
Frames 216
Library 159
Styles 156
Swatches 99
URL 164
paragraph spacing 87
Paste Inside command 139
pasting HTML 256
paths 75
adding stroke texture 116
bending adjacent segments 70
changing adjacent segments 70
changing shape 70
converting straight to curved 68
creating custom strokes 107
cropping 77
editing strokes 106
pulling 73
pushing 73
resetting default colors 98
selecting a point 69
splitting 75
swapping stroke and fill colors 98
pattern fills
adjusting 114
applying 111
moving 114
rotating 114
transforming 114
Index
297
Pen tool 64
adding points with 70
curved segments 65
deleting points with 70
resuming path 71
straight segments 65
Pencil tool 31
perspective illusion 23
Photoshop
applying plug-ins 124
grouped layers 134
import preferences 283
installing plug-ins 124
layer masks 143
patterns 283
plug-ins 283
textures 283
Pick Distance preference 282
PICT file format 235
pie chart 58
Pie tool 58
pixels
adjusting tonal range using eyedropper 45
cloning 34
contracting selection border 16
copying 10
cutting 10
expanding selection border 16
feathering 33
moving 10
painting 31
selecting 10
selecting area around a marquee 17
selecting freeform area 11
selecting polygonal area 12
selecting similar colors 12
smoothing a marquee border 17
tonal range 41
playing
animations 221
macros 277
saved commands 277
plotting points 64
PNG file format
choosing 234
choosing a color palette 235
point handles 67
displaying 69
Pointer tool 8, 10
298
Index
points
adding 70
bending adjacent segments 70
changing adjacent segments 70
converting 68
converting straight to curved 68
deleting 70
moving 70
selecting 69
polygons 57, 58
pop-up menus 200
advanced properties 206
description 201
designing appearance 204
editing 209
entering menu text 202, 203
exporting 210
setting position 208
Precise Cursors preference 282
preferences 281
color defaults 281
default 284
editing options 282
folder options 283
import options 283
interpolation options 281
location of file 287
restoring defaults 284
setting 281
Undo Steps 281
Preview button 233
previewing
documents in a browser 261
optimization settings 232, 233
pixels containing specific color 238
strokes 107
with Export Preview 227
progressive JPEGs 245
Property inspector 9
masking with 149
selection information 9
working with text in 79
Punch command 76
Q
Quick Export button 261
Quick Export pop-up menu 261
R
Radial Blur filter 50
raster images 29
rectangles 56
rounded corners 59
Red-eye Removal tool 34, 37
redoing using History panel 276
Redraw Path tool 74
redrawing paths 74
reducing points 77
reinstalling Fireworks 287
relative URLs, entering 166
removing
effects 125
parts of a path 76
renaming symbols 160
Replace color tool 34, 38
replacing elements 264
replaying animations 221
reshaping vector objects 73
Reveal All command 142
Reveal Selection command 142
RGB color model 102
rollovers
active area 197
converting to buttons 194
creating 191
defined 174
navigation bars 200
odd-shaped 170
simple 177
Simple Rollover behavior 177
swap image 175
rotating
constraining 22
objects 22
relocating axis of rotation 22
Rounded Rectangle tool 58, 59
rounded rectangles 56
Rubber Stamp tool 34
S
saturation, adjusting 39
saving 247
animations 250
images 248
Scale tool 22
scaling
graphics 271
interpolation options 281
objects 22
scripting 277
editing scripts 279
Flash SWF files 278
searching 264
See also finding and replacing
segments, converting 68
selecting
adding to a pixel selection 14, 15
additional objects 9
alpha area 15
area around a marquee 17
canceling a selection 20
contracting a marquee border 16
deselecting a marquee 13
deselecting an object 9
expanding a marquee border 16
feathering a pixel selection 16
feathering edges 33
floating pixel selection 18
freeform area of pixels 11
grouped objects 25
images 10
inverting a pixel selection 16
overlapping areas of bitmaps 15
pixel areas 11
pixels 10
points 69
polygonal area of pixels 12
similar colors 12
smoothing a marquee border 17
subtracting from a pixel selection 15
Selective JPEG compression 244
Enable Selective Quality 244
overlay color 244
preserve button quality 244
preserve text quality 244
Selective Quality button 244
Send Backward command 26
Index
299
Send to Back command 26
sending documents as e-mail attachments 262
Set Nav Bar Image behavior 178
Set Pop-up Menu behavior 178
Set Text of Status Bar behavior 178
shadows 41, 123
sharing layers 133
Sharpen filter 52
Sharpen More filter 52
Sharpen tool 34
sharpening 52
bitmap areas 34
images 35
shortcut sets
See also keyboard shortcuts
Show Pen Preview preference 282
Show Solid Points preference 282
Show Tab Icons preference 282
Show/Hide hotspots and slices 171
showing
edges 10
Simple Rollover behavior 177
simple rollovers 175
creating 177
Simplify command 77
simplifying paths 77
Skew tool 23
skewing objects 23
slanting objects 23
slice guides
changing color 171
removing 172
viewing 171
slices
auto-naming 181, 182
changing color 171
creating 168
exporting 248, 249
overlapping 173
polygon 169
resizing 172
showing or hiding slice overlay 234
text 169
updating 249
using nested tables 183
using spacer 183
slicing
definition 167
for interactivity 168
Smart Polygon tool 58
300
Index
Smooth command 17
Smudge tool 34
smudging
bitmap areas 34
images 36
Snap Distance preference 282
soft interpolation scaling method 282
solid fills
adding texture to 117
applying 110
spacers 183
spell checking 94
Spiral tool 58
Split command 75
stacking objects 26
Star tool 58
stars 57, 58
straight segments, editing 66
Stroke Color box 106
strokes 106
adding texture 116
changing centering 109
changing color of drawing tools 106
choosing 106
creating custom 107
drawing fill over 109
edges of 106
editing 106
finding and replacing 266
reorienting 109
resetting default color 98
saving settings 109
setting sensitivity 108
swapping stroke and fill colors 98
textures 106
styles
adding 157
applying 156
basing on existing styles 157
defined 155
deleting 157
editing 157
enlarging preview icons 158
exporting 157
importing 158
new 157
resetting to defaults 158
Styles panel 156
Subselection tool
auto-joining paths with 71
selecting masks with 145
Swap Image behavior 177
swap image rollovers
creating disjoint rollovers 176
with single slice 175
swap image, external images for 179
swatch group, choosing custom 99
Swatches panel 99
appending swatches 99
deleting a color 100
replacing a color 100
saving custom 101
Windows system colors 99
swatches, choosing custom 99
symbol library 159
Symbol Properties dialog box 159
symbols
breaking a link 161
creating 159
creating instances 159
defined 158
deleting 160
duplicating 160
editing 160
editing graphics 215
exporting 163
importing 163
modifying 160
placing instances in document 159
tweening 220
system color picker 103
T
text
alignment 86
attributes, saving 89
checking spelling 94
color 82
direction of 85
editing 81
entering 79
expanding or contracting character width 88
finding and replacing 266
indenting 87
orientation 85
paragraph spacing 87
slices 169
Text Editor 95
text blocks
auto-sizing 81
fixed-width 81
moving 80
resizing 81
text paths
attaching text to path 90
changing shape of path 91
converting text to path 92
detaching from path 91
editing text attached to a path 90
moving starting point of text 92
placing text on a path 91
text styles
bold 82
effects 89
fills 89
italic 82
strokes 89
underline 82
Text tool 79
texture
adding to fills 117
adding to strokes 116
thumbnails
in Layers panel 130
selecting masks with 144
TIFF file format, choosing 235
tonal range 40
adjusting with Curves 43
adjusting with Levels 40
tone, adjusting 39
tools
Blur 34
Brush 31
Burn 34
changing stroke color 106
Colors section in Tools panel 98
Distort 23
Dodge 34
Eraser 33
Eyedropper 32
Lasso 10
Magic Wand 10
Marquee 10
Oval Marquee 10
Pencil 31
Pointer 8, 10
Polygon Lasso 10
Red-eye Removal 34, 37
Index
301
Replace Color 34, 38
Rubber Stamp 34
Scale 22
Sharpen 34
Skew 23
Smudge 34
Subselection 71, 145
Text 79
Transform 21
transformation tools
Distort 23
Scale 22
Skew 23
transforming
by dragging 21
gradient fills 114
numerically 24
objects 21
pattern fills 114
text 92
transparency
adding or removing colors 242
animation 222
converting images to gradient transparency 51
illusion 104
selecting a color 242
See also opacity
transparent areas 241
Turn off Hide Edges preference 282
Tween Instances command 220
tweening
characteristics 220
defined 220
objects 220
typefaces. See fonts
URL library 164
adding URLs 165
adding used URLs 165
creating 165
entering absolute or relative URLs 166
URL panel 164
URLs
assigning to a web object 165
assigning to buttons or instances 198
finding and replacing 267
selecting target options 181
user configuration files 286
user folder 286
UTF-8 encoding 259, 285
U
underlined text 82
undoing
setting number of undo steps 281
using History panel 276
ungrouping objects 25
uninstalling Fireworks 287
Union command 76
Unsharp Mask filter 52
Up button state 192
Update HTML command 257
updating slices 249
Z
Zoom Blur filter 50
302
Index
V
valid files, defined 268
vector masks 134, 135
converting to bitmap mask 150
creating 137
using an existing object as 139, 141
vector mode
drawing in 55
switching to 29
vector objects, reshaping 72
W
WBMP files
exporting to 234
Web Layer 134
websafe colors 239
Windows system colors as a swatch group 99
X
XHTML 258
Download PDF
Similar pages