MACROMEDIA FIREWORKS 2-USING FIREWORKS Mounting instructions

macromedia
™
macromedia®
Using Fireworks
FIREWORKS®2

2
Licenses and Trademarks
Fireworks was created by Macromedia, Inc. © 1999. All rights reserved. Apple, the Apple Logo, Macintosh, Power Macintosh, Mac OS, and LaserWriter
are registered trademarks of Apple Computer, Inc. Java and all Java-based trademarks and logos are trademarks or registered trademarks of Sun
Microsystems, Inc. in the U.S. and other countries. GIF-LZW licensed under U.S. Patent No. 4,558,302 and foreign counterparts. This software is based in
part on the work of the Independent JPEG Group. The Graphics Interchange Format is Copyright © CompuServe Incorporated. GIF is a Service Mark
and the property of CompuServe Incorporated. Portions Copyright © 1988–1992 Sam Leffler. Portions Copyright © 1991, 1992 Silicon Graphics.
Photographs used in “Optimizing JPEGs” and “Creating Slices” tutorials are Copyright © 1994 PhotoDisc, Inc.
Fireworks and Microsoft Windows
FIREWORKS OPERATES IN A GRAPHICS ENVIRONMENT CALLED MICROSOFT WINDOWS, CREATED BY MICROSOFT
CORPORATION. AN EXTENSION OF THE MS-DOS OPERATING SYSTEM, MICROSOFT WINDOWS GIVES A STANDARD
LOOK AND FEEL TO FIREWORKS AND ALL OTHER WINDOWS APPLICATIONS. TO RUN FIREWORKS UNDER
MICROSOFT WINDOWS, YOU NEED TO LICENSE AND INSTALL MICROSOFT WINDOWS.
Fireworks and the Apple Macintosh
SYSTEM UTILITIES AND TOOLS ARE COPYRIGHTED PROGRAMS OF APPLE COMPUTER, INC., LICENSED TO
MACROMEDIA, INC. TO DISTRIBUTE FOR USE ONLY IN COMBINATION WITH FIREWORKS. APPLE SOFTWARE SHALL
NOT BE COPIED ONTO ANOTHER DISK (EXCEPT FOR ARCHIVAL PURPOSES) OR INTO MEMORY UNLESS AS PART OF
THE EXECUTION OF FIREWORKS. WHEN FIREWORKS HAS COMPLETED EXECUTION, APPLE SOFTWARE SHALL NOT
BE USED BY ANY OTHER PROGRAM. 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 HAVE WHICH VARY FROM STATE TO STATE.
U.S. Patents 5,353,396, 5,361,333, 5,434,959, 5,467,443, 5,500,927, 5,594,855 and 5,623,593. Other patents pending.
Macromedia, the Macromedia logo, Authorware, Director, Dreamweaver, Fireworks, Flash, Fontographer, FreeHand, FreeHand Graphics Studio,
Macromedia xRes, Shockwave, and Xtra are trademarks or registered trademarks of Macromedia, Inc. Other product names mentioned within this
publication may be trademarks of Macromedia, Inc. or other entities.
Copyright © 1999 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.
Macromedia, Inc.
600 Townsend St.
San Francisco, CA 94103
Acknowledgments
Written by Randy Varnell and Rocky Angelucci.
Edited by Monte Williams and Stuart Manning.
Project management by Monte Williams.
Production by Stuart Manning and Rocky Angelucci.
Special thanks to Doug Benson, Dennis Griffin, David Morris, and Mark Haynes.

Contents
3
CONTENTS
CHAPTER 1
Getting Your Bearings. . . . . . . . . . . . . . . . . . . . . . . . . . . 9
What’s in this package. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .10
System requirements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .10
Windows: . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .10
Macintosh:. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
Installing and starting Fireworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
Uninstalling Fireworks. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
Resources for learning Fireworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .12
What’s unique about Fireworks? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
Welcome to Fireworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .14
What is Fireworks? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .14
Using the document window. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .15
View Controls toolbar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
Using the toolbars. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
Navigating and viewing the document . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .32
Setting document magnification . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .32
Shortcut menus . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .33
Multiple document views. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .33
Optimizing document redraw. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .34
A Case Study: With and Without Fireworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .34
The Fireworks way. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .35
Setting up your document. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .37
Importing and Exporting. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40
Importing bitmap images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40
Importing vector art. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40
Exporting . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .41

Contents
4
CHAPTER 2
Creating and Editing a Graphic . . . . . . . . . . . . . . . . . .43
Object mode and image edit mode. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44
Fireworks drawing and editing tools. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44
Editing path objects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .45
Using path operations to reshape paths. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48
Drawing in object mode . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48
Editing in object mode . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .50
Image edit mode basics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .52
Switching to image edit mode . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .52
Converting an object to an image. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .54
Using Xtras . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .54
Transforming and distorting objects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .54
Using color. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .55
Using the Color Mixer. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56
Using the Swatches panel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .57
System color pickers. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .58
Using color wells. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .58
Applying strokes and fills. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .59
The Stroke panel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60
The Fill panel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .61
Using styles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .63
Adding texture. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64
Applying effects to objects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .65
Live Effects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .65
Using Xtras . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67
Using text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67
Using the Text Editor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68
Attaching text to a path . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69
Controlling document size and resolution . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .70
Resampling . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .70
Organizing your document. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .71
Grouping objects. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71
Arranging objects on a layer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .72
Using layers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .72
Using frames. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .74

Contents
5
Find and Replace. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .74
Finding and replacing text. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .76
Finding and replacing fonts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .77
Finding and Replacing colors. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .77
Finding and Replacing URLs. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .78
Symbols and instances. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .78
Creating a symbol. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .78
Creating an instance . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .79
Modifying a symbol. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .79
Modifying an instance . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .79
Working with symbols and instances . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .79
Tweening . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .80
Compositing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .81
Using the Object inspector. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81
Using blending modes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81
Masking . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .83
CHAPTER 3
Importing and Exporting . . . . . . . . . . . . . . . . . . . . . . . . 85
Fireworks in the workflow . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86
Importing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86
Import File dialog box. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86
Drag and drop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .87
Copy and paste. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .87
Importing text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .88
Importing Fireworks files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .88
Importing FreeHand, Illustrator, or CorelDRAW files . . . . . . . . . . . . . . . . . . . . 89
Importing animated GIFs. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90
Importing from a scanner or digital camera. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90
Exporting . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .91
Using Export Preview . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .93
Preview area . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94
Options panel. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .95

Contents
6
Working with color palettes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96
Using palettes for drawing and creating. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96
Using palettes for exporting . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .97
Setting the number of colors in the palette. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .97
Editing colors in a palette . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98
Saving a palette. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .100
Using Dithering . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .100
Adjusting transparency . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .101
Optimize . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .102
Interlacing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .102
File panel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .102
Animation panel. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .102
Export Area . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .103
Web export formats . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .103
GIF. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .103
JPEG . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104
PNG . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .105
Web format comparison . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .105
Other export formats . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106
TIFF . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106
PICT . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106
BMP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106
xRes LRG. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106
Batch processing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106
Finding and Replacing during a batch process. . . . . . . . . . . . . . . . . . . . . . . . . . . . .107
Changing file settings with a batch process . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .107
Backing up batch processed files. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 109
Using batch Scriptlets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 109
Using the Project Log . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 109
Working with Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110
Fireworks images in Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .110
Editing Fireworks images in other image editors. . . . . . . . . . . . . . . . . . . . . . . . . . . 112

Contents
7
CHAPTER 4
Web Design Features . . . . . . . . . . . . . . . . . . . . . . . . . .113
Producing web components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .114
Features for web production. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 114
Web objects: The basics of web production . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .114
Creating web objects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115
Setting web object properties . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115
Creating an image map. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .116
Choosing an image map source graphic . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .116
Creating a hotspot . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .116
Setting image map options . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .116
Exporting image maps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 117
Slicing images when exporting. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 117
Slice objects as event areas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 117
Creating a sliced image . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 117
Exporting an image in multiple slices. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118
Specifying export settings for slice objects. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .119
Naming slices. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .119
JavaScript rollovers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .120
Button rollovers. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .120
The Down state. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 121
Swapping parts of the image. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 121
Using irregularly shaped rollovers. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .122
Creating toggle group rollovers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .123
Exported JavaScript code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .123
Creating animation. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .124
Fireworks animation features . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .124
Opening an animation. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .124
Drawing an animation. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .125
Optimizing and controlling the animation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .127
Previewing an animation. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .128
Exporting an animation. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .129

Contents
8
Transparency. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .129
GIF transparency. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .129
PNG alpha transparency . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .129
Using Fireworks HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .130
Exporting HTML with a Fireworks file . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .130
Some HTML basics. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .132
Common HTML tags . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .132
Copying and pasting from a Fireworks HTML file . . . . . . . . . . . . . . . . . . . . . . .133
JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .133
Client-side image maps. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .133
Sliced images. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .133

9
1
CHAPTER 1
................................................................................................................
Getting Your Bearings

Chapter 1 10
What’s in this package
The Fireworks package contains:
◆
A CD-ROM containing the Fireworks installer
and the sample artwork.
◆
Using Fireworks , the manual you are now reading.
System requirements
Fireworks runs on either the Windows or Macintosh
operating systems. Before you install Fireworks, you
need the following equipment:
Windows:
◆
Windows 95, Windows 98, or Windows NT 4
(with Service Pack 3) or later
◆
Intel Pentium 120 MHz processor required
(Pentium II recommended) 32 MB of system
RAM on Windows 95 or Windows 98 (40 MB or
more recommended for Windows NT)
◆
60 MB of available hard disk space (100 MB or
more recommended)
◆
CD-ROM drive
◆
Mouse or digitizing tablet
◆
640x480 resolution, 256-color monitor required
(1024x768 resolution, millions of colors
recommended)
Macintosh:
◆
System 7.5.5 or higher
◆
Adobe Type Manager 4 or higher to use Type 1
fonts
◆
Power Macintosh processor required (G3
recommended)
◆
24MB of application RAM with virtual memory
on (32 MB or more with virtual memory off
recommended)
◆ 60 MB of available hard disk space (100 MB or
more recommended)
◆
CD-ROM drive
◆
Mouse or digitizing tablet
◆
640x480 resolution, 256-color monitor required
(1024x768 resolution, millions of colors
recommended)

Getting Your Bearings 11
Installing and starting
Fireworks
Before installing Fireworks, make sure your computer
meets the system requirements listed in “System
requirements” on page 10. Read the ReadMe document
on the Fireworks CD-ROM for late-breaking
information.
To install and start Fireworks on Windows NT 4 or
Windows 95 or 98:
1
Insert the Fireworks CD-ROM in your CD-ROM
drive.
2
Follow the instructions that appear on screen.
The installer application prompts you to enter
required information.
3
When Fireworks is installed, launch Fireworks
from the Start menu.
Windows NT 4 and Windows 95 or 98 have four
alternative ways to install Fireworks:
◆
Double-click the installation application Setup.exe.
◆
Click the Install button in the Add/Remove
Programs module in the Control Panel and
navigate to the Setup.exe application in the
Fireworks folder.
◆
Use the Run command in the Start menu and
navigate to the Setup.exe application in the
Fireworks folder.
◆
Select the CD-ROM icon in the Windows
Explorer or My Computer, right-click to display the
menu, and choose AutoPlay.
Note: To disable AutoPlay, hold down the Shift key
while inserting the Fireworks CD-ROM.
To install and start Fireworks on a Macintosh:
1
Disable virus-protection extensions and restart
your computer.
2 Insert the Fireworks CD-ROM in your CD-
ROM drive.
3
Double-click to launch the Fireworks Installer.
4
Follow the instructions that appear on screen.
5
Double-click the Fireworks icon to launch
Fireworks from the Finder.

Chapter 1 12
Uninstalling Fireworks
Use the uninstaller to ensure that all Fireworks files are
removed from the computer.
To uninstall Fireworks on Windows NT 4,
Windows 95, or Windows 98:
1
Choose Start > Settings > Control Panel.
2
Double-click Add/Remove Programs.
3 Select Macromedia Fireworks 2 in the list box.
Click the Add/Remove button.
4
Follow the instructions that appear on screen.
The uninstaller removes all Fireworks 2 program
files from your system.
On Windows, manual uninstallation may fail to
remove several DLLs and registry database entries.
To uninstall Fireworks on the Macintosh:
1
Run the Fireworks 2 installer and choose Remove
from the Options pop-up.
2 Follow the instructions that appear on screen.
The uninstaller removes all Fireworks application
files from your computer.
On the Macintosh, manually removing Fireworks can
fail to remove several preference files in the System
folder.
If you used Custom installation to install Fireworks in a
different folder than the default location, you must
specify the same location when uninstalling.
Resources for learning
Fireworks
Use these resources to learn Fireworks quickly:
◆
Fireworks Help
Fireworks Help, available whenever the Fireworks
application is active, includes information on every
Fireworks tool, panel, dialog box, and preference.
◆
Fireworks Tutorials
Fireworks tutorials, available from the Help menu
whenever the Fireworks application is active,
contain step-by-step lessons for the most common
Fireworks tasks, such as optimizing GIFs and
JPEGs, and creating animations, image maps, and
rollovers.
◆
Fireworks Application
The Fireworks application contains many dialog
boxes and ToolTips designed to assist you in using
the program. ToolTips appear when your cursor
pauses over a user interface element. Instructional
dialog boxes appear when you attempt to use certain
tools incorrectly.
◆
Using Fireworks manual
The Using Fireworks manual includes information
about basic and advanced Fireworks features.
◆
www.macromedia.com
Macromedia’s award-winning web site contains
Fireworks tutorials, sample art, and updates.
◆ TechNotes
Navigate to http://www.macromedia.com/support/
Fireworks/ to search for frequently updated
technical information on Fireworks.
◆
Fireworks Discussion Group
For discussion on Fireworks topics with Fireworks
users, technical support representatives, and the
Fireworks development team, use a news group
reader to go to news://forums.macromedia.com/
macromedia.fireworks.

Getting Your Bearings 13
What’s unique about
Fireworks?
The premier production tool for creating web graphics,
Fireworks has features that can save hours by
simplifying the web-graphic creation workflow.
Fireworks was created from the ground up specifically
for the web.
Live effects—
Create drop shadows, bevels, glows, and
embosses that are fully editable. Watch them update
automatically!
Vector tool flexibility with an organic bitmap
look— Bézier paths and shapes have bitmap brush
strokes and textured fills. Apply customizable Live
Effects to objects.
Total text control—
Retain the precise text control of
an illustration tool in an image-editing application.
Control kerning, leading, text effects, alignment, and
more. Apply Live Effects to text. Text is always editable,
all the time. Change text after applying a Live Effect and
watch the effect update automatically.
Export Preview—
Directly view the graphic after each
adjustment of export settings without switching to your
web browser. Compare up to four alternative files
simultaneously to choose the best mix of quality and
file-size reduction.
Export optimization— Simplify file format, palette
settings, dithering, and more to optimize your web
graphics. Or, use the Export Wizard to optimize
automatically.
Batch processing—
Choose export settings, and find
and replace graphics and text when batch processing
custom groups of images or an entire site.
Image maps—
Create editable, color-coded hotspots on
an overlay above the image. Enter a URL link and
browser status bar message for each hotspot.
JavaScript rollovers—
Automatically generate code for
interactive rollovers and other graphics.
Slice images—
Slice images on export. Automatically
generate HTML table code to reassemble images and
add links.
Compatibility with Macromedia Dreamweaver—
Export JavaScript rollovers that can be edited and
changed in Dreamweaver. Or, export complex
graphics as Dreamweaver library objects, easily
placing and reusing navigation bars and complex
rollovers. With Dreamweaver 2, launch Fireworks
from within Dreamweaver to easily and quickly make
changes to a graphic.

Chapter 1 14
Welcome to Fireworks
What is Fireworks?
Fireworks creates the smallest, highest-quality JPEG
and GIF graphics in the fewest number of steps. It is a
total solution for creating and producing web graphics.
Fireworks simplifies and streamlines the process of
making web and screen graphics, while providing the
ultimate in flexibility and editability.
Fireworks also makes it easy to minimize file size
without sacrificing quality, which results in faster web
sites and higher satisfaction among web site visitors.
Without Fireworks, for example, a web designer creates
an image in a vector-based drawing program such as
FreeHand, then imports the vector art into a bitmap
graphics program to rasterize and apply filters.
Continuing the creative process, the designer exports the
graphic for import into a color palette-conversion utility
and then optimizes the palette and image format for
either web- or screen-based delivery. The designer might
also use an animation tool or image map utility to create
a dynamic image.
To test the graphic, the designer must view it in a web
browser application. Revising the graphic at this point
may force the designer to start from the beginning and
repeat every step.
With Fireworks, the designer’s creativity is no longer
complicated by switching from tool to tool, and
valuable time is saved by avoiding repetitive procedures.
Fireworks is a single tool that handles all the
necessary steps.
By creating editable paths with bitmap attributes,
Fireworks ensures that your work is fully editable
throughout every stage of the design process. Fireworks’
powerful export preview capabilities integrated with
color palette and graphic formatting offer the designer
control over exporting.
Fireworks is a solution to the challenges faced by web
designers. Accordingly, Fireworks is not optimal for
creating or modifying images intended for traditional
commercial printing. The Fireworks environment is
based on the RGB color model, ideally suited for images
rendered at screen, rather than print, resolutions.
The advantages to using Fireworks over other tools
include efficiency, convenience, and adaptability. With
Fireworks, the designer is free to focus on design and
creation without the distraction of switching from tool
to tool.
This efficient workflow is even more convenient with
Fireworks’ incredible power over color palettes and file
formats. Advanced preview capabilities allow the
designer to see the effect of palette and color depth
changes without the time-consuming step of viewing
graphics in a browser.
Amazingly, both text and objects in a Fireworks graphic
are fully editable at any time. This means that graphics
can be easily modified without recreating them.

Getting Your Bearings 15
Using the document
window
Fireworks is both a vector graphics and a bitmap
graphics application. Vector objects are composed of
paths, and bitmap objects are composed of individual
pixels. Fireworks combines the organic look of bitmap
objects with the flexibility, control, and editability of
Bézier paths.
Launching Fireworks displays the document window,
your interface to the illustration. A Fireworks canvas
can be up to 6000 pixels wide by 6000 pixels tall. Move,
resize, or hide the panels, Toolbox, and toolbars to
customize your environment.
Main toolbar (Windows only)
Modify toolbar
(Windows only)
View Controls
toolbar
(Windows only)
VCR Animation
Controls
Toolbox
Fireworks on Windows
Status bar
(Windows only)
Styles panel
Behaviors inspector
Object inspector Layers panel

Chapter 1 16
Toolbox
The Toolbox contains 35 tools, some of which are
contained in tool groups, as shown. To display a tool
group, click and hold any tool with a triangle in the
lower-right corner.
Click an alternate tool to choose it from the tool group.
Pressing letter keys switches quickly between tools.
Press the letter key shown in the following chart to
choose a tool.
Fireworks documents contain four types of objects–
vector objects, which are path based; image objects,
which are pixel-based; text; and web objects, which are
special objects used to define areas of interactivity or
image slicing.
Press and hold a tool to reveal tool groups.
Use this tool To Activate by
pressing
Pointer
Select and drag
objects. v
or
0 (zero)
Select
Behind
Select objects behind
other objects. v
or
0 (zero)
Crop
Discard or add canvas
area. c
Export Area
Export a portion of a
document. j
Subselect
Select an object within
a group or points on a
path.
a or 1
Marquee
Select a rectangular
pixel area in image edit
mode.
m
Ellipse
Marquee
Select an elliptical pixel
area in image edit
mode.
m
Lasso
Select a freeform pixel
area in image edit
mode.
l
Polygon
Lasso
Select a polygonal pixel
area in image edit
mode.
l

Getting Your Bearings 17
Magic Wand
Select pixel areas of
similar color in image
edit mode.
w
Hand
Pan the view of the
document. spacebar
or
h
Magnify
Change view
magnification (zoom in
or zoom out).
z
Line
Draw straight lines. n
Pen
Draw paths by
anchoring points. p
Rectangle
Draw rectangles,
rounded rectangles,
and squares.
r
Ellipse
Draw ellipses and
circles. r
Polygon
Draw polygons and
stars. g
Text
Create text blocks. t
Pencil
Draw one-pixel pencil
strokes. y
Use this tool To Activate by
pressing
Brush
Draw brush strokes
using Stroke panel
settings.
b
Redraw Path
Redraw portions of a
selected path. b
Scale
Resize and rotate
objects. q
Skew
Slant and rotate
objects, and change
perspective.
q
Distort
Distort and rotate
objects. q
Freeform
Pull a path segment or
push a path segment
using a resizable
cursor.
f
Reshape
Area
Reshape a selected
path within the area of
the resizable cursor.
f
Path
Scrubber (+)
Increase stroke
characteristics
controlled by pressure
or speed.
u
Path
Scrubber (–)
Decrease stroke
characteristics
controlled by pressure
or speed.
u
Eyedropper
Sample a color and
apply it to the active
color well.
I
Use this tool To Activate by
pressing

Chapter 1 18
Main toolbar (Windows only)
Paint Bucket
Fill objects with color,
gradients, or patterns
and adjust fills with
Paint Bucket handles.
k
Eraser
Remove or replace
portions of image
objects and cut paths.
e
Rubber
Stamp
Clone portions of an
image object. s
Rectangle
Hotspot
Draw URL hotspots in
the shape of rectangles
or squares.
Circle
Hotspot
Draw URL hotspots in
the shape of circles.
Polygon
Hotspot
Draw URL hotspots in
the shape of irregular
polygons.
Slice
Create rectangular slice
objects.
Use this tool To Activate by
pressing
Use To
New
Create a new document.
Open
Open an existing document.
Save
Save the active document.
Import
Import a file.
Export
Export a file.
Print
Print the active document.
Undo
Undo the last action.
Redo
Redo the last action.
Cut
Cut selected objects to the Clipboard.
Copy
Copy selected objects to the
Clipboard.

Getting Your Bearings 19
ToolTips name or describe each button's function as
well as other user-interface features throughout
Fireworks. Pause the cursor over a button on a toolbar to
display a small label, which disappears when you move
the cursor away from the item.
Info panel
The Info panel provides feedback for selected objects,
depending on object type and current action. Feedback
includes the color of the pixel beneath the cursor in the
current color model values, the position of the cursor,
the location of the selected object's bounding box, and
the selected object's dimensions. Choose Window > Info
to show or hide the Info panel.
The Info panel's Options pop-up contains settings for
your document's color model and unit of measurement.
Paste
Paste the Clipboard’s contents into
the active document.
Object
Inspector
Open the Object inspector to view
properties for the selected object.
Color Mixer
Open the Color Mixer.
Stroke
Open the Stroke panel.
Fill
Open the Fill panel.
Layers
Open the Layers panel.
Help
Access Fireworks Help.
Use To
Options for choosing a color model
and document unit of measurement
Color of pixel beneath cursor
Alpha opacity measured in
increments from 0 to 255
Cursor position
Position of
bounding box’s
upper-left corner
point
Dimensions of selected object

Chapter 1 20
Object inspector
Use the Object inspector to set characteristics such as
opacity, blending mode, and placement of the brush
stroke in relation to a path. The Object inspector
contains status information for selected objects. The
Object inspector operates in one of eight different
modes, depending on the object type selected.
Components of the Object inspector
The different iterations of the Object inspector share
common elements, as shown in the table below. These
elements will become familiar as you work with various
object types.
Use To When
selecting
Object Opacity Set the opacity of a
single object Anything except
hotspot or
slice objects.
Blending Mode Set an object's
blending mode Anything except
hotspot or
slice objects.
Stroke Settings Control the
interaction of an
object's stroke and
fill
Any text or
path object.
Transformation
Method Transform text as pixels or as paths Text.
Group Type Define object
group as mask or
traditional group
Grouped
objects.
Object type
Link to URL
Alt tag
Color well
Slice name
Clipping path
setting Define how the mask group
appears
A mask
group.
Export Settings Assign export
presets to exported
slice objects
Slice objects.
Link to URL Assign URLs Slice objects
and hotspot
objects.
Alt tag Assign alternative
tag to be used
when the image is
unavailable
Slice objects
and hotspot
objects.
Link target Specify the
window or frame
in which the link is
displayed
Slice objects
and hotspot
objects.
Color well Set color Slice objects
and hotspot
objects.
Hotspot shape Choose to change
the shape of a
hotspot object
Hotspot
objects.
Auto-name Choose default or
custom slice names Slice objects.
Use To When
selecting