Lisa A. Bucki
A DIVISION OF COURSE TECHNOLOGY
Macromedia
Fireworks MX
2004
Macromedia
Fireworks MX
2004
®
®
© 2003 by Premier Press, a division of Course Technology. All rights reserved. No part of this
book may be reproduced or transmitted in any form or by any means, electronic or mechanical,
including photocopying, recording, or by any information storage or retrieval system without
written permission from Premier Press, except for the inclusion of brief quotations in a review.
The Premier Press logo and related trade dress are trademarks of Premier Press and
may not be used without written permission.
SVP, Retail Strategic Market Group: Andy Shafran
Publisher: Stacy L. Hiquet
Senior Marketing Manager: Sarah O’Donnell
Marketing Manager: Heather Hurley
Manager of Editorial Services: Heather Talbot
Acquisitions Editor: Arlie Hartman
Associate Marketing Manager: Kristin Eisenzopf
Project Editor/Copy Editor: Justak Literary Services, Inc.
Technical Reviewer: Brian Proffitt
Retail Market Coordinator: Sarah Dubois
Interior Layout: William Hartman
Cover Designer: Mike Tanamachi
Indexer: Sharon Hilgenberg
Proofreader: Barbara Potter
Fireworks is a registered trademark of Macromedia, Inc.; Macintosh, Mac, and Mac OS X are
registered trademarks of Apple Computer, Inc.; and Windows is a registered trademark of
Microsoft Corporation in the United States and other countries.
All other trademarks are the property of their respective owners.
Important: Premier Press cannot provide software support. Please contact the appropriate
software manufacturer’s technical support line or Web site for assistance.
Premier Press and the author have attempted throughout this book to distinguish proprietary
trademarks from descriptive terms by following the capitalization style used by the
manufacturer.
Information contained in this book has been obtained by Premier Press from sources believed
to be reliable. However, because of the possibility of human or mechanical error by our
sources, Premier Press, or others, the Publisher does not guarantee the accuracy, adequacy, or
completeness of any information and is not responsible for any errors or omissions or the
results obtained from use of such information. Readers should be particularly aware of the fact
that the Internet is an ever-changing entity. Some facts may have changed since this book went
to press.
ISBN: 1-59200-120-3
Library of Congress Catalog Card Number: 2003094427
Printed in the United States of America
03 04 05 06 07 BH 10 9 8 7 6 5 4 3 2 1
Premier Press, a division of Course Technology
25 Thomson Place
Boston, MA 02210
To my brother, Joe, who inspires
creativity in everyone around him.
G
eeks like me love to get their hands on new tech gear and software. That’s why I
was thrilled when Publisher Stacy Hiquet and Acquisitions Editor Arlie Hartman
asked me to write this book about Fireworks. Thanks to both of you for extending
this fascinating and challenging opportunity. I want to extend warm thanks to Project
Editor Marta Justak. It’s always a relief to know that an expert is shepherding my
manuscript on the editorial trail. Please also join me in thanking Technical Reviewer
Brian Proffitt, who reviewed every word and every step to ensure the clarity and
accuracy of the text and illustrations. Finally, I want to express my appreciation to
the production team, Bill Hartman, Sharon Hilgenberg, and Barb Potter for creating
a topnotch finished product.
Acknowledgments
Acknowledgments
A
n author, trainer, and publishing consultant, Lisa A. Bucki has been involved in
the computer book business for more than 12 years. She wrote Keynote Fast & Easy,
iTunes 4 Fast & Easy, Mac OS X Version 10.2 Jaguar Fast & Easy, FileMaker Pro 6 for
the Mac Fast & Easy, iPhoto 2 Fast & Easy, Adobe Photoshop 7 Fast & Easy, Adobe
Photoshop 7 Digital Darkroom, and Managing with Microsoft Project 2002 for
Premier Press. She also has written or contributed to dozens of additional books
and multimedia tutorials, as well as spearheading or developing more than 100
computer and trade titles during her association with Macmillan. Bucki currently
also serves as a consultant and trainer in western North Carolina.
About the Author
About the Author
Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . viii
PART I
GETTING STARTED . . . . . . . . . . . . . . . . . . . . . . . . . . 1
Chapter 1 Getting Started with Fireworks MX 2004 . . . . . . . . . . . . . . . . . . . . . 3
Chapter 2 Customizing Fireworks MX 2004 . . . . . . . . . . . . . . . . . . . . . . . . . . 29
PART II
DESIGNING GRAPHICS . . . . . . . . . . . . . . . . . . . . . 45
Chapter 3 Getting Started with Graphics . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47
Chapter 4 Working with Vector Objects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67
Chapter 5 Working with Bitmaps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99
Chapter 6 Changing Colors and Fills . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 131
Chapter 7 Using Text in Graphics. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 171
Chapter 8 Managing Images by Using Layers . . . . . . . . . . . . . . . . . . . . . . . . 193
Chapter 9 Enhancing the Appearance of Objects . . . . . . . . . . . . . . . . . . . . . 213
Chapter 10 Optimizing and Exporting Graphics . . . . . . . . . . . . . . . . . . . . . . . 235
Contents at a Glance
Contents at a Glance
PART III
DESIGNING INTERACTIVE WEB GRAPHICS . . . . 265
Chapter 11 Creating Hotspots and Slices . . . . . . . . . . . . . . . . . . . . . . . . . . . . 267
Chapter 12 Adding Rollovers to Graphics . . . . . . . . . . . . . . . . . . . . . . . . . . . . 291
Chapter 13 Adding Buttons to a Graphic . . . . . . . . . . . . . . . . . . . . . . . . . . . . 315
Chapter 14 Displaying Options by Using Pop-up Menus . . . . . . . . . . . . . . . . 335
Chapter 15 Adding Animation to a Graphic . . . . . . . . . . . . . . . . . . . . . . . . . . 355
Chapter 16 Automating Tasks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 379
Appendix A Creating an XML Document . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 403
Index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 409
vii
CONTENTS AT A GLANCE
F
ireworks MX 2004 from Macromedia sets the standard for Web graphic
development packages. With its companion products—Flash and Dreamweaver—
any user can develop robust and attractive Web graphics and pages. The latest
version, Fireworks MX 2004, packs in even more tools that will appeal to beginners
and experienced Web authors.
Macromedia Fireworks MX 2004 Fast & Easy Web Development equips you with all
the skills necessary to create Web graphics. The book’s clean, visual format walks
novice developers through key Fireworks MX 2004 operations. It covers how to
create and edit a variety of graphics, as well as how to include such advanced
functionality as rollovers, buttons, pop-up menus, and animation to graphics. This
book also explains how to optimize your images for the desired Web application.
Who Should Read This Book
This book addresses the particular needs of novice Fireworks users. If you have
skills with another graphics package, this book will help get you up and running
with Fireworks in a hurry. The book clearly explains key concepts and presents tasks
in a simple step-by-step format. Using this book as your guide, you will become
proficient in Fireworks MX 2004, and you will be able to create smart Web graphics
that download faster and look snappier. Visitors to your Web pages will enjoy its
enhanced performance and increased sophistication. If these are your goals, then
this book is certainly for you!
Introduction
Introduction
Getting Started
Getting Started
PART I
Chapter 1
Getting Started with Fireworks MX 2004 3
Chapter 2
Customizing Fireworks MX 2004 29
This page intentionally left blank
Getting Started
with Fireworks
MX 2004
Fireworks MX 2004 is valuable software for developing Web
site content. Whether you are a professional Web developer or
a Web graphic designer, you’ll find the features of Fireworks
MX 2004 user-friendly and very handy.
In this chapter, you’ll learn about these aspects of Fireworks
MX 2004:
Understanding and starting Fireworks
Navigating the Fireworks work area
Finding help resources
1
Getting Started
with Fireworks
MX 2004
1
Understanding and Starting
Fireworks
Fireworks MX 2004 provides you with an integrated
environment for working with all elements of a Web site,
including graphics, animations, and interactivity. You can
either import graphics from other applications or create them
directly in Fireworks MX. You can also optimize graphics for
the Web and export them to commonly used file formats,
such as GIF or JPEG. In addition to still graphics, you can
create animations.
You can use Fireworks MX 2004 to add interactivity to your
Web site by creating various HTML and JavaScript controls,
such as
• Buttons
• Navigation bars
• Rollovers
• Pop-up menus
Furthermore, Fireworks MX 2004 enables you to work in
conjunction with other applications, such as Dreamweaver MX
2004, Flash MX 2004, and Microsoft FrontPage. You can easily
import various file formats into Fireworks MX 2004 and also
export them to other formats.
4
CHAPTER 1: GETTING STARTED WITH FIREWORKS MX 2004
5
UNDERSTANDING AND STARTING FIREWORKS
When you’re ready to start creating and editing Web graphics,
start the Fireworks program. To launch Fireworks, follow these
steps:
1.
Click on Start. The Start
menu will appear.
2.
Point to All Programs. The
All Programs submenu will
appear.
3.
Point to Macromedia. The
Macromedia submenu will
appear.
4.
Click on Macromedia
Fireworks MX 2004.
Macromedia Fireworks MX 2004
will launch, and its workspace
will appear.
NOTE
Choose File, Exit to quit
Fireworks when you’ve
finished working.
Working with the Start Page
Fireworks MX 2004 contains a new feature called the Start
Page. The Start Page appears in the center of the workspace
and offers shortcuts for common operations.
6
CHAPTER 1: GETTING STARTED WITH FIREWORKS MX 2004
• Open a recently used file.
Click on the icon for a
Fireworks document so that
you can open the document
in the workspace.
• Open any Fireworks
document. Click on this icon
to display the Open dialog
box so that you can navigate
to and open a file.
• Get help with Fireworks.
Click on one of the choices at
the bottom of the Start Page
to learn more about using
Fireworks.
• Create a new file. Click on
this icon to create a new,
blank file in Fireworks.
• Go to Macromedia’s Web
site to learn more. Click here
to launch your Web browser
and connect with helpful
resources online.
NOTE
Any time you close all
files in Fireworks, the
Start Page reappears.
7
THE FIREWORKS MX 2004 WORKSPACE
Fireworks MX 2004 Workspace
The Fireworks MX 2004 workspace provides a variety of tools
and features that you can use to build and manipulate Web
graphic files. Take time now to familiarize yourself with the
following workspace features:
• Title bar. Displays the name
and magnification setting of
the currently active Fireworks
MX 2004 document.
• Menu bar. Contains several
menus, such as the File, Edit,
and View menus. The menus
organize commands for easy
access. You’ll learn to use
these menus in relevant
sections of this book.
• Document window. Contains
the main work area.
• Tools panel. Contains the
tools that you use to work
with documents.
• Property Inspector. Controls
properties of tools, objects,
and documents.
• Other panels. Used for other
purposes, such as managing
colors and objects.
The following sections describe
the workspace components in
greater detail.
The Document Window
The files you create in Fireworks MX 2004 are called
documents. You can create a new document or work with an
existing one. In the Fireworks workspace, a document
appears in the Document window. The following list explains
the components of the Document window:
• File tabs. When you have multiple documents open, the
document names appear here. Click on a document name
to switch to that document.
8
CHAPTER 1: GETTING STARTED WITH FIREWORKS MX 2004
• Canvas. Holds the document
contents.
• Preview choices. Click on
Preview, 2-Up, or 4-Up to
display the document based
on the current optimization
settings. The 2-Up and 4-Up
choices split the preview in
two and four parts,
respectively. Use these split
previews to compare
different optimization
settings.
NOTE
See Chapter 10,
“Optimizing and
Exporting Graphics,” to
learn more about using
the Preview tabs.
9
THE FIREWORKS MX 2004 WORKSPACE
• Quick Export button.
Exports your document to
another file format for use in
other applications.
• Frame controls. Used to
navigate the frames present
in the document.
• Page Preview box. Click on
this box to display a preview
of the dimensions and
resolution of the document.
• Magnification list. Click on
this box to choose a
magnification percentage for
the document.
NOTE
Use frames to create animations in Fireworks MX 2004.
See Chapter 15, “Adding Animation to Graphics,” to
learn about frames and animations.
The Tools Panel
Fireworks MX 2004 provides a wide variety of tools you can
use to create and modify your Web graphics. The Tools panel
organizes the available tools and, by default, appears at the
left side of the Fireworks window.
10
CHAPTER 1: GETTING STARTED WITH FIREWORKS MX 2004
The Tools panel groups tools in
the following sections:
• Select. Tools used to select
objects.
• Bitmap. Tools used to select,
create, and edit bitmap
objects.
• Vector. Tools used to select,
create, and edit vector
objects.
• Web. Tools used to work with
slices and hotspots.
• Colors. Options to specify fill
and stroke colors.
• View. Tools used to control
the view of your document.
Some of the tools in the Tools
panel include a small triangle in
the lower-right corner. This
indicates that the tool actually
offers a tool group. Each tool
group holds multiple tools that
perform similar tasks. For
NOTE
Using vector objects
whenever possible makes
your images easier to edit
because you can easily
resize a vector object at
any time.
11
THE FIREWORKS MX 2004 WORKSPACE
example, the Marquee tool group contains rectangular and
Oval Marquee tools, which you use to create selection
marquees in different shapes.
To select a tool from a tool
group, follow these steps:
1.
Click on the tool group icon
(with a small triangle) in the
Tools panel and hold the mouse
button. A menu of the tools in
the tool group will appear.
2.
Drag the mouse pointer to
the desired tool and release the
mouse button. The desired tool
will become active.
The Property Inspector
The Property Inspector, as the
name suggests, enables you to
control the properties of the
currently active tool, the
selected object, or the
document.
The options in the panel change,
based on the current selection,
as described here:
• If you select a tool in the
Tools panel, the Property
Inspector displays the options
available for the selected
tool.
12
CHAPTER 1: GETTING STARTED WITH FIREWORKS MX 2004
• If you select an object in the
Document window, the
Property Inspector displays
the properties assigned to
the selected object. For
example, if a text object is
selected, the Property
Inspector displays text
properties, such as the font,
size, and color.
• If no object or tool is
selected, the Property
Inspector displays the
document properties, which
include canvas color, canvas
size, image size, and default
export options.
TIP
You can collapse the
Property Inspector to half
of its normal height by
clicking the expander
arrow in the lower-right
corner.
13
THE FIREWORKS MX 2004 WORKSPACE
Other Panels
In addition to the Tools panel and the Property Inspector,
Fireworks MX 2004 offers a variety of other panels, each
offering a number of different settings and options. Use the
Window menu to open and close panels by choosing the
desired panel name from the menu. The following list
introduces the additional panels:
• Layers panel. Enables you to
work with the layers of a
document.
• Swatches panel. Enables you
to control the color of a
selected object.
• Styles panel. Enables you
to apply a predefined
combination of various
effects, known as styles, to
the selected object. You also
can create your own styles.
NOTE
You also can import new styles that you’ve obtained
online. Use the Import Styles command on the panel
Options pop-up menu. See the later section called
“Working with Panels” to learn how to open the panel
Options pop-up menu.
14
CHAPTER 1: GETTING STARTED WITH FIREWORKS MX 2004
• Color Mixer panel. Enables
you to view and change the
active color.
• Info panel. Displays the
coordinates of the mouse
pointer and the color value of
the pixel that is directly under
the mouse pointer.
• Frames panel. Enables you to
create animations.
• URL panel. Displays
frequently used URLs in your
document.
• Align panel. Enables you to
align objects in the Document
window with greater
precision.
• History panel. Lists recent
tasks that you have
performed in a document and
enables you to undo a group
of tasks.
15
THE FIREWORKS MX 2004 WORKSPACE
• Library panel. Enables you to
store frequently used
elements as reusable
symbols.
• Behaviors panel. Enables you
to add interactivity to a
graphic.
• Find panel. Enables you to
find and replace elements.
• Optimize panel. Specifies
optimization settings for the
object to be exported.
• Auto Shapes panel. Enables
you to draw easy-to-
manipulate special shapes
(called Auto Shapes) in the
document.
NOTE
Later chapters explain
how to use the various
panels in greater detail.
Working with Panels
By default, many of the Fireworks panels appear to be docked
at the right side of the workspace. By default, each panel
appears by itself in a section of the docking area. However,
you can create a panel group to give you easier access to
frequently used panels. The panel group displays a tab for
each panel in the group; simply click on a panels tab to display
the panel settings. Based on your requirements, you can
manipulate the panels as follows:
• Dock and undock panels and panel groups
• Rearrange a panel group by adding and removing panels
• Expand and collapse panels and panel groups
To undock a panel or a panel group, follow these steps:
16
CHAPTER 1: GETTING STARTED WITH FIREWORKS MX 2004
1.
Move the mouse pointer to
the panel gripper in the upper-
left corner of the panel or the
panel group. The mouse pointer
will change to the move pointer
(a four-headed arrow).