Download Print this page

MACROMEDIA FIREWORKS 8-USING FIREWORKS Use Manual

Table Of Contents

page of 473

/ 473
Contents
Table of Contents
Bookmarks

Table of Contents

Advertisement

Quick Links

Using Fireworks

Table of Contents

Advertisement

Table of Contents

Need help?

Need help?

Do you have a question about the FIREWORKS 8-USING FIREWORKS and is the answer not in the manual?

Questions and answers

Summary of Contents for MACROMEDIA FIREWORKS 8-USING FIREWORKS

Page 1 Using Fireworks...
Page 2 If you access a third-party website mentioned in this guide, then you do so at your own risk. Macromedia provides these links only as a convenience, and the inclusion of the link does not imply that Macromedia endorses or accepts any responsibility for the content on those third-party sites.
Page 3: Table Of Contents
Contents Chapter 1: Introduction ........7 System requirements .
Page 4: Table Of Contents
Chapter 5: Working with Vector Objects ....111 Drawing vector objects ........112 Editing paths.
Page 5: Table Of Contents
Working with Macromedia Dreamweaver ..... . 374 Working with Macromedia Flash ......392 Working with Macromedia FreeHand MX .
Page 6: Table Of Contents
Chapter 16: Automating Repetitive Tasks ....421 Finding and replacing .........422 Batch processing .
Page 7: Chapter 1: Introduction
CHAPTER 1 Introduction Macromedia Fireworks 8 is the definitive solution for professional web graphics design and production. It is the first production environment to address and solve the special challenges facing web graphics designers and developers. You can use Fireworks to create, edit, and animate web graphics, add advanced interactivity, and optimize images in a professional environment.
Page 8 The installation program prompts you to enter the required information. If prompted, restart your computer. Registering Fireworks It’s a good idea to register your copy of Macromedia Fireworks, electronically or by mail. You can register electronically during the product activation process when you first launch Fireworks.
Page 9: What's New In Fireworks 8
Macintosh users should pay special attention to the format Fireworks uses to store the application and its default configuration files. For more information, see “Viewing package contents (Macintosh only)” on page 453. What’s new in Fireworks 8 Create and optimize images for the web with precise control in an intuitive, customizable environment.
Page 10 Integrated workflow More slicing options Polygon slices are inserted automatically when a selected object is a polygon path. See “Creating nonrectangular slices” on page 255. Recognize ActionScript Fireworks recognizes ActionScript color values when copied color values from Flash and pasted into Fireworks color value fields. Use the "Save as"...
Page 11 Lock objects Lock on a per-object basis in the Layers panel. See “Protecting layers and objects” on page 207. For more information on the new features, see the Fireworks page on the Macromedia website at www.macromedia.com/go/fireworks. What’s new in Fireworks 8...
Page 12: Guide To Instructional Media
Extending Fireworks includes information about writing JavaScript to automate Fireworks tasks. You can control every Fireworks command or setting using special JavaScript commands that Fireworks can interpret. The manual is available both in help and on the Macromedia website as a downloadable PDF. Chapter 1: Introduction...
Page 13: Chapter 2: Fireworks Basics
CHAPTER 2 Fireworks Basics Macromedia Fireworks 8 is an application for designing graphics for use on the web. Its innovative solutions tackle the major problems facing graphic designers and webmasters. Using the wide range of tools in Fireworks, you can create and edit both vector and bitmap graphics within a single file.
Page 14 HTML files containing HTML tables and JavaScript code—for use on the web. You also can export or save a type of file specific to another application, such as Photoshop or Macromedia Flash, if you want to continue working in the other application.
Page 15: About Vector And Bitmap Graphics
Slices and hotspots have drag-and-drop rollover handles that let you quickly assign swap image and rollover behaviors to graphics directly in the workspace. The Button Editor and Pop-up Menu Editor are convenient Fireworks features that help you build special interactive graphics for navigating websites.
Page 16 About vector graphics Vector graphics render images using lines and curves, called vectors, that include color and position information. For example, the image of a leaf may be defined by a series of points that describe the outline of the leaf. The color of the leaf is determined by the color of its outline (the stroke) and the color of the area enclosed by the outline (the fill) When you edit a vector graphic, you modify the properties of the lines and curves that describe its shape.
Page 17: Creating A New Document
When you edit a bitmap graphic, you modify pixels rather than lines and curves. These bitmap graphics are resolution-dependent, which means that the data describing the image is fixed to a grid of a particular size. Enlarging a bitmap graphic redistributes the pixels in the grid, often making the edges of the image appear ragged.
Page 18: Opening And Importing Files
In addition, you can import images from a digital camera or scanner. Fireworks preserves many, but not all JavaScript behaviors when you import a file from Macromedia Dreamweaver. If Fireworks supports a particular behavior, it recognizes that behavior and maintains it when you move a file back to Dreamweaver.
Page 19 Opening graphics created in other applications With Fireworks, you can open files created in other applications or file formats, including Photoshop, Macromedia FreeHand, Illustrator, uncompressed CorelDRAW, WBMP, EPS, JPEG, GIF, and animated GIF files. When you open a file format other than PNG using File > Open, you create a new Fireworks PNG document based on the file you open.
Page 20 You can open an animated GIF as you would open a normal GIF file. Each element of the GIF is placed as a separate image in its own Fireworks frame. You can convert the graphic to an animation symbol in Fireworks. EPS files Fireworks opens most EPS files, such as Photoshop EPS files, as flattened bitmap images, in which all objects are combined on a single layer.
Page 21 Because Fireworks exports HTML content in the form of an HTML table, it also determines the document layout for imported HTML based on HTML tables. An HTML file must contain at least one table for Fireworks to be able to reconstruct it. For more about HTML, “Exporting HTML”...
Page 22 Dragging images into Fireworks You can drag vector objects, bitmap images, or text into Fireworks from any application that supports dragging: FreeHand 7 or later Flash 3 or later Photoshop 4 or later Illustrator 7 or later Microsoft Office 97 or later Microsoft Internet Explorer 3 or later Netscape Navigator 3 or later CorelDRAW 7 or later...
Page 23 Location of pasted objects When you paste an object into Fireworks, the placement of the pasted object depends on what is selected: If at least one object on a single layer is selected, the pasted object is placed in front of—or stacked directly above—the selected object on the same layer.
Page 24 Importing PNG files You can import Fireworks PNG files into the current layer of the active Fireworks document. Any hotspot objects and slice objects are placed on the document’s Web Layer. For more information about slices and web objects, see “Viewing and displaying slices and slice guides”...
Page 25 To direct Fireworks to Photoshop Acquire plug-ins: In Fireworks, select Edit > Preferences. On Mac OS X, select Fireworks > Preferences. Click the Folders tab. Select Photoshop Plug-Ins. Click Browse if the Select the Photoshop Plug-ins Folder (Windows) or Choose a Folder (Macintosh) dialog box doesn’t automatically open.
Page 26: Saving Fireworks Files
To import an image from a scanner (Macintosh): Connect the scanner to your computer. Install the software that accompanies the scanner if you have not already done so. In Fireworks, select File > Acquire, and then select either Twain Acquire or Twain Select. For most T WAIN modules or Photoshop Acquire plug-ins, additional dialog boxes prompt you to set other options.
Page 27 Saving Fireworks PNG files When you create a new document or open an existing Fireworks PNG file, the document’s filename has the extension .png. The file displayed in the Fireworks document window is your source file, or working file. Using a Fireworks PNG file as your source file has the following advantages: The source PNG file is always editable.
Page 28 To save in an existing GIF, JPEG, TIF, BMP, or other file format listed above: Select File > Save. If you made modifications to the document that aren’t editable in the file’s original format, a notification appears in the Save dialog box. Noneditable modifications include adding new objects, masks, and Live Filters, as well as adjusting opacity, applying blend modes, and saving pixel selections.
Page 29: The Fireworks Work Environment
The Fireworks work environment When you open a document in Fireworks for the first time, Fireworks activates the work environment, including the Tools panel, Property inspector, menus, and other panels. The Tools panel, on the left of the screen, contains labeled categories, including bitmap, vector, and web tool groups.
Page 30 To disable the Start page: Run Fireworks without opening a document. The Start page is displayed. Click Don’t Show Again. Using the Tools panel The Tools panel is organized into six categories: Select, Bitmap, Vector, Web, Colors, and View. Changing tool options When you select a tool, the Property inspector displays tool options.
Page 31 To display tool options in the Property inspector for a tool that you are already using: Select Select > Deselect to deselect all objects. For information about specific tool options, see the sections that introduce the various tools throughout Using Fireworks or Fireworks Help. Selecting a tool from a tool group A small triangle in the lower right corner of a tool in the Tools panel indicates that it is part of a tool group.
Page 32 The Property inspector can be open at half height, displaying two rows of properties, or at full height, displaying four rows. You can also fully collapse the Property inspector while leaving it in the workspace. Most procedures in Using Fireworks assume that the Property inspector is displayed at full height.
Page 33 Using panels Panels are floating controls that help you edit aspects of a selected object or elements of the document. Panels let you work on frames, layers, symbols, color swatches, and more. Each panel is draggable, so you can group panels together in custom arrangements. Some panels may be grouped together by default, while others are not.
Page 34 The URL panel lets you create libraries containing frequently used URLs. The Color Mixer panel lets you create new colors to add to the current document’s color palette or to apply to selected objects. The Swatches panel manages the current document’s color palette. The Info panel provides information about the dimensions of selected objects and the exact coordinates of the pointer as you move it across the canvas.
Page 35 To dock a panel in a panel group: Select the name of a panel group from the Group With submenu of the panel group’s Options menu. (The Group With command’s name changes depending on the name of the active panel.) To rename a panel group: Click the icon in the upper right of the panel group and select Rename Panel Group from the Options menu.
Page 36 Click the small arrow that separates the docked panel area from the rest of the application window. Click to show or hide docked panel area Using the panel group or panel Options menu Each panel group and panel has an Options menu listing a range of choices specific to the active panel or panel group.
Page 37 Select Window > Workspace Layouts and select a workspace layout from the submenu. About the Quick Export button The Quick Export button lets you export your Fireworks files to a number of Macromedia applications, including Dreamweaver, Flash, Director, and FreeHand. In addition, you can export your files to Photoshop, FrontPage, Adobe GoLive, and Illustrator, or you can preview your files in the browser of your choice.
Page 38 To dock a toolbar: Drag the toolbar onto a docking area at the top, bottom, left, or right of the application window until the placement preview rectangle appears. Navigating and viewing a document You can control your document’s magnification, its number of views, and its display mode. In addition, you can easily pan the view of a document, which is helpful if you zoom in and can no longer see the entire canvas.
Page 39 Zooming and panning Fireworks lets you zoom in or out at a preset or user-defined magnification percentage. Zoom tool Zoom pop-up menu Hand tool To zoom in using preset increments, do one of the following: Select the Zoom tool and click to specify the new center point inside the document window.
Page 40 To zoom out using preset increments, do one of the following: Select the Zoom tool and Alt-click (Windows) or Option-click (Macintosh) inside the document window. Each click reduces the view to the next preset percentage. Select a zoom setting from the Set Magnification pop-up menu at the bottom of the document window.
Page 41 Full Screen mode is a maximized document window view set against a black background with no menus, toolbars, or title bars visible. To change view modes, do one of the following: To change to Full Screen with Menus mode, click the Full Screen with Menus Mode button in the Tools panel.
Page 42 To control document redraw: Select View > Full Display. When Full Display is selected, Fireworks displays the document in all available colors with full detail. When Full Display is deselected, Fireworks displays paths as 1 pixel wide with no fill and displays images with an X through them. Display and draft modes To display a document as it would appear on a different platform: In Windows, select View >...
Page 43 Click an Anchor button to specify which sides of the canvas Fireworks will add to or delete from, and click OK. By default, the center anchor is selected, indicating that changes to the size of the canvas are made on all sides. To change the canvas color from the Modify menu: Select Modify >...
Page 44 In the Pixel Dimensions text boxes, enter new horizontal and vertical dimensions. You can change the units of measure. If Resample Image is deselected, you can change the resolution or print size but not pixel dimensions. In the Print Size text boxes, enter horizontal and vertical dimensions for the printed image. In the Resolution text box, enter a new resolution for the image.
Page 45 Resampling up, or adding pixels to make the image larger, may result in quality loss because the pixels being added do not always correspond to the original image. Downsampling , or removing pixels to make the image smaller, always causes quality loss because pixels are discarded to resize the image.
Page 46 Cropping a document By cropping, you can delete unwanted portions of a document. The canvas is resized to fit an area that you define. By default, cropping deletes objects that extend beyond the canvas boundaries. You can retain objects outside the canvas by changing a preference before cropping. To crop a document: Select the Crop tool from the Tools panel or select Edit >...
Page 47 Using rulers, guides, and the grid You can use rulers and guides to lay out objects as precisely as possible and to help you draw. You can place guides in the document and snap objects to those guides or turn on the Fireworks grid and snap objects to the grid.
Page 48 Using guides Guides are lines that you drag onto the document canvas from the rulers. They serve as drawing aids to help you place and align objects. You can use guides to mark important parts of your document, such as the margins, the document center point, and areas where you want to work precisely.
Page 49 Using the grid The Fireworks grid displays a system of horizontal and vertical lines on the canvas. The grid is useful for placing objects precisely. In addition, you can view, edit, resize, and change the color of the grid. The grid does not reside on a layer, nor is it exported with a document. It is merely a design tool.
Page 50 To undo and redo actions: Select Window > History to open the History panel. Drag the Undo marker up or down. To repeat actions: Perform the actions. Do one of the following to highlight the actions to be repeated in the History panel: Click an action to highlight it.
Page 51: Chapter 3: Selecting And Transforming Objects
Selecting and Transforming Objects As you work in Macromedia Fireworks 8, 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.
Page 52 For information about selecting specific areas of pixels in a bitmap image, see “Selecting pixels” on page 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.
Page 53 Do one of the following: To modify an object, drag one of its points or selection handles. To move the entire object, drag anywhere in the object except a point or selection handle. 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.
Page 54 Modifying a selection After you select a single object, you can add objects to the selection and deselect objects that are selected. Using a single command, you can select or deselect everything on every layer in a document. You can also hide the selection path so that you can edit a selected object while viewing it as it will appear on the web or in print.
Page 55 To show all objects: Select View > Show All. To hide objects whether they are selected or not, you can click or drag along the Eye column in the Layers panel. Selecting pixels You can edit pixels over an entire canvas or select one of the selection tools to constrain your editing to a particular area of an image: The Marquee tool selects a rectangular area of pixels in an image.
Page 56 When using a selection tool, you can set the Feather option before creating a selection, or you can feather existing selections by selecting the Live marquee box. You can also feather existing selections using the Feather command in the Select menu. For more information, see “Feathering a pixel selection”...
Page 57 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: Select the Polygon Lasso tool.
Page 58 Click the area of color you want to select. 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: Select an area of color with a marquee or lasso tool, or with the Magic Wand tool. Select Select >...
Page 59 Removing a selection marquee You can remove a selection marquee without affecting the document. To remove a marquee, do one of the following: Draw another marquee. Click outside the current selection with a marquee or lasso tool. Press Escape. Select Select > Deselect. 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.
Page 60 Adding to a pixel selection After drawing a selection marquee with any bitmap selection tool, you can add to the selection with the same tool or another bitmap selection tool. To add to an existing pixel selection: Select any bitmap selection tool. Hold down Shift and draw additional selection marquees.
Page 61 To create or replace a pixel selection on a selected bitmap using the opacity of an object: In the Layers panel, position the pointer over the thumbnail of the object you want to use to create the pixel selection. Hold down Control (Windows) or Command (Macintosh). The pointer changes to indicate you are about to select the alpha channel, or the opaque area, of the object.
Page 62 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: Make a pixel selection using any bitmap selection tool.
Page 63 To contract the border of a marquee: After drawing the marquee, select Select > Contract Marquee. Enter the number of pixels by which you want to contract the border of the marquee, and click OK. Selecting an area around an existing marquee You can create an additional marquee to frame an existing marquee at a specified width.
Page 64 To convert a marquee to a path After drawing a marquee, select Select > Convert Marquee to Path. The document’s current stroke and fill attributes are applied to the new path. Transferring a marquee selection You can transfer a marquee selection from one bitmap to another bitmap object on the same layer or one on a different layer.
Page 65 If the Selection box displays the word New, the New selection will be enabled in the Operation section of the Save Selection dialog box. If a previously saved selection is selected in the Selection box, then all of the following options will be enabled in the Operation section.
Page 66 “Subtract from selection” subtracts the active selection from the one specified in the Document and Selection boxes. “Intersect with selection” intersects the active selection with the one specified in the Document and Selection boxes. Select an option in the Operation section, and then click OK Repeat this process for each of the marquee selections that you want to restore.
Page 67 To move a floating selection, do one of the following: Drag the floating selection with the Pointer tool or any bitmap selection tool. If a nonselection bitmap tool is active, hold down Control (Windows) or Command (Macintosh) and drag the floating selection. Use the arrow keys or Shift+arrow keys.
Page 68: Editing Selected Objects
Editing selected objects Fireworks gives you a number of ways to edit selected objects: you can move objects on the canvas or from application to application, you can replicate objects with the Clone and Duplicate commands, or you can remove objects from the workspace altogether. To move a selection, do one of the following: Drag it with the Pointer, Subselection, or Select Behind tool.
Page 69: Transforming And Distorting Selected Objects And Selections
To clone a selection: Select Edit > Clone. The clone of the selection is stacked precisely in front of the original and becomes the selected object. To move a selected clone away from the original with pixel-by-pixel precision, use the arrow keys or Shift+arrow keys. This is a convenient way to maintain a specific distance between clones or maintain the vertical or horizontal alignment of the clones.
Page 70 When you select any transformation tool or Transform menu command, Fireworks displays transform handles around selected objects. Transform handles Center point Original object Object rotated, scaled, skewed, distorted, and flipped vertically and horizontally To transform selected objects using the transform handles: Select a transformation tool.
Page 71 Resizing (scaling) objects Scaling an object enlarges or reduces it horizontally, vertically, or in both directions. To scale a selected object: Do one of the following to display the transform handles: Select the Scale tool. Select Modify > Transform > Scale. Drag the transform handles: To scale the object both horizontally and vertically, drag a corner handle.
Page 72 Drag to rotate the object. To constrain rotation to 15° increments relative to the horizon, Shift-drag the pointer. Double-click inside the window or press Enter to apply your changes. To relocate the axis of rotation: Drag the center point away from the center. To reset the axis of rotation to the center of the selection, do one of the following: Double-click the center point...
Page 73 Distorting objects You change the size and proportions of an object by dragging a selection handle with the Distort tool. To distort a selected object: Do one of the following to display the transform handles: Select the Distort tool. Select Modify > Transform > Distort. Drag a handle to distort the object.
Page 74: Organizing Objects
Viewing transformation information in the Info panel The Info panel lets you view numerical transformation information for the currently selected object. The information updates as you edit the object. For scaling and free transformations, the Info panel shows the width (W) and height (H) of the original object before transformation and the percentage of increase or decrease in width and height during the transformation.
Page 75 Selecting objects within groups To work with individual objects within a group, you can either ungroup the objects or use the Subselection tool to select individual objects while leaving the group intact. Subselection tool Modifying the attributes of a subselected object changes only the subselected object, not the entire group.
Page 76 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. You can change the order of layers by dragging the layer in the Layers panel to a new position.
Page 77 To evenly distribute the widths or heights of three or more selected objects: Select Modify > Align > Distribute Widths or Modify > Align > Distribute Heights. 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.
Page 78 Chapter 3: Selecting and Transforming Objects...
Page 79: Chapter 4: Working With Bitmaps
They are sometimes referred to as raster images. Macromedia Fireworks 8 combines the functionality of photo-editing, vector-drawing, and painting applications. You can create bitmap images by drawing and painting with bitmap tools, by converting vector objects to bitmap images, or by opening or importing images.
Page 80: Creating Bitmap Objects
Working with bitmaps The Bitmap section of the Tools panel contains bitmap selection and editing tools. To edit the pixels of a bitmap in your document, you can select a tool from the Bitmap section. Unlike in previous versions of Fireworks, you do not need to deliberately switch between bitmap mode and vector mode, but you can still work with bitmaps, vector objects, and text.
Page 81 To create an empty bitmap object, do one of the following: Click the New Bitmap Image button in the Layers panel. Select Edit > Insert > Empty Bitmap. Draw a selection marquee, starting in a blank area of the canvas, and fill it. For more information, see “Creating pixel selection marquees”...
Page 82: Accessing Common Photo Editing Tools All In One Place
Accessing common photo editing tools all in one place To make it easy for you get started editing photos as quickly as possible, Fireworks has assembled the most commonly used tools for photo editing all in one place. The Image Editing panel contains the following tools: Red-eye Removal, Crop, Rotate, Blur, Sharpen, Dodge, and Burn.
Page 83: Drawing, Painting, And Editing Bitmap Objects
Drawing, painting, and editing bitmap objects The Bitmap section of the Tools panel contains tools for selecting, drawing, painting, and editing pixels in a bitmap image. Drawing bitmap objects You can use the Pencil tool to draw 1-pixel lines, either freehand lines or constrained, straight lines, much as you use a real pencil, with or without a ruler, to draw hard-edged lines.
Page 84 To change the color of pixels to the color in the Fill Color box: Select the Paint Bucket tool. Select a color in the Fill Color box. Set the tolerance value in the Property inspector. 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.
Page 85 Select the Eyedropper tool from the Colors section of the Tools panel. Set the Color Averaging Sample setting in the Property inspector: 1-pixel creates a stroke or fill color from a single pixel. 3x3 pixels creates a stroke or fill color from the average of color values in a 3-by-3-pixel area.
Page 86: Retouching Bitmaps
Feathering pixel selections Feathering blurs the edges of a pixel selection and helps the selected area blend with the surrounding pixels. Feathering is useful when you copy a selection and paste it onto another background. To feather the edges of a pixel selection as you make a pixel selection: Select a bitmap selection tool from the Tools panel.
Page 87 The Sharpen tool sharpens areas in an image. The Dodge tool lightens parts of an image. The Burn tool darkens parts of an image. The Red-eye Removal tool reduces the appearance of red eye in photos The Replace Color tool paints over one color with another color Cloning pixels The Rubber Stamp tool clones an area of a bitmap image so that you can stamp it elsewhere in the image.
Page 88 To set Rubber Stamp tool options: Select the Rubber Stamp tool. Select from among the following options in the Property inspector: Size 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.
Page 89 To smudge colors in an image: Select the Smudge tool. Set the tool options in the Property inspector: Size 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.
Page 90 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 quickly paints red areas of a photograph only, replacing reddish colors with grays and blacks. Original photograph;...
Page 91 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 Fireworks provides two different ways to replace one color with another. You can replace a color that you’ve specified in the color swatch, or you can replace a color by using the Replace Color tool directly on the image.
Page 92 To replace one color with another by selecting a color on the image: Select the Replace Color tool from its pop-up menu. In the From box in the Property inspector, click Image. Click the To color well in the Property inspector to select the color probe, then select a color from the pop-up menu.
Page 93: Adjusting Bitmap Color And Tone
If you prefer to apply filters in an irreversible, permanent way, you can select them from the Filters menu. However, Macromedia recommends that you use filters as Live Filters whenever possible.
Page 94 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 Filter to an area defined by a bitmap selection marquee: Select a bitmap selection tool and draw a selection marquee. Select Edit >...
Page 95 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.
Page 96 To adjust highlights, midtones, and shadows: Select the bitmap image. Do one of the following to open the Levels dialog box: In the Property inspector, click the Add Live Filters button, and then select Adjust Color > Levels from the Filters pop-up menu. Select Filters >...
Page 97 Drag the Output Levels sliders to adjust the contrast values in the image: The right slider adjusts the highlights using values from 255 to 0. The left slider adjusts the shadows using values from 0 to 255. As you move the sliders, the values are automatically entered in the Output Levels boxes. Using Auto Levels You can use Auto Levels to have Fireworks make tonal range adjustments for you.
Page 98 To adjust a specific point in the tonal range: Select the image. Do one of the following to open the Curves dialog box: In the Property inspector, click the Plus (+) button beside the Filters label, and then select Adjust Color > Curves from the Filters pop-up menu. If the Property inspector is partially minimized, click the Add Filters button instead of the Plus button.
Page 99 Click a point on the grid’s diagonal line and drag it to a new position to adjust the curve. Each point on the curve has its own Input and Output values. When you drag a point, the Input and Output values update automatically. The curve displays brightness values of 0 to 255, with 0 representing the shadows.
Page 100 Adjusting brightness and contrast The Brightness/Contrast feature modifies the contrast or brightness of pixels in an image. This affects the highlights, shadows, and midtones of an image. You typically use Brightness/ Contrast when correcting images that are too dark or too light. Original;...
Page 101 Applying the Color Fill Live Filter You can use the Color Fill Live Filter to change the color of objects quickly, either by replacing the pixels entirely with a given color or by blending a color into an existing object. When you blend colors, the color is added on top of the object.
Page 102 To adjust the hue or saturation: Select the image. Do one of the following to open the Hue/Saturation dialog box: In the Property inspector, click the Add Live Filters button, and then select Adjust Color > Hue/Saturation from the Filters pop-up menu. Select Filters >...
Page 103 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).
Page 104: Blurring And Sharpening Bitmaps
To invert colors: Select the image. Do one of the following: In the Property inspector, click the Add Live Filters button, and then select Adjust Color > Invert from the Filters pop-up menu. Select Filters > Adjust Color > Invert. Applying a filter from the Filters menu is destructive;...
Page 105 To blur an image using Gaussian Blur: Select the image. Do one of the following to open the Gaussian Blur dialog box: In the Property inspector, click the Add Live Filters button, and then select Blur > Gaussian Blur from the Filters pop-up menu. Select Filters >...
Page 106 To blur an image using Zoom Blur: Select the image. Do one of the following to open the Zoom Blur dialog box: In the Property inspector, click the Add Live Filters button, and select Blur > Zoom Blur from the Filters pop-up menu. Select Filters >...
Page 107 Select Filters > Other > Find Edges. Applying a filter from the Filters menu is destructive; that is, it cannot be undone except when Edit > Undo is an option. To maintain the ability to adjust, turn off, or remove this filter, apply it as a Live Filter, as described in the first bulleted option in this step.
Page 108 To sharpen an image using a sharpen option: Select the image. Do one of the following to select a sharpen option: In the Property inspector, click the Add Live Filters button, and then select Sharpen > Sharpen or Sharpen More from the Filters pop-up menu. Select Filters >...
Page 109: Adding Noise To An Image
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. Instead, the colors you see consist of pixels of many different colors. In image editing, “noise” refers to these random color variations in the pixels that make up an image.
Page 110 Drag the Amount slider to set the amount of noise. Values range from 1 to 400. An increase in amount results in an image with more randomly placed pixels. Select the Color check box to apply color noise. Leave the check box unchecked to apply monochrome noise only.
Page 111: Chapter 5: Working With Vector Objects
Macromedia Fireworks 8 has many tools for drawing and editing vector objects using a variety of techniques. With the basic shape tools, you can quickly draw straight lines, circles and ellipses, squares and rectangles, stars, and any equilateral polygon with 3 to 360 sides.
Page 112 Drawing vector objects Fireworks has many tools for drawing vector objects. With these you can draw basic shapes, freeform paths, and complex shapes by plotting points one by one. You can also draw Auto Shapes, which are vector object groups that have special controls for adjusting their attributes. Drawing basic lines, rectangles, and ellipses You can use the Line, Rectangle, or Ellipse tool to draw basic shapes quickly.
Page 113 To resize a selected line, rectangle, or ellipse, do one of the following: Enter new width (W) or height (H) values in the Property inspector or the Info panel. In the Select section of the Tools panel, select the Scale tool and drag a corner transform handle.
Page 114 To draw a polygon: In the Vector section of the Tools panel, select the Polygon tool, which is one of the basic shape drawing tools. In the Property inspector, do one of the following to specify the number of sides for the polygon: Use the Sides pop-up slider to select 3 to 25 sides.
Page 115 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 Although each Auto Shape tool in the Tools panel uses the same easy drawing method, the editable attributes for each Auto Shape are different.
Page 116 Add Shadow adds a shadow beneath the selected object based on the dimensions of that object. The shadow is actually an Auto Shape and, like all Auto Shapes, contains control points that you can use to manipulate its appearance. For example, you can Shift-drag the Direction control point to constrain its movement to a 45-degree angle.
Page 117 You can also insert another Auto Shape into your document directly from the Auto Shape Properties panel. This panel only supports Auto Shapes that appear in the Tools panel. It does not support third-party Auto Shapes or those in the Shapes panel (Window > Auto Shapes). To change properties for your Auto Shape: Insert an Auto Shape into your document.
Page 118 To adjust the width of an arrow tail: Drag the body width control point of a selected arrow. Adjusting bent arrow Auto Shapes Bent arrows have five control points. There are control points for adjusting the flare of the arrowhead, the length of the arrowhead tip, the length of the arrow tail, the width of the arrow tail, and the roundness of the arrow’s bend.
Page 119 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.
Page 120 To add sections to a selected doughnut: Alt-drag (Windows) or Option-drag (Macintosh) an add/divide sector control point on the outer perimeter of the shape. To remove a section from a selected doughnut: Drag the add/divide sector control point on the outer perimeter of the shape to define the portion of the shape that you want to remain on the canvas.
Page 121 Adjusting smart polygon Auto Shapes Smart Polygons initially appear as pentagons with four control points. There are control points for resizing and rotating, adding or removing polygon segments, increasing or decreasing the number of polygon sides, and adding an inner polygon to the shape to create a ring.
Page 122 Adjusting star Auto Shapes Stars initially have five control points. There are control points for adding or removing points, for adjusting the inner and outer angles of the points, and for adjusting the roundness of the peaks and valleys. To change the number of sides on a selected star: Drag the Points control point.
Page 123 To add new Auto Shapes to Fireworks: Select Window > Auto Shapes to display the Shapes panel, if it’s not already visible. From the Shapes panel’s Options menu, select Get More Auto Shapes. Fireworks connects to the web and navigates to the Fireworks Exchange website. Follow the onscreen instructions to select new Auto Shapes and add them to Fireworks.
Page 124 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: From the Pen tool pop-up menu, select the Vector Path tool.
Page 125 Drawing straight path segments Drawing straight line segments with the Pen tool is a simple matter of clicking to place the points. Each click with the Pen tool plots a corner point. To draw a path with straight line segments: Select the Pen tool in the Tools panel.
Page 126 Drawing curved path segments To draw curved path segments, you click and drag as you plot points. As you draw, the current point shows point handles. Whether drawn with the Pen tool or with another Fireworks drawing tool, all points on all vector objects have point handles. These handles are visible only on curve points, however.
Page 127 Adjusting the shape of a straight path segment You can lengthen, shorten, or change the position of a straight path segment by moving its points. To change a straight path segment: Select the path with the Pointer or Subselection tool. Click a point with the Subselection tool to select it.
Page 128 For example, if you drag the left point handle downward, the right point handle goes up. Alt-drag a handle to move it independently Converting path segments to straight or curved Straight path segments are intersected by corner points. Curved path segments contain curve points.
Page 129 To convert a corner point to a curve point: Select the Pen tool in the Tools panel. Click a corner point on a selected path and drag away from it. The handles extend, curving the adjacent segments. To edit the point’s handles, select the Subselection tool or press Control (Windows) or Command (Mac) while the Pen tool is active.
Page 130 To select specific points on a selected path: Select the Subselection tool. Do one of the following: Click a point, or hold down Shift and click multiple points one by one. Drag around the points to be selected. To display a curve point’s handles: Click the point with the Subselection tool.
Page 131 To adjust the handle of a corner point: Select the Subselection tool in the Tools panel. Select a corner point. Alt-drag (Windows) or Option-drag (Macintosh) the point to display its handle and bend the adjacent segment. Dragging a corner point handle with the Subselection tool to edit the adjacent path segment Inserting and deleting points on a path You can add points to a path and delete points from a path.
Page 132: Editing Paths
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 filter attributes become the attributes of the newly merged path. To merge two open paths: Select the Pen tool in the Tools panel.
Page 133 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.
Page 134 When the pointer is directly over the path, you can pull the path. When the pointer is not directly over the path, you can push the path. You can change the size of the push or pull pointer. The Freeform tool also responds to pressure from a Wacom or other compatible tablet. To pull a selected path: Select the Freeform tool in the Tools panel.
Page 135 Distorting paths You can use the Reshape Area tool to pull the area of all selected paths within the outer circle of the reshape area pointer. The pointer’s inner circle is the boundary of the tool at full strength. The area between the inner and outer circle reshapes paths at less than full strength.
Page 136 Redrawing paths You can use the Redraw Path tool to redraw or extend a segment of a selected path while retaining the path’s stroke, fill, and effect characteristics. To redraw or extend a segment of a selected path: From the Pen tool pop-up menu, select the Redraw Path tool. If desired, change the precision level of the Redraw Path tool by selecting a number from the pop-up menu in the Precision box of the Property inspector.
Page 137 To cut a selected path: Select the Knife tool in the Tools panel. Using the eraser on Wacom pens automatically selects the Knife tool. Do one of the following: Drag the pointer across the path. Click on the path. 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.
Page 138 To combine selected closed paths as one path enclosing the entire area of the original paths: Select Modify > Combine Paths > Union. The resulting path assumes the stroke and fill attributes of the object that is placed farthest back. Converting a path to a marquee selection You can convert a vector shape to a bitmap selection, and then use the bitmap tools to edit the new bitmap.
Page 139 Removing portions of a path object You can remove portions of a selected path object as defined by the overlapping portions of another selected path object arranged in front of it. To remove portions of a path object: Select the path object that defines the area to be removed. Select Modify >...
Page 140 Simplifying a path You can remove points from a path while maintaining its overall shape. The Simplify command removes redundant points on your path by an amount you specify. You might want to use Simplify if you have a straight line that contains more than two points, for example.
Page 141 If you chose miter, set the miter limit, the point at which a miter corner automatically becomes a beveled corner. The miter limit is the ratio of miter corner length to stroke width. Select an end cap option: butt, square, or round. Then click OK. A closed path in the shape of the original and with the same stroke and fill attributes replaces the original path.
Page 142 142 Chapter 5: Working with Vector Objects...
Page 143: Chapter 6: Using Text
CHAPTER 6 Using Text Macromedia Fireworks 8 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, filters, and styles makes text a lively element of your graphic designs.
Page 144 Entering text You can enter, format, and edit text in your graphics using the Text tool and the options in the Property inspector. Text tool If the Property inspector is minimized, click the expander arrow in the lower right corner to see all text properties.
Page 145 Creating text blocks All text in a Fireworks document appears inside a rectangle with handles called a text block. To enter text: Select the Text tool. The Property inspector displays options for the Text tool. Select color, font, size, spacing, and other text characteristics. Do one of the following: Click in your document where you want the text block to begin.
Page 146 To move a text block while you drag to create it: While holding down the mouse button, press and hold down the Spacebar, then drag the text block to another location on the canvas. Release the Spacebar to continue drawing the text block. Using auto-sizing and fixed-width text blocks Fireworks has both auto-sizing text blocks and fixed-width text blocks.
Page 147: Editing Text
Editing text Within a text block, you can vary all aspects of text, including size, font, spacing, leading, and baseline shift. When you edit text, Fireworks redraws its stroke, fill, and filter attributes accordingly. You can change a text block’s attributes using the Property inspector. If the Property inspector is minimized, click the expander arrow in the lower right corner to see all text properties.
Page 148 Do one of the following to apply your changes: Click outside the text block. Select another tool in the Tools panel. Press Escape. Choosing a font, size, and text style You use the Property inspector to change the font, size, and style attributes of the text in a text block.
Page 149 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.
Page 150 In the Tools panel, click the Fill Color box and select a color from the color pop-up window, or sample a color from anywhere on the screen using the eyedropper pointer while the Fill Color box pop-up window is open. In the Tools panel, click the icon next to the Fill Color box, select the Eyedropper tool, and then click to sample a color anywhere in any open document.
Page 151 To set kerning: Do one of the following to select the text you want to kern: Click between two characters with the Text tool. Use the Text tool to highlight the characters you want to change. Use the Pointer tool to select an entire text block. Shift-click to select multiple text blocks.
Page 152 To set the leading of selected text in the Property inspector: In the Property inspector, drag the Leading pop-up slider or enter a value in the text box. The default is 100%. To change the leading unit type, select % or px (pixels) from the Leading Units pop-up menu.
Page 153 To set the orientation of a selected text block: Click the Text Orientation button in the Property inspector. Select an orientation option from the pop-up menu: Horizontal Left to Right is the default setting for text in Fireworks for most languages. It orients text horizontally and displays characters from left to right.
Page 154 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: Select the text. Click an alignment button in the Property inspector. Indenting text You can indent the first line of a paragraph using the Property inspector.
Page 155 To set the space after selected paragraphs: In the Property inspector, drag the Space After Paragraph pop-up slider or enter a value in the text box. 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.
Page 156 Expanding and contracting character width You can expand or contract the character width of horizontal text using the Horizontal Scale option in the Property inspector. Horizontal scale is measured in percentage values. 100% is the default. Horizontal Scale option in the Property inspector If the Property inspector is minimized, click the expander arrow in the lower right corner to see all properties.
Page 157: Applying Strokes, Fills, And Filters To Text
Applying strokes, fills, and filters to text You can apply strokes, fills, and filters to text in a selected text block as you would to any other object. You can apply any style in the Styles panel to text, even if it is not a text style. You can also create a new style by saving text attributes.
Page 158: Attaching Text To A Path
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. A path to which you attach text temporarily loses its stroke, fill, and filter attributes. Any stroke, fill, and filter attributes you apply subsequently are applied to the text, not the path.
Page 159 To edit the shape of the path: Using the Subselection tool, select the text-on-a-path object. The path points are now subselected and ready to be edited. Drag the points to reshape the path. You can also use the Beizer Pen tool to edit the path. The text will automatically flow correctly around the path as points are edited.
Page 160: Transforming Text
To change the orientation of text on a selected path: Select Text > Orientation and select an orientation. Text rotated around a path Text oriented vertically on a path Text skewed vertically around a path Text skewed horizontally around a path To reverse the direction of text on a selected path: Select Text >...
Page 161: Converting Text To Paths
Converting text to paths You can convert text to paths and then edit the shapes of the letters as you would any vector object. All vector-editing tools are available after you convert text to paths. However, you can no longer edit it as text. To convert selected text to paths: Select Text >...
Page 162 To open or import a text file: Select File > Open or File > Import. Navigate to the folder containing the file. Select the file and click OK. Photoshop text You can open or import a Photoshop file containing text. You can also copy text from a Photoshop file and paste into the current Fireworks document or drag it from the Photoshop file to the current document.
Page 163: Checking Spelling
If you don’t select a language, Fireworks prompts you to select a language dictionary every time you spell-check a document. The Macromedia.tlx option is always selected at the top of the Dictionary list. For more information about this option, see “Customizing spell checking”...
Page 164 Select the desired options in the Spelling Setup dialog box: Select one or more language dictionaries. The Macromedia.tlx option is always selected at the top of the dictionary list. This is the file that contains your custom spelling dictionary. Browse for a custom dictionary by clicking the folder icon beside the Personal Dictionary Path text box.
Page 165: Using The Text Editor
Using the Text Editor In Fireworks 4 and previous versions, the Text Editor was used to create and edit text. All text- editing and formatting options found in the Text Editor are now located in the Property inspector. However, you still have access to the Text Editor through the Text menu. The Text Editor is useful for working with text that might be difficult to edit onscreen, such as large text blocks, text attached to a path, or text with hard-to-read fonts and sizes.
Page 166 166 Chapter 6: Using Text...
Page 167: Chapter 7: Applying Color, Strokes, And Fills
Applying Color, Strokes, and Fills Macromedia Fireworks 8 has a wide range of panels, tools, and options for organizing and selecting colors, and applying colors to bitmap images and vector objects. In the Swatches panel, you can select 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.
Page 168 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.
Page 169: Organizing Swatch Groups And Color Models
Organizing swatch groups and color models The Swatches panel and Color Mixer combine to form the Colors panel group. In the Swatches panel you can view, change, create, and edit swatch groups, as well as select stroke and fill colors. You can use the Color Mixer to select a color model, mix stroke and fill colors by dragging color value sliders or entering color values, and select stroke and fill colors directly from the color bar.
Page 170 Click Open. The color swatches in the swatch file replace the previous swatches. For information on creating a custom swatch group, see “Customizing the Swatches panel” on page 170 “Saving palettes” on page 343. To add swatches from an external color palette to the current swatches: Select Add Swatches from the Swatches panel Options menu.
Page 171 Move the tip of the eyedropper pointer to the open space after the last swatch in the Swatches panel. The eyedropper pointer becomes the paint bucket pointer. Click to add the swatch. When you select Snap to Web Safe in the Options menu of the color pop-up window, any non-websafe color you pick up with the eyedropper pointer is changed to the nearest websafe color.
Page 172 Creating colors in the Color Mixer In the Color Mixer, you can create colors by dragging sliders or entering values for each component of a color model such as RGB, Hexadecimal, or CMY. The color you create is applied to the active Stroke Color or Fill Color box. The Color Mixer also has a color bar displaying the range of colors in the current color model.
Page 173 Color model Mode of color expression Values of Cyan, Magenta, and Yellow, where each component has a value from 0 to 255. 0-0-0 is white and 255-255-255 is black. Grayscale A percentage of black. The single Black (K) component has a value from 0 to 100%, where 0 is white, 100 is black, and values in between are shades of gray.
Page 174 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: Click any color box. Select Windows OS or Mac OS from any color pop-up window Options menu.
Page 175 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. Web dithering can increase the size of the file.
Page 176: Using Color Boxes And Color Pop-Up Windows
Click outside the pop-up window to close it. Export the object as a GIF or PNG file with Index Transparency or Alpha Channel Transparency set. For more information on exporting files with transparency, see “Making areas transparent” on page 344. When you view the graphic in a web browser, the web page background shows through every other pixel of the transparent web dither fill, creating the appearance of transparency.
Page 177: Working With Strokes
To display a different swatch group in the color pop-up window: Select a swatch group from the color pop-up window Options menu. Selecting a swatch group here does not affect the Swatches panel. Sampling colors from a color pop-up window When a color pop-up window is open, the pointer becomes a special eyedropper that can take up colors from almost anywhere on the screen.
Page 178 To change stroke attributes of selected objects, do one of the following: Select from among the stroke attributes in the Property inspector. Select Stroke Options from the Stroke Options pop-up menu for more attributes. Click the Stroke Color box in the Tools panel and click Stroke Options. Select from among the stroke attributes in the Stroke Options pop-up window.
Page 179 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. The stroke preview at the bottom of each tab shows the current brush with the current settings.
Page 180 To set general brush stroke options: 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. To overlap brush strokes for dense strokes, select Build-up. To set the stroke texture, change the Texture option.
Page 181 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.
Page 182: Working With Fills
Creating stroke styles You can change specific stroke characteristics such as ink amount, tip shape, and tip sensitivity, and save the custom stroke as a style for reuse across many documents. To create custom strokes: Do one of the following: Click the Stroke Color box in the Tools panel and then click Stroke Options.
Page 183 To change the solid fill color of applicable vector drawing tools and the Paint Bucket tool: Select a vector drawing tool or the Paint Bucket tool. Do one of the following: Press Control+D (Windows) or Command+D (Macintosh) to deselect all objects, and then click the Fill Color box in the Property inspector to open the Fill Color pop-up window.
Page 184: Applying Gradient And Pattern Fills
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.
Page 185 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.
Page 186 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: Select an object that has a gradient fill or select a gradient fill from the Fill Options pop- up menu in the Property inspector.
Page 187 To set or change the transparency of an opacity swatch: Click the opacity swatch. Do one of the following: Drag the slider to the percentage of transparency, where 0 is completely transparent and 100 is completely opaque. Enter a numeric value from 0 to 100 to set the opacity value. The transparency checkerboard shows through the gradient in transparent areas.
Page 188 Transforming and distorting fills You can move, rotate, skew, and change the width of an object’s pattern or gradient fill. When you use the Pointer or Gradient tools to select an object with a pattern or gradient fill, a set of handles appears on or near the object.
Page 189 For a feathered edge, also select the number of pixels on each side of the edge that are to be feathered. The default is 10. You can select from 0 to 100. The higher the level, the more feathering occurs. About saving a custom gradient fill To save the current gradient settings as a custom gradient for use across many documents, you must create a style.
Page 190: Adding Texture To Strokes And Fills
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.
Page 191 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 select, 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.
Page 192 192 Chapter 7: Applying Color, Strokes, and Fills...
Page 193: Chapter 8: Using Live Filters
CHAPTER 8 Using Live Filters Macromedia Fireworks 8 Live Filters (formerly known as Live Effects) are enhancements that you can apply to vector objects, bitmap images, and text. Live Filters include bevels and embossing, solid shadows, drop shadows and glows, color correction, and blurring and sharpening.
Page 194 Applying Live Filters You can apply one or more Live Filters to selected objects using the Property inspector. Each time you add a new Live Filter to the object, it is added to the list in the Add Filters pop-up menu in the Property inspector.
Page 195 Experiment with the settings until you get the look you want. If you want to change the filter settings later, see “Editing Live Filters” on page 200. Width of bevel Contrast Softness Angle of bevel Button bevel preset Inner Bevel pop-up window To apply a Live Filter to selected objects: Click the Add Live Filters button in the Property inspector, then select a filter from the Add Filters pop-up menu.
Page 196 To enable or disable all Live Filters applied to an object: Click the Add Live Filters button in the Property inspector, then select Options > All On or Options > All Off from the pop-up menu. For information on permanently removing Live Filters, see “Removing Live Filters”...
Page 197 To apply an Emboss filter: Click the Add Live Filters button in the Property inspector, then select an emboss option from the pop-up menu: Bevel and Emboss > Inset Emboss. Bevel and Emboss > Raised Emboss. Edit the filter settings in the pop-up window. If you want the original object to appear in the embossed area, select Show Object.
Page 198 To apply a drop shadow or inner shadow: Click the Add Live Filters button in the Property inspector, then select a shadow option from the pop-up menu: Shadow and Glow > Drop Shadow. Shadow and Glow > Inner Shadow. Edit the filter settings in the pop-up window: Drag the Distance slider to set the distance of the shadow from the object.
Page 199 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 filter. You can remove a filter only if the Undo command is available.
Page 200: Editing Live Filters
Editing Live Filters When you click a Live Filter’s info button in the Property inspector, Fireworks opens a pop-up window with the current settings for the filter, which you can edit. To edit a Live Filter: In the Property inspector, click the info button next to the filter you want to edit. The corresponding pop-up window or dialog box opens.
Page 201 Creating custom Live Filters You can save a particular combination of settings for Live Filters by creating a custom Live Filter. All custom Live Filters appear in the Add Filters pop-up menu in the Property inspector and in the Styles panel. Custom Live Filters are actually styles with all property options deselected except for the Filter option.
Page 202 You can rename or delete a custom Live Filter as you would any other style in the Styles panel. For more information, see “Creating and deleting styles” on page 237 “Editing styles” on page 238. You cannot rename or delete a standard Fireworks filter. Saving Live Filters as commands You can save and reuse a filter by creating a command based on it.
Page 203 Layers, Masking, and Blending Layers divide a Macromedia Fireworks 8 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.
Page 204 Working with layers Each object in a document resides on a layer. You can either create layers before you draw or add layers as needed. The canvas is below all layers and is not itself a layer. For information on working with the canvas, see “Changing the canvas”...
Page 205 Opacity and blend mode controls are at the top of the Layers panel. For more information, “Adjusting opacity and applying blends” on page 233. Expand/Collapse Layer Show/Hide Layer Lock/Unlock Layer Active Layer Delete Layer New Bitmap Image Add Mask New/Duplicate Layer Activating layers When you click a layer or an object on a layer, that layer becomes the active layer.
Page 206 To add a layer, do one of the following: Click the New/Duplicate Layer button with no layer selected. Select Edit > Insert > Layer. Select 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.
Page 207 Organizing layers You can organize layers and objects in a document by naming them and rearranging them in the Layers panel. Objects can be moved within a layer or between layers. Moving layers and objects in the Layers panel changes the order in which objects appear on the canvas.
Page 208 You can protect objects in your document from inadvertent selection and editing. Locking an individual object prevents that object from being selected or edited. Locking a layer prevents all objects on that layer from being selected or edited. The Single Layer Editing feature protects objects on all but the active layer from unwanted selection or changes.
Page 209 Merging objects in the Layers panel If you work with bitmap objects, you may find that the Layers panel easily becomes cluttered. You can merge objects in the Layers panel, if the bottommost selected object is immediately above a bitmap object. Objects and bitmaps to be merged do not have to be adjacent in the Layers panel or reside on the same layer.
Page 210: Masking Images
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 11, “Slices, Rollovers, and Hotspots,”...
Page 211 You can also use multiple objects or grouped objects to create a mask. 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.
Page 212 About bitmap masks If you’re a 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.
Page 213 When you create a bitmap mask, the Property inspector displays information about how the mask is applied. If you select a bitmap tool when a bitmap mask is selected, the Property inspector displays the mask’s properties and options for the selected tool, simplifying the mask-editing process.
Page 214 To create a mask with the Paste as Mask command: Select the object you want to use as the mask. Shift-click to select multiple objects. If you use multiple objects as the mask, Fireworks always creates a vector mask, even if both objects are bitmaps. Position the selection so that it overlaps the object or group of objects to be masked.
Page 215 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.
Page 216 With vector masks, Paste Inside shows the fill and stroke of the mask object itself. A vector mask object’s fill and stroke are not visible by default with Paste as Mask. You can turn a vector mask’s fill and stroke on or off, however, using the Property inspector. For more information, see “Changing the way masks are applied”...
Page 217 Select 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.
Page 218 To create a bitmap mask using the Layers panel: Select the object you want to mask. Click the Add Mask button at the bottom of the Layers panel. Fireworks applies an empty mask to the selected object. The Layers panel displays a mask thumbnail representing the empty mask.
Page 219 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.
Page 220 To use Reveal Selection and Hide Selection commands to create a mask: Select the Magic Wand or any marquee or lasso tool from the Tools panel. Select pixels in a bitmap. Original image; pixels selected with the Magic Wand Do one of the following to create the mask: Select Modify >...
Page 221 About importing and exporting Photoshop layer masks In Photoshop, you can mask images using layer masks or grouped layers. Fireworks lets you successfully import images that employ layer masks without losing the ability to edit them. Layer masks are imported as bitmap masks. Fireworks masks can also be exported to Photoshop.
Page 222 To group objects to form a mask: Shift-click two or more overlapping objects. You can select objects from different layers. Select 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.
Page 223 Selecting masks and masked objects using mask thumbnails Masks and masked objects can be easily identified and selected using the thumbnails in the Layers panel. Thumbnails allow you to easily select and edit just the mask or the masked objects, without affecting the other objects. 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.
Page 224 To select a mask or masked object independently: Click the object on the canvas with the Subselection tool. When selected, masks have a yellow highlight and masked objects have a blue highlight. 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: Select the mask on the canvas using the Pointer tool.
Page 225 Click between the mask thumbnails in the Layers panel. This relinks the masked objects to the mask. To move a mask independently using its move handle: Select the mask on the canvas using the Pointer tool. Select 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: Select the mask on the canvas using the Pointer tool.
Page 226 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.
Page 227 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.
Page 228 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.
Page 229 Adding objects to a masked selection You can add more objects to an existing masked selection. To add masked objects to a masked selection: Select Edit > Cut to cut the selected object or objects you want to add. Select the thumbnail of the masked object in the Layers panel. Select Edit >...
Page 230: Blending And Transparency
Choose whether you want to apply or discard the effect of the mask on the masked objects before deleting the mask: Apply keeps the changes you have made to the object, but the mask is no longer editable. If the object being masked is a vector object, the mask and vector object are converted into a single bitmap image.
Page 231 Darken selects the darker of the blend color and base color to use as the result color. This replaces only pixels that are lighter than the blend color. Lighten selects the lighter of the blend color and base color to use as the result color. This replaces only pixels that are darker than the blend color.
Page 232 Blending mode examples Here are examples of some of the blending modes in Fireworks. For additional examples, see the following web site at www.pegtop.net/delphi/blendmodes/. Original image Normal Multiply Screen Darken Lighten Difference Saturation Color Luminosity Invert Tint Erase 232 Chapter 9: Layers, Masking, and Blending...
Page 233 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.
Page 234 234 Chapter 9: Layers, Masking, and Blending...
Page 235 Using Styles, Symbols, and URLs Macromedia Fireworks 8 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.
Page 236 Fireworks has many predefined styles. You can add, change, and remove styles. The Fireworks CD-ROM and the Macromedia web site have many more predefined styles that you can import into Fireworks. You can also export styles and share them with other Fireworks users or import styles from other Fireworks documents.
Page 237 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.
Page 238 To base a new style on an existing style: Apply the existing style to a selected object. Edit the attributes of the object. Save the attributes by creating a new style, as described in the previous procedure. To delete a style: Select a style from the Styles panel.
Page 239 To import styles: Select Import Styles from the Styles panel Options menu. Select 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.
Page 240: Using Symbols
Using symbols Fireworks has three types of symbols: graphic, animation, and button. Each has unique characteristics for its specific use. Instances are representations of a Fireworks symbol. When the symbol object (the original) is edited, the instances (copies) automatically change to reflect the modifications to the symbol.
Page 241 Placing instances You can place instances of a symbol in the current document. To place an instance: Drag a symbol from the Library panel to the current document. An instance of a symbol on the canvas Editing symbols You can modify a symbol in the Symbol Editor, which automatically updates all associated instances when you finish editing.
Page 242 To select all unused symbols in the Library panel: Choose Select Unused Items from the Library panel Options menu. To delete a symbol: In the Library panel, select the symbol. Select Delete from the Library panel Options menu. Click Delete. The symbol and all its instances are deleted. Editing instances When you double-click an instance to edit it, you’re actually editing the symbol itself in the Symbol Editor or Button Editor.
Page 243 You can import symbols from other libraries, including libraries containing symbols prepared in Macromedia Fireworks and libraries containing symbols that you or someone else previously exported. Conversely, if you have created symbols that you would like to reuse or share, you can export your own symbol libraries.
Page 244 To import one or more prepared symbols from a Fireworks symbol library: Open a Fireworks document. Select Edit > Libraries and select a library: Animations opens a collection of animated symbols. Bullets opens a collection of graphic symbols resembling various list bullets. Buttons opens a collection of 2-, 3-, and 4-state Fireworks button symbols.
Page 245 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.
Page 246: Working With Urls
In the document into which the symbol was imported, select the symbol in the Library panel. Select Update from the Library panel Options menu. To update all imported symbols, select all the symbols in the Library panel and select Update. Working with URLs Assigning a URL to a web object creates a link to a file such as a web page.
Page 247 URLs.htm and any new libraries you create are stored in the URL Libraries folder in the Macromedia/Fireworks 8 folder in your user-specific Application Data (Windows) or Application Support (Macintosh) folder. For information on locating this folder, see “Working with configuration files”...
Page 248 To simultaneously add a URL to the library while assigning it to a web object: Select the object. Do one of the following to enter the URL: Select Add URL from the URL panel Options menu, enter an absolute or relative URL, and click OK.
Page 249 Absolute URLs are complete URLs that include the server protocol, which is usually http:// for web pages. For example, http://www.macromedia.com/support/fireworks is the absolute URL for the Macromedia Fireworks Support web page. Absolute URLs remain accurate regardless of the location of the source document, but they do not link correctly if the target document is moved.
Page 250 250 Chapter 10: Using Styles, Symbols, and URLs...
Page 251 Slices, Rollovers, and Hotspots Slices are the basic building blocks for creating interactivity in Macromedia Fireworks 8. 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.
Page 252 Creating and editing slices Slicing cuts up a Fireworks document into smaller pieces and exports each piece as a separate file. Upon export, Fireworks also creates an HTML file containing table code to reassemble the graphic in a browser. Slicing cuts a document into multiple pieces, which are exported as separate files. Slicing an image has at least three major advantages: Optimizing One challenge of web graphic design is ensuring that images download quickly...
Page 253 Creating slice objects You can create a slice object by drawing it with the Slice tool or by inserting a slice based on a selected object. The lines extending from the slice object are slice guides, which determine the boundaries of the separate image files into which the document is split on export.
Page 254 HTML text-formatting tags. Alternatively, you can add HTML text-formatting tags to the HTML after it has been exported using a text editor or HTML editor such as Macromedia Dreamweaver. Click OK to apply your changes and close the Edit HTML Slice window.
Page 255 Creating nonrectangular slices Rectangular slices may not be sufficient when you’re trying to attach interactivity to a nonrectangular image. If you plan to attach a rollover behavior to a slice, for example, and your slice objects overlap or have irregular shapes, then a rectangular slice may swap unwanted background graphics along with the swap image.
Page 256 Viewing and displaying slices and slice guides You can control the visibility of slices and other web objects in your document using the Layers panel and the Tools panel. When you turn slice visibility off for the whole document, slice guides are hidden too. Using the Property inspector, you can organize slices by assigning a unique color to each slice object.
Page 257 To hide or show slice guides in any document view: Select View > Slice Guides. Changing slice and slice guide color If the colors used in a document are similar to the slice color, it can be difficult to see slices against the objects in the document.
Page 258 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.
Page 259 To resize one or more slices: Position the Pointer or Subselection tool over a slice guide. The pointer changes to the guide movement pointer. Drag the slice guide to the desired location. The slices are resized, and all adjacent slices are automatically resized as well. To reposition a slice guide to the far edge of the canvas, Use the Pointer or Subselection tool to drag the slice guide beyond the edge of the canvas.
Page 260: Making Slices Interactive
You can also select from a variety of mouse events that trigger interactive behaviors. Behaviors in Fireworks are compatible with Macromedia Dreamweaver behaviors. When you export a Fireworks rollover to Dreamweaver, you can edit Fireworks behaviors using the Dreamweaver Behaviors panel.
Page 261 When a slice is selected, a round circle with cross hairs appears in the center of the slice. This is called a behavior handle. Slice name Behavior handle Selection handle By dragging the behavior handle from a triggering slice and dropping it onto a target slice, you can easily create rollover and swap-image effects.
Page 262 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.
Page 263 Select the slice and place the pointer over the behavior handle. The pointer changes to a hand. You can select the slice while in any frame. Click the behavior handle and select Simple Rollover from the menu. Click the Preview tab and test the simple rollover, or press F12 to preview it in a browser. Creating a disjoint rollover A disjoint rollover swaps in an image under a web object when the pointer rolls over another web object.
Page 264 To attach a disjoint rollover to a selected image: Select Edit > Insert > Slice or Hotspot to attach a slice or hotspot to the trigger image. This step is not necessary if the selected object is a button or if a slice or hotspot already covers the image.
Page 265 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 You can also add multiple behaviors using the Behaviors panel.
Page 266 Using the Behaviors panel to add interactivity to slices In addition to rollovers, you can attach other types of interactivity to slices using the Behaviors panel. You can create custom interactions by editing existing behaviors. Although you can create simple, disjoint, and complex rollovers with the Behaviors panel, the drag-and-drop rollover method is recommended.
Page 267 Attaching behaviors Using the Behaviors panel, you can attach a behavior to a slice. You can also attach more than one behavior. To attach a behavior to a selected slice using the Behaviors panel: Click the Add Behavior button (the Plus button) in the Behaviors panel. Add Behavior button Remove Behavior button Select a behavior from the Add Behavior button.
Page 268 Using external image files for swap image You can use an image outside the current Fireworks document as the source for a swap image. Source images can be in GIF, animated GIF, JPEG, or PNG format. When you select an external file as the image source, Fireworks swaps that file with the target slice when the swap image is triggered in a web browser.
Page 269: Preparing Slices For Export
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 select 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.
Page 270 Entering brief, meaningful alternate text has become increasingly important in web design. A growing number of visually impaired people are using screen-reading applications, which read alternate text in a computer-generated voice as the pointer passes over graphics on a web page. To specify alt text for a selected slice or hotspot: In the Property inspector, type the text in the Alt Text box.
Page 271 Custom-naming slice files You can assign names to slices so that you can easily identify slice files in your website file structure. For example, if you have a button on a navigation bar that returns to the home page, you could name the slice Home. To enter a custom slice name, do one of the following: Select the slice on the canvas, enter a name in the Object Name box in the Property inspector, and press Enter.
Page 272 Option Description row/column (r3_c2, Row (r##) and Col (c##) designate the rows and columns of the r4_c7...) table that web browsers use to reconstruct a sliced image. You can use this information in the naming convention. Underscore The element uses any of these characters typically as separators Period between other elements.
Page 273 (Optional) To set this information as the default for all new Fireworks documents, click Set Defaults. Use caution when selecting None as a menu option for slice auto-naming. If you select None as the option for any of the first three menus, Fireworks exports slice files that overwrite one another, resulting in a single exported graphic and a table that displays this graphic in every cell.
Page 274 Select a cell color for HTML slices: To give cells the same background color as the document canvas, select Use Canvas Color. To select a different color, deselect Use Canvas Color and select a color from the color pop-up window. If you select a color from the color pop-up window, it applies only to HTML slices;...
Page 275: Working With Hotspots And Image Maps
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.
Page 276 Creating hotspots After you identify areas on a source graphic that would make good navigation points, you create the hotspots and then assign URL links, pop-up menus, status bar messages, and alt text to them. There are two ways to create hotspots: You can draw the hotspot around a target area in the graphic using the Rectangle, Circle, or Polygon (odd-shaped) Hotspot tools.
Page 277 Editing hotspots Hotspots are web objects, and like many other objects, they can be edited using the Pointer, Subselection, and Transform tools. For more information on using these tools to edit a web object, see “Using tools to edit slice objects” on page 259.
Page 278 Fireworks. By default, HTML comments are not included in the code. To include them, select Include HTML Comments on the General tab of the HTML Setup dialog box. For information on placing exported Fireworks content into Dreamweaver, see “Working with Macromedia Dreamweaver” on page 374. 278 Chapter 11: Slices, Rollovers, and Hotspots...
Page 279 Creating rollovers with hotspots Using the drag-and-drop rollover method of creating interactivity, you can easily attach a disjoint rollover effect to a hotspot if the target area is defined by a slice. Rollover effects are applied to hotspots the same way that they are to slices. For more information, see “Adding simple interactivity to slices”...
Page 280 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.
Page 281 Creating Buttons and Pop-up Menus In Macromedia Fireworks 8 you can create a variety of JavaScript buttons and CSS or JavaScript pop-up menus, even if you know nothing about JavaScript and CSS code. The Fireworks Button Editor leads you through the button-creation process, automating many button-making tasks.
Page 282 Creating button symbols Buttons are navigation elements for a web page. Buttons created in the Button Editor have the following characteristics: You can make almost any graphic or text object into a button. You can create a button from scratch, convert an existing object into a button, or import already created buttons.
Page 283 Using the Button Editor The Button Editor is where you create and edit a JavaScript button symbol in Fireworks. The tabs along the top of the Button Editor correspond to the four button states and the active area. The tips on each option in the Button Editor help you make design decisions for all four button states.
Page 284 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. These states give web page users additional visual cues. You can create a nav bar using two-state or three-state buttons, but only a button with all four states qualifies as a real nav bar button in Fireworks.
Page 285 Using bevel filters to draw button states As you create graphics for each button state, you can apply preset Live Filters to create common appearances for each state. For example, if you are creating a four-state button, you can apply the Raised filter to the Up state graphic, the Highlighted filter to the Down state graphic, and so on.
Page 286 To convert a Fireworks rollover into a button: Delete the slice or hotspot covering the rollover images. Select Show All Frames from the Onion Skinning pop-up menu in the Frames panel. Select all the objects to be included in the button. Use the Select Behind tool to select objects that are hidden behind others.
Page 287 Select Edit > Libraries and import button symbols into the document’s Library panel from the button libraries on the submenu. These libraries contain a wide variety of premade button symbols prepared by Macromedia. You import and export button symbols just as you import and export animation and graphic symbols.
Page 288 Optimization and export settings URL link (also available as an instance-level property) Target frame (also available as an instance-level property) To edit button properties at the symbol level: Do one of the following to open the button in the Button Editor: Double-click a button instance in the workspace.
Page 289 The Show Down State on Load option in the Property inspector for instances in a nav bar In Fireworks 8, you need not select 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.
Page 290 To edit a slice or hotspot in a button symbol’s active area: Do one of the following to open the button symbol in the Button Editor: Double-click a button instance in the workspace. In the Library panel, double-click the button preview or the symbol icon beside the button symbol.
Page 291 To set the URL for a selected button instance in the workspace, do one of the following: Enter the URL in the Link text box in the Property inspector. Select a URL from the URL panel. Setting the target for a button The target is the window or frame in which the destination web page appears when a button instance is clicked.
Page 292 To set the target for a button instance in the workspace: Select the button instance in the workspace. Do one of the following in the Property inspector: Select a preset target from the Target pop-up menu: None _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.
Page 293: Creating Navigation Bars
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. The nav bar looks the same from web page to web page, but in some cases, the links may be specific to the function of each page.
Page 294 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.
Page 295 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: Select a hotspot or slice that will be the trigger area for the pop-up menu.
Page 296 To view a pop-up menu, you must press F12 to preview it in a browser. The previews in the Fireworks workspace do not display pop-up menus. 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.
Page 297 To move a menu item into a higher-ranking submenu or into the main pop-up menu: Highlight the menu item in the Content tab of the Pop-up Menu Editor. Click the Outdent Menu button. For more information about positioning submenus, see “Positioning pop-up menus and submenus”...
Page 298 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 select vertical or horizontal orientation in the Appearance tab of the Pop-up Menu Editor. To set the orientation of a pop-up menu: With the desired pop-up menu open in the Pop-up Menu Editor, click the Appearance tab.
Page 299 To set whether a pop-up menu is HTML- or image-based: 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 304.
Page 300 Do one of the following: Click Next to move to the Advanced tab or select another tab to continue building the pop-up menu. Click Done to close the Pop-up Menu Editor. In the workspace, the hotspot or slice on which you built the pop-up menu displays a blue behavior line attached to an outline of the top level of the pop-up menu.
Page 301 Setting advanced pop-up menu properties The Advanced tab of the Pop-up Menu Editor offers additional settings to control cell size, padding, and spacing; text indention; menu disappearance delay; and border width, color, shadow, and highlight. To set advanced cell properties for the current pop-up menu: With the desired pop-up menu open in the Pop-up Menu Editor, click the Advanced tab.
Page 302 Enter a value in the Text Indent text box to set the amount of indention for pop-up menu text. Enter a value in the Menu Delay text box to set the amount of time in milliseconds that the menu remains visible after the pointer is moved away from it. Set pop-up border properties: Show Borders allows you to show or hide pop-up menu borders.
Page 303 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: With the desired pop-up menu open in the Pop-up Menu Editor, click the Position tab.
Page 304 To set the position for a pop-up submenu using the Pop-up Menu Editor: 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, “Editing pop-up menus”...
Page 305 Double-click the pop-up menu’s blue outline in the workspace. The Pop-up Menu Editor opens with your pop-up menu entries displayed. Make the desired modifications on any of the four tabs and click Done. To change a pop-up menu entry: With the desired pop-up menu displayed in the Pop-up Menu Editor, click the Content tab.
Page 306 When you include submenus, Fireworks generates an image file called arrows.gif. This image is the tiny arrow that appears next to a menu entry that tells users a submenu exists. No matter how many submenus a document contains, Fireworks always uses the same arrows.gif file.
Page 307: Chapter 13: Creating Animation
CHAPTER 13 Creating Animation Animated graphics add an exciting, sophisticated look to your website. In Macromedia Fireworks 8, 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.
Page 308: Working With Animation Symbols
321. 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 321. Working with animation symbols Animation symbols perform the action in your Fireworks file like actors in a movie.
Page 309 You do not need to use symbols for every aspect of your animation. However, using symbols and instances for graphics that appear in multiple frames keeps your animation file size smaller, in addition to the other advantages discussed in this chapter. You can change animation symbol properties at any time using the Animate dialog box or the Property inspector.
Page 310 Animate dialog box. Although the default is 72, you can enter any number you wish in the Move text box. Movement is linear, and there are no keyframes (unlike in Macromedia Flash and Director). Direction is the direction, in degrees, in which you want the object to move. Values range from 0 to 360 º...
Page 311 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. Rotation is the amount, in degrees, that the symbol rotates from start to finish.
Page 312 To change a selected symbol’s graphic attributes: Do one of the following to open the Symbol Editor: Double-click the symbol object. Select Modify > Symbol > Edit Symbol. Click the Edit button in the Animate dialog box. Modify the animation symbol and change any text, strokes, fills, and effects as appropriate. Close the Symbol Editor.
Page 313: Working With Frames
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.
Page 314 Enter a value for the frame delay. Press Enter, or click outside the panel to close the pop-up window. 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.
Page 315 To add frames to a specific place in the sequence: Select Add Frames from the Frames panel Options menu. Enter the number of frames to add. Select where to insert the frames: before the current frame, after it, or at the beginning or end.
Page 316 Sharing layers across frames Layers divide a Fireworks document into discrete planes, like separate tracing paper overlays. With animations, you can use layers to organize objects that are part of the scenery or backdrop for the animation. This gives you the convenience of being able to edit objects on one layer so that they don’t affect the rest of your animation.
Page 317 Viewing objects in a specific frame You can easily view objects in a specific frame using the Frame pop-up menu in the Layers panel. To view objects in a specific frame: Select the desired frame from the Frame pop-up menu at the bottom of the Layers panel. All objects in the selected frame are listed in the Layers panel and displayed on the canvas.
Page 318: Tweening
To adjust the number of frames visible before and after the current frame: In the Frames panel, click the Onion Skinning button. Select a display option: No Onion Skinning turns off onion skinning and displays only the contents of the current frame.
Page 319: Previewing An Animation
Previewing an animation You can preview an animation while you are working on it to check its progress. You can also preview an animation after optimization to see how it will look in a web browser. To preview an animation in the workspace: Use the frame controls that appear at the bottom of the Document window.
Page 320: Exporting Your Animation
If you plan to import your animation into Macromedia Flash for further editing, you do not need to export it. Flash can directly import Fireworks PNG source files. For more information, see “Working with Macromedia Flash”...
Page 321 “Exporting an animation” on page 355. 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. This option gives you the most control over how your animation is imported. You can import all layers and frames of your animation if desired, and then further edit them within Flash.
Page 322: Working With Existing Animations
Working with existing animations You can use an existing animated GIF file as part of your Fireworks animation. There are two ways of using the file: you can import the GIF into an existing Fireworks file, or you can open the GIF as a new file.
Page 323: Using Multiple Files As One Animation
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: Select File >...
Page 324 324 Chapter 13: Creating Animation...
Page 325: Chapter 14: Optimizing And Exporting
This balancing act is optimization— finding the right mix of color, compression, and quality. Exporting graphics from Macromedia Fireworks 8 is a two-step process: First, you prepare a document or individual sliced graphics for export by selecting optimization settings and comparing previews to determine an acceptable balance between quality and file size.
Page 326: Using The Export Wizard
Exporting from Fireworks ..........352 Sending a Fireworks document as an e-mail attachment .
Page 327 Once you are more comfortable with optimizing and exporting, you’ll want to use the Optimize panel and the preview buttons in the Document window to optimize graphics. They are more convenient than the Export Wizard and offer more optimization control for users who are familiar with the optimization process.
Page 328 The preview area of the Image Preview displays the document or graphic exactly as it will be exported and estimates file size and download time with the current export settings. File size and download time estimates Save export settings in the active view Preview chosen export settings Saved set of options for the selected export...
Page 329 Use the Zoom button at the bottom of the dialog box to zoom in or out in the preview. Click this button to activate the Zoom magnification tool and then click in the preview to magnify the preview. Alt-click (Windows) or Option-click (Macintosh) the button in the preview to zoom out.
Page 330 To set exported image dimensions using Image Preview: Click the File tab. Specify a scale percentage or enter the desired width and height in pixels. Select Constrain to scale the width and height proportionally. To define only a portion of an image for export using Image Preview: Click the File tab.
Page 331: Optimizing In The Workspace
Make edits to the animation: To specify the frame disposal method, select the desired frame in the list and select an option from the pop-up menu (indicated by the trash can icon). To set the frame delay, select the desired frame in the list and enter the delay time in hundredths of a second in the Frame Delay field.
Page 332 When a slice is selected, the Property inspector has a Slice Export Settings pop-up menu from which you can select preset or saved optimization settings. The preview buttons in the Document window show how the exported graphic would appear with the current optimization settings. You can optimize the whole document the same way, or select individual slices or selected areas of a JPEG and assign different optimization settings for each.
Page 333 GIF WebSnap 128 converts non-websafe colors to their closest websafe color. The color palette contains up to 128 colors. GIF Adaptive 256 is a color palette that contains only the actual colors used in the graphic. The color palette contains up to a maximum of 256 colors. JPEG –...
Page 334 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.
Page 335 To preview a graphic based on the current optimization settings: Click the Preview button in the upper left of the Document window. Click Hide Slices in the Tools panel to hide slices and slice guides while previewing. To compare views with different optimization settings: Click the 2-Up or 4-Up button in the upper left of the Document window.
Page 336 The following file types are available: , or Graphics Interchange Format, is a popular web graphic format. GIFs contain a maximum of 256 colors. GIFs can also contain a transparent area and multiple frames for animation. Images with areas of solid color compress best when exported as GIFs. A GIF is usually ideal for cartoons, logos, graphics with transparent areas, and animations.
Page 337 You can optimize 8-bit file types by adjusting their color palettes. Fewer colors in the palette means fewer colors in the image, resulting in a smaller file size. The drawback to reducing colors is that it can also diminish image quality. As you experiment with different optimization settings, you can use the 2-Up and 4-Up buttons to test and compare a graphic’s appearance and estimated file size.
Page 338 Custom is a palette that has been modified or loaded from an external palette (ACT file) or a GIF file. Adjusting the color palette during optimization affects the colors in the image. You can optimize and customize color palettes using the color table in the Optimize panel. To select a color palette: Select an option from the Indexed Palette pop-up menu in the Optimize panel.
Page 339 To select a color depth beyond 256 colors: Select a 24- or 32-bit file format from the Export File Format pop-up menu in the Optimize panel. Higher color depths create larger files and are typically not ideal for web graphics. Use only 24- or 32-bit color depths when exporting or saving photographic images with continuous tones or complex gradient blends of colors.
Page 340 Viewing colors in a palette The color table in the Optimize panel displays colors in the current preview when you are working in 8-bit color or less and lets you modify an image’s palette. The color table updates automatically when you are in Preview mode. It appears empty if you are optimizing more than one slice at a time or if you are not optimizing in an 8-bit format such as GIF.
Page 341 To rebuild the color table to reflect edits in the document: Click Rebuild at the bottom of the Optimize panel. When the table is rebuilt, the Rebuild button disappears, and the actual number of colors used in the image is displayed in its place. To select a color: Click the color in the Optimize panel color table.
Page 342 To unlock all colors: Select Unlock All Colors from the Optimize panel Options menu. Editing colors in a palette You can change a color in the current palette by editing it in the Optimize panel color table. Editing a color replaces all instances of that color in the image to be exported or to be saved as a bitmap.
Page 343 You can save custom palettes as external palette files. You can use saved palettes with other Fireworks documents or in other applications that support external palette files, such as Macromedia FreeHand, Macromedia Flash, and Adobe Photoshop. Saved palette files have the .act extension.
Page 344 PNGs support it and most web browsers do not support PNG format. Alpha transparency is often used in exported graphics that contain gradient transparency and semi- opaque pixels. Alpha transparency is also useful for exporting files to Macromedia Flash or Director, because both applications support this type of transparency.
Page 345 To select a color for transparency: 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. In the Optimize panel, select Index Transparency from the Transparency pop-up menu at the bottom of the panel.
Page 346 Interlacing: Downloading gradually When viewed in a web browser, interlaced images appear gradually while they are downloading. They display at a low resolution first and then transition to full resolution by the time the download is complete. This option is available only for GIF and PNG file formats. You can get similar results with a JPEG by making it progressive.
Page 347 Adjusting JPEG quality JPEG is a lossy format, which means that some image data is discarded when it is compressed, reducing the quality of the final file. However, image data can sometimes be discarded with little or no noticeable difference in quality. Original image;...
Page 348 To compress selected areas of a JPEG: In Original view, select an area of the graphic for compression using one of the Marquee tools. Select Modify > Selective JPEG > Save Selection as JPEG Mask. Select JPEG from the Export File Format pop-up menu in the Optimize panel, if it’s not already selected.
Page 349 To help preserve fine edges between two colors: Select Sharpen JPEG Edges from the Optimize panel Options menu. Use Sharpen JPEG Edges when exporting or saving JPEGs with text or fine detail to preserve the sharpness of these areas. Choosing Sharpen JPEG Edges increases file size. Using progressive JPEGs Progressive JPEGs, such as interlaced GIFs and PNGs, are displayed at a low resolution initially and then increase in quality as they download.
Page 350 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 anti-aliased object may be apparent on the web page’s background.
Page 351 Saving and reusing optimization settings Fireworks remembers the last optimization settings you used after you perform any of the following actions: File > Save File > Save As File > Save As/Save as a Copy File > Export Fireworks then applies these settings to new documents. As in previous versions of Fireworks, new slices still get their default optimization settings from the parent document.
Page 352: Exporting From Fireworks
Exporting from Fireworks Exporting from Fireworks is a two-step process. First you must prepare your graphic or document for export by optimizing it. After your graphic or document has been optimized, you can export it (or save it, depending on its originating file type). For more information on optimizing, see “About optimizing”...
Page 353 Select a location to export the image file to. For web graphics, the best location is typically a folder within your local website. Enter a filename. You do not need to enter a file extension; Fireworks does that for you upon export using the file type you specified in your optimization settings.
Page 354 Exporting selected slices You can export selected slices in a Fireworks document. Shift-click to select multiple slices. For more information on slicing, see “Creating and editing slices” on page 252. To export selected slices: Do one of the following: Select File > Export. To export an individual slice, right-click (Windows) or Control-click (Macintosh) the slice and select Export Selected Slice.
Page 355 356. For information about exporting animations as Flash SWF files, see “Working with Macromedia Flash” on page 392. To export an animation as an animated GIF: Select Edit > Deselect to deselect all slices and objects, and select Animated GIF as the file format in the Optimize panel.
Page 356 Select each slice individually and use the Frames panel to set different animation settings for each. For more information about animation settings, see Chapter 13, “Creating Animation,” on page 307. Select all the slices you would like to animate, and select Animated GIF as the file format in the Optimize panel.
Page 357 Exporting an area You can use the Export Area tool to export a portion of a Fireworks document. To export a portion of a document: Select the Export Area tool from the Tools panel. Drag a marquee defining the portion of the document to export. You can adjust the position of the marquee as you drag.
Page 358 Use the Update HTML command to make changes to an HTML file you’ve previously created. Macromedia Dreamweaver shares a tight integration with Fireworks. Fireworks handles the export of HTML to Dreamweaver differently than it handles export to other HTML editors. If you are exporting Fireworks HTML to Dreamweaver, see “Working with...
Page 359 CSS pop-up menu code. If your pop-up menus contain submenus, an arrows.gif file is also exported. If you export or copy HTML to Macromedia Dreamweaver, notes files that facilitate the integration between Fireworks and Dreamweaver. These files have an .mno extension.
Page 360 Fireworks automatically fills in the text boxes of the Export dialog box with the appropriate settings for the selected application. Non-Macromedia applications are found in the Quick Export > Other submenu. Navigate to the desired site folder on your hard drive.
Page 361 When prompted, specify a desired folder as the destination for the exported images. This must be the location where your HTML file will reside. If you plan to paste the HTML code into Macromedia Dreamweaver, it does not matter where you export the images, as long as they reside in the same Dreamweaver site as the HTML file into which you will paste your code.
Page 362 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. If you plan to paste the HTML code into Macromedia Dreamweaver, it does not matter where you export the images, as long as they reside in the same Dreamweaver site as the HTML file into which you will paste your code.
Page 363 Paste the HTML code. Refer to the help system within your specific HTML editor for instructions on pasting contents from the Clipboard. When pasting code into HTML editors, it is important to keep images and HTML files in the correct location, or links could be broken. If possible when you copy to the Clipboard, make sure images are exported to the final location where they will reside on the website.
Page 364 This feature is useful if you want to update only a portion of a document. Update HTML works differently with Macromedia Dreamweaver documents than it does with other HTML documents. For more information, see “Working with Macromedia Dreamweaver”...
Page 365 To export a graphic in CSS layers: Select File > Export. In the Export dialog box, type a filename and select a destination folder. Select CSS Layers from the Export pop-up menu. In the Source pop-up menu, select one of the following: Fireworks Layers exports all layers as CSS layers.
Page 366 To export XHTML from Fireworks: Select File > HTML Setup, select an XHTML style from the HTML Style pop-up menu on the General tab, and click OK. Export your document using any of the methods available for exporting or copying HTML.
Page 367 Setting HTML export options The HTML Setup dialog box allows you to define how Fireworks exports HTML. These settings can be document-specific or can be used as your default setting for all HTML exports. Changes made in the Document Specific tab affect the current document only, but you can use these settings as defaults for new documents if you click the Set Defaults button before closing the HTML Setup dialog box.
Page 368 Select Write CSS to an External File if you want to have the CSS code written to an external .css file that is exported to the same location as the HTML file. The name of the .css file matches the name of the HTML file (except for the file extension). Choosing this option also exports a file named mm_css_menu.js to the same location as the HTML file.
Page 369 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 ®...
Page 370: Sending A Fireworks Document As An E-Mail Attachment
Customizing the Quick Export pop-up menu You can add additional options to the Quick Export pop-up menu if you know JavaScript and XML. To add options to the Quick Export pop-up menu: Create your own JSF files and drop them into the Quick Export Menu folder on your hard disk.
Page 371: Using The File Management Button
SourceSafe, WebDAV, and RDS cannot be transported to and from the remote server from within Fireworks. For more information about the File Management menu, see Chapter 15, “Working with Macromedia Dreamweaver,” on page 374. Using the File Management button 371...
Page 372 372 Chapter 14: Optimizing and Exporting...
Page 373: Chapter 15: Using Fireworks With Other Applications
This chapter covers the following topics: Working with Macromedia Dreamweaver ........374 Working with Macromedia Flash .
Page 374 Working with Macromedia Director MX ........
Page 375 Dreamweaver are not preserved when opened and edited in Fireworks. Once the Fireworks session has ended and you’ve returned to Dreamweaver, the new Fireworks graphic you created takes the place of the image placeholder originally selected. Working with Macromedia Dreamweaver 375...
Page 376 To create a Fireworks image from an image placeholder in Dreamweaver: In Dreamweaver, save the desired HTML document to a location inside your Dreamweaver site folder. Position the insertion point in the desired position in your document, and do one of the following: Select Insert >...
Page 377 Dreamweaver site folder. For more information on exporting, see Fireworks Help. Click Save. When you return to Dreamweaver, the image placeholder you originally selected is replaced with the new Fireworks image or table you created. Working with Macromedia Dreamweaver 377...
Page 378 Placing Fireworks HTML code in Dreamweaver There are several ways to place Fireworks-generated HTML code into Dreamweaver. You can export HTML, or you can copy Fireworks HTML code to the Clipboard. You can also open an exported Fireworks HTML file in Dreamweaver and copy and paste selected sections of code.
Page 379 For more information, see Fireworks Help. This method works only with Dreamweaver and not with other HTML editors. Only Dreamweaver updates the links to the Fireworks images as document-relative when you paste the HTML code into the Dreamweaver document. Working with Macromedia Dreamweaver 379...
Page 380 Copying code from an exported Fireworks file and pasting it into Dreamweaver You can open an exported Fireworks HTML file in Dreamweaver and then manually copy and paste only the desired sections into another Dreamweaver document. Before exporting from Fireworks, make sure to choose Dreamweaver as the HTML type in the HTML Setup dialog box.
Page 381 Dreamweaver library items are much like Fireworks symbols; changes to the master library (LBI) document are reflected in all library instances across your site. Dreamweaver library items do not support pop-up menus. Working with Macromedia Dreamweaver 381...
Page 382 To export a Fireworks document as a Dreamweaver library item: Select File > Export. Select Dreamweaver Library from the Save as Type pop-up menu. Select the Library folder in your Dreamweaver site as the location in which to place the files.
Page 383 You can start Fireworks to edit individual images placed in a Dreamweaver document. Before editing Fireworks graphics from Dreamweaver, you should perform some preliminary tasks. For more information, see “Setting launch-and-edit options” on page 388. Working with Macromedia Dreamweaver 383...
Page 384 To open and edit a Fireworks image placed in Dreamweaver: In Dreamweaver, choose Window > Properties to open the Property inspector, if it is not already open. Do one of the following: Select the desired image. (The Property inspector identifies the selection as a Fireworks image and displays the name of the known PNG source file for the image.) Then click Edit in the Property inspector.
Page 385 You may get a Dreamweaver error if you nest another table inside the original Fireworks- generated table and then try to edit the table using Roundtrip editing in Dreamweaver. For more information, see TechNote 19231 on the Macromedia website. To open and edit a Fireworks table placed in Dreamweaver: In Dreamweaver, choose Window >...
Page 386 About Dreamweaver behaviors If a single, unsliced Fireworks graphic is inserted into a Dreamweaver document and a Dreamweaver behavior is applied, that graphic will have a slice on top of it when it is opened and edited in Fireworks. The slice is not visible initially, because slices are automatically turned off when you open and edit single, unsliced graphics to which Dreamweaver behaviors are applied.
Page 387 Property inspector when you return to Dreamweaver. To edit animation settings for the image, click the Animation tab and change the desired settings. For more information about the options available on these tabs, see Fireworks Help. Working with Macromedia Dreamweaver 387...
Page 388 When you have finished editing the image, click Update. The image is exported using the new optimization settings, the GIF or JPEG placed in Dreamweaver is updated, and the PNG source file is saved if a source file was selected. If you changed the format of the image, the Dreamweaver link checker prompts you to update references to the image.
Page 389 In the Editors list, if Fireworks appears in the list, select it. If Fireworks is not in the list, click the Plus (+) button, locate the Fireworks application on your hard disk, and click Open. Working with Macromedia Dreamweaver 389...
Page 390 Click Make Primary. Repeat steps 2 through 4 to set Fireworks as the primary editor for other web image file types. About Design Notes and source files Whenever you export a Fireworks file from a saved source PNG file to a Dreamweaver site, Fireworks writes a Design Note that contains information about the file.
Page 391 Check In is enabled in Fireworks only if the Enable File Check In and Check Out option is enabled in Dreamweaver for the site in which the document resides. Working with Macromedia Dreamweaver 391...
Page 392: Working With Macromedia Flash
Fireworks. Working with Macromedia Flash Fireworks integrates well with Macromedia Flash. You can easily import, copy and paste, or export Fireworks vectors, bitmaps, animations, and multistate button graphics for use in Flash. Launch-and-edit functionality also makes it easy to edit Fireworks graphics from within Flash.
Page 393 If a keyframe wasn’t selected before import, the movie clip is placed in the previous keyframe. Import into New Layer in Current Scene imports the Fireworks file onto a single, new layer, with all its frames intact. Working with Macromedia Flash 393...
Page 394 Select the way you’d like vector objects and text imported: Rasterize if Necessary to Maintain Appearance preserves the editability of vector objects, unless they have special fills, strokes, or effects that Flash does not support. To preserve the appearance of such objects, Flash converts them to non-editable bitmap images.
Page 395 Options dialog box. Stroke size and stroke color are maintained. The following formatting is lost during export to SWF format: Blend mode Layers Masks (applied before export) Slice objects, image maps, and behaviors Pattern fills Contour gradients Working with Macromedia Flash 395...
Page 396 Select File > Export or click the Quick Export button and choose Export SWF from the Macromedia Flash pop-up menu. In the Export dialog box, type a filename and choose a destination folder. Select Macromedia Flash SWF from the Save As pop-up menu. Click the Options button. The Flash SWF Export Options dialog box appears.
Page 397 If you are importing a Fireworks graphic into an existing Flash file, create a new layer in Flash. Select File > Import and locate the graphic or animation file. Click Open to import the file. Working with Macromedia Flash 397...
Page 398 Using Fireworks to edit graphics imported into Flash With launch-and-edit integration, you can use Fireworks to make changes to a graphic that you previously imported into Flash. You can edit any imported graphic this way, even if the graphic wasn’t exported from Fireworks. Fireworks native PNG files imported into Flash are an exception, unless you imported the PNG file as a flattened bitmap image.
Page 399: Working With Macromedia Freehand Mx
Working with Macromedia FreeHand MX Because both applications support vectors, vector graphics can be easily shared between Fireworks and Macromedia FreeHand MX. The appearance of objects may differ between applications, however, because Fireworks and FreeHand do not share all the same features. For more information, see “Working with other vector graphics applications”...
Page 400 Include Invisible Layers imports objects on layers that have been hidden. Otherwise, invisible layers are ignored. Include Background Layers imports objects from the document’s background layer. Otherwise, the background layer is ignored. Render as Images rasterizes complex groups, blends, or tiled fills and places each as a single bitmap object in a Fireworks document.
Page 401 To import a Fireworks PNG file into FreeHand: Save the desired document in Fireworks. For information on saving files, see Fireworks Help. Switch to an open document in FreeHand. Select File > Import or File > Open. Working with Macromedia FreeHand MX 401...
Page 402 Locate and select the desired PNG file from the Import dialog box, and click Open. The Fireworks PNG Import Settings dialog box appears. Select a File Conversion Option: Open Frames as Pages imports Fireworks frames onto separate FreeHand pages. If you want, select Remember Layers to convert Fireworks layers to FreeHand layers.
Page 403 Use the Copy Path Outlines command with FreeHand 10 and earlier versions. With FreeHand MX, use Edit > Copy to get full object appearance and improved editability. For more information, see “Copying and pasting Fireworks graphics into Freehand” on page 403 Working with Macromedia FreeHand MX 403...
Page 404 Select Illustrator 7 from the Save As pop-up menu. Illustrator 7 is the graphics file format you use when exporting from Fireworks to any other vector graphics application, including Macromedia FreeHand. Most vector applications can read the Illustrator 7 file format.
Page 405: Working With Macromedia Director Mx
Some strokes Working with Macromedia Director MX You can combine the power of Fireworks and Macromedia Director MX. Fireworks lets you export graphics and interactive content into Director. The export process preserves the behaviors and slices of the graphic. You can safely export sliced images with rollovers and even layered images.
Page 406 Placing Fireworks files in Director Director can import flattened images from Fireworks, such as JPEG and GIF images. It can also import 32-bit PNG images with transparency. For sliced, interactive, and animated content, Director can import Fireworks HTML. For information on exporting flattened Fireworks images such as JPEG and GIF images, see Fireworks Help.
Page 407 Navigate to the desired file and click Import. Change options if desired in the Image Options dialog box. For information about each option, see Using Director. Click OK. The imported graphic appears in the cast as a bitmap. Working with Macromedia Director MX 407...
Page 408 To import layered, sliced, or interactive Fireworks content: In Director, choose Insert > Fireworks > Images from Fireworks HTML. The location and name of this menu command may be different depending on your version of Director. Locate the Fireworks HTML file you exported for use in Director. The Open Fireworks HTML dialog box appears.
Page 409 The file opens in Fireworks, and the Document window indicates that you are editing a file from Director. Make changes to the image, and click Done when finished. Fireworks exports the new graphic to Director. Working with Macromedia Director MX 409...
Page 410: Working With Macromedia Homesite
The image is updated in Director using the new settings. Working with Macromedia HomeSite You can use Fireworks and Macromedia HomeSite together to create and edit web pages. Exporting and opening Fireworks HTML in HomeSite is simple, and inserting Fireworks graphics into HomeSite documents is just as easy.
Page 411 HTML Setup dialog box. For more information, see Fireworks Help. To copy Fireworks HTML for use in HomeSite: Copy HTML to the Clipboard in Fireworks, and then paste it into an new HomeSite document. For more information, see Fireworks Help. Working with Macromedia HomeSite...
Page 412 Copying code from an exported Fireworks file and pasting it into HomeSite You can open an exported Fireworks HTML file in HomeSite and then manually copy and paste only the desired sections into another HomeSite document. Before exporting, make sure to set the HTML type to Generic in the HTML Setup dialog box.
Page 413: Working With Adobe Photoshop
Select Edit in Macromedia Fireworks from the pop-up menu. HomeSite starts Fireworks, if it is not already open. If prompted, specify whether to locate a Fireworks source file for the placed image. For more information on Fireworks source PNG files, see Fireworks Help.
Page 414 Importing Photoshop files into Fireworks When you import or open a Photoshop file in Fireworks, the Photoshop file is imported into a PNG file using the import preferences that you have specified. In addition to preserving layers and text as specified by the import options, Fireworks preserves and converts the following Photoshop features: Layer masks convert to Fireworks object masks.
Page 415 About importing text from Photoshop You can open or import a Photoshop file containing text. When opening Photoshop files that contain text, Fireworks checks if you have the necessary fonts on your system. If you don’t, Fireworks asks if you want to replace the fonts or maintain their appearance.
Page 416 Specify import options: Layers: Convert to Fireworks Objects imports each layer in the Photoshop file as a separate object on a single layer in Fireworks. Layers: Share Layer Between Frames makes the imported layers visible across all frames in the Fireworks file. Layers: Convert to Frames imports each layer in the Photoshop file as an object on a separate frame in Fireworks.
Page 417 To use Photoshop and other third-party filters and plug-ins using the Preferences dialog box: Select Edit > Preferences. On Mac OS X, choose Fireworks > Preferences. Click the Folders tab (Windows) or choose Folders from the pop-up menu (Macintosh). Select the Photoshop Plug-ins option. The Select a Folder (Windows) or Choose a Folder (Macintosh) dialog box opens.
Page 418 Placing Fireworks graphics in Photoshop Fireworks provides extensive support for exporting files in Photoshop (PSD) format. Export settings let you control which elements in the file remain editable when you reopen it in Photoshop. A Fireworks image exported into Photoshop maintains the same editability when reopened in Fireworks as other Photoshop graphics.
Page 419: About Working With Adobe Golive
Customizing files for export to Photoshop When you export a file to Photoshop, you can choose customized settings for exporting objects, effects, and text. To customize settings for export to Photoshop: In the Export dialog box, with Photoshop PSD selected as the export file type, choose Custom from the Settings pop-up menu.
Page 420: About Working With Html Editors
About working with HTML editors Fireworks generates pure HTML that can be read by all HTML editors. For general information on placing Fireworks HTML into HTML editors, see Fireworks Help. Fireworks can also import HTML content. This is a powerful feature, allowing you to open and edit most any HTML document within Fireworks.
Page 421 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 8 is its capability to automate and simplify many tedious drawing, editing, and file- conversion tasks.
Page 422: Finding And Replacing
Select Edit > Find. Press Control+F (Windows) or Command+F (Macintosh). If the files you select are locked or checked in from a Macromedia Dreamweaver site, you are prompted to unlock them or check them out before proceeding. From the Search pop-up menu, select a source for the search:...
Page 423 Search Files finds and replaces elements across multiple files. If this option is not already selected in the Search pop-up menu, selecting it opens a dialog box in which you can select which files to search. If Search Files is already selected in the Search pop-up menu, you have the option to select which files to search after you begin the search operation by clicking Find, Replace, or Replace All.
Page 424 Select one of the following from the Backups pop-up menu: No Backups finds and replaces without backing up original files. The changed files replace the original files. Overwrite Existing Backups creates and stores only one backup copy of each file changed during a find and replace.
Page 425 Finding and replacing fonts You can also quickly find and replace fonts in your Fireworks documents. To search for and replace fonts in one or more Fireworks documents: Select Find Font from the Find pop-up menu of the Find panel. Select the font and font style to find.
Page 426: Batch Processing
If you want, select options to further define the search: Whole Word finds the text only in the same form in which it appears in the Find option, not as part of any other word. Match Case distinguishes between uppercase and lowercase letters during the search. Regular Expressions matches parts of words or numbers conditionally during a search.
Page 427 You also have the option of not selecting any files at all while using the wizard if you only want to save the batch-process script for later use. Batch processing 427...
Page 428 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. Click one of the following in the Batch (Windows) or Batch Process (Macintosh) dialog box: adds selected files and folders to the list of files to batch-process.
Page 429 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 the Scale option, see “Scaling graphics with a batch process”...
Page 430 In addition, a log file named FireworksBatchLog.txt is created during the batch process. It lists all of the files processed, the specific files that could not be opened (if any), and other information. You can find this log file at: \\Documents and Settings\username\Application Data\Macromedia\Fireworks 8\FireworksBatchLog.txt (Windows) /Users/username/Library/Application Support/Macromedia Fireworks 8/ FireworksBatchLog.txt (Macintosh)
Page 431 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: Select Export from the Batch Options list and click Add. From the Settings pop-up menu, select from the following options and click OK: Select Use Settings from Each File to keep each file’s previous export settings during the batch process.
Page 432 To set scaling options for batch-processed files: Select Scale from the Batch Options list and click Add. In the Scale pop-up menu, select an option: No Scaling 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.
Page 433 To select attributes to find and replace during a batch process: Select Find and Replace from the Batch Options list and click Add. Click Edit. Select the type of attribute to find and replace from the Find pop-up menu: text, font, color, URL, or Non-Web216.
Page 434 Add Suffix lets you enter text to add to the end of the filename before the file extension. For example, if you enter “_day”, then the file Sunset.gif is renamed Sunset_day.gif when it is batch-processed. For each changed filename, you can do any combination of Replace, Replace blanks, Add Prefix, and Add Suffix.
Page 435 Specifying the batch process output location After you select all batch options in the Batch Process dialog box, you must select 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.
Page 436 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 select all batch options in the Batch dialog box, you are given options for saving your files.
Page 437: Extending Fireworks
Running scripts by dragging and dropping If you have a batch process that you repeat frequently, save it as a script, then drag that script from your hard drive to the Fireworks icon on your desktop to run the batch process. The Fireworks application launches and runs that script.
Page 438 An extension is a command script, command panel, library, filter, pattern, texture, or Auto Shape that can be added to Fireworks to enhance its capabilities. Fireworks ships with the Macromedia Extension Manager, which allows you to easily install, manage, and delete extensions. Upon installation, Fireworks includes a collection of default extensions in the Commands menu.
Page 439 To save steps as a command: Select the steps to save as a command: Click a step, then Shift-click another to select a range of steps to save as a command. Control-click (Windows) or Command-click (Macintosh) to select noncontiguous steps. Click the Save Steps as Command button at the bottom of the History panel.
Page 440 Fireworks. You can control nearly every command or setting in Fireworks through JavaScript. Macromedia Dreamweaver also uses JavaScript. You can write scripts that control Fireworks from within Dreamweaver. For documentation on the JavaScript API, see Extending Fireworks.
Page 441 “About user configuration files” on page 452. To rename or delete a command that shipped with Fireworks or that you downloaded from the Macromedia Exchange: Select Command > Manage Extensions. Select Help > Manage Extensions. The Extension Manager opens. For information about how to manage extensions, see Extension Manager Help.
Page 442 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: From your desktop, navigate to the appropriate Commands or Command Panels folder on your hard disk.
Page 443: Flash Swf Movies Used As Fireworks Panels
Flash SWF movies used as Fireworks panels Some panels in Fireworks, such as the Align panel, are actually Flash SWF movies. If you know JavaScript or ActionScript, you can create your own Fireworks panel by designing and coding it in Flash and exporting it as a SWF movie. If dropped into the Command Panels folder on your hard disk, the movie will appear as a panel in the Fireworks Window menu.
Page 444 444 Chapter 16: Automating Repetitive Tasks...
Page 445: Chapter 17: Preferences And Keyboard Shortcuts
Preferences and Keyboard Shortcuts Macromedia Fireworks 8 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.
Page 446 General preferences The following options are on the General preferences tab: Undo Steps sets undo/redo steps to a number between 0 and 1009. This setting applies to both the Edit > Undo command and the History panel. A large number of undos can increase the amount of memory Fireworks requires.
Page 447 PNG, Fireworks uses the launch-and-edit preferences that you set to determine how it will handle locating the source PNG file. 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.
Page 448 Macromedia Director MX” on page 405. Macromedia Dreamweaver handles launch-and-edit settings differently. Dreamweaver always opens the source PNG, even if you set launch-and-edit preferences differently in Fireworks. If no Design Note exists or if the path to the source PNG is broken, Dreamweaver always prompts you to locate the source PNG file.
Page 449: Changing Keyboard Shortcut Sets
If you are accustomed to using shortcuts from other applications such as FreeHand, Illustrator, Photoshop, or products that use the Macromedia standard, you can switch to the shortcut set you prefer.
Page 450 To create a custom or secondary shortcut for a menu command, tool, or miscellaneous action: Select Edit > Keyboard Shortcuts to open the Keyboard Shortcuts dialog box. Click the Duplicate Set button. Enter a name for the custom set in the Duplicate Set dialog box and click OK. The name of the new custom menu appears in the Current Set text box.
Page 451: Working With Configuration Files
To delete a custom shortcut: Select the command in the Commands list. Select the custom shortcut from the Shortcuts list. Click the Delete a Selected Shortcut (-) button. Creating a reference sheet for the current shortcut set A reference sheet is a record of the current shortcut set stored in HTML table format. You can view the reference sheet in a web browser or print it.
Page 452 About user configuration files Fireworks user configuration files are stored in the Macromedia/Fireworks 8 folder in your user-specific Application Data folder (Windows) or Application Support folder (Macintosh). The location of this folder varies depending on what operating system you use and on whether your system is a multiuser system or a single-user system.
Page 453: About Reinstalling Fireworks
On the Macintosh, preferences are in the Library/Preferences folder in your user folder. For information about locating your Macintosh user folder, see Apple Help. On the Macintosh, most Fireworks user-specific configuration files are stored in a different folder, your user-specific Application Support folder. The Fireworks 8 Preferences file is an exception.
Page 454 454 Chapter 17: Preferences and Keyboard Shortcuts...
Page 455: Index
Index Numerics movement 310 moving objects to another frame 315 24-bit color 339 multiframe editing 318 32-bit color 339 naming frames 314 onion skinning 317 opacity 311 opening 322 absolute URLs, entering 248 optimizing 321 ACT file format, swatches 169 playing 319 Add Filters pop-up menu 194 previewing 319...
Page 456 Screen 230 running 436 Tint 231 behaviors Blur filter 104 Behaviors panel 266 Blur More filter 104 Macromedia Dreamweaver 4 260 Blur tool 86 Nav Bar Down 266 blurring 104 Nav Bar Over 266 bitmap areas 86 Nav Bar Restore 266...
Page 457 button symbols picking from color bar 173 editing 287 pop-up window 176 inserting in a document 286 removing unused 339 buttons replacing a swatch 171 active area 289 resetting default 168 Button Editor 282 sampling 84, 177 creating 282 saving custom swatches 171 defined 282 setting preferences 446 Live Filters 285...
Page 458 451, 452 Deselect command 59 configuring Fireworks 446 deselecting all objects 54 Connector Line tool 115 Design Notes for Macromedia Dreamweaver and Constrain Proportions option 20 Fireworks integration 390 constraining rotation 72 discussion group, Fireworks 12 context menus 46...
Page 459 documents creating new 17 e-mail 370 default mode 112 edges multiple views 41 beveled 196 opening 18 showing and hiding 54 recent 19 Edit Gradient dialog box 186 saving 26 Edit Stroke dialog box 179 switching 38 editing tiling views 41 actions in the History panel 442 Dodge tool 87 animation symbols 310...
Page 460 Illustrator 401 editing solid 183 to Macromedia Director 406 feathering or anti-aliasing 188 to Macromedia Dreamweaver 381 finding and replacing 425 to Macromedia Flash 392, 395 moving 188 to Macromedia FreeHand 401 resetting default color 168 to Photoshop 418 rotating 188...
Page 461 fonts 425 multiple files 423 Gaussian Blur filter 105 non-websafe colors 426 GIF file format selecting source for search 422 choosing 336 text 424 choosing a color palette 337 URLs 425 swatches 169 uses 422 GIF, saving 28 Fireworks Help 12 glow effects 198 Fit to Canvas 45 GoLive 369, 419...
Page 462 364 editing 242 Roundtrip 383 placing in document 241 Setup 367 tweening 318 updating Fireworks HTML placed in Macromedia integration with other applications 373 Dreamweaver 380 interactive button properties 289 working with editors 420 interactivity 15 HTML, opening tables 21...
Page 463 286 importing Fireworks PNG to 392 lightening Macromedia FreeHand 7 bitmap areas 87 exporting to 401 images 89 placing Macromedia Fireworks graphics in 399 line spacing 151 Macromedia Help 12 See also leading macros 440 lines 112 marquees 55...
Page 464 expanding 62 moving 59 object-oriented graphics 16 removing 59 objects saving and restoring 64, 65 converting to animation 309 selecting area around 63 creating bitmaps 80 selecting pixels by intersecting 60 distorting 73 smoothing 63 grouping 74 transferring to another object 64 merging 209 masks 210 moving selected 68...
Page 465 optimizing 327 paths 136 animations 321 adding stroke texture 190 basics 326 bending adjacent segments 131 Fireworks images from Dreamweaver 387 changing adjacent segments 130 using Export Wizard 327 changing shape 130 optimizing graphics 15 converting straight to curved 129 Options menu in panels 36 copying and pasting 403 outlines 177...
Page 466 pixels 16 preferences 445 adjusting tonal range using eyedropper 99 color defaults 446 cloning 87 default 449 contracting selection border 63 editing options 446 copying 55 folder options 448 cutting 55 Import 415 expanding selection border 62 import options 448 feathering 86 interpolation options 446 moving 55...
Page 467 Redraw Path tool 136 saving documents 26, 28 redrawing paths 136 Scale tool 71 reducing points 140 scaling reinstalling Fireworks 453 graphics 431 relative URLs, entering 248 interpolation options 446 removing objects 71 effects 200 scripting 440 parts of a path 139 editing scripts 442 renaming symbols 241 Flash SWF files 440...
Page 468 271 reorienting 181 changing color 257 resetting default color 168 creating 253 saving settings 182 editing Fireworks table slices from Macromedia setting sensitivity 180 Dreamweaver 385 swapping stroke and fill colors 168 exporting 353, 354 textures 178 overlapping 259...
Page 469 importing 239 entering 144 new 237 expanding or contracting character width 156 resetting to defaults 239 finding and replacing 424 Styles panel 33, 236 indenting 154 Subselection tool orientation 152 auto-joining paths with 132 overview 143 selecting masks with 223 paragraph spacing 154 Swap Image behavior 266 slices 254...
Page 470 tools transparent areas 344 Blur 86 trimming the canvas 45 Brush 83 Turn off Hide Edges preference 447 Burn 87 Tween Instances command 318 changing options 30 tweening changing stroke color 178 characteristics 318 Colors section in Tools panel 168 defined 318 Distort 73 objects 318...
Page 471 vector objects, reshaping 133 view modes 40 WAP graphics 20 See also WBMP files WBMP files 20 exporting to 336 opening from Fireworks 20 saving 28 Web Layer 210 websafe colors 342 Windows system colors as a swatch group 169 work environment 29 workflow in Fireworks 14 XHTML 365...
Page 472 Index...

This manual is also suitable for:

Fireworks 8

Save PDF