Macromedia Fireworks MX 2004 Fast & Easy Web Development [2 ed.] 1592001203, 9781592001200, 9780585495545

Citation preview

Macromedia Fireworks MX 2004 ®

®

Lisa A. Bucki

A DIVISION OF COURSE TECHNOLOGY

© 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.

Acknowledgments Geeks 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.

About the Author An 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.

Contents at a Glance Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . viii

PART I GETTING STARTED . . . . . . . . . . . . . . . . . . . . . . . . . . 1 Chapter 1 Chapter 2

Getting Started with Fireworks MX 2004 . . . . . . . . . . . . . . . . . . . . . 3 Customizing Fireworks MX 2004 . . . . . . . . . . . . . . . . . . . . . . . . . . 29

PART II DESIGNING GRAPHICS . . . . . . . . . . . . . . . . . . . . . 45 Chapter 3 Chapter 4 Chapter 5 Chapter 6 Chapter 7 Chapter 8 Chapter 9 Chapter 10

Getting Started with Graphics . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47 Working with Vector Objects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67 Working with Bitmaps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99 Changing Colors and Fills . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 131 Using Text in Graphics. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 171 Managing Images by Using Layers . . . . . . . . . . . . . . . . . . . . . . . . 193 Enhancing the Appearance of Objects . . . . . . . . . . . . . . . . . . . . . 213 Optimizing and Exporting Graphics . . . . . . . . . . . . . . . . . . . . . . . 235

CONTENTS AT A GLANCE

PART III DESIGNING INTERACTIVE WEB GRAPHICS . . . . 265 Chapter 11 Chapter 12 Chapter 13 Chapter 14 Chapter 15 Chapter 16

Creating Hotspots and Slices . . . . . . . . . . . . . . . . . . . . . . . . . . . . 267 Adding Rollovers to Graphics . . . . . . . . . . . . . . . . . . . . . . . . . . . . 291 Adding Buttons to a Graphic . . . . . . . . . . . . . . . . . . . . . . . . . . . . 315 Displaying Options by Using Pop-up Menus . . . . . . . . . . . . . . . . 335 Adding Animation to a Graphic . . . . . . . . . . . . . . . . . . . . . . . . . . 355 Automating Tasks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 379

Appendix A

Creating an XML Document . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 403 Index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 409

vii

Introduction Fireworks 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!

P A R T

I

Getting Started

Chapter 1 Getting Started with Fireworks MX 2004 ..3 Chapter 2 Customizing Fireworks MX 2004..............29

This page intentionally left blank

1

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

4

CHAPTER 1: GETTING STARTED WITH FIREWORKS MX 2004

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.

UNDERSTANDING AND STARTING FIREWORKS

5

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.

6

CHAPTER 1: GETTING STARTED WITH FIREWORKS MX 2004

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. • 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.

THE FIREWORKS MX 2004 WORKSPACE

7

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.

8

CHAPTER 1: GETTING STARTED WITH FIREWORKS MX 2004

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. • 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.

THE FIREWORKS MX 2004 WORKSPACE

9

• 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.

NOTE Using vector objects whenever possible makes your images easier to edit because you can easily resize a vector object at any time.

• 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

THE FIREWORKS MX 2004 WORKSPACE

11

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.

THE FIREWORKS MX 2004 WORKSPACE

13

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.

THE FIREWORKS MX 2004 WORKSPACE

15

• 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-tomanipulate special shapes (called Auto Shapes) in the document.

NOTE Later chapters explain how to use the various panels in greater detail.

16

CHAPTER 1: GETTING STARTED WITH FIREWORKS MX 2004

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:

1. Move the mouse pointer to the panel gripper in the upperleft corner of the panel or the panel group. The mouse pointer will change to the move pointer (a four-headed arrow).

THE FIREWORKS MX 2004 WORKSPACE

17

2. Drag to move the panel or the panel group to another location. The panel or the panel group will be undocked to the new location.

TIP To dock a panel or a panel group, drag it via the panel gripper back to the docking area.

You can create and rearrange panel groups by using the panel Options pop-up menu. To group a panel with other panels, follow these steps:

1. Click on the Options menu button in the upper-right corner of the panel or panel group. The panel Options pop-up menu will appear.

18

CHAPTER 1: GETTING STARTED WITH FIREWORKS MX 2004

2. Point to Group Panel with, where Panel refers to the name of the panel whose Options menu you displayed in Step 1. For example, if you open the Layers panel Options menu, this command will be named Group Layers with. A submenu listing the panels will appear.

3. Click on a panel name. The current panel will be grouped with the selected panel.

NOTE If you want to remove a panel from the panel group, click on the button to display the Options menu for the panel, point to Group Panel with, and then click on New Panel Group. The current panel will be separated from the existing group.

You might also need to expand or collapse a panel or a panel group. To expand or collapse a panel or a panel group, follow this step: • Click on the expander arrow in the upper-left corner of the panel or panel group. The panel or the panel group will be expanded or collapsed accordingly.

THE FIREWORKS MX 2004 WORKSPACE

19

After you have reorganized the Fireworks MX 2004 workspace for your convenience, you may also want to save the panel layout for further use. To save the current panel layout, follow these steps:

1. Click on Commands. The Commands menu will appear.

2. Point to Panel Layout Sets. A submenu with the list of the default layouts and any previously saved layouts will appear.

3. Click on Save Panel Layout. The [Javascript] dialog box for naming the current panel layout will open.

4. Type a name for the panel layout.

5. Click on OK. The panel layout will be saved.

20

CHAPTER 1: GETTING STARTED WITH FIREWORKS MX 2004

To choose a panel layout that you’ve saved:

1. Click on Commands. The Commands menu will appear.

2. Point to Panel Layout Sets. A submenu with the list of the default layouts and any previously saved layouts will appear.

3. Click on the desired panel layout. The specified layout will be applied.

TIP You can revert the default panel layout by choosing Commands, Panel Layout Sets, and then clicking on the screen resolution that you’re currently using in the submenu.

Hiding and Showing Panels In Fireworks MX 2004, you can use a single command to hide all the panels so that you can use more of the screen area for viewing the document.

CREATING A NEW DOCUMENT

21

To hide and redisplay the panels:

1. Click on Window. The Window menu will appear.

2. Click on Hide Panels. The panels will close or redisplay as required.

Creating a New Document To create a graphic, you need to first create a new document. Fireworks MX 2004 prompts you to specify the height, width, resolution, and background color for the new document when you create it. To create a new document, follow these steps:

1. Click on File. The File menu will appear.

2. Click on New. The New Document dialog box will open.

22

CHAPTER 1: GETTING STARTED WITH FIREWORKS MX 2004

3. Type the desired canvas width in the Width text box.

4. Type the desired canvas height in the Height text box.

TIP You can change the units used for each image dimension by using the pop-up menu beside the Width or Height text box.

5. Type the desired resolution in the Resolution text box. It’s best to set the resolution at 72 pixels per inch for Web graphics to ensure an optimum and consistent image display across all platforms.

6. Select the desired background color for the canvas.

TIP If you click on the Custom option button, click on the box below it to open a color palette and then click on the desired color.

SAVING A DOCUMENT

23

7. Click on OK. The new document will appear in the Document window.

Saving a Document Saving a document stores it on a disk for future use. You can either save the document in the default folder or specify the save location of your choice. Fireworks MX 2004 saves documents in its own PNG format by default.

NOTE The Fireworks PNG format is not the same as the Portable Network Graphic (PNG) file format used for some Web graphics. If you want to use your Fireworks file on a Web page, you must export the graphic as described in Chapter 10, “Optimizing and Exporting Graphics.”

24

CHAPTER 1: GETTING STARTED WITH FIREWORKS MX 2004

To save a document, follow these steps:

1. Click on File. The File menu will appear.

2. Click on Save. The Save As dialog box will open.

3. Choose the folder in which you want to save the document.

4. Type the desired document name in the File Name text box.

5. Click on Save. The document will be saved in the specified location.

CLOSING A DOCUMENT

25

Closing a Document After you have finished working with a document, you can close it. To close a document, follow these steps:

1. Click on File. The File menu will appear.

2. Click on Close. The document will be closed.

TIP If you’ve made changes to the document that have not been saved, Fireworks will prompt you to save the document before closing it.

26

CHAPTER 1: GETTING STARTED WITH FIREWORKS MX 2004

Opening an Existing Document To open an existing document, follow these steps:

1. Click on File. The File menu will appear.

2. Click on Open. The Open dialog box will open.

TIP If you’ve recently worked with the file you want to open, point to the Open Recent choice, and then click on the name of the file to open.

3. Choose the folder where you saved the document.

4. Click on the document to open.

5. Click on Open. The document will open in Fireworks.

FIREWORKS MX 2004 HELP RESOURCES

27

Fireworks MX 2004 Help Resources Fireworks MX 2004 is equipped with a variety of resources that allow you to learn and troubleshoot the software. While working in Fireworks, you can view tooltips by moving the mouse pointer over a user interface element. You also can view an exhaustive Fireworks documentation by accessing the Help files that are packaged with the software. The Help files describe the use of every Fireworks element. The documentation also provides you with some simple tutorials that help you get started with some of the commonly used functions in Fireworks. To access the Help files, follow these steps:

1. Click on Help. The Help menu will appear.

2. Click on Fireworks Help.

28

CHAPTER 1: GETTING STARTED WITH FIREWORKS MX 2004

The Fireworks Help window will open.

2

Customizing Fireworks MX 2004

You can control the appearance of the Fireworks MX 2004 user interface by choosing your own default settings, such as specifying default colors. To do so, work with the Fireworks MX 2004 preferences. In addition, Fireworks MX 2004 gives you the capability to create keyboard shortcuts to help you work faster. In this chapter, you’ll learn how to: Set preferences Create a keyboard shortcut

30

CHAPTER 2: CUSTOMIZING FIREWORKS MX 2004

Setting Preferences Fireworks MX 2004 enables you to set preferences to control its appearance, specify editing options, and specify import options. You use the Preferences dialog box to set these preferences. To view the Preferences dialog box, follow these steps:

1. Click on Edit. The Edit menu will appear.

2. Click on Preferences. The Preferences dialog box will open.

TIP You can also press Ctrl+U to open the Preferences dialog box.

3. Choose settings as desired. 4. Click on OK. The Preferences dialog box will close, applying the new preference settings.

SETTING PREFERENCES

31

TIP

TIP

You can click on the Cancel button to close the Preferences dialog box without applying any settings that you’ve selected.

Keyboard shortcuts really save time when you’re using a graphics tablet because you can select a tool by pressing keys with one hand, then immediately drawing with the other hand.

The Preferences dialog box contains several tabs, including the General, Editing, Launch and Edit, Folders, and Import tabs. Each tab contains a number of related options for customizing Fireworks. The following sections describe how to use each tab to specify various preferences.

Setting General Preferences You use the General preferences tab to set the following: • Undo steps. Specifies the number of actions that can be undone via the Undo command and the History panel. This value can be between 0 and 1009. Keep in mind, though, that specifying a larger value, such as 999, in the Undo Steps box requires more memory to store all the steps. You must quit and restart Fireworks for any change to this setting to take effect.

32

CHAPTER 2: CUSTOMIZING FIREWORKS MX 2004

• Color defaults. Specifies the default colors for brush strokes, fill, and highlight. Click on a color box and then click on the desired color in the palette that appears. You can click on the arrow button in the upper-right corner of the palette to choose another color set. Or click on the round Sys color picker button to open the Color dialog box and set up a custom color. • Interpolation. Estimates a missing color value by taking an average of the known color values at neighboring points while scaling an image to a larger size. Choose the desired method from the Interpolation pop-up menu. The default, Bicubic, produces sharp, quality images. Bilinear adds sharpness to an image, but less than Bicubic interpolation. Soft provides a soft blur to an image, removing a bit of sharpness. Nearest Neighbor produces jagged edges and sharp contrasts in an image. • Launch options. Turns the Start Page display on or off.

SETTING PREFERENCES

33

Setting Editing Preferences The Editing preferences tab contains the following options to control the mouse pointer, bitmap objects, and the Pen tool: • Precise cursors. Check this option to replace tool-specific icon pointers, such as the pen, with the crosshair pointer. • Brush-size painting cursors. Check this option to set the size and shape of various tool pointers, such as Brush, Eraser, Blur, and Sharpen, to depict the size of the tip.

• Delete objects when cropping. Check this option to delete the pixels or objects that lie outside the selection marquee when you choose the Crop Document command from the Edit menu. This option also applies to the Canvas Size command of the Modify, Canvas submenu. • Turn off “hide edges.” Check this option to disable the Hide Edges option when you select another object.

34

CHAPTER 2: CUSTOMIZING FIREWORKS MX 2004

• Show pen preview. Check this option to see a preview of the next path segment based on the current location of the Pen tool. • Show solid points. Check this option to make selected points appear hollow and deselected points appear solid.

• Mouse highlight. Check this option to turn on the highlight that works with the Pointer tool. When this option is enabled and the Pointer tool is active, a red border and handles appear around any object over which you move the mouse pointer. Click on the highlighted object to select it, displaying a blue border and handles. • Preview drag. Check this option to display a guideline as you drag an object to indicate where the object will appear when you release the mouse button.

SETTING PREFERENCES

35

• Show fill handles. Check this option to display separate handles for a gradient or pattern applied to an object. You can then drag those handles to adjust the fill, such as changing the angle at which a gradient blends. • Pick distance. Enter a value here to specify the maximum distance between an object and pointer at which the object can be selected. You can specify a value between 1 and 10 pixels. • Snap distance. Enter a value here to specify the maximum distance between an object and a grid at which the object can snap to the grid. You can specify a value between 1 and 10 pixels.

Setting Launch and Edit Preferences The settings on the Launch and Edit preferences tab specify how to manage Fireworks’ source PNG files that are being edited or optimized from an external application, such as Macromedia Flash, Macromedia Director, and Microsoft FrontPage.

36

CHAPTER 2: CUSTOMIZING FIREWORKS MX 2004

This tab offers the following two options: • When editing from external application. Choose whether the original PNG file or a copy should open when you edit the images. • When optimizing from external application. Choose whether the original PNG file or a copy should open when you optimize the graphic.

Setting Folders Preferences Use the Folders preferences tab to specify folders holding additional Photoshop plug-ins, textures, and patterns. This tab contains the following options: • Photoshop Plug-Ins. Check this option to enable Fireworks to use Photoshop plug-ins. Click on Browse to specify the folder holding the plug-ins. The plug-ins will then appear in the Filters menu and on the Effects popup menu in the Property Inspector.

SETTING PREFERENCES

37

• Textures. Check this option to enable Fireworks to use extra textures. The textures in the folder will then appear in the Texture pop-up menu in the Property Inspector. • Patterns. Check this option to enable Fireworks to use extra patterns. The list of patterns in the folder will then appear in the Pattern pop-up menu in the Property Inspector.

Setting Import Preferences Use the Import preferences tab to manage how Fireworks converts Photoshop files. The tab contains the following options for layers and text: • Convert to Fireworks objects. Select this option to convert layers in the Photoshop file to objects on a single layer in the Fireworks document. If the Fireworks document already includes multiple frames, check Share Layer Between Frames to have Fireworks repeat the imported image on all frames. • Convert to frames. Select this option to convert layers in the Photoshop file to frames in the Fireworks document.

38

CHAPTER 2: CUSTOMIZING FIREWORKS MX 2004

TIP See Chapter 8 for more information on layers and Chapter 15 for more information on frames.

• Editable. Click on this option to enable editing of text in the imported Photoshop file. • Maintain appearance. Click on this option to prevent editing of text in the imported image. • Use flat composite image. Check this option to import the complete Photoshop file as a flattened bitmap object.

CAUTION Flattening the layers into a bitmap will drastically limit your ability to edit the imported image, so be selective when choosing the Use flat composite image option. Chances are you should leave that option turned off most of the time.

WORKING WITH KEYBOARD SHORTCUTS

39

RESTORING THE DEFAULT PREFERENCES The preferences that you specify for Fireworks MX 2004 are stored in the Fireworks MX 2004 Preferences file on your system’s hard disk. If you need to restore the default preferences, exit the Fireworks program, delete the Fireworks MX 2004 Preferences file, and then relaunch Fireworks MX. The location of the Fireworks MX Preferences file may vary from one computer to another. On a Windows XP computer, it is stored in the C:\Documents and Settings//Application Data/Macromedia/ Fireworks MX 2004 folder. In a computer running Mac OS X, preferences are found in the Library/Preferences folder within your Home folder.

Working with Keyboard Shortcuts Keyboard shortcuts help you work faster, enabling you to access a menu item or a tool by pressing a key combination. Fireworks MX 2004 provides default keyboard shortcuts to access most of the menus and tools. In addition, Fireworks MX enables you to use the shortcut key set of some other applications, such as FreeHand or Illustrator, if you’re already proficient with the shortcuts from that application. In this section, you will learn to choose an alternate shortcut key set and create keyboard shortcuts to access tools.

40

CHAPTER 2: CUSTOMIZING FIREWORKS MX 2004

Choosing Another Shortcut Key Set To use the shortcut key set of another application in Fireworks, follow these steps:

1. Click on Edit. The Edit menu will appear.

2. Click on Keyboard Shortcuts. The Keyboard Shortcuts dialog box will open.

3. Click on the Current set drop-down list arrow. The list of available shortcut key sets will open.

4. Click on the desired shortcut key set. The set will be selected.

WORKING WITH KEYBOARD SHORTCUTS

41

5. Click on OK. The shortcut key set will become active in Fireworks.

Creating a Keyboard Shortcut Fireworks enables you to create your own custom keyboard shortcuts for menu commands or tools. If a shortcut already exists for a command, the new shortcut that you create is called a secondary shortcut. To create a keyboard shortcut, follow these steps:

1. Click on Edit. The Edit menu will appear.

2. Click on Keyboard Shortcuts. The Keyboard Shortcuts dialog box will open.

42

CHAPTER 2: CUSTOMIZING FIREWORKS MX 2004

3. Choose an alternate shortcut key set, if desired. You will copy this set and add your new shortcut to it, rather than changing the original set.

4. Click on the Duplicate Set button. The Duplicate Set dialog box will open.

5. Type a name for the new set. 6. Click on OK. The new set will be selected in the Keyboard Shortcuts dialog box.

WORKING WITH KEYBOARD SHORTCUTS

43

7. Choose a command category, such as Tools, from the Commands drop-down list. The commands in the category will appear in the list box below the Commands drop-down list.

8. Click on the command or tool for which you want to create a shortcut. The Add Shortcut (+) and Delete Shortcut (–) buttons will become active.

9. Select the current shortcut key in the Press key box; then type a new shortcut key or combination.

10. Click on the Add Shortcut button (+). The new shortcut will be added to the shortcuts list.

TIP You can delete an old shortcut by clicking on it in the Shortcuts list and then clicking on the Delete Shortcut (–) button.

44

CHAPTER 2: CUSTOMIZING FIREWORKS MX 2004

11. Click on OK. The Keyboard Shortcuts dialog box will close, and the new shortcut will become active.

P A R T

I I

Designing Graphics 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

This page intentionally left blank

3

Getting Started with Graphics

Fireworks MX 2004 enables you to work with both vector and bitmap objects within a Fireworks document. A vector graphic is formed by using points and paths that define the object’s outline. A bitmap graphic is made up of pixels, which are dots of color or light that combine to form the image. To work with either type of object, you first need to be able to select the object. This chapter covers making basic selections, as well as introducing you to key procedures for viewing and sizing an image. In this chapter, you’ll learn how to: Select image objects Group, overlap, move, and delete objects Change the zoom and viewed portion of an image Crop and manipulate the image canvas

48

CHAPTER 3: GETTING STARTED WITH GRAPHICS

Selecting Image Objects To work with an object in an image, you first need to select the object. For example, to move a line object from the top to the bottom of a document, you need to select it first; only then can you drag the line to the appropriate location. Fireworks MX 2004 provides you with two key tools for selecting objects. This section shows you how to use these selection tools.

NOTE In Fireworks, anything that you create or import is called an object. For example, a line or shape you draw is an object. Or a bitmap graphic you import is an object.

Using the Pointer Tool Use the Pointer tool to select and move an object, whether it’s a vector or bitmap object.

NOTE In some cases, you may need to select the layer holding the object before you can select the object. To learn how to work with layers, see Chapter 8, “Managing Images by Using Layers.”

SELECTING IMAGE OBJECTS

49

To select and move an object, follow these steps:

1. Click on the Pointer tool in the Tools panel. The mouse pointer will turn black.

TIP You also can press V or 0 to select the Pointer tool.

2. Point to the object that you need to select. A red selection box and handles will appear around the object. This rectangle provides an indication of which object will be selected when you click the mouse.

3. Click on the object. A blue selection box and handles will appear around the selected object. In addition, the Property Inspector displays the properties (formatting settings) for the selected object.

TIP After you’ve selected one object, press and hold the Shift key and click on additional objects to select them, as well.

50

CHAPTER 3: GETTING STARTED WITH GRAPHICS

Using the Subselection Tool Like the Pointer tool, the Subselection tool lets you select an object on the canvas. The Subselection tool offers two special selection functions: • When you’ve grouped multiple objects together (see “Grouping and Ungrouping Objects” later in the chapter), you can use the Subselection tool to select a single object in the group. • When you select a vector image with the Subselection tool, hollow handles appear at the points that form the image. You can then drag any point to change the shape of the image. Chapter 4, “Working with Vector Objects,” provides more information about making changes to vector graphics. To select an object using the Subselection tool:

1. Click on the Subselection tool in the Tools panel. The Subselection tool will become active.

TIP You also can press A or 1 to select the Subselection tool.

2. Click on the object that you need to modify. The object will be selected. If the object is part of a group, only the object on which you clicked will be selected. If the object is a vector object, the hollow selection handles will appear at points around the image.

USING THE SELECT BEHIND TOOL

51

If you need to modify the vector object’s shape, you can then drag one of the hollow handles.

Using the Select Behind Tool As you add more objects to a Fireworks document to make it more sophisticated and complex, many of the objects will overlap. When you need to select an object that’s currently behind another object on the canvas, you can use the Select Behind tool, as detailed here.

1. Point to the Pointer tool in the Tools panel; press and hold the left mouse button. A menu will appear.

2. Click on Select Behind tool. The Select Behind tool will become active. When it is over the canvas, the mouse pointer will be white with a small, leftpointing carat beside it.

52

CHAPTER 3: GETTING STARTED WITH GRAPHICS

3. Click on the object that is in front of the object you want to select. The front object will be selected.

4. Click the object again. The object behind the object you selected in Step 3 will be selected instead.

GROUPING AND UNGROUPING OBJECTS

53

Grouping and Ungrouping Objects Grouping objects can make your work significantly easier. After you’ve created, formatted, and positioned a number of objects to provide the on-screen illusion that they’re a single object, you can select and group the objects to make them function as a single unit within Fireworks. That is, you can move the selected group as if it were a single object. Using grouping preserves the positioning work that you performed previously so that objects stay aligned within the group. To group and ungroup objects:

1. Click and Shift+click to select the objects to group. Selection boxes and handles will appear around the objects.

2. Click on Modify. The Modify menu will appear.

3. Click on Group. The objects will be grouped, with a single set of selection handles around the group.

54

CHAPTER 3: GETTING STARTED WITH GRAPHICS

4. Select the group of objects to ungroup. The selection handles for the group will appear.

5. Click on Modify. The Modify menu will appear.

6. Click on Ungroup. The group will be broken into the original, separate objects.

NOTE You can even group multiple object groups that you previously created to facilitate your work.

CONTROLLING OBJECT OVERLAP

55

Controlling Object Overlap As noted in the previous section, you can combine multiple objects to create a more complex image onscreen. Overlapping objects on the canvas gives you the ability to create realistic images in Fireworks. Think of the objects as a pile of papers. The top paper (object) appears in front of the others on the canvas. The bottom paper (object) appears behind all the others on the canvas. Other objects can be moved up or down in the pile as needed to achieve the desired effect.

NOTE Each object you create in Fireworks appears on its own layer. Using one of the Modify, Arrange commands changes the order of the layers to adjust the overlapping as specified. See Chapter 8, “Managing Images by Using Layers,” to learn more about working with layers in Fireworks documents.

You use one of four commands on the Modify, Arrange submenu to control how objects overlap—where they appear in the pile: • Bring to Front. Moves the selected object to the front of all other objects. • Bring Forward. Moves the selected object one level forward in the “stack” of overlapped objects. • Send Backward. Moves the selected object one level backward in the “stack” of overlapped objects. • Send to Back. Moves the selected object behind all other objects.

56

CHAPTER 3: GETTING STARTED WITH GRAPHICS

To change the overlap of an object, use the following steps:

1. Select the object for which you want to change overlapping. A selection box and handles will appear around the objects.

2. Click on Modify. The Modify menu will appear.

3. Point to Arrange. The Arrange submenu will appear.

4. Click on the desired overlap choice.

MANIPULATING A SELECTED OBJECT

57

The object will move to the specified overlap location relative to the other objects in the image.

Manipulating a Selected Object You can perform a number of different operations on a selected object, many of which will be detailed in later chapters. The basics include the following: • Move. Drag a selected object on the canvas to move the object to a new location.

58

CHAPTER 3: GETTING STARTED WITH GRAPHICS

• Resize. Drag a handle for the selected object to resize the object.

• Delete. Press the Delete or Backspace key, or choose Edit, Clear to delete the selected object. • Scale. Scale a selected object to change its size proportionally. Choose Modify, Transform, Scale. Press and hold Shift while dragging a corner handle to size the object while keeping its proportions intact. Press and hold Alt while dragging a handle to scale the object from the center. • Cut, Copy, or Paste. You can remove or copy the selected object with the Edit, Cut or Edit, Copy command; then paste the object into a new location (such as a new layer or another Fireworks document) by using the Edit, Paste command.

VIEWING IMAGES

59

TIP You can display guides (nonprinting guidelines) on the canvas to help you be precise when you move or resize objects. First, choose View, Rulers to display the horizontal and vertical rulers in the document window. Then drag from the vertical or horizontal ruler and release the mouse button when the guide reaches the desired position.

Viewing Images To be able to create highly detailed graphics, you need to know how to change to the proper zoom and view area. For example, in a graphic displaying a number of books, you may need to modify only the color of the book in the center of a stack of books depicted in the image. In such a case, you can zoom in on the image and then adjust the portion of the image currently shown onscreen so that you can work with the color of the desired book. In this section, you’ll learn to use the Magnification list, along with the Zoom and Hand tools, to change your view of the document.

Using the Magnification List You can use the Magnification list to zoom in or zoom out on an image quickly. To zoom in means to increase the

60

CHAPTER 3: GETTING STARTED WITH GRAPHICS

magnification of the image, and to zoom out means to decrease the magnification. You can increase or decrease the magnification in preset values, such as 100%, 150%, or 200%, as follows:

1. Click on the Magnification box on the Document window. The Magnification list will appear.

2. Click on the desired zoom percentage. The image will zoom to the desired magnification.

VIEWING IMAGES

61

Using the Zoom Tool Fireworks enables you to zoom in on the area that you specify in an image. The smaller the selected area is, the higher the magnification will be. To zoom the document on a userdefined area, follow these steps:

1. Click on the Zoom tool in the Tools panel. The mouse pointer will change to a magnifying glass with a plus sign when it’s over the canvas.

2. Drag the pointer over the part of the document that you need to magnify.

The image will zoom in on the specified area.

TIP You can zoom out by pressing and holding the Alt key while repeating Step 2. You can return to 100% magnification level by double-clicking on the Zoom tool in the Tools panel.

62

CHAPTER 3: GETTING STARTED WITH GRAPHICS

Using the Hand Tool After you have zoomed in an image, its size may exceed that of the Document window. As a result, you may not be able to see the complete image. What will you do if you then want to view another area within the image? Use the Hand tool to scroll a zoomed-in image. This process is also called panning. Remember that the Hand tool works only when you have magnified the image larger than the Document window. To scroll a zoomed-in image, follow these steps:

1. Click on the Hand tool in the Tools panel. The mouse pointer will change to a hand shape.

2. Drag the image on the pointer to scroll through the image. The Document window will display a different part of the image.

Cropping an Image Cropping an image refers to cutting out part of an image around its boundaries and discarding the unwanted content. For example, you may have opened a photo of three people in Fireworks, and you want to cut two of the three people from the photo. In such situations, the Crop tool comes in handy.

CROPPING AN IMAGE

63

TIP If you want to trim blank areas of the canvas that are outside the objects in the document, first click on the image canvas to select it. The Property Inspector should show the image properties. Click on the Fit Canvas button to trim the image areas outside the canvas.

To cut out part of an image, follow these steps:

1. Click on the Crop tool in the Tools panel. The Crop tool will become active.

2. Drag on the image to select the area that you want to keep. A dashed selection outline and handles will appear around the specified area.

3. Press Enter (Return on a Mac). The portion outside the crop selection will be removed from the image.

TIP If you cropped an image incorrectly, you can undo it. To do so, choose Edit, Undo Crop Document. The image will be restored.

64

CHAPTER 3: GETTING STARTED WITH GRAPHICS

Resizing an Image Designers commonly need to resize images in order to use them in a variety of Web pages. When you resize an image, you can change not only its dimensions, but also its resolution—the number of pixels it contains per inch onscreen. Resizing an image increases or decreases the objects in the image according to the new image size you specify. To resize an image:

1. Click on the image canvas. The Property Inspector will show the image properties.

2. Click on Image Size. The Image Size dialog box will open.

3. Edit the image height and width, either in terms of Pixel dimensions or Print size, as desired. The new dimensions will appear.

NOTE If you want to change the proportion of the image (its width relative to its height), clear the Constrain proportions check box before entering the desired height and width settings.

RESIZING AN IMAGE

65

4. Edit the Resolution setting as desired. The new setting will appear.

5. Click on OK.

The image will appear in its new size.

TIP If you need to add or remove space in the canvas without changing the size of the objects on the canvas, click on the Canvas Size button in the Property Inspector after clicking on the canvas.

This page intentionally left blank

4

Working with Vector Objects

In this chapter, you’ll learn how to: Draw different types of vector objects Reshape a vector object Apply strokes and fills to objects

68

CHAPTER 4: WORKING WITH VECTOR OBJECTS

A series of mathematically defined points joined together by lines form the border of a vector graphic. Because points and paths (a path being a vector outline between two points) form the object, you can easily reshape the object by moving the points. Each vector graphic has two important characteristics, stroke and fill. A stroke represents the appearance of the outline (or path) of the object, whereas a fill represents the appearance of the area enclosed inside the outline (or path). Vector graphics offer an important advantage. They are resolution independent, which means you can resize, rotate, magnify, or transform them without compromising clarity. Moreover, these graphics require only a small amount of storage space, are scalable, and are easily portable. Because of the advantages offered by vector graphics, you should use vector objects whenever possible as you build your Fireworks graphics. Fireworks MX 2004 provides you with a variety of tools for creating and manipulating vector graphics.

Drawing Vector Objects You will build the typical Fireworks document by creating a number of objects. For example, a graphic may contain lines, rectangles, polygons, and freeform images. The tools in the Vector section of the Tools panel enable you to create a number of different types of vector objects, such as lines, rectangles, freeform lines, and other shapes. In this section, you’ll learn to create a variety of vector objects like these.

Drawing a Line You use the Line tool to create a straight line. To create a line, follow these steps:

DRAWING VECTOR OBJECTS

69

1. Click on the Line tool in the Tools panel. The mouse pointer will change to a crosshair.

TIP You can press N to select the Line tool.

2. Choose desired settings for the line’s appearance in the Property Inspector, including line color, width, and stroke type. The specified settings will become active for the Line tool.

3. Drag the mouse pointer to draw a line of the desired size. A blue guideline will appear to show you where the line will be created.

TIP While drawing the line, the line may not appear to be straight. To avoid such situations, press and hold the Shift key while performing Step 3. This “locks” the line in place so that it remains straight.

70

CHAPTER 4: WORKING WITH VECTOR OBJECTS

When you release the mouse button, the final line will appear. In this case, the line was created by using a graphite, pencil-style stroke. By experimenting with different stroke types, you can create realistic and interesting effects in drawings.

Drawing Rectangles and Polygons To draw a shape, such as a rectangle, ellipse, polygon, or other shape, use the tools available in the menu that appears when you open the pop-up menu for the Rectangle tool. Fireworks MX 2004 offers a variety of new shapes that you can draw, including an arrow, pie, or spiral. Next, learn how to draw a variety of vector shapes by using various shape tools.

Drawing a Rectangle To draw a rectangle, follow these steps:

1. Click on the Rectangle tool. The mouse pointer will change to a crosshair.

DRAWING VECTOR OBJECTS

71

2. Choose desired settings for the rectangle’s appearance in the Property Inspector, including a fill, outline color and width, and stroke type. The specified settings will become active for the Rectangle tool. (See “Specifying Strokes and Fills” later in the chapter to learn more about working with these settings in the Property Inspector.)

TIP If you don’t want to apply a texture to a line or fill, set the value for the dropdown list to the right of the Texture choices to 0 in the Property Inspector.

3. Drag the mouse pointer to draw a rectangle of the desired size on the canvas. A blue guideline will appear to show you where the rectangle will be created.

TIP Press and hold the Shift key as you drag to draw a perfect square.

72

CHAPTER 4: WORKING WITH VECTOR OBJECTS

When you release the mouse button, the finished rectangle will appear. In this case, the rectangle was created by using a solid black stroke for the outline and a solid green fill. You may need to make changes to the rectangle that you created. For example, you may need to change the size of a rectangle or round its corners. Or you may need to create a square. The following procedures provide solutions for these issues.

Modifying the Dimensions of a Rectangle To modify the dimensions of a rectangle to a precise measurement, follow these steps:

1. Click on the Pointer tool in the Tools panel. The mouse pointer will turn black.

2. Click on the rectangle. Blue selection handles will appear around the rectangle.

DRAWING VECTOR OBJECTS

73

3. Type a new width in the W text box in the Property Inspector and press Enter. The width of the rectangle will change to the specified value.

4. Type a new height in the H text box in the Property Inspector and press Enter. The height of the rectangle will change to the specified value.

TIP You also can change the position of the rectangle by dragging it to a new position or by entering appropriate values in the X and Y text boxes in the Property Inspector.

Rounding a Rectangle’s Corners To round the corners of a rectangle, use the steps that follow:

TIP You also can use the Rounded Rectangle tool to draw a new rounded rectangle. Select the Rounded Rectangle tool from the Rectangle tool pop-up menu. Choose stroke and fill settings for the rounded rectangle in the Property Inspector and then drag the mouse to draw a rounded rectangle on the canvas.

74

CHAPTER 4: WORKING WITH VECTOR OBJECTS

1. Click on the Pointer tool in the Tools panel. The mouse pointer will turn black.

2. Click on the rectangle. Blue selection handles will appear around the rectangle.

3. Type the desired value in the Rectangle Roundness text box in the Property Inspector and press Enter. The corners of the selected rectangle will be rounded.

NOTE The value that you enter in the Rectangle Roundness box specifies the curvature of the corners of the rectangle. The larger the value, the larger the curvature of the corners will be.

DRAWING VECTOR OBJECTS

75

Drawing an Ellipse To draw an ellipse, follow these steps:

1. Click and hold on the Rectangle tool in the Tools panel. The Rectangle tool popup menu will appear.

2. Click on the Ellipse tool. The mouse pointer will change to a crosshair.

TIP Alternatively, you can press U to shuffle among the tools present in the Rectangle tool pop-up menu.

3. Choose desired settings for the ellipse’s appearance in the Property Inspector, including a fill, outline color and width, and stroke type. The specified settings will become active for the Ellipse tool.

4. Drag the mouse on the canvas to draw an ellipse. A blue guideline will appear to show you where the ellipse will be created.

76

CHAPTER 4: WORKING WITH VECTOR OBJECTS

TIP Press and hold the Shift key while dragging to draw a perfect circle.

When you release the mouse button, the finished ellipse will appear. In this case, the ellipse was created by using a black confetti stroke for the outline and a solid lavender fill.

Drawing a Polygon You use the Polygon tool (also found in the Rectangle tool pop-up menu) to draw a polygon. Use the Property Inspector to specify the number of sides of the polygon. To create a polygon, follow these steps:

1. Click and hold on the Rectangle tool (or the currently selected vector shape tool) in the Tools panel. The Rectangle tool pop-up menu will appear.

2. Click on the Polygon tool. The mouse pointer will change to a crosshair.

DRAWING VECTOR OBJECTS

77

3. Choose desired settings for the polygon’s appearance in the Property Inspector, including a fill, outline color and width, and stroke type. The specified settings will become active for the Polygon tool.

4. Type the number of sides for the polygon in the Sides text box in the Property Inspector and press Enter. The polygon will have the specified number of sides.

TIP When you click on the Property Inspector box for specifying a fill color, the palette that appears has a white box with a red slash through it. Click on that box to specify no fill for the new object.

5. Drag the mouse on the canvas to draw the polygon. A blue guideline will appear to show you where the polygon will be created.

CAUTION Unlike with the other shape tools, drag from the center out to draw a new polygon.

78

CHAPTER 4: WORKING WITH VECTOR OBJECTS

When you release the mouse button, the finished polygon will appear. In this case, the polygon was created by using no stroke (no outline) and an oil paint pattern fill. (See Chapter 6, “Changing Colors and Fills,” for more about fills.) Note that the selected polygon has a handle extending from a vertical line and a handle extending from a horizontal line. You can drag these handles to resize the horizontal and vertical dimensions of the fill applied to the polygon. To adjust the size of the polygon itself, either use the Modify, Transform, Scale command, or the W and H settings in the Property Inspector.

Drawing One of the New Shapes As was noted earlier, Fireworks MX 2004 includes a number of new tools to enable you to draw more complicated shapes, such as an arrow or spiral, quickly and easily. Here are the steps for using one of those tools:

1. Click and hold on the Rectangle tool (or the currently selected vector shape tool) in the Tools panel. The Rectangle tool pop-up menu will appear.

2. Click on the desired tool. The mouse pointer will change to a crosshair.

DRAWING VECTOR OBJECTS

79

3. Choose desired settings for the shape’s appearance in the Property Inspector, including a fill, outline color and width, and stroke type. The specified settings will become active for the selected tool.

4. Drag the mouse on the canvas to draw the shape. A blue guideline will appear to show you where the shape will be created.

When you release the mouse button, the finished shape will appear. In this case, the spiral shape was created by using no fill and a marker style stroke.

NOTE Some of the new shapes have additional formatting features. These special shapes are called Auto Shapes. Learn more about them in the section called “Using Auto Shapes” at the end of the chapter.

80

CHAPTER 4: WORKING WITH VECTOR OBJECTS

Drawing Curved Paths (Bézier Curves) You may need to include curved paths in your graphics. For example, you may need to create a leaf. You use the Pen tool to create curved paths called Bézier curves (named after their creator, Pierre Bézier). Using this tool is simple. You create only the points; Fireworks automatically creates a curved path connecting the points. A Bézier curve includes the following elements: • Anchor points. Each point that you create on a path is called an anchor point. • Handles. When you select an anchor point, it displays one or two handles. You use these handles to manipulate the size and shape of the curve. • Curve points. The anchor points that have a curve on either side are called curve points. • Corner points. The anchor points that have a straight path on at least one side are called corner points.

DRAWING VECTOR OBJECTS

81

To draw a curve using the Pen tool, follow these steps:

1. Click on the Pen tool in the Tools panel. The mouse pointer will change to a pen.

TIP You can also press P to select the Pen tool.

2. Choose desired stroke settings for the curve’s appearance in the Property Inspector. The specified settings will become active for the Pen tool.

3. Click and then drag (without releasing the mouse button). This will mark the first curve point and determine the curve’s direction.

TIP You can drag in any direction to establish the curve shape and direction.

82

CHAPTER 4: WORKING WITH VECTOR OBJECTS

4. Click and drag (without releasing the mouse button) in the opposite direction, as you did when you established the first curve point. This will mark the second curve point and establish a U-shaped curve.

5. Continue clicking and dragging to create additional segments in the line.

TIP Dragging the mouse pointer in the same direction as for the last anchor point you created makes an S-shaped curve. Moving the mouse pointer to the next position and simply clicking usually creates a corner point.

DRAWING VECTOR OBJECTS

83

6. Double-click on the last anchor point. The curve will be finished.

TIP Alternatively, to end the curve, you can press and hold Ctrl and click anywhere in the Document window.

Drawing Freeform Vector Objects Use the Vector Path tool to draw freeform vector objects that you can easily reshape at a later time. Select the Vector Path tool from the Pen tool pop-up menu. To draw a freeform object, follow these steps:

1. In the Tools panel, click and hold on the Pen tool. The Pen tool pop-up menu will appear.

2. Click on the Vector Path tool. The mouse pointer will change to a crosshair.

TIP You can also press P to cycle between the various menu items present in the Pen tool pop-up menu.

84

CHAPTER 4: WORKING WITH VECTOR OBJECTS

3. Choose desired stroke settings for the freeform line’s appearance in the Property Inspector. The specified settings will become active for the Vector Path tool.

4. Drag on the canvas to draw as needed. Vector lines will appear.

Here’s a simple leaf shape drawn with the Vector Path tool. It uses a basic crayon stroke and a green color.

TIP If you plan to create a lot of vector paths in your drawings, I highly recommend getting a graphics tablet and becoming proficient with it. Even inexpensive graphics tablets like the Wacom Graphire, which retails at around $100, can help you create more realistic, natural strokes onscreen.

DRAWING VECTOR OBJECTS

85

Manipulating Objects After you create an object, you may need to manipulate its shape. For example, you may need to bend a straight line or reshape a polygon. In Fireworks MX 2004, you change to the path of a vector object in order to change the object’s shape. Fireworks provides you with a number of tools that help you in changing the path of an object. The following list mentions some of these tools: • Freeform tool. Lets you make changes to the path of an object by pushing or pulling anchor points. • Reshape Area tool. Lets you pull the area of a selected path. • Path Scrubber tools. Lets you enhance the appearance of a path by modifying its stroke’s properties, such as angle, ink, hue, and saturation. See “Using Stroke Options” in Chapter 6 for more information on stroke properties. All these tools are available in the Freeform tool pop-up menu. In addition to these tools, Fireworks MX provides the Knife tool, which lets you cut an object into two or more objects. In this section, you’ll learn to use the Freeform and Knife tools.

86

CHAPTER 4: WORKING WITH VECTOR OBJECTS

Using the Freeform Tool As mentioned previously, the Freeform tool allows you to make changes to the appearance of an object by pushing or pulling its path. To manipulate an object with the Freeform tool, follow these steps:

1. Use the Pointer tool to select the object to modify. The object will appear selected.

2. Click on the Freeform tool in the Tools panel. The Freeform tool will become active.

TIP You can also press O to select the Freeform tool.

3. To push part of an object, move the mouse pointer to either side of a path. The mouse pointer will change to the push pointer, a small white arrow with a circle.

4. Drag the mouse pointer to push against the path, pushing it in the desired direction. When you release the mouse button, the object’s shape will change.

DRAWING VECTOR OBJECTS

87

CAUTION In some cases, as with a polygon, pushing one path segment will cause the entire object to change shape. If you don’t like the result, press Ctrl+Z immediately to undo the change.

5. To pull part of an object, move the mouse pointer to an anchor point. The mouse pointer will change to the pull pointer, a small white arrow with an S.

6. Drag the mouse pointer to move the handle, pulling it in the desired direction. When you release the mouse button, the object’s shape will change.

NOTE The Reshape Area tool works similarly to pushing an area of an object.

88

CHAPTER 4: WORKING WITH VECTOR OBJECTS

Using the Knife Tool You use the Knife tool to cut the path of an object into two or more separate, closed paths. To cut a path, follow these steps:

1. Use the Pointer tool to select the object to modify. The object will appear selected.

2. Click on the Knife tool in the Tools panel. The mouse pointer will change to a knife.

3. Drag the mouse pointer over the object at the location where you want to cut the object. A blue guideline will appear, indicating the cut location. When you release the mouse button, new anchor points will indicate the cut location.

DRAWING VECTOR OBJECTS

89

4. Select the Pointer tool. The mouse pointer will change to an arrow.

5. Click on a blank area of the canvas. The object will be deselected.

6. Click on one of the two paths (newly separated objects). The path will be selected.

7. Drag the object to a new location. The two paths (objects) will be separated.

90

CHAPTER 4: WORKING WITH VECTOR OBJECTS

Specifying Strokes and Fills One key advantage that vector objects offer over bitmap objects is that you can change the stroke and fill at any time. It’s much more cumbersome to change the formatting for bitmap objects. Fireworks MX 2004 provides you with a number of tools to apply strokes and fills to vector objects, detailed in this section.

Applying Strokes to an Object You can change stroke settings for a vector object any time after you created it by using the Property Inspector. The Property Inspector provides you with a number of settings to apply and manipulate the stroke. Select the vector object to see the following stroke options in the Property Inspector: • Stroke color box. Click on this box to specify a color for a path. When you click on the box, a palette appears. Click on the desired color. • Tip size box. Type a new path width and press Enter or use the slider to specify a value. • Stroke category list. This list provides you with a number of stroke categories, such as Pencil, Basic, and Air Brush. The various strokes simulate drawing with different types of media, such as a pencil or crayon. Click on this list, click on a category, and then click on the desired stroke in the submenu that appears.

SPECIFYING STROKES AND FILLS

91

• Tip preview (Edge) box. Use this box to preview the width of the tip. • Edge softness box. Enter a value or use the slider to specify how soft or hard the edge of the stroke should be.

• Texture name list. Choose a texture from this list to apply that texture to a stroke. • Amount of texture box. Use this box to specify the (percentage) degree of the specified texture to be applied to the stroke. A zero here means no texture will be applied.

92

CHAPTER 4: WORKING WITH VECTOR OBJECTS

To change the stroke for a vector object, follow these steps:

1. Use the Pointer tool to select the desired vector object. Selection handles will appear.

2. Choose the desired stroke settings in the Property Inspector. The path of the selected object will display the new stroke settings.

Applying Fills to an Object Like stroke settings, you can apply and change fill settings for a selected vector object by using the Property Inspector, as follows: • Fill color box. Click on this box to choose a color to be filled inside a path. When you click on the box, a palette appears. Click on the desired color. • Fill category list. Use this list to choose a fill type: Solid, Web Dither, Gradient, and Pattern. (Choose None for no fill.) If you choose Gradient or Pattern, click on the desired fill setting in the submenu that appears.

SPECIFYING STROKES AND FILLS

93

• Edge of fills list. Use this list to specify the type of edge for the fill: Hard, Anti-Alias, or Feather. Hard refers to the regular hard line; Anti-Alias refers to making an object appear smoother by blending its color into the background on which it is placed; and Feathering produces a glow by giving a softened effect on the edge. • Amount of feather box. Type a value or use the slider to specify the degree of feathering if your fill has a feathered edge. • Texture name list. Choose a fill texture from this list. • Amount of texture box. Use this box to specify the degree of texture applied, as a percentage. • Transparent texture check box. Use this check box to make the fill transparent. Check this box to see through the lighter parts of the texture.

TIP You can also access the stroke and fill settings in the Colors area of the Tools panel.

94

CHAPTER 4: WORKING WITH VECTOR OBJECTS

To apply fill to a vector object, follow these steps:

1. Use the pointer tool to select the desired vector object. Selection handles will appear around the object.

2. Choose the desired fill settings in the Property Inspector. The selected object will display the new fill.

Using Auto Shapes Fireworks MX 2004 offers a brand new feature called Auto Shapes. These shapes offer special-purpose handles in addition to the normal selection handles. These yellow handles enable you to perform special reformatting tasks on the selected Auto Shape. Learn now how to create and manipulate Auto Shapes.

Drawing an Auto Shape As noted earlier, the shapes below the divider line on the Rectangle tool pop-up menu are all Auto Shapes. To add one of these special shapes to a document, use the steps presented earlier under “Drawing One of the New Shapes.” In addition, you can use the Shapes panel to add more complex Auto Shapes to a document.

USING AUTO SHAPES

95

1. Click on Window. The Window menu will appear.

2. Click on Auto Shapes. The Shapes panel will open.

3. Drag the desired shape from the panel to the canvas.

96

CHAPTER 4: WORKING WITH VECTOR OBJECTS

When you release the mouse button, the Auto Shape will appear on the canvas. You can use the blue selection handles as you normally would to resize and move the object. Collapse the Shapes panel when it’s no longer needed.

Editing an Auto Shape Each of the yellow handles on an Auto Shape performs a special purpose. To see what one of the handles does, first use the Pointer tool to select the Auto Shape. A yellow pop-up tip identifies the handle’s purpose.

USING AUTO SHAPES

97

You’ll have to experiment with each yellow handle to see how it works. In some cases, you simply click on the handle to perform its function. In other instances, such as changing the perspective for the cube Auto Shape, you have to drag the handle.

This page intentionally left blank

5

Working with Bitmaps

A bitmap image or object consists of a grid of numerous dots or squares, called pixels, of light (onscreen) or color (when printed). Each pixel stores individual color information. You can view these individual pixels by zooming in on a bitmap object. Bitmaps are also known as raster images. Bitmap objects are resolution dependent, unlike vector objects. As a result of this, resizing a bitmap object leads to a loss in its quality. Scanned images, images captured by using a digital camera, or images created by using any paint software all are saved in bitmap formats. Fireworks MX 2004 provides you with various tools that you can use to create and incorporate bitmap objects in your documents. In this chapter, you’ll learn how to: Import bitmap objects Draw, paint, and erase bitmap objects Select a part of a bitmap object Modify bitmap objects

100

CHAPTER 5: WORKING WITH BITMAPS

Importing Bitmap Objects Although you can open a bitmap image in Fireworks by using the File, Open command, more typically you will need to import a bitmap image to use it as an object within a more complex drawing. Fireworks can import images using various bitmap file formats, including JPEG, TIFF, and GIF. To import a bitmap object and place it on the drawing canvas, follow these steps:

1. Click on File. The File menu will appear.

2. Click on Import. The Import dialog box will open.

3. Navigate to the folder where the file to import has been stored. The Import dialog box will list the files in the folder.

4. Click on the File to open. A preview will appear at the right side of the dialog box.

5. Click on Open. The mouse pointer will change to a place bracket.

IMPORTING BITMAP OBJECTS

101

6. Click on the canvas in the location where you want to position the upper-left corner of the bitmap. The imported bitmap will appear in the document.

7. Drag the bitmap to the desired location.

102

CHAPTER 5: WORKING WITH BITMAPS

Drawing, Painting, and Erasing Bitmap Objects In addition to importing bitmap objects into a Fireworks document, you can create your own bitmap objects by using tools available in the Bitmap section of the Tools panel. In this section, you will learn to use the Pencil, Brush, and Eraser tools to create and edit bitmap content.

Using the Pencil Tool You use the Pencil tool to draw freeform, one-pixel curves. The Property Inspector provides a number of options to set the Pencil tool, as per your requirements. The following list explains these options: • Color box. Click on this box to display a palette so that you can choose a color for the curve. • Anti-aliased check box. Check this box to create a curve with smooth edges. • Auto erase check box. Check this box to use the currently selected fill color for drawing strokes when you draw over any existing lines formatted with the stroke color. • Preserve transparency check box. Check this box to prevent drawing on the transparent parts of the bitmap object.

DRAWING, PAINTING, AND ERASING BITMAP OBJECTS

103

• Opacity box. Change this setting to control the opacity value for the curve—either by typing in a value or by using the slider. Opacity value specifies the amount of transparency for the curve. • Blend Mode list. Use this list to specify a blending mode that controls how the curve will blend with content on other layers below the layer holding the curve. See Chapter 8, “Managing Images Using Layers,” to learn more about layers. To draw a curve, follow these steps:

1. Click on the Pencil tool in the Tools panel. The shape of the mouse pointer will change to a pencil.

2. Choose the desired settings in the Property Inspector.

3. Drag on the canvas to draw the curve. The curve will appear in the Document. Fireworks creates the bitmap curve on a new layer in the file.

TIP You can press and hold Shift while dragging the mouse pointer to constrain the curve to 45 degrees.

104

CHAPTER 5: WORKING WITH BITMAPS

Using the Brush Tool You use the Brush tool to paint strokes. Unlike the Pencil tool, however, you can choose a variety of stroke settings for the brush tool in the Property Inspector. The following list explains the stroke settings and other options available with the Brush tool: • Color box. Click on this box to open a palette you can use to choose a color for the stroke. • Tip size box. Use this box to specify the tip weight for the stroke—either by typing in a value or by using the slider. • Stroke category list. Use this list to choose from various available brush types, such as Air Brush and Oil.

• Tip preview box. Use this box to view a preview of the brush tip based on current size and edge settings. • Edge softness box. Use this box to specify the softness of the brush tip. • Texture amount box. Use this box to specify a percentage value for the brush texture. • Texture list. Choose a stroke texture from this list.

DRAWING, PAINTING, AND ERASING BITMAP OBJECTS

105

• Opacity box. Use this box to specify an opacity value for the curve—either by typing in a value or by using the slider. • Blend Mode list. Use this list to specify a blending mode for the painted strokes. • Preserve transparency check box. Check this box to prevent painting strokes on the transparent parts of the bitmap object.

To paint a brush stroke, follow these steps:

1. Click on the Brush tool in the Tools panel. The mouse pointer will change to depict the currently selected tip size.

2. Choose stroke settings as desired in the Property Inspector.

3. Drag on the canvas to paint brush strokes. The strokes will appear in the Document window.

106

CHAPTER 5: WORKING WITH BITMAPS

Using the Eraser Tool You use the Eraser tool to remove parts of a bitmap object. The Property Inspector provides a number of options for controlling how this tool works: • Size box. Use this box to specify the size of the eraser tip—either by typing in a value or by using the slider. • Edge softness box. Use this box to specify the softness of the eraser tip.

• Tip preview box. This box displays a preview of the eraser tip based on current size and edge settings. • Shape button. Click on the desired button to select either a square or round shape for the eraser. • Opacity box. Use this box to specify an opacity value for the eraser—either by typing in a value or by using the slider.

SELECTING PARTS OF BITMAP OBJECTS

107

To erase a part of a bitmap object, follow these steps:

1. Click on the Eraser tool in the Tools panel. The mouse pointer will change to depict the currently selected tip size and shape.

2. Choose settings from the Property Inspector as desired. Those settings will become active for the Eraser Tool.

3. Drag over areas to be removed. The specified areas will be erased.

Selecting Parts of Bitmap Objects After you’ve created or imported bitmap objects in a drawing, you may need to edit them. Fireworks provides various professional level photo editing and retouching techniques. You can either edit the entire bitmap object or specify a particular part of the bitmap object for editing. If you need to work with a specific part of a bitmap object, you need to select it first. To do so, you can use a variety of selection techniques provided by Fireworks. The following section discusses these techniques in detail. You can use these tools to select portions of a bitmap object: • The Marquee tool • The Magic Wand tool • The Lasso tool The following sections explain how to use each tool.

108

CHAPTER 5: WORKING WITH BITMAPS

Using the Marquee Tool Fireworks MX 2004 provides you with two Marquee tools: • Rectangular Marquee tool. Use this Marquee tool to create a rectangular selection area. • Oval Marquee tool. Use this Marquee tool to create an oval selection area.

The Property Inspector offers various options for controlling how each Marquee tool makes a selection. The following list explains these options: • Style list. Select one of the three constraint options for the selection shape: Normal, Fixed ratio, and Fixed size. If you choose one of the latter styles, enter the desired dimensions in the text boxes that activate below the style list. • Edge list. Use this list to specify the edge type for the selection.

SELECTING PARTS OF BITMAP OBJECTS

109

• Feather amount box. If you choose the Feather edge type, enter a value in this box to specify the amount of feathering (softening) to be applied to the selection.

NOTE See “Modifying the Selection Marquees” later in this chapter for more information on feathering.

To create either a rectangular or oval area, follow these steps:

1. Choose the desired Marquee tool from the Tools panel. The mouse pointer will change to a crosshair.

TIP You can select Anti-alias from the Edge list to ensure that the selection marquee has smooth edges. This option is available with all the bitmap selection tools.

2. Choose the desired Marquee settings from the Property Inspector.

110

CHAPTER 5: WORKING WITH BITMAPS

3. Drag on the image to select the desired area. The selection marquee will appear when you release the mouse button.

TIP You can draw a square or a circular selection marquee by holding Shift while you drag the mouse.

Using the Magic Wand Tool There might be situations when you need to select a part of a bitmap that has a particular color range. For example, if you have a bitmap image that has a white border, you may want to remove the white border. In such situations, you can use the Magic Wand tool to select the white border and remove it. Or you may have an object, such as some flowers, that contrasts strongly with its background. If you want to remove the background, the Magic Wand tool works well for making these types of selections, as well. The Magic Wand tool selects all the contiguous pixels that are in a similar color range. Use settings in the Property Inspector to specify how the Magic Wand tool works:

SELECTING PARTS OF BITMAP OBJECTS

111

• Tolerance box. Use this box to specify the color tolerance for the Magic Wand tool. This value specifies the color range for the pixels to be included in the selection marquee. A lower tolerance value will cause fewer pixels to become a part of the selection, while a higher tolerance value includes a wider range of colors. • Edge list. Use this list to specify the edge type for the selection. • Feather amount box. If you choose the Feather edge type, specify the amount of feathering to be applied to the selection in this box. To select a part of a bitmap object based on a color range, follow these steps:

1. Click on the Magic Wand tool in the Tools panel. The mouse pointer will change to a magic wand.

2. Choose the desired settings in the Property Inspector.

3. Click on the color that you want to select.

112

CHAPTER 5: WORKING WITH BITMAPS

All the surrounding pixels falling in the same color range will be selected. As you can see here, the first click with the Magic Wand tool may not include all the areas you want, like the centers of the daffodils here, because some of those areas don’t match the color tolerance you specified.

When that happens, you can Shift+click on additional areas in the image to add them to the selection. After using that technique, here’s how the full daffodil selection looks. Alt+click to remove areas from the selection.

SELECTING PARTS OF BITMAP OBJECTS

113

Working with Lasso Tools You use the Lasso tools to draw freeform selection areas. Fireworks offers two Lasso tools: • Lasso tool. Use this tool to draw a freehand selection area. • Polygon Lasso tool. Use this tool to draw a selection area by plotting points.

The Property Inspector provides the following options to set the Lasso tool: • Edge list. Use this list to specify the edge type for the selection. • Feather amount box. If you choose the Feature edge style, specify the amount of feathering to be applied to the selection in this text box.

114

CHAPTER 5: WORKING WITH BITMAPS

Using the Lasso Tool To draw a freehand selection area by using the Lasso tool, follow these steps:

1. Choose the Lasso tool from the Tools panel. The mouse pointer will change to a lasso.

2. Choose settings in the Property Inspector as desired.

3. Drag around the area to select. A blue guideline appears to indicate the selection border.

4. Release the mouse button after you’ve drawn around the area to select.

SELECTING PARTS OF BITMAP OBJECTS

115

A freehand selection marquee will appear around your selection, as with the selection around the bluebird shown here. There’s no doubt that this tool requires some patience to use. Here are a few hints to help you get started. First, get a graphics tablet like the Wacom Graphire, if at all possible. You’ll have better results when using a natural drawing motion rather than a mouse. After you make the initial selection, use Shift+drag and Alt+drag to add areas to and remove them from the selection. If needed, zoom in to a higher magnification so that you can be more precise in making your selections.

Using the Polygon Lasso Tool You might want to create a straight-edged, freeform selection marquee instead of the continuous marquee that is created by using the Lasso tool. In such situations, you use the Polygon Lasso tool. This tool allows you to define the perimeter of the area to be selected by clicking points to define the boundaries of the selection area.

116

CHAPTER 5: WORKING WITH BITMAPS

To draw a freehand selection area by using the Polygon Lasso tool, follow these steps:

1. Select the Polygon Lasso tool from the Tools panel. The mouse pointer will change to a polygonal lasso.

2. Choose settings in the Property Inspector as desired.

3. Click on the document to plot the points that define the perimeter of the selection area. The object will appear selected.

4. Double-click on the document or click on the first point that you plotted. The selection area will be closed.

SELECTING PARTS OF BITMAP OBJECTS

117

Modifying the Selection Marquees The selection area that you create by using the selection tools may not be precise. For example, it may not cover the entire area you want to select. Or it may include content you no longer want within the selection marquee. In such situations, you can modify the selected area. You can add area to or remove it from the selection marquee, invert the selection, or feather the edges of an existing selection. Next learn these techniques in detail. • To add to an existing selection marquee using any selection, press and hold Shift and then draw another marquee or click with the Magic Wand tool. The newly selected area will also become a part of the selection marquee. • To subtract from an existing selection marquee, press and hold Alt and then draw another marquee around or click on the part to be removed. The selection marquee will be modified accordingly.

TIP You can press and hold Alt and Shift while drawing a new selection marquee that overlaps the existing marquee to create a new marquee that covers just the intersecting area of the two marquees.

118

CHAPTER 5: WORKING WITH BITMAPS

• To invert a selection marquee, click on Select and then click on Select Inverse.

The selection inverts immediately. This example shows the entire image selected, except for the daffodil flower heads.

SELECTING PARTS OF BITMAP OBJECTS

119

• You can feather the selection edges to create a selection with edges that soften gradually, even if you forgot to specify feathering when you initially created the selection. You should feather the selection slightly if you plan to copy and paste the selected content; the feathering helps the pasted material blend with the surrounding image area rather than appearing as a starkly separate object. To feather a selection marquee, click on Select and then click on Feather. Enter a feather amount in the Feather dialog box that opens and then click on OK.

TIP You can move the selection marquee that you created in two ways. With any of the selection tools still selected, drag the selection. Or press an arrow key on the keyboard to move the marquee one pixel in the specified direction.

When you’re finished working with a selection area, you can remove it. Deselect the selection by using any of the following ways: • Create a new selection by using any of the available selection tools. • Click outside the selection marquee with the Marquee or Lasso tool. • Click on Select and choose Deselect from the menu that appears. • Press Ctrl+D.

120

CHAPTER 5: WORKING WITH BITMAPS

Retouching Bitmap Objects Fireworks provides various retouching tools that help you to enhance the appearance of a bitmap object. You can adjust sharpness, lighten or darken, smudge, or clone an object. Learn about these techniques in the following sections.

Adjusting Focus of a Bitmap Object You might want to draw a viewer’s attention to a specific part of an image. You can do so in two ways, either by sharpening that particular part or by blurring the rest of the image. Fireworks includes the following two tools that serve this purpose: • Blur tool. Use this tool to blur parts of an image. • Sharpen tool. Use this tool to sharpen parts of an image.

RETOUCHING BITMAP OBJECTS

121

The following list explains options for the Blur and Sharpen tools in the Property Inspector: • Brush tip size box. Use this box to specify brush tip weight—either by typing in a value or by using the slider. • Shape button. Click a button to select either a square or a round shape. • Intensity box. Use this box to specify the intensity with which blurring or sharpening is applied to the image. • Edge softness box. Use this box to specify the softness of the brush tip. To use the Blur or Sharpen tool, follow these steps:

1. Choose the Blur or Sharpen tool in the Tools panel. The mouse pointer will change to depict the currently selected tool.

2. Choose settings from the Property Inspector as desired.

122

CHAPTER 5: WORKING WITH BITMAPS

3. Drag on the image to apply the effect. The image will get blurred or sharpened accordingly. In this example, the flower has been blurred on the left side of the image but not the right.

Making a Bitmap Object Lighter or Darker Fireworks MX 2004 enables you to edit tones of an image. You can either lighten (dodge) or darken (burn) parts of an image by using the following tools: • Dodge tool. Use this tool to lighten parts of an image, as if those areas were underexposed during development. • Burn tool. Use this tool to darken parts of an image, as if those areas were overexposed during development.

RETOUCHING BITMAP OBJECTS

123

Following are the options available with Dodge and Burn tools that you can set by using the Property Inspector: • Brush tip size box. Use this box to specify brush tip weight—either by typing in a value or by using the slider. • Shape button. Click on a button to specify either a square or a round shape for the tool. • Edge softness box. Use this box to specify the softness of the brush tip.

• Exposure box. Use this box to specify the intensity with which blurring or sharpening is applied to the image. • Range list. Use this list to specify the image tones to be affected by the tools: the shadows, midtones, or highlights.

124

CHAPTER 5: WORKING WITH BITMAPS

You can select the desired color tone of an image to be affected by the Dodge and Burn tools by using the Range list in the Property Inspector. To use the Dodge or Burn tool, follow these steps:

1. Choose the Dodge or Burn tool from the Tools panel. The mouse pointer will change to depict the currently selected tool.

2. Choose settings from the Property Inspector as desired.

3. Drag on the image to apply the effect. The image will be lightened or darkened accordingly. In this example, I’ve burned in some of the shadow detail on the bird’s back, and then dodged some of the highlights to bring out the feather colors. I’ve also dodged the midtones and highlights on the bird’s head to help it stand out against a dark background.

RETOUCHING BITMAP OBJECTS

125

Smudging a Bitmap Object Smudging on an image gives the effect of dragging a finger through wet paint. The Smudge tool picks the color of the pixel from where you start dragging and blends it with surrounding pixels in the direction in which you drag. The following list explains the options available with the Smudge tool: • Brush tip size box. Use this box to specify brush tip weight—either by typing in a value or by using the slider. • Shape button. Click a button to select either a square or a round shape for the tool. • Pressure box. Use this box to specify the intensity with which smudging is applied to the image. • Edge softness box. Use this box to specify the softness of the brush tip. • Smudge color check box. Check this check box and use the accompanying palette button to specify the color to be used while smudging, if you want a color other than the color of the pixel from where you start dragging. • Use entire document check box. Check this box to use the entire document as a whole for smudging, instead of just the currently selected bitmap object.

126

CHAPTER 5: WORKING WITH BITMAPS

To use the Smudge tool, follow these steps:

1. Choose the Smudge tool from the Tools panel. The mouse pointer will change to depict the currently selected brush tip size.

2. Choose settings from the Property Inspector as desired.

3. Drag on the image to apply the effect. The pixels will get smudged.

RETOUCHING BITMAP OBJECTS

127

Cloning a Bitmap Object You can clone a selection to fix a minor defect in scanned images, such as scratches on an old photograph or a blemish on a model’s face. Cloning involves copying pixels from one part of the image and stamping them over the undesired parts. Cloning can also be used to create special effects. Fireworks MX provides you with the Rubber Stamp tool for cloning images. The following list explains the Property Inspector options available for the Rubber Stamp tool: • Stamp Size box. Use this box to specify the stamp size either by typing in a value or by using the slider. • Edge softness box. Use this box to specify the softness of the brush tip. • Source aligned check box. Check this box to align the sampling pointer with the stamp pointer.

TIP The pop-up menu for the Rubber Stamp tool now includes the Red Eye Removal tool. You can use it to remove the unwanted red or green appearance in the eyes of photographed subjects. The red or green areas actually represent light, typically from a camera flash, bouncing off the retinas in the back of the eyes.

128

CHAPTER 5: WORKING WITH BITMAPS

• Use entire document check box. Check this box to use the entire document as a whole for cloning, instead of just the currently selected bitmap object. • Opacity box. Use this box to specify an opacity value for the stamped pixels—either by typing in a value or by using the slider. • Blend Mode list. Use this list to specify a blending mode for stamping.

To clone pixels using the Rubber Stamp tool, follow these steps:

1. Click on the Rubber Stamp tool in the Tools panel. The mouse pointer will change to the sampling pointer.

2. Choose settings from the Property Inspector as desired.

RETOUCHING BITMAP OBJECTS

129

3. Click on the area from where you have to copy pixels. The mouse pointer will change to the crosshair pointer, and another pointer will appear for the stamp. The shape of the stamp pointer will depend on the currently selected stamp size.

4. Click or drag on the image to stamp pixels. The pixels from the source will be copied over the specified areas. Here, I’ve added a bee to the image.

TIP To select a different part of the image as the source, press Alt and click on that particular area.

This page intentionally left blank

6

Changing Colors and Fills

This chapter discusses the enhancements that you can make to stroke and fill colors. In this chapter, you’ll learn how to: Use the Tools panel to apply colors to a selected object Use the Colors panel group Apply various kinds of fills to a selected object Use stroke options Find and replace colors in a bitmap

132

CHAPTER 6: CHANGING COLORS AND FILLS

Fireworks MX 2004 enables you to manage colors in your documents by using various options available in the Tools panel, the Colors panel group, and the Property Inspector. The Tools panel contains various tools, such as the Paint Bucket tool, that enable you to apply color to both bitmap and vector objects. The Colors panel group contains the Swatches panel and the Color Mixer panel, which allow you to select or modify colors in Fireworks. The Property Inspector and the Tools panel provide you with several types of fill and stroke settings, such as brush strokes and pattern fills, which you can use to enhance the appearance of vector objects. You have already learned the basics of applying stroke and fill colors to vector objects by using the Property Inspector in Chapter 4, “Working with Vector Objects.”

Using the Tools Panel to Apply a Color The Colors section in the Tools panel contains various controls for applying and modifying colors to vector objects. In addition, the Bitmap section in the Tools panel contains some tools that you can use to apply colors to vector objects as well as bitmap objects. These tools include the Eyedropper tool, the Paint Bucket tool, and the Gradient tool. In this section, you’ll learn how to use the Colors section of the Tools panel and the Eyedropper and Paint Bucket tools.

NOTE The Gradient tool is used to apply gradient fills. Therefore, I’ll cover this tool in “Changing an Object’s Fill” later in this chapter.

USING THE TOOLS PANEL TO APPLY A COLOR

133

Using the Colors Section The Colors section of the Tools panel contains the following controls: • Stroke Color icon. Click on this button to activate the Stroke Color setting. • Stroke Color box. Click on this button to open the Stroke Color pop-up palette. You can use the Stroke Color palette to choose the desired stroke options.

• Fill Color icon. Click on this button to activate the Fill Color setting. • Fill Color box. Click on this button to open the Fill Color palette. You can use the Fill Color palette to set fill options, including a fill color.

TIP You also can access the Stroke Color and Fill Color palettes in the Property Inspector.

134

CHAPTER 6: CHANGING COLORS AND FILLS

• Set Default Stroke/Fill Color button. Click on this button to set the stroke color to black and the fill color to white for the currently selected object. • No Fill or Stroke button. Click on this button to set the stroke or fill color to none for the currently selected object. • Swap Stroke/Fill Colors button. Reverses the stroke and fill colors for the currently selected object.

TIP While working with vector objects, you can specify stroke and fill color settings before creating a vector object or after selecting an existing vector object.

Using the Eyedropper Tool You use the Eyedropper tool to pick a color from anywhere inside the Fireworks MX 2004 documents and apply it to an object’s fill or stroke color. This process of picking a color is also called sampling. You can set the Eyedropper tool to sample colors in the following ways: • 1-Pixel. Samples color of a single pixel. • 3x3 Average. Samples the average color value of a 3x3 pixel area. • 5x5 Average. Samples the average color value of a 5x5 pixel area.

USING THE TOOLS PANEL TO APPLY A COLOR

135

To sample a stroke or fill color and apply it to a vector object using the Eyedropper tool, follow these steps:

1. Select a vector object to format in the Document window.

2. Click on the Eyedropper tool in the Tools panel. The mouse pointer will change to an eyedropper.

3a. Click on the Stroke Color icon in the Tools panel if you want to sample the stroke color of the selected object. The Stroke Color box will become active. OR

3b. Click on the Fill Color icon in the Tools panel if you want to sample the fill color of the selected object. The Fill Color box will become active. 4. Set an appropriate color sampling setting in the Property Inspector.

136

CHAPTER 6: CHANGING COLORS AND FILLS

5. Click on the color to sample in a Fireworks MX document. The color will be sampled and applied to either the stroke or fill (as specified in Step 3) of the selected object.

TIP If you want to sample a color and use it to fill a bitmap object instead, use the Eyedropper tool to sample a new fill color and then use the Paint Bucket tool, described next, to apply the new fill color to the bitmap.

Using the Paint Bucket Tool You can use the Paint Bucket tool to apply color to both bitmap and vector objects. When you select the Paint Bucket tool, the Property Inspector displays a few more options (in addition to the fill color options) specific to the Paint Bucket tool. These options control the way Paint Bucket applies color to bitmap objects, as discussed in the following list:

USING THE TOOLS PANEL TO APPLY A COLOR

137

• Tolerance box. Specifies the color tolerance for the Paint Bucket tool. The color tolerance value specifies a color range for the pixels to be included in the area, which would be painted with the Paint Bucket tool. See “Using the Magic Wand Tool” in Chapter 5 to learn more about color tolerance. • Fill Selection box. Enables you to fill color in the selected areas of a bitmap object only. Checking this option disables the Tolerance setting. To apply color to a bitmap object or image by using the Paint Bucket tool, follow these steps:

1. Click on the Paint Bucket tool in the Tools panel. The mouse pointer will change to a paint bucket.

2. Click on the Fill Color box in the Property Inspector. The Color palette will open.

3. Click on a color swatch in the palette. The Fill Color box will display the selected color.

138

CHAPTER 6: CHANGING COLORS AND FILLS

4. Choose additional settings for the Paint Bucket tool in the Property Inspector. (Also make a selection in the image if you check the Fill Selection check box.)

5. Click on the area to fill. The fill color will be applied to the area.

In this example, I’ve filled the yellow petals of the daffodils with a pink color.

USING THE COLORS PANEL GROUP

139

Using the Colors Panel Group The Colors panel group includes the Swatches panel and the Color Mixer panel. These panels enable you to choose a new fill color. If a vector object is selected, it will immediately use the new fill color. Or you can select the desired color and then use the Paint Bucket tool as just described to apply the fill color to a bitmap object or a specific area within the bitmap object. To open the Colors panel group, do the following:

1. Click Window. The Window menu will appear.

2. Click on either Color Mixer or Swatches.

The Colors panel group will open, with the tab for the panel you specified in Step 2 selected.

140

CHAPTER 6: CHANGING COLORS AND FILLS

Exploring the Swatches Panel The Swatches panel displays colors as swatches (boxes). A collection of all the color swatches is called a color set or a swatch group. You can change the stroke or fill color of a vector object by choosing any of the color swatches. You also can change the fill color of bitmap objects or a selection in a bitmap object (by using the Paint Bucket tool). To apply stroke or fill color to a selected vector object by using the Swatches panel, follow these steps:

1. Use the Pointer tool to select the desired object. Blue selection handles will appear.

2a. Click on the Stroke Color icon in the Tools panel if you want to change the stroke color of a selected vector object. The Stroke Color box will become active. OR

2b. Click on the Fill Color icon in the Tools panel if you want to change the fill color of the selected vector object, or to load the Paint Bucket tool with the specified color to fill a bitmap object or selection. The Fill Color box will become active.

USING THE COLORS PANEL GROUP

141

3. Click on any of the swatches in the Swatches panel. To fill a bitmap or selection, use the Paint Bucket tool as described earlier. The specified color will be applied to the vector object.

Choosing Another Swatch Group There might be a situation when you want to restrict the colors that you are using in a document to a particular color set. For example, you might want to use only the default Windows System colors so that your image will display consistently on viewers’ systems. In such a situation, you can load the required color set in the Swatches panel and then apply only the colors in the current swatch group within the image.

142

CHAPTER 6: CHANGING COLORS AND FILLS

To select a swatch group, follow these steps:

1. Click on the Options menu button in the Swatches panel. The Swatches panel Options pop-up menu will appear.

2. Click on the desired swatch group. The Swatches panel will display the swatches in the selected swatch group.

TIP The Color Cubes set appears first in the Swatches panel by default.

Adding a Swatch The Swatches panel Options pop-up menu also provides several other options that allow you to arrange or modify the swatch group: • Add Swatches. Appends swatches from a custom swatch group to the current swatches. • Replace Swatches. Loads a custom swatch group in the Swatches panel. • Sort by Color. Sorts the swatches in the Swatches panel according to their color values. Typically, you will perform this action to add (sample) a color from a bitmap image to the Swatches panel, making that color available for use in vector objects and in other Fireworks documents.

USING THE COLORS PANEL GROUP

143

To use the first option described above to add a color to the current color set, use the following steps:

1. Click on the Eyedropper tool in the Tools panel. The mouse pointer will change to an eyedropper.

2. Select a sample setting for the Eyedropper tool in the Property Inspector.

3. Click on the color to sample on the canvas.

4. Click on the empty space (gray-tan bar) below the last swatch in the Swatches panel.

144

CHAPTER 6: CHANGING COLORS AND FILLS

The sampled color will be added as a new swatch at the bottom of the Swatches panel.

Removing a Swatch To remove a color swatch from the current color set, follow these steps:

1. Press and hold the Ctrl key; point to the swatch that you want to remove in the Swatches panel. The mouse pointer will change to scissors.

2. Click on the swatch. The swatch will disappear from the color set.

USING THE COLORS PANEL GROUP

145

CAUTION

TIP

You can’t undo adding or deleting a swatch, so be careful when removing swatches, especially if you’re removing a swatch from one of the default color sets.

Choose Clear Swatches from the Swatches panel Options pop-up menu to remove all the swatches from the Swatches panel.

Using the Color Mixer Panel You can use the Color Mixer panel to create new colors and apply them to objects. Before you learn to create colors, however, you need to understand the basics of color models. A color model is a scheme for calculating color values. The following list describes the color models available in Fireworks MX 2004: • RGB. Creates colors by combining varying values of red, green, and blue. These values can range from 0–255 for each of the three RGB color components. If you set red, green, and blue to 0, you’ll get black. Similarly, if you set red, green, and blue to 255, you’ll get white. Your computer screen combines red, green, and blue light to create the colors you see, so use the RGB color model when you’re creating images for on-screen use. • Hexadecimal. Expresses RGB color values in the hexadecimal number system. For example, white is expressed as 000000 and black as FFFFFF. This model enables you to specify colors with great precision for exact matching. • CMY. Creates colors by combining varying values of cyan, magenta, and yellow. These values can range from 0–255 for each of the three CMY color components. If you set cyan, magenta, and yellow to 0, you’ll get white. Similarly, if you set cyan, magenta, and yellow to 255, you’ll get black.

146

CHAPTER 6: CHANGING COLORS AND FILLS

Because full-color printed output combines cyan, magenta, yellow, and black inks, use this model when creating graphics to be printed. • HSB. Creates colors based on the hue, saturation, and brightness values. Hue represents the color and can have a value ranging from 0 to 360 degrees. Saturation represents the purity of the color and can have a value ranging from 0% to 100%. Brightness represents the relative lightness or darkness of the color and can have a value ranging from 0% to 100%. • Grayscale. Creates colors in shades of gray by using a percentage of black. To apply colors by using the Color Mixer panel, you can create a color by entering values for the selected color model’s components, or you can pick a color from the color bar.

Choosing a Color Model Before you can apply a color to a selected object, use these steps to specify a color model:

1. Click on the Mixer tab in the Colors panel, if needed. The Color Mixer panel will open.

2. Click on the Options menu button in the Color Mixer panel. The Color Mixer panel options menu will appear.

3. Click on the desired color model. The Color Mixer panel will display the settings for the selected color model.

USING THE COLORS PANEL GROUP

147

Applying a Color Composed of Mix Settings After you’ve chosen a color model, you can use the text boxes at the right side of the Color Mixer panel to mix and apply a color to a selected object.

1. Use the Pointer tool to select the desired object. Blue selection handles will appear.

2a. Click on the Stroke Color icon in the Color Mixer panel if you want to change the stroke color of a selected vector object. The Stroke Color box will become active. OR

2b. Click on the Fill Color icon in the Color Mixer panel if you want to change the fill color of the selected vector object, or to load the Paint Bucket tool with the specified color to fill a bitmap or selection. The Fill Color box will become active.

TIP You can also use the Fill and Stroke color boxes in the Color Mixer panel to choose whether to apply the new color to the object’s fill or stroke.

148

CHAPTER 6: CHANGING COLORS AND FILLS

3. Enter appropriate values for each color model component. To fill a bitmap or selection, use the Paint Bucket tool as described earlier. The new color will be created and applied to the selected object or area.

Applying a Color by Using the Color Bar To apply color to an object or selection by using the color bar in the Color Mixer panel, follow these steps:

1. Use the Pointer tool to select the desired object. Blue selection handles will appear.

2a. Click on the Stroke Color icon in the Color Mixer panel if you want to change the stroke color of a selected vector object. The Stroke Color box will become active.

USING THE COLORS PANEL GROUP

149

OR

2b. Click on the Fill Color icon in the Color Mixer panel if you want to change the fill color of the selected vector object, or if you want to load the Paint Bucket tool to fill a bitmap or selection. The Fill Color box will become active.

3. Click anywhere in the color bar to pick a color. To fill a bitmap or selection, use the Paint Bucket tool as described earlier. The color that you pick will be applied to the selected object or area.

150

CHAPTER 6: CHANGING COLORS AND FILLS

Changing an Object’s Fill Fireworks MX 2004 enables you to change the fill color for vector and bitmap objects as just described. In addition, you can apply gradients, patterns, and Web-safe fills to vector objects. In this section, you will learn to apply various types of fills to an object.

Applying Gradient Fills A gradient is a smooth transition between two or more colors. The Bitmap section of the Tools panel contains the Paint Bucket and Gradient tools, both on the Paint Bucket tool menu. Use the Gradient tool to apply gradient fills to vector objects, and use the Paint Bucket tool to apply gradient fills to bitmap objects or a selection within a bitmap object. Fireworks offers various gradient fill types, such as linear and radial. You can choose gradient types and colors for either tool by using the Property Inspector. To apply a gradient fill by using the Gradient tool, follow these steps:

1. Use the Pointer tool to select the desired object. Blue selection handles will appear.

2. Choose the Gradient or Paint Bucket tool from the Tools panel. The mouse pointer will change to a paint bucket.

CHANGING AN OBJECT’S FILL

151

TIP You can select the pixels of a bitmap object by Ctrl+clicking on the layer in the Layers panel. See Chapter 8, “Managing Images by Using Layers,” to learn more about working with layers.

3. Choose a gradient type from the Gradient list in the Property Inspector. To apply the gradient to a bitmap or selection in a bitmap, make the selection, choose the Paint Bucket tool, and click on the selected object or area.

TIP You can drag on an object to control the start and stop point for the gradient. If you drag on the canvas over multiple objects, Fireworks creates a new layer with the gradient content on it.

152

CHAPTER 6: CHANGING COLORS AND FILLS

The gradient will appear immediately.

4. Click on the Fill Color box in the Property Inspector (with the Gradient tool selected). A palette of color choices for the gradient will appear.

5. Click on a color swatch. The Color palette will open.

CHANGING AN OBJECT’S FILL

153

6. Click on the desired color in the Color palette.

The color swatch and the gradient will display the new color.

7. To add another color in the gradient, click on a location below the gradient preview. The swatch will appear.

NOTE Click on the area above the gradient preview to add an opacity swatch. An opacity swatch defines the opacity of the gradient blend at the specified points.

154

CHAPTER 6: CHANGING COLORS AND FILLS

8. Change the colors for additional swatches as required.

9. Drag color and opacity swatches left or right. The transition between colors will change accordingly.

10. Press Enter when you have finished editing the gradient. The new gradient will become the active gradient. If needed, use the Paint Bucket tool to reapply the gradient to a bitmap object or selection in an object.

NOTE To edit a gradient, select the object or layer that has the gradient, choose the Gradient tool, and follow Steps 3 through 10.

Transforming Gradient Fills When an object with a gradient is selected, a set of black lines and handles appears on the object. These handles can be used to transform the object’s fill.

CHANGING AN OBJECT’S FILL

155

• Round Handles. Drag to move the origin point of the fill. • Square Handles. Drag to modify the fill dimensions (width). You can drag outside the boundaries of an object or the canvas to make the transition between colors more gradual. Or you can drag toward the round handle to specify a smaller fill area. • Connecting Lines. Drag to rotate the fill.

Applying a Contour Gradient For the first time, Fireworks MX 2004 offers the ability to apply a gradient within the contours of a path. This technique helps you apply more realism within a graphic you’re creating, as you can create nicely blended areas. You can fill an open path with a gradient whether or not you apply a stroke to the path.

TIP For ease of editing, I recommend adding at least a onepoint stroke to the path. Remove the stroke after you’ve finished applying the gradient fill.

156

CHAPTER 6: CHANGING COLORS AND FILLS

1. Use the Vector Path tool (it’s on the Pen tool menu) to draw the path to fill.

2. Use the Pointer tool to select the path. Blue selection handles will appear.

3. Choose the Gradient tool from the Tools panel. The mouse pointer will change to a paint bucket.

4. Choose the desired Gradient settings in the Property Inspector and use the handles to transform the gradient as desired.

CHANGING AN OBJECT’S FILL

157

In this example, I’ve created mountains by filling two paths and applying contour gradients within them, even though the paths weren’t closed shapes. Note that to have the mountains bleed off the canvas, I extended the paths off the canvas. I also removed a previously applied stroke from each of the paths.

Applying Pattern Fills Fireworks enables you to apply a predefined image as a pattern to vector objects, bitmap objects, and selections. To apply a pattern fill to a vector or bitmap object, follow these steps:

1. Use the Pointer tool to select the vector object, or use a selection tool to select a bitmap object.

2. Choose the Paint Bucket tool from the Tools panel.

158

CHAPTER 6: CHANGING COLORS AND FILLS

3. Open the Fill category list in the Property Inspector, point to pattern, and choose the pattern to apply from the submenu that appears.

4. Choose other settings for the pattern as desired in the Property Inspector. If needed, click in the bitmap selection to use the Paint Bucket tool to apply the pattern. The pattern will be applied to the object or selection.

TIP If you scroll all the way down to the bottom of the submenu of patterns and then click on Other, you can use the Locate file dialog box that appears to choose a graphic file to apply as a pattern fill.

CHANGING AN OBJECT’S FILL

159

Applying Web Dither Fills You should ideally use Web-safe colors when creating graphics for the Web. Web-safe colors are a set of default colors that Web browsers use, regardless of the platform. But there might be a situation where you have to use a non-Web-safe color. In such a situation, you can apply Web Dither fills. A Web Dither fill simulates a non-Web-safe color, when viewed from a distance, by blending two Web-safe colors.

NOTE See Chapter 10, “Optimizing and Exporting Graphics,” to learn more about dithering and Web-safe colors.

1. To apply a Web Dither fill to a selected vector object or a bitmap selection containing a non-Web-safe color, choose the Paint Bucket tool and then choose Web Dither from the Fill category list in the Property Inspector.

2. Then click on the Fill Color box to open the Web Dither fill options palette to edit the Web Dither fill. Click on the Color pop-up box either in the Property Inspector or the Tools panel to open the Web Dither fill pop-up window.

160

CHAPTER 6: CHANGING COLORS AND FILLS

3. Click on the Source Color box and use the pop-up palette that appears in order to choose the non-Web-safe color you want to emulate.

4. The Dither color boxes will show the two Web-safe colors that will be used to create the Web Dither fill.

5. Press Enter to close the palette and then click in the bitmap selection, if needed, to apply the Web Dither fill.

USING STROKE OPTIONS

161

Using Stroke Options Fireworks MX 2004 provides you with a wide variety of stroke options, such as calligraphy and watercolor, to enable you to create visually appealing strokes around vector shapes. You learned the basics of changing strokes in Chapter 4, “Working with Vector Objects.” In addition to basic stroke options, there are some advanced stroke options available that enable you to add further interest to strokes. You can adjust the placement of strokes with respect to the object outline to control the overall size of the object to which the stroke is applied. In the following sections, you’ll learn about these advanced options.

Applying Advanced Stroke Options to a Vector Object Fireworks includes the Edit Stroke dialog box. It enables you to define precise stroke characteristics, such as the number of brush tips. You can access this dialog box either from the Tools panel or from the Property Inspector. To use the Edit Stroke dialog box to apply new stroke settings to a selected vector object, do the following:

1. Use the Pointer tool to select the vector object. Selection handles will appear.

2. Click on the Stroke Color box in the Tools panel. The Stroke Color palette will appear.

3. Click on the Stroke Options button. The Stroke Options palette will open.

162

CHAPTER 6: CHANGING COLORS AND FILLS

4. Choose a category from the Stroke category drop-down list.

5. Choose a stroke appearance from the Stroke name dropdown list.

6. Use the color box to specify a stroke color.

7. Adjust the Edge softness as needed.

8. Adjust the Tip size as desired.

9. Click on the Advanced button. The Edit Stroke dialog box will open.

USING STROKE OPTIONS

163

The Edit Stroke dialog box includes the Options, Shape, and Sensitivity tabs. The following subsections describe how to use the settings on these tabs.

10. Apply the desired settings and then click on OK. Click on the Stroke Color box in the Tools panel to close the Stroke Options palette.

NOTE You can view the effect of the settings that you make in the preview area at the bottom of the Edit Stroke dialog box.

This example shows the Charcoal stroke type applied to the text, with some custom options set for the stroke type.

164

CHAPTER 6: CHANGING COLORS AND FILLS

Exploring the Options Tab The Options tab contains various general stroke options, as discussed in the following list: • Ink amount box. Specifies the percentage amount of the ink that the stroke uses. • Spacing box. Specifies the distance between the brush marks in the stroke. • Flow rate box. Controls the speed at which the brush stroke is applied. • Build-up check box. Causes brush strokes to overlap to create dense strokes.

• Texture box. Controls the amount of texture that is applied to the stroke. • Edge texture box. Controls the amount of texture that is applied at the stroke edges. • Edge effect list. Contains a list of special effects that can be applied to the stroke edges.

USING STROKE OPTIONS

165

• Tip box. Specifies the number of tips that the brush stroke will have. • Tip spacing box. Controls the spacing of brush tips if more than one tip is specified in the Tip box. • Variation list. Controls the color variation of brush tips if more than one tip is specified in the Tip box.

Exploring the Shape Tab The Shape tab contains various options that control the shape of the brush tip, as discussed in the following list: • Tip Preview area. Displays the effect of current shape settings on the brush tip. • Square check box. Sets the brush tip to a square instead of a circle. • Size box. Specifies the size of the brush tip. • Edge box. Controls the edge softness of the brush tip. • Aspect box. Specifies the width of the brush tip. • Angle box. Controls the brush tip angle.

166

CHAPTER 6: CHANGING COLORS AND FILLS

Exploring the Sensitivity Tab The Sensitivity tab contains options for controlling the effect of speed and pressure on the stroke when you are using a pressure-sensitive Wacom tablet and pen. These options are discussed in the following list: • Stroke property list. Selects the stroke property that will be affected by the following options. • Pressure box. Controls the effect of pressure on the selected property. • Speed box. Controls the effect of drawing speed on the selected property. • Horizontal box. Controls the effect of horizontal drawing on the selected property. • Vertical box. Controls the effect of vertical drawing on the selected property. • Random box. Controls the overall randomness.

Placing Strokes Fireworks enables you to specify the placement of stroke relative to an object’s outlines. You can center the stroke to an object’s outline or place the stroke inside or outside an object’s outline.

USING STROKE OPTIONS

167

To change the placement for the stroke on the selected vector object, follow these steps:

1. Click on the Stroke Color box in the Tools panel. The Stroke Color pop-up window will open.

2. Select the required placement option from the Location of Stroke Relative to Path pop-up menu.

168

CHAPTER 6: CHANGING COLORS AND FILLS

The stroke will be repositioned accordingly.

Replacing Colors in a Bitmap Image Fireworks MX 2004 offers the new Replace Color tool, found on the Rubber Stamp tool menu. With it, you can literally paint one color over another within a bitmap image. With this tool, color replacement operations that used to be very cumbersome become easy, as illustrated next.

REPLACING COLORS IN A BITMAP IMAGE

169

1. Choose the Replace Color tool from the Rubber Stamp tool menu in the Tools panel. The Property Inspector will display settings for the Replace Color tool.

2. Click on the Change color box. The mouse pointer will change to an eyedropper and the color palette will open.

3. Click on the color to replace in the image. That color will be loaded in the Change color box.

170

CHAPTER 6: CHANGING COLORS AND FILLS

4. Click on the To color box. The color palette will open.

5. Click on the desired replacement color. That color will be loaded in the To color box.

6. Change brush settings as desired.

7. Drag on the image over the area where you want to replace colors. As you can see in this example, I’m replacing the deep yellow color in the center of each daffodil with red.

7

Using Text in Graphics

Attractive images aren’t enough to communicate about and sell a product or service. To present a company profile, product information, and pricing, a graphic or Web site needs to incorporate text. To attract the customer’s interest to the text, the text should be as attractive and interesting as the graphics themselves. Fireworks MX 2004 enables you to include text in your graphics with ease. You can type new text in a Fireworks document or import existing text. You can format this text by using the same text formatting choices available in most of the word processing programs. Additionally, you can shape text along a path and apply various effects to make the text attractive. In this chapter, you’ll learn how to: Add new text to a graphic Import text Enhance the appearance of the text Shape text by using a path Check text spelling

172

CHAPTER 7: USING TEXT IN GRAPHICS

Adding Text to a Fireworks Document Fireworks MX enables you to add text to a graphic by using the text tool or by importing text stored in a file that you created with a word processing program. In this section, you’ll see how to add and enhance your text by using each of these techniques.

Using the Text Tool The Fireworks Tools panel includes the Text tool, which is used to add text to a graphic. When you add text, the Text tool appears in a rectangular container called a text block. By default, the text block uses auto-sizing; the size of the text block increases or decreases depending on the size of the text and the amount of text you enter. In addition, Fireworks offers you the option of creating a fixed-width text block, which arranges the text depending on the size of the text block you specify. • Auto-size text block • Fixed-width text block

ADDING TEXT TO A FIREWORKS DOCUMENT

173

To add text to a graphic, follow these steps:

1. Click on the Text tool in the Tools panel. The mouse pointer will change to an I-beam.

TIP You can also press T to select the Text tool.

2. Choose the desired formatting settings from the Property Inspector. For more on the available formatting choices, see “Enhancing the Appearance of Text” later in this chapter.

3a. Click on the document. An auto-size text block will appear. TIP An auto-size text block contains a white circle in the upper-right corner.

174

CHAPTER 7: USING TEXT IN GRAPHICS

OR

3b. Drag the mouse to draw a marquee in the desired location and shape for the text block. A fixed-width text block will appear.

TIP Press Esc if you’re not satisfied with the size or shape of the text box you’ve created. You can then redraw it.

TIP A fixed-width text block contains a white rectangle in the upper-right corner.

4. Type the text into the text block. Press Enter (Return) to create a new paragraph, if needed. The text will appear in the document.

TIP To toggle between an auto-size and a fixedwidth text block, doubleclick on the white circle or rectangle in the upperright corner.

ADDING TEXT TO A FIREWORKS DOCUMENT

175

Importing Text Certain types of text that you want to include in a text or a graphic may already exist within a word processing document. Rather than retyping text (and possibly introducing errors as you do so), you can use one of two techniques to place the text in your Fireworks document:

TIP Importing a text file adds all of the text in the file to your Fireworks document. However, you can simply delete any unwanted text after the import operation.

• Copy and paste the text from the word processing file to the Fireworks document. This process doesn’t copy any formatting applied to the text in the word processing document. • Import the text file, which typically does import formatting, as well. You can import an RTF (Rich Text Format) or an ASCII (plain text) TXT file. While ASCII files do not include formatting, RTF files include settings for font, size, style, and alignment that import along with the text. If you import an ASCII file, the text appears in the default font and size (12 pt.). To import a file that contains text, follow these steps:

1. Click on File. The File menu will appear.

2. Click on Import. The Import dialog box will open.

176

CHAPTER 7: USING TEXT IN GRAPHICS

3. Navigate to the disk and folder that holds the file to import.

4. Choose RTF Text (*.rtf) or ASCII Text (*.txt) from the Files of Type list in the Import dialog box.

5. Click on the File to import. 6. Click on Open. The mouse pointer will change to an insertion bracket.

ADDING TEXT TO A FIREWORKS DOCUMENT

177

7. Click on the canvas in the spot where you want the upperleft corner of the text block to appear. The text block containing the text from the file will appear.

8. Resize the text block as desired.

178

CHAPTER 7: USING TEXT IN GRAPHICS

Enhancing the Appearance of Text To make your graphics and Web page appealing, or to enhance the readability of text that you’ve added, you may need to enhance the text’s appearance. Fireworks provides you with a number of options that enable you to modify text. For example, you can apply the bold or italics style to mark important pieces of information, and you can resize heading text so that it stands out from the rest. You also can change text alignment per your requirements. You can change the spacing between characters and paragraphs. Last, but not the least, you can attach text to a path to make the text flow along the path. When you select a block of text, the options for modifying text appear in the Property Inspector.

ENHANCING THE APPEARANCE OF TEXT

179

Formatting a Text Block The Property Inspector contains a number of options, such as Font list and Size list, for applying familiar types of formatting to text, as follows: • Font list. Choose a font for the text. • Size box. Choose a size for the text. • Color box. Click on this box and then click on a color for the text in the palette that appears. • Bold, Italic, and Underline buttons. Click on any of these buttons to apply the corresponding attribute to the text.

TIP Remember that when you’re changing the entry for any Property Inspector box, like the Size box, you can type an entry or use the accompanying slider and then press Enter to apply your change.

180

CHAPTER 7: USING TEXT IN GRAPHICS

• Text Orientation button. Click on this button and then choose the desired orientation—such as horizontal left to right or horizontal right to left— from the pop-up menu that appears. • Alignment buttons. Click on an alignment button to left-, right-, or center-align the text. Additional buttons enable you to justify or stretch the text in the text block. To format text, follow these steps:

1. Use the Pointer tool to select the text block. (If you have trouble, select the layer holding the text first, as described in Chapter 8.) The text block will be selected.

2. Change the font, size, style, alignment, and orientation as desired. The appearance of the font will change.

ENHANCING THE APPEARANCE OF TEXT

181

TIP Selecting a text block formats the entire text. However, if you need to format only specific text within the text block, select the Text tool and then drag over the text to format after you select the text block. You also can use the Text tool to edit text within a text block you have previously selected.

TIP You also can apply new formatting options by using the Text menu.

Working with Text Spacing When it comes to text, readability trumps style. You may need to adjust the spacing for text to ensure that viewers will be able to read it easily, both onscreen or when printed. You can specify the amount of space to be inserted between the characters and between the lines of text. You also can specify spacing between paragraphs.

TIP To change the kerning between two characters, select the Text tool and click between the characters. To specify spacing for a group of characters, select the characters by using the Text tool. Finally, to specify spacing for all the characters, select the text block.

182

CHAPTER 7: USING TEXT IN GRAPHICS

The Property Inspector offers a number of options for working with text spacing: • Kerning box. Specify the amount of space between characters. • Leading box. Specify the amount of space between lines within a paragraph. • Paragraph Indent box. Specify an indentation value for the first line of a paragraph.

• Space Preceding Paragraph box. Specify the amount of space preceding a paragraph when the selected text block includes multiple paragraphs. Pressing Enter (Return) within a text block creates a new paragraph. • Space After Paragraph box. Specify the amount of space following a paragraph when the selected text block includes multiple paragraphs. • Horizontal Scale box. Choose a setting to expand or contract the width of your text horizontally. Increasing this setting widens the characters and vice versa.

ENHANCING THE APPEARANCE OF TEXT

183

TIP By default, each font that you use specifies the amount of space between characters. If you need to specify your own value, uncheck the Auto kern check box and specify a value in the Kerning box.

TIP You can specify the leading value as a percentage or in pixels. To change the units used for specifying leading, choose the desired unit type from the Leading Units list.

184

CHAPTER 7: USING TEXT IN GRAPHICS

To change the spacing for text, follow these steps:

1. Use the Pointer tool to select the text block.

2. Adjust spacing settings as desired. The spacing of the text will change on the canvas.

Changing Text Stroke Color and Fill You can change the stroke color for text or apply any type of fill by using the Stroke color box and the Fill color box in the Tools panel. Just be sure that the text is large enough for the changes to appear attractive without degrading readability for the text.

ENHANCING THE APPEARANCE OF TEXT

185

To apply stroke and fill to the text, follow these steps:

1. Use the Pointer tool to select the text block. (In this case, what appears to be a logo graphic is actually a character from the Wingdings font, sized in a large size.)

2. Click the Stroke color box. A palette will appear.

3. Click on the desired stroke color. The outline (stroke) of the text will change to the specified color.

4. Click on the Fill color box. A palette will appear.

5a. Click on the desired fill color. The text will change to the specified color. OR

5b. Click on Fill Options. The fill palette will appear.

186

CHAPTER 7: USING TEXT IN GRAPHICS

6. Choose the desired fill type from the Fill Category dropdown list. Settings for that fill type will appear.

7. Choose the desired fill settings and press Enter. The text will reflect the new fill settings.

TIP Fireworks also includes a Text Editor that offers the same options as the Property Inspector. It can be more convenient to use the Text Editor if a block includes a lot of text. To display the selected text in the Text Editor, open the Text menu and click on Editor.

ENHANCING THE APPEARANCE OF TEXT

187

Attaching Text to a Path You can make the text in your document appear curvy to make it appear different from the rest. For example, you may want to add a wave to your company slogan to attract the viewer’s attention. To curve text, first create a curved path and then attach the desired text to this path. See “Drawing Curved Paths (Bézier Curves)” in Chapter 4 for more information on creating paths. To attach text to a path, follow these steps:

1. Create both the text and the path on the canvas.

2. Use the Pointer tool to select the text block.

3. With the Pointer tool still selected, Shift+click on the path. The path will also be selected.

188

CHAPTER 7: USING TEXT IN GRAPHICS

4. Click on the Text menu. The Text menu will appear.

5. Click on Attach to Path. TIP Alternatively, select both the text and the path and then press Ctrl+Shift+Y.

The text will be attached to the path. You can now reposition the object, if needed.

ENHANCING THE APPEARANCE OF TEXT

189

Spell Checking Text A spelling error undermines all the formatting work that you do to make text appealing and readable. Fireworks offers a Check Spelling command you can use to check spelling in a selected text block. To spell check the text in the current document, follow these steps:

1. Use the Pointer tool to select the text block.

2. Click on the Text menu. The Text menu will appear.

3. Click on Check Spelling. The Check Spelling dialog box will open. It will identify any word not recognized by the active dictionaries by highlighting the word in the Word found area at the top of the dialog box.

TIP The first time you check spelling in Fireworks, a message box prompts you to choose a spelling language dictionary. Click on OK, choose the desired dictionary and settings in the Spelling Setup dialog box that appears, and then click on OK. You can use the Spelling Setup command on the Text menu to change spell check settings at a later time.

190

CHAPTER 7: USING TEXT IN GRAPHICS

4. Specify whether or not to change the word, as follows: • Ignore. Skips the word without changing it. (Ignore All ignores all instances of the found word.) • Change. Changes the word to the spelling shown in the Change to text box. To choose an alternative correction, click on the desired spelling in the Suggestions list before clicking on Change. Change All changes all instances of the found word.

5. Repeat Step 4 for each spelling error identified in the Check Spelling dialog box. When the spell checker finds no more incorrect words in the current selection, it will display a message box asking whether you want to check the rest of the document.

6. Click on OK. The spell check will continue. If the spell checker finds additional misspellings, address them as described in Step 4. When the spell check finishes, a message box telling you that the spell check is complete appears.

ENHANCING THE APPEARANCE OF TEXT

191

7. Click on OK. The spell checker will close.

This page intentionally left blank

8

Managing Images by Using Layers

In Fireworks MX 2004, layers work like a stack of transparency film. When you stack multiple sheets of the film, you can see the contents of each sheet. Fireworks MX 2004 stores each object that you create on a layer. You can use the layers to arrange and overlap objects as desired. For example, you can layer a shape or an object behind a logo in a graphic you create. Because each element in the graphic remains a separate object on a separate layer, you retain the ability to move and format both the logo and the shape as needed. Use the Layers panel in Fireworks MX 2004 to create and manage layers. In this chapter, you’ll learn how to: Use the Layers panel Create new layers Use layers to control image appearance

194

CHAPTER 8: MANAGING IMAGES BY USING LAYERS

Using the Layers Panel Fireworks includes the Layers panel that helps you work with layers in your graphics. The Layers panel lists each of the layers in your document file. The objects on the topmost layer in the list appear farther forward (in front) than the other objects in the file. The objects on the bottom layer in the list appear farther back (behind) than all other objects in the file. Objects in between are overlapped based on their position in the list of layers in the Layers palette. The Layers panel also contains another layer named Web Layer. This layer contains various Web objects, such as hotspots and slices, and is the topmost layer. You cannot change the Web Layer’s position in the list. That’s because the slice and hotspot information must overlay other information in the image file.

TIP See Chapter 11, “Creating Hotspots and Slices,” for more information about hotspots and slices.

The Layers panel includes a folder icon beside each layer name. When open, the folder lists all the objects stored on the layer. For example, a Buttons layer may contain all the button objects present in the graphic.

USING THE LAYERS PANEL

195

To collapse a layer in the Layers panel, click on the minus icon to the far left of the layer name. To expand the objects, click on the plus icon. You can use the Layers panel to work with either the entire layer or with a specific object present on the layer; to do the latter, click on the object in the Layers panel to select it.

The Layers panel enables you to create, delete, and manipulate layers. You can use the buttons at the bottom of the panel, shown next, or the Layers panel Options pop-up menu. • New/Duplicate Layer. Use this button to create new layers or duplicate the existing ones. • New Bitmap Image button. Use this button to add a layer onto which you want to place imported bitmap graphics. • Delete Selection. Use this button to delete the selected layer or object.

196

CHAPTER 8: MANAGING IMAGES BY USING LAYERS

The Layers Options pop-up menu provides commands you can choose to create, duplicate, show, and hide layers. To display this pop-up menu, click on the icon in the upper-right corner of the Layers panel. The following list explains some of the options present in the Layers Options pop-up menu: • New Layer. Creates a new layer. • Duplicate Layer. Duplicates a selected layer. • Share This Layer. Shares a layer across all the frames in a graphic. • Single Layer Editing. Protects the objects on layers, other than the selected one, from unwanted changes. • Flatten Selection. Merges all the selected vector and bitmap objects with the bitmap object that lies next to the bottommost selected object. • Merge Down. Merges the current layer with all the layers below it in the panel. • Hide All. Hides all the layers. • Show All. Shows all the layers. • Lock All. Locks all the layers to prevent them from being edited. • Unlock All. Unlocks all the layers.

CREATING LAYERS

197

Creating Layers Whenever you create a new bitmap or vector object, by default Fireworks adds the object to the currently selected layer. Each object that you create farther on the layer will be listed under the folder representing the layer. For example, say you have a layer named Background in your graphic, and it contains a bitmap object. Now, if you add a rectangular object, it will be added to the Background layer by default. To have more control, you would instead want to create the new rectangle object on a different layer. To add an object to its own layer, you need to create the new layer before creating the object. When you create a new layer, it appears above the currently selected layer in the Layers panel. To create a new layer, follow these steps:

1. Click on the New/Duplicate Layer button at the bottom of the Layers panel. A new layer will appear in the Layers panel above the previously selected layer. By default, the layer uses the name Layer number, with the number value representing the order in which the layer was added into the document.

198

CHAPTER 8: MANAGING IMAGES BY USING LAYERS

TIP Alternatively, you can choose New Layer from the Layers Options pop-up menu. When you do so, the New Layer dialog box opens. Enter a name for the new layer in the Name text box and then click on OK.

2. Double-click on the default name for the new layer that you added in Step 1. A pop-up box will appear.

3. Type a new layer name in the Layer Name text box and press Enter. The new layer name will appear in the Layers panel.

CREATING LAYERS

199

4. Create the desired object on the new layer. The object will be added to the new layer that you created.

5. Double-click on the default object name in the Layers panel. The name will be selected.

6. Type a name for the object in the text box and press Enter. The name of the object will change.

200

CHAPTER 8: MANAGING IMAGES BY USING LAYERS

Notice that because the new object appears on the topmost layer listed in the Layers panel, the object appears in front of the content of other layers. See the later sections called “Arranging a Layer” and “Blending Layers” to learn how to integrate the layer content more effectively in the document.

Working with Layers You can use layers to compose an image by overlapping and arranging the layer content. You can hide a layer for ease of working with the content on another layer, duplicate a layer, and move layers to control how image content overlaps. To work with a particular layer, you need to select the layer in the Layers panel. To do so, click on the layer name in the Layers panel.

WORKING WITH LAYERS

201

To work with a single object on a particular layer, you need to select the object in the Layers panel. To do so, click on the object name in the Layers panel.

Locking a Layer Your graphic may contain a number of layers, with each layer containing different objects. For example, one layer may contain navigation buttons, while the other may contain a background image. When trying to move a button, you can accidentally move the background image if you aren’t careful when making your layer selection. To avoid such situations, you can lock a layer to prevent making any unintentional changes to its content. When you lock a layer, you cannot edit or select the objects present on the layer.

202

CHAPTER 8: MANAGING IMAGES BY USING LAYERS

To lock a layer and then unlock it when needed, follow these steps:

1. Click on the white square to the left of the layer icon and name. A lock icon will appear to indicate that you’ve locked the layer.

2. Click on the lock icon to unlock the layer.

WORKING WITH LAYERS

203

Arranging a Layer The position of a layer in the Layers panel controls how it overlaps objects on other layers. For example, you may have added an object to a new layer at the top of the list, but you really want that object to appear behind text on the layer. To make this happen, you need to change the order of layers in the list in the Layers panel. To move a layer to another position, thus controlling how objects layer in the image, follow these steps:

1. Drag the layer to move to the desired position in the Layers panel list. As you drag, the mouse pointer will change to an arrow with a page. A heavy gray bar will flash to indicate where the layer will appear when you release the mouse button. If you’re moving the layer below a layer that contains numerous objects, be sure to position the layer below all those objects.

NOTE If you try to drag the Web Layer, nothing will happen. That’s because the hotspot and slice information on this layer must overlay other layers in the image file.

204

CHAPTER 8: MANAGING IMAGES BY USING LAYERS

2. Release the mouse button. The layer will move to the specified position in the Layers panel list. The layer content will move behind the contents of other layers above. Note that in this instance, the filled circle appears behind the “Om” character on the top Layer 2 layer, but in front of the background gradient on the bottom Layer 1 layer.

TIP You can move an object from one layer to another. To do so, drag the object over the desired layer name. When you release the mouse button, the object will move to the specified layer.

Blending Layers Sometimes, simply overlapping objects may not achieve the appearance that you’re after. In such situations, you can change the transparency of the contents of a layer or specify a blending mode, a process sometimes called compositing. The Layers panel includes an Opacity slider and Blend Mode list that enable you to change opacity and blend settings for the selected layer. The following list explains the functions of these elements:

WORKING WITH LAYERS

205

• Opacity slider. Specify the layer transparency by entering a value or by using the pop-up slider and then pressing Enter. A value of zero makes an object 100% transparent and vice versa.

• Blend Mode list. Choose a blend mode from this dropdown list to specify how the color of an object blends with objects underneath it.

206

CHAPTER 8: MANAGING IMAGES BY USING LAYERS

To specify the transparency and color interaction settings, follow these steps:

1. Select the layer to adjust in the Layers panel.

2. Specify the desired transparency setting.

3. Choose the desired blend mode.

WORKING WITH LAYERS

207

NOTE You can change the opacity and blend settings for a single object on a layer. To do so, select the object and then change the opacity and blend settings by using either the controls on the Layers panel or the corresponding controls in the Property Inspector.

Hiding a Layer If an image file contains a large number of objects, you may have a bit of difficulty selecting a particular object with which you’d like to work. For example, text may hide part of a background image that you want to edit. In such situations, you can hide the layer containing the text and then continue working with the background image. You can hide a layer or a single object on a layer and then unhide it later by using these steps:

1. Click on the eye icon to the left of the layer or object name in the Layers panel. The eye icon will disappear, and the object or layer will be hidden on the canvas.

208

CHAPTER 8: MANAGING IMAGES BY USING LAYERS

2. To redisplay a layer or single object, click on the box where the eye icon previously appeared. The eye icon and the specified content will reappear.

Duplicating a Layer Let’s say a graphic you’re creating has some flowers on one layer. You decide that you want to include more flowers that are layered in another location. In such a situation, you can duplicate the layer containing the flowers and then position and make changes to the duplicated layer. To duplicate a layer, follow these steps:

1. Click on the layer to duplicate in the Layers panel. The layer will be selected.

WORKING WITH LAYERS

209

TIP If you need to copy only one object contained in a layer, click on the object name in the Layers panel and then continue with the following steps.

2. Click on the icon in the upper-right corner of the Layers panel. The Layers panel Option menu will appear.

3. Click on Duplicate Layer. The Duplicate Layer dialog box will open.

4. Specify the number of layer copies you require in the Number box.

5. Click on an option button to specify where you want the new layer to appear in the list in the Layers panel: At the top (first), Before current layer (immediately above the duplicated layer), After current layer (immediately below the duplicated layer), or At the bottom (last).

6. Click on OK. The duplicate layer(s) will be created and positioned in the specified location in the Layers panel list.

210

CHAPTER 8: MANAGING IMAGES BY USING LAYERS

7. Position and format the contents of the copied layer as desired.

TIP Alternatively, to copy a layer, drag the layer to copy to the New/ Duplicate Layer button. When you release the mouse button, a copy of the layer appears above it in the Layers panel.

WORKING WITH LAYERS

211

Deleting a Layer If you don’t need the objects present on a layer, you can delete the layer. Doing so removes the layer and all its objects from the image. To delete a layer, follow these steps:

1. Click on the name of the layer (or object ) to delete in the Layers panel. The layer will be selected.

2. Click on the Delete Selection button. (You may need to click on it multiple times to delete the object and the layer name.)

The selected layer and its contents will be deleted.

This page intentionally left blank

9

Enhancing the Appearance of Objects

Sometimes, even after you spend a lot of time and effort building an image, the result looks flat and lacks visual appeal. For example, say you created a graphic for a Web site, and the graphic includes a number of buttons. You see that the buttons lack dimension and, hence, are difficult to identify. To make them livelier, you can apply effects to the buttons. Fireworks MX 2004 provides you with a number of effects and styles that help you make images vivid and appealing. Fireworks also enables you to use some third-party filters, such as Eye Candy 4000 LE, to make your graphics eye-catching. In addition to applying effects, you can apply a mask to a bitmap or other image to block out unwanted areas of the image, enabling you to better combine the image with other elements. In this chapter, you’ll learn how to: Apply effects and styles to objects Adjust or remove an effect Apply a filter Use masks to combine objects

214

CHAPTER 9: ENHANCING THE APPEARANCE OF OBJECTS

Using Effects to Beautify Objects Fireworks MX 2004 offers several effects categories, including Bevel and Emboss, Blur, Shadow and Glow, and Sharpen. Each category contains a number of effects. For example, the Bevel and Emboss category contains the Inner Bevel and Outer Bevel effects that help add a 3-D look to an object. In Fireworks, these effects are called Live Effects because you can edit them at any point in time. Use the Property Inspector to apply effects to a selected object. The Property Inspector contains the Add Effects button, which displays the Effects popup menu, from which you can select the required effect. I will discuss various options available in the Effects pop-up menu.

In Fireworks, you can apply the existing effects or edit the effects and save them as styles for later use. You also can apply third-party image filters to the images for additional effects.

USING EFFECTS TO BEAUTIFY OBJECTS

215

Applying Effects to an Object To apply an effect to an object, first select the object and then select the desired effect from the Effects pop-up menu. You can apply multiple effects to an object by using the Effects pop-up menu. All the effects that you’ve applied to the selected object appear in the Effects list, located below the Add Effects button in the Property Inspector.

To apply effects to a bitmap, vector, or text object, follow these steps:

1. Click on the object on its layer. The object will be selected.

2. Click on the Add Effects button in the Property Inspector. The Effects pop-up menu will appear.

216

CHAPTER 9: ENHANCING THE APPEARANCE OF OBJECTS

3. Point to the desired effect category. A submenu listing the effects in that category will appear.

4. Click on the effect to apply it. The effect will be applied to the object with some default settings, and a settings pop-up box will appear.

5. Adjust settings for the effect, as desired. Here, I chose another bevel style and reduced the bevel style so the button text can all fit on the unbeveled portion of the button.

6. Press Enter to apply the settings.

USING EFFECTS TO BEAUTIFY OBJECTS

217

The formatting will appear on the object, and the Effects list will include the applied effect.

Editing Effect Settings Each effect offers at least some settings that you can adjust to achieve the desired formatting. The available settings appear in a pop-up box that appears when you apply an effect. However, the settings you chose when you applied the effect may no longer suit your needs. In such a situation, you can edit settings for the applied effect, as follows:

1. Select the object that has the effect applied.

2. Double-click on the effect in the Effects list. The pop-up box with settings will appear.

218

CHAPTER 9: ENHANCING THE APPEARANCE OF OBJECTS

TIP Alternatively, you can click on the i icon next to the name of the effect in the Effects list.

3. Change the effect settings as desired. In this case, I chose a lighter color for the inner shadow and reduced its size and opacity settings.

4. Press Enter.

The new formatting will appear on the object.

USING EFFECTS TO BEAUTIFY OBJECTS

219

Removing an Effect You may need to remove the effect that you applied to an object. You can do so in the following two ways: • Turning off the effect. Use this technique when you want to keep the settings you’ve specified for the effect, but want to hide the effect from display temporarily. • Deleting the effect. Use this technique when you’re certain you want to remove the effect and its settings from an object. To turn off the effect applied to an object, follow these steps:

1. Select the object to which you’ve applied the effect.

2. Click on the check mark next to the effect name in the Effects list in the Property Inspector. A red X mark will indicate that the effect has been hidden, and the effect will no longer appear on the object.

220

CHAPTER 9: ENHANCING THE APPEARANCE OF OBJECTS

3. To reapply the effect, click on the red X mark, and a check mark will appear, thus indicating that the effect has been applied.

To delete an effect applied to an object, follow these steps:

1. Select the object that has the effect to remove.

2. Click on the effect to delete in the Effects list. The effect will be selected.

3. Click on the Delete Effects button. (It has a minus sign on it.)

USING EFFECTS TO BEAUTIFY OBJECTS

221

The effect will be removed from the selected object and the Effects list.

Saving Effects as a Style You may need to apply similar effects to a number of objects when you want them to look consistent. For example, you applied both the Inner Bevel and Drop Shadow effects to a button, and now you need to apply the same effects—with the same settings—to all the buttons in the graphic. To save your work and ensure consistency in the applied effects, you can save the effects applied to an object as a style. When you want to apply the settings later, you can simply apply the style. (See the next section, “Applying a Style,” to learn more.)

222

CHAPTER 9: ENHANCING THE APPEARANCE OF OBJECTS

To save the effects applied to an object as a new style, follow these steps:

1. Select the object to which you applied the effects to save as a style.

2. Click on the Add Effects button. The Effects pop-up menu will appear.

3. Point to Options. The Options submenu will appear.

4. Click on Save as Style. The New Style dialog box will open.

USING EFFECTS TO BEAUTIFY OBJECTS

223

5. Type a name for the style in the Name text box.

6. Select which properties to save in the style. Checking a property indicates that it will be saved in the style. Check the text properties as desired to save a text style.

7. Click on OK. The effects will be saved as a style.

Applying a Style Once you’ve saved some effects as a style, you can apply the style to any object in a Fireworks document. The Styles panel holds the available styles, including both styles that you create as well as predefined styles provided in Fireworks. To display the Styles panel so that you can access the available styles, click on Window and then click on Styles.

224

CHAPTER 9: ENHANCING THE APPEARANCE OF OBJECTS

The Styles panel will appear.

TIP To resize the Styles panel in the docking area at the right, move the mouse pointer over the top boundary of the Assets title bar until you see a double-headed arrow and then drag to resize the panel to the desired size.

To apply a style to an object, follow these steps:

1. Select the object(s) to which you want to apply the style. Using Shift+click to select multiple objects saves even more time.

2. Scroll down the list of available styles, if needed.

3. Click on the style to apply. Note that when you hover the mouse pointer over a style’s icon, the style name appears at the bottom of the Styles panel.

USING EFFECTS TO BEAUTIFY OBJECTS

225

The style will be applied to the selected object(s).

TIP To delete a style from the Styles panel, click on the style and then click on the Delete Style (trash) button in the lower-right corner of the panel. Click on OK in the message box that appears to confirm the deletion.

226

CHAPTER 9: ENHANCING THE APPEARANCE OF OBJECTS

Applying a Third-party Filter As you’ve surfed the Web or browsed other media, you’ve probably come across images showing a running man or a paper being blown away by wind. You can apply an effect similar to this windblown appearance by using filters. The Fireworks Filter menu offers several filter categories, including Adjust Color, Blur, and Sharpen. (Most of these filters are also available as effects in the Effects pop-up menu.) There is a significant difference between filters and effects. When you apply a filter to a vector object, Fireworks converts the object to a bitmap; this does not happen when you apply an effect. This section demonstrates the Eye Candy 4000 LE filters. Eye Candy 4000 LE offers three filters: Bevel Boss, Marble, and Motion Trail. By using the Motion Trail filter, you can make an object appear to be moving. The following steps are an example:

1. Select the object to which you want to apply a filter.

USING EFFECTS TO BEAUTIFY OBJECTS

227

2. Click on Filters. The Filters menu will appear.

3. Point to Eye Candy 4000 LE. A submenu will appear.

4. Click on Motion Trail. The Motion Trail dialog box will open.

5. Adjust filter settings as desired. For example, here I changed the Direction, Length, and Overall Opacity Settings. The preview will show the impact of the selected settings.

6. Click on OK. The Motion Trail dialog box will close.

228

CHAPTER 9: ENHANCING THE APPEARANCE OF OBJECTS

The effect will appear on the object.

NOTE You may be able to find additional plug-ins to purchase or to acquire shareware online. Fireworks can actually use plug-ins compatible with versions of Photoshop prior to 6.0. To tell Fireworks where the plug-ins are located, click on the Add Effects button, point to Options, and choose Locate Plugins. Use the dialog box that appears to choose the folder holding the plug-ins, and then restart Fireworks when prompted.

Using Masks to Combine Objects While surfing the Web, you may have seen eye-catching images with wavy corners or a big image cut out in the shape of text. If you’ve ever been curious about how such graphics were created, you’ll love this section. Fireworks enables you to use a mask to shape an image with ease. Masking is a technique in which an object (lying on the top) filters the underlying object. The object on top is called the mask object, and the two objects together form the mask group. Fireworks enables you to create a variety of masks, depending on your needs.

USING MASKS TO COMBINE OBJECTS

229

Creating Bitmap Masks You can use the Add Mask button on the Layers panel and the bitmap tools to create a bitmap mask. When you click on the Add Mask button, Fireworks adds an empty mask object on top of the object on the layer being masked. A mask thumbnail also appears for the layer. You can then use any bitmap tool to enhance the mask object, making the bitmap mask as flexible and freeform as your needs dictate. To create a bitmap mask, follow these steps:

1. Select the layer holding the object you want to mask.

2. Click on the Add Mask button in the Layers panel.

A canvas-sized mask object will be added on top of the selected layer. The Property Inspector will display settings for the mask. Make sure that Grayscale is selected.

230

CHAPTER 9: ENHANCING THE APPEARANCE OF OBJECTS

3. Select a bitmap tool. 4. Change the stroke color to black and then change any other settings as desired.

5. Draw to create the mask. Anywhere you place black pixels, the layer content will be masked (made transparent).

TIP To remove a mask from the selected layer, click on the Layers panel Options button and then click on Delete Mask. Click on Discard in the message box that appears to confirm the deletion.

USING MASKS TO COMBINE OBJECTS

231

Using the Paste as Mask Command You also can use the contents from any other layer—text, a vector shape with a gradient, or a bitmap shape—as a mask. Use the Paste as Mask command to accomplish this technique. You can apply the mask by using its path outline or grayscale appearance. When you create a mask by using its grayscale appearance, keep in mind that white areas allow the layer contents to show through, while black areas mask the layer contents. When you create a mask by using its alpha channel, the shape of the object defines the mask. To create a mask by using the Paste as Mask command, follow these steps:

1. Select the layer and object you want to use as a mask. In this case, I’ve selected a rectangle filled with a gradient. The white areas of the gradient will allow the masked image to show through.

2. Click on Edit. The Edit menu will appear.

3. Click on Cut.

232

CHAPTER 9: ENHANCING THE APPEARANCE OF OBJECTS

The selected object (the gradient in this example) will disappear.

4. Select the layer and object you want to cover with the mask. In this case, I’ve selected a bitmap background object.

5. Click on Edit. The Edit menu will appear.

6. Click on Paste as Mask. The selected object will disappear.

USING MASKS TO COMBINE OBJECTS

233

7. Choose the appropriate Mask setting in the Property Inspector. In this case, I need to click on Grayscale appearance because I’m pasting a gradient. The white areas at the center of the pasted gradient will then allow the layer content to show through.

If you instead pasted a bitmap or vector object as a mask, select Alpha channel as the Mask setting, and the mask will apply properly.

234

CHAPTER 9: ENHANCING THE APPEARANCE OF OBJECTS

When you paste text as a mask, select Path outline as the Mask setting, and the mask will apply properly.

10

Optimizing and Exporting Graphics

In addition to creating attractive graphics, Web developers must consider the time that a Web page and its graphics require to download to a viewer’s Web browser. To ensure faster downloads, keep the Web page files as small as possible. As graphics greatly affect download time, you need to focus on reducing image file size while maintaining a fair level of image quality. This process of striking a balance between file size and image quality is known as optimization. Fireworks MX 2004 enables you to optimize graphics for Web use and export the optimized graphics. In this chapter you’ll learn how to: Optimize graphics, including working with file format, color palette, and compression settings Export graphics Use the Export Wizard E-mail a version of the Fireworks document

236

CHAPTER 10: OPTIMIZING AND EXPORTING GRAPHICS

Optimizing Graphics Fireworks provides you with effective control for compressing image file size while maintaining optimum display quality. The process of optimizing graphics for the Web by using Fireworks MX 2004 involves the following steps: • Choosing a suitable file format • Selecting appropriate color and compression settings for the chosen file format • Previewing the effects of the optimization settings You can try various optimization settings and preview their effects on the image quality and file size. Once you are satisfied with the optimized image, you can export it. Fireworks offers the Optimize panel, used to optimize Web graphics. Choose Window, Optimize or press F6 to display the Optimize panel. The various optimization settings that you choose in the Optimize panel include a color palette, compression setting, and other file format specific settings.

Choosing a File Format When you optimize an image, first choose the best file format based on the image’s characteristics, such as colors and tone. Some of the commonly used file formats for the Web graphics are described in the following list:

OPTIMIZING GRAPHICS

237

• GIF or Graphics Interchange Format. The GIF file format supports 8-bit color and can have a maximum of 256 colors. You should use this file format for exporting images that have flat colors, (such as cartoons, line art, and logos), as well as images that include transparency. You also can create animated GIF files. Fireworks MX 2004 enables you to save in the following GIF presets: GIF WebSnap 128 (the default), GIF Web 216, GIF WebSnap 256, GIF Adaptive 256, and Animate GIF Websnap 128. • JPEG or Joint Photographic Experts Group. The JPEG file format supports 24-bit color. You should use this format for exporting continuous-tone images, such as photographs. Fireworks offers Better Quality and Smaller File JPEG presets. • PNG or Portable Network Graphic. The PNG file format supports up to 32-bit color. You can specify 8-bit color depth for exporting flat color images, and 24-bit or 32-bit color depth for exporting cotinuous-tone images. Depending on the color depth, the file format is known as PNG-8 (for 8-bit color depth), PNG-24 (for 24-bit color depth), or PNG-32 (for 32-bit color depth). However, only browser versions above Netscape Navigator 4.04 and Microsoft Internet Explorer 4.0 support the PNG file format. Like the GIF format, the PNG format supports transparency within images.

TIP

NOTE

In addition to the previously discussed Web graphic formats, Fireworks MX enables you to export graphics in other formats, such as TIFF and BMP. You may want to choose the TIFF format for an image that will be included in a printed publication.

Exported PNG files actually use a different file format than the source PNG files saved in Fireworks. The Fireworks PNG source files include application-specific information not preserved in the exported PNG files.

238

CHAPTER 10: OPTIMIZING AND EXPORTING GRAPHICS

To choose a file format for the graphic to be exported, follow these steps:

1. Open the Optimize panel. (Choose Window, Optimize.) The Optimize panel will expand.

2. Click on the Export File Format list in the Optimize panel. A pop-up list of available file formats appears.

3. Click on the desired file format in the pop-up list. The Optimize panel will display the options for the selected file format.

OPTIMIZING GRAPHICS

239

Choosing GIF and PNG-8 Optimization Settings Each file format offers certain settings, such as color palette and transparency. You can choose the desired settings in the Optimize panel after you choose an export file format, as just described. The Optimize panel enables you to adjust the following optimization settings to GIF and PNG-8 file formats: • Color palette • Compression • Transparency • Interlacing

Making Color Palette Settings The GIF and PNG-8 file formats allow you to precisely optimize the number of colors used in the exported image. You can reduce the file size of an exported graphic by reducing the number of colors included in the graphic. The Indexed Palette list in the Optimize panel offers the color palettes that you can apply to an exported graphic.

TIP If you are creating a graphic to be used on the Web, try using the palette with as few colors as possible without degrading the image quality or making colors in the image look “chunky.”

240

CHAPTER 10: OPTIMIZING AND EXPORTING GRAPHICS

The following list describes various color palettes available in the Indexed Palette list: • Adaptive. Contains the actual colors present in the image. • Web Adaptive. Converts colors that are close to Web-safe colors to their closest Web-safe alternatives. • Web 216. Contains the colors common to both Windows and Mac system palettes. These colors are also referred to as Web-safe colors. • Exact. Contains the exact colors used in the image. You can use this palette only if the image has a maximum of 256 colors. Otherwise, you need to use the Adaptive color palette. • Macintosh. Contains the standard Mac OS system colors. • Windows. Contains the standard Windows system colors. • Grayscale. Contains a maximum of 256 shades of gray. • Black & White. Contains only black-and-white color. • Uniform. Creates a palette by uniformly sampling colors from RGB pixel values. • Custom. Opens a customized palette by importing an external color palette file. After you’ve selected a color palette, you may need to modify it for optimization.

Modifying a Color Palette The Optimize panel displays the color palette if you’ve selected a palette with a maximum of 256 colors. You can select a color in the palette by clicking on it. After you do so, you modify the selected color by using the following Optimize panel controls:

OPTIMIZING GRAPHICS

241

• Edit color. Opens the color dialog box, which you can use to edit the selected color. The exported image file will use the edited color instead of the original from the palette. • Snap to Web safe. Forces the selected color to its closest value in the Web-safe palette. • Lock color. Prevents the color from any modification.

• Add color. Adds a new color to the current palette. You can then use the Edit color button to define the new color. • Delete color. Deletes the selected color.

TIP The Optimize panel displays the number of colors in the specified palette. If you click on the Rebuild button, the color table displays only the colors in the current image instead.

242

CHAPTER 10: OPTIMIZING AND EXPORTING GRAPHICS

Removing Unused Colors from the Exported Image Even a very colorful image may not include all the colors in the color palette that you’ve selected for the export. In such a case, you can remove the unused colors from the palette before completing the export to yield a more compact file, as follows:

1. Click on the Options menu button in the Optimize panel. The Optimize panel’s Option menu will appear.

2. Click on Remove Unused Colors. The Remove Unused Colors setting will be toggled on.

3. Click on Rebuild.

OPTIMIZING GRAPHICS

243

The Optimize panel will display only the colors in use in the image.

TIP To restrict the number of colors in the palette and the exported image, select a value for the maximum number of colors in the image from the Colors list before performing the preceding steps.

TIP To redisplay all the colors in the palette, repeat the above steps. Doing so toggles the Remove Unused Colors setting off.

Dithering an Image The modifications that you apply to the color palette may lead to a loss of color information in the exported image because some colors present in the image might not be in the current color palette. To account for this loss of color information, you can apply dithering to the exported graphic. Dithering simulates a color by changing the adjacent pixels in such a way that it creates the illusion of the missing color at a distance.

244

CHAPTER 10: OPTIMIZING AND EXPORTING GRAPHICS

To apply dithering to an exported image, specify the required dither percentage in the Dither box in the Optimize panel. Higher dither values can simulate more colors, but that leads to an increase in the file size. You can experiment with different dither amounts to achieve the optimum output.

Compressing the Image You can further compress the size of a GIF or PNG-8 file by specifying the percentage loss in quality while exporting the image. To compress an image, specify the allowable loss percentage in the Loss box.

TIP In most situations, a loss percentage between 5–15% would result in sufficiently reduced file size without much loss in the image quality.

OPTIMIZING GRAPHICS

245

Specifying Transparency in the Image By default, all pixels in an image are opaque. You can specify a part of an image to be transparent. To make the canvas of an exported image transparent, follow these steps: • When exporting a GIF file, select Index Transparency from the Type of Transparency list. • When exporting a PNG file, select either Index or Alpha Transparency from the Type of Transparency list.

NOTE You can’t use the JPEG file format for exporting images with transparent areas.

If you are using Index Transparency as the transparency type, the canvas in the exported image becomes transparent by default, meaning that any canvas areas that aren’t covered by objects will be transparent.

246

CHAPTER 10: OPTIMIZING AND EXPORTING GRAPHICS

The Optimize panel includes the following controls that you can use to further adjust transparent areas within the exported image: • Add color to transparency. Use this button to sample a color from the image. All the pixels of that color will be transparent in the exported image. • Remove color from transparency. Use this button to sample a currently transparent color in the image. All the pixels of that color will no longer be transparent in the exported image. • Select transparent color. Select a color, other than the default canvas color, which is to become transparent in the exported image.

Interlacing Interlacing is a technique in which an image preloads at a lower resolution in a Web browser while the full resolution image downloads. The viewer can see the image in part while the larger images download. Fireworks enables you to specify interlacing for exported GIF and PNG files.

OPTIMIZING GRAPHICS

247

To specify interlacing, follow these steps:

1. Click on the Options menu button in the Optimize panel. The Optimize panel’s Options menu will appear.

2. Click on Interlaced. NOTE Repeat these steps to toggle off interlacing.

Choosing JPEG Optimization Settings If you choose to export a Fireworks graphic as a JPEG file, you can specify the following optimization settings for the exported file: • Quality • Smoothing • Sharp edges • Progressive display • Selective compression

Adjusting Quality You can specify the amount of compression for a JPEG image by setting the quality percentage for the exported image. A lower quality value leads to smaller file size.

248

CHAPTER 10: OPTIMIZING AND EXPORTING GRAPHICS

To set the JPEG image quality for the exported image, specify the desired quality percentage in the JPEG Quality box.

Applying Smoothing Smoothing blurs hard edges in an image. It further reduces the file size. To apply smoothing to an exported JPEG file, enter the desired smoothing amount in the Smoothing box.

OPTIMIZING GRAPHICS

249

Maintaining Sharpness There might be a situation where you want to maintain hard edges in the exported image. In such a situation, you can preserve the sharpness of an image by following these steps:

1. Click on the Options menu button in the Optimize panel. The Optimize panel’s Options menu will appear.

2. Click on Sharpen JPEG Edges to check that setting and toggle it on. (If the command is already checked, press Esc to close the menu.)

TIP Selecting Sharpen JPEG Edges will cause the exported file to increase in size. Therefore, you should use this option only when you want to preserve the sharpness of an image with text or buttons.

Displaying a JPEG Progressively As for an interlaced GIF or PNG file, you also can export a JPEG file that displays at a lower resolution in a Web browser while the full resolution image downloads. Such JPEG images are called Progressive JPEGs.

250

CHAPTER 10: OPTIMIZING AND EXPORTING GRAPHICS

To turn on the progressive display feature for an exported JPEG image, follow these steps:

1. Click on the Options menu button. The Optimize panel’s Options menu will appear.

2. Click on Progressive JPEG to toggle on that setting.

Selectively Compressing JPEG Content Fireworks enables you to apply different compression settings to selected parts of an exported JPEG image. To selectively compress an area in an exported JPEG, follow these steps:

1. Select the area to be compressed by using any of the bitmap selection tools.

2. Click on the Edit Selective Quality Options button in the Optimize panel. The Selective JPEG Settings dialog box will open.

OPTIMIZING GRAPHICS

251

3. Click on the Enable selective quality check box to check it. The compression settings will become active.

4. Enter the compression (quality) value to apply to the selected area in the exported image.

5. Check the Preserve text quality check box to preserve text quality, if needed.

6. Check the Preserve button quality check box to preserve button quality, if needed.

7. Click on OK. The selective compression will be applied to the specified area in the exported image.

252

CHAPTER 10: OPTIMIZING AND EXPORTING GRAPHICS

Using Preset Optimization Settings In addition to specifying custom settings, the Optimize panel offers preset optimization settings. Each preset collects a variety of settings that work well together.

Select an available preset from the Saved Settings list at the top of the Optimize panel to apply that preset to the exported image. The Optimize panel offers these presets: • GIF Web 216. Restricts the image’s color palette to the Web-safe palette. • GIF WebSnap 256. Converts all non-Web-safe colors in the image to their closest color value in the Web-safe palette.

• GIF WebSnap 128. Converts all non-Web-safe colors in the image to their closest color value in the Web-safe palette that contains a maximum of 128 colors. • GIF Adaptive 256. Creates a custom color palette (maximum 256 colors) that contains only the colors used in the graphic. • JPEG – Better Quality. Sets the JPEG file quality to 80% of the original file quality. • JPEG – Smaller File. Sets the JPEG file quality to 60% of the original file quality. • Animated GIF Websnap 128. Sets the exported file type to Animated GIF. In addition, it converts all non-Web-safe colors in the image to their closest color value in the Websafe palette that contains a maximum of 128 colors.

OPTIMIZING GRAPHICS

253

If you’ve selected custom optimization settings instead of a preset, you can save your settings as a new preset. To do so, follow these steps:

1. Click on the Options menu button. The Optimize panel’s Options menu will appear.

2. Click on Save Settings. The Preset Name dialog box will open.

3. Type a name for the preset. 4.

Click on OK. The current optimization settings will be saved as a preset.

254

CHAPTER 10: OPTIMIZING AND EXPORTING GRAPHICS

Apply the new preset by choosing it from the Saved Settings list in the Optimize panel.

You can remove a custom preset that you’ve created by following these steps:

1. Apply the preset to delete by using the Saved Settings list.

2. Click on the Options menu button. The Optimize panel’s Options menu will appear.

OPTIMIZING GRAPHICS

255

3. Click on Delete Settings. A message box will prompt you to confirm the deletion.

4. Click on OK. The preset will be deleted.

256

CHAPTER 10: OPTIMIZING AND EXPORTING GRAPHICS

Previewing the Document Fireworks MX 2004 enables you to preview the effect the optimization settings will have on the exported image file, either alone or alongside the original image file. To do so, use the Preview buttons in the Document window.

If you click on the Preview button to view the effect of the current optimization settings, the document window displays the following information: • Image Preview. Shows a preview of how the exported file will look. • File size and estimated download time. Calculates the size of the exported image file as well as the estimated time the image will require to download from a standard dial-up connection.

OPTIMIZING GRAPHICS

257

You also can compare the effect of different optimization settings on the image by clicking either the 2-Up or 4-Up preview button. By using the current optimization settings, the 2-Up preview compares the original image with how the exported image will look. The 4-Up preview compares the original image with the current optimization settings, and it offers two more panes where you can apply additional optimization changes. To work with different optimization settings, follow these steps:

1. Click on the 2-Up or 4-Up button. The preview area will split to display the image at different settings.

2. Click on any of the panes to make it active. The Optimize panel displays the settings related to the currently selected view.

3. Adjust settings in the Optimize panel to adjust the preview in the active pane.

258

CHAPTER 10: OPTIMIZING AND EXPORTING GRAPHICS

TIP To preview the original document in your Web browser instead, click on the Quick Export button in the upper-right corner of the document window, point to Preview in Browser, and then click on Preview in Primary Browser.

Using the Export Wizard After you choose settings in the Optimize panel, those settings remain active for subsequent export operations. To export the document using the settings currently specified in the Optimize panel, you can use the File, Export command. Edit the file name as needed in the Export dialog box and then click on Save.

USING THE EXPORT WIZARD

259

However, if you prefer to optimize your graphic “on the fly,” you can use the Export Wizard instead. The Export Wizard guides you step-by-step through optimizing and exporting the current graphic file. You can apply the same export settings offered in the Optimize panel. In addition, you can restrict the file size of the exported graphic to a maximum value. To optimize and export graphics by using the Export Wizard, follow these steps:

1. Click on File. The File menu will appear.

2. Click on Export Wizard. The Export Wizard dialog box will open.

3. Click on Target export file size to check it.

4. Enter the upper limit (in kilobytes) for the file size of the exported graphic in the accompanying text box.

5. Click on Continue. A dialog box for specifying the destination of the exported graphic opens.

260

CHAPTER 10: OPTIMIZING AND EXPORTING GRAPHICS

6. Click on the option button representing the medium where the exported graphic file will be used.

7. Click on Continue. The Export Wizard displays the Analysis Results window, which contains the recommended optimization settings.

8. Click on Exit. The Export Preview dialog box will open. The Export Preview dialog box enables you to preview, compare, and modify the optimization settings recommended by the Export Wizard.

USING THE EXPORT WIZARD

261

9. To choose the optimization settings to be used for the export, click once on the preview you prefer and then double-click on the preferred preview. The optimization settings for the selected preview will appear at the left side of the Options tab.

10. Click on Export. The Export dialog box will open.

11. Specify the name and location for the exported graphic file, and then click on Save. The graphic using the file optimization settings you selected in Step 9 will be exported.

262

CHAPTER 10: OPTIMIZING AND EXPORTING GRAPHICS

Understanding the Quick Export Button In addition to exporting a Fireworks document for use in a Web page HTML document, you can export or copy a Fireworks graphic file for use in a variety of other applications, including Flash, Freehand, Director, Photoshop, GoLive, FrontPage, and Illustrator. (The latter four products are published by Adobe.)

1. To start the process, click on the Quick Export button. The Quick Export menu will appear.

2a. To export or copy the file to one of the Macromedia products, point to the product name and then click on the desired export or copy command.

E-MAILING A FIREWORKS DOCUMENT

263

OR

2b. To export the file to one of the Adobe products, point to Other and then click on the export command for the desired application.

E-mailing a Fireworks Document Fireworks MX 2004 includes a new feature: it can attach an exported version of the current Fireworks document to an email that you can send to a recipient for preview purposes. You can choose Fireworks PNG, JPEG Compressed, or Use Export Settings from the File, Send to E-mail submenu. (If you choose Use Export Settings, first use the Optimize panel to choose settings for the exported file.)

264

CHAPTER 10: OPTIMIZING AND EXPORTING GRAPHICS

After you choose the format for the e-mailed file, an e-mail message window appears with the exported file already specified as a file attachment. From there, you can address and send the message as usual.

P A R T

I I I

Designing Interactive Web Graphics 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

This page intentionally left blank

11

Creating Hotspots and Slices

Web sites include links so that users can navigate to additional information. For example, a company’s home page typically includes links to products, company information, support information, and even investor information. While early Web pages offered text links only, Fireworks MX 2004 enables you to add links to images by creating hotspots. The images used in your Web site can take a long time to download. For faster downloads, you can cut an image into a number of smaller images by using a technique called slicing. Slicing also enables you to optimize different parts of the image. In this chapter, you will learn how to: Create and test hotspots Create an image map Cut and optimize images by using slices Export slices

268

CHAPTER 11: CREATING HOTSPOTS AND SLICES

Adding Hotspots to a Graphic An image hotspot provides a link to other Web content. When the viewer clicks on the hotspot, the Web browser loads the linked page. After you’ve added hotspots in an image, you can then export an HTML file called an image map. Use a hotspot when all you want is a simple link and when you want the image to download as a whole. (Later chapters will detail more complex types of Web links, like buttons and menus.)

Creating a Hotspot Fireworks MX 2004 includes three tools for creating hotspots. Find these tools in the Web category of the Tools panel: • Rectangle Hotspot tool. Use this tool to create a rectangular hotspot. • Circle Hotspot tool. Use this tool to create a circular hotspot. • Polygon Hotspot tool. Use this tool to create an irregular-shaped hotspot.

ADDING HOTSPOTS TO A GRAPHIC

269

The process for creating a hotspot resembles creating a vector rectangle or ellipse. Fireworks places all the hotspots that you created on the Web layer in the image file. Each hotspot appears as a shape lying on the image. The hotspots are filled with a color, which is not visible when you preview the image by clicking on the Preview button in the document window.

While working with the graphics, you can hide the hotspots. To do so, click on the Hide Slices and Hotspots button in the Tools panel. To make hotspots reappear, click on the Show Slices and Hotspots button.

270

CHAPTER 11: CREATING HOTSPOTS AND SLICES

When you create a hotspot, the Property Inspector displays a number of options for it. • Shape list. Use this list to change the shape of the hotspot. The options are Rectangle, Circle, and Polygon. • Color box. Click on this box to open the color palette, where you can click on the desired color to change the color of the hotspot. • Link list. Use this list to specify a new uniform resource locator (URL) or select from the existing ones.

• Alt box. Use this box to specify the alternative text that will appear if the browser does not support images. This text is visible as a tool tip when you point at the image. • Target list. Use this list to specify where the linked page will appear. Some of the available options are _blank and _self. The _blank option makes the target page appear in a new browser window, and the _self option makes it appear in the same browser window.

ADDING HOTSPOTS TO A GRAPHIC

271

Creating a Circular or Rectangular Hotspot To create a rectangular or circular hotspot, follow these steps:

1. Select the Rectangle Hotspot tool or the Circle Hotspot tool in the Tools panel. The mouse pointer will change to a crosshair.

2. Drag on the image to draw the hotspot to the desired location. The Property Inspector will display the options for the hotspot.

3. Change settings as desired in the Property Inspector.

272

CHAPTER 11: CREATING HOTSPOTS AND SLICES

Creating a Polygonal Hotspot You can use the Polygon Hotspot tool to create a hotspot with an irregular shape in order to cover a particular object in your Fireworks document. Use the tool to place vector points to define the hotspot boundaries. To create a polygonal hotspot, follow these steps:

1. Select the Polygon Hotspot tool from the Tools panel. The mouse pointer will change to a crosshair.

2. Click on the document to create the first vector point.

TIP I’ve zoomed in on the image to show the vector points more clearly.

3. Continue clicking on the document to create more vector points as needed.

ADDING HOTSPOTS TO A GRAPHIC

273

4. Change settings as desired in the Property Inspector.

Applying a Hotspot to an Object If you prefer, you can have Fireworks create a rectangular hotspot that is automatically sized to fit around a selected object. To do so, follow these steps:

1. Select the object to which you want to add a hotspot on its layer.

274

CHAPTER 11: CREATING HOTSPOTS AND SLICES

2. Click on Edit, Insert, Hotspot. The hotspot will appear.

3. Change settings as desired in the Property Inspector.

NOTE To edit a hotspot at any time, select it on the Web layer in the document.

ADDING HOTSPOTS TO A GRAPHIC

275

Testing a Hotspot To test a hotspot, you need to specify the primary Web browser that you want to use for previews and then actually preview the page and test the link. Learn how to do both next.

Specifying a Web Browser for Previews Fireworks MX 2004 enables you to test your documents in multiple Web browsers by specifying primary and secondary browsers. The primary browser is the one you will use most often for previews. Specify the secondary browser to test your documents in another program. For example, you can specify Internet Explorer as the primary browser and Netscape Navigator as the secondary browser. To specify a Web browser, follow these steps:

1. Click on the Quick Export button. The Quick Export menu will appear.

2. Point to Preview in Browser. The submenu will appear.

3. Click on Set Primary Browser. (Choose Set Secondary Browser if you want to specify the secondary browser.) The Locate Browser dialog box will open.

276

CHAPTER 11: CREATING HOTSPOTS AND SLICES

4. Navigate to the folder that holds the browser’s startup command.

5. Click on the startup command.

6. Click on Open. The specified browser will become the primary browser used for previewing Fireworks documents.

Previewing a Document and Testing the Hotspot To preview a document containing a hotspot in a Web browser, follow these steps:

1. Click on the Quick Export button. The Quick Export menu will appear.

2. Point to Preview in Browser. The submenu will appear.

3. Click on Preview in Primary Browser. (Choose Preview in Secondary Browser if you instead want to see the document in the secondary browser.) The browser will launch and display the document.

ADDING HOTSPOTS TO A GRAPHIC

277

TIP Alternatively, press F12 to preview a document in the primary Web browser.

4. Point to a hyperlink that you created. The mouse pointer will change to a hand, and the status bar will display information about the linked page.

5. Click on the hyperlink. The linked page will appear. (Of course, if your linked page is posted on an intranet or the Internet, your system must have a live connection for the target page to display correctly.)

278

CHAPTER 11: CREATING HOTSPOTS AND SLICES

Creating an Image Map After you have created and tested the required hotspots, your graphic is ready to be exported as an image map. The export process generates the HTML (HyperText Markup Language, the language for creating a Web page) file to define the image and its links for proper display and functionality in a Web browser. To create an image map, follow these steps:

1. Click on File. The File menu will appear.

2. Click on Export. The Export dialog box will open.

3. Type a file name in the File Name text box. (If your document will be the home page of your Web site, note that you may have to name the file Default or Index, depending on how the site is set up.)

4. Navigate to the folder where you want to save the file. (You can save the HTML and image files to a local hard disk and then publish them to the proper Web folder later, if needed.)

ADDING HOTSPOTS TO A GRAPHIC

279

5. Do not change the default Save as type, HTML, and Slices settings. Keep the settings shown here.

6. Click on Put images in subfolder to check it. All the images (from the graphic) will be saved in a separate folder called Images during the export process.

7. Click on Save. Fireworks will complete the export and close the dialog box.

You can now preview the image map in your Web browser, as shown here.

280

CHAPTER 11: CREATING HOTSPOTS AND SLICES

Cutting and Optimizing Images by Using Slices Image slicing is a technique in which you cut an image into a number of smaller pieces called slices. You may choose to slice an image (rather than using hotspots) for the following reasons: • Slicing breaks the image into smaller parts that download more quickly. • You can optimize different slices differently. For example, you can optimize one slice as a JPEG file and the other one as an animated GIF. This enables you to combine multiple types of images in the finished Web page. Like hotspots, slices are added to the Web layer. You can hide and show the slices by using the Hide Slices and Hotspots and the Show Slices and Hotspots buttons, respectively.

Creating a Slice Fireworks offers the following two tools for creating slices: • Slice tool. Use this tool to create rectangular slices. • Polygon Slice tool. Use this tool to create irregular slices. When you create the first slice, Fireworks divides the rest of the image into additional slices around the one that you created. Slice guides, which define the shape and position of each slice, appear automatically.

CUTTING AND OPTIMIZING IMAGES BY USING SLICES

281

The Property Inspector shows a number of options that you can apply to any slice. Most of these options resemble those for hotspots, except for the following: • Type list. Use this list to specify the type of slice. In Fireworks MX, you can create image and HTML slices. • Slice export settings list. Use this list to specify the format in which the slice will be exported.

Creating an Image Slice To create an image slice, follow these steps:

1. Select the desired slice tool in the Tools panel. The mouse pointer will change to a crosshair.

2. Drag (Slice tool) or click (Polygon Slice tool) on the image to draw the slice in the desired location. The Property Inspector will display the options for the slice.

282

CHAPTER 11: CREATING HOTSPOTS AND SLICES

TIP You also can select one or more objects and then choose Edit, Insert, Slice to place a slice around them.

3. Change settings as desired in the Property Inspector.

TIP If you choose HTML as the slice type, the slice will display only text. Click on the Edit button in the Property Inspector to enter the text that will appear in the slice location.

Naming Slices When you export a sliced document, Fireworks MX 2004 generates a separate file for each slice. Therefore, it is important for you to name the slices that you create. You can either specify the slice names yourself (custom naming) or let Fireworks do the naming for you (auto naming).

CUTTING AND OPTIMIZING IMAGES BY USING SLICES

283

Custom Naming the Slice Files To specify a custom name for the slice files, follow these steps:

1. Select the slice to edit. 2. Double-click on the Edit the object name text box in the Property Inspector.

3. Type a name in the text box and press Enter.

The new slice name will appear in the Property Inspector as well as the Layers panel.

284

CHAPTER 11: CREATING HOTSPOTS AND SLICES

Auto Naming the Slice Files When you don’t specify a name for a slice, Fireworks names the slices on its own. Fireworks does provide you with the option to specify the naming convention it uses. The naming convention can combine up to six separate elements (parts). You can set each element to use one of the following choices: • None. Use this option to specify no name for the element. • doc.name. Use this option to specify the name of the document as the element name. • “slice.” Use this option to insert the word slice in the naming convention. • Slice #(1,2,3…), Slice #(01, 02, 03), Slice #(A, B, C…). Use this option to name the element numerically or alphabetically. • row/column(r3_c2, r4_c7…). Use this option to specify the rows and columns used by the Web browser to reconstruct the sliced image. • Underscore, Period, Space. Use this option to insert a separator between other elements. For example, if you specify… • The first element as doc.name (Books, for example) • The second element as underscore • The third element as row/column(r3_c2, r4_c7…) • The fourth, fifth, and sixth elements as None …the slice files will be named Books_r1_c1, Books_r1_c2, and so on.

CUTTING AND OPTIMIZING IMAGES BY USING SLICES

285

You specify these elements in the HTML Setup dialog box, which contains a drop-down list used to select the desired content for each element.

To set up the convention used to auto name the slice files, follow these steps:

1. Click on File. The File menu will appear.

2. Click on HTML Setup. The HTML Setup dialog box will open.

286

CHAPTER 11: CREATING HOTSPOTS AND SLICES

3. Click on the Document Specific tab. The tab options will appear.

4. Choose the desired setting for each of the Slice file name lists. An example of the convention will appear in the dialog box.

5. Click on OK. The naming convention will be applied to the slices in the document.

Exporting the Slices After you have specified a naming convention for the exported slice files, you can export the document to HTML. When you open the exported HTML document in a Web browser, the browser reassembles the individual slices in an HTML table and places each slice in a table cell. Note that in certain browsers, the cells of the table may not align properly. To help you prevent this, Fireworks MX provides spacer.gif, a transparent GIF image that helps you align table cells. You can export either the complete document (all the slices) or export specific slices.

Exporting All Document Slices When you export a document containing slices, you need to specify the slicing technique:

CUTTING AND OPTIMIZING IMAGES BY USING SLICES

287

• None. Exports the image in one piece. • Export Slices. Exports the slices based on the slice objects created in the document. • Slice Along Guides. Exports the slices by using the standard slice guides.

To export a document containing slices, follow these steps:

1. Click on File. The File menu will appear.

2. Click on Export. A message box reminding you that you need to choose to export slices will open.

288

CHAPTER 11: CREATING HOTSPOTS AND SLICES

3. Click on OK. The Export dialog box will open.

4. Specify a Save location and name.

5. Choose Export Slices from the Slices list. Each slice you defined in the document will be exported as a separate file.

6. Click on Save. The sliced document will be exported.

CUTTING AND OPTIMIZING IMAGES BY USING SLICES

289

TIP To view the files generated after exporting, launch Windows Explorer. Open the images subfolder of the folder in which you exported the document. The images subfolder contains all the slice files that were named by using the appropriate naming convention.

Exporting a Specific Slice To export a specific slice as a file, follow these steps:

1. Select the slice to export by using the Pointer tool.

2. Right-click on the document. A shortcut menu will appear.

3. Click on Export Selected Slice. The Export dialog box will open.

290

CHAPTER 11: CREATING HOTSPOTS AND SLICES

4. Specify the desired Save settings.

5. Click on Save. NOTE Notice that the shortcut menu includes options for adding a rollover effect to the selected slice. Chapter 12, “Adding Rollovers to Graphics,” teaches you how to create a rollover for a slice.

12

Adding Rollovers to Graphics

Web sites hold your attention not only with attractive images, but also with interactivity. Well-placed interactivity can guide the viewer through the site or help the reader find important extras. Rollovers serve as the key type of interactivity. When you roll your mouse pointer over an object on the Web page, that object takes on a different appearance to draw your attention. For example, a button might appear pressed, or a description might pop up when you point to an image. Fireworks MX 2004 enables you to create two types of rollovers on images: simple and disjoint. To create each of these types of rollovers, you need to define either hotspots or slices in the Fireworks document. In this chapter, you will learn how to: Create simple and disjoint rollovers Work with behaviors Test rollovers

292

CHAPTER 12: ADDING ROLLOVERS TO GRAPHICS

Creating a Simple Rollover When a Web page viewer points to or clicks on an object with a simple rollover assigned, the object changes appearance. For example, a button might glow or change colors when the mouse pointer is over it. In the Fireworks document, the source object represents the original appearance. The target object represents the swapped or alternate appearance. To create a simple rollover, you must create a slice around the source object. Then you create a second frame to hold the target object. (A frame holds an alternate version of an image, usually for creating animations. See Chapter 15 for more information on frames and animations.) In this section, you will learn to create simple rollovers. The process of creating a simple rollover consists of the following four steps: • Defining the source object • Creating the target object • Assigning the rollover behavior • Testing the rollover After you perform each of the steps listed above, you can then export the rollover graphic and include it in your Web page or site. To export the rollover graphic, use the File, Export command as detailed in the section called “Creating an Image Map” in Chapter 11.

Defining the Source Object The source object displays the original appearance of the rollover. The source object must be held in a slice (or hotspot), even if that slice encompasses the entire Fireworks document. To define the source object, follow these steps:

CREATING A SIMPLE ROLLOVER

293

1. Create the components of the source object and select it/them with the Pointer tool. For example, here I created an Auto Shape and text object, grouped them, and then selected the grouped object.

2. Right-click on the selected object. A shortcut menu will appear.

3. Click on Insert Slice.

294

CHAPTER 12: ADDING ROLLOVERS TO GRAPHICS

A slice will appear on the selected object.

Creating the Target Object The target object appears in place of the source object when the Web page user moves the mouse pointer over the source object on a Web page. To create the target object, follow these steps:

1. Click Window. The Window menu will appear.

2. Click on Frames. The Frames panel will open. The source graphic appears on Frame 1, the only frame in the Frames panel.

CREATING A SIMPLE ROLLOVER

295

3. Drag Frame 1 over the New/Duplicate Frame button.

When you release the mouse button, a new frame named Frame 2 will appear and will be selected. It will have the same contents and slice as Frame 1. Leave Frame 2 selected.

296

CHAPTER 12: ADDING ROLLOVERS TO GRAPHICS

4. Click on the Hide Slices and Hotspots button on the Tools panel. The slice will be hidden so that you can edit the target content in Frame 2.

5. Edit the target object as desired. For example, in this case I’ve edited the text, changed the star’s fill, and added brush strokes around the star. If needed, you can delete the existing content on Frame 2 and import a new file there to serve as the target object.

Assigning the Rollover Behavior A behavior combines an event and an action. For example, when a viewer points the mouse at an object (an event), the target image appears (an action). The action results from the event. JavaScript code tells the Web browser to trap the event and perform the desired action. However, you don’t need to write the JavaScript code; Fireworks generates it automatically. You can use the Behavior handle present in a slice (or hotspot) to assign the simple rollover behavior to a source object after creating the target object on another frame.

CREATING A SIMPLE ROLLOVER

297

To assign the rollover behavior, follow these steps:

1. Click on the Show Slices and Hotspots button on the Tools panel. The slice will reappear.

2. Click on Frame 1, which holds the source object in the Frames panel. Frame 1 will be selected.

3. Click on the slice you created when you defined the source object. A Behavior handle will appear in the center of the slice.

4. Click on the Behavior handle. A shortcut menu will appear.

5. Click on Add Simple Rollover Behavior. The simple rollover behavior will be assigned to the graphic.

298

CHAPTER 12: ADDING ROLLOVERS TO GRAPHICS

NOTE If you instead click on Add Swap Image Behavior when building a single-object rollover like this, the Swap Image dialog box will appear. Make sure that the Frame No. option button is selected and that Frame 2 is selected from the accompanying drop-down list. Click on OK. You then can change the event that triggers the rollover (that is, specify that the user has to click rather than point), as described in the later section, “Changing the Rollover Event (Behavior) for a Disjoint Rollover.”

Testing the Simple Rollover Testing a rollover shows you how it will work when you place the graphic on a Web page. You can test a rollover by using the Preview button or by using your Web browser. To test the rollover by using the Preview button, follow these steps:

1. Click on the Preview button. The Preview will become active.

2. Point to the source object.

CREATING A SIMPLE ROLLOVER

299

The target object will appear in place of the source object.

3. Click on Original. You can resume editing the graphic, as needed.

TIP Press F12 to test the rollover in your Web browser.

Viewing the JavaScript Code A simple rollover contains a minimum of two frames. The rollover procedure of hiding one frame and displaying the other is created with JavaScript code. To view the JavaScript code generated by Fireworks for the rollover in your primary Web browser (see “Specifying a Web Browser for Previews” in Chapter 11 if you want to change the primary browser), follow these steps:

1. Press F12. The Fireworks document will open in the primary browser.

300

CHAPTER 12: ADDING ROLLOVERS TO GRAPHICS

2. Point to the source object. The target object will appear, previewing the rollover effect.

3. Click on View. The View menu will appear.

4. Click on Source.

CREATING A DISJOINT ROLLOVER

301

The source document containing the JavaScript code will appear. After you review the code, you can close the window holding the code and your Web browser.

Creating a Disjoint Rollover While surfing the Internet, you might have seen Web pages where a change occurs at some other location of the Web page when you point to an image. For example, when you point to the image of a product, a description of the product appears in the document. A disjoint rollover like this occurs when an interaction or event in one part of an image leads to a change or an action in some other part of an image. Like a simple rollover, a disjoint rollover uses two objects, one that triggers the rollover and the other that changes it. However, unlike simple rollovers, these two objects are present in different areas of the graphic and are covered by two separate slices. The area of the graphic containing the object that triggers the rollover is the trigger area. The area that changes is the target area.

302

CHAPTER 12: ADDING ROLLOVERS TO GRAPHICS

The process of creating a disjoint rollover can be divided into the following four steps: • Defining the trigger area • Creating the target area • Assigning a behavior • Testing the rollover

Again, after you perform each of the steps listed above, you can then export the rollover graphic and include it in your Web page or site. To export the rollover graphic, use the File, Export command as detailed in the section called “Creating an Image Map” in Chapter 11.

Defining the Trigger Area As with a simple rollover, you create a disjoint rollover’s trigger and target areas in different frames of a graphic, covering each area with a slice. The slice covering the trigger area is the trigger slice, and the one containing the target area is the target slice.

CREATING A DISJOINT ROLLOVER

303

To define the trigger area, follow these steps:

1. Create the components of the source object and select it/them with the Pointer tool. For example, here I grouped a shape object and a text object, and then selected the grouped object.

2. Right-click on the selected object. A shortcut menu will appear.

3. Click on Insert Slice.

304

CHAPTER 12: ADDING ROLLOVERS TO GRAPHICS

A slice will appear on the selected object.

Creating the Target Area If the Frames panel isn’t open, choose Window, Frames to display it. Then follow these steps to create the target area:

1. Drag Frame 1 over the New/Duplicate Frame button.

CREATING A DISJOINT ROLLOVER

305

When you release the mouse button, a new frame named Frame 2 will appear and will be selected. It will have the same contents and slice as Frame 1. Leave Frame 2 selected.

2. Edit the target area as desired. For example, in this case I added the target area text that will appear when the viewer moves the mouse pointer over the trigger area. If needed, you can import a new file to serve as the target object.

306

CHAPTER 12: ADDING ROLLOVERS TO GRAPHICS

3. Click on the Slice tool in the Tools panel.

4. Drag over the target area.

When you release the mouse button, a slice will appear.

CREATING A DISJOINT ROLLOVER

307

Assigning the Rollover Behavior After you create the target area, you need to assign a behavior to the trigger area. You will learn to do so in the following section. You can assign a behavior to the trigger area by using two techniques: • The Swap Image dialog box • The drag-and-drop method

Using the Swap Image Dialog Box To assign the disjoint rollover behavior by using the Swap Image dialog box, follow these steps:

1. Click on Frame 1 in the Frames panel.

2. Select the trigger slice by using the Pointer tool. A Behavior handle will appear in the center of the slice.

308

CHAPTER 12: ADDING ROLLOVERS TO GRAPHICS

3. Click on the Behavior handle. A shortcut menu will appear.

4. Click on Add Swap Image Behavior. The Swap Image dialog box will appear. The dialog box lists the slices by name and also displays the slice locations in a preview. You can click on the desired slice in either location to select it.

5. Click on the target slice. The slice will appear selected.

6. Make sure that Frame No. is selected, and that Frame 2 (or the frame that holds the target slice) is selected in the corresponding list.

7. Click on OK. A blue line joining the two slices will appear in the document. This line indicates that a swap image behavior has been applied to the two slices.

CREATING A DISJOINT ROLLOVER

309

Using the Drag-and-Drop Method To assign a behavior by using the drag-and-drop method, follow these steps:

1. Click on Frame 1 in the Frames panel.

2. Select the trigger slice by using the Pointer tool. A Behavior handle will appear in the center of the slice.

3. Drag the Behavior handle from the trigger slice to the target slice. When you release the mouse button, the Swap Image dialog box will open.

310

CHAPTER 12: ADDING ROLLOVERS TO GRAPHICS

4. Make sure that Frame 2 (or the frame that holds the target slice) is selected in the Swap image from list.

5. Click on OK. A line joining the two slices will appear.

TIP If you are not very sure which frame contains the target area, click on More Options. The Swap Image dialog box will expand so that you can select the correct slice.

Testing the Disjoint Rollover Use the Preview button to test the rollover, as follows:

1. Click on the Preview button. The Preview will appear.

2. Point to the trigger area. The target object will appear.

3. Click on Original to close the preview.

TIP Press F12 to test your rollover in the primary Web browser.

CHANGING THE ROLLOVER EVENT FOR A DISJOINT ROLLOVER

311

Changing the Rollover Event (Behavior) for a Disjoint Rollover You may need to change the event that triggers a disjoint rollover. For example, instead of triggering the rollover by pointing with the mouse, you may need to trigger the rollover by clicking. In Fireworks MX 2004, you can assign any of the following events to trigger a rollover: • onMouseOver. Triggers the rollover when you point to an object. • onMouseOut. Triggers the rollover when you move the mouse pointer out of the focus of the trigger object. • onClick. Triggers the rollover when you click on the object. • onLoad. Triggers the rollover when the page is loaded in the browser. To change the event assigned to a rollover:

1. Select the frame holding the trigger object.

2. Select the slice containing the trigger.

312

CHAPTER 12: ADDING ROLLOVERS TO GRAPHICS

3. Click on Window. The Window menu will appear.

4. Click on Behaviors. The Behaviors panel will open. The behavior assigned to the selected slice will appear in the panel.

5. Click on the drop-down arrow for the behavior’s Events column entry. A list will appear.

6. Click on the desired event. The specified event will be applied to the rollover.

7. Test the rollover.

CHANGING THE ROLLOVER EVENT FOR A DISJOINT ROLLOVER

313

NOTE To delete a disjoint rollover, click on the line joining two slices and then click on OK in the message box prompting you to confirm the deletion. To delete a simple rollover, click on the rollover behavior in the Behaviors panel and then click on the Remove action button in the lower-right corner of the panel.

This page intentionally left blank

13

Adding Buttons to a Graphic

Buttons also add interactivity to a Web site by helping the user navigate between different pages. Moreover, a colorful button with an attractive shape and a 3-D appearance adds to the visual appeal of a Web site. These days, most of the Web sites incorporate a navigation bar (a group of buttons appearing on every page) that gives the user a central location for navigating between pages on the site. In this chapter, you will learn how to: Add a predefined button from the library Create a button with all of its states Create and test a navigation bar Edit a button symbol

316

CHAPTER 13: ADDING BUTTONS TO A GRAPHIC

Adding a Button from the Library Even if you don’t want to create buttons from scratch for your Web graphics, you can use another approach to add buttons. Macromedia Fireworks 2004 includes a library of predefined buttons. To add a predefined button to a graphic file:

1. Click on Edit. The Edit menu will appear.

2. Point to Libraries. The Libraries submenu will appear.

3. Click on Buttons. The Import Symbols: Buttons dialog box will open.

4. Click on a button to insert in the list of available buttons. A preview of the button will appear at the top of the dialog box.

5. Click on the Play button to “play” the button (that is, to see how it looks when the mouse pointer is over it, or when it is clicked). The button preview will play.

6. Click on Import. The button will be placed on the canvas. The image will be sliced because the button must be covered by a slice to be interactive.

ADDING A BUTTON FROM THE LIBRARY

317

7. Enter the text that you want to appear as the button name in the Text text box in the Property Inspector.

8. Enter the target Web page (the page to display when the button is clicked) in the Link text box in the Property Inspector.

9. Drag the button to the desired location in the image. When you release the mouse button, the button will move in the image, and slices will be redrawn as required.

318

CHAPTER 13: ADDING BUTTONS TO A GRAPHIC

10. Click on the Preview button at the top of the document window. Fireworks will preview the button’s appearance in the graphic.

Creating a Button In Fireworks, you can create a new button with up to four states: • Up. The default or at-rest appearance of the button. • Over. The button’s appearance when the mouse pointer is over the button. • Down. The button’s appearance when the user clicks on the button. • Over While Down. The button’s appearance when the user moves the mouse pointer over the button while the button is in the down state.

CREATING A BUTTON

319

You can use Fireworks’ Button Editor to create new buttons in your graphics. (This process is also called creating a button symbol.) The Button Editor contains four tabs, one for creating each of the four button states. In addition, the Button Editor includes an Active Area tab, used to assign interactivity to the button. You can open the Button Editor by choosing Edit, Insert, New button.

You can create a button having two, three, or four states: • Two-state button. A button having Up and Over states. • Three-state button. A button having Up, Over, and Down states. • Four-state button. A button having all four states. The remainder of this section describes how to create the various button states. A button you create in Fireworks can use any type of object—a vector shape, a bitmap you’ve imported, or text—to provide its basic shape. For example, your button could be a rectangle or oval with some text over it, or an image (with or without text).

320

CHAPTER 13: ADDING BUTTONS TO A GRAPHIC

Creating the Up State To create a button, you start by developing its initial appearance or Up state. You use the Up tab of the Button Editor to design the Up state of a button, as follows:

1. Click on Edit. The Edit menu will appear.

2. Point to Insert. The Insert submenu will appear.

3. Click on New Button. The Button Editor will open. The Up tab will be displayed by default.

TIP You also can press Ctrl+ Shift+F8 to open the Button Editor.

4. Draw or insert the object you want to use as a button on the Up tab. For example, I copied a bitmap and pasted it into the Button Editor, and then I placed some text on the bitmap.

5. Use the Property Inspector to apply the desired formatting to the components of the button.

CREATING A BUTTON

321

Creating the Over State A button’s Over state appears when the user moves the mouse pointer over the button. To create the Over state of a button, use the Over tab in the Button Editor, as follows:

1. Click on Over in the Button Editor. The Over tab will be displayed.

2. Click on Copy Up Graphic. A copy of the button in the Up state will appear in the tab.

TIP Alternatively, you can create a brand new object or combination of objects for the Over state.

3. Change the copied button as desired. Here, I’ve specified that a glow will appear around the object in the Over state.

322

CHAPTER 13: ADDING BUTTONS TO A GRAPHIC

Creating the Down State A button’s Down state appears when the user clicks on the button. If you include multiple buttons on a navigation bar (see the later section titled “Creating a Navigation Bar”), one button at a time can appear in the Down state. The button stays in the Down state appearance as long as the user is viewing the target page for that button. Thus, the Down state for a button helps the user better identify the active Web page. For example, say the navigation bar includes About Us, Products, and Shopping Cart buttons. By default, the About Us page is displayed when you open the Web site in a browser. When a user clicks the Products button, the Web page containing product details appears, and the Products button remains in the Down state. Use the Down tab in the Button Editor to create the Down state for a button by doing the following:

1. Click on Down in the Button Editor. The Down tab will be displayed.

2. Click on Copy Over Graphic. A copy of the button from the Over tab will appear in the Down tab.

CREATING A BUTTON

323

TIP The Include nav bar Down state check box will be checked automatically. The option must be checked if you plan to include the button in a navigation bar.

3. Change the button’s appearance to distinguish it from the previous two states. For example, I added a bright green glow around the text in the button.

Creating the Over While Down State The Over While Down state appears when the user moves the mouse pointer over the button while it is in the Down state. For example, this state appears when you move the mouse pointer over the button that’s already “pressed” on a navigation bar. You can create the Over While Down state on the Over While Down tab of the Button Editor by following these steps:

324

CHAPTER 13: ADDING BUTTONS TO A GRAPHIC

1. Click on Over While Down in the Button Editor. The Over While Down tab will be displayed.

2. Click on Copy Down Graphic. A copy of the button in the Down state will appear in the Over While Down tab.

3. Change the button’s appearance as desired. For example, I decreased the opacity setting for both the button and the text to give the button the appearance of being inactive.

CREATING A BUTTON

325

Creating the Active Area of a Button The active area of a button triggers the response when a user points to or clicks on the button. The Button Editor automatically creates a slice that defines the active area. You create the active area of a button by using the Active Area tab of the Button Editor. When you view this tab, you can specify the target URL (the address page that will display) when the user clicks on the button. To create the Active Area of a button, follow these steps:

1. Click on Active Area in the Button Editor. The Active Area tab will appear. The tab contains a copy of the button, which is covered by a slice.

2. Click on the slice. The settings for specifying a link will become active in the Property Inspector.

TIP See “Cutting and Optimizing Images by Using Slices” in Chapter 11 for more information on slices.

326

CHAPTER 13: ADDING BUTTONS TO A GRAPHIC

3. Specify Link and other settings (such as Target) for the slice in the Property Inspector.

Finishing and Positioning the Button After you finish creating the desired states for a button, you need to finish it and position it in the current Fireworks document. Follow these steps:

1. Click on Done. The Button Editor will close, and the button will appear in the document.

CREATING A BUTTON

327

2. Click and drag the button to the desired location in the document.

Testing a Button To test a button, follow these steps:

1. Click on Preview. The button will appear in the Up state in the preview.

328

CHAPTER 13: ADDING BUTTONS TO A GRAPHIC

2. Point to the button. The button will move to the Over state.

3. Click on the button. The button will move to the Down state.

CREATING A NAVIGATION BAR

329

4. Move the mouse pointer on the button. The button will move to the Over While Down state.

TIP To test the URL of a button, Press F12 to preview the document in the Web browser; then click on the button.

Creating a Navigation Bar A navigation bar is a Fireworks document that holds a group of buttons. After you create the buttons on the bar, you can export the file in HTML format and then include the bar on every Web page in a Web site. The navigation bar gives viewers a consistent way to navigate to different pages on the Web site. Creating the navigation bar as a separate file enables you to insert it easily into multiple Web pages, as needed. Ideally, a button used on the navigation bar should have all four states. However, you may use two-state buttons for the navigation bar. To create a navigation bar, create a button by using the Button Editor. Then create multiple instances (copies) of the button and adjust the properties for each instance, as needed.

330

CHAPTER 13: ADDING BUTTONS TO A GRAPHIC

To create a navigation bar, follow these steps:

1. Create a new Fireworks file that uses the canvas size and background color that you want for the navigation bar. Here, I’ve created a 400 x 25 pixel file with a transparent background.

2. Create a button symbol in the Button Editor as previously described in the chapter.

TIP Here, I imported a button from the Library and modified it by adding a bullet (Edit, Libraries, Bullets).

3. Click on Done. The button will appear in the navigation bar document.

CREATING A NAVIGATION BAR

331

4. Click on Edit. The Edit menu will appear.

5. Click on Duplicate. Another instance of the button will appear in the document.

6. Drag the new button instance to the desired location.

7. Repeat Steps 4 through 6 to add and position as many buttons as desired.

332

CHAPTER 13: ADDING BUTTONS TO A GRAPHIC

8. Click on one of the button instances.

9. Specify properties for the button—such as slice name, button text, and link—in the Property Inspector.

TIP Changing the properties for each individual button instance is called instance-level editing.

10. Repeat Steps 9 and 10 to set properties for each button. 11. Test the navigation bar’s buttons as described earlier under “Testing a Button.” 12. You can now save the source Fireworks file, export the navigation bar file in HTML format (see “Creating an Image Map” in Chapter 11 to learn how to export a document and its images in HTML format), and then include the navigation bar HTML file (and supporting graphics) in Web pages that you create.

CREATING A NAVIGATION BAR

333

TIP The Library panel (Window, Library) holds the button symbols you create in a Fireworks document. You also can display the Library panel and drag a button symbol from there to add it to the canvas. Or double-click on a button symbol in the Library panel to open that button in the Button Editor.

Editing a Button Symbol All the instances of a button symbol in the document remain linked to the original button symbol that you created. If you edit the original button symbol’s color, for example, all instances of the button will display the new color. Reformatting a symbol in this way is called symbollevel editing, accomplished with the Button Editor, as follows:

1. Double-click on any instance of the button. The Button Editor will open.

TIP You can also double-click on the button preview in the Library panel to edit the button.

334

CHAPTER 13: ADDING BUTTONS TO A GRAPHIC

2. Make the desired changes to the button appearance for each state. For example, I changed the text color from pink to white.

3. Click on Done. The change will be applied to all the button instances based on that symbol.

NOTE If you want different buttons to use different colors or fonts, you need to create multiple button symbols, each with the desired attributes.

14

Displaying Options by Using Pop-up Menus

A pop-up menu appears when you point to or click on an object or button on a Web page. Each pop-up menu can display a number of links to other pages, so the user can jump directly to a desired page rather than wading through a series of links to move forward and backward. In this chapter, you’ll learn how to: Create a pop-up menu Test and finish a pop-up menu Edit menu items

336

CHAPTER 14: DISPLAYING OPTIONS BY USING POP-UP MENUS

Creating a Pop-up Menu You can include a pop-up menu on a Web page to enable viewers to navigate your Web site. A pop-up menu works like a rollover effect. When the user points to or clicks on an object, a menu of link choices appears.

TIP See “Creating a Simple Rollover” in Chapter 12 for more information on rollovers.

Fireworks MX 2004 provides the Pop-up Menu Editor that you use to create a pop-up menu. The Pop-up Menu Editor contains the following four tabs that you use to add menu items (or options) to a pop-up menu and enhance its appearance: • Content tab. Add menu items and specify links and targets for them. This tab also helps you create submenus within a pop-up menu.

CREATING A POP-UP MENU

337

• Appearance tab. Design the appearance of a pop-up menu by specifying font, style, and size.

TIP A pop-up menu has two stages, Up and Over, which are similar to those of a button. You can design both these stages in the Appearance tab. See “Creating a Button” in Chapter 13 to learn more about the various stages of a button.

• Advanced tab. Specify cell dimensions, padding, spacing, cell border width and color, menu delay, and text indentation. • Position tab. Specify the position of the pop-up menu and submenu relative to the slice for which you created it. As for a navigation bar, you may want to create your pop-up menu in a separate Fireworks file and then export the file to HTML format so that you can include the pop-up menu on each page in a Web site. (You can even include a pop-up menu in a navigation bar file!) Doing so will give the user a consistent way to navigate in your Web site. To start creating a pop-up menu, do the following:

1. Create a new Fireworks file that uses the canvas size and background color that you want for the pop-up menu. Here, I’ve created a 75 x 75 pixel file with a transparent background.

338

CHAPTER 14: DISPLAYING OPTIONS BY USING POP-UP MENUS

TIP Skip Step 1 to create the pop-up menu within a graphic file rather than creating it as a standalone element.

2. Create the object to which you want to attach the pop-up menu. For example, here I’ve created and grouped some rectangles and text to create a “framed” effect.

3. Select the Slice tool from the Tools panel. The mouse pointer will change to a crosshair.

4. Draw a slice around the object to which you want to attach the pop-up menu. In this case, since I’ve created a single box to which I’ll attach the popup menu, I’m dragging over the whole canvas. When you release the mouse button, the slice will appear.

TIP Alternatively, you can create a hotspot and attach the pop-up menu to it.

CREATING A POP-UP MENU

339

Adding Menu Items to a Pop-up Menu Use the Content tab in the Pop-up Menu Editor to add menu items and more to a pop-up menu that you’re creating. The tab is divided into three columns: Text, Link, and Target. It also offers a variety of buttons that you use to work with popup menu items. Here’s the purpose of each of these controls: • Add Menu button. Adds a new menu item. • Delete Menu button. Deletes the selected menu item. • Outdent Menu button. Outdents the indented menu item. • Indent Menu button. Indents a menu item to make it a submenu.

• Text column. Contains the text of the menu item. • Link column. Contains the URL of the menu item. • Target column. Contains the target for the URL of the menu item.

340

CHAPTER 14: DISPLAYING OPTIONS BY USING POP-UP MENUS

To use the Pop-up Menu Editor to add menu items to a popup menu, follow these steps:

1. Select the slice or hotspot to which you want to add a pop-up menu.

2. Click on Modify. The Modify menu will appear.

3. Point to Pop-up Menu. A submenu will appear.

4. Click on Add Pop-up Menu. The Pop-up Menu Editor will appear with its Content tab activated.

TIP Alternatively, click on the slice Behavior handle and then click on Add Pop-up Menu.

CREATING A POP-UP MENU

341

5. Double-click on the first cell in the Text column. A text box will appear.

6. Type an entry. This will be the first item listed on the popup menu.

7. Double-click on the Link column cell. A text box will appear.

342

CHAPTER 14: DISPLAYING OPTIONS BY USING POP-UP MENUS

8. Type or select the URL for the Web page that the menu item will link to.

TIP The Link text box includes a drop-down list, which lists any previously entered URLs.

9. Double-click on the Target column cell. A drop-down list will appear.

10. Select the desired target (where the linked page will appear) from the drop-down list. The _blank option will open the target page in a new browser window, and the _self option will make it appear in the same browser window. The _parent option makes the target page appear in the parent frameset or window of the frame that contains the link. The _top option makes the target page appear in the full browser window, thus removing all the frames.

CREATING A POP-UP MENU

343

11. Press Tab. The insertion point will move to the next row, opening the Text text box so that you can add additional menu items.

12. Repeat Steps 6 through 11 to add as many menu items as needed.

Deleting Menu Items To delete a menu item in the Pop-up Menu Editor, follow these steps:

1. Click on the menu item to delete. The menu item will be selected.

2. Click on the Delete Menu button. The selected menu item will be deleted.

344

CHAPTER 14: DISPLAYING OPTIONS BY USING POP-UP MENUS

Specifying a Submenu To create a submenu, you indent menu items in the list in the Pop-up Menu Editor. To do so, follow these steps:

1. Select the first menu item that you want on the submenu.

2. Click on the Indent Menu button. The selected menu item will be indented and will appear as a submenu for the menu item above it.

TIP If you indent an incorrect menu item, select the menu item and click on the Outdent Menu button to outdent the menu item.

3. Repeat Steps 1 and 2 to indent additional menu items to be included on the submenu. As you can see here, the submenu items must appear sequentially (together) in the list in the Pop-up Menu Editor dialog box.

CREATING A POP-UP MENU

345

Enhancing Pop-up Menu Appearance You can use the Appearance tab in the Pop-up Menu Editor to improve the appearance of the pop-up menu that you’re creating. You can change the pop-up menu’s orientation, cell style, and text formatting, as well as specifying Over and Up states. Each of these tasks is described next.

NOTE If your pop-up menu has only three items, note that “None” appears as a placeholder on the bottom row of the Appearance tab preview.

Specifying the Orientation of the Pop-up Menu The pop-up menu can appear either horizontally or vertically. To specify the orientation of a pop-up menu, choose the desired alignment from the Choose Alignment list of the pop-up menu in the upper-right corner of the Appearance tab.

346

CHAPTER 14: DISPLAYING OPTIONS BY USING POP-UP MENUS

Specifying the Cell Style The pop-up menu presents each menu item in a cell. You can choose an alternative cell style to change the pop-up menu appearance. Your pop-up menus can either contain HTMLbased or image-based cells: • HTML-based cell. Uses HTML code to enhance the appearance of the menu. Images using pop-up menus containing HTML-based cells are small in size. Select the HTML option to create HTML-based pop-up menus.

• Image-based cell. Enables you to choose image styles to enhance the cell background. Images using pop-up menus containing image-based cells are larger in size. Select the Image option to create image-based pop-up menus.

CREATING A POP-UP MENU

347

Formatting the Text Text in pop-up menus doesn’t have to use the default appearance specified by Fireworks. You can change the text formatting for the menu items by using the Font list, the Size list, the Style buttons, and the Alignment buttons.

Specifying the Up and Over States Likewise, you can control the colors a pop-up menu uses for the Up and Over states. The Up state specifies the menu’s default appearance. When you point at a menu item, it changes to display the Over appearance. Specify the desired Text and Cell color for each state on the Appearance tab.

348

CHAPTER 14: DISPLAYING OPTIONS BY USING POP-UP MENUS

Specifying Advanced Pop-up Menu Settings Click on the Advanced tab in the Pop-up Menu Editor when you want to change cell dimensions, menu delay, and border dimensions and color for a popup menu. Here’s how to use the various settings on the Advanced tab: • Cell width. Choose Pixels from the drop-down list and then enter the desired cell width in pixels. • Cell height. Choose Pixels from the drop-down list and then enter the desired cell height in pixels.

NOTE If your pop-up menu has only three items, note that the last item repeats as a placeholder on the bottom row of the Advanced tab preview.

• Cell padding. Enter the desired distance between the menu item text and the edge of the cell in pixels. • Cell spacing. Enter the desired amount of space between the cells of a pop-up menu in pixels.

CREATING A POP-UP MENU

349

• Text indent. Enter the desired amount of indentation, in pixels, for the pop-up menu text. • Menu delay. Specify the desired time (in seconds) for which the menu remains visible after you move the pointer away from it. • Show borders. Use this check box to specify whether to show or hide the borders of the pop-up menu. • Border width. Enter the the desired border width in pixels. • Border color. Click to open a pop-up palette so you can choose an alternative border color. • Shadow. Click to open a popup palette so you can choose an alternative shadow color for the menu border. • Highlight. Click to open a pop-up palette so you can choose an alternative highlight color for the pop-up menu border.

TIP If you uncheck the Show Borders option, the Border Width, Border Color, Shadow, and Highlight options are disabled.

350

CHAPTER 14: DISPLAYING OPTIONS BY USING POP-UP MENUS

Specifying the Pop-up Menu Position On the Position tab of the Pop-up Menu Editor, you can choose where the pop-up menu will appear relative to the slice to which the pop-up menu is attached. You can specify the display position of a pop-up menu by using the Position tab in the Pop-up Menu Editor. You can specify the position of a pop-up menu in either of the following two ways: • By using the Menu Position buttons • By using the X and Y boxes The Position tab also allows you to position any submenus contained in the pop-up menu by using Submenu Position buttons and the X and Y boxes. However, these controls are activated only if your pop-up menu contains a submenu. To specify the position of a pop-up menu, follow these steps:

1. Click on the Position tab. The positioning choices will appear in the Pop-up Menu Editor.

2a. Click on the desired position button. OR

2b. Specify the X and Y coordinates for the pop-up menu position. For example, if you specify 0,0 as the position coordinates, the upper-left corner of the pop-up menu aligns with the upper-left corner of the slice to which it is attached.

CREATING A POP-UP MENU

351

3. Specify the desired submenu position, if needed.

Finishing and Testing a Pop-up Menu After you’ve worked with settings as needed in the Popup Menu editor, you can close it, test the pop-up menu, and then save and export it for use in a Web page. To wrap up the process for creating a pop-up menu, follow these steps:

1. Click on Done. The Pop-up Menu editor dialog box will close.

352

CHAPTER 14: DISPLAYING OPTIONS BY USING POP-UP MENUS

Additional blue lines will appear around the selected slice to indicate the presence of a popup menu.

2. Press F12. The pop-up menu document will appear in the Web browser.

3. Point to the area that contains the pop-up menu. The pop-up menu will appear.

4. You can now save the source Fireworks file, export the popup menu file in HTML format (see “Creating an Image Map” in Chapter 11 to learn how to export a document and its images in HTML format), and then include the pop-up menu HTML file (and supporting graphics) in Web pages that you create.

MODIFYING A POP-UP MENU

353

Modifying a Pop-up Menu You can modify a pop-up menu in the source Fireworks file any time after you create it, and then you can re-export the file. To modify a pop-up menu, follow these steps:

1. Select the slice or hotspot containing the pop-up menu.

2. Click on the Behavior handle in the center of the slice. A menu will appear.

3. Click on Edit Pop-up Menu. The Pop-up Menu Editor dialog box will open so that you can make changes to the menu, as needed.

This page intentionally left blank

15

Adding Animation to a Graphic

In our TV-conditioned culture, animations have helped increase the popularity of the Web by introducing TV-like action onscreen. Whether a scrolling image and text or a flashing icon, an animation enhances the visual appeal of a Web page, helping attract new customers. Using Fireworks MX 2004, you can create animated GIF graphics for your Web pages. In this chapter, you’ll learn how to: Create animation by using frames Test and fine-tune an animation Export the finished animation

356

CHAPTER 15: ADDING ANIMATION TO A GRAPHIC

Getting Started with Animations A digital animation displays a series of images in quick succession to produce the effect of motion. For example, to make an animation that displays a moving arrow, you need to create an image with an arrow. Then you must make the required number of copies of this image and change the position of the arrow in each image. When you view all the images in quick succession, the arrow will appear as if it’s moving. Fireworks MX uses frames for creating animations. A frame is a placeholder that contains an image representing a specific point in an animation. For example, if the arrow animation mentioned earlier contained 10 images, you would need to place each image in a separate frame. To help you in adding and managing frames, Fireworks offers the Frames panel. The Frames panel lists all the frames contained in the current document. To open or expand the Frames panel, choose Window, Frames. The panel also includes a number of controls used to work with frames. The following list describes some of these controls: • New/Duplicate Frame button. Creates a new or duplicate frame. • Delete Frame button. Deletes the selected frame.

NOTE I’ll discuss the other controls present in the Frames panel as and when they are required.

GETTING STARTED WITH ANIMATIONS

357

Creating an Animation Fireworks MX 2004 enables you to apply animation to any object in a document by using a simple command. The animation process converts the selected object to an animation symbol and defines the path that the animation will follow. The process also automatically creates a number of frames to define the animation duration.

1. Select the object to animate and move it to the position you want it to have during the beginning of the animation.

2. Right-click on the object. A shortcut menu will appear.

3. Point to Animation. The Animation submenu will appear.

4. Click on Animate Selection. The Animate dialog box will open.

358

CHAPTER 15: ADDING ANIMATION TO A GRAPHIC

5. Specify the number of Frames to create in the animation. The more frames, the longer the animation will be.

6. Specify the number of pixels the animated object should Move. In this case, I want the object to move off the canvas at the right end, so I have to specify a Move distance that’s greater than the canvas width of 500 pixels.

7. Use the Direction pop-up to specify the angle (in degrees) at which you want the object to move. Leaving this setting at 0 will cause the animated object to move horizontally to the right.

8. If you want the object to increase in size as the animation proceeds, increase the Scale setting to the desired value.

9. To vary the opacity of the object from the beginning to the end of the animation, change the Opacity values.

GETTING STARTED WITH ANIMATIONS

359

10. To have the object rotate during the animation, enter a rotation value of up to 360 degrees and then click on the CW (clockwise) or CCW (counterclockwise) option button, as needed.

11. Click on OK. The Animate dialog box will close, Fireworks will convert the object to an animation symbol, and animation handles will appear in the document. The animation handles define the path for the animation symbol.

NOTE If you see a message at this point that the animation extends beyond the last frame you specified (as calculated based on the distance you want the object to move), click on OK to continue and have Fireworks add additional frames automatically.

360

CHAPTER 15: ADDING ANIMATION TO A GRAPHIC

From this point, you can make changes to the animation. You can drag the green handle to change the start of the animation, and the red handle to change the end. Drag a middle handle to reposition the entire animation. Use the Property Inspector to change basic animation settings, such as the number of Frames, Scaling, Opacity, and Rotation.

TIP You can apply the process just described to animate other objects in the document file, too.

TIP Fireworks MX 2004 also supplies some predefined animations. Choose Edit, Libraries, Animations to access the available animations and import them into a document.

GETTING STARTED WITH ANIMATIONS

361

Alternative Methods for Creating Animation The animation method just presented enables you to animate a single object that follows a well-defined path in a document. If you’ve already created your animation objects in separate files, or you want to build a flashing effect where objects jump around or appear and disappear, you can use the alternative techniques described here to build your animation. The first technique is ideal for animations where objects “build” or jump around, or where you want to include a variety of different objects. For example, let’s say I want to create the acronym “SOS,” building it one letter at a time to attract the viewer’s attention. I can create each state of the build (blank, S, SO, and SOS) and save each in a separate Fireworks file, and then combine those files into my animation:

1. Click on File. The File menu will appear.

2. Click on Open. The Open dialog box will appear.

362

CHAPTER 15: ADDING ANIMATION TO A GRAPHIC

3. Navigate to the folder where you’ve saved the files to use for the animation.

TIP Save all of the files in the same folder. In addition, I suggest numbering the file names sequentially so the files appear in the correct order in the Open dialog box. That way, you won’t need to move frames around in the animation file.

4. Select all the files to include in the animation by using Shift+click or Ctrl+click.

5. Click on Open as Animation to check it.

6. Click on Open.

GETTING STARTED WITH ANIMATIONS

363

Fireworks will combine the images into a new file, placing the contents from each file on a separate frame in the animation. By default, Frame 1 will be selected. Fireworks converts the canvas background color from each image to a bitmap object. Note that as of this writing, Fireworks includes a bug that causes it to trim a pixel of color off the bottom and right side of the bitmap, so you may want to resize the background bitmap for each frame accordingly.

7. To view another frame in the animation, click on the desired frame in the Frames panel. The contents of the selected frame will appear on the canvas, where you can edit the contents, as needed. Don’t forget to save the source animation file as a Fireworks document so that you can edit it and export it multiple times, as needed.

TIP If you need to move a frame to a new position (order) in an animation, drag the frame to the desired position in the Frames panel list.

364

CHAPTER 15: ADDING ANIMATION TO A GRAPHIC

As one last alternative, you can build an animated symbol frame by frame. A symbol is any object that you can use over and over again within the current document file. (See “Creating a Symbol” in Chapter 16 to learn more.) Symbols help reduce file size. To create an animation, frame by frame, follow these steps:

1. Create a new document with the desired background and canvas size.

2. Click on Edit. The Edit menu will appear.

3. Point to Insert. A submenu will appear.

4. Click on New Symbol. The Symbol Properties dialog box will open.

5. Type a name for the symbol in the Name text box.

6. Click on the Animation option button to select it.

7. Click on OK. The Symbol Editor will open.

GETTING STARTED WITH ANIMATIONS

365

8. Create or import the desired object, sizing it and placing it as desired for the first frame of the animation.

TIP You can use rulers and guides for accurate positioning of the object.

9. Click on the New/Duplicate Frame button in the Frames panel. A blank new frame named Frame 2 will be added to the Frames panel list.

TIP If the new frame will contain the same object and needs only minor changes, you can copy the current frame. To do so, drag the frame to copy to the New/Duplicate Frame button.

10. Create and position the object for the next frame of the animation.

366

CHAPTER 15: ADDING ANIMATION TO A GRAPHIC

11. Repeat Steps 9 and 10 to create the remaining frames.

12. Click on Done to close the Symbol Editor. A copy of the symbol will appear in the document.

13. Press Delete to delete the symbol from the document.

14. Choose Window, Library. The Library panel will open and display the animation symbol you created.

GETTING STARTED WITH ANIMATIONS

367

15. Drag the animation symbol from the Library panel to the desired position on the canvas. When you release the mouse button, an instance of the symbol will be created, and a message box will appear to prompt you to add frames to the current document.

16. Click on OK. The number of frames in the document will become equal to that in the animation symbol.

368

CHAPTER 15: ADDING ANIMATION TO A GRAPHIC

17. Size and position the animation symbol, as desired. (Doing so resizes the animation on each frame.) Using positioning guides can help with this process. See the tip in the section called “Manipulating a Selected Object” in Chapter 3 to learn how to display nonprinting guides.

Testing an Animation The document window includes the frame controls to test an animation. These controls help you scroll through the frames of an animation. The following list explains these controls: • First Frame button. Click to display the first frame of the animation. • Play/Stop button. Click to play or stop the animation. • Last Frame button. Click to display the last frame of the animation.

TESTING AN ANIMATION

369

• Current Frame control. Click to display the number of the current frame. • Previous Frame button. Click to display the previous frame of the animation. • Next Frame button. Click to display the next frame of the animation.

To test an animation, follow these steps:

1. Click on the Play/Stop button. The animation will play from the current frame, displaying the contents of each subsequent frame in quick succession. The white arrow on the button will change to a black box.

370

CHAPTER 15: ADDING ANIMATION TO A GRAPHIC

2. Click on the Play/Stop button. The animation will stop playing at the current frame.

Modifying an Animation If you’re not satisfied with the appearance of the animation, you can use a variety of techniques to view and improve it, as described in this section. For example, you can add and delete an object to selected frames to make the object appear and then disappear in the animation. You can move an object around from frame to frame to create motion. Or you can add the next letter of a word to subsequent frames to create a “build” sequence in the text. Because the possibilities are nearly endless, this book can’t cover them all. However, the remainder of this section presents some basic techniques for working further with an animation.

MODIFYING AN ANIMATION

371

Adding Content to Frames To create the appearance of objects that appear and disappear in an animation, you can add or remove content from any single frame. Here’s an example of adding content to a frame:

1. Click on the frame to edit in the Frames panel. The content of the selected frame will appear on the canvas.

2. Add and position the desired object on the frame. In this case, I used an Auto Shape to add a four-pointed starburst.

TIP Use the New/Duplicate Frame button to add any needed frames into the animation.

Using Onion Skinning Onion skinning enables you to see the contents of multiple frames simultaneously on the canvas. The Onion Skinning button appears at the bottom-left corner of the Frames panel.

372

CHAPTER 15: ADDING ANIMATION TO A GRAPHIC

Click on the button to see a menu of onion skinning settings: • No Onion Skinning. Displays the contents of the current frame only. • Show Next Frame. Displays the contents of the current and the next frame. • Before and After. Displays the contents of the current, next, and previous frames. • Show All Frames. Displays the contents of all the frames. • Custom. Enables you to specify the number of frames visible. • Multi-Frame Editing. Enables you to select and edit objects in any frame.

To display multiple frames with onion skinning, do the following:

1. Click on the frame from which you want to specify the frames to onion skin.

2. Click on the Onion Skinning button at the bottom of the Frames panel. A menu of onion skinning settings will appear.

MODIFYING AN ANIMATION

373

3. Click on the desired onion skinning setting.

The contents of the specified frames will appear on the canvas. To move and resize objects, however, you must turn off onion skinning and make the desired changes on an individual frame. If your animation was created by using an animation symbol, you must edit the symbol itself (from the Library panel); you also can use onion skinning when editing an animation symbol.

374

CHAPTER 15: ADDING ANIMATION TO A GRAPHIC

Setting Frame Delay The frame delay setting specifies the amount of time each frame appears during animation playback. To change the frame delay for any frame in an animation, follow these steps:

1. Click on the frame to adjust in the Frames panel. The frame will be selected.

TIP You can also select multiple frames. To do so, press and hold Shift, and click on the desired frames.

2. Double-click on the number to the right of the frame name in the Frames panel. A pop-up box with the Frame delay setting will appear.

3. Type the desired delay value in the Frame Delay text box and press Enter. The new delay will be applied.

TIP The pop-up box also contains the Include when Exporting option. If you deselect this option, the frame will not be displayed in the animation, and it will not be exported.

EXPORTING AN ANIMATION

375

Setting Looping An animation can either play once on a Web page, or it can loop (play a specified number of times). Use the Looping button on the Frames panel to specify how many times an animated graphic should play back when displayed.

1. Click on the Looping button at the bottom of the Frames panel. A menu will appear.

2. Click on the desired looping setting.

Exporting an Animation As you create and save an animation file, keep in mind that you are creating a Fireworks document that uses the Fireworks PNG file format. When you’ve finished creating and editing the animation, you need to export it as an animated GIF file in order to include the animation on a Web page.

376

CHAPTER 15: ADDING ANIMATION TO A GRAPHIC

To export an animation, follow these steps:

1. Choose File, Export Preview. The Export Preview dialog box will open.

2. Select Animated GIF from the Format list.

3. Click on Export. The Export dialog box will open.

EXPORTING AN ANIMATION

377

4. Navigate to the folder where you want to save the file.

5. Type a name for the animation in the File Name text box.

6. Leave Images Only selected in the Save As Type list. The image will be saved as an individual animated GIF file that you can include on any Web page.

7. Click on Save. The animation will be saved as an animated GIF file.

NOTE To preview the animated GIF, double-click on the GIF file in a folder window. Your Web browser or the Windows Picture and Fax Viewer will launch and play the animation.

This page intentionally left blank

16

Automating Tasks

Fireworks MX 2004 eases the process of working with graphics by enabling you to automate a number of tasks. You can find and replace text, colors, and URLs in your documents in a flash. You can create an object once and use it over and over again by storing it as a symbol. You can store some frequently performed tasks, such as applying effects to an object, as commands. To top it all, you can generate multiple data files by using a single Fireworks source file and an XML data storage file. In this chapter, you’ll learn how to: Use the Find panel Use the Library panel Use the History panel Use the Data-Driven Graphics Wizard

380

CHAPTER 16: AUTOMATING TASKS

Using the Find Panel Imagine that you’re previewing a Web graphic with a group of peers. They tell you that you really should replace a color that you’ve applied to text and objects throughout the graphic because that color doesn’t “pop” enough. Making all the replacements manually would be time consuming, and you might not choose the right replacement color in every instance. To help you in such situations, use the Find panel. The Find panel will search all the occurrences of a particular color (or text, fonts, or URLs) and replace the matches with an alternative that you specify. You can replace matching items in a document, selection, frame, or even multiple files. The Find panel contains the following two lists you can use to specify the location in which to search and the type of object that is to be found: • Search list. Choose the location to search, such as the current document, selection, or frame; or search for multiple files.

USING THE FIND PANEL

381

• Find list. Choose the type of object for which to search, such as text, font, color, or URL.

In addition to the aforementioned items, the Find panel includes a number of controls, depending on the location and object to search. Although there is not room to discuss every option in this book, the following steps provide an example of finding and replacing a color by using the Find panel:

1. Click on Window. The Window menu will appear.

2. Click on Find. The Find panel will open.

382

CHAPTER 16: AUTOMATING TASKS

3. Choose the desired option from the Search list. For example, I left Search Document selected.

TIP If you choose Search Selection, you need to select the objects to be searched before proceeding with your search.

4. Choose the object to find from the Find list. In this case, I selected Find Color. The Find and Change To color boxes will appear in the panel.

5. Use the Find Color box to specify the color to find.

6. Use the Change to box to specify the color that will replace the color specified in Step 5.

7. Click on Replace All. Fireworks will search and replace the objects in the designated location and make the replacements. A message box will indicate the number of replacements made.

USING THE LIBRARY PANEL

383

8. Click on OK. The message box will close.

CAUTION Fireworks displays one less than the actual number of changes made because it starts counting from zero.

Using the Library Panel The Library panel enables you to store symbols—objects that you can reuse repeatedly in a document. For example, say that your company decides to include a Downloads button on every page of its Web site. You can create the button symbol object once, and then drag and drop it from the Library for use throughout the image. If you need to make a small change to each instance of the symbol, you only need to change the source symbol to update each of its instances (duplicates). As shown here, the Library panel lists each of the symbols that you’ve created and previews the currently selected symbol.

384

CHAPTER 16: AUTOMATING TASKS

Creating a Symbol A symbol is an object that you can use repeatedly in a Fireworks document. This helps make the file size more compact because the file doesn’t have to store a complete set of formatting instructions for each instance of the symbol. You can create three types of symbols: • Graphic symbol. Any object, such as a vector shape, to use repeatedly. • Button symbol. Create a button symbol to define the appearance states for a button, as described in Chapter 13, “Adding Buttons to a Graphic.” • Animation symbol. Create an animation, which has multiple frames to create motion, to use repeatedly. See Chapter 15, “Adding Animation to a Graphic,” to learn how to animate an object. To create a graphic symbol, follow these steps:

1. Click on Edit. The Edit menu will appear.

2. Point to Insert. A submenu will appear.

3. Click on New Symbol. The Symbol Properties dialog box will open.

4. Type a name for the symbol in the Name box.

USING THE LIBRARY PANEL

385

5. Click on the Graphic option button.

6. Click on OK. The Symbol Properties dialog box will close, and the Symbol Editor will open.

7. Create the object in the Symbol Editor. You can draw

and format with any of the tools, and you can import graphic content as needed.

8. Click on Done. The symbol will appear in the center of the document.

9. Move the symbol to the desired location.

386

CHAPTER 16: AUTOMATING TASKS

Creating an Instance TIP To convert an object or animation that you’ve already created to a symbol, select it on the canvas and then choose Modify, Symbol, Convert to Symbol or press F8.

An instance is a copy of a symbol in a document. Use the Library panel, which stores all the symbols that you create in a document, to create symbol instances. The Library panel is divided into two parts: • Symbol list. Lists all the symbols created in the document. • Symbol preview area. Displays the preview of the symbol selected in the symbol list. To create an instance of a symbol, follow these steps:

USING THE LIBRARY PANEL

387

1. Click on Window. The Window menu will appear. 2. Click on Library. The Library panel will open.

3. Drag the symbol to the canvas. When you release the

mouse button, the instance of the symbol will appear on the canvas.

388

CHAPTER 16: AUTOMATING TASKS

4. Drag the instance to the desired location in the document.

TIP To make changes, doubleclick on the symbol in the Library panel. The symbol will open in the Symbol Editor. Make the needed changes to the symbol and then click on Done. All the instances of the symbol will update to reflect the changes.

Exporting a Symbol The Library panel lists the symbols that you create in the current document only. To be able to use a symbol that you’ve created in another document, Fireworks enables you to export all the symbols you created in a document as a single PNG file. To export a symbol, follow these steps:

1. Click on the Library panel Options menu button. The Library panel Options pop-up menu will appear.

2. Click on Export Symbols. The Export Symbols dialog box will open.

USING THE LIBRARY PANEL

389

3. Click on a symbol to export, or use Shift+click or Ctrl+click to select multiple symbols.

4. Click on Export. The Save As dialog box will open.

5. Navigate to the disk and folder where you’d like to save the symbol file.

6. Type a name for the file in the File Name text box.

7. Click on Save. Fireworks will save the symbol file in the specified location.

390

CHAPTER 16: AUTOMATING TASKS

Importing a Symbol You can import symbols that you exported earlier from another file by using the Library panel. To import a symbol file, follow these steps:

1. Click on the Library panel Options menu button. The Library panel Options pop-up menu will appear.

2. Click on Import Symbols. The Open dialog box will open.

3. Navigate to the disk and folder where you saved the symbol file.

4. Click on the file. 5. Click on Open. The Import Symbols dialog box will open.

USING THE LIBRARY PANEL

391

6. Click on a symbol to import, or use Shift+click or Ctrl+click to select multiple symbols.

7. Click on Import.

The symbol(s) will appear in the Library panel so that you can add them into your document.

392

CHAPTER 16: AUTOMATING TASKS

Using the History Panel The History panel records all the steps that you perform while working on a graphic. You can replay all or some of these steps to reproduce the same effect. Even better, the History panel enables you to save steps as a command that you can use over and over again. As an example of working with the History panel, you could apply an inner bevel and a glow to a rectangle in the document. The History panel would record those steps. To apply the same steps to an oval, select the oval and replay the steps from the History panel.

Replaying Steps Replaying steps help you perform the same task again. To replay steps, follow these steps:

1. Perform the steps required for a task, such as applying the desired formatting or effects.

USING THE HISTORY PANEL

393

2. Click on Window. The Window menu will appear.

3. Click on History. The History panel will open.

4. Select the object on which you need to perform the same task.

5. Select the steps to replay in the History panel. (Use Shift+click to select multiple steps.)

6. Click on Replay at the bottom of the History panel.

394

CHAPTER 16: AUTOMATING TASKS

The same task will be performed on the selected object. Another step named Play Steps will be added to the History panel. Click on Play Steps to repeat the same task.

Creating Commands You can save the steps stored in the History panel as commands. To create commands, follow these steps:

1. Select the steps to save as a command. You can use Shift+click and Ctrl+click to select multiple steps, as needed.

2. Click on the Options menu button in the upper-right corner of the History panel. The History panel Options pop-up menu will appear.

3. Click on Save as Command. The Save Command dialog box will open.

USING THE HISTORY PANEL

395

4. Type a name for the command in the Name text box.

5. Click on OK. The steps will be saved as a command.

6. Select or create an object. 7. Click on Commands. The Commands menu will appear.

8. Click on the command that you created in the section at the bottom of the menu.

396

CHAPTER 16: AUTOMATING TASKS

The steps stored in the command will be applied to the selected object.

Using the Data-Driven Graphics Wizard Suppose that you need to create an online product catalog that displays the different products produced by your company. The catalog pages will use the same background and layout for each of the products. You can use the DataDriven Graphics Wizard (DDGW) in Fireworks to generate each of the pages rather than creating them manually. DDGW generates multiple Fireworks files by merging data from an XML file with a single Fireworks template file.

USING THE DATA-DRIVEN GRAPHICS WIZARD

397

The Fireworks template file contains variables. A variable is any text enclosed within curly braces. For example, {varSong} is a variable. You can create three types of variables: • Text. Indicates where text from the XML file should be placed. • Image. Indicates where an image file referenced by the XML file should be placed. Create an image variable by typing a name, such as {Image1}, for the image in the Name box of the Property Inspector. • URL. Indicates where links defined in the XML file should be applied to hotspots and slices. You can create a URL variable by typing a variable, such as {URL1}, in the Link text box of the Property Inspector.

CAUTION There is a bug in Fireworks that prevents the use of symbols in template files.

398

CHAPTER 16: AUTOMATING TASKS

The XML file contains the data that replaces the variable used in the template file. See Appendix A to learn more about creating an XML document.

CAUTION The template and XML files must be on your system’s hard disk or on a mapped network drive in Windows. Otherwise, the DDGW won’t be able to recognize the XML data.

To generate multiple files by using DDGW, follow these steps:

1. Open the template file. (If you create a new template file, you must save it before continuing.)

2. Click on Commands. The Commands menu will open.

3. Click on Data-Driven Graphics Wizard. Step 1 of Data-Driven Graphics Wizard will open.

USING THE DATA-DRIVEN GRAPHICS WIZARD

399

4. Click on the Folder icon beside the Select an XML data file box. The Open dialog box will open.

5. Click on Open after selecting the desired XML file.

400

CHAPTER 16: AUTOMATING TASKS

6. Click on Next. Step 2 of DDGW will open, previewing your data.

7. Click on Next. Step 3 of DDGW will open.

TIP Screen 2 displays the records stored in the XML file. Browse through the records by using the VCRlike controls.

USING THE DATA-DRIVEN GRAPHICS WIZARD

401

8. Specify which records to process.

9. Click on Next. Step 4 of the DDGW will open.

10. Step 4 enables you to map the variables with the fields in the XML file. Click on a variable in the Select a Variable list; then click on a field in the Select a Field list; and then click on the + button. The Mapped Variables list displays the variable along with the field.

11. Click on Next. Step 5 of the DDGW will open.

402

CHAPTER 16: AUTOMATING TASKS

12. Step 5 enables you to specify the export settings. Specify a Filename convention, the export format and location for Images, and where to create the source PNG files. 13. Click on Next. Step 6 of DDGW will open.

14. Click on Done. The image (and PNG) files will be created and stored in the location you specified.

A

Creating an XML Document

The Data-Driven Graphics Wizard reads data from an XML file that you create as a data store. XML (Extensible Markup Language) is a markup language used to store information in a standardized way. An XML file can not only be displayed on a Web browser, but its data also can be read by a variety of programs. Thus, an XML file provides an excellent means of exchanging data between programs.

404

APPENDIX A: CREATING AN XML DOCUMENT

An XML file stores data in a hierarchical structure by using a number of components. The following list explains these components: • Processing Instruction. An XML document usually begins with the XML declaration statement, also called the Processing Instruction (PI). The PI provides information regarding the way in which the XML file should be processed. • Tags. Used to identify data. They specify a name for the given piece of information. A tag consists of opening and closing angular brackets (). These brackets enclose the name of the tag. Tags usually occur in pairs. Each pair consists of a start tag and an end tag. The start tag only contains the name of the tag, whereas the end tag includes a forward slash (/) before the name of the tag.

• Elements. Basic units used to identify and describe data in XML. They are the building blocks of an XML document. You should define each element with a pair of tags. For example, if you need to represent data pertaining to songs, you can create elements such as varSong, varArtist, and varAlbum.

CREATING AN XML DOCUMENT

405

• Content. Information identified by the tags in an XML document is referred to as the content. You can think of each set of information— that is the varSong, varArtist, and varAlbum information for each song in this example XML file—as a record.

To create an XML file, follow these steps:

1. Launch Notepad. 2. Type the appropriate Processing Instruction and press Enter.

3. Add a tag to identify the beginning of the items (records) in the document and press Enter.

406

APPENDIX A: CREATING AN XML DOCUMENT

4. Create each record, adhering to these guidelines: • Create a starting and ending tag for each record. Include the forward slash in each ending tag and press Tab once before entering each tag. • Create a starting and ending tag for each data element within a record. Press Tab twice before the starting tag. • Do not include spaces between the tags and elements of data. • Press Enter and then Tab after each record.

5. Press Enter and add the closing tag.

6. Save the file with an .XML extension.

CREATING AN XML DOCUMENT

407

7. View the file in your system’s Web browser to verify its contents.

TIP The Samples folder within the folder where you installed Fireworks contains an example XML file that you can use for reference.

This page intentionally left blank

Index A actions, 31, 296 Adaptive color palette, 240 Add Pop-up Menu command, 340 Add Simple Rollover Behavior option, 297 Add Swap Image Behavior option, 298, 308 Adjust Color filter, 226 Align panel, 14 aligning objects, 14 All Programs command, 5 All Programs submenu, 5 Analysis Results window, 260 anchor points, 80, 82, 85 Animate dialog box, 357–359 Animated GIF WebSnap 128 preset, 237, 252 animated GIFs, previewing, 377 animated symbols, 364–368 animation, 355–356 angle of movement, 358 automatically adding frames, 359 converting to symbols, 386 creation of, 357–368 deleting symbols, 366 exporting, 375–377 frame contents, 371–372 frame delay, 374 frames, 356, 358, 363, 365 looping, 375

modifying, 360, 370–375 moving and resizing objects, 373 naming, 377 numbering files, 362 object movement number, 358 onion skinning, 371–373 opacity of object, 358 playing, 369 PNG file format, 375 positioning objects, 365 positioning symbols, 367 predefined, 360 previous frame contents, 372 repositioning frames, 363 rotating objects, 359 saving as animated GIF file, 377 saving files, 362 scaling objects, 358 selecting and editing frames, 372 stopping, 369 symbols, 364–368 testing, 368–370 Animation submenu, 357 animation symbols, 384 ASCII (plain text) TXT file, 175 Attach to Path (Ctrl+Shift+Y) keyboard shortcut, 188 auto naming slice files, 284–286 Auto Shapes panel, 15 AutoShapes, 15, 79, 94–97, 293 auto-size text blocks, 172–173

B Bézier curves, 80–81 background color of canvas, 22 Background layer, 197 Backspace key, 58 Behavior handle, 307–309, 340, 353 behaviors disjoint rollovers, 307–310 drag-and-drop method, 309 simple rollovers, 296–298 Behaviors panel, 15, 312–313 Better Quality JPEG, 237 Bevel Boss filter, 226 Bicubic interpolation, 32 Bilinear interpolation, 32 bitmap graphics, 47 layer for imported, 195 pixels, 99 replacing colors, 168–170 selecting color ranges, 110–112 bitmap masks, 229–230 bitmap objects adjusting focus, 120–122 applying color, 136–138 blurring, 120–122 canvas background color, 363 cloning, 127 creation of, 102–105 drawing, 102–103 erasing, 106–107 file formats, 100

410

INDEX

gradient fills tool, 150–154 importing, 100–101 lightening or darkening, 122–124 opening, 100 painting strokes, 104–105 placing on-screen, 101 preventing drawing on transparent parts, 102, 105 resolution dependent, 99 retouching, 120–129 sampling color, 136 selecting parts of, 107–119 selecting pixels, 151 sharpening, 120–122 smudging, 125–126 tools, 10 Web Dither fill, 159–160 Black & White color palette, 240 blending layers, 204–207 blending mode, 102, 105 Blur filter, 226 Blur tool, 120–122 BMP file format, 237 bold text, 179 borders for pop-up menus, 349 Bring Forward command, 55 Bring to Front command, 55 brush strokes, 32, 104–105 brush tips, 104, 165 Brush tool, 104 brush types, 104 bullets and buttons, 330 Burn tool, 122–124 Button Editor, 319–325 button symbols, 319, 333, 384 buttons, 315 active area, 325–326 bullets, 330 creation of, 318–329 Down state, 318, 322–323, 328 duplicating, 331 finishing, 326 four-state, 319 instances of, 329 interactivity, 319 library of predefined, 316–318 Over state, 318, 321, 328

Over While Down state, 318, 323–324, 329 positioning, 326–327 previewing, 316 target Web page, 37 testing, 327–329 text, 317 three-state, 319 two-state, 319 Up state, 318, 320, 327 Buttons layer, 194

C canvas, 8, 22 guides, 59 overlapping objects, 55–57 positioning symbols, 367 removing or adding space on, 65 trimming area outside, 63 characters, kerning, 181–182 Charcoal stroke type, 163 Check Spelling dialog box, 189–190 Circle Hotspot tool, 268, 271 circular hotspots, 271 cloning bitmap objects, 127 closing documents, 25 CMY color model, 145–146 color bar, 148–149 Color dialog box, 32, 241 Color Mixer panel, 14, 139, 145–149 color models, 145–146 Color palettes, 137, 152–153, 239–244 color ranges, 110–112 colors applying, 132–138 calculating values, 145 color bar, 148–149 Color Mixer panel, 147–148 composed of mix settings, 147–148 curves, 102 custom, 32 defaults, 32 editing, 241 fills, 92, 102, 133 finding and replacing, 381–383 highlights on pop-up menus, 349

hotspots, 269–270 interpolating, 32 locking, 241 paths, 90 pixel value, 14 pop-up menu borders, 349 removing from exported image, 242–243 replacing in bitmap images, 168–170 reversing fill and stroke, 134 sampling, 246 strokes, 104, 133 as swatches, 140–145 text, 179 text strokes, 184–186 tolerance value, 137 tools, 10 vector objects, 132–134 Web-safe, 159 Colors panel, 146 Colors panel group, 139, 140–145 combining objects, 228–234 commands, 394–396 Commands, Data-Driven Graphics Wizard command, 398 Commands, Panel Layout Sets, Save Panel Layout command, 19 Commands, Panel Layout Sets command, 20 Commands, user-created command, 395 compressing images, 244 constraining curves, 102 contour gradients, 155–157 copying and pasting text, 175 corner points, 80, 82 Crop tool, 62–63 cropping images, 62–63 cube AutoShape, 97 curve points, 80 curves, 102, 105 custom colors, 32 keyboard shortcuts, 41–44 optimization settings, 253 presets, 253–255 slice files names, 283 Custom color palette, 240 cutting objects, 58

INDEX

D DDGW (Data-Driven Graphics Wizard), 396, 398–403 default colors, 32 Delete key, 58 Deselect (Ctrl+D) keyboard shortcut, 119 deselected points, 34 digital animation. See animation disjoint rollovers assigning behavior, 307–310 changing event, 311–312 creation of, 301–310 deleting, 313 target area, 301, 304–306 target slice, 308 testing, 310 trigger area, 301–304 dithering images, 243–244 docking panel groups and panels, 17 Document window, 7–9 2-Up preview, 257 4-Up preview, 257 aligning objects, 14 canvas, 8 Current Frame button, 369 file size and estimated download time, 256 file tabs, 8 First Frame button, 368 Frame controls, 9 image preview, 256 Last Frame button, 368 Magnification box, 60 Magnification list, 9 Next Frame button, 369 Page Preview box, 9, 410 Play/Stop button, 368–370 Preview button, 256, 269, 298, 310, 318, 327 Preview in Browser option, 275–276 Preview in Primary Browser option, 276 Preview in Secondary Browser option, 276 Previous Frame button, 369

Quick Export button, 9, 258, 262, 275–275 Quick Export menu, 262, 275–276 documents, 8 adding text, 172–177 closing, 25 creation of, 21–23 e-mailing, 263–264 exporting to another file format, 9 with Optimize panel settings, 258–261 magnifying, 9 naming, 24 navigating frames, 9 opening, 6, 26 previewing, 8–9 properties, 12 saving, 23–24 switching, 8 tools for controlling view, 10 Dodge tool, 122–124 Down state, 318, 322–323, 328 drawing vector objects Bézier curves, 80–83 ellipses, 70, 75–76 freeform, 83–84 lines, 68–70 new shapes, 78–79 polygons, 70, 76–78 rectangles, 70–72 Drop Shadow effect, 221 Duplicate Layer dialog box, 209 Duplicate Set dialog box, 42

E Edit, Clear command, 58 Edit, Copy command, 58 Edit, Crop Document command, 33 Edit, Cut command, 58, 231 Edit, Duplicate command, 331 Edit, Insert, Hotspot command, 274 Edit, Insert, New Button command, 319, 320 Edit, Insert, New Symbol command, 364, 384 Edit, Insert, Slice command, 282

411

Edit, Keyboard Shortcuts command, 40, 41 Edit, Libraries, Animations command, 360 Edit, Libraries, Bullets command, 330 Edit, Libraries command, 316 Edit, Paste as Mask command, 232 Edit, Paste command, 58 Edit, Preferences command, 30 Edit, Undo Crop Document command, 63 Edit Pop-up Menu command, 353 Edit Stroke dialog box, 161–166 editing AutoShapes, 96–97 button symbols, 333 colors, 241 effect settings, 217–218 gradients, 154 hotspots, 274 instance-level, 332 original or copy of image, 36 Photoshop file text, 38 preferences, 33–35 preventing, 38 symbol-level, 333 symbols, 388 effects, 213 applying, 215–217 categories, 214 deleting, 219–221 editing settings, 217–218 reapplying, 220 removing, 219–221 saving as styles, 221–223 turning off, 219–220 Effects pop-up menu, 36 elements, 15 Ellipse tool, 75 ellipses, 70, 75–76 e-mailing documents, 263–264 empty mask object, 229 Eraser tool, 106–107 erasing bitmap objects, 106–107 events, 296, 311–312 Exact color palette, 240 expanding and collapsing panels and panel groups, 18

412

INDEX

Export dialog box, 258, 261, 278–279, 287–290, 376–377 Export Preview dialog box, 260–261, 376 Export Selected Slice command, 289 Export Settings option, 263 Export Symbols dialog box, 388–389 Export Wizard, 258–260 exporting animation, 375–377 documents, 9, 258–261 files to Adobe products, 263 files to Macromedia products, 262 graphics and image map, 278–279 slices, 286–290 symbols, 388–389 Eye Candy 4000 LE filters, 213, 226 Eyedropper tool, 132–136

F Feather dialog box, 119 feathering selections and selection marquee, 109, 111–112, 119 File, Close command, 25 File, Exit command, 5 File, Export command, 258, 278, 287 File, Export Preview command, 376 File, Export Wizard command, 259 File, HTML Setup command, 285 File, Import command, 100, 175 File, New command, 21 File, Open command, 26, 100, 361 File, Open Recent command, 26 File, Save command, 24 File, Send to E-mail submenu, 263 file formats, 23 choosing, 236–238 exporting documents to different, 9 slices, 281 file tabs, 8 files creation of, 6 exporting, 262–263 recently used, 6, 26 replacing occurrences in, 380–383 Fill Color palette, 133 fill palette, 185–186

fills, 68 anti-aliasing, 93 changing, 150–160 colors, 92, 133, 140–141 default colors, 32 edges, 93 feathering, 93 hard-line edges, 93 mixing and applying color, 147–149 objects, 92–94 reversing colors, 134 stroke color, 102 text, 184–186 texture, 71, 93 transparent, 93 type, 92 Filter menu, 226 Filters, Eye Candy 4000 LE command, 227 Filters menu, 36 Find panel, 15, 380–383 Fireworks exiting, 5 Help window, 28 Preferences file, 39 Start Page, 6 starting, 5 workspace, 7–21 Fireworks PNG option, 263 fixed-width text blocks, 172, 174 flattening layers, 38 selection, 196 folders, 36 fonts, 179, 183 formatting pop-up menu text, 347 text blocks, 179–181 four-state buttons, 319, 329 frame delay, 374 frames, 292 adding content, 371 animation, 356, 358–359, 363, 365 contents, 372 converting layers to, 37 copying, 365 navigating, 9

number visible, 372 onion skinning, 371–373 sharing layers, 196 Frames panel, 14, 356 Before and After option, 372 Custom option, 372 Delete Frame button, 356 Frame 1, 294–295, 297, 304 Frame 2, 295, 305 Frame delay setting, 374 Include when Exporting option, 374 Looping button, 374 Multi-Frame Editing option, 372 New/Duplicate Frame button, 295, 304, 356, 365, 371 No Onion Skinning option, 372 Onion Skinning button, 371 repositioning animation frames, 363 Show All Frames option, 372 Show Next Frame option, 372 viewing animation frame, 363 freeform selection areas, 113–116 vector objects, 83–84 Freeform tool, 85–87

G General preferences, 31–32 GIF Adaptive 256 preset, 237, 252 GIF (Graphics Interchange Format) file format, 100, 237 color palette settings, 239–244 compressing, 244 interlacing, 246–247 optimization settings, 239–247 transparency, 245–246 GIF Web 216 preset, 237, 252 GIF WebSnap 128 preset, 237, 252 GIF WebSnap 256 preset, 237, 252 gradient fills, 132. See also gradients Gradient tool, 132, 150–154, 156 gradients choosing type, 151 color choices, 152–153 contour, 155–157 editing, 154

INDEX

handles, 35 modifying width, 155 moving origin point, 155 start and stop point, 151 transforming, 154–155 transition between colors, 154 graphic file as pattern fill, 158 graphic symbols, 384 graphics See also images adding text, 173–174 choosing file format, 236–238 exporting as image map, 278–279 hotspots, 268–279 interactivity, 15 layers, 194–196 optimizing, 236–258 recording steps for, 392–396 replaying steps, 392–394 graphics tablets, 31, 84, 115 Grayscale color model, 146 Grayscale color palette, 240 grids, 35 Group Panel with New Panel Group command, 18 grouping objects, 53–54, 293 panels, 17–18 guideline, 34 guides, 59

H hand tool, 62 help, 6, 27–28 Help, Fireworks Help command, 27 Help files, 27 Hexadecimal color model, 145 highlight default colors, 32 History panel, 14, 31, 392–396 hotspots, 194, 267 alternative text, 270 applying to object, 273–274 attaching pop-up menu, 338 Behavior handle, 296 changing shape, 270 circular, 271 colors, 269–270

creation of, 268–273 editing, 274 hiding and showing, 269 image maps, 278–279 polygonal, 272–273 rectangular, 271 specifying Web browser for previews, 275–276 testing, 275–277 tools, 10 URLs (Uniform Resource Locators), 270 Web layer, 269 HSB color model, 146 HTML (HyperText Markup Language), 278, 286–290 HTML Setup dialog box, 285–286 HTML slices, 281 HTML-based cell, 346

I image maps, 268, 278–279 Image Size dialog box, 64–65 image slices, 281–282 image variable, 397 image-based cell, 346 images See also graphics changing proportion, 64 compressing, 244 cropping, 62–63 dithering, 243–244 editing original or copy, 36 optimizing original or copy, 36 resizing, 64–65 resolution, 64 sampling color, 246 scrolling, 62 selecting objects, 48–51 slicing, 280 specifying transparency, 245–246 units of measurement, 22 viewing, 59–62 zooming, 59–61 Import dialog box, 100–101, 175–176 Import Styles command, 13 Import Symbols: Buttons dialog box, 316

413

Import Symbols: dialog box, 390–391 importing bitmap objects, 100–101 styles, 13 symbols, 390–391 text, 175–177 indenting first line of text, 182 Info panel, 14 Inner Bevel effect, 214, 221 Insert Slice command, 293, 303 instance-level editing, 332 instances of symbols, 386–388 interlacing GIF and PNG-8 file format, 246–247 interpolating colors, 32 inverting selection marquee, 118 irregular slices, 280 italic text, 179

J JavaScript code and simple rollover, 299–301 [Javascript] dialog box, 19 JPEG Compressed option, 263 JPEG (Joint Photographic Experts Group) file format, 100, 237 adjusting quality, 247–248 optimization settings, 247–250 progressively displaying, 249–250 selectively compressing content, 250–251 sharpness, 249 smoothing, 248 JPEG-Better Quality preset, 252 JPEG-Smaller File preset, 252

K kerning characters, 181–182 keyboard shortcuts, 39 creation of custom, 41–44 deleting, 43 graphics tablet, 31 using set from another application, 40–41 Keyboard Shortcuts dialog box, 40–43 Knife tool, 85, 88–89

414

INDEX

L Lasso tool, 113–115 layers, 13, 55, 193–196 automatically adding objects to, 197 blending, 204–207 changing order of, 203–204 collapsing on Layers panel, 195 converting to frames or single layer, 37 copying, 210 creation of, 197–200 deleting, 195, 211 duplicating, 195–196, 208–210 flattening, 38, 196 hiding and showing, 196, 207–208 imported bitmap graphics, 195 listing, 194 listing objects on, 194 locking and unlocking, 196, 201–202 managing, 200–211 mask thumbnail, 229 moving objects between, 204 naming, 197–198 new, 195–196 numbering, 197 overlapping objects, 194 protecting from changes, 196 removing mask, 230 renaming, 198 selecting, 200 selecting objects, 199, 201 sharing, 196 transparency of contents, 204–207 Web Layer, 194, 203 Layers palette, 196 Layers panel, 13, 194–196 Add Mask button, 229 Blend Mode list, 204, 205 changing order of layers, 203–204 collapsing layers, 195 Delete Mask option, 230 Delete Selection button, 195, 211 Duplicate Layer option, 209 duplicated layers, 209 expanding layers, 195 eye icon, 207–208

folder icon, 194 Layer Name text box, 198 Layers Options pop-up menu, 198 Layers panel list, 203–204 Layers Panel Options pop-up menu, 195, 209 New Bitmap Image button, 195 New Layer option, 198 New/Duplicate Layer button, 195, 197, 210 object name, 199 Opacity slider, 204–205 Options button, 230 selecting layers, 200 selecting objects, 201 Web Layer, 194 leading, 182–183 Libraries submenu, 316 library of predefined buttons, 316–318 Library panel, 15, 387 animation symbol, 366 button symbols, 333 Export Symbols command, 388 Import Symbols command, 390 Options menu button, 388, 390 Options pop-up menu, 388, 390 storing symbols, 383–390 Symbol list, 386 Symbol preview area, 386 Life Effects, 214 Line tool, 68–69 lines, 68–71 links, 397 Locate Browser dialog box, 275–276 Locate file dialog box, 158 looping animation, 375

M Macintosh color palette, 240 Macromedia command, 5 Macromedia Fireworks MX 2005. See Fireworks Macromedia submenu, 5 Macromedia Web site, 6 Magic Wand tool, 110–112 Magnification list, 59–60 magnifying images. See zooming

Marble filter, 226 Marquee tool group, 11 Marquee tools, 108–110 mask group, 228 mask object, 228 mask thumbnail, 229 masks, 213, 228–234 menu bar, 7 menu items creation of, 341–342 deleting, 343 distance to edge of cell, 348 indenting and outdenting, 344 pop-up menus, 339–343 Web page URL, 342 Modify, Arrange submenu, 55–56 Modify, Canvas, Canvas Size command, 33 Modify, Group command, 53 Modify, Pop-up Menu, Add Pop-up Menu command, 340 Modify, Transform, Scale command, 58, 78 Modify, Ungroup command, 54 Motion Trail dialog box, 227 Motion Trail filter, 226–227 mouse pointer, 14, 16 move pointer, 16 moving objects, 48–49, 57

N navigation bars, 315, 322, 329–334, 337 Nearest Neighbor interpolation, 32 New Document dialog box, 21–22 New Layer dialog box, 198 New Style dialog box, 222–223 Notepad, 405

O objects aligning, 14 automatically adding to layers, 197 changing fill, 150–160 combining, 228–234 converting to symbols, 386 copying, 58 cutting, 58

INDEX

deleting, 58, 195 distance for selecting or snapping to grid, 35 effects, 214–228 expanding in Layers panel, 195 fills, 92–94 grouping, 53–54 guideline, 34 handles, 49 hiding edges, 33 hotspot, 273–274 layers, 55 listing for layers, 194 manipulating, 57–58, 85–89 masks, 228–234 moving, 48–49, 57, 204 no fill, 77 optimization settings, 15 overlapping, 55–57, 194 pasting, 58 properties, 12, 49 removing effects, 219–221 renaming, 199 resizing, 58 scaling, 58 selecting, 48–52, 199, 201 selection box, 49 selection tools, 10 strokes, 90–92 style, 223–225 third-party filters, 226–228 ungrouping, 53–54 onClick event, 311 onion skinning, 371–373 online resources, 6 onLoad event, 311 onMouseOut event, 311 onMouseOver event, 311 Open dialog box, 6, 26, 361–362, 390, 399 opening documents, 26 optimization, 235, 253 Optimize (F6) keyboard shortcut, 236 Optimize panel, 15, 236, 263 Add color option, 241 Add color to transparency button, 245 Alpha Transparency option, 245

color palettes, 240 Colors list, 243 Delete color option, 241 Delete Settings option, 255 Dither box, 244 Edit color option, 241 Edit Selective quality options button, 250 Export File Format list, 238 exporting documents with settings from, 258–261 file format options, 238 GIF and PNG-8 file formats, 239–244 Index option, 245 Index Transparency option, 245 Indexed Palette list, 239–240 Interlaced option, 247 JPEG Quality box, 248 Lock color option, 241 Loss box, 244 Options menu, 242, 247, 254 Options menu button, 242, 247 preset optimization settings, 252–258 Progressive JPEG option, 250 Rebuild button, 241, 242 Remove color from transparency button, 245 Remove Unused Colors option, 242 Saved Settings list, 252, 254 Select transparent color button, 245 Sharpen JPEG Edges option, 249 Smoothing box, 248 Snap to Web safe option, 241 optimizing graphics choosing file format, 236–238 comparing effect of optimization settings, 257 GIF and PNG-8 settings, 239–247 JPEG settings, 247–250 preset settings, 252–258 previewing document, 256–258 Options, Group Panel with command, 18 Outer Bevel effect, 214 Oval Marquee tool, 11, 108–110 oval selection area, 108–110

415

Over state, 318, 321, 328 Over While Down state, 318, 323–324, 329 overlapping objects, 55–57 strokes, 164

P Paint Bucket tool, 132, 136–138, 147, 149, 159 painting strokes, 104–105 panel groups, 16–18 panels, 13, 16–21 panning, 62 paragraphs, 181–182 Paste As Mask command, 231–234 pasting objects, 58 paths, 68 attaching text, 187–188 colors, 90 contour gradient, 155–157 cutting, 88–89 previewing next segment, 34 pushing or pulling, 85–87 selecting, 187 width, 90 patterns, 35, 37, 157–158 Pen tool, 81 Pencil tool, 102–103 Photoshop files, 37–38 Photoshop plug-ins, 36 pixels, 14, 99, 151 plug-ins, 228 PNG file format, 23 PNG (Portable Network Graphic) file format, 23, 237, 375 PNG files, 35–36, 237 PNG-8 file format, 237 color palette settings, 239–244 compressing, 244 interlacing, 246–247 optimization settings, 239–247 transparency, 245–246 PNG-24 file format, 237 PNG-32 file format, 237 Point to Animation, Animate Selection command, 357 Pointer tool, 34, 48–49, 72, 74, 88–89, 89, 156, 293, 303

416

INDEX

points, 34, 68 Polygon Hotspot tool, 268, 272 Polygon Lasso tool, 113, 115–116 Polygon Slice tool, 280 Polygon tool, 76 polygonal hotspots, 272–273 polygons, 70, 76–78 Pop-up Menu Editor, 353 Add Menu button, 339 Advanced tab, 337, 348–349 Alignment buttons, 347 Appearance tab, 337, 345, 347 _blank option, 342 Border color option, 349 Border width option, 349 Cell height option, 348 Cell padding option, 348 Cell spacing option, 348 Cell width option, 348 Content tab, 336, 339, 340 Delete Menu button, 339, 343 Done button, 351 Font list, 347 Highlight option, 349 HTML-based cell option, 346 image-based cell option, 346 Indent Menu button, 339, 344 Link column cell, 339, 341–342 Menu delay option, 349 Menu Position buttons, 350 Outdent Menu button, 339, 344 Over state, 347 _parent option, 342 Pixels option, 348 Position tab, 337, 350 _self option, 342 Shadow option, 349 Show borders option, 349 Size list, 347 Style buttons, 347 Target column, 339, 342 Text column, 339, 341 Text indent option, 349 Text text box, 343 _top option, 342 Up state, 347 X and Y boxes, 350

pop-up menus, 335 adding menu items, 339–343 advanced settings, 348–349 amount of indent, 349 borders, 349 cells, 346, 348 creation of, 336–352 deleting menu items, 343 enhancing, 345–347 finishing, 351 formatting text, 347 highlight color, 349 HTML-based cell, 346 image-based cell, 346 modifying, 353 object attaching to, 338 orientation, 345 Over state, 337, 347 positioning, 350–351 space between cells, 348 submenus, 344 target page, 342 testing, 351–352 time remaining visible, 349 Up state, 337, 347 predefined animation, 360 buttons, 316–318 preferences canceling changes, 31 editing, 33–35 restoring default, 39 setting, 30–39 Preferences dialog box, 30 Brush-size painting cursors option, 33 Cancel button, 31 color box, 32 Convert to Fireworks objects option, 37 Convert to frames option, 37 Delete objects when cropping option, 33 Editable option, 38 Editing preferences tab, 33–35 Folders preferences tab, 36–37 General preferences tab, 31–32 Hide Edges option, 33

Import preferences tab, 37 Interpolation pop-up menu, 32 Launch and Edit tab, 35–36 Launch options, 32 Maintain appearance option, 38 Mouse highlight option, 34 Patterns option, 37 Photoshop Plug-Ins option, 36–37 Pick distance box, 35 Precise cursors option, 33 Preview drag option, 34 Share Layer Between Frames check box, 37 Show fill handles option, 35 Show Pen preview option, 34 Show solid points option, 34 Snap distance box, 35 Sys color picker button, 32 Textures option, 37 Undo steps option, 31 Use flat composite image option, 38 When editing from external application option, 36 When optimizing from external application option, 36 Preferences (Ctrl+U) keyboard shortcut, 30 Preset Name dialog box, 253 Preview Document (F12) keyboard shortcut, 277 previewing animated GIF, 377 brush tip, 104 buttons, 316 choices, 8 documents, 8–9 eraser tip, 106 next path segment, 34 optimized graphics, 256–258 original document, 258 softness, 104 strokes, 163 symbols, 386 primary Web browsers, 275 processing instructions, 404 Progressive JPEGs, 249–250 properties, 12, 49, 166

INDEX

Property Inspector, 7, 11–12 Add Effects button, 214, 215, 222 Alignment buttons, 180 Alt box, 270 Amount of feather box, 93 Amount of texture box, 91, 93 animation settings, 360 Anti-aliased check box, 93, 102, 109 Auto erase check box, 102 Auto kern check box, 183 Bézier curve properties, 81 _blank option, 270 Blend Mode list, 103, 105, 128 Bold button, 179 Brush tip size box, 121, 123, 125 Canvas Size button, 65 Change color box, 169 Circle option, 270 collapsing to half height, 12 Color box, 102, 104, 159, 179, 270 To color box, 170 Delete Effects button, 220 document properties, 12 Edge list, 108, 111, 113 Edge of fills list, 93 Edge Softness box, 91, 104, 106, 121, 123, 125, 127 Edit button, 282 Edit Stroke dialog box, 161 Edit the object name text box, 283 Effects list, 217, 219–220 Effects pop-up menu, 36, 214–216, 222 ellipse properties, 75 Exposure box, 123 Feather amount box, 109, 111, 113 Feathering option, 93 Fill category list, 92, 158 Fill Color box, 92, 137, 152, 159 Fill Color palette, 133 Fill Selection box, 137–138 Fit Canvas button, 63 Fixed ratio option, 108 Fixed size option, 108 Font list, 179 formatting settings, 173 freeform vector object properties, 84

Gradient list, 151 Gradient option, 92 Grayscale option, 229, 233 H text box, 73, 78 Hard option, 93 Horizontal Scale box, 182 Image Size, 64 Intensity box, 121 Italic button, 179 Kerning box, 182–183 Leading box, 182 Leading Units list, 183 Link list, 270 Link text box, 37 Normal option, 108 object properties, 12, 49 Opacity box, 103, 105, 106, 128 options, 11 Options submenu, 222 Paragraph Indent box, 182 Pattern pop-up menu, 37, 92 Polygon option, 270 polygon properties, 77 Preserve Transparency check box, 102, 105 Pressure box, 125 Range list, 123–124 Rectangle option, 270 rectangle properties, 71 Rectangle Roundness text box, 74 Save as Style option, 222 self option, 270 settings for line appearance, 69 Shape button, 106, 121, 123, 125 Shape list, 270 Sides text box, 77 Size box, 106, 179 Slice export settings list, 281 Smudge color check box, 125 Solid option, 92 Source aligned check box, 127 Space After Paragraph box, 182 Space Preceding Paragraph box, 182 Stamp Size box, 127 Stroke category list, 90, 104 Stroke color box, 90 Stroke Color palette, 133 Style list, 108

417

Target list, 270 Text Orientation button, 180 Texture amount box, 104 Texture choices, 71 Texture list, 104 Texture name list, 91, 93 Texture pop-up menu, 37 Texture text box, 37 Tip preview box, 104, 106 Tip preview (Edge) box, 91 Tip size box, 90, 104 Tolerance box, 111, 137 tool options, 11 Transparent texture check box, 93 Type list, 281 Underline button, 179 Use entire document check box, 125, 128 W text box, 73, 78 Web Dither option, 92, 159 X text box, 73 Y text box, 73 pull pointer, 87 push pointer, 86

R raster images, 99 recently used files, 6, 26 recording steps for graphics, 392–396 Rectangle Hotspot tool, 268, 271 Rectangle pop-up menu, 94 Rectangle tool, 70, 75 Rectangle tool pop-up menu, 73 rectangles, 70–74 rectangular hotspots, 271 Rectangular Marquee tool, 11, 108–110 rectangular selection area, 108–110 rectangular slices, 280 Red Eye Removal tool, 127 red-eye removal, 127 Replace Color tool, 168–169 Reshape Area tool, 85 reshaping vector graphics, 68 resizing images, 64–65 objects, 58 polygons, 78 vector objects, 10

418

INDEX

resolution, 22, 64 resolution-independent, 68 retouching bitmap objects, 120–129 reusable symbols, 15 RGB color model, 145 rollovers, 291 disjoint, 301–310 simple, 292–301 Rounded Rectangle tool, 73 RTF (Rich Text Format) files, 175 Rubber Stamp tool, 127–129

S Samples folder, 407 sampling colors, 246 Save As dialog box, 24, 389 Save Command dialog box, 394–395 scaling objects, 58 scrolling images, 62 secondary shortcut, 41 secondary Web browsers, 275 Select, Deselect command, 119 Select, Feather command, 119 Select, Select Inverse command, 118 Select Behind tool, 51–52 selected objects, 57–58 selected points, 34 selecting bitmap objects, 107–119 color ranges, 110–112 distance for, 35 objects, 48–52 paths, 187 text blocks, 180 selection areas, 108–110, 113–116, 119 selection marquee, 11, 117–119 color range for pixels, 111 deleting pixels or objects outside, 33 smooth edges, 109 straight-edged, freeform, 115–116 selection tools, 10 selections adding and removing areas, 112 constraining shape, 108 deleting, 195 edge type, 108, 111–112

feathering, 109, 111–112, 119 flattening, 196 square or circular, 110 Selective JPEG Settings dialog box, 250–251 Send Backward command, 55 Send to Back command, 55 shapes, drawing, 78–79 Shapes panel, 94–96 sharing layers, 196 Sharpen filter, 226 Sharpen tool, 120–122 sharpness and JPEG file format, 249 shortcuts, 6 simple rollovers assigning behavior, 296–298 creation of, 292–301 defining source object, 292–294 deleting, 313 source object, 292 target object, 292, 294–296 testing, 298–299 viewing JavaScript code, 299–301 slice files, 283–286 Slice tool, 280, 306, 338 slices, 194, 280 around source object, 292 Behavior handle, 296–297, 307–309, 340, 353 creation of, 280–282 displaying text, 282 exporting, 286–290 file formats, 281 HTML, 281 image, 281–282 irregular, 280 naming, 282–286 object to attach pop-up menu, 338 rectangular, 280 tools, 10 types, 281 slicing, 267 Smaller File JPEG, 237 smoothing JPEG file format, 248 Smudge tool, 125–126 snapping to grid, 35 Soft interpolation, 32 source objects, 292–294

spacer.gif image, 286 spacing text, 181–184 spell checking text, 189–191 spelling language dictionary, 189 Spelling Setup dialog box, 189 Start button, 5 Start menu, 5 Start Page, 6, 32 straight lines, 68–69 straight-edged, freeform selection marquee, 115–116 Stroke Color palette, 133, 161 Stroke Color pop-up window, 167 Stroke Options palette, 161–165 strokes, 68 applying colors, 140–141 blending mode, 105 brush tips, 165 categories, 90 colors, 104, 133 distance between brush marks, 164 drawing speed, 166 edge softness or hardness, 91 edge texture, 164 fill color, 102 horizontal drawing, 166 location relative to path, 167 mixing and applying color, 147–149 modifying properties, 85 number of tips, 165 objects, 90–92 options, 161–168 overlapping, 164 painting, 104–105 percentage of ink, 164 placing, 166–168 pressure, 166 previewing, 163 properties, 166 randomness, 166 rate applied, 164 reversing colors, 134 special effects for edges, 164 text, 184–186 texture, 91, 104, 164 tip weight, 104

INDEX

types, 70 vector objects, 90–92 vertical drawing, 166 width of tip, 91 styles, 213 applying, 223–225 deleting, 225 importing, 13 saving effects as, 221–223 Styles panel, 13, 223–225 submenus, 344, 350 Subselection tool, 50–51 swap image behavior, 308 Swap Image dialog box, 298, 308–310 swatch groups, 141–143 Swatches panel, 13, 139–145 switching documents, 8 Symbol Editor, 364–366, 385, 388 Symbol Properties dialog box, 364, 384–385 symbol-level editing, 333 symbols, 364–368, 379 animation, 384 button, 384 converting object or animation, 386 creation of, 384–386 deleting, 366 editing, 373, 388 exporting, 388–389 graphic, 384 importing, 390–391 instance creation, 386–388 listing, 386 naming, 364, 385, 389 positioning on canvas, 367 previewing, 386 reusable, 15 storing, 383–390 template files, 397

T tags, 404–405 target area, 301, 304–306 target object, 292, 294–296 target slice, 302, 308 tasks, 14

template files, 396–397 Test in Web Browser (F12) keyboard shortcut, 299, 310 text adding, 172–177 aligning, 180 attaching to paths, 187–188 bold, 179 buttons, 317 colors, 179 copying and pasting, 175 editing in Photoshop files, 38 enhancing, 178–191 fills, 184–186 fonts, 179 formatting pop-up menus, 347 horizontally expanding or contracting, 182 importing, 175–177 indenting first line of, 182 italic, 179 kerning characters, 181–182 leading, 182 orientation, 180 preventing editing, 38 readability, 181 size, 172, 179 slices displaying, 282 space before and after paragraphs, 182 spacing, 181–184 spell checking, 189–191 strokes, 184–186 underline, 179 Text, Attach to Path command, 188 Text, Check Spelling command, 189 Text, Editor command, 186 Text, Spelling Setup command, 189 text blocks, 172–174, 177, 179–181 Text Editor, 186 Text menu, 181 text object, 293 Text tool, 172, 173 text variable, 397 textures, 37 fills, 93 strokes, 91, 104, 164 third-party filters, 213, 226–228

419

three-state buttons, 319 TIFF file format, 100, 237 title bar, 7 tolerance value, 137 tool groups, 10–11 tools, 9–11 hotspot creation, 268 setting size and shape, 33 slice creation, 280 Tools panel, 7, 9–11 Bitmap section, 132, 150 Color pop-up box, 159 Colors section, 93, 132–134 Edit Stroke dialog box, 161 Eyedropper tool, 132–136 Fill Color box, 133, 135, 140, 184–185 Fill Color icon, 133, 135, 140 Fill Options, 185 Gradient tool, 150 Hide Slices and Hotspots button, 269, 296 No Fill or Stroke button, 134 Paint Bucket tool, 136–138, 150 Pen tool pop-up menu, 83 Rectangle tool pop-up menu, 76, 78 Rubber Stamp tool menu, 169 Set Default Stroke/Fill Color button, 134 Show slices and hotspots button, 269, 297 Stroke Color box, 133, 135, 140, 161, 163, 167, 184–185 Stroke Color icon, 133, 135, 140 Swap Stroke/Fill Colors button, 134 Text tool, 172, 173 Vector tools, 10 Web tools, 268 tool-specific icon pointers, 33 tooltips, 27 transforming gradient fills, 154–155 transparency, 245–246 transparent fills, 93 trigger area, 301–304 trigger slice, 302 trimming area outside canvas, 63 two-state buttons, 319, 329

420

INDEX

U underline text, 179 Undo command, 31 Undo (Ctrl+Z) keyboard shortcut, 87 undocking panels and panel groups, 16–17 undoing actions, 31 cropping, 63 tasks, 14 vector object changes, 87 ungrouping objects, 53–54 Uniform color palette, 240 units of measurement, 22 Up state, 318, 320, 327 URL panel, 14 URL variable, 397 URLs (Uniform Resource Locators), 14, 270

V variables, 397, 401 vector graphics, 47, 50, 68 vector objects advanced stroke options to, 161–168 colors, 132–134 cut location, 88 cutting paths, 88–89 drawing, 66–89 fills, 92–94 filters, 226 gradient fills tool, 150–154 manipulating, 85–89

paths, 85–89 resizing, 10 stroke or fill color, 135–136, 140–141 strokes, 90–92 tools, 10 undoing changes, 87 Web Dither fill, 159–160 Vector Path tool, 83, 156 View, Rulers command, 59 View, Source command, 300

W Wacom Graphire, 84, 115 Wacom tablet and pen, 166 Web 216 color palette, 240 Web Adaptive color palette, 240 Web browsers, 258, 275–277, 377 Web Dither fill options palette, 159 Web Dither fill pop-up window, 159–160 Web Dither fills, 159–160 Web graphics, 22, 239 Web layer, 203, 269 Web objects, 194 Web pages disjoint rollovers, 301–310 file sizes, 235 pop-up menus, 336–352 rollovers, 291 simple rollover, 292–301 Web sites buttons, 315 interactivity, 4 navigation bar, 315, 329–334

Web-safe color palette, 159, 240–241 Window, AutoShapes command, 95 Window, Behaviors command, 312 Window, Find command, 381 Window, Frames command, 294, 304, 356 Window, Hide Panels command, 21 Window, History command, 393 Window, Library command, 366, 387 Window, Optimize command, 236, 238 Window, Styles command, 223 Window menu, 139 Windows color palette, 240 Picture and Fax Viewer, 377 Wingdings font, 185 workspace Document window, 7–9 menu bar, 7 panels, 7, 13–21 Property Inspector, 7, 11–12 title bar, 7 Tools panel, 7, 9–11

X XML (Extensible Markup Language), 403 XML files, 396–398, 401, 404–407

Z Zoom tool, 61 zooming, 59–61

NEED A COMPUTER BOOK? WE’VE GOT YOU COVERED! Try a Premier Press Series...

In a Weekend®

Fast & Easy ®

Networking

For The Absolute Beginner

Fast & Easy ® Web Development

Administrator’s Guide

Game Development

Professional Projects

Premier Press A Division of Course Technology ™

www.premierpressbooks.com

To Order Call

1.800.842.3636

™

Let’s face it. C++, JavaScript, and Java can be a little intimidating. That’s why Premier Press has developed the

for the absolute

beginner series—a fun, non-intimidating introduction to the world of programming. Each book in this series teaches a specific programming language using simple game programming as a teaching aid. If you are new to programming, want to learn, and want to have fun, then Premier Press’s

for the

absolute beginner

series is just what you’ve been waiting for!

ASP Programming for the Absolute Beginner

JavaScript Programming for the Absolute Beginner

ISBN 0-7615-3620-5

ISBN 0-7615-3410-5

C Programming for the Absolute Beginner

Microsoft Access VBA Programming for the Absolute Beginner

ISBN 1-931841-52-7

ISBN 1-59200-039-8

C++ Programming for the Absolute Beginner

Microsoft C# Programming for the Absolute Beginner

ISBN 0-7615-3523-3

ISBN 1-931841-16-0

Excel VBA Programming for the Absolute Beginner

Microsoft Visual Basic .NET Programming for the Absolute Beginner

ISBN 1-931841-04-7

ISBN 1-59200-002-9

Java Programming for the Absolute Beginner

Palm Programming for the Absolute Beginner

ISBN 0-7615-3522-5

ISBN 0-7615-3524-1

®

™

Premier Press A Division of Course Technology ™

www.premierpressbooks.com

™

®

®

®

®

™

Call now to order

1.800.842.3636

Looking for something to do this weekend? Want to create your own Web page? Organize your finances? Upgrade your PC? It’s time to put your weekends to work for you with the Premier Press In a Weekend® series. Each book in the series is a practical, hands-on guide focused on helping you master the skills you need to achieve your goals. While you have the time, let our In a Weekend series show you how to make the most of it.

Learn Microsoft Visual Basic .NET In a Weekend 1-931841-95-0

Learn Java In a Weekend 1-931841-60-8

Learn SQL In a Weekend 1-931841-62-4

Learn Microsoft Windows XP In a Weekend 1-931841-75-6

OTHER HOT TOPICS Create FrontPage 2002 Web Pages In a Weekend 0-7615-3447-4

Learn JavaScript Create Microsoft PowerPoint 2002 Presentations In a Weekend In a Weekend, 3rd Ed. 0-7615-3332-X 0-7615-3397-4

Create Your First Web Page In a Weekend, 3rd Ed. 0-7615-2482-7

Electrify Your Web Site In a Weekend 0-7615-2505-X

Learn Microsoft Windows ME In a Weekend 0-7615-3297-8

Create Macromedia Flash Movies In a Weekend 0-7615-2866-0

Increase Your Web Traffic In a Weekend, 3rd Ed. 0-7615-2313-8

Learn Perl In a Weekend 1-931841-77-2

Learn VBScript In a Weekend 1-931841-70-5 Learn XML In a Weekend 1-59200-010-X Tune Up Your PC In a Weekend, 2nd Ed. 1-931841-03-9 Upgrade Your PC to the Ultimate Machine In a Weekend 1-931841-61-1

DO IT Premier Press A Division of Course Technology ™

www.premierpressbooks.com

Call today to order! 1.800.842.3636

®

Less Time. Less Effort. More Development. Don’t spend your time leafing through lengthy manuals looking for the information you need. Spend it doing what you do best— Web development. The Premier Press fast & easy ® web develoment series leads the way with step-by-step instructions and real screen shots to help you grasp concepts and master skills quickly and easily.

Microsoft® ASP.NET Fast & Easy® Web Development 1-931841-46-2 Companion Web Site ■

Macromedia® Director® 8 and Lingo Fast & Easy® Web Development

™

0-7615-3254-4 CD Included ■

Macromedia® Dreamweaver® MX Fast & Easy® Web Development

1-931841-17-9 Companion Web Site

1-931841-88-8 Companion Web Site

0-7615-2854-7 CD Included

CGI Fast & Easy® Web Development

Macromedia® Dreamweaver® UltraDev™ 4 Fast & Easy® Web Development

0-7615-2938-1 CD Included

0-7615-3517-9 CD Included

Java™ 2 Fast & Easy® Web Development

Macromedia® Fireworks® MX Fast & Easy® Web Development

■

0-7615-3056-8 CD Included ■

■

Perl Fast & Easy® Web Development

ASP 3 Fast & Easy® Web Development ■

1-931841-05-5 Companion Web Site

0-7615-3049-5 CD Included ■

Adobe® LiveMotion™ Fast & Easy® Web Development

Microsoft® C# Fast & Easy® Web Development

■

■

PHP Fast & Easy® Web Development, 2nd Edition 1-931841-87-X Companion Web Site ■

■

1-59200-031-2 Companion Web Site ■

JavaServer Pages™ Fast & Easy® Web Development 0-7615-3428-8 CD Included ■

Macromedia® Flash™ 5 Fast & Easy® Web Development 0-7615-2930-6 CD Included ■

Premier Press A Division of Course Technology ™

www.premierpressbooks.com

Call now to order!

1.800.842.3636