ADOBE Fireworks CS4 User Manual

Using

ADOBE® FIREWORKS® CS4

This user guide is protected under copyright law, furnished for informational use only, is subject to change without notice, and should not be construed as a commitment by Adobe Systems Incorporated. Adobe Systems Incorporated assumes no responsibility or liability for any errors or inaccuracies that may appear in the informational content contained in this guide.

This user guide is licensed for use under the terms of the Creative Commons Attribution Non-Commercial 3.0 License. This License allows users to copy, distribute, and transmit the user guide for noncommercial purposes only so long as (1) proper attribution to Adobe is given as the owner of the user guide; and (2) any reuse or distribution of the user guide contains a notice that use of the user guide is governed by these terms. The best way to provide notice is to include the following link. To view a copy of this license, visit

http://creativecommons.org/licenses/by-nc-sa/3.0/

Adobe, the Adobe logo, Adobe AIR, Acrobat, ActionScript, Creative Suite, Director, Dreamweaver, Fireworks, Flash, Flex, Flex Builder, Freehand, GoLive, HomeSite, Illustrator, InCopy, InDesign, Photoshop, Reader, Version Cue, and XMP are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States and/or other countries.

Apple, Macintosh, and Mac OS are trademarks of Apple Inc., registered in the United States and other countries. Microsoft, Windows, and Windows Vista are either registered trademarks or trademarks of Microsoft Corporation in the United States and/or other countries. All other trademarks are the property of their respective owners.

Updated Information/Additional Third Party Code Information available at http://www.adobe.com/go/thirdparty.

This product includes software developed by the Apache Software Foundation (http://www.apache.org/).

The Proximity/Merriam-Webster Inc. Database © Copyright 1990. The Proximity/Franklin Electronic Publishers Database © Copyright 1994. © Copyright 1990, 1994, 1997 All Rights Reserved. Proximity Technology Inc.

This Program was written with MacApp®: ©1985-1988 Apple Computer, Inc. APPLE COMPUTER, INC. MAKES NO WARRANTIES WHATSOEVER, EITHER EXPRESS OR IMPLIED, REGARDING THIS PRODUCT, INCLUDING WARRANTIES WITH RESPECT TO ITS MERCHANTABILITY OR ITS FITNESS FOR ANY PARTICULAR PURPOSE. The MacApp software is proprietary to Apple Computer, Inc. and is licensed to Adobe for distribution only for use in combination with Adobe Fireworks.

PANTONE® colors displayed here may not match PANTONE-identified standards. Consult current PANTONE Color Publications for accurate color. PANTONE® and other Pantone, Inc. trademarks are the property of Pantone, Inc. © Pantone, Inc., 2008.

Portions contributed by Focoltone Colour System.

Portions produced under Dainippon Ink and Chemical, Inc. copyright of color-data-base derived from Sample Books.

Sorenson Spark™ video compression and decompression technology licensed from Sorenson Media, Inc.

MPEG Layer-3 audio coding technology licensed from Fraunhofer IIS and Thomson.

Adobe Systems Incorporated, 345 Park Avenue, San Jose, California 95110, USA.

Notice to U.S. Government End Users. The Software and Documentation are “Commercial Items,” as that term is defined at 48 C.F.R. §2.101, consisting of “Commercial Computer Software” and “Commercial Computer Software Documentation,” as such terms are used in 48 C.F.R. §12.212 or 48 C.F.R. §227.7202, as applicable. Consistent with 48 C.F.R. §12.212 or 48 C.F.R. §§227.7202-1 through 227.7202-4, as applicable, the Commercial Computer Software and Commercial Computer Software Documentation are being licensed to U.S. Government end users (a) only as Commercial Items and (b) with only those rights as are granted to all other end users pursuant to the terms and conditions herein. Unpublished-rights reserved under the copyright laws of the United States. Adobe Systems Incorporated, 345 Park Avenue, San Jose, CA 95110-2704, USA. For U.S. Government End Users, Adobe agrees to comply with all applicable equal opportunity laws including, if appropriate, the provisions of Executive Order 11246, as amended, Section 402 of the Vietnam Era Veterans Readjustment Assistance Act of 1974 (38 USC 4212), and Section 503 of the Rehabilitation Act of 1973, as amended, and the regulations at 41 CFR Parts 60-1 through 60-60, 60-250, and 60-741. The affirmative action clause and regulations contained in the preceding sentence shall be incorporated by reference.

Last updated 3/8/2011

Chapter 1: Resources

Activation and registration . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1

Help and support . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2

Services, downloads, and extras . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3

What's new in Fireworks CS4 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4

Chapter 2: Fireworks basics

About working in Fireworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6

Vector and bitmap graphics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6

Creating a new Fireworks document . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7

Opening and importing files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8

Create Fireworks PNG files from HTML files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10

Insert objects into a Fireworks document . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10

Saving Fireworks files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13

iii

Chapter 3: Workspace

Workspace basics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15

Navigate and view documents . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27

Change the canvas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30

Undo and repeat multiple actions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34

Chapter 4: Selecting and transforming objects

Select objects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36

Modify a selection . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37

Select pixels . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38

Edit selected objects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44

9-slice scaling . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49

Organize multiple objects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51

Chapter 5: Working with bitmaps

Creating bitmaps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54

Editing bitmaps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55

Retouching bitmaps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57

Adjust bitmap color and tone . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61

Blurring and sharpening bitmaps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68

Add noise to an image . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70

Chapter 6: Working with vector objects

Basic shapes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71

Auto Shapes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73

Free-form shapes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77

Special vector-editing techniques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83

Last updated 3/8/2011

USING FIREWORKS CS4

Contents

Chapter 7: Working with text

Enter text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90

Format and edit text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91

Chapter 8: Applying color, strokes, and fills

Applying colors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102

Kuler panel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 108

Applying strokes and fills . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110

Chapter 9: Using Live Filters

Applying Live Filters . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 117

Edit and customize Live Filters . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 121

Chapter 10: Layers, masking, and blending

Layers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 123

Masking . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 128

Blending and transparency . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 139

Chapter 11: Styles, symbols, and URLs

Styles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 143

Symbols . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 146

URLs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 154

Chapter 12: Slices, rollovers, and hotspots

Creating and editing slices . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 158

Interactive slices . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 163

Preparing slices for export . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 168

Hotspots and image maps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 171

Chapter 13: Creating buttons and pop-up menus

Navigation basics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 175

Create button symbols . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 175

Edit button symbols . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 178

Pop-up menus . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 180

Chapter 14: Prototyping websites and application interfaces

Prototyping workflow . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 185

Working with Fireworks pages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 186

Creating CSS-based layouts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 189

Prototyping Flex applications . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 191

Prototyping Adobe AIR applications . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 194

Chapter 15: Creating animations

Animation basics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 196

Create animation symbols . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 197

Edit animation symbols . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 197

States . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 199

Manipulate states . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 200

About onion skinning . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 202

Last updated 3/8/2011

USING FIREWORKS CS4

Contents

Tweening . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 202

Preview an animation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 202

Optimize an animation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 203

Work with existing animations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 204

Create twist and fade animations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 204

Chapter 16: Creating slide shows

Build and arrange a slide show . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 206

Customize a slide show . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 207

Create a custom Fireworks album player . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 209

Chapter 17: Optimizing and exporting

Use the Export Wizard . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 212

Use the Image Preview . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 212

Optimize in the workspace . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 215

Optimize GIF, PNG, TIFF, BMP, and PICT files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 218

Optimize JPEGs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 225

Export from the workspace . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 227

Send a Fireworks document as an e-mail attachment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 237

Chapter 18: Using Fireworks with other applications

Working with Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 238

Working with HomeSite, GoLive, and other HTML editors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 246

Working with Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 248

Working with FreeHand and Illustrator . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 253

Working with Photoshop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 257

Working with Director . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 261

About Adobe Bridge . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 263

Share image metadata with Adobe XMP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 264

Chapter 19: Automating tasks

Finding and replacing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 267

Select the source for the search . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 267

Set options for finding and replacing in multiple files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 268

Find and replace text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 268

Find and replace fonts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 268

Find and replace colors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 269

Find and replace URLs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 269

Find and replace non-websafe colors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 269

Batch-processing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 269

Using commands for batch-processing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 273

Extending Fireworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 275

Scripting . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 275

Manage commands . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 277

Chapter 20: Preferences and keyboard shortcuts

Set preferences . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 279

Select and customize keyboard shortcuts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 282

Last updated 3/8/2011

USING FIREWORKS CS4

Contents

Work with configuration files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 283

About reinstalling Fireworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 284

View package contents (Mac OS only) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 285

Index ...............................................................................................................286

Last updated 3/8/2011

Chapter 1: Resources

Adobe® Fireworks® delivers an efficient design environment for rapidly prototyping websites and user interfaces, and for creating and optimizing images for the web. Fireworks offers the flexibility to edit both vector and bitmap images, a common library of prebuilt assets, and time-saving integration with Adobe Photoshop®, Adobe Illustrator®, Adobe Dreamweaver®, and Adobe Flash® Professional software.

Activation and registration

Help with installation

For help with installation issues, see the Installation Support Center at www.adobe.com/go/cs4install.

License activation

During the installation process, your Adobe software contacts Adobe to complete the license activation process. No personal data is transmitted. For more information on product activation, visit the Adobe website at

www.adobe.com/go/activation.

A single-user retail license activation supports two computers. For example, you can install the product on a desktop computer at work and on a laptop computer at home. If you want to install the software on a third computer, first deactivate it on one of the other two computers. Choose Help

> Deactivate.

Register

❖ To register, follow the on-screen instructions in the Registration dialog box, which appears after you install the

software.

If you postpone registration, you can register at any time by choosing Help > Registration.

Adobe Product Improvement Program

After you have used your Adobe software a certain number of times, a dialog box appears, asking whether you want to participate in the Adobe Product Improvement Program.

If you choose to participate, data about your use of Adobe software is sent to Adobe. No personal information is recorded or sent. The Adobe Product Improvement Program only collects information about the features and tools that you use in the software and how often you use them.

You can opt in to or opt out of the program at any time:

• To participate, choose Help > Adobe Product Improvement Program and click Yes, Participate.

• To stop participating, choose Help > Adobe Product Improvement Program and click No, Thank You.

Last updated 3/8/2011

USING FIREWORKS CS4

Resources

ReadMe

A ReadMe file for your software is available on-line and on the installation disc. Open the file to read important information about topics such as the following:

• System requirements

• Installation (including uninstalling the software)

• Activation and registration

• Font installation

• Troubleshooting

• Customer support

• Legal notices

Help and support

Community Help

Community Help is an integrated environment on Adobe.com that gives you access to community-generated content moderated by Adobe and industry experts. Comments from users help guide you to an answer.

Community Help draws on a number of resources, including:

• Videos, tutorials, tips and techniques, blogs, articles, and examples for designers and developers.

• Complete on-line product Help, which is updated regularly by the Adobe documentation team.

• All other content on Adobe.com, including knowledgebase articles, downloads and updates, Developer

Connection, and more.

Choose Help > product name Help in the application to access the Help and Support page, the portal to all of the Community Help content for your product. You can also use the Help search field in some Creative Suite 4 applications, or press F1 (Windows), to access Community Help for your product.

The sites searched by the default Community Help search engine are hand-selected and reviewed for quality by Adobe and Adobe Community Experts. Adobe experts also work to ensure that the top search results include a mixture of different kinds of content, including results from on-line product Help.

For more information on using Community Help, see http://help.adobe.com/en_US/CommunityHelp/.

For a video overview of Community Help, see www.adobe.com/go/lrvid4117_xp.

For frequently asked questions about Community Help, see http://community.adobe.com/help/profile/faq.html

Product Help

Adobe provides a comprehensive user guide for each product in several formats, including on-line product Help, PDF, and printed book. Results from on-line product Help are included in your results whenever you search Community Help.

If you’re connected to the Internet, the Help menu within the product opens the product Help and Support page by default. This page is a portal to all of the Community Help content for the product. If you want to consult or search on-line product Help only, you can access it by clicking the product Help link in the upper-right corner of the Help and Support page. Be sure to select the This Help System Only option before you do your search.

Last updated 3/8/2011

USING FIREWORKS CS4

Resources

If you’re not connected to the Internet, the Help menu within the product opens local Help, a subset of the content available in on-line product Help. Because local Help is not as complete or up-to-date as on-line product Help, Adobe recommends that you use the PDF version of product Help if you want to stay offline. A downloadable PDF of complete product Help is available from two places:

• The product’s Help and Support page (upper-right corner of the page)

• Local and web Help (top of the Help interface)

For more information on accessing product help, see http://help.adobe.com/en_US/CommunityHelp/.

If you are working in Adobe InDesign, Photoshop, Illustrator, Flash, Fireworks, or Dreamweaver, and you want to turn off Community Help so that local Help opens by default, do the following:

1 Open the Connections panel (Window > Extensions > Connections).

2 From the Connections panel menu , select Offline Options.

3 Select Keep Me Offline and click OK.

Note: When you disable web services from the Connections panel, all other web services (such as Adobe Kuler and Adobe ConnectNow) are also disabled.

Printed resources

Printed versions of the complete on-line product Help are available for the cost of shipping and handling at

www.adobe.com/go/store.

Support resources

Visit the Adobe Support website at www.adobe.com/support to learn about free and paid technical support options.

Services, downloads, and extras

You can enhance your product by integrating a variety of services, plug-ins, and extensions in your product. You can also download samples and other assets to help you get your work done.

Adobe creative on-line services

Adobe® Creative Suite® 4 includes new on-line features that bring the power of the web to your desktop. Use these features to connect with the community, collaborate, and get more from your Adobe tools. Powerful creative on-line services let you complete tasks ranging from color matching to data conferencing. The services seamlessly integrate with desktop applications so you can quickly enhance existing workflows. Some services offer full or partial functionality when you’re offline too.

Visit Adobe.com to learn more about available services. Some Creative Suite 4 applications include these initial offerings:

Kuler™ panel Quickly create, share, and explore color themes on-line.

Adobe® ConnectNow Collaborate with dispersed working teams over the web, sharing voice, data, and multimedia.

Resource Central Instantly access tutorials, sample files, and extensions for Adobe digital video applications.

For information on managing your services, see the Adobe website at www.adobe.com/go/learn_creativeservices_en.

Last updated 3/8/2011

USING FIREWORKS CS4

Resources

Adobe Exchange

Visit the Adobe Exchange at www.adobe.com/go/exchange to download samples as well as thousands of plug-ins and extensions from Adobe and third-party developers. The plug-ins and extensions can help you automate tasks, customize workflows, create specialized professional effects, and more.

Adobe downloads

Visit www.adobe.com/go/downloads to find free updates, tryouts, and other useful software.

Adobe Labs

Adobe Labs at www.adobe.com/go/labs gives you the opportunity to experience and evaluate new and emerging technologies and products from Adobe. At Adobe Labs, you have access to resources such as these:

• Prerelease software and technologies

• Code samples and best practices to accelerate your learning

• Early versions of product and technical documentation

• Forums, wiki-based content, and other collaborative resources to help you interact with like-minded users.

Adobe Labs fosters a collaborative software development process. In this environment, customers quickly become productive with new products and technologies. Adobe Labs is also a forum for early feedback. The Adobe development teams use this feedback to create software that meets the needs and expectations of the community.

Adobe TV

Visit Adobe TV at http://tv.adobe.com to view instructional and inspirational videos.

Extras

The installation disc contains a variety of extras to help you make the most of your Adobe software. Some extras are installed on your computer during the setup process; others are located on the disc.

To view the extras installed during the setup process, navigate to the application folder on your computer.

• Windows®: [startup drive]\Program Files\Adobe\[Adobe application]

• Mac OS®: [startup drive]/Applications/[Adobe application]

To view the extras on the disc, navigate to the Goodies folder in your language folder on the disc. Example:

• /English/Goodies/

What's new in Fireworks CS4

Improved performance, stability

Work faster, smarter with Fireworks overall performance enhancements from file open and save, to symbol update and intensive bitmap and vector operations.

Last updated 3/8/2011

USING FIREWORKS CS4

Resources

New user interface

Switch from other Creative Suite applications—like Photoshop, Illustrator, and Flash—with the ease and familiarity of universal user interface design.

CSS based layouts

Design complete Web pages in Fireworks’ robust graphic environment and then export web standards compliant, CSS-based layouts, complete with external style sheets in one step. Start with one of the six most common layouts and integrate foreground and background graphics with automatic margin and padding detection. Drop HTML rich symbols on your Fireworks layouts to specify headings, links, and form properties for precise CSS control.

PDF Export

Generate high-fidelity, interactive, secure PDF documents from your Fireworks design comps for enhanced client communication.

Adobe Type Engine

Produce superior type designs with the enhanced typesetting capabilities of the Adobe Type Engine, familiar to users of Photoshop and Illustrator, and now in Fireworks. Import or copy/paste double-byte characters from Adobe Illustrator or Photoshop without loss of fidelity. Float text inside a path for high impact text logos.

Live styles

Take a Fireworks object or text with professionally designed styles or your own custom collection. Update applied effects, colors, and text attributes by modifying a single style source.

Workspace improvements

Smart Guides for swift, accurate positioning and measurement of guides and elements on the canvas: heads-up display lets you know where you are on the canvas as you drag guides in place. In-place symbol editing for precise symbol refinement in context with the rest of your design; expansive 9-slice scaling tool now applies to any object on the canvas, not just symbols.

Adobe AIR authoring

Create your Adobe AIR prototype directly within Fireworks as a click-through mock-up, ready to be deployed to HTML and CSS, Flex, or SWF.

Last updated 3/8/2011

Chapter 2: Fireworks basics

About working in Fireworks

Adobe® Fireworks® is a versatile program for creating, editing, and optimizing web graphics. You can create and edit both bitmap and vector images, design web effects such as rollovers and pop-up menus, crop and optimize graphics to reduce their file size, and save time by automating repetitive tasks. You can export or save a document as a JPEG file, GIF file, or file of another format. These files can be saved along with HTML files containing HTML tables and JavaScript code so you can use them on the web.

For a video tutorial that introduces Fireworks basics, see www.adobe.com/go/lrvid4032_fw.

Draw and edit vector and bitmap objects

The Fireworks Tools panel includes distinct sections containing tools for drawing and editing vectors and bitmaps. The tool you select determines whether the object you create is a vector or a bitmap. After drawing an object or text, you can use a wide array of tools, effects, commands, and techniques to enhance your graphics or to create interactive navigation buttons.

You can also import and edit graphics in JPEG, GIF, PNG, PSD, and many other file formats.

Add interactivity to graphics

Slices and hotspots are web objects that specify interactive areas in a web graphic. Slices cut an image into exportable sections to which you can apply rollover behaviors, animation, and Uniform Resource Locator (URL) links. On a web page, each slice appears in a table cell.

Use the drag-and-drop rollover handles on slices and hotspots to quickly assign swap image and rollover behaviors to graphics. Use the Fireworks Button Editor and Pop-up Menu Editor to build special interactive graphics for navigating websites.

Optimize and export graphics

Use the powerful optimization features of Fireworks to achieve the right balance between file size and acceptable visual quality for exported graphics. The type of optimization you choose depends on the needs of your users and the content.

After you optimize your graphics, the next step is to export them for use on the web. From your Fireworks source PNG document, you can export files of a number of types, including JPEG, GIF, animated GIF, and HTML tables containing sliced images in multiple file types.

Vector and bitmap graphics

Computers display graphics in either vector or bitmap format. Understanding the difference between the two formats helps you understand Fireworks, which contains both vector and bitmap tools and is capable of opening or importing both formats.

Last updated 3/8/2011

USING FIREWORKS CS4

Fireworks basics

About vector graphics

Vector graphics render images using lines and curves (vectors) that include color and position information. For example, the image of a leaf can be defined by a series of points that describe the outline of the leaf. The color of the leaf is determined by the color of its outline (the stroke) and the color of the area enclosed by the outline (the fill).

Vector graphics are resolution-independent. That means the quality of a vector graphic's appearance won't change when you change its color; move, resize, or reshape it; or when the resolution of the output device changes.

About bitmap graphics

Bitmap graphics are composed of dots (pixels) arranged in a grid. Your computer screen is a large grid of pixels. In a bitmap version of the leaf, the image is determined by the location and color value of each pixel in the grid. Each pixel is assigned a color. When viewed at the correct resolution, the dots fit together like tiles in a mosaic.

When you edit a bitmap graphic, you modify pixels rather than lines and curves. These bitmap graphics are resolutiondependent, which means that the data describing the image is fixed to a grid of a particular size. Enlarging a bitmap graphic redistributes the pixels in the grid, which can make the edges of the image appear ragged. Displaying a bitmap graphic on an output device with a lower resolution than the image itself can also degrade the image's quality.

Creating a new Fireworks document

New documents in Fireworks are saved as Portable Network Graphic (PNG) documents. PNG is the native file format for Fireworks.

Graphics created in Fireworks can be exported to or saved in several web and graphic formats. Regardless of the optimization and export settings you select, the original Fireworks PNG file is preserved to allow easy editing later.

Last updated 3/8/2011

USING FIREWORKS CS4

Fireworks basics

Create a new document

1 Select File > New.

The New Document dialog box opens.

2 Enter document settings and click OK.

Note: Use the Custom color box pop-up window to select a custom canvas color.

Create a new document the same size as an object on the Clipboard

1 Copy an object to the Clipboard from another Fireworks document, a web browser, or from any application that is

acceptable for pasting.

2 Select File > New.

The New Document dialog box opens with the width and height dimensions of the object on the Clipboard.

3 Set the resolution and canvas color, and click OK.

4 Select Edit > Paste to paste the object from the Clipboard into the new document.

Opening and importing files

Note: When you import a file from Adobe Dreamweaver®, Fireworks preserves many, but not all JavaScript behaviors. If Fireworks supports a particular behavior, it recognizes that behavior and maintains it when you move a file back to Dreamweaver.

Open a Fireworks document

❖ Select File > Open and select the file.

To open a file without overwriting the previous version, select Open As Untitled, and then save the file using a different name.

Open a recently closed file

1 Select File > Open Recent.

2 Select a file from the submenu.

Last updated 3/8/2011

USING FIREWORKS CS4

Fireworks basics

Open a recently closed file when no files are open

❖ Click the file name on the Start page.

Open graphics created in other applications

You can open files created in other applications or file formats, including Photoshop®, Adobe FreeHand®, Adobe Illustrator®, WBMP, EPS, JPEG, GIF, and animated GIF files.

When you open a file format other than PNG using File > Open, you create a new Fireworks PNG document based on the file you open. You can use all of the features of Fireworks to edit the image. You can then either select Save As to save your work as a new Fireworks PNG file or as another file format.

In some cases, you can save the file in its original format. If you do this, the image flattens to a single layer, and you will be unable to edit the Fireworks-specific features you added to the image.

The following file formats can be saved directly from Fireworks: Fireworks PNG, GIF, animated GIF, JPEG, BMP, WBMP, TIFF, SWF, AI, PSD, and PICT (Mac only).

Note: Fireworks saves 16-bit TIFF images at 24-bit color depth.

Animated GIFs

• Import an animated GIF as an animation symbol and then edit and move all the elements of the animation as a

single unit. Use the Document Library panel to create new instances of the symbol.

Note: When you import an animated GIF, the state delay setting defaults to 0.07 seconds. If necessary, use the States panel to restore the original timing.

• Open an animated GIF as you would open a normal GIF file. Each element of the GIF is placed as a separate image

in its own Fireworks state. You can convert the graphic to an animation symbol in Fireworks.

EPS files

Fireworks opens most EPS files as flattened bitmap images in which all objects are combined on a single layer. Some EPS files exported from Adobe Illustrator retain their vector information.

PSD files

Fireworks can open PSD files created in Photoshop and preserve most PSD features, including hierarchical layers, layer effects, and commonly used blend modes.

WBMP files

Fireworks can open WBMP files, which are 1-bit (monochrome) files optimized for mobile computing devices. This format is for use on Wireless Application Protocol (WAP) pages.

You can use the Import Multiple Files extension to import multiple selected files into new pages of a Fireworks PNG

file. This utility helps you aggregate your project files created in earlier versions of Fireworks. You can also import flattened PNG file, PSD, AI, BMP, Freehand, GIF, animated GIF, JPEG, PICT, and TIFF formats. You can download this extension from

http://www.adobe.com/cfusion/exchange/index.cfm?event=extensionDetail&loc=en_us&extid=1581018.

Last updated 3/8/2011

USING FIREWORKS CS4

Fireworks basics

Create Fireworks PNG files from HTML files

Fireworks can open and import HTML content created in other applications that contain basic HTML table elements.

Open all tables of an HTML file

1 Select File > Reconstitute Table.

2 Select the HTML file that contains the tables you want to open, and click Open.

Each of the tables opens in its own document window.

Open only the first table of an HTML file

1 Select File > Open.

2 Select the HTML file that contains the table you want to open, and click Open.

The first table in the HTML file opens in a new document window.

Import the first table of an HTML file into an open Fireworks document

1 Select File > Import.

2 Select the HTML file you want to import from, and click Open.

3 Click to place the insertion point where you want the imported table to appear.

Note: Fireworks can import documents that use UTF-8 encoding and those that are written in XHTML.

Insert objects into a Fireworks document

Drag an image or text into Fireworks

You can drag vector objects, bitmap images, or text from any application that supports dragging.

❖ From the other application, drag the object or text into Fireworks.

Paste into Fireworks

Pasting an object copied from another application into Fireworks places the object in the center of the active document.

Text or objects in any of these formats can be pasted from the Clipboard:

• Adobe FreeHand 7 or later

• Adobe Illustrator

• PNG

• PICT (Mac OS)

• DIB (Windows)

• BMP (Windows)

• ASCII text

Last updated 3/8/2011

USING FIREWORKS CS4

Fireworks basics

• EPS

• WBMP

• TXT

• RTF

1 In the other application, copy the object or text that you want to paste.

2 In Fireworks, paste the object or text into your document.

Location of pasted objects

The placement of the pasted object depends on what is selected:

• If at least one object on a single layer is selected, the pasted object is placed in front of (stacked directly above) the

selected object on the same layer.

• If the layer itself is selected and either no objects or all objects are selected, the pasted object is placed in front of

(stacked directly above) the topmost object on the same layer.

• If two or more objects on more than one layer are selected, the pasted object is placed in front of (stacked directly

above) the topmost object in the topmost layer.

• If the Web Layer or an object on the Web Layer is selected, the pasted object is placed in front of (stacked above)

all other objects on the bottommost layer.

Note: The Web Layer is a special layer that contains all web objects. It always remains at the top of the Layers panel.

Resample pasted objects

Resampling adds pixels to or subtracts pixels from a resized bitmap to match the appearance of the original bitmap as closely as possible. Resampling a bitmap to a higher resolution typically causes little loss of quality. Resampling to a lower resolution always causes data loss and usually results in a drop in quality.

Resample a bitmap object by pasting

1 Copy the bitmap to the Clipboard in Fireworks or another program.

2 Select Edit > Paste in Fireworks.

3 If the bitmap image on the Clipboard has a different resolution than the current document does, choose a resample

option.

Resample Maintains the original width and height of the pasted bitmap, adding, or subtracting pixels as necessary.

Don't Resample Maintains all the original pixels, which may make the relative size of the pasted image larger or

smaller than expected.

Import a PNG file into a Fireworks document layer

When you import Fireworks PNG files into the current layer of the active Fireworks document, hotspot objects and slice objects are placed on the document's Web Layer. Fireworks retains the proportions of the imported image.

1 In the Layers panel, select the layer into which you want to import the file.

2 Select File > Import to open the Import dialog box.

3 Navigate to the file you want to import and click Open.

4 On the canvas, position the import pointer where you want to place the upper left corner of the image.

Last updated 3/8/2011

USING FIREWORKS CS4

Fireworks basics

5 Do one of the following:

• Click to import the full-size image.

• Drag the import pointer to resize the image as you import.

Import from a digital camera or scanner

You can import images from a digital camera or scanner only if it is TWAIN compliant (Windows) or uses built-in Image Capture capability (Mac OS). Images imported into Fireworks from a digital camera or scanner open as new documents.

Before you try to import images into Fireworks, install all required software drivers, modules, and plug-ins for the camera or scanner.

The Plug-ins folder is located inside the Fireworks application folder. In Mac OS, Fireworks automatically looks for Photoshop Acquire plug-ins in that folder.

Direct Fireworks to Photoshop Acquire plug-ins

1 In Fireworks, select Edit > Preferences (Windows) or Fireworks > Preferences (Mac OS).

2 Click the Plug-ins category.

3 Select Photoshop Plug-Ins and navigate to the folder containing the plug-ins.

If the Select The Photoshop Plug-ins Folder (Windows) or Choose A Folder (Mac OS) dialog box doesn't open automatically, browse to the folder.

Import an image from a digital camera (Windows)

1 Connect the camera to your computer.

2 In Fireworks, select File > Scan, and then select either Twain Acquire or Twain Select.

3 Select the source for the images and the images you want to import.

The user interface for your camera software appears.

4 Follow the instructions to apply settings.

Import an image from a digital camera (Mac OS)

1 Connect the camera to your computer.

2 In Fireworks, select File > Acquire, and then select either Camera Acquire or Camera Select.

3 Select the camera and the images you want to import.

4 Follow the instructions to apply settings.

Import an image from a scanner

1 Connect the scanner to your computer.

2 Install the software that accompanies the scanner if you have not already done so.

3 Do one of the following:

• (Windows) In Fireworks, select File > Scan, and then select either Twain Acquire or Twain Select.

• (Mac OS) In Fireworks, select File > Acquire, and then select either Twain Acquire or Twain Select.

Last updated 3/8/2011

USING FIREWORKS CS4

Fireworks basics

Note: For most TWAIN modules or Photoshop Acquire plug-ins, additional dialog boxes prompt you to set other options.

4 Follow the instructions to apply settings.

Saving Fireworks files

When you create a document or open files in formats like PSD or HTML, the File > Save command creates a Fireworks PNG file. Fireworks PNG files have the following advantages:

• The source PNG file is always editable. You can go back and make additional changes even after you export the file

for use on the web.

• You can slice complex graphics into pieces in the PNG file and export them as multiple files with different file

formats and various optimization settings.

If Fireworks takes time to save a complex document, you can edit other open documents while the save operation

completes.

Save a Fireworks PNG file for use in an earlier version

1 Select File > Export.

2 Browse to the location where you want to save the file.

3 If the Fireworks file has more than one page, select Pages To Files in the Export pop-up menu.

4 Select either Images or Fireworks PNG in the Export As pop-up menu. If you select Images, each page is saved in

the default file format. This file format can be set using the Optimize panel. For more information see

and exporting” on page 212.

All objects on the top-level layers are saved in the export. Items on sublayers are not exported.

“Optimizing

Save all open documents

You can save all open documents even while continuing to work on them and specify filenames for any unnamed documents. Documents that have changed since the last save appear with an asterisk (*) against the filename on the document tab.

❖ Select Commands > Save All.

Note: You can use the Fireworks Auto Backup utility to automatically back up all open Fireworks documents. Download the utility from Adobe AIR Marketplace at

http://www.adobe.com/cfusion/exchange/index.cfm?event=extensionDetail&extid=1698332.

Save documents in other formats

If you use File > Open to open a file in a format other than PNG, you can later select File > Save As to save your work as a new Fireworks PNG file, or you can select a different format.

For the following file types, you can choose File > Save to save the document in its original format: Fireworks PNG, GIF, animated GIF, JPEG, BMP, WBMP, TIFF, SWF, AI, PSD, and PICT (Mac OS only). Fireworks saves 16-bit TIFF images at 24-bit color depth.

Last updated 3/8/2011

USING FIREWORKS CS4

Fireworks basics

Note: If you save a PNG file as a bitmap file such as a GIF or JPEG, the graphic objects you manipulated in the PNG are no longer available in the bitmap file. To revise the image, edit the source PNG file and then export it again.

Add a picture frame

1 Select Commands > Creative > Add Picture Frame.

2 Select a pattern and set the frame size.

3 Click OK.

Reset warning messages

If you have disabled warning messages from reappearing, you can re-enable the messages.

❖ Select Commands > Reset Warning Dialogs.

Take screenshot (Windows only)

1 Select Commands > Take Screenshot.

2 Switch to the window you want to take a screenshot of.

3 Click OK and then drag to select the area of the window.

4 Paste the clipboard contents on to the canvas or any image editing application.

Last updated 3/8/2011

Chapter 3: Workspace

Workspace basics

Fireworks workspace overview

When you open a document in Adobe® Fireworks® for the first time, the workspace includes the Tools panel, Property inspector, menus, and other panels. The Tools panel, on the left of the screen, contains labeled categories, including bitmap, vector, and web tool groups. The Property inspector appears along the bottom of the document by default and initially displays document properties. It then changes to display properties for a newly selected tool or currently selected object as you work in the document. The panels are initially docked in groups along the right side of the screen. The document window appears in the center of the program.

The Start page

When you start Fireworks without opening a document, the Fireworks Start page appears in the work environment. The Start page gives you quick access to Fireworks tutorials, recent files, and Fireworks Exchange, where you can add new capabilities to some Fireworks features. To disable the start page, click Don't Show Again when the Start page opens.

Last updated 3/8/2011

USING FIREWORKS CS4

Workspace

About Fireworks panels

Panels are floating controls that help you edit aspects of a selected object or elements of the document. Panels let you work on states, layers, symbols, color swatches, and more. Each panel is draggable, so you can group panels in custom arrangements.

Optimize panel Lets you manage the settings that control size and type of a file and work with the color palette of the

file or slice.

Layers panel Organizes the structure of a document and contains options for creating, deleting, and manipulating

layers.

Common Library panel Displays the contents of the Common Library folder, which contains symbols. You can easily

drag instances of these symbols from the Document Library panel to your document.

Pages panel Displays the pages in the current file and contains options for manipulating pages.

States panel Displays the states in the current file and includes options for creating animations.

History panel Lists commands you have recently used so that you can quickly undo and redo them. In addition, you

can select multiple actions, and then save and reuse them as commands.

Auto Shapes panel Contains Auto Shapes that are not displayed in the Tools panel.

Styles panel Lets you store and reuse combinations of object characteristics or select a stock style.

Document Library panel Contains graphic symbols, button symbols, and animation symbols that are already in the

current Fireworks document. You can easily drag instances of these symbols from the Document Library panel to your document. You can make global changes to all instances by modifying only the symbol.

URL panel Lets you create libraries containing frequently used URLs.

Color Mixer panel Lets you create new colors to add to the color palette of the current document or to apply to selected

objects.

Swatches panel Manages the color palette of the current document.

Info panel Provides information about the dimensions of selected objects and the exact coordinates of the pointer as

you move it across the canvas.

Behaviors panel Manages behaviors, which determine what hotspots and slices do in response to mouse movement.

Find panel Lets you search for and replace elements such as text, URLs, fonts, and colors in a document or multiple

documents.

Align panel Contains controls for aligning and distributing objects on the canvas.

Auto Shape Properties panel Lets you change the properties of an Auto Shape after you insert one into your

document.

Color Palette panel (Window > Others) Enables you to create and swap color palettes, export custom ACT color

swatches, explore various color schemes and access commonly used controls for choosing colors.

Image Editing (Window > Others) Organizes common tools and options used for bitmap editing into one panel.

Path panel (Window > Others) Provides quick access to many path-related commands.

Special Characters (Window > Others) Displays the special characters that can be used in text blocks.

Symbol Properties Manages the customizable properties of graphic symbols.

Last updated 3/8/2011

USING FIREWORKS CS4

Workspace

Workspace overview

You create and manipulate your documents and files using various elements, such as panels, bars, and windows. Any arrangement of these elements is called a workspace. The workspaces of the different applications in Adobe® Creative Suite® 4 share the same appearance so that you can move between the applications easily. You can also adapt each application to the way you work by selecting from several preset workspaces or by creating one of your own.

Although the default workspace layout varies in different products, you manipulate the elements much the same way in all of them.

B DC

Default Illustrator workspace A. Tabbed Document windows B. Application bar C. Workspace switcher D. Panel title bar E. Control panel F. Tools panel G. Collapse To Icons button H. Four panel groups in vertical dock

• The Application bar across the top contains a workspace switcher, menus (Windows only), and other application

controls. On the Mac for certain products, you can show or hide it using the Window menu.

• The Tools panel contains tools for creating and editing images, artwork, page elements, and so on. Related tools are

grouped.

• The Control panel displays options for the currently selected tool. The Control panel is also known as the options

bar in Photoshop. (Adobe Flash®, Adobe Dreamweaver®, and Adobe Fireworks® have no Control panel.)

• Flash, Dreamweaver, and Fireworks have a Property inspector that displays options for the currently selected

element or tool.

• The Document window displays the file you’re working on. Document windows can be tabbed and, in certain cases,

grouped and docked.

Last updated 3/8/2011

USING FIREWORKS CS4

Workspace

• Panels help you monitor and modify your work. Examples include the Timeline in Flash, the Layers panel in Adobe

Photoshop®, and the CSS Styles panel in Dreamweaver. Panels can be grouped, stacked, or docked.

• On the Mac, the Application frame groups all the workspace elements in a single, integrated window that lets you

treat the application as a single unit. When you move or resize the Application frame or any of its elements, all the elements within it respond to each other so none overlap. Panels don’t disappear when you switch applications or when you accidentally click out of the application. If you work with two or more applications, you can position each application side by side on the screen or on multiple monitors. If you prefer the traditional, free-form user interface of the Mac, you can turn off the Application frame. In Adobe Illustrator®, for example, select Window > Application Frame to toggle it on or off. (In Flash, the Application frame is on permanently. Dreamweaver does not use an Application frame.)

Hide or show all panels

• (Illustrator, Adobe InCopy®, Adobe InDesign®, Photoshop, Fireworks)To hide or show all panels, including the

Tools panel and Control panel, press

• (Illustrator, InCopy, InDesign, Photoshop) To hide or show all panels except the Tools panel and Control panel,

press Shift+Tab.

You can temporarily display hidden panels if Auto-Show Hidden Panels is selected in Interface preferences. It’s always on in Illustrator. Move the pointer to the edge of the application window (Windows®) or to the edge of the

monitor (Mac

OS®) and hover over the strip that appears.

Tab.

• (Flash, Dreamweaver, Fireworks) To hide or show all panels, press F4.

Display panel options

❖ Click the panel menu icon in the upper-right corner of the panel.

You can open a panel menu even when the panel is minimized.

(Illustrator) Adjust panel brightness

❖ In User Interface preferences, move the Brightness slider. This control affects all panels, including the Control

panel.

Reconfigure the Tools panel

You can display the tools in the Tools panel in a single column, or side by side in two columns. (This feature is not available in the Tools panel in Fireworks and Flash.)

In InDesign and InCopy, you also can switch from single-column to double-column (or single-row) display by setting

an option in Interface preferences.

❖ Click the double arrow at the top of the Tools panel.

Manage windows and panels

You can create a custom workspace by moving and manipulating Document windows and panels. You can also save workspaces and switch among them.

Note: The following examples use Photoshop for demonstration purposes. The workspace behaves the same in all the products.

Last updated 3/8/2011

USING FIREWORKS CS4

Workspace

A B

Narrow blue drop zone indicates Color panel will be docked on its own above the Layers panel group. A. Title bar B. Tab C. Drop zone

In Photoshop, you can change the font size of the text in the Control panel, in the panels, and in tool tips. Choose a

size from the UI Font Size menu in Interface preferences.

Manage Document windows

When you open more than one file, the Document windows are tabbed.

• To rearrange the order of tabbed Document windows, drag a window’s tab to a new location in the group.

• To undock a Document window from a group of windows, drag the window’s tab out of the group.

• To dock a Document window to a separate group of Document windows, drag the window into the group.

Note: Dreamweaver does not support docking and undocking Document windows. Use the Document window’s Minimize button to create floating windows.

• To create groups of stacked or tiled documents, drag the window to one of the drop zones along the top, bottom, or

sides of another window. You can also select a layout for the group by using the Layout button on the Application bar.

Note: Some products do not support this functionality. However, your product may have Cascade and Tile commands in the Window menu to help you lay out your documents.

• To switch to another document in a tabbed group when dragging a selection, drag the selection over the document’s

tab for a moment.

Note: Some products do not support this functionality.

Dock and undock panels

A dock is a collection of panels or panel groups displayed together, generally in a vertical orientation. You dock and undock panels by moving them into and out of a dock.

Note: Docking is not the same as stacking. A stack is a collection of floating panels or panel groups, joined top to bottom.

• To dock a panel, drag it by its tab into the dock, at the top, bottom, or in between other panels.

• To dock a panel group, drag it by its title bar (the solid empty bar above the tabs) into the dock.

• To remove a panel or panel group, drag it out of the dock by its tab or title bar. You can drag it into another dock

or make it free-floating.

Last updated 3/8/2011

USING FIREWORKS CS4

Workspace

Navigator panel being dragged out to new dock, indicated by blue vertical highlight

Navigator panel now in its own dock

You can prevent panels from filling all the space in a dock. Drag the bottom edge of the dock up so it no longer meets

the edge of the workspace.

Move panels

As you move panels, you see blue highlighted drop zones, areas where you can move the panel. For example, you can move a panel up or down in a dock by dragging it to the narrow blue drop zone above or below another panel. If you drag to an area that is not a drop zone, the panel floats freely in the workspace.

• To move a panel, drag it by its tab.

• To move a panel group or a stack of floating panels, drag the title bar.

Press Ctrl (Windows) or Command (Mac OS) while moving a panel to prevent it from docking. Press Esc while

moving the panel to cancel the operation.

Note: The dock is stationary and can’t be moved. However, you can create panel groups or stacks and move them anywhere.

Add and remove panels

If you remove all panels from a dock, the dock disappears. You can create a dock by moving panels to the right edge of the workspace until a drop zone appears.

• To remove a panel, right-click (Windows) or Control-click (Mac) its tab and then select Close, or deselect it from

the Window menu.

• To add a panel, select it from the Window menu and dock it wherever you want.

Last updated 3/8/2011

USING FIREWORKS CS4

Workspace

Manipulate panel groups

• To move a panel into a group, drag the panel’s tab to the highlighted drop zone in the group.

Adding a panel to a panel group

• To rearrange panels in a group, drag a panel’s tab to a new location in the group.

• To remove a panel from a group so that it floats freely, drag the panel by its tab outside the group.

• To move a group, drag the title bar (the area above the tabs).

Stack floating panels

When you drag a panel out of its dock but not into a drop zone, the panel floats freely. The floating panel allows you to position it anywhere in the workspace. You can stack floating panels or panel groups so that they move as a unit when you drag the topmost title bar. (Panels that are part of a dock cannot be stacked or moved as a unit in this way.)

Free-floating stacked panels

• To stack floating panels, drag a panel by its tab to the drop zone at the bottom of another panel.

• To change the stacking order, drag a panel up or down by its tab.

Note: Be sure to release the tab over the narrow drop zone between panels, rather than the broad drop zone in a title bar.

• To remove a panel or panel group from the stack, so that it floats by itself, drag it out by its tab or title bar.

Resize panels

• To minimize or maximize a panel, panel group, or stack of panels, double-click a tab. You can also single-click the

tab area (the empty space next to the tabs).

• To resize a panel, drag any side of the panel. Some panels, such as the Color panel in Photoshop, cannot be resized

by dragging.

Manipulate panels collapsed to icons

You can collapse panels to icons to reduce clutter on the workspace. In some cases, panels are collapsed to icons in the default workspace.

Last updated 3/8/2011

USING FIREWORKS CS4

Workspace

Panels collapsed to icons

Panels expanded from icons

• To collapse or expand all panel icons in a dock, click the double arrow at the top of the dock.

• To expand a single panel icon, click it.

• To resize panel icons so that you see only the icons (and not the labels), adjust the width of the dock until the text

disappears. To display the icon text again, make the dock wider.

• To collapse an expanded panel back to its icon, click its tab, its icon, or the double arrow in the panel’s title bar.

In some products, if you select Auto-Collapse Icon Panels from the Interface or User Interface Options preferences, an expanded panel icon collapses automatically when you click away from it.

• To add a floating panel or panel group to an icon dock, drag it in by its tab or title bar. (Panels are automatically

collapsed to icons when added to an icon dock.)

• To move a panel icon (or panel icon group), drag the icon. You can drag panel icons up and down in the dock, into

other docks (where they appear in the panel style of that dock), or outside the dock (where they appear as floating, expanded panels).

Restore the default workspace

• Select the default, Essentials workspace from the workspace switcher in the Application bar.

• (Photoshop) Select Window > Workspace > Essentials (Default).

• (InDesign, InCopy) Select Window > Workspace > Reset [Workspace Name].

Last updated 3/8/2011

USING FIREWORKS CS4

Workspace

Manage connections to web services

In Adobe® Creative Suite® 4, the Connections panel lets you manage connections to web services and the locally installed extensions that interact with them. The Connections panel itself is an extension. Additional extensions installed with Creative Suite applications include the following:

Adobe ConnectNow Collaborate with dispersed working teams over the web, sharing voice, data, and multimedia.

Kuler™ panel Quickly create, share, and explore color themes online.

Search for Help In the upper-right corner of applications, enter search terms to access Community Help. Community

Help includes Adobe product Help, plus additional content from the design and production communities.

Visit www.adobe.com to learn about additional services and extensions.

Log into Adobe web services

Regardless of which application you use to access the Connections panel, logging in automatically connects you to services such as ConnectNow meetings.

1 In Adobe InDesign, Photoshop, Illustrator, Flash, Fireworks, or Dreamweaver, choose Window > Extensions >

Connections.

2 Enter your Adobe ID and password. (If you lack an ID or can’t remember it, click the appropriate link.)

3 (Optional) To remain logged in when you restart the computer, select Remember Me On This Computer.

4 Click Log In.

Disable automatic extension updates

By default, the Connections panel automatically updates installed extensions. However, you can disable automatic updates and instead check for them manually.

1 From the Connections panel menu , select Update Preferences.

2 Deselect Check For Updates Automatically.

3 Restart any open Adobe Creative Suite applications.

Manually check for updated extensions

❖ From the Connections panel menu , select Check For Updates.

Disable web services

If your work environment disallows online connections, you can disable web services. You can also use this option to disable your product from accessing online Community Help. When you disable web services and search for help, the product provides results from the local help system only.

Note: Local Help includes only a portion of the full version of online product Help.

1 From the Connections panel menu , select Offline Options.

2 Select Keep Me Offline.

To disable the Connections panel and web services only in Photoshop, deselect Allow Extensions To Connect in the

Plug-Ins section of the Preferences dialog box.

Working with ConnectNow

Adobe® ConnectNow provides you with a secure, personal online meeting room where you can meet and collaborate with others via the web in real time. With ConnectNow, you can share and annotate your computer screen, send chat messages, and communicate using integrated audio. You can also broadcast live video, share files, capture meeting notes, and control an attendee's computer.

You can access ConnectNow directly from the application interface.

1 Choose File > Share My Screen.

2 In the Share My Screen dialog box, enter your Adobe ID and password, and click Sign In. If you don’t have an

Adobe ID and password, click the Create a Free Adobe ID link at the top of the dialog box.

3 To share your screen, click the Share My Computer Screen button at the center of the ConnectNow application

window.

For complete instructions on using ConnectNow, see

http://help.adobe.com/en_US/Acrobat.com/ConnectNow/index.html.

For a video tutorial about using ConnectNow, see Using ConnectNow to share your screen (7:12). (This demonstration is in Dreamweaver.)

Save and switch workspaces

By saving the current size and position of panels as a named workspace, you can restore that workspace even if you move or close a panel. The names of saved workspaces appear in the workspace switcher in the Application bar.

In Photoshop, the saved workspace can include a specific keyboard shortcut set and menu set.

Save a custom workspace

1 With the workspace in the configuration you want to save, do one of the following:

• (Photoshop, Illustrator) Choose Window > Workspace > Save Workspace.

• (InDesign, InCopy) Choose Window > Workspace > New Workspace.

• (Dreamweaver) Choose Window > Workspace Layout > New Workspace.

• (Flash) Choose New Workspace from the workspace switcher in the Application bar.

• (Fireworks) Choose Save Current from the workspace switcher in the Application bar.

2 Type a name for the workspace.

3 (Photoshop, InDesign) Under Capture, select one or more options:

Panel Locations Saves the current panel locations.

Keyboard shortcuts Saves the current set of keyboard shortcuts (Photoshop only).

Menus Saves the current set of menus.

4 Click OK or Save.

Display or switch workspaces

❖ Select a workspace from the workspace switcher in the Application bar.

In Photoshop, you can assign keyboard shortcuts to each workspace to navigate among them quickly.

Last updated 3/8/2011

+ 270 hidden pages