Using Fireworks
Trademarks Afterburner, AppletAce, Attain, Attain Enterprise Learning System, Attain Essentials, Attain Objects for Dreamweaver, Authorware, Authorware Attain, Authorware Interactive Studio, Authorware Star, Authorware Synergy, Backstage, Backstage Designer, Backstage Desktop Studio, Backstage Enterprise Studio, Backstage Internet Studio, Contribute, Design in Motion, Director, Director Multimedia Studio, Doc Around the Clock, Dreamweaver, Dreamweaver Attain, Drumbeat, Drumbeat 2000, Extreme 3D, Fireworks,
CONTENTS CHAPTER 1: Selecting and Transforming Objects ......................... 7 Selecting objects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7 Selecting pixels . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10 Editing selected objects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19 Transforming and distorting selected objects and selections . .
CHAPTER 5: Applying Color, Strokes, and Fills . . . . . . . . . . . . . . . . . . . . . . . . . . 97 Using the Colors section of the Tools panel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98 Organizing swatch groups and color models . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98 Using color boxes and color pop-up windows . . . . . . . . . . . . . . . . . . . . . . . . . . . 105 Working with strokes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
CHAPTER 12: Optimizing and Exporting . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 225 About optimizing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Using the Export Wizard. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Optimizing in the workspace. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Exporting from Fireworks . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Contents
CHAPTER 1 Selecting and Transforming Objects As you work in Macromedia Fireworks MX 2004, you manipulate vector and bitmap objects, text blocks, slices and hotspots, and areas of pixels. Using the selection and transformation tools, you can move, copy, delete, rotate, scale, or skew objects. In documents that have multiple objects, you can organize the objects by stacking, grouping, and aligning them. Selecting objects Before you can do anything with any object on the canvas, you must select it.
Using the Pointer tool The Pointer tool selects objects when you click them or when you drag a selection area around all or part of the objects. To select an object by clicking, do one of the following: • Move the Pointer tool over the object’s path or bounding box and click. • Click the object’s stroke or fill. • Select the object in the Layers panel.
Using the Select Behind tool When working with graphics that contain multiple objects, you can use the Select Behind tool to select an object that is hidden or obscured by other objects. To select an object that is behind other objects: • Click the Select Behind tool repeatedly over the stacked objects, progressing through the objects top to bottom in stacking order until you select the object you want.
To select everything on every layer in the document: • Choose Select > Select All. Note: Select All does not select hidden objects. To deselect all selected objects: • Choose Select > Deselect. Note: You must deselect the Single Layer Editing preference to select all visible objects on all layers in a document. When you choose the Single Layer Editing preference, only objects on the current layer are selected. For more information, see “Organizing layers” on page 131.
Bitmap selection tool options When you choose the Marquee, Oval Marquee, Lasso, Polygon Lasso, or Magic Wand tool, the Property inspector displays three Edge options for the tool: Hard creates a marquee selection with a defined edge. Anti-alias Feather prevents jagged edges in the marquee selection. lets you soften the edge of the pixel selection. You must set the Feather option before creating a feathered selection using a selection tool.
Plotting points to create a marquee selection The Polygon Lasso tool allows you to select specific pixels in a bitmap image by clicking repeatedly around the perimeter of the pixel area you want to select. To select a polygonal area of pixels: 1 Choose the Polygon Lasso tool. 2 Choose an Edge option in the Property inspector. For more information, see “Bitmap selection tool options” on page 11. 3 Click to plot points around the perimeter of the object or area to outline the selection.
A marquee appears around the selected range of pixels. Pixels selected with a lower tolerance (above), then a higher tolerance (below) To select similar colors throughout the document: 1 Select an area of color with a marquee or lasso tool, or with the Magic Wand tool. 2 Choose Select > Select Similar. One or more marquees show all areas containing the selected range of pixels, according to the current Tolerance setting in the Property inspector for the Magic Wand tool.
Adjusting selection marquees After selecting pixels with a marquee or lasso tool, you can edit or move the marquee border without affecting the pixels beneath it. You can manually add pixels to or delete pixels from a marquee border using modifier keys. In addition, you can expand or contract the marquee border by a specified amount, select an additional area of pixels around the existing marquee, or smooth the border of the marquee.
Creating a marquee from intersecting marquees You can select pixels in an existing marquee by drawing a marquee that overlaps the original. To select a pixel area defined by the intersection of two marquees: 1 Hold down Alt+Shift (Windows) or Option+Shift (Macintosh) while creating a new marquee selection that overlaps the original marquee. 2 Release the mouse button. Only the pixels in the intersection area of the two marquees are selected.
Creating an inverse pixel selection Starting with a current pixel selection, you can create another pixel selection that selects all the pixels that are not currently selected. You can use this method to select and then erase all pixels surrounding the original selection, for example. To create an inverse pixel selection: 1 Make a pixel selection using any bitmap selection tool. 2 Choose Select > Inverse Selection. All pixels that were not in the original selection are now selected.
Selecting an area around an existing marquee You can create an additional marquee to frame an existing marquee at a specified width. This lets you create special graphics effects, such as feathering the edges of a pixel selection. To select an area around an existing marquee: 1 After drawing a marquee, choose Select > Border Marquee. 2 Enter the width of the marquee that you want to place around the existing marquee, and click OK.
Saving and restoring marquee selections You can save the size, shape, and location of a selection to reapply later. To save a marquee selection: • Choose Select > Save Bitmap Selection. To restore a marquee selection: • Choose Select > Restore Bitmap Selection. Note: You can save only one selection at a time. Creating and moving a floating pixel selection When you drag a marquee to a new location, the marquee itself moves.
To insert a new bitmap by copying and pasting a pixel selection: 1 Select an area of pixels using a pixel selection tool. 2 Choose Edit > Insert > Bitmap via Copy. A new bitmap object based on the pixel selection is created in the current layer, and the selected pixels remain in the original bitmap object. In the Layers panel, a thumbnail of the new bitmap appears in the current layer, above the object from which it was copied.
To duplicate a selected object by dragging: • Alt-drag (Windows) or Option-drag (Macintosh) the object using the Pointer tool. To duplicate a pixel selection, do one of the following: • Drag the pixel selection using the Subselection tool. • Alt-drag (Windows) or Option-drag (Macintosh) the object using the Pointer tool. To clone a selection: • Choose Edit > Clone. The clone of the selection is stacked precisely in front of the original and becomes the selected object.
Transforming and distorting selected objects and selections You can transform a selected object or group, or a pixel selection, using the Scale, Skew, and Distort tools and menu commands: Scale enlarges or reduces an object. Skew slants an object along a specified axis. Distort moves the sides or corners of an object in the direction you drag a selection handle while the tool is active. This is helpful in creating a 3D look.
Resizing (scaling) objects Scaling an object enlarges or reduces it horizontally, vertically, or in both directions. To scale a selected object: 1 Do one of the following to display the transform handles: Choose the Scale tool. ■ Choose Modify > Transform > Scale. 2 Drag the transform handles: ■ To scale the object both horizontally and vertically, drag a corner handle. Proportions are constrained if you press the Shift key as you scale.
Flipping objects You can flip an object across its vertical or horizontal axis without moving its relative position on the canvas. To flip a selected object: • Choose Modify > Transform > Flip Horizontal or Flip Vertical. Skewing objects Skewing an object transforms it by slanting it along the horizontal or vertical axis, or both axes. To skew a selected object: 1 Do one of the following to display the transform handles: Choose the Skew tool. ■ Choose Modify > Transform > Skew.
Transforming objects numerically Instead of dragging to scale, resize, or rotate an object, you can transform it by entering specific values. To resize selected objects using the Property inspector or Info panel: • Enter new width (W) or height (H) measurements. Note: If the W and H boxes aren’t visible in the Property inspector, click the expander arrow to see all properties. To scale or rotate selected objects using Numeric Transform: 1 Choose Modify > Transform > Numeric Transform.
Grouping objects You can group individual selected objects and then manipulate them as if they were a single object. For example, after drawing the petals of a flower as individual objects, you can group them to select and move the entire flower as a single object. You can edit groups without ungrouping them. You can select an individual object in a group for editing without ungrouping the objects. You can also ungroup the objects at any time. To group two or more selected objects: • Choose Modify > Group.
Stacking objects Within a layer, Fireworks stacks objects based on the order in which they were created, placing the most recently created object on the top of the stack. The stacking order of objects determines how they appear when they overlap. Layers also affect the stacking order. For example, suppose a document has two layers named Layer 1 and Layer 2. If Layer 1 is listed below Layer 2 on the Layers panel, then everything on Layer 2 appears in front of everything on Layer 1.
About arranging objects among layers The Layers panel offers another dimension of organizational control. You can move selected objects from one layer to another by dragging the object thumbnail or the blue selection indicator in the Layers panel to another layer. For more information, see “Organizing layers” on page 131.
Chapter 1: Selecting and Transforming Objects
CHAPTER 2 Working with Bitmaps Bitmaps are graphics composed of small colored squares called pixels, which combine like the tiles of a mosaic to create an image. Examples of bitmap graphics include photographs, scanned images, and graphics created from paint programs. They are sometimes referred to as raster images. Macromedia Fireworks MX 2004 combines the functionality of photo-editing, vector-drawing, and painting applications.
Creating bitmap objects You can create bitmap graphics by using the Fireworks bitmap drawing and painting tools, by cutting or copying and pasting pixel selections, or by converting a vector image into a bitmap object. Another way to create a bitmap object is to insert an empty bitmap image in your document and then draw, paint, or fill it. When you create a new bitmap object, it is added to the current layer.
To convert selected vector objects to a bitmap image, do one of the following: • Choose Modify > Flatten Selection. • Choose Flatten Selection from the Layers panel Options menu. A vector-to-bitmap conversion is irreversible, except when Edit > Undo or undoing actions in the History panel is still an option. Bitmap images cannot be converted to vector objects.
To change the color of pixels to the color in the Fill Color box: 1 Choose the Paint Bucket tool. 2 Choose a color in the Fill Color box. 3 Set the tolerance value in the Property inspector. Note: The tolerance determines how similar in color pixels must be to be filled. A low tolerance value fills pixels with color values similar to the pixel you click. A high tolerance fills pixels with a broader range of color values. 4 Click the image. All pixels within the tolerance range change to the fill color.
Erasing bitmap objects You can use the Eraser tool to remove pixels. By default, the Eraser tool pointer represents the size of the current eraser, but you can change the size and appearance of the pointer in the Preferences dialog box. For more information, see “Editing preferences” on page 282. Eraser tool To erase pixels in a selected bitmap object or pixel selection: 1 Choose the Eraser tool. 2 In the Property inspector, choose the round or square eraser shape.
Retouching bitmaps Fireworks provides a wide range of tools to help you retouch your images. You can alter an image’s size, reduce or sharpen its focus, or copy and “stamp” a part of it to another area. The Rubber Stamp tool lets you copy or clone one area of an image to another. The Blur tool decreases the focus of selected areas in an image. The Smudge tool picks up color and pushes it in the direction that you drag in an image. The Sharpen tool sharpens areas in an image.
To set Rubber Stamp tool options: 1 Choose the Rubber Stamp tool. 2 Choose from among the following options in the Property inspector: determines the size of the stamp. Edge determines the softness of the stroke (100% is hard; 0% is soft). Source Aligned affects the sampling operation. When Source Aligned is selected, the sampling pointer moves vertically and horizontally in alignment with the second.
To smudge colors in an image: 1 Choose the Smudge tool. 2 Set the tool options in the Property inspector: specifies the size of the brush tip. Shape sets a round or square brush tip shape. Edge specifies the softness of the brush tip. Pressure sets the intensity of the stroke. Smudge Color allows you to smudge using a specified color at the beginning of each stroke. If this option is deselected, the tool uses the color under the tool pointer.
Removing red-eye from photos In some photographs, the subjects’ pupils are an unnatural shade of red. You can use the Red-eye Removal tool to correct this red-eye effect. The Red-eye Removal tool paints red areas of a photograph only, replacing reddish colors with grays and blacks. Original photograph; after using the Red-eye Removal tool To correct the red-eye effect in a photograph: 1 Choose the Red-eye Removal tool from its pop-up menu.
Replacing colors The Replace Color tool lets you select a color and paint over that color with a different color. Original photograph; after using the Replace Color tool To replace one color with another: 1 Choose the Replace Color tool from its pop-up menu. 2 Click the Change color well in the Property inspector to select the color probe, and choose a color from the pop-up menu, or click in the image to choose the color you want to replace.
Cropping a selected bitmap You can isolate a single bitmap object in a Fireworks document and crop only that bitmap object, leaving other objects on the canvas intact. To crop a bitmap image without affecting other objects in the document: 1 Select a bitmap object by clicking the object on the canvas or by clicking its thumbnail in the Layers panel, or draw a selection marquee using a bitmap selection tool. 2 Choose Edit > Crop Selected Bitmap.
You can apply filters from the Filters menu to pixel selections, but not Live Effects. You can, however, define an area of a bitmap and create a separate bitmap from it, and then apply a Live Effect to it. If you apply a filter to a selected vector object using the Filters menu, Fireworks converts the selection to a bitmap. To apply a Live Effect to an area defined by a bitmap selection marquee: 1 Choose a bitmap selection tool and draw a selection marquee. 2 Choose Edit > Cut. 3 Choose Edit > Paste.
The Levels feature sets the darkest pixels as black and the lightest pixels as white, then redistributes the midtones proportionally. This produces an image with the sharpest detail in all of its pixels. Original with pixels concentrated in the highlights; after adjusting with Levels You can use the Histogram in the Levels dialog box to view the pixel distribution of a bitmap. The Histogram is a graphical representation of the distribution of pixels in the highlights, midtones, and shadows.
To adjust highlights, midtones, and shadows: 1 Select the bitmap image. 2 Do one of the following to open the Levels dialog box: ■ ■ In the Property inspector, click the Add Effects button, and then choose Adjust Color > Levels from the Add Effects pop-up menu. Choose Filters > Adjust Color > Levels. Note: Applying a filter from the Filters menu is destructive; that is, it cannot be undone except when Edit > Undo is an option.
Using Auto Levels You can use Auto Levels to have Fireworks make tonal range adjustments for you. To adjust highlights, midtones, and shadows automatically: 1 Select the image. 2 Do one of the following to choose Auto Levels: ■ ■ In the Property inspector, click the Add Effects button, and then choose Adjust Color > Auto Levels from the Add Effects pop-up menu. Choose Filters > Adjust Color > Auto Levels.
To adjust a specific point in the tonal range: 1 Select the image. 2 Do one of the following to open the Curves dialog box: ■ ■ In the Property inspector, click the Add Effects button, and then choose Adjust Color > Curves from the Add Effects pop-up menu. Choose Filters > Adjust Color > Curves. Note: Applying a filter from the Filters menu is destructive; that is, it cannot be undone except when Edit > Undo is an option.
Tip: You can also adjust highlights, midtones, and shadows automatically by clicking the Auto button in the Curves dialog box. To delete a point along the curve: • Drag the point off the grid. Note: You cannot delete the end points of the curve. Using tonal eyedroppers You can adjust the highlights, shadows, and midtones using the Shadow, Highlight, or Midtone eyedropper in the Levels or Curves dialog box.
To adjust the brightness or contrast: 1 Select the image. 2 Do one of the following to open the Brightness/Contrast dialog box: ■ ■ In the Property inspector, click the Add Effects button, and then choose Adjust Color > Brightness/Contrast from the Add Effects pop-up menu. Choose Filters > Adjust Color > Brightness/Contrast. Note: Applying a filter from the Filters menu is destructive; that is, it cannot be undone except when Edit > Undo is an option.
Adjusting hue and saturation You can use the Hue/Saturation feature to adjust the shade of a color, its hue; the intensity of a color, its saturation; or the lightness of a color in an image. Original; after adjusting the saturation To adjust the hue or saturation: 1 Select the image. 2 Do one of the following to open the Hue/Saturation dialog box: ■ ■ In the Property inspector, click the Add Effects button, and then choose Adjust Color > Hue/Saturation from the Add Effects pop-up menu.
Inverting an image’s color values You can use Invert to change each color in an image to its inverse on the color wheel. For example, applying the filter to a red object (R=255, G=0, B=0) changes the color to light blue (R=0, G=255, B=255). A monochrome image; after inverting A color image; after inverting To invert colors: 1 Select the image. 2 Do one of the following: ■ ■ In the Property inspector, click the Add Effects button, and then choose Adjust Color > Invert from the Add Effects pop-up menu.
Blurring and sharpening bitmaps Fireworks has a set of blurring and sharpening options that you can apply as Live Effects or as irreversible, permanent filters. Blurring an image Blurring softens the look of a bitmap image. Fireworks has six blurring options: Blur softens the focus of selected pixels. Blur More blurs about three times as much as Blur. Gaussian Blur applies a weighted average of blur to each pixel to produce a hazy effect. Motion Blur creates the appearance that the image is moving.
To blur an image using Motion Blur: 1 Select the image. 2 Do one of the following to open the Motion Blur dialog box: In the Property inspector, click the Add Effects button, and choose Blur > Motion Blur from the Add Effects pop-up menu. ■ Choose Filters > Blur > Motion Blur. 3 Drag the Angle dial to set the direction of the blur effect. 4 Drag the Distance slider to set the strength of the blur effect. Values range from 1 to 100. An increase in distance results in a stronger blur effect. 5 Click OK.
Using the Find Edges effect to create a sketch look The Find Edges effect changes your bitmaps to look like line drawings by identifying the color transitions in the images and changing them to lines. Original; after applying Find Edges To apply the Find Edges effect to a selected area, do one of the following: • In the Property inspector, click the Add Effects button, and then choose Other > Find Edges from the Add Effects pop-up menu. • Choose Filters > Other > Find Edges.
Using the Sharpen feature to sharpen an image You can use the Sharpen feature to correct images that are blurry. Fireworks has three Sharpen options: Sharpen adjusts the focus of a blurred image by increasing the contrast of adjacent pixels. Sharpen More increases the contrast of adjacent pixels about three times as much as Sharpen. Unsharp Mask sharpens an image by adjusting the contrast of the pixel edges. This option offers the most control, so it is usually the best option for sharpening an image.
5 Drag the Threshold slider to select a threshold of 0 to 255. Values between 2 and 25 are most commonly used. An increase in threshold sharpens only those pixels of a higher contrast in the image. A decrease in threshold includes pixels of lower contrast. A threshold of 0 sharpens all pixels in the image. 6 Click OK. Adding noise to an image When viewed at high magnification levels, most images obtained from digital cameras and scanners do not have perfectly uniform colors.
To add noise to an image: 1 Select the image. 2 Do one of the following to open the Add Noise dialog box: ■ ■ In the Property inspector, click the Add Effects button, and choose Noise > Add Noise from the Add Effects pop-up menu. Choose Filters > Noise > Add Noise. Note: Applying a filter from the Filters menu is destructive; that is, it cannot be undone except when Edit > Undo is an option.
CHAPTER 3 Working with Vector Objects A vector object is a computer graphic whose shape is defined by a path. The shape of a vector path is determined by points that are plotted along the path. A vector object’s stroke color follows the path. Its fill occupies the area inside the path. The stroke and fill typically determine how the graphic looks when published in print or on the web. Macromedia Fireworks MX 2004 has many tools for drawing and editing vector objects using a variety of techniques.
To draw a line, rectangle, or ellipse: 1 Choose the Line, Rectangle, or Ellipse tool. 2 If desired, set the stroke and fill attributes in the Property inspector. See Chapter 5, “Applying Color, Strokes, and Fills,” on page 97. 3 Drag on the canvas to draw the shape. For the Line tool, Shift-drag to constrain lines to 45° increments. For the Rectangle or Ellipse tool, Shift-drag to constrain shapes to squares or circles.
To round the corners of a selected rectangle: • Enter a value from 0 to 100 in the Roundness box in the Property inspector and press Enter, or drag the pop-up slider. Note: If the Property inspector is at half height, click the expander arrow in the lower right corner to expand it to full height. Drawing basic polygons and stars With the Polygon tool, you can draw any equilateral polygon or star, from a triangle to a polygon or star with 360 sides.
Auto Shape tools create shapes in preset orientations. For example, the Arrow tool draws arrows horizontally. You can transform Auto Shapes to change their orientation. For more information, see “Transforming and distorting selected objects and selections” on page 21. Although each Auto Shape tool in the Tools panel uses the same easy drawing method, the editable attributes for each Auto Shape are different. Arrow draws object groups that appear as simple arrows of any proportions.
Adjusting arrow Auto Shapes Arrows have five control points. There are control points for adjusting the flare of the arrowhead, the length of the arrow tail, the length of the arrowhead tip, and the width of the arrow tail. To adjust the flare of an arrowhead: • Drag the flare control point of a selected arrow. To increase or decrease the sharpness of an arrowhead: • Drag the tip control point of a selected arrow.
To adjust a single corner of a beveled, chamfered, or rounded rectangle Auto Shape: • Alt-drag (Windows) or Option-drag (Macintosh) a corner control point of a selected shape. To resize a beveled, chamfered, or rounded rectangle Auto Shape without affecting the corners: • Drag the drag-to-resize control point. To convert the corners of a rectangle to a different type: • Alt-click (Windows) or Option-click (Macintosh) any corner control point.
To set the inner radius of a selected doughnut to zero: • Click the reset radius control point. Adjusting pie Auto Shapes Pie Auto Shapes initially have three control points. There are control points for dividing the shape into slices, adjusting slice size, and for resetting the pie to one slice. You can add as many sections as you want using control points. For each new section, Fireworks adds a control point for resizing or splitting the new section.
To resize the inner polygon of a smart polygon, do one of the following: • If the polygon has an inner polygon, drag the inner polygon control point. • If the polygon has no inner polygon, drag the reset inner polygon control point. To reset the inner polygon of a selected smart polygon: • Click the reset inner polygon control point. Adjusting spiral Auto Shapes Spirals have two control points.
Adding new Auto Shapes to Fireworks You can add new Auto Shapes to Fireworks using the Fireworks Exchange website. Some new Auto Shapes will appear in the Shapes tab in the Assets panel, and others will appear in the Tools menu, grouped with the other Auto Shapes. You can also add new Auto Shapes to Fireworks by writing the JavaScript code for the Auto Shapes yourself. For more information, see Extending Fireworks.
You can also modify existing brush strokes and add fills to selected objects you have drawn with the Vector Path tool. The new stroke and fill settings are retained for subsequent use of the Vector Path tool in the current document. To draw a freeform vector path: 1 Choose the Vector Path tool, located in the Pen tool pop-up menu. 2 If desired, set stroke and fill attributes in the Property inspector. See Chapter 5, “Applying Color, Strokes, and Fills,” on page 97. 3 Drag to draw.
To draw a path with straight line segments: 1 Choose the Pen tool. 2 If desired, choose Edit > Preferences and enable any of the following options on the Editing tab of the Preferences dialog box, then click OK: Show Pen Preview previews the line segment that would result from the next click. Show Solid Points shows solid points while you draw. Note: On Mac OS X, choose Fireworks > Preferences to open the Preferences dialog box. 3 Click on the canvas to place the first corner point.
To draw an object with curved segments: 1 Choose the Pen tool. 2 Click to place the first corner point. 3 Move to the location of the next point, then click and drag to produce a curve point. Each time you click and drag, Fireworks extends the line segment to the new point. 4 Continue plotting points. If you click and drag a new point, you produce a curve point; if you just click, you produce a corner point.
Adjusting the shape of a curved path segment You can change the shape of a vector object by dragging its point handles with the Subselection tool. The point handles determine the degree of curvature between fixed points. These curves are known as Bézier curves. To edit the Bézier curve of a path segment: 1 Select the path with the Pointer or Subselection tool. 2 Click a curve point with the Subselection tool to select it. A selected curve point appears as a solid blue square.
Converting path segments to straight or curved Straight path segments are intersected by corner points. Curved path segments contain curve points. You can convert a straight segment to a curved segment and vice versa by converting its point. To convert a corner point to a curve point: 1 Choose the Pen tool. 2 Click a corner point on a selected path and drag away from it. The handles extend, curving the adjacent segments.
To convert a curve point to a corner point: 1 Choose the Pen tool. 2 Click a curve point on a selected path. The handles retract, and the adjacent segments straighten. Selecting points The Subselection tool allows you to select multiple points. Before selecting a point with the Subselection tool, you must select the path using the Pointer or Subselection tool or by clicking its thumbnail in the Layers panel. To select specific points on a selected path: 1 Choose the Subselection tool.
Moving points and point handles You can change an object’s shape by dragging its points and point handles with the Subselection tool. To move a point: • Drag it with the Subselection tool. Fireworks redraws the path to reflect the point’s new position. To change the shape of a path segment: • Drag a point handle with the Subselection tool. Alt-drag (Windows) or Option-drag (Macintosh) to drag one handle at a time. To adjust the handle of a corner point: 1 Choose the Subselection tool.
Continuing an existing path You can use the Pen tool to continue drawing an existing open path. To resume drawing an existing open path: 1 Choose the Pen tool. 2 Click the end point and continue the path. The Pen tool pointer changes to indicate that you are adding to a path. Merging two open paths You can connect two open paths to form one continuous path. When you connect two paths, the topmost path’s stroke, fill, and effect attributes become the attributes of the newly merged path.
Bending and reshaping vector objects The Freeform tool allows you to bend and reshape vector objects directly instead of manipulating points. You can push or pull any part of a path, regardless of where the points are located. Fireworks automatically adds, moves, or deletes points along the path as you change the vector object’s shape.
To pull a selected path: 1 Choose the Freeform tool. 2 Move the pointer directly over the selected path. The pointer changes to the pull pointer. 3 Drag the path. To push a selected path: 1 Choose the Freeform tool. The pointer changes to the push or pull pointer. 2 Point slightly away from the path. 3 Drag toward the path to push it. Nudge the selected path to reshape it.
To distort selected paths: 1 Choose the Reshape Area tool, located in the Freeform tool pop-up menu. 2 Drag across the paths to redraw them. To change the size of the reshape area pointer, do one of the following: • While holding down the mouse button, press the Right Arrow key or 2 to increase the width of the pointer. • While holding down the mouse button, press the Left Arrow key or 1 to decrease the width of the pointer.
Cutting paths into multiple objects The Knife tool allows you to slice a path into two or more paths. To cut a selected path: 1 Choose the Knife tool. Note: Using the eraser on Wacom pens automatically selects the Knife tool. 2 Do one of the following: Drag the pointer across the path. Click on the path. 3 Deselect the path. ■ ■ Editing with path operations You can use path operations in the Modify menu to create new shapes by combining or altering existing paths.
To combine selected closed paths as one path enclosing the entire area of the original paths: • Choose Modify > Combine Paths > Union. The resulting path assumes the stroke and fill attributes of the object that is placed farthest back. Creating an object from the intersection of other objects Using the Intersect command, you can create an object from the intersection of two or more objects.
Cropping a path You can crop a path using the shape of another path. The front or topmost path defines the shape of the cropped area. To crop a selected path: 1 Select the path object that defines the area to be cropped. 2 Choose Modify > Arrange > Bring to Front. 3 Hold down Shift and add to the selection the path object to be cropped. 4 Choose Modify > Combine Paths > Crop. The resulting path object retains the stroke and fill attributes of the object that is placed farthest back.
Expanding a stroke You can convert the stroke of a selected path into a closed path. The resulting path creates the illusion of a path with no fill and a stroke that takes on the same attributes as the original object’s fill. Note: Expanding the stroke of a path that intersects itself can produce interesting results. If the original path contains a fill, the intersecting portions of the path will not contain a fill after the stroke is expanded.
CHAPTER 4 Using Text Macromedia Fireworks MX 2004 has many text features typically reserved for sophisticated desktop publishing applications. You can create text in a variety of fonts and sizes and adjust kerning, spacing, color, leading, baseline shift, and more. Combining Fireworks text-editing features with the wide range of strokes, fills, effects, and styles makes text a lively element of your graphic designs. You can also use the Fireworks spell-checker to correct misspellings.
Creating text blocks All text in a Fireworks document appears inside a rectangle with handles called a text block. To enter text: 1 Choose the Text tool. The Property inspector displays options for the Text tool. 2 Choose color, font, size, spacing, and other text characteristics. 3 Do one of the following: Click in your document where you want the text block to begin. This creates an auto-sizing text block. ■ Drag to draw a text block. This creates a fixed-width text block.
Using auto-sizing and fixed-width text blocks Fireworks has both auto-sizing text blocks and fixed-width text blocks. An auto-sizing text block expands horizontally as you type. If you remove text, the auto-sizing text block shrinks to accommodate only the remaining text. Auto-sizing text blocks are created by default when you click on the canvas with the Text tool and start typing. Fixed-width text blocks allow you to control the width of wrapped text.
You can also use the Text Editor and the commands in the Text menu to edit text, but the Property inspector offers the quickest way to change text attributes and provides more detailed editing control than the other two options. For more information about the Text Editor, see “Using the Text Editor” on page 95. Note: Changes you make during a text-editing session constitute only one Undo.
The Text tool retains the current text color independently of the fill color of other tools. When you use another tool after using the Text tool, the fill and stroke settings revert to the most recent settings from before the Text tool was used. Likewise, when you return to the Text tool, the fill color reverts to the most recent Text tool setting, and the stroke is reset to None. Fireworks retains the current Text tool color as you switch from document to document or close and reopen Fireworks.
The color of the Fill Color box in the Tools panel changes to reflect the color you sample with either the eyedropper pointer or the Eyedropper tool, and the color of the selected text also changes. Applying color to highlighted text in a text block You can change the text color of highlighted text in a text block using the Property inspector or any Fill Color box. You cannot use the Eyedropper tool to edit the color of highlighted text.
■ Zero represents normal kerning. Positive values move letters farther apart. Negative values move letters closer together. Hold down Control (Windows) or Command (Macintosh) while pressing the Left Arrow or Right Arrow keys on the keyboard. The Left Arrow key increases the space between letters by 1%, and the Right Arrow key moves letters closer together by 1%.
Text can also flow right to left or left to right. Text flowing right to left and left to right In Fireworks, you set horizontal and vertical orientation as well as the direction of text flow in the Property inspector. These settings apply to entire text blocks only. To set the orientation of a selected text block: 1 Click the Text Orientation button in the Property inspector.
The alignment controls appear in the Property inspector when text is highlighted or a text block is selected. Text alignment options in the Property inspector To set text alignment: 1 Select the text. 2 Click an alignment button in the Property inspector. Indenting text You can indent the first line of a paragraph using the Property inspector. Indention is measured in pixels.
Smoothing text edges To smooth out a text edge, you anti-alias it. This makes the edges of the text blend into the background so that the text is cleaner and more readable when it is large. Original text; after smoothing You use the Property inspector to set anti-aliasing. If the Property inspector is minimized, click the expander arrow in the lower right corner to see all properties. Anti-aliasing applies to all characters in a given text block. No Anti-Alias disables text smoothing.
To expand or contract selected characters: • In the Property inspector, drag the Horizontal Scale pop-up slider or enter a value in the text box. Drag the slider higher than 100% to expand the width or height of the characters, and drag it lower to reduce their width or height. Setting baseline shift Baseline shift determines how closely text sits above or below its natural baseline. If there is no baseline shift, the text sits on the baseline.
To save text attributes as a style: 1 Create a text object and apply the attributes you want. 2 Select the text object. 3 Choose New Style from the Styles panel Options menu. 4 Choose the properties for the new style and name it. 5 Click OK. Attaching text to a path To free text from the restrictions of rectangular text blocks, you can draw a path and attach text to it. The text flows along the shape of the path and remains editable.
To edit the shape of the path: 1 Choose Text > Detach from Path. 2 Edit the path. 3 Place the text back on the path. Changing text orientation and direction on a path The order in which you draw a path establishes the direction of the text attached to it. For example, if you draw a path from right to left, the attached text appears backward and upside down. Text attached to a path drawn right to left You can change the orientation or reverse the direction of the text attached to a path.
To move the starting point of text attached to a path: 1 Select the text-on-a-path object. 2 In the Property inspector, enter a value in the Text Offset text box. Then press Enter. Note: If the Property inspector is minimized, click the expander arrow in the lower right corner to see all properties. Transforming text You can transform text blocks in the same ways you can transform other objects. You can scale, rotate, skew, and flip text to create unique text effects.
Importing text You can copy text from a source document and paste into the current Fireworks document, or you can drag it from the source to the current document. You can also open or import an entire text file in Fireworks. Fireworks can import RTF (rich text format) and ASCII (plain text) formats. To open or import a text file: 1 Choose File > Open or File > Import. 2 Navigate to the folder containing the file. 3 Choose the file and click OK.
You can choose fonts to replace the missing fonts. After you replace fonts, the document opens and you can edit and save the text. When the document is reopened on a computer that contains the original fonts, Fireworks remembers and uses the original fonts. To select a replacement font: 1 Open a document with missing fonts. The Missing Fonts dialog box opens. 2 Choose a missing font from the Change Missing Font list. 3 Do one of the following: ■ Choose a replacement font from the To list.
Customizing spell checking You can customize the way Fireworks spell-checks documents using the Spelling Setup dialog box. From here you can specify one or more language dictionaries for Fireworks to use during spell checking, as well as edit the words in your personal dictionary. You can also specify which items you want Fireworks to spell-check, including Internet and file addresses. To customize spell checking in Fireworks: 1 Do one of the following: Choose Text > Spelling Setup.
Chapter 4: Using Text
CHAPTER 5 Applying Color, Strokes, and Fills Macromedia Fireworks MX 2004 has a wide range of panels, tools, and options for organizing and choosing colors, and applying colors to bitmap images and vector objects. In the Swatches panel, you can choose a preset swatch group such as Color Cubes, Continuous Tone, or Grayscale, or you can create custom swatch groups that include your favorite colors or colors approved by your client.
Using the Colors section of the Tools panel The Colors section of the Tools panel contains controls for activating the Stroke Color and Fill Color boxes, which in turn determine whether the strokes or fills of selected objects are affected by color choices. Also, the Colors section has controls for quickly resetting colors to the default, setting the stroke and fill color settings to None, and swapping fill and stroke colors.
Applying colors using the Swatches panel The Swatches panel displays all the colors in the current swatch group. You can use the Swatches panel to apply stroke and fill colors to selected vector objects or text. To apply a color to the stroke or fill of a selected object using the Swatches panel: 1 Click the icon next to the Stroke Color or Fill Color box in the Tools panel or Property inspector to make it active. 2 If the Swatches panel is not already open, choose Window > Swatches.
Customizing the Swatches panel You can add, delete, replace, and sort color swatches or entire swatch groups using the Swatches panel. Note: Choosing Edit > Undo does not undo swatch additions or deletions. Swatches panel To add a color to the Swatches panel: 1 Choose the Eyedropper tool from the Tools panel. 2 Choose the number of pixels to sample from the Sample pop-up menu in the Property inspector: 1 pixel, 3x3 Average, or 5x5 Average.
To save a selection of sampled colors: 1 Add sampled colors to the Swatches panel. 2 Choose Save Swatches from the Swatches panel Options menu. The Export Swatches dialog box opens. 3 Choose a filename and directory and click Save. Clearing and sorting swatches You can clear and sort swatches using the Swatches panel Options menu. To clear or sort swatches: • Choose one of the following from the Swatches panel Options menu: clears the entire Swatches panel.
By default, the Color Mixer identifies RGB colors as hexadecimal, displaying hexadecimal color values for red (R), green (G), and blue (B) color components. Hexadecimal RGB values are calculated based on a range of values from 00 to FF. Color model Mode of color expression RGB Values of Red, Green, and Blue, where each component has a value from 0 to 255. 0-0-0 is black and 255-255-255 is white. Hexadecimal RGB values of Red, Green, and Blue, where each component has a hexadecimal value from 00 to FF.
Creating colors using the system color pickers You can create colors using the Windows System or the Macintosh System dialog boxes, instead of using the Color Mixer and Swatches panel. To pick a color from the system color picker: 1 Click any color box. 2 Choose Windows OS or Mac OS from any color pop-up window Options menu. The system color swatches are displayed in the pop-up window. 3 Choose a color from the system color picker. The color becomes the new stroke or fill color.
Dithering with websafe colors Sometimes you might need to use a color that is not a websafe color. For example, your company logo may use a color that is not websafe. To approximate a websafe color that doesn’t shift or dither when exported with a websafe palette, you use a web dither fill. Note: Web dithering can increase the size of the file. Two websafe colors create a web dither fill. To use the web dither fill: 1 Select an object containing a non-websafe color.
Using color boxes and color pop-up windows Throughout Fireworks you will find color boxes—from the Colors section of the Tools panel to the Property inspector to the Color Mixer. Each displays the current color assigned to the associated object property. Choosing colors from a color pop-up window When you click any color box, a color pop-up window similar to the Swatches panel opens.
Working with strokes Using the Property inspector, the Stroke Options pop-up menu, and the Edit Stroke dialog box, you can have full control of every brush nuance, including ink amount, tip size and shape, texture, edge effect, and aspect. Applying strokes You can change the stroke attributes of the Pen, Pencil, and Brush tools so that the next vector object you draw has the new stroke attributes, or you can apply stroke attributes to an object or path after you draw it.
To remove all stroke attributes from a selected object, do one of the following: • Choose None from the Stroke Options pop-up menu in the Property inspector or the Stroke • Options pop-up window. Click the Stroke Color box in either the Tools panel or the Property inspector and click the Transparent button. Creating custom strokes You can use the Edit Stroke dialog box to change specific stroke characteristics. The Edit Stroke dialog box has three tabs: Options, Shape, and Sensitivity.
To set general brush stroke options: 1 On the Options tab of the Edit Stroke dialog box, set the ink amount, spacing, and flow rate. Higher flow rates create brush strokes that flow over time, as with an airbrush. 2 To overlap brush strokes for dense strokes, choose Build-up. 3 To set the stroke texture, change the Texture option. The higher the number, the more apparent 4 5 6 7 8 the texture becomes.
Placing strokes on paths By default, an object’s brush stroke is centered on a path. You have the option of placing the brush stroke completely inside or outside the path. This allows you to control the overall size of stroked objects and to create effects such as strokes on the edges of beveled buttons. Centered stroke, stroke inside, and stroke outside You can use the Stroke pop-up menu in the Stroke Options window to reorient brush strokes.
Working with fills Using the Property inspector, the Fill Options pop-up menu, the Fill Options pop-up window, and the Gradient pop-up window, as well as a collection of bitmap textures and patterns, you can create a wide variety of fills for vector objects and text. Using the Paint Bucket or Gradient tool, you can also fill pixel selections based on current fill settings.
Applying gradient and pattern fills You can change fills to display a variety of solid, dithered, pattern, or gradient characteristics that range from solid colors to gradients. These characteristics resemble satin, ripples, folds, or gradients that conform to the contour of the object to which you apply them. Additionally, you can change various attributes of a fill, such as color, edge, texture, and transparency.
Adding a custom pattern You can set a bitmap file as a new pattern fill. You can use files with these formats as patterns: PNG, GIF, JPEG, BMP, TIFF, and PICT (Macintosh only). When a pattern fill is a 32-bit transparent image, the transparency affects the fill when used in Fireworks. If an image is not 32-bit, it becomes opaque. When you add a new pattern, its name appears in the Pattern Name pop-up menu of the Fill Options pop-up window.
Editing a gradient fill You can edit the current gradient fill by clicking any Fill Color box and then using the Edit Gradient pop-up window. Color ramp Preview Edit Gradient pop-up window To open the Edit Gradient pop-up window: 1 Select an object that has a gradient fill or choose a gradient fill from the Fill Options pop-up menu in the Property inspector. 2 Click the Fill Color box in the Property inspector or Tools panel to open the pop-up window.
Creating fills with the Gradient tool The Gradient tool is in the same tool group as the Paint Bucket tool. This new tool works much as the Paint Bucket tool does, but it fills an object with a gradient instead of a solid color. Like the Paint Bucket tool, it retains the properties of the last-used element. To use the Gradient tool: 1 Click the Paint Bucket tool in the Tools panel and choose the Gradient tool from the pop-up menu.
Setting hard-edged, anti-aliased, or feathered fill edges In Fireworks, you can make the edge of a fill a regular hard line or soften the edge by anti-aliasing or feathering it. By default, edges are anti-aliased. Anti-aliasing smooths jagged edges that may occur on rounded objects, such as ellipses and circles, by subtly blending the edge into the background. Feathering, however, produces a noticeable blending on either side of the edge. This softens the edge, creating an effect similar to a glow.
Adding texture to strokes and fills You can add three-dimensional effects to both strokes and fills by adding texture. Fireworks provides several textures, or you can use external textures. Adding texture to a stroke Textures modify the brightness of the stroke, but not the hue, and give strokes a less mechanical, more organic look, as if you were applying paint to a textured surface. Textures are more effective when used with wide strokes. You can add a texture to any stroke.
Adding texture to a fill Textures modify the brightness of a fill, but not the hue, and give fills a less mechanical, more organic look. You can add a texture to any fill. Fireworks ships with several textures from which to choose, such as Chiffon, Oilslick, and Sandpaper. You can also use bitmap files as textures.This allows you to create almost any type of custom texture.
Chapter 5: Applying Color, Strokes, and Fills
CHAPTER 6 Using Live Effects Macromedia Fireworks MX 2004 Live Effects are enhancements that you can apply to vector objects, bitmap images, and text. Live Effects include bevels and embossing, drop shadows and glows, color correction, and blurring and sharpening. You can apply Live Effects to selected objects directly from the Property inspector. Fireworks automatically updates Live Effects when you edit objects that have them applied.
Applying Live Effects You can apply one or more Live Effects to selected objects using the Property inspector. Each time you add a new effect to the object, it is added to the list in the Effects pop-up menu in the Property inspector. You can turn each effect on or off.
Experiment with the settings until you get the look you want. If you want to change the effect settings later, see “Editing Live Effects” on page 124. Width of bevel Contrast Softness Angle of bevel Button bevel preset Inner Bevel pop-up window To apply a Live Effect to selected objects: 1 Click the Add Effects button in the Property inspector, then choose an effect from the Effects pop-up menu. The effect is added to the Effects list for the selected object.
Applying beveled edges Applying a beveled edge to an object gives it a raised look. You can create an inner bevel or an outer bevel. A rectangle, with Inner Bevel, and with Outer Bevel To apply a beveled edge to a selected object: 1 Click the Add Effects button in the Property inspector, then choose a bevel option from the pop-up menu: ■ Bevel and Emboss > Inner Bevel ■ Bevel and Emboss > Outer Bevel 2 Edit the effect settings in the pop-up window. 3 Click outside the window or press Enter to close it.
Applying shadows and glows Fireworks makes it easy to apply drop shadows, inner shadows, and glows to objects. You can specify the angle of the shadow to simulate the angle of the light shining on the object.
Plug-ins from the Filters menu When you install a Photoshop plug-in in Fireworks, it is added to the Filters menu and to the Property inspector. You should use the Filters menu to apply filters and Photoshop plug-ins only when you are certain that you will not want to edit or remove the effect. You can remove a filter only if the Undo command is available. Installing Photoshop plug-ins You can use the Property inspector to apply some Photoshop plug-ins as Live Effects.
Reordering Live Effects You can rearrange the order of the effects applied to an object. Reordering effects changes the sequence in which the effects are applied, which can change the combined effect. In general, effects that change the interior of an object, such as the Inner Bevel effect, should be applied before effects that change the object’s exterior. For example, you should apply the Inner Bevel effect before you apply the Outer Bevel, Glow, or Shadow effect.
To create a custom Live Effect using the Styles panel: 1 Apply Live Effect settings to selected objects. For more information, see “Applying Live Effects” on page 120. 2 Choose Add Style from the Styles panel Options menu. The Add Style dialog box opens. 3 Deselect all properties except the Effect property, enter a name, and click OK. The custom Live Effect name is added to the Add Effects pop-up menu, and a style icon representing the Live Effect is added to the Styles panel.
4 Do one of the following: ■ ■ Choose Save as Command from the History panel Options menu. Click the Save button at the bottom of the History panel. Save button 5 Enter a command name and click OK to add the command to the Commands menu.
Chapter 6: Using Live Effects
CHAPTER 7 Layers, Masking, and Blending Layers divide a Macromedia Fireworks MX 2004 document into discrete planes, as though the components of the illustration were drawn on separate tracing paper overlays. A document can be made up of many layers, and each layer can contain many objects. In Fireworks, the Layers panel lists layers and the objects contained in each layer. Fireworks layers are similar to layer sets in Photoshop. Photoshop layers are similar to individual Fireworks objects.
The Layers panel displays the current state of all layers in the current frame of a document. To view other frames, you can use the Frames panel or choose an option from the Frame pop-up menu at the bottom of the Layers panel. For more information, see “Working with frames” on page 216. The name of the active layer is highlighted in the Layers panel. You can expand a layer to view a list of all the objects on it. The objects are displayed in thumbnails. Masks are also shown in the Layers panel.
To add a layer, do one of the following: • Click the New/Duplicate Layer button with no layer selected. • Choose Edit > Insert > Layer. • Choose New Layer from the Layers panel Options menu, and click OK. To delete a layer, do one of the following: • Drag the layer to the trash can icon in the Layers panel. • Select the layer and click the trash can icon in the Layers panel. To duplicate a layer, do one of the following: • Drag a layer to the New/Duplicate Layer button.
To name a layer or object: 1 Double-click a layer or object in the Layers panel. 2 Type a new name for the layer or object and press Enter. Note: The Web Layer cannot be renamed. However, you can name web objects on the Web Layer, such as slices and hotspots. For more information, see “Using the Web Layer” on page 134. To move a layer or object: • Drag the layer or object to the desired location in the Layers panel.
To show or hide a layer or objects on a layer: • Click the square in the middle column to the left of a layer or object name. The eye icon indicates that a layer is visible. To show or hide multiple layers or objects: • Drag the pointer along the Eye column in the Layers panel. To show or hide all layers and objects: • Choose Show All or Hide All from the Layers panel Options menu.
Using the Web Layer The Web Layer is a special layer that appears as the top layer in each document. The Web Layer contains web objects, such as slices and hotspots, used for assigning interactivity to exported Fireworks documents. For more information on web objects, see Chapter 9, “Slices, Rollovers, and Hotspots,” on page 167. You cannot unshare, delete, duplicate, move, or rename the Web Layer. You also cannot merge objects that reside on the Web Layer.
About vector masks If you have used other vector-illustration applications such as Macromedia FreeHand, you may be familiar with vector masks, which are sometimes called clipping paths or paste insides. The vector mask object crops or clips the underlying objects to the shape of its path, creating a cookie-cutter effect. A vector mask applied using its path outline When you create a vector mask, a mask thumbnail with a pen icon appears in the Layers panel to indicate you’ve created a vector mask.
About bitmap masks If you’re Photoshop user, you may be familiar with layer masks. Fireworks bitmap masks are similar to layer masks in that the pixels of a mask object affect the visibility of underlying objects. However, Fireworks bitmap masks are much more versatile: you can easily change how they are applied, whether using their grayscale appearance or their own transparency.
By default, most bitmap masks are applied using their grayscale appearance, but you can also apply them using their alpha channel. For more information, see “Changing the way masks are applied” on page 149. Note: Fireworks MX and Fireworks MX 2004 grayscale masks behave more like masks in other graphics applications than masks in previous versions of Fireworks do. In grayscale masks created in Fireworks MX and Fireworks MX 2004, white always reveals masked objects, and black always hides masked objects.
4 Select the object or group you want to mask. If you are masking multiple objects, the objects must be grouped. For more information about grouping objects, see “Grouping objects” on page 25. 5 Do one of the following to paste the mask: ■ ■ Choose Edit > Paste as Mask. Choose Modify > Mask > Paste as Mask.
Masking objects using the Paste Inside command If you are a Macromedia FreeHand user, you may be familiar with the Paste Inside method of creating masks. Paste Inside creates either a vector mask or a bitmap mask, depending on the type of mask object you use. The Paste Inside command creates a mask by filling a closed path or bitmap object with other objects: vector graphics, text, or bitmap images.
4 Select the object into which you want to paste the contents. This object will be used as the mask, or clipping path. 5 Choose Edit > Paste Inside. The objects you pasted appear to be inside or clipped by the mask object. Using text as a mask Text masks are a type of vector mask. You apply text masks just as you apply masks using existing objects: you simply use text as the mask object.
Masking objects using the Layers panel The quickest way to add an empty, transparent bitmap mask is through the Layers panel. The Layers panel adds a white mask to an object, which you can customize by drawing on it with the bitmap tools. Note: For details on creating empty, opaque (or black) masks, see “Masking objects using the Reveal and Hide commands” on page 142. To create a bitmap mask using the Layers panel: 1 Select the object you want to mask.
Masking objects using the Reveal and Hide commands The Modify > Mask submenu has several options for applying empty bitmap masks to objects: Reveal All applies an empty, transparent mask to an object, revealing the entire object. To achieve the same effect, click the Add Mask button in the Layers panel. Hide All applies an empty, opaque mask to an object, which hides the entire object. Reveal Selection can be used only with pixel selections.
3 Do one of the following to create the mask: ■ ■ Choose Modify > Mask > Reveal Selection to show the area defined by the pixel selection. Choose Modify > Mask > Hide Selection to hide the area defined by the pixel selection. The results of Reveal Selection and Hide Selection A bitmap mask is applied using the pixel selection. You can further edit the mask to reveal or hide the remaining pixels of the masked object using the bitmap tools in the Tools panel.
To group objects to form a mask: 1 Shift-click two or more overlapping objects. You can select objects from different layers. 2 Choose Modify > Mask > Group as Mask. Editing masks You can modify masks in many ways. By modifying a mask’s position, shape, and color, you can change the visibility of masked objects. You can also change a mask’s type and the way it is applied. In addition, masks can be replaced, disabled, or deleted.
When you select the mask thumbnail, the mask icon appears beside it in the Layers panel, and the mask’s properties show in the Property inspector, where they can be changed if desired. To select a mask: • Click the mask thumbnail in the Layers panel. The Layers panel displays a yellow highlight around a mask thumbnail when it is selected. To select masked objects: • Click the masked object thumbnail in the Layers panel.
Moving masks and masked objects You can reposition masks and masked objects. They can be moved together or independently. To move a mask and its masked objects together: 1 Select the mask on the canvas using the Pointer tool. 2 Drag the mask to a new location, but don’t drag the move handle unless you want to move the masked object separately from the mask. To move masks and masked objects independently by unlinking: 1 Click the link icon on the mask in the Layers panel.
To move a mask independently using its move handle: 1 Select the mask on the canvas using the Pointer tool. 2 Choose the Subselection tool and drag the mask’s move handle to a new location. To move masked objects independently of the mask using the move handle: 1 Select the mask on the canvas using the Pointer tool. 2 Drag the move handle to a new location. The objects move without affecting the position of the mask. Note: If there is more than one masked object, all masked objects move together.
Modifying a mask’s appearance By modifying a mask’s shape and color, you can change the visibility of masked objects. You change the shape of a bitmap mask by drawing on it with the bitmap tools. You change the shape of a vector mask by moving the mask object’s points. If a mask is applied using its grayscale appearance, you can modify its colors to affect the opacity of the underlying masked objects. Using midtone colors on a grayscale mask gives masked objects a translucent appearance.
Changing the way masks are applied You can use the Property inspector to ensure that you are editing a mask and to identify the type of mask you are working on. When a mask is selected, the Property inspector lets you change the way the mask is applied. If the Property inspector is minimized, click the expander arrow to see all properties. Vector masks are applied using their path outline by default. The outline of the path or text is used as the mask. Optionally, you can show the mask’s fill and stroke.
Both vector and bitmap masks can be applied using their grayscale appearance. Bitmap masks are applied using their grayscale appearance by default. When a mask is applied using its grayscale appearance, the lightness of its pixels determines how much of the masked object is displayed. Light pixels display the masked object. Darker pixels in the mask knock out the image and show the background.
Adding objects to a masked selection You can add more objects to an existing masked selection. To add masked objects to a masked selection: 1 Choose Edit > Cut to cut the selected object or objects you want to add. 2 Select the thumbnail of the masked object in the Layers panel. 3 Choose Edit > Paste Inside. The object or objects are added to the masked objects.
Blending and transparency Compositing is the process of varying the transparency or color interaction of two or more overlapping objects. In Fireworks, blending modes allow you to create composite images. Blending modes also add a dimension of control to the opacity of objects and images. About blending modes When you choose a blending mode, Fireworks applies it to the selected objects in their entirety.
Blending mode examples Original image Normal Multiply Screen Darken Lighten Difference Hue Saturation Color Luminosity Invert Tint Erase Blending and transparency 153
Adjusting opacity and applying blends You can use the Property inspector or the Layers panel to adjust the opacity of selected objects and to apply blending modes. An Opacity setting of 100 renders an object completely opaque. A setting of 0 (zero) renders an object completely transparent. You can also specify a blending mode and opacity before you draw an object.
CHAPTER 8 Using Styles, Symbols, and URLs Macromedia Fireworks MX 2004 provides three panels in which you can store and reuse styles, symbols, and URLs. Styles are stored in the Styles panel, symbols are stored in the Library panel, and URLs are stored in the URL panel. By default, all three panels are organized in the Assets panel group. The Styles panel contains a set of predefined Fireworks styles to choose from.
Applying a style You can use the Styles panel to create, store, and apply styles to objects or text. Styles panel When you apply a style to an object, you can later update the style without affecting the original object. Fireworks does not keep track of which style you applied to an object. If you delete a custom style, you cannot recover it; however, any object currently using the style retains its attributes.
To create a new style: 1 Create or select a vector object or text with the stroke, fill, effect, or text attributes you want. 2 Click the New Style button at the bottom of the Styles panel. 3 Choose the attributes you want to be part of the style from the New Style dialog box. Note: To save other text attributes not listed, such as alignment, anti-aliasing, auto-kerning, horizontal scale, range kerning, and leading, choose the Text Other option. 4 Name the style if you wish, and click OK.
To import styles: 1 Choose Import Styles from the Styles panel Options menu. 2 Choose a styles document to import. All styles in the styles document are imported and placed directly after the selected style in the Styles panel. Using style defaults If you want to delete all custom styles from the Styles panel and restore any deleted default styles, you can reset the Styles panel to its default state. You can also change the size of the icons displayed in the Styles panel.
Creating a symbol You can create graphic, animation, and button symbols using the Edit > Insert submenu. You can create a symbol from any object, text block, or group, and then organize them in the Library panel. To place instances in a document, you simply drag them from the Library panel onto the canvas. To create a new symbol from a selected object: 1 Select the object and choose Modify > Symbol > Convert to Symbol. 2 Type a name for the symbol in the Name text box of the Symbol Properties dialog box.
Editing symbols You can modify a symbol in the Symbol Editor, which automatically updates all associated instances when you finish editing. Note: For most types of edits, modifying an instance affects the symbol and all other instances. There are some exceptions, however. For more information, see “Editing instances” on page 160. To edit a symbol and all its instances: 1 Do one of the following to open the Symbol Editor: Double-click an instance.
Breaking symbol links You can modify an instance without affecting the symbol or other instances by first breaking the link between it and the symbol. To release an instance from a symbol: 1 Select the instance. 2 Choose Modify > Symbol > Break Apart. The selected instance becomes a group. The symbol in the Library panel is no longer associated with that group.
Importing symbols Fireworks has symbol libraries in the Edit > Libraries submenu from which you can import prepared animation symbols, graphic symbols, and button symbols, as well as navigation bars and multisymbol themes. Using these symbols, you can quickly create a sophisticated web page containing advanced navigation elements without having to spend time creating original symbols. To import one or more prepared symbols from a Fireworks symbol library: 1 Open a Fireworks document.
To import a symbol by dragging and dropping or copying and pasting, do one of the following: • Drag a symbol instance from the document containing the symbol into the destination document. • Copy a symbol instance in the document containing the symbol, then paste it into the destination document. The symbol is imported into the Library panel of the destination document and retains a relationship to the symbol in the original document.
Working with URLs Assigning a URL to a web object creates a link to a file such as a web page. You can assign URLs to hotspots, buttons, and slice objects. When you intend to use the same URLs several times, you can create a URL library in the URL panel and store the URLs in the library. You use the URL panel to add, edit, and organize your URLs. For example, if your website contains several navigation buttons to return to your home page, you can add the URL for your home page to the URL panel.
To create a new URL library: 1 Choose New URL Library from the URL panel Options menu. 2 Enter the library name in the text box and click OK. The new library name appears in the Library pop-up menu in the URL panel. To add a new URL to a URL library: 1 Choose a library from the Library pop-up menu. 2 Enter a URL in the Link text box. 3 Click the Plus (+) button. The Plus (+) button adds the current URL to the library.
About absolute and relative URLs When you enter a URL in the URL panel, you can enter an absolute or relative URL: • If you are linking to a web page that is beyond your own website, you must use an • absolute URL. If you are linking to a web page within your website, you can use an absolute URL or a relative URL. Absolute URLs are complete URLs that include the server protocol, which is usually http:// for web pages. For example, http://www.macromedia.
CHAPTER 9 Slices, Rollovers, and Hotspots Slices are the basic building blocks for creating interactivity in Macromedia Fireworks MX 2004. Slices are web objects—they exist not as images, but ultimately as HTML code. You can view, select, and rename them through the Web Layer in the Layers panel. This chapter discusses the concepts central to slicing and gives procedures for using slices to incorporate interactivity into your web pages.
Optimizing One challenge of web graphic design is ensuring that images download quickly without sacrificing quality. Slicing enables you to optimize each individual slice using the most appropriate file format and compression settings. For more information, see Chapter 12, “Optimizing and Exporting,” on page 225. You can use slices to create areas that respond to mouse events. For information on attaching interactivity to slices, see “Making slices interactive” on page 173.
Creating HTML slices An HTML slice designates an area where ordinary HTML text appears in the browser. An HTML slice does not export an image; it exports HTML text that appears in the table cell defined by the slice. HTML slices are useful if you want to quickly update text that appears on your website without having to create new graphics. To create an HTML slice: 1 Draw a slice object and leave it selected. 2 In the Property inspector, choose HTML from the Type pop-up menu. 3 Click Edit.
You can also insert a slice on top of the vector path to create irregular slice shapes. To draw a polygon slice object: 1 Choose the Polygon Slice tool. 2 Click to place the vector points of the polygon. The Polygon Slice tool draws only straight line segments. 3 When drawing a polygon slice object around objects with soft edges, be sure to include the entire object to avoid creating unwanted hard edges in the slice graphic. 4 To stop using the Polygon Slice tool, choose another tool from the Tools panel.
Showing and hiding slices Hiding a slice renders the slice invisible in the Fireworks PNG file. You can turn off all or some web objects. Because slices are web objects, they are listed beneath the Web Layer in the Layers panel, where visibility can be turned on or off for a selected slice. You can also control slice visibility through the Tools panel. Hiding a slice object does not prevent the slice from being exported in the HTML.
Moving slice guides to edit slices Slice guides define the perimeter and position of slices. Slice guides extending beyond slice objects define how the rest of the document is sliced upon export. You can change the shape of a rectangular slice object by dragging the slice guides that surround it. Nonrectangular slice objects cannot be resized by moving slice guides.
To move adjacent slice guides: 1 Shift-drag a slice guide across adjacent slices guides. 2 Release the slice guide in the desired location. All slice guides that you dragged across are moved to this location. Tip: You can cancel this operation by releasing the Shift key before you release the mouse button. All slice guides that were picked up snap back to their original positions. Using tools to edit slice objects You can use the Pointer, Subselection, and Transform tools to reshape or resize a slice.
Adding simple interactivity to slices The drag-and-drop rollover method is a fast and efficient way to create rollover and swap-image effects. Specifically, the drag-and-drop rollover method allows you to determine what happens to a slice when the pointer passes over it. The end result is commonly referred to as a rollover image. Rollover images are graphics that change appearance in a web browser when you move the pointer over them.
In Fireworks, when you select a trigger web object created using a behavior handle or the Behaviors panel, all of its behavior relationships are displayed. By default, a rollover interaction is represented by a blue behavior line. Creating a simple rollover A simple rollover swaps in the frame directly under the top frame and involves only one slice. To attach a simple rollover to a slice: 1 Ensure that the trigger object is not on a shared layer. For more information, see “Sharing layers” on page 133.
Creating a disjoint rollover A disjoint rollover swaps in an image under a web object when the pointer rolls over another web object. In response to a pointer rolling over or clicking a trigger image, an image appears in a different location on the web page. The image that is rolled over is considered the trigger; the image that changes is considered the target.
Applying multiple rollovers to a slice You can drag more than one behavior handle from a single slice to create multiple swap behaviors. For example, you can trigger a rollover and a disjoint rollover from the same slice. A slice triggering a rollover behavior and a disjoint rollover behavior Note: You can also add multiple behaviors using the Behaviors panel. For more information, see “Using the Behaviors panel to add interactivity to slices” on page 177.
Swap Image Restore restores the target object to its default appearance in Frame 1. Set Nav Bar Image sets a slice to be a part of a Fireworks navigation bar. Each slice that is part of the navigation bar must have this behavior. The Set Nav Bar Image option is actually a behavior group containing the Nav Bar Over, Nav Bar Down, and Nav Bar Restore behaviors.
Editing behaviors The Behaviors panel also gives you the ability to edit existing behaviors. You can specify the type of mouse event (such as onClick) that triggers the behavior. Note: You cannot change the event for Simple Rollover and Set Nav Bar Image. To change the mouse event that activates the behavior: 1 Select the trigger slice or hotspot containing the behavior you want to modify. All behaviors associated with that slice or hotspot are displayed in the Behaviors panel.
Preparing slices for export Using the Property inspector, you can make slices interactive by assigning links and targets to the slices. You can also specify alternate text to be displayed in a browser while an image is loading. In addition, you can choose an export file format to optimize a selected slice. If the Property inspector is minimized, click the expander arrow in the lower right corner to see all slice properties.
Assigning a target A target is an alternate web page frame or web browser window in which the linked document opens. You can specify a target for a selected slice in the Property inspector. If the Property inspector is minimized, click the expander arrow to see all properties.
Auto-naming slice files If you do not enter a slice name in either the Property inspector or the Layers panel, Fireworks reverts to auto-naming. Auto-naming assigns a unique name to each slice file automatically based on the default naming convention. To auto-name a slice file: • When you export your sliced image, enter a name in the File Name (Windows) or Name (Macintosh) text box in the Export dialog box. Do not add a file extension.
To change the default auto-naming convention: 1 Choose File > HTML Setup to open the HTML Setup dialog box. 2 Click the Document Specific tab. 3 In the File Names section, create your new naming convention by selecting from the lists. 4 (Optional) To set this information as the default for all new Fireworks documents, click Set Defaults. Note: Use caution when choosing None as a menu option for slice auto-naming.
To define how Fireworks exports HTML tables: 1 Choose File > HTML Setup, or click the Options button in the Export dialog box. 2 Click the Table tab. 3 Choose a spacing option from the Space With pop-up menu: Nested Tables — No Spacers creates a nested table with no spacers. Single Table — No Spacers creates a single table with no spacers. This option can cause tables to be displayed incorrectly in some cases.
Working with hotspots and image maps Web designers can use hotspots to make small parts of a larger graphic interactive, linking areas of web graphics to a URL. You can create an image map in Fireworks by exporting HTML from a document that contains hotspots. An image map with hotspots Hotspots and image maps are often less resource-intensive than sliced graphics.
To create a rectangular or circular hotspot: 1 Choose the Rectangle Hotspot or Circle Hotspot tool from the Web section of the Tools panel. 2 Drag the hotspot tool to draw a hotspot over an area of the graphic. Hold down Alt (Windows) or Option (Macintosh) to draw from a center point. Note: You can adjust the position of a hotspot as you drag to draw it. While holding down the mouse button, simply press and hold down the Spacebar, then drag the hotspot to another location on the canvas.
Preparing hotspots for export You can use the Property inspector to assign URLs, alternate text, targets, and custom names to hotspots. If the Property inspector is minimized, click the expander arrow in the lower right to see all properties. You assign hotspot properties the same way you assign slice properties. For more information on using the Property inspector to assign URLs, alt text, target frames, and custom names, see “Preparing slices for export” on page 180.
7 If necessary, choose Put Images in Subfolder and browse to the appropriate folder. Note: If you choose Copy to Clipboard, this step is not required, and thus the option is disabled. 8 Click Save to close the Export dialog box. Tip: When you are exporting files, Fireworks can use HTML comments to clearly label the beginning and end of code for image maps and other web features created in Fireworks. By default, HTML comments are not included in the code.
Using hotspots on top of slices You can place a hotspot on top of a slice to trigger an action or behavior. You may want to do this if you have a large graphic and you want only a small portion of it to act as the trigger for an action. For example, perhaps you have a large graphic with text on it, and you want just the text to trigger an action or behavior, such as a rollover effect. You could place a slice on top of the graphic, and then a hotspot on top of the text.
Chapter 9: Slices, Rollovers, and Hotspots
CHAPTER 10 Creating Buttons and Pop-up Menus In Macromedia Fireworks MX 2004 you can create a variety of JavaScript buttons and pop-up menus, even if you know nothing about JavaScript. The Fireworks Button Editor leads you through the button-creation process, automating many button-making tasks. The result is a convenient button symbol. After you’ve created a button symbol, you can easily create instances of the symbol to make a navigation bar, or nav bar.
• A button is easy to edit. Double-click the instance on the canvas, and you can change it in the Button Editor or the Property inspector. • Like other symbols, buttons have a registration point. The registration point is a center point that helps you align text and the different button states while in the Button Editor. About button states A button can have up to four different states.
To create an Over state: 1 With the Button Editor open, click the Over tab. 2 Do one of the following to create the button’s Over state: ■ ■ Click Copy Up Graphic to paste a copy of the Up state button into the Over window, and then edit it to change its appearance or text. Drag and drop, import, or draw a graphic. Creating a three- or four-state button When creating a button, you may want to add a Down state and an Over While Down state in addition to the Up and Over states.
Using bevel effects to draw button states As you create graphics for each button state, you can apply preset Live Effects to create common appearances for each state. For example, if you are creating a four-state button, you can apply the Raised effect to the Up state graphic, the Highlighted effect to the Down state graphic, and so on. To apply preset Live Effects to a button symbol: 1 With the desired button symbol open in the Button Editor, select the graphic to which you want to add a Live Effect.
6 Choose the Button symbol type. 7 Click OK. The new button is added to the library. Tip: You can also convert four-frame animations to buttons. Simply select all four objects, and each is placed on its own button state. Inserting buttons into a document You can insert instances of button symbols into a document from the Library panel. To place instances of a button symbol in a document: 1 Open the Library panel. 2 Drag the button symbol to the document.
Editing button symbols Fireworks button symbols are a special kind of symbol. They have two kinds of properties: some properties change in all instances when you edit an instance of the symbol, and other properties affect only the current instance. Fireworks button symbols let you take advantage of the convenience of symbols yet allow you to edit certain properties of a button instance, such as text, without affecting other instances.
• Additional behaviors assigned to an instance using the Behaviors panel • The Show Down State on Load option in the Property inspector for instances in a nav bar Note: In Fireworks MX 2004, you need not choose the Show Down State on Load option for every button instance in a nav bar. The Document Specific section of the HTML Setup dialog box contains an option called Export Multiple Files.
Setting the URL for a button symbol or instance A URL, or Uniform Resource Locator, is a link to another web page, website, or anchor on the same web page. The URL can be a symbol- or instance-level button property. You can attach a URL to a selected button instance in the Property inspector or in the URL panel. You can attach a URL to a symbol, so that the same URL appears in the Link text box in the Property inspector for each instance.
2 Do one of the following in the Property inspector: ■ ■ Choose a preset target from the Target pop-up menu: None or _self loads the web page into the same frame or window as the link. blank loads the web page into a new, unnamed browser window. parent loads the web page into the parent frameset or window of the frame that contains the link. top loads the web page into the full browser window, removing all frames. Enter a target in the Target text box.
To set the alt text for a button instance in the workspace: 1 Select the button instance in the workspace. 2 Enter the description in the Alt Text box in the Property inspector. Creating navigation bars A navigation bar, or nav bar, is a group of buttons that provide links to different areas of a website. It generally remains consistent throughout the site, providing a constant method of navigation, no matter where the user is within the site.
About the Pop-up Menu Editor The Pop-up Menu Editor is a tabbed dialog box that guides you through the creation of a pop-up menu. Its many options for controlling the characteristics of a pop-up menu are organized in four tabs: Content has options for determining the basic menu structure, as well as the text, URL link, and target for each menu item.
Creating a basic pop-up menu The Content tab of the Pop-up Menu Editor is where you determine the basic structure and content of the pop-up menu. The current or default settings for the options on the other Pop-up Menu Editor tabs are applied to the menu when you create it. To create a simple pop-up menu: 1 Select a hotspot or slice that will be the trigger area for the pop-up menu. 2 Do one of the following to open the Pop-up Menu Editor: Choose Modify > Pop-up Menu > Add Pop-up Menu.
Creating submenus within a pop-up menu Using the Indent Menu and Outdent Menu buttons on the Content tab of the Pop-up Menu Editor, you can create submenus—pop-up menus that appear when the user moves the pointer over or clicks another pop-up menu item. You can create as many levels of submenus as you want. To create a pop-up submenu: 1 Open the Content tab of the Pop-up Menu Editor and create menu items.
To move an entry in the pop-up menu: 1 With the desired pop-up menu displayed in the Pop-up Menu Editor, click the Content tab. 2 Drag the menu item to a new location in the list. 3 Click Done. Designing the appearance of a pop-up menu After you create a basic menu and optional submenus, you can format the text, apply graphic styles to the Over and Up states, and choose vertical or horizontal orientation in the Appearance tab of the Pop-up Menu Editor.
To set whether a pop-up menu is HTML- or image-based: 1 With the desired pop-up menu open in the Pop-up Menu Editor, click the Appearance tab. For information on opening an existing pop-up menu in the Pop-up Menu Editor, see “Editing pop-up menus” on page 209. 2 Choose a Cells option: HTML sets the menu’s appearance using HTML code only. This setting produces pages with smaller file sizes. Image gives you a selection of graphic image styles to use as the cell background.
Adding pop-up menu styles You can add custom cell styles to the Pop-up Menu Editor. Custom cell styles are available along with the preset choices on the Appearance tab when you choose the Image option as the cell type, which sets pop-up menus to use graphical backgrounds in their cells. To add a custom cell style to the Pop-up Menu Editor: 1 Apply any combination of stroke, fill, texture, and Live Effects to an object, and save it as a style using the Styles panel.
To set advanced cell properties for the current pop-up menu: 1 With the desired pop-up menu open in the Pop-up Menu Editor, click the Advanced tab. 2 3 4 5 6 7 For information on opening an existing pop-up menu in the Pop-up Menu Editor, see “Editing pop-up menus” on page 209.
Positioning pop-up menus and submenus The Position tab of the Pop-up Menu Editor lets you specify a pop-up menu’s position. You can also position a top-level pop-up menu by dragging its outline in the workspace when the Web Layer is visible. To set the position for a pop-up menu using the Pop-up Menu Editor: 1 With the desired pop-up menu open in the Pop-up Menu Editor, click the Position tab.
To set the position for a pop-up submenu using the Pop-up Menu Editor: 1 With the desired pop-up menu open in the Pop-up Menu Editor, click the Position tab. For information on opening an existing pop-up menu in the Pop-up Menu Editor, see “Editing pop-up menus” on page 209. 2 Do one of the following to define the submenu position: ■ Click a Submenu Position button to position the submenu relative to the pop-up menu item that triggers it. ■ Enter x and y coordinates.
To move an entry in the pop-up menu: 1 With the desired pop-up menu displayed in the Pop-up Menu Editor, click the Content tab. 2 Drag the menu item to a new location in the list. 3 Click Done. About exporting pop-up menus Fireworks generates all the JavaScript necessary to view pop-up menus in web browsers. When a Fireworks document containing pop-up menus is exported to HTML, a JavaScript file called mm_menu.js is exported to the same location as the HTML file.
CHAPTER 11 Creating Animation Animated graphics add an exciting, sophisticated look to your website. In Macromedia Fireworks MX 2004, you can create animated graphics with banner ads, logos, and cartoons that move. For example, you can make your company mascot dance across a page while the logo fades in and out. One way to create animations in Fireworks is by creating symbols and changing their properties over time to produce the illusion of motion.
3 Use the Frame Delay controls in the Frames panel to set the speed of the animated motion. For more information, see “Setting the frame delay” on page 216. 4 Optimize the document as an animated GIF. For more information, see “Optimizing an animation” on page 222. 5 Export the document as an Animated GIF or SWF, or save it as a Fireworks PNG and import it into Macromedia Flash for further editing. For more information, see “Animation export formats” on page 223.
To convert an object to an animation symbol: 1 Select the object. 2 Choose Modify > Animation > Animate selection. 3 Enter the desired settings in the dialog box. For more information on settings, see “Editing animation symbols” on page 213. Animation controls appear on the object’s bounding box, and a copy of the symbol is added to the library. Editing animation symbols You can manipulate the properties of animation symbols to make your website come alive.
is the percent change in size from start to finish. Although the default is 100%, you can enter any number you wish in the Scaling text box. To scale an object from 0 to 100%, the original object must be very small; vector objects are recommended. Scaling Opacity is the degree of fading in or out from start to finish. Values range from 0 to 100, and the default is 100%. Creating a fade in/fade out requires two instances of the same symbol—one to play the fade in, and the other to play the fade out.
Editing symbol graphics You can change the graphic your symbol is based on as well as its properties. You edit symbol graphics in the Symbol Editor. The Symbol Editor lets you use any of the drawing, text, or color tools to edit the graphic. While you’re working in the Symbol Editor, only the selected symbol is affected. The symbol is a library item. Thus, if you change the appearance of one of its instances, all the other instances change as well.
Working with frames You build animations by creating a number of frames. You can see the contents of each frame using the Frames panel. The Frames panel is where you create and organize frames. You can name the frames, reorganize them, manually set the timing of the animation, and move objects from one frame to another. Onion Skinning column Frame name Frame Delay column Onion Skinning options Delete Frame New/Duplicate Frame Distribute to Frames Each frame also has a number of associated properties.
Showing and hiding frames for playback You can show or hide frames for playback. If a frame is hidden, it is not displayed during playback and it is not exported. To show or hide a frame: 1 Do one of the following: Choose Properties from the Frames panel Options menu. Double-click the frame delay column. The Frame Properties pop-up window appears. 2 Deselect Include when Exporting. A red X is displayed in place of the frame delay time.
To copy a selected frame and place it in a sequence: 1 Choose Duplicate Frame from the Frames panel Options menu. 2 Enter the number of duplicates to create for the selected frame, choose where the duplicate frames are to be inserted, and click OK. Duplicating a frame is useful when you want objects to reappear in another part of the animation. To reorder frames: • Drag the frames one by one to a new location in the list.
To share a layer across frames: 1 Double-click the layer. 2 Select Share Across Frames. Note: All the contents in a shared layer appear in every frame. To disable the sharing of a layer across frames: 1 Double-click the shared layer. 2 Deselect Share Across Frames. 3 Choose one of the following options for how to copy objects to frames: ■ ■ Leave the contents of the shared layer in the current frame only. Copy the contents of the shared layer to all frames.
Using onion skinning Onion skinning lets you view the contents of frames preceding and following the currently selected frame. You can smoothly animate objects without having to flip back and forth through them. The term onion skinning comes from a traditional animation technique of using thin, translucent tracing paper to view animated sequences.
4 To distribute the tweened objects to separate frames, choose Distribute to Frames and click OK. If you choose not to distribute the objects to separate frames, you can do it later by selecting all instances and clicking the Distribute to Frames button in the Frames panel. Note: In most cases, using animation symbols is preferable to tweening. For more information, see “Working with animation symbols” on page 212.
Setting the animation repetition The Loop setting in the Frames panel determines how many times the animation repeats. This feature loops frames over and over so you can minimize the number of frames needed to build the animation. To set the selected animation to repeat: 1 Choose Window > Frames to display the Frames panel. 2 Click the GIF Animation Looping button at the bottom of the panel. 3 Choose the number of times to repeat the animation after the first time.
Animation export formats After you create and optimize an animation, it is ready to export. Animated GIFs give the best results for clip art and cartoonlike graphics. For information about exporting animated GIFs, see “Exporting an animation” on page 250. You can export the animation as a Flash SWF file, and then import it into Macromedia Flash. Or you can skip the export step and import your Fireworks PNG source file directly into Flash.
Using multiple files as one animation Fireworks can create an animation based on a group of image files. For example, you can create a banner ad based on several existing graphics by opening each graphic and placing it in a separate frame in the same document. To open multiple files as an animation: 1 Choose File > Open. 2 Shift-click to select multiple files. 3 Select Open as Animation and click OK.
CHAPTER 12 Optimizing and Exporting The ultimate goal in web graphic design is to create great-looking images that download as fast as possible. To do that, you must select a file format with the best compression for your image while maintaining as much quality as possible. This balancing act is optimization—finding the right mix of color, compression, and quality.
About optimizing Optimizing graphics in Fireworks involves doing the following: • Choosing the best file format. Each file format has a different method of compressing color • • information. Choosing the appropriate format for certain types of graphics can greatly reduce file size. Setting format-specific options. Each graphic file format has a unique set of options. You can use options such as color depth to reduce file size.
Using Export Preview When accessed through the Export Wizard, the Export Preview displays recommended optimization and export options for the current document. When selected directly from the File menu, the Export Preview displays the current document export settings as defined in the optimize panel. The preview area of the Export Preview displays the document or graphic exactly as it will be exported and estimates file size and download time with the current export settings.
To export using Export Preview: 1 Choose File > Export Preview to open the Export Preview. To edit optimization settings, click the Options tab. For information about the options available on this tab, see the following procedures. ■ To edit the size and area of the exported image, click the File tab and change the desired settings. For information about the options available on this tab, see the following procedures.
To set optimization settings using Export Preview: 1 Click the Options tab. Most of the options available here are similar to those in the Optimize panel. For more about these options, see “Using optimization settings” on page 231. 2 Click the Optimize to Size Wizard button to optimize a graphic based on a target file size. Enter a file size in kilobytes and click OK.
To set animation settings using Export Preview: 1 Click the Animation tab. 2 Use the following techniques to preview animation frames: To display a single frame, select the desired frame in the list on the left side of the dialog box, or use the frame controls in the lower right area of the dialog box. ■ To play the animation, click the Play/Stop control in the lower right area of the dialog box.
Optimizing in the workspace Exporting graphics for use on the web is a two-step process: optimizing, then exporting (or in some cases, simply saving). Optimizing graphics ensures they possess the right mix of color, compression, and quality. After you finalize a graphic’s optimization settings, the graphic is ready for export. You don’t have to use the Export Wizard and Export Preview in Fireworks if you’re comfortable optimizing and exporting graphics.
To choose a preset optimization: • Choose a preset from the Settings pop-up menu in the Property inspector or the Optimize panel: GIF Web 216 forces all colors to websafe colors. The color palette contains up to 216 colors (see “Optimizing GIF, PNG, TIFF, BMP, and PICT files” on page 235). GIF WebSnap 256 converts non-websafe colors to their closest websafe color. The color palette contains up to a maximum of 256 colors. GIF WebSnap 128 converts non-websafe colors to their closest websafe color.
Previewing and comparing optimization settings The document preview buttons display the graphic as it would appear in a web browser, based on optimization settings. You can preview rollover and navigation behaviors, as well as animation. The Original button and the document preview buttons The document preview buttons display a document’s total size, estimated download time, and file format.
To compare views with different optimization settings: 1 Click the 2-Up or 4-Up button in the upper left of the Document window. 2 Click one of the split-view previews to select it. 3 Enter settings in the Optimize panel. 4 Select the other previews and specify different optimization settings for each preview to compare them. When you choose 2-Up or 4-Up view, the first split-view displays the original Fireworks PNG document so that you can compare it with optimized versions.
TIFF, or Tagged Image File Format, is a graphic format used for storing bitmap images. TIFFs are most commonly used in print publishing. Many multimedia applications also accept imported TIFF graphics. BMP, the Microsoft Windows graphic file format, is a common file format used to display bitmap images. BMPs are used primarily on the Windows operating system. Many applications can import BMP images. PICT, developed by Apple Computer, is a graphic file format commonly used on Macintosh operating systems.
Windows and Macintosh each contain the 256 colors defined by the Windows or Macintosh platform standards, respectively. Grayscale is a palette of 256 or fewer shades of gray. Choosing this palette converts the image to grayscale. Black and White is a two-color palette consisting only of black and white. Uniform is a mathematical palette based on RGB pixel values. Custom is a palette that has been modified or loaded from an external palette (ACT file) or a GIF file.
Removing unused colors Removing unused colors from an image before exporting or saving makes its file size smaller. Note: This option is available only for GIFs and other 8-bit graphic file formats. To remove unused colors: • Choose Remove Unused Colors from the Optimize panel Options menu. To include all colors in the palette, including colors that are not present in the exported or saved image: • Deselect Remove Unused Colors.
Various small symbols appear on some color swatches, indicating certain characteristics of individual colors, as follows: Symbol Meaning The color has been edited, affecting only the exported document. This does not change the color in the source document. The color is locked. The color is transparent. The color is websafe. The color has multiple attributes. In this case, the color is websafe, is locked, and has been edited.
Locking colors in a palette You can lock individual colors so that you cannot remove or change them when changing palettes or when reducing the number of colors in a palette. If you switch to another palette after colors have been locked, locked colors are added to the new palette. To lock a selected color, do one of the following: • Click the Lock button at the bottom of the Optimize panel. • Right-click (Windows) or Control-click (Macintosh) the color swatch, and choose Lock Color from the context menu.
To force a color to its closest websafe equivalent: 1 Select a color in the Optimize panel color table. 2 Click the Snap to Web Safe button. If you save a Fireworks PNG, changing colors to websafe in the Optimize panel affects only the exported version of the image, not the actual image. Saving palettes You can save custom palettes as external palette files.
Making areas transparent You can set transparent areas for GIFs and 8-bit PNGs so that in a web browser the background of the web page is visible through those areas. In Fireworks, a gray-and-white checkerboard on document previews denotes transparent areas.
To select a color for transparency: 1 Click the Preview, 2-Up, or 4-Up button at the upper left of the Document window. In 2-Up or 4-Up view, click a view other than the original. 2 In the Optimize panel, choose Index Transparency from the Transparency pop-up menu at the bottom of the panel. The canvas color is made transparent in the preview. 3 To choose a different color, click the Select Transparency Color button. The pointer changes to an eyedropper.
Optimizing JPEGs Using the Optimize panel, you can optimize JPEGs by setting compression and smoothing options. JPEGs are always saved and exported in 24-bit color, so you can’t optimize a JPEG by editing its color palette. The color table is empty when a JPEG image is selected. As you experiment with different optimization settings, you can use the 2-Up and 4-Up buttons to test and compare a JPEG’s appearance and estimated file size.
Selectively compressing areas of a JPEG Selective JPEG compression lets you compress different areas of a JPEG at different levels. Areas of particular interest in an image can be compressed at a higher quality level. Areas of lesser significance, such as backgrounds, can be compressed at a lower quality level, reducing the overall size of the image while retaining the quality of the more important areas.
Blurring or sharpening detail You can set Smoothing in the Optimize panel to help decrease the file size of JPEGs. Smoothing blurs hard edges, which do not compress well in JPEGs. Higher numbers produce more blurring in the exported or saved JPEG, typically creating smaller files. A smoothing setting of about 3 reduces the size of the image while still maintaining reasonable quality. To help preserve fine edges between two colors: • Choose Sharpen JPEG Edges from the Optimize panel Options menu.
Removing halos When you make the canvas color transparent on an image that was previously anti-aliased, the pixels from the anti-aliasing remain. Then when you export (or in some cases, save) the graphic and place it on a web page with a different background color, the perimeter pixels of the antialiased object may be apparent on the web page’s background. These form a halo, which is especially noticeable on a dark background.
To save optimization settings as a preset: 1 Select Save Settings from the Optimize panel Options menu. 2 Type a name for the optimization preset and click OK. Saved optimization settings appear at the bottom of the Settings pop-up menu in the Optimize panel and in the Property inspector. They are available in all subsequent documents. The preset file is saved in the Export Settings folder in your user-specific Fireworks configuration folder.
Exporting a single image You use the File > Export command to export a graphic after you have finished optimizing it in the workspace. If you are working with an existing image that you opened in Fireworks, you may be able to save it rather than export it, depending on the image’s original file type. For more information, see Fireworks Help. Note: To export only certain images in a document, you must first slice your document and then export only the desired slices.
Exporting selected slices You can export selected slices in a Fireworks document. Shift-click to select multiple slices. Note: For more information on slicing, see “Creating and editing slices” on page 167. To export selected slices: 1 Do one of the following: Choose File > Export. To export an individual slice, right-click (Windows) or Control-click (Macintosh) the slice and choose Export Selected Slice. Choose a location in which to store the exported files.
Exporting an animation After you create and optimize an animation, it is ready to export. You can export an animation as an Animated GIF, as a Flash SWF file, or as multiple files. If your document contains more than one animation, you can insert slices on top of each animation to export each using different animation settings, such as looping and frame delay. For information about exporting to multiple files, see “Exporting frames or layers” on page 251.
Exporting frames or layers Fireworks can export each layer or frame in a document as a separate image file, using the optimization settings specified in the Optimize panel. The name of the layer or frame determines the filename of each exported file. This export method is sometimes used to export animations. To export frames or layers as multiple files: 1 Choose File > Export. 2 Type a filename and choose a destination folder.
Exporting HTML Unless you specify otherwise, when you export a sliced Fireworks document, what you’re actually exporting is an HTML file and its images. Fireworks generates pure HTML that can be read by most web browsers and HTML editors. There are a variety of ways to export Fireworks HTML: • Export an HTML file, which you can later open for editing in an HTML editor. • Copy HTML code to the Clipboard in Fireworks, and then paste that code directly into an • • existing HTML document.
Including comments in HTML Fireworks HTML is well commented, telling you what the pieces of code relate to. Fireworks HTML comments begin with . Anything between these two markers is not interpreted as HTML or JavaScript code. If you want comments included in your HTML, you must tell Fireworks you want this option turned on. To include comments in exported HTML: • Before exporting, choose the Include HTML Comments option on the General tab of the HTML Setup dialog box.
You can set up global HTML export preferences using the HTML Setup dialog box. For more information, see “Setting HTML export options” on page 259. Note: Macromedia Dreamweaver shares a tight integration with Fireworks. Fireworks handles the export of HTML Dreamweaver differently than that of other HTML editors.
Copying HTML‘ to the Clipboard A fast way to export Fireworks-generated HTML is to copy it to the Clipboard. You can copy HTML code in Fireworks in either of two ways. You can use the Copy HTML Code command, or you can choose Copy to Clipboard as an option in the Export dialog box. Doing so will copy the Fireworks HTML to the Clipboard and generate the associated image files in the location you specify. You’ll later paste this HTML into a document in your preferred HTML editor.
To copy Fireworks HTML using the Export dialog box: 1 Choose File > Export. Note: Optionally, if you are exporting to Dreamweaver, click the Quick Export button and choose Copy HTML to Clipboard from the Dreamweaver submenu. 2 In the Export dialog box, specify a folder as the destination for the exported images. This must be the same location where your HTML file will reside.
Copying and pasting HTML from an exported Fireworks file You can open exported Fireworks HTML in an HTML editor and copy and paste sections of code into another HTML file. To copy code from an exported Fireworks file and paste it into another HTML document: 1 Open the Fireworks HTML file you exported in an HTML editor. 2 Highlight the necessary code and copy it to the Clipboard. 3 Open an existing HTML document or create a new one.
To update HTML using the Update HTML command: 1 Do one of the following: Choose File > Update HTML. Click the Quick Export button and choose Update HTML from the pop-up menu. Select the file to update in the Locate HTML File dialog box. Click Open. If no Fireworks-generated HTML is found, click OK to insert new HTML at the end of the document. If Fireworks-generated HTML is found, choose one of the following and click OK: Replace Images and Their HTML replaces the previous Fireworks HTML.
For more information on XHTML, visit the World Wide Web Consortium (W3C) XHTML specification at www.w3.org. To export XHTML from Fireworks: 1 Choose File > HTML Setup, choose an XHTML style from the HTML Style pop-up menu on the General tab, and click OK. 2 Export your document using any of the methods available for exporting or copying HTML. For more information about the various ways you can export and copy HTML from Fireworks, see “Exporting HTML” on page 252.
■ ■ ■ To export your document using the XHTML standard, choose the appropriate XHTML style from the pop-up menu. For more information about XHTML, see “Exporting XHTML” on page 258. Choose a file extension from the Extension pop-up menu or enter a new one. Choose Include HTML Comments to include comments regarding where to copy and paste in the HTML. This option is recommended if your document contains interactive elements such as buttons, behaviors, or rollover images.
Using the Quick Export button The Quick Export button, located in the upper right corner of the Document window, offers easy access to common options for exporting Fireworks files to other applications. Using the Quick Export button, you can export to a variety of formats, including Macromedia applications and other applications, such as Microsoft FrontPage and Adobe GoLive®.
Sending a Fireworks document as an e-mail attachment You can easily send documents as e-mail attachments from within Fireworks. You can send a Fireworks PNG, a compressed JPEG, or a document using other file formats and optimization settings available in the Optimize panel. To send a document as an e-mail attachment using your default e-mail client: 1 Choose File > Send to E-mail. 2 Select one of the following options: attaches the current PNG document to a new e-mail message.
CHAPTER 13 Automating Repetitive Tasks Web designers often spend lots of time doing repetitive tasks, such as optimizing images or converting images to fit within certain constraints. Part of the power of Macromedia Fireworks MX 2004 is its capability to automate and simplify many tedious drawing, editing, and fileconversion tasks. To speed up your editing process, you can use Find and Replace to search for and replace elements within a file or elements from multiple files.
Finding and replacing The Find and Replace feature helps you search for and replace elements, such as text, URLs, fonts, and colors. Find and Replace can search the current document or multiple files. Find and Replace works only in Fireworks PNG files or in files containing vector objects, such as FreeHand, uncompressed CorelDraw, and Illustrator files. Search option Find option Find panel To select the source for the search: 1 Open the document.
5 Set the options for the selected Find attribute. 6 Choose a find-and-replace operation: locates the next instance of the element. Found elements appear selected in the document. Replace changes a found element with the contents of the Change To option. Replace All finds and replaces every occurrence of a found element throughout the search range. Find Note: Replacing objects in multiple files automatically saves those files; you cannot reverse the change using Edit > Undo.
Finding and replacing text Fireworks makes it easy to search for and replace text. You have a variety of options to refine your search to consider case or to find entire words or parts of words. To search for and replace words, phrases, or text strings: 1 Choose Find Text from the Find pop-up menu of the Find panel. 2 Enter the text to search for in the Find text box. 3 Enter the replacement text in the Change To text box.
Finding and replacing URLs In addition to words, typefaces, and colors, Fireworks allows you to find and replace URLs assigned to interactive elements in your documents. To search for and replace URLs assigned to web objects: 1 Choose Find URL from the Find pop-up menu of the Find panel. 2 Enter the URL to search for in the Find text box. 3 Enter the replacement URL in the Change To text box.
To batch-process files: 1 Choose File > Batch Process, and select the files to process. You can select files from different folders or group them by file type. Note: If the files you select are locked or checked in from a Dreamweaver site, you are prompted to unlock them or check them out before proceeding. 2 Click one of the following in the Batch (Windows) or Batch Process (Macintosh) dialog box: Add adds selected files and folders to the list of files to batch-process.
4 Click Next, then do one or both of the following: ■ ■ To add a task to the batch, select it in the Batch Options list and click Add. Each task can be added only once. For more information on adding commands, see “Performing commands with a batch process” on page 272. To reorder the list, select the task in the Include in Batch list and click the up and down arrow buttons.
Changing optimization settings with a batch process You can change file optimization settings using the Export option in the Batch Process dialog box. To set export settings for a batch process: 1 Choose Export from the Batch Options list and click Add. 2 From the Settings pop-up menu, choose from the following options and click OK: Choose Use Settings from Each File to keep each file’s previous export settings during the batch process.
Scaling graphics with a batch process You can alter the height and width of images being exported using the Scale option in the Batch Process dialog box. To set scaling options for batch-processed files: 1 Choose Scale from the Batch Options list and click Add. 2 In the Scale pop-up menu, choose an option: exports files unaltered. Scale to Size scales images to the exact width and height you specify. Scale to Fit Area makes images fit proportionally with the maximum width and height range you specify.
To select attributes to find and replace during a batch process: 1 Choose Find and Replace from the Batch Options list and click Add. 2 Click Edit. 3 Select the type of attribute to find and replace from the Find pop-up menu: text, font, color, URL, or Non-Web216. 4 Enter or select the specific element to find in the Find box. 5 Enter or select the specific element to replace in the Change To box. 6 Click OK to store Find and Replace settings. 7 Click Next to continue the batch process.
Specifying the batch process output location After you choose all batch options in the Batch Process dialog box, you must choose options for saving your files. You can save backup copies of the original files from a batch process. Backup copies of files are placed in an Original Files subfolder in the same folder as each original file. To back up batch-processed files: 1 Choose a location for the batch output. 2 Choose Backups to set your backup options.
Saving batch processes as scripts You can save batch process settings as a script or command to re-create the batch process easily in the future. After you choose all batch options in the Batch dialog box, you are given options for saving your files. To create a batch script: 1 Click Save Script to create a batch script. 2 Enter a name and destination for the script. 3 Click Save. Saving your script into the Commands folder on your hard disk adds it to the Commands menu in Fireworks.
Extending Fireworks Extending Fireworks has never been easier. Fireworks offers a variety of different ways you can create custom commands that enhance its capabilities. With the Extension Manager, you can install and manage extensions that augment the functionality of Fireworks. Or you can write custom JavaScript code and use it as a custom command in Fireworks. You can also use Flash SWF movies as custom commands in Fireworks.
Scripting with the History panel The History panel records a list of the steps you have performed while working in Fireworks. Each step is stored on a separate line of the History panel, starting with the most recent. By default, the panel remembers 20 steps. However, you can change this value at any time. Creating commands You can save groups of steps in the History panel as a command that you can reuse. You can execute saved commands in any Fireworks document. They are not document-specific.
Playing commands You can execute recorded commands or a selection of actions in the History panel at any time. To play back a saved command: 1 If necessary, select one or more objects. 2 Choose the command from the Commands menu. To replay a selection of steps: 1 Select one or more objects. 2 Choose the steps in the History panel. 3 Click the Replay button at the bottom of the History panel. Steps marked with an X are nonrepeatable and cannot be played back.
About scripting with Flash SWF files With Flash, you can create SWF movies that contain JavaScript code. These movies can be used as Fireworks commands, accessible from the Commands menu in Fireworks. You can even create a SWF movie and use it as a Fireworks panel, accessible from the Window menu. The Align panel in Fireworks is an example of a Flash movie imported as a panel.
Editing or customizing a command script Command scripts are saved as JavaScript. If you know JavaScript, you can open and edit commands in any text editor, such as Notepad (Windows) or TextEdit (Macintosh). To edit a command using JavaScript: 1 From your desktop, navigate to the appropriate Commands or Command Panels folder on your hard disk.
Chapter 13: Automating Repetitive Tasks
CHAPTER 14 Preferences and Keyboard Shortcuts Macromedia Fireworks MX 2004 preference settings let you control the general appearance of the user interface, as well as editing and folder aspects. In addition, Fireworks allows you to customize your keyboard shortcuts. This means that you can customize your shortcuts and standardize them among your favorite software programs.
• Soft interpolation, which was used in Fireworks 1, gives a soft blur and eliminates sharp details. This method is useful when others produce unwanted artifacts. • Nearest Neighbor interpolation results in jagged edges and sharp contrasts with no blurring. The effect is similar to zooming in or out on an image with the Zoom tool. is deselected by default. It allows you to display or hide the graphical icons on panel tabs that were visible in previous versions of Fireworks.
Note: Macromedia Flash is an exception. When launching and editing graphics in Flash, Fireworks always uses the preferences you set in the Launch and Edit section of the Preferences dialog box. determines whether the original Fireworks PNG file opens when you use Fireworks to edit images from within other applications. When Editing from External Application When Optimizing from External Application determines whether the original Fireworks PNG file opens when you optimize a graphic.
Restoring preferences You can restore preferences to their original settings by deleting the preferences file. The first time Fireworks is launched after the preferences file has been deleted, a new preferences file is created, restoring Fireworks to its original configuration. To restore default preferences: 1 Quit Fireworks. 2 Locate the Fireworks MX 2004 Preferences file on your hard disk and delete it. The exact location of this file varies from system to system.
5 Choose the command whose shortcut you want to modify from the Commands list. If a shortcut exists, it is displayed in the Shortcuts list. 6 Click in the Press Key text box, and press the desired keys for the new shortcut on the keyboard. If the key combination you choose is already used by another shortcut, a warning message appears below the Press Key text box. 7 Do one of the following: ■ Click the Add a New Shortcut (+) button to add a secondary shortcut to the shortcut list.
Working with configuration files To accommodate multiuser systems, Fireworks supports user-specific configuration files. This lets you customize features in Fireworks such as styles, keyboard shortcuts, commands, and so forth, without affecting the configuration of Fireworks for other users. Fireworks creates a different set of configuration files for each user. Fireworks also installs master configuration files in the Fireworks application folder.
Location of the Fireworks preferences file Fireworks preferences are stored in a file named Fireworks MX 2004 Preferences.txt (Windows) or Fireworks MX 2004 Preferences (Macintosh). The location of this file varies depending on your operating system. • In Windows, preferences are in your user-specific Fireworks configuration folder. For more information about locating this folder, see “About user configuration files” on page 286.
Chapter 14: Preferences and Keyboard Shortcuts
INDEX Numerics 24-bit color 236 32-bit color 236 A absolute URLs, entering 166 ACT file format, swatches 99 Add Noise filter 54 Add Preview Icons preference 282 adding frames 217 styles 157 adjusting hue or saturation 47 tonal range using eyedropper 45 Adobe GoLive 261 aligning objects 26 alpha channel of an object, selecting 15 alpha, converting images to 51 alt (alternate) text 180 assigning to buttons or instances 199 animation 211 adding frames 217 creating from multiple files 224 custom frame viewing
B backing up during Find and Replace 265 baseline shift 89 Batch Process dialog box 268 batch processing 267 backing up files 273 commands 272 export settings 270 filenames 272 Find and Replace 271 optimization settings 270 saving as scripts 274 saving files 269 scaling graphics 271 batch scripts 274 dragging and dropping 274 running 274 behaviors Behaviors panel 177 Macromedia Dreamweaver 4 173 Nav Bar Down 178 Nav Bar Over 178 Nav Bar Restore 178 Set Nav Bar Image 178 Set Pop-up Menu 178 Set Text of Statu
buttons active area 197 Button Editor 191 creating 191 defined 192 Live Effects 194 navigation bars 200 overview 191 setting a target 198 C cell border properties 207 center point and axis of rotation 22 Chamfer Rectangle tool 58 character spacing.
commands batch processing 272 creating 276 deleting custom 278 editing 279 renaming custom 278 renaming or deleting Fireworks commands 278 Commands menu 277 managing saved commands 278 composite paths 75 compositing 152 compression adjusting 240 and optimization 231 blurring edges 245 choosing a file type 234 selective 244 configuration files 286 customizing for all users 286 for all users 286 location of 286 master 286 configuring Fireworks 281 Connector Line tool 58 constraining rotation 22 Contract comma
pie charts 58 polygons 57, 58 rectangles 56 rounded rectangles 56, 58 selecting a point 69 spirals 58 splitting paths 75 stars 57 drop shadows 123 duplicating by dragging 20 selected objects 19 E e-mail 262 edges beveled 122 showing and hiding 10 Edit Gradient dialog box 113 Edit Stroke dialog box 107 editing actions in the History panel 279 animation symbols 213 behaviors 179 bitmap objects 31 gradient fills 113 Live Effects 124 paths 71 pixels 10 pop-up menus 209 selected objects 19 single layer 132 solid
files, unlocking 262 Fill Color box 32 Fill Color Live Effect 154 fills adding texture to 117 adjusting 114 applying color fills 46 applying gradient 32, 112 applying pattern 111 applying solid 110 changing color for basic shape tools 110 changing edges 115 drawing over strokes 109 editing gradient 113 editing solid 110 feathering or anti-aliasing 115 finding and replacing 266 moving 114 resetting default color 98 rotating 114 saving custom gradient 115 saving gradient 115 swapping stroke and fill colors 98
G Gaussian Blur filter 49 GIF file format choosing 234 choosing a color palette 235 swatches 99 glow effects 123 GoLive 261 gradient fills 32 adding new color 113 adjusting 114 adjusting color transition 113 applying 112 changing colors 113 converting images to transparency 51 Edit Gradient dialog box 113 editing 113 moving 114 removing colors from 113 rotating 114 saving custom 115 transforming 114 Grayscale color model 102 grouping objects 25 H halos, removing 246 handles, transform 21 Hexadecimal color m
J JPEG files choosing JPEG format 234 editing selected areas 244 optimization settings 243 progressive 245 Selective JPEG compression 244 Sharpen JPEG Edges command 245 K kerning 84 keyboard shortcuts 284 changing current set 284 custom shortcut sets 284 deleting custom shortcut sets 285 reference sheet for current set 285 secondary shortcuts 284 UTF-8 encoded reference sheets 285 Knife tool 75 L L-shape tool 58 layers 129 activating 130 adding and removing 130 disabling sharing across frames 219 duplicatin
N nav (navigation) bars creating 200 Down state 178 Over state 178 Restore behavior 178 nearest neighbor interpolation scaling method 282 nested tables 183 Numeric Transform command 24 O objects converting to animation 213 creating bitmaps 30 distorting 23 grouping 25 merging 133 moving selected 19 removing an effect 125 selecting 8 selecting alpha channel 15 skewing 23 slanting 23 stacking 26 ungrouping 25 onion skinning Button Editor 191 custom viewing 220 defined 220 multiframe editing 220 turning off 22
Pen tool 64 adding points with 70 curved segments 65 deleting points with 70 resuming path 71 straight segments 65 Pencil tool 31 perspective illusion 23 Photoshop applying plug-ins 124 grouped layers 134 import preferences 283 installing plug-ins 124 layer masks 143 patterns 283 plug-ins 283 textures 283 Pick Distance preference 282 PICT file format 235 pie chart 58 Pie tool 58 pixels adjusting tonal range using eyedropper 45 cloning 34 contracting selection border 16 copying 10 cutting 10 expanding select
R Radial Blur filter 50 raster images 29 rectangles 56 rounded corners 59 Red-eye Removal tool 34, 37 redoing using History panel 276 Redraw Path tool 74 redrawing paths 74 reducing points 77 reinstalling Fireworks 287 relative URLs, entering 166 removing effects 125 parts of a path 76 renaming symbols 160 Replace color tool 34, 38 replacing elements 264 replaying animations 221 reshaping vector objects 73 Reveal All command 142 Reveal Selection command 142 RGB color model 102 rollovers active area 197 conv
Send to Back command 26 sending documents as e-mail attachments 262 Set Nav Bar Image behavior 178 Set Pop-up Menu behavior 178 Set Text of Status Bar behavior 178 shadows 41, 123 sharing layers 133 Sharpen filter 52 Sharpen More filter 52 Sharpen tool 34 sharpening 52 bitmap areas 34 images 35 shortcut sets See also keyboard shortcuts Show Pen Preview preference 282 Show Solid Points preference 282 Show Tab Icons preference 282 Show/Hide hotspots and slices 171 showing edges 10 Simple Rollover behavior 177
Subselection tool auto-joining paths with 71 selecting masks with 145 Swap Image behavior 177 swap image rollovers creating disjoint rollovers 176 with single slice 175 swap image, external images for 179 swatch group, choosing custom 99 Swatches panel 99 appending swatches 99 deleting a color 100 replacing a color 100 saving custom 101 Windows system colors 99 swatches, choosing custom 99 symbol library 159 Symbol Properties dialog box 159 symbols breaking a link 161 creating 159 creating instances 159 def
Replace Color 34, 38 Rubber Stamp 34 Scale 22 Sharpen 34 Skew 23 Smudge 34 Subselection 71, 145 Text 79 Transform 21 transformation tools Distort 23 Scale 22 Skew 23 transforming by dragging 21 gradient fills 114 numerically 24 objects 21 pattern fills 114 text 92 transparency adding or removing colors 242 animation 222 converting images to gradient transparency 51 illusion 104 selecting a color 242 See also opacity transparent areas 241 Turn off Hide Edges preference 282 Tween Instances command 220 tweenin