Macromedia FIREWORKS 2 User Manual
macromedia
FIREWORKS®2
Using Fireworks
®
macromedia
™
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.
2
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
3
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
4
Contents
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
5
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
6
Contents
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
7
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
8
Contents
CHAPTER 1
Getting Your Bearings
................................................................................................................
1
9
What’s in this package
System requirements
The Fireworks package contains:
A CD-ROM containing the Fireworks installer
◆
and the sample artwork.
◆
Using Fireworks
, the manual you are now reading.
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)
10
Chapter 1
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:
Insert the Fireworks CD-ROM in your CD-ROM
1
drive.
2
Follow the instructions that appear on screen.
The installer application prompts you to enter
required information.
When Fireworks is installed, launch Fireworks
3
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.
To install and start Fireworks on a Macintosh:
Disable virus-protection extensions and restart
1
your computer.
2
Insert the Fireworks CD-ROM in your CDROM drive.
Double-click to launch the Fireworks Installer.
3
Follow the instructions that appear on screen.
4
Double-click the Fireworks icon to launch
5
Fireworks from the Finder.
Note:
To disable AutoPlay, hold down the Shift key
while inserting the Fireworks CD-ROM.
Getting Your Bearings
11
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:
Choose Start > Settings > Control Panel.
1
Double-click Add/Remove Programs.
2
3
Select Macromedia Fireworks 2 in the list box.
Click the Add/Remove button.
Follow the instructions that appear on screen.
4
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:
Run the Fireworks 2 installer and choose Remove
1
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
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
◆
The
Using Fireworks
manual
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.
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.
Chapter 1
12
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—
embosses that are fully editable. Watch them update
automatically!
Vector tool flexibility with an organic bitmap
look—
strokes and textured fills. Apply customizable Live
Effects to objects.
Total text control—
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—
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—
settings, dithering, and more to optimize your web
graphics. Or, use the Export Wizard to optimize
automatically.
Batch processing—
and replace graphics and text when batch processing
custom groups of images or an entire site.
Image maps—
an overlay above the image. Enter a URL link and
browser status bar message for each hotspot.
JavaScript rollovers—
interactive rollovers and other graphics.
Slice images—
generate HTML table code to reassemble images and
add links.
Create drop shadows, bevels, glows, and
Bézier paths and shapes have bitmap brush
Retain the precise text control of
Directly view the graphic after each
Simplify file format, palette
Choose export settings, and find
Create editable, color-coded hotspots on
Automatically generate code for
Slice images on export. Automatically
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.
Getting Your Bearings
13
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.
14
Chapter 1
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.
Toolbox
(Windows only)
Status bar
Main toolbar (Windows only)
Modify toolbar
(Windows only)
View Controls
toolbar
(Windows only)
Object inspector Layers panel
VCR Animation
Controls
Styles panel
Fireworks on Windows
Behaviors inspector
Getting Your Bearings
15
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.
Press and hold a tool to reveal tool groups.
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.
Use this tool To Activate by
pressing
Select and drag
objects.
Pointer
Select objects behind
other objects.
Select
Behind
Discard or add canvas
area.
Crop
Export a portion of a
document.
Export Area
Select an object within
a group or points on a
path.
Subselect
Select a rectangular
pixel area in image edit
mode.
Marquee
Select an elliptical pixel
area in image edit
mode.
Ellipse
Marquee
Select a freeform pixel
area in image edit
mode.
Lasso
v
or
0 (zero)
v
or
0 (zero)
c
j
a or 1
m
m
l
16
Chapter 1
Polygon
Lasso
Select a polygonal pixel
area in image edit
mode.
l
Use this tool To Activate by
pressing
Use this tool To Activate by
pressing
Magic Wand
Hand
Magnify
Line
Pen
Rectangle
Ellipse
Polygon
Text
Pencil
Select pixel areas of
similar color in image
edit mode.
Pan the view of the
document.
Change view
magnification (zoom in
or zoom out).
Draw straight lines.
Draw paths by
anchoring points.
Draw rectangles,
rounded rectangles,
and squares.
Draw ellipses and
circles.
Draw polygons and
stars.
Create text blocks.
Draw one-pixel pencil
strokes.
w
spacebar
or
h
z
n
p
r
r
g
t
y
Brush
Redraw Path
Scale
Skew
Distort
Freeform
Reshape
Area
Path
Scrubber (+)
Path
Scrubber (–)
Eyedropper
Draw brush strokes
using Stroke panel
settings.
Redraw portions of a
selected path.
Resize and rotate
objects.
Slant and rotate
objects, and change
perspective.
Distort and rotate
objects.
Pull a path segment or
push a path segment
using a resizable
cursor.
Reshape a selected
path within the area of
the resizable cursor.
Increase stroke
characteristics
controlled by pressure
or speed.
Decrease stroke
characteristics
controlled by pressure
or speed.
Sample a color and
apply it to the active
color well.
b
b
q
q
q
f
f
u
u
I
Getting Your Bearings
17
Use this tool To Activate by
pressing
k
e
s
Paint Bucket
Eraser
Rubber
Stamp
Rectangle
Hotspot
Circle
Hotspot
Polygon
Hotspot
Fill objects with color,
gradients, or patterns
and adjust fills with
Paint Bucket handles.
Remove or replace
portions of image
objects and cut paths.
Clone portions of an
image object.
Draw URL hotspots in
the shape of rectangles
or squares.
Draw URL hotspots in
the shape of circles.
Draw URL hotspots in
the shape of irregular
polygons.
Main toolbar (Windows only)
Use To
Create a new document.
New
Open an existing document.
Open
Save the active document.
Save
Import a file.
Import
Export a file.
Export
Print the active document.
Print
Undo the last action.
Slice
18
Create rectangular slice
objects.
Chapter 1
Undo
Redo the last action.
Redo
Cut selected objects to the Clipboard.
Cut
Copy selected objects to the
Clipboard.
Copy
Use To
Paste
Object
Inspector
Paste the Clipboard’s contents into
the active document.
Open the Object inspector to view
properties for the selected object.
Open the Color Mixer.
Info panel
Dimensions of selected object
Options for choosing a color model
and document unit of measurement
Position of
bounding box’s
upper-left corner
point
Cursor position
Color Mixer
Open the Stroke panel.
Stroke
Open the Fill panel.
Fill
Open the Layers panel.
Layers
Access Fireworks Help.
Help
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.
Color of pixel beneath cursor
Alpha opacity measured in
increments from 0 to 255
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.
Getting Your Bearings
19
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.
Use To When
selecting
Clipping path
setting
Export Settings Assign export
Define how the
mask group
appears
presets to exported
slice objects
A mask
group.
Slice objects.
Object type
Link to URL
Alt tag
Color well
Slice name
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
Blending Mode Set an object's
blending mode
Anything
except
hotspot or
slice objects.
Anything
except
hotspot or
slice objects.
Link to URL Assign URLs Slice objects
Alt tag Assign alternative
tag to be used
when the image is
unavailable
Link target Specify the
window or frame
in which the link is
displayed
Color well Set color Slice objects
Hotspot shape Choose to change
the shape of a
hotspot object
Auto-name Choose default or
custom slice names
and hotspot
objects.
Slice objects
and hotspot
objects.
Slice objects
and hotspot
objects.
and hotspot
objects.
Hotspot
objects.
Slice objects.
Stroke Settings Control the
Transformation
Method
Group Type Define object
Chapter 1
20
interaction of an
object's stroke and
fill
Transform text as
pixels or as paths
group as mask or
traditional group
Any text or
path object.
Text.
Grouped
objects.
Opacity and blending mode in detail
Use the Object inspector to set opacity and blending
mode. Opacity and blending modes are important in
the process of compositing. Compositing is the process
of varying the transparency of two or more overlapping
objects to create a variety of graphic elements. An
opacity setting of 100 renders an object completely
opaque. Conversely, an opacity setting of 0 renders an
object completely transparent.
To Do this
Set the opacity of a
single object
Apply the same
opacity changes to
multiple objects
Return individual
objects to the
previous opacity
before grouping
Set the blending
mode of a single
object
Apply the same
blending mode to
multiple objects
Set the value using the opacity
slider.
Group the objects and alter
the group's opacity using the
opacity slider.
Ungroup the objects.
Choose from the blending
mode pop-up.
Group the objects and alter
the group's blending mode
using the blending mode popup.
Note: On the Macintosh, the View controls are located
at the lower-left corner of the document window.
Using the toolbars
Fireworks on Windows has several toolbars:
◆ Toolbox
◆ Main toolbar
◆ Modify toolbar
◆ View Controls toolbar
Each toolbar is moveable and dockable. This section
describes the default location and configuration of the
toolbars.
To show or hide the Toolbox, choose Window > Toolbox.
On Macintosh, use the menu to duplicate functions
found on the Windows Main toolbar and Modify
toolbar.
On Windows, choose Window > Toolbars and choose a
toolbar to show or hide individual toolbars.
Tool Options panel
Return individual
objects to the
previous blending
mode before
grouping
Ungroup the objects.
View Controls toolbar
Use the View Controls toolbar to change document
magnification and display mode. Click the Preview
Page button to view document dimensions and pixel
resolution.
Options related to the active tool
appear on the Tool Options panel.
Options related to the active tool appear on the Tool
Options panel.
The Tool Options panel contains settings for all
Fireworks tools. For example, the Pointer tool options,
shown above, include Mouse Highlight and Preview
Drag. Double-click a tool in the Toolbox to open and
close the Tool Options panel.
Getting Your Bearings 21
Swatches panel
Use the Options
pop-up to add,
replace, delete,
save, and sort
swatches, and
choose a color
palette.
When moving the cursor over the Swatches panel, the
cursor becomes an Eyedropper tool. Click a color to
apply it automatically to selected objects and color wells.
To choose a color, you need not access the Swatches
panel or Color Mixer. Just click any color well in
Fireworks, such as in the Toolbox, Fill panel, or Color
Mixer, to access all the swatches in the current color
palette. Then click to pick a color from the pop-up set of
color swatches.
Add a color to the
palette by clicking
in an empty area.
The Swatches panel shows Fireworks’ current color
palette. Choose from this palette when designing
graphics. Select a preset palette or import a palette using
the Options pop-up. Use the Save Swatches command
to save custom palettes for later import. Extract the color
table from a GIF image using the Add Swatches
command.
To Choose this from the
Options pop-up
Add swatches to the
panel
Replace all swatches with
an external set
Save swatches to an
external set
Delete all swatches from
the panel
Add Swatches.
Replace Swatches.
Save Swatches.
Clear Swatches.
Eyedropper tool
Color picker tool
Pop-up color swatches
Change to Macintosh,
Windows, Web 216, or
Grayscale palette
Sort the swatches by
color
Use the custom color
palette from the Export
Preview
Chapter 122
A palette.
Sort by Color.
Current Export Palette.
Color Mixer
To Do this
Select stroke
or Fill color.
Swap stroke and fill colors.
Use default colors.
Choose a color mode
from the Options popup.
Pick a color from the
color bar.
Set color values.
Create colors using the Color Mixer, then apply colors
to strokes, fills, effects, and text. Use the Options pop-up
to select a color mode: RGB, Hexadecimal, CMY, HSB,
or grayscale. The Color Mixer automatically responds to
the type of object selected. For example, select an object
with a fill and no stroke and the Color Mixer
automatically selects the Fill color well. Conversely,
select an object with a stroke and no fill and the Color
Mixer automatically selects the Stroke color well.
To Do this
Apply color to selected
text
Switch color modes Choose the desired color
Switch brush and fill color Click the Swap Colors
Revert to default colors Click the Default Colors
Define colors using the
system color picker
Change color models in
the color bar only
Choose a new color. The
Fill color well is selected
automatically.
mode from the Color
Mixer Options pop-up.
button.
button.
Double-click color well.
Point to the color bar
and use Shift-click
(Windows) or Optionclick (Macintosh).
Apply color changes to
the selected object’s
brush stroke
Apply color changes to
the selected object’s fill
Apply color changes to an
object having only a
brush stroke
Apply color changes to an
object having only a fill
Apply color changes to
the selected object’s
effect
Click the Stroke color
well before choosing a
new color.
Click the Fill color well
before choosing a new
color.
Choose a new color. The
Stroke color well is
selected automatically.
Choose a new color. The
Fill color well is selected
automatically.
Click the Effect color well
in the Effect panel
before choosing a new
color.
Getting Your Bearings 23
Stroke panel
Fill panel
Save, edit, name, and
delete strokes using the
Options pop-up.
Choose a brush stroke.
Choose stroke-specific
settings.
Preview and apply
the brush stroke.
Use the Stroke panel to design and modify strokes, as
well as alter the appearance of paths that have already
been drawn. Changing stroke settings affects selected
paths and paths drawn after the settings are changed.
To choose a color in the Stroke panel, you need not
access the Swatches panel. Just click the pop-up to the
right of the color well to access all the swatches in the
current color palette. Then click to pick a color from the
pop-up set of color swatches.
Choose Edit Stroke from the Options pop-up to open
the Edit Stroke dialog box. The Options, Shape, and
Sensitivity panels within the Edit Stroke dialog box
control current stroke attributes. Save, delete, and
rename custom strokes using the Options pop-up.
Click the show/hide triangle at the bottom of the Stroke
panel to show and hide the Stroke preview.
Checking Auto-Apply automatically updates selected
path and text objects as you change stroke settings. If
the preview is hidden, Auto-Apply is automatically
turned on. If the preview is visible and Auto-Apply is
turned off, click Apply to manually apply changes to
selected paths.
Save, edit, name, and
delete gradients using
the Options pop-up.
Choose a fill.
Choose fill-specific
settings.
Preview and apply
a fill.
Use the Fill panel to control how objects are filled.
Choose from the available fill categories, and then choose
one of the many fill types from within each category.
To choose a color in the Fill panel, you need not access
the Swatches panel. Just click the pop-up to the right of
the color well to access all the swatches in the current
color palette. Then click to pick a color from the pop-up
set of color swatches.
Modify any fill by choosing a texture and intensity, fill
color, anti-aliasing, feather, or hard edge. Check
Transparent for a transparent fill texture and enter a
texture amount greater than zero. Use the Fill Options
pop-up to save, name, and delete Gradient fills.
Click the show/hide triangle at the bottom of the Fill
panel to show and hide the Fill preview.
Check Auto-Apply to automatically update the fill of
selected objects as you change fill settings. If the preview
is hidden, Auto-Apply is automatically turned on. If the
preview is visible and Auto-Apply is turned off, click
Apply to manually apply fill changes to selected objects.
Chapter 124
Effect panel
Save, edit, name, and
delete effects using
the Options pop-up.
Choose an effect.
Choose effectspecific settings.
Preview and apply
an effect.
Use the Effect panel to apply and modify Live Effects in
your document. Effects applied using the Effect panel
are maintained and updated when the affected object is
altered. For example, if you apply an edge bevel to a
rectangular object and then make the object circular, the
beveled edge adjusts accordingly. Modify effects after
applying them to an object by changing settings in the
Effect panel. Effects that can be altered in this way are
known as Live Effects.
To choose a color in the Effect panel, you need not access
the Swatches panel. Just click the pop-up to the right of
the color well to access all the swatches in the current
color palette. Then click to pick a color from the pop-up
set of color swatches.
Like the Stroke and Fill panels, the Effect panel has
controls for selecting effect type and name. Use the
Options pop-up to save, name, and delete custom
effect settings.
Choose a single effect from the Effect Category pop-up,
or choose Multiple to apply more than one effect.
Click the show/hide triangle at the bottom of the Effect
panel to show and hide the Effect preview.
Check Auto-Apply to automatically update the effect of
selected objects as you change effect settings. If the
preview is hidden, Auto-Apply is automatically turned
on. If the preview is visible and Auto-Apply is turned
off, click Apply to manually apply effect changes to
selected objects.
Getting Your Bearings 25
Text Editor
Use the Text Editor to create and edit text. Unlike text in
many other applications, Fireworks text is always
editable all the time. Edit text quickly and easily after
custom effects have been applied.
To choose a color in the Text Editor, you need not access
the Swatches panel. Just click the pop-up to the right of
the color well to access all the swatches in the current
color palette. Then click to pick a color from the pop-up
set of color swatches.
Set horizontal scaling and baseline shift.
Adjust kerning and leading.
Set font, size, and style.
Check to anti-alias text.
Add color to text.
Open the Text Editor by clicking on a document with
the Text tool, drawing a rectangular text block with the
Text tool, double-clicking a text container, or selecting a
text block and choosing Text > Editor.
After closing the Text Editor, resize the text block by
pulling or pushing handles. Move selected text blocks
with the Pointer tool.
Apply an underline to text.
Set orientation, alignment, and flow.
Check to automatically kern text.
Type or edit text.
Apply changes to the document
without closing the text editor.
Chapter 126
Layers panel and Frames panel
Navigate quickly to
a specific frame.
Change global view and lock
settings; create, delete, and rename
layers using the Options pop-up.
Drag to rearrange
layers. Double-click
to rename a layer.
Drag to assign selected
objects to another layer.
Share objects across frames.
Create, delete, and duplicate frames.
Distribute items across frames. Copy
selected items to specific frames.
Drag to rearrange
frames.
See “Icon buttons”
on page 28.
Lock and unlock individual layers.
Show or hide individual layers.
Use the Layers and Frames panels to organize and
animate your illustration. Layers divide an
illustration into discrete planes, as though the
components of the illustration were drawn on
separate tracing paper overlays.
See “Icon buttons”
on page 28.
Activate and
control onion
skinning.
Use the Layers panel to manage multilayered
documents. The Options pop-up includes commands
for creating, deleting, and renaming layers and
commands for viewing and locking all layers. Choose
Share Layer to share the selected layer across all frames
in the document. Choose Single-Layer Editing to
prevent accidental changes to layers other than the
selected layer.
The Web Layer, reserved for web objects such as
hotspots and slices, and cannot be renamed or deleted.
To show or hide individual layers, click the Show/Hide
icon at the left of the layer name. When the icon is
visible, the layer is also visible. Similarly, clicking the
Lock/Unlock icon locks and unlocks individual layers.
When a layer is locked, items on that layer may not be
moved or deleted.
To move a selected object to another layer, drag the
“Selected Objects” icon.
Use the Frame pop-up to quickly choose a different
frame in your document without switching to the
Frames panel.
Getting Your Bearings 27
The Frames panel is the key to Fireworks animation
and rollovers. Use the Frames panel and the Animation
panel in the Export Preview to create animated GIFs.
The Frames panel lists each frame of an animation and
has controls for adding and deleting frames. Use the
Options pop-up to add, delete, duplicate, and copy
objects to specific frames.
Icon buttons
Use the buttons at the bottom right of the Layers and
Frames panels as shortcuts to create, distribute,
duplicate, or delete layers or frames. Select a frame or
layer and then click a button, or drag and drop a frame
or layer onto a button.
Delete
New/Duplicate
Distribute to Frames
To Do this
To Do this
Duplicate selected
objects onto a new
layer or frame
Delete a current
layer or frame
Delete currently
selected objects
Drag the square “Selected
Objects” icon from the right
column of the Layers or
Frames panel to the New/
Duplicate button.
Click the Delete icon
or
Drag the current layer or
frame name to the Delete
button.
Drag the square “Selected
Objects” icon from the right
column of the Layers or
Frames panel to the Delete
button.
Find & Replace panel
Distribute a selected
group of objects
across frames
Distribute an entire
layer's objects to
specific frames
Create a new blank
layer or frame
Duplicate a current
layer or frame
Chapter 128
Click the Distribute button
after selecting objects
or
Drag the square “Selected
Objects” icon from the right
column of the Layers or
Frames panel to the Distribute
button.
Drag a layer name to the
Distribute button.
Click the New/Duplicate
button.
Drag the current layer or
frame name to the New/
Duplicate button.
Use Find & Replace to search for and replace various
elements of a document, such as text, URLs, fonts, and
colors. Find & Replace can search the current document
or multiple files. Also, Fireworks can track changes
made during a Find & Replace operation and store a log
of the changes in the Project Log panel.
Project Log panel
The Project Log panel stores a log of changes made
during Find & Replace operations when searching
multiple files.
Any documents changed during a Find & Replace are
automatically recorded in the Project Log. Use the
Project Log to navigate through selected files, export
selected files using their last export settings, or select files
to be batch processed. Add files to the Project Log to
search them during a batch process or find and replace.
Behaviors inspector
The Behaviors inspector lists all behaviors assigned to
the currently selected web object. Use the Behaviors
inspector to edit or remove existing behaviors.
URL Manager
Add, load, and save URLs using the URL Manager.
URL stands for Uniform Resource Locator, which is an
address of a specific page or file on the Internet.
Fireworks can import URLs from any HTML file.
Fireworks can read bookmark files saved with Netscape
Navigator (typically stored in a file named
Bookmarks.htm) or favorites files saved with Microsoft
Internet Explorer.
When a document is first opened, Fireworks adds all
URLs in the document to the URL Manager's History
pop-up. Assign URLs to selected objects using the
History pop-up or by clicking a URL in the Library
window. URLs in the History pop-up are not retained
when the application is closed. To save the active
History URL into the URL Library, click the Add to
Library Button next to the History pop-up.
Use the Behaviors inspector to add actions to specific
user events, which are called behaviors. Behaviors are
assigned to web objects, either hotspots or slices. A
typical behavior is a pop-up status message assigned to
a hotspot region so that the message is displayed
(action) when the user points to it with the mouse
cursor (event).
Getting Your Bearings 29
Working with the URL Manager
To Do this
To Do this
Add a Fireworks
file's URLs to the
URL Manager
Determine what URL
is assigned to an
object
Assign a URL to an
object
Add a URL to the
URL Library
Edit URL in the URL
Library
Open the file. All URLs are
automatically added to the
History pop-up.
Select the object and note the
URL’s name in the History
field.
Select the object and choose a
URL from the History pop-up
or
Select the object and click a
URL in the Library window.
1.Enter or select the URL in
the History pop-up.
2.Click the Add to Library
button (+) to the right of
the History pop-up
or
1.Choose Add URL from the
Options pop-up
2.Enter a URL in the New URL
dialog box
or
Choose Add History to Library
from the Options pop-up
1.Select the URL in the URL
Library.
2.Choose Edit URL from the
Options pop-up.
Import a URL Library 1. Choose Import URLs from
Create a new URL
Library
the Options pop-up.
2.Select desired library, HTML,
or bookmark file.
1.Choose New URL Library
from the Options pop-up.
2.Name the new URL Library
in the New URL Library
dialog box.
or
Place an HTML bookmark file
in the Fireworks 2/Settings/
URL Libraries folder.
Styles panel
Delete a URL in the
URL Library
Export current URL
Library
Chapter 130
1.Select the URL in the URL
Library.
2.Choose Delete URL from the
Options pop-up.
1.Choose Export URLs from
the Options pop-up.
2.Name the exported library
and choose a destination.
The Styles panel provides a library of built-in styles for
text and graphics, which are viewed as large or small
graphical icons. A style can include any attribute such as
font, point size, color, fill, stroke, or effect. More than one
style can be applied to any individual object.
Use the Styles panel to create new styles, or edit or delete
existing styles. Style libraries are stored in Fireworks
Styles files. Import or export styles to or from a
Fireworks document.
Loading...