Adobe 38039927 User Guide
Adobe 38039927 - Fireworks CS3 - PC Manual
 |
UPC - 883919091389
View all Adobe 38039927 manuals
Add to My Manuals
Save this manual to your list of manuals |
Adobe 38039927 manual content summary:
- Adobe 38039927 | User Guide - Page 1
USING FIREWORKS - Adobe 38039927 | User Guide - Page 2
by any such license, no part of this guide may be reproduced, stored in a retrieval system, Adobe, the Adobe logo, Adobe Bridge, Director, Dreamweaver, Flash, Flex Builder, FreeHand, GoLive, HomeSite, Illustrator, Photoshop, and XMP are either registered trademarks or trademarks of Adobe - Adobe 38039927 | User Guide - Page 3
iii Contents Chapter 1: Getting Started Installation 1 Adobe Help 2 Resources 4 What's new in Fireworks CS3 8 Chapter 2: Fireworks Basics About working in Fireworks 12 About vector and bitmap graphics 13 Creating a new document 15 - Adobe 38039927 | User Guide - Page 4
152 Chapter 9: Pages, Layers, Masking, and Blending Working with pages 155 Working with layers 159 Masking images 164 Blending and transparency 179 Chapter 10: Using Styles, Symbols, and URLs Using styles 183 Using symbols 186 Working with URLs 196 Chapter 11: Slices, Rollovers, and Hotspots - Adobe 38039927 | User Guide - Page 5
Fireworks album player 254 Flash 305 Working with FreeHand 312 Working with Director 317 Working with HomeSite 320 Working with Photoshop 322 About working with Illustrator 326 About working with GoLive 327 About working with HTML editors 327 About extending Fireworks 328 About Adobe - Adobe 38039927 | User Guide - Page 6
time-saving integration with Adobe Photoshop® CS3, Adobe Illustrator® CS3, Adobe Dreamweaver® CS3, and Adobe Flash® CS3 Professional software. Close any other Adobe programs open on your computer. 2 Insert the installation disc into your DVD drive, and follow the on-screen instructions. Note: For - Adobe 38039927 | User Guide - Page 7
ADOBE FIREWORKS CS3 2 User Guide Note: If you want to install the software on a different computer, you must first deactivate it on your computer. Choose Help > Deactivate. Register Register your product to receive complimentary installation support, notifications of updates, and other services. ❖ - Adobe 38039927 | User Guide - Page 8
provided as PDFs. All PDF documentation is available through the Adobe Help Resource Center, at www.adobe.com/go/documentation. PDF documentation included with keyboard shortcuts for toolbar controls and navigation, and it supports standard accessibility features, including the following: • Text - Adobe 38039927 | User Guide - Page 9
ADOBE FIREWORKS CS3 4 User Guide • Standard HTML tags define content structure, for screen reading or text- that Fireworks can interpret. The manual is available both in help and on the Adobe website as a downloadable PDF. Resources Adobe Video Workshop Adobe Creative Suite 3 Video Workshop enables - Adobe 38039927 | User Guide - Page 10
property scripts Videos also show you how to use Fireworks CS3 with other Adobe products, for example: • Importing Photoshop files • Understanding the Fireworks and Flash workflow • Understanding the Photoshop, Illustrator, and Fireworks workflow Extras You have access to a wide variety of resources - Adobe 38039927 | User Guide - Page 11
folder contains a PDF version of the Help, technical information, and other documents such as specimen sheets, reference guides, and specialized feature information. Adobe Exchange For more free content, visit www.adobe.com/go/exchange, an online community where users download and share thousands - Adobe 38039927 | User Guide - Page 12
'll find RSS feeds, online seminars, SDKs, scripting guides, and other technical resources. Visit Adobe Developer Center at www.adobe.com/go/developer. Customer support Visit the Adobe Support website, at www.adobe.com/support, to find troubleshooting information for your product and to learn about - Adobe 38039927 | User Guide - Page 13
ADOBE FIREWORKS CS3 8 User Guide User communities Features forums, blogs, and other avenues for users to slice scaling, which allows you to intelligently scale vector or bitmap symbols. By positioning a set of guides over your artwork, you can define exactly how each part of a symbol is scaled. Any - Adobe 38039927 | User Guide - Page 14
ADOBE FIREWORKS CS3 9 User Guide Add multiple pages to a single document In a never-ending effort create a Flash slideshow without knowing how to use Flash. You simply select a folder with images, add slideshow options (such as slide transitions), select a Fireworks album player (a Flash template) - Adobe 38039927 | User Guide - Page 15
PSD files Fireworks CS3 now supports a hierarchical layer structure, allowing you to preserve layer and sublayer information when importing files from Photoshop. For more information, see "Working with Photoshop" on page 322. Import Fireworks files into Adobe Flash Now you can move content - Adobe 38039927 | User Guide - Page 16
FIREWORKS CS3 11 User Guide Adobe Bridge Simplify file handling in Fireworks and within Adobe Creative Suite with Adobe Bridge, the next- , GIF, JPEG, Photoshop, and TIFF formats, and facilitates the exchange of metadata between Adobe software and other systems that support the XMP metadata standard - Adobe 38039927 | User Guide - Page 17
on-screen graphics. Its innovative solutions tackle the major problems facing graphic designers and webmasters. Using the wide range of or save a type of file specific to another program, such as Adobe Photoshop or Adobe Flash, if you want to continue working in the other program. Vector and - Adobe 38039927 | User Guide - Page 18
ADOBE FIREWORKS CS3 13 User Guide You can also use the Fireworks tools to edit imported graphics. You can import and edit files in JPEG, GIF, PNG, PSD, and many other - Adobe 38039927 | User Guide - Page 19
ADOBE FIREWORKS CS3 14 User Guide 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 - Adobe 38039927 | User Guide - Page 20
ADOBE FIREWORKS CS3 15 User Guide Creating a new document When you select File > New to create a new document in Fireworks, you create a Portable Network Graphic, or PNG document. PNG is the - Adobe 38039927 | User Guide - Page 21
ADOBE FIREWORKS CS3 16 User Guide import a file from Adobe Dreamweaver. If Fireworks supports a particular behavior, closed documents The File menu lists up to 10 recently closed documents in the Open Recent file formats, including Photoshop, Adobe FreeHand, Adobe Illustrator, uncompressed CorelDRAW, - Adobe 38039927 | User Guide - Page 22
ADOBE FIREWORKS CS3 17 User Guide Note: Fireworks saves 16-bit TIFF images at 24-bit color most EPS files, such as Photoshop EPS files, as flattened bitmap images, in which all objects are combined on a single layer. Some EPS files exported from Illustrator, however, retain their vector information - Adobe 38039927 | User Guide - Page 23
ADOBE FIREWORKS CS3 18 User Guide You can get HTML content into Fireworks in several ways: into Fireworks from any application that supports dragging. These applications include the following: • FreeHand 7 or later • Flash 3 or later • Photoshop 4 or later • Illustrator 7 or later • Microsoft Office - Adobe 38039927 | User Guide - Page 24
ADOBE FIREWORKS CS3 19 User Guide Pasting into Fireworks Pasting an object copied from another application into Fireworks places the object in the center of the active document. You can copy and paste an object or text in any of these formats from the Clipboard: • FreeHand 7 or later • Illustrator • - Adobe 38039927 | User Guide - Page 25
ADOBE FIREWORKS CS3 20 User Guide 2 Select Edit > Paste in Fireworks. If the bitmap image on the Clipboard have been installed. For specific instructions about installation, settings, and options, consult your camera or scanner documentation for the TWAIN module or Photoshop Acquire plug-in. On the - Adobe 38039927 | User Guide - Page 26
ADOBE FIREWORKS CS3 21 User Guide 3 Select Photoshop Plug-Ins. 4 Click Browse if the Select the Photoshop Plug-ins Folder (Windows) or Choose a Folder (Macintosh) dialog box doesn't automatically open. 5 Navigate to the folder containing the Photoshop supported by Fireworks. 6 Follow the instructions - Adobe 38039927 | User Guide - Page 27
ADOBE FIREWORKS CS3 22 User Guide 4 Follow the instructions to apply the desired settings. The imported image is opened as a new Fireworks document. Saving Fireworks files When you create a new document or open an - Adobe 38039927 | User Guide - Page 28
ADOBE FIREWORKS CS3 23 User Guide 4 Select either Images or Fireworks PNG in the Export As pop-up menu. If you select Images, each page will be saved in the default - Adobe 38039927 | User Guide - Page 29
ADOBE FIREWORKS CS3 24 User Guide 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, - Adobe 38039927 | User Guide - Page 30
ADOBE FIREWORKS CS3 25 User Guide 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 - Adobe 38039927 | User Guide - Page 31
ADOBE FIREWORKS CS3 26 User Guide 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 - Adobe 38039927 | User Guide - Page 32
ADOBE FIREWORKS CS3 27 User Guide To collapse the Property inspector when it is docked, do one of the following: • Click the expander arrow or the title of the Property inspector. • - Adobe 38039927 | User Guide - Page 33
ADOBE FIREWORKS CS3 28 User Guide 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 - Adobe 38039927 | User Guide - Page 34
ADOBE FIREWORKS CS3 29 User Guide • Select Group With > New Panel Group from the Options menu in the panel group's title bar. (The Group With command's name changes depending on the - Adobe 38039927 | User Guide - Page 35
ADOBE FIREWORKS CS3 30 User Guide 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 - Adobe 38039927 | User Guide - Page 36
FIREWORKS CS3 31 User Guide About the Quick Export button The Quick Export button lets you export your Fireworks files to a number of programs, including Dreamweaver, Flash, Photoshop, Illustrator, Adobe Director, Adobe GoLive®, and FreeHand. In addition, you can preview your files in the browser - Adobe 38039927 | User Guide - Page 37
Zooming and panning Fireworks lets you zoom in or out at a preset or user-defined magnification percentage. ADOBE FIREWORKS CS3 32 User Guide A. Hand tool B. Zoom tool C. Zoom pop-up menu To zoom in using preset increments, do one of the following: • Select the Zoom tool and click - Adobe 38039927 | User Guide - Page 38
ADOBE FIREWORKS CS3 33 User Guide Note: You cannot enter a magnification percentage in the Set Magnification text box. To zoom out based on a specific area: ❖ Alt-drag (Windows) or Option-drag ( - Adobe 38039927 | User Guide - Page 39
ADOBE FIREWORKS CS3 34 User Guide To close a document view window: ❖ Click the window's Close button. Controlling document redraw Display modes affect a document's onscreen representation, but not its object data or - Adobe 38039927 | User Guide - Page 40
ADOBE FIREWORKS CS3 35 User Guide To change the canvas color from the Modify menu: 1 Select Modify > Canvas > Canvas Color. 2 Select White, Transparent, or Custom. If you select Custom, click a color - Adobe 38039927 | User Guide - Page 41
ADOBE FIREWORKS CS3 36 User Guide 7 Select Current Page Only to apply the canvas size fill must be redrawn. Note: Guides, hotspot objects, and slice objects are resized when the document's image size is changed. Resizing bitmap objects always presents a unique problem-do you add or remove pixels - Adobe 38039927 | User Guide - Page 42
ADOBE FIREWORKS CS3 37 User Guide Original; trimmed canvas To trim or fit the canvas to the document contents: 1 Choose Select > Deselect to view the document properties in the Property inspector. 2 - Adobe 38039927 | User Guide - Page 43
ADOBE FIREWORKS CS3 38 User Guide 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. Using - Adobe 38039927 | User Guide - Page 44
ADOBE FIREWORKS CS3 39 User Guide Fireworks also has slice guides that allow you to slice a document for use on the web. Regular image guides are different from slice guides, however. For information on slice guides, see "Moving slice guides to edit slices" on page 204. To create a horizontal or - Adobe 38039927 | User Guide - Page 45
ADOBE FIREWORKS CS3 40 User Guide 2 Select the new grid color from the color box pop-up window, and click OK. To change the size of the grid's cells: 1 Select View > - Adobe 38039927 | User Guide - Page 46
41 Chapter 3: Selecting and Transforming Objects As you work in Fireworks CS3, 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 - Adobe 38039927 | User Guide - Page 47
ADOBE FIREWORKS CS3 42 User Guide • Select the object in the Layers panel. To preview what you would select if you were to click on an object beneath the pointer on - Adobe 38039927 | User Guide - Page 48
ADOBE FIREWORKS CS3 43 User Guide Note: The name appears in the title bar of the document whenever you select this item. For slices and buttons, the name is the filename - Adobe 38039927 | User Guide - Page 49
ADOBE FIREWORKS CS3 44 User Guide To show all objects: ❖ Select View > Show All. Note: To hide objects whether they are selected or not, you can click or drag along the - Adobe 38039927 | User Guide - Page 50
ADOBE FIREWORKS CS3 45 User Guide Note: The Magic Wand tool also has a Tolerance setting. For more information, see "Selecting areas of similar color" on page 46. Creating pixel selection marquees - Adobe 38039927 | User Guide - Page 51
ADOBE FIREWORKS CS3 46 User Guide Selecting areas of similar color The Magic Wand tool allows you to select areas of pixels that are similar in color. By adjusting the Magic - Adobe 38039927 | User Guide - Page 52
ADOBE FIREWORKS CS3 47 User Guide marquee border without affecting the pixels beneath it. You can manually add pixels to or delete pixels from a marquee border using Press Shift and use the arrow keys to move the marquee in 10-pixel increments. To reposition a selection with the Spacebar: 1 Begin - Adobe 38039927 | User Guide - Page 53
ADOBE FIREWORKS CS3 48 User Guide To subtract pixels from a selection: ❖ Hold down Alt (Windows) or Option (Macintosh) and use a bitmap selection tool to select the pixel area to be punched - Adobe 38039927 | User Guide - Page 54
ADOBE FIREWORKS CS3 49 User Guide A pixel selection is created on the selected bitmap from the intersection of the opaque areas of the two overlapping objects. When you position the pointer - Adobe 38039927 | User Guide - Page 55
ADOBE FIREWORKS CS3 50 User Guide Selecting an area around an existing marquee You can create an additional marquee to frame an existing marquee at a specified width. This lets you create - Adobe 38039927 | User Guide - Page 56
ADOBE FIREWORKS CS3 51 User Guide Saving marquee selections You can save the size, shape, and location of a selection to reapply later. You can also save multiple marquee selections. To save a - Adobe 38039927 | User Guide - Page 57
ADOBE FIREWORKS CS3 52 User Guide • "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 - Adobe 38039927 | User Guide - Page 58
ADOBE FIREWORKS CS3 53 User Guide Inserting a new bitmap by cutting or copying You can selection in 1-pixel increments. • Hold down Shift while pressing any arrow key to move the selection in 10-pixel increments. • In the Property inspector, enter the X and Y coordinates for the location of the - Adobe 38039927 | User Guide - Page 59
ADOBE FIREWORKS CS3 54 User Guide Note: You cannot use the Duplicate or Clone commands with bitmap selections. Use the Subselection tool or Rubber Stamp tool to duplicate parts of a bitmap - Adobe 38039927 | User Guide - Page 60
ADOBE FIREWORKS CS3 55 User Guide A. Center point B. Transform handles Object rotated, scaled, skewed, distorted, and flipped vertically and horizontally To transform selected objects using the transform handles: 1 Select a transformation tool. - Adobe 38039927 | User Guide - Page 61
ADOBE FIREWORKS CS3 56 User Guide Note: You can also rotate the document canvas. For more information, see "Rotating the canvas" on page 36. To rotate a selected object 90° or 180°: ❖ - Adobe 38039927 | User Guide - Page 62
ADOBE FIREWORKS CS3 57 User Guide To achieve the illusion of perspective: ❖ Drag a corner point. Distorting objects You change the size and proportions of an object by dragging a selection handle with - Adobe 38039927 | User Guide - Page 63
ADOBE FIREWORKS CS3 58 User Guide Organizing objects When working with multiple objects in a single document, you can use several techniques to organize the document: • You can group individual objects to - Adobe 38039927 | User Guide - Page 64
ADOBE FIREWORKS CS3 59 User Guide To select the group that contains a subselected object, do one of the following: • Right-click (Windows) or Control-click (Macintosh) anywhere in the group and - Adobe 38039927 | User Guide - Page 65
ADOBE FIREWORKS CS3 60 User Guide • Select Modify > Align > Center Horizontal to align the center points of the objects along a horizontal axis. • Select Modify > Align > Bottom to align the objects to - Adobe 38039927 | User Guide - Page 66
61 Chapter 4: Working with Bitmaps Bitmaps are graphics composed of small colored squares called pixels, which combine like the tiles of a mosaic to create an image. Examples of bitmap graphics include photographs, scanned images, and graphics created from paint programs. They are sometimes referred - Adobe 38039927 | User Guide - Page 67
ADOBE FIREWORKS CS3 62 User Guide When you create a new bitmap object, it is added to the current layer. In the Layers panel with layers expanded, you can see a thumbnail and - Adobe 38039927 | User Guide - Page 68
ADOBE FIREWORKS CS3 63 User Guide Accessing photo editing tools To make it easy for Rulers, Show/Hide Grid, Snap/Don't Snap to Grid, Edit Grid, Show/Hide Guides, Snap/Don't Snap to Guides, Lock/Unlock Guides, Edit Guides The tools contained in the Image Editing panel are the same tools you'll find in - Adobe 38039927 | User Guide - Page 69
ADOBE FIREWORKS CS3 64 User Guide Painting bitmap objects You can use the Brush tool to paint a brush stroke using the color in the Stroke Color box, or you can use - Adobe 38039927 | User Guide - Page 70
ADOBE FIREWORKS CS3 65 User Guide 2 Open a Fireworks document or any file that Fireworks can open. For more information, see "Slices, Rollovers, and Hotspots" on page 200. 3 Select the Eyedropper tool - Adobe 38039927 | User Guide - Page 71
ADOBE FIREWORKS CS3 66 User Guide To feather the edges of a pixel selection as you make a pixel selection: 1 Select a bitmap selection tool from the Tools panel. 2 Select Feather from the Edge - Adobe 38039927 | User Guide - Page 72
ADOBE FIREWORKS CS3 67 User Guide 3 Move to a different part of the image and drag the pointer. much as a photographer controls depth of field. The Sharpen tool can be useful for repairing scanning problems or out-of-focus photographs. The Smudge tool lets you gently blend colors, as when creating a - Adobe 38039927 | User Guide - Page 73
ADOBE FIREWORKS CS3 68 User Guide To smudge colors in an image: 1 Select the Smudge tool. 2 Set the tool options in the Property inspector: Size specifies the size of the brush - Adobe 38039927 | User Guide - Page 74
ADOBE FIREWORKS CS3 69 User Guide Original photograph; after using the Red-eye Removal tool To correct the red-eye effect in a photograph: 1 Select the Red-eye Removal tool from its - Adobe 38039927 | User Guide - Page 75
ADOBE FIREWORKS CS3 70 User Guide 3 Click the From color box to select the color probe, and select a color from the pop-up menu to specify the color you want to - Adobe 38039927 | User Guide - Page 76
ADOBE FIREWORKS CS3 71 User Guide The crop handles appear around the entire selected bitmap or filters in an irreversible, permanent way, you can select them from the Filters menu. However, Adobe recommends that you use filters as Live Filters whenever possible. You can apply filters from the Filters - Adobe 38039927 | User Guide - Page 77
ADOBE FIREWORKS CS3 72 User Guide Fireworks applies the Live Filter only to the new bitmap object, simulating the application of a filter to a pixel selection. Note: Although Live Filters are more - Adobe 38039927 | User Guide - Page 78
ADOBE FIREWORKS CS3 73 User Guide To adjust highlights, midtones, and shadows: 1 Select the bitmap image. the highlights using values from 255 to 0. • The center slider adjusts the midtones using values from 10 to 0. • The left slider adjusts the shadows using values from 0 to 255. As you move - Adobe 38039927 | User Guide - Page 79
ADOBE FIREWORKS CS3 74 User Guide To adjust highlights, midtones, and shadows automatically: 1 Select the for a color cast caused by lighting conditions. The grid in the Curves dialog box illustrates two brightness values: The horizontal axis represents the original brightness of the pixels, shown in - Adobe 38039927 | User Guide - Page 80
ADOBE FIREWORKS CS3 75 User Guide Curves dialog box 3 In the Channel pop-up menu, select whether you Highlight, or Midtone eyedropper in the Levels or Curves dialog box. To adjust the tonal balance manually using the tonal eyedroppers: 1 Open the Levels or Curves dialog box, and select a color channel - Adobe 38039927 | User Guide - Page 81
ADOBE FIREWORKS CS3 76 User Guide 2 Select the appropriate eyedropper to reset the tonal values in the image: • Click the lightest pixel in the image with the Highlight eyedropper to reset - Adobe 38039927 | User Guide - Page 82
ADOBE FIREWORKS CS3 77 User Guide To add a Color Fill Live Filter to a selected object: 1 In the Property inspector, click the Add Live Filters button, and then select Adjust Color > Color - Adobe 38039927 | User Guide - Page 83
ADOBE FIREWORKS CS3 78 User Guide To change an RGB image to a two-tone image or to add color to a grayscale image: ❖ Select Colorize in the Hue/Saturation dialog box. Note: - Adobe 38039927 | User Guide - Page 84
ADOBE FIREWORKS CS3 79 User Guide Blurring and sharpening bitmaps Fireworks has a set of blurring and sharpening options that you can apply as Live Filters or as irreversible, permanent filters. Blurring - Adobe 38039927 | User Guide - Page 85
ADOBE FIREWORKS CS3 80 User Guide 3 Drag the Angle dial to set the direction of the blur effect. 4 Drag the Distance slider to set the strength of the blur effect. Values - Adobe 38039927 | User Guide - Page 86
ADOBE FIREWORKS CS3 81 User Guide Original; after applying Find Edges To apply the Find Edges filter to a selected area, do one of the following: • In the Property inspector, click the - Adobe 38039927 | User Guide - Page 87
ADOBE FIREWORKS CS3 82 User Guide Original; after sharpening To sharpen an image using a sharpen option: 1 Select the image. 2 Do one of the following to select a sharpen option: • In the Property - Adobe 38039927 | User Guide - Page 88
ADOBE FIREWORKS CS3 83 User Guide 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. - Adobe 38039927 | User Guide - Page 89
84 Chapter 5: Working with Vector Objects A vector object is a computer graphic whose shape is defined by a path. The shape of a vector path is determined by points that are plotted along the path. A vector object's stroke color follows the path. Its fill occupies the area inside the path. The - Adobe 38039927 | User Guide - Page 90
ADOBE FIREWORKS CS3 85 User Guide For the Rectangle or Ellipse tool, Shift-drag to constrain shapes to squares or circles. To constrain a shape and draw from the center point: ❖ Position - Adobe 38039927 | User Guide - Page 91
ADOBE FIREWORKS CS3 86 User Guide To draw a polygon: 1 In the Vector section of the Tools panel, select the Polygon tool, which is one of the basic shape drawing tools. 2 In - Adobe 38039927 | User Guide - Page 92
ADOBE FIREWORKS CS3 87 User Guide Chamfer Rectangle draws object groups that appear as rectangles with chamfers, corners that are rounded to the inside of the rectangle. You can edit the - Adobe 38039927 | User Guide - Page 93
ADOBE FIREWORKS CS3 88 User Guide • Control+Command-click the Direction control point to reset the from the Auto Shape Properties panel. Note: 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 - Adobe 38039927 | User Guide - Page 94
ADOBE FIREWORKS CS3 89 User Guide 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 - Adobe 38039927 | User Guide - Page 95
ADOBE FIREWORKS CS3 90 User Guide Adjusting connector line Auto Shapes Connector lines have five control points. There are control points for placing the start and end points, for adjusting the - Adobe 38039927 | User Guide - Page 96
ADOBE FIREWORKS CS3 91 User Guide To resize a slice of a selected pie: ❖ Drag a drag-to-segment control point on the outer perimeter of the shape. To reset the a selected pie to - Adobe 38039927 | User Guide - Page 97
ADOBE FIREWORKS CS3 92 User Guide To adjust the number of turns in a selected spiral: ❖ Drag the spirals control point. To open or . Fireworks connects to the web and navigates to the Fireworks Exchange website. 3 Follow the onscreen instructions to select new Auto Shapes and add them to Fireworks. - Adobe 38039927 | User Guide - Page 98
ADOBE FIREWORKS CS3 93 User Guide Drawing freeform paths You can draw freeform vector paths the Vector Path tool The Vector Path tool has a wide variety of brush stroke categories, including Air Brush, Calligraphy, Charcoal, Crayon, and Unnatural. Each category typically has a choice of strokes, - Adobe 38039927 | User Guide - Page 99
ADOBE FIREWORKS CS3 94 User Guide Drawing paths by plotting points One way to draw and edit vector objects in Fireworks is to plot points as if drawing a connect-the-dots - Adobe 38039927 | User Guide - Page 100
ADOBE FIREWORKS CS3 95 User Guide • To close the path, click the first point you plotted. The beginning and end points of a closed path are the same. Note: Loops formed by a - Adobe 38039927 | User Guide - Page 101
ADOBE FIREWORKS CS3 96 User Guide 2 Click a point with the Subselection tool to select it. Selected corner points appear as solid blue squares. 3 Drag the point or use the arrow keys - Adobe 38039927 | User Guide - Page 102
ADOBE FIREWORKS CS3 97 User Guide Converting path segments to straight or curved Straight path segments are intersected by corner points. Curved path segments contain curve points. You can convert a straight - Adobe 38039927 | User Guide - Page 103
The handles retract, and the adjacent segments straighten. ADOBE FIREWORKS CS3 98 User Guide Selecting points The Subselection tool allows you to select multiple points. Before selecting a point with the Subselection tool, you must select the path using the - Adobe 38039927 | User Guide - Page 104
ADOBE FIREWORKS CS3 99 User Guide To change the shape of a path segment: ❖ Drag a point handle with the Subselection tool. Alt-drag (Windows) or Option-drag (Macintosh) to drag one handle - Adobe 38039927 | User Guide - Page 105
ADOBE FIREWORKS CS3 100 User Guide To merge two open paths: 1 Select the Pen tool in the Tools panel. 2 Click the end point of one of the paths. 3 Move the pointer - Adobe 38039927 | User Guide - Page 106
ADOBE FIREWORKS CS3 101 User Guide As you move the pointer over a selected path, it changes to the push or pull pointer, depending on its location relative to the selected path. - Adobe 38039927 | User Guide - Page 107
ADOBE FIREWORKS CS3 102 User Guide 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 - Adobe 38039927 | User Guide - Page 108
ADOBE FIREWORKS CS3 103 User Guide 2 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 - Adobe 38039927 | User Guide - Page 109
ADOBE FIREWORKS CS3 104 User Guide To create one continuous path from two open paths: 1 Select the Subselection tool in the Tools panel. 2 Select two end points on two open paths. 3 - Adobe 38039927 | User Guide - Page 110
ADOBE FIREWORKS CS3 105 User Guide To create a closed path that encloses the area common to all selected closed paths: ❖ Select Modify > Combine Paths > Intersect. The resulting path assumes the stroke - Adobe 38039927 | User Guide - Page 111
ADOBE FIREWORKS CS3 106 User Guide You might want to use Simplify if you have a straight line that contains more than two points, for example. (Only two points are necessary to - Adobe 38039927 | User Guide - Page 112
ADOBE FIREWORKS CS3 107 User Guide 4 Specify a corner type: miter, round, or beveled. 5 If you chose miter, set the miter limit, the point at which a miter corner automatically becomes a beveled corner. - Adobe 38039927 | User Guide - Page 113
Move points Scale points Rotate points Mirror points Fillet points Select entire contour Select all points Deselect all points Incrementally grow or shrink the selection ADOBE FIREWORKS CS3 108 User Guide - Adobe 38039927 | User Guide - Page 114
to paths and images extend the design possibilities. You can import text while retaining rich text format attributes. Also, when you import an Adobe Photoshop document containing text, the text remains editable. Fireworks handles missing fonts upon import by asking you to select a substitute font or - Adobe 38039927 | User Guide - Page 115
ADOBE FIREWORKS CS3 110 User Guide The Property inspector when the Text tool is selected Naming a text object As you add text to your Fireworks document, that text object is automatically - Adobe 38039927 | User Guide - Page 116
ADOBE FIREWORKS CS3 111 User Guide 6 When you have finished entering text, do one of the following: • Click outside the text block. • Select another tool in the Tools panel. • Press Escape. - Adobe 38039927 | User Guide - Page 117
ADOBE FIREWORKS CS3 112 User Guide Formatting 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 - Adobe 38039927 | User Guide - Page 118
Note: The fonts that were used most recently appear at the top of the Font pop-up menu. ADOBE FIREWORKS CS3 113 User Guide 2 To change the font size, drag the Font Size pop-up slider or enter a value in the text box. Font size is measured in points. 3 - Adobe 38039927 | User Guide - Page 119
ADOBE FIREWORKS CS3 114 User Guide A. Fill Color box • In the Tools panel, click the Fill Color box and select a color from the color pop-up window, or sample a color from - Adobe 38039927 | User Guide - Page 120
ADOBE FIREWORKS CS3 115 User Guide To set kerning: 1 Do one of the following to select the and Command (Macintosh) while pressing the Left Arrow or Right Arrow keys to adjust kerning by 10% increments. Setting leading Leading determines the distance between adjacent lines in a paragraph. Leading can - Adobe 38039927 | User Guide - Page 121
ADOBE FIREWORKS CS3 116 User Guide Setting text orientation A text block can be oriented horizontally or vertically. By default, text is oriented horizontally. Horizontal and vertical orientation Text can also flow - Adobe 38039927 | User Guide - Page 122
ADOBE FIREWORKS CS3 117 User Guide Vertical text can be aligned to the top or bottom of a text block, centered within the text block, or fully justified between both the top - Adobe 38039927 | User Guide - Page 123
ADOBE FIREWORKS CS3 118 User Guide Smoothing text edges To smooth out a text edge, you "anti- of options from the Anti-Aliasing pop-up menu: Note: When you open vector files, such as Adobe FreeHand files, in Fireworks, text is anti-aliased. You can edit this attribute using the Property inspector. - Adobe 38039927 | User Guide - Page 124
ADOBE FIREWORKS CS3 119 User Guide Setting baseline shift Baseline shift determines how closely text sits above or below its natural baseline. If there is no baseline shift, the text sits - Adobe 38039927 | User Guide - Page 125
ADOBE FIREWORKS CS3 120 User Guide 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 - Adobe 38039927 | User Guide - Page 126
ADOBE FIREWORKS CS3 121 User Guide Changing text orientation and direction on a path The order in which you draw a path establishes the direction of the text attached to it. For example, - Adobe 38039927 | User Guide - Page 127
ADOBE FIREWORKS CS3 122 User Guide You can still edit the transformed text, although severe transformations may make the text difficult to read. When a text block transformation causes text to be - Adobe 38039927 | User Guide - Page 128
ADOBE FIREWORKS CS3 123 User Guide 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. For more information, see "Opening - Adobe 38039927 | User Guide - Page 129
ADOBE FIREWORKS CS3 124 User Guide 4 Click OK. The next time you open a document with , Fireworks prompts you to select a language dictionary every time you spell-check a document. Note: The Adobe.tlx option is always selected at the top of the Dictionary list. For more information about this option - Adobe 38039927 | User Guide - Page 130
ADOBE FIREWORKS CS3 125 User Guide 2 Select the desired options in the Spelling Setup dialog box: • Select one or more language dictionaries. Note: The Macromedia.tlx option is always selected at - Adobe 38039927 | User Guide - Page 131
126 Chapter 7: Applying Color, Strokes, and Fills Fireworks CS3 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 - Adobe 38039927 | User Guide - Page 132
ADOBE FIREWORKS CS3 127 User Guide Note: The Paint Bucket tool fills pixel selections and vector objects with the color shown in the Fill Color box in the Tools panel. Color - Adobe 38039927 | User Guide - Page 133
ADOBE FIREWORKS CS3 128 User Guide Changing swatch groups You can easily switch to another swatch group or create your own. The Swatches panel Options menu contains the following swatch groups: - Adobe 38039927 | User Guide - Page 134
ADOBE FIREWORKS CS3 129 User Guide 4 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 - Adobe 38039927 | User Guide - Page 135
FIREWORKS CS3 130 User Guide Although CMY is a color model option, graphics directly exported from Fireworks are not ideal for printing. To repurpose exported Fireworks graphics for print, you can import them into Adobe Illustrator, Adobe Photoshop, or Adobe FreeHand, which automatically perform - Adobe 38039927 | User Guide - Page 136
ADOBE FIREWORKS CS3 131 User Guide To pick a color from the Color Mixer: 1 Deselect all objects before mixing a color to prevent unwanted object editing as you mix colors. 2 Click either the - Adobe 38039927 | User Guide - Page 137
ADOBE FIREWORKS CS3 132 User Guide Note: By default, the color's RGB values appear in the Info panel and the Color Mixer, and its hexadecimal value appears in the color pop- - Adobe 38039927 | User Guide - Page 138
ADOBE FIREWORKS CS3 133 User Guide 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. Note: Not all browsers support PNG files. Color management using the Color Palette panel - Adobe 38039927 | User Guide - Page 139
To create and swap color palettes for your document: 1 Select the Mixers tab in the Color Palette panel. ADOBE FIREWORKS CS3 134 User Guide 2 Use the four fill color boxes at the bottom of the panel to set the four base colors for your document. A palette is automatically created. 3 - Adobe 38039927 | User Guide - Page 140
To create a color gradation series using the Blender tab: 1 Select the Blender tab in the Color Palette panel. ADOBE FIREWORKS CS3 135 User Guide 2 Use the fill color boxes at the bottom of the panel to select beginning and ending colors for the series. 3 Use the Steps pop-up - Adobe 38039927 | User Guide - Page 141
ADOBE FIREWORKS CS3 136 User Guide 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 - Adobe 38039927 | User Guide - Page 142
ADOBE FIREWORKS CS3 137 User Guide Use the options in the Property inspector or the Stroke Options pop-up window to change the stroke applied to an object. To change the - Adobe 38039927 | User Guide - Page 143
Creating custom strokes You can use the Edit Stroke dialog box to change specific stroke characteristics. ADOBE FIREWORKS CS3 138 User Guide 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 - Adobe 38039927 | User Guide - Page 144
ADOBE FIREWORKS CS3 139 User Guide 6 To select a dotted or dashed line, select an option from the Dash pop-up menu. 7 To set the lengths of dashes and spaces for a dotted - Adobe 38039927 | User Guide - Page 145
ADOBE FIREWORKS CS3 140 User Guide 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 - Adobe 38039927 | User Guide - Page 146
ADOBE FIREWORKS CS3 141 User Guide Editing solid fills A solid fill is a solid color that fills the interior of an object. You can change an object's fill color in the Tools - Adobe 38039927 | User Guide - Page 147
ADOBE FIREWORKS CS3 142 User Guide 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, - Adobe 38039927 | User Guide - Page 148
ADOBE FIREWORKS CS3 143 User Guide Edit Gradient pop-up window To open the Edit Gradient pop-up window: 1 Select an object that has a gradient fill or select a gradient fill from - Adobe 38039927 | User Guide - Page 149
ADOBE FIREWORKS CS3 144 User Guide To use the Gradient tool: 1 Click the Paint Bucket tool in the Tools panel and select the Gradient tool from the pop-up menu. 2 Select - Adobe 38039927 | User Guide - Page 150
ADOBE FIREWORKS CS3 145 User Guide 2 Select an edge option: Hard Edge, Anti-Alias, or Feather. 3 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 - Adobe 38039927 | User Guide - Page 151
ADOBE FIREWORKS CS3 146 User Guide • Select a texture from the pop-up menu. • Select Other from the pop-up menu and navigate to a texture file to use an external texture. Note: - Adobe 38039927 | User Guide - Page 152
147 Chapter 8: Using Live Filters Fireworks CS3 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 - Adobe 38039927 | User Guide - Page 153
ADOBE FIREWORKS CS3 148 User Guide Note: A newly created fill assumes the current color displayed in the Fill Color box in the Tools panel. You can customize each Live Filter to - Adobe 38039927 | User Guide - Page 154
ADOBE FIREWORKS CS3 149 User Guide Applying beveled edges Applying a beveled edge to an object gives it a raised look. You can create an inner bevel or an outer bevel. A rectangle, with - Adobe 38039927 | User Guide - Page 155
ADOBE FIREWORKS CS3 150 User Guide To apply a solid shadow: 1 In the Property inspector, click the Add Live 3 When you finish, click outside the window or press Enter to close it. Applying filters and Photoshop plug-ins as Live Filters You can apply all the built-in filters and plug-ins in the Add - Adobe 38039927 | User Guide - Page 156
Guide Plug-ins from the Filters menu When you install an Adobe 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 share a Fireworks file in which a Photoshop plug-in is applied as a Live Filter - Adobe 38039927 | User Guide - Page 157
ADOBE FIREWORKS CS3 152 User Guide 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 - Adobe 38039927 | User Guide - Page 158
ADOBE FIREWORKS CS3 153 User Guide To create a custom Live Filter using the Property inspector: 1 Apply Live Filter settings to selected objects. For more information, see "Applying Live Filters" on page - Adobe 38039927 | User Guide - Page 159
ADOBE FIREWORKS CS3 154 User Guide A. Save button 5 Enter a command name and click OK to add the command to the Commands menu. - Adobe 38039927 | User Guide - Page 160
settings for canvas, size, color, image resolution, and guides. These settings can be set on a per-page discrete planes, as though the components of the illustration were drawn on separate tracing paper overlays. A similar to layer sets in Adobe Photoshop. Photoshop layers are similar to individual - Adobe 38039927 | User Guide - Page 161
ADOBE FIREWORKS CS3 156 User Guide Adding and removing pages Using the Pages panel, you can add new pages, delete unwanted pages, and duplicate existing pages. When you create a new page, a - Adobe 38039927 | User Guide - Page 162
ADOBE FIREWORKS CS3 157 User Guide Using a master page If you have some elements that you want to be common across all of your pages, you can use a master page. When - Adobe 38039927 | User Guide - Page 163
ADOBE FIREWORKS CS3 158 User Guide Note: If you use the Quick Export button to export folder. You can select a specific folder or use the Fireworks default, which is a folder named images. 10 Click Export. After export, you'll see the files Fireworks exported on your hard drive. If you chose to - Adobe 38039927 | User Guide - Page 164
ADOBE FIREWORKS CS3 159 User Guide 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 - Adobe 38039927 | User Guide - Page 165
ADOBE FIREWORKS CS3 160 User Guide To activate a layer, do one of the following: • Click the layer name in the Layers panel. • Select an object on that layer. Adding and removing - Adobe 38039927 | User Guide - Page 166
ADOBE FIREWORKS CS3 161 User Guide Viewing layers The Layers panel displays objects and layers in a hierarchical structure. If a document contains many objects and layers, the Layers panel can become cluttered - Adobe 38039927 | User Guide - Page 167
ADOBE FIREWORKS CS3 162 User Guide Protecting layers and objects The Layers panel offers a number of options that let you control the accessibility of objects. You can protect objects in your - Adobe 38039927 | User Guide - Page 168
ADOBE FIREWORKS CS3 163 User Guide Merging down causes all selected vector objects and bitmap objects to be flattened into the bitmap object that lies just beneath the bottommost selected object. - Adobe 38039927 | User Guide - Page 169
ADOBE FIREWORKS CS3 164 User Guide 2 Type the new name, and then click outside the window or press Enter. Note: When you rename a slice, that name is used when the slice is exported. About importing Photoshop grouped layers Photoshop other vector-illustration applications such as Adobe FreeHand, you - Adobe 38039927 | User Guide - Page 170
ADOBE FIREWORKS CS3 165 User Guide When a vector mask is selected, the Property inspector displays , see "Changing the way masks are applied" on page 176. 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 - Adobe 38039927 | User Guide - Page 171
ADOBE FIREWORKS CS3 166 User Guide Bitmap mask properties in the Property inspector when a bitmap tool is selected By default, most bitmap masks are applied using their grayscale appearance, but you - Adobe 38039927 | User Guide - Page 172
ADOBE FIREWORKS CS3 167 User Guide If you are masking multiple objects, the objects must be grouped. For more information about grouping objects, see "Grouping objects" on page 58. 5 Do one - Adobe 38039927 | User Guide - Page 173
ADOBE FIREWORKS CS3 168 User Guide To create a mask using the Paste Inside command: 1 Select the object or objects to use as the paste inside contents. 2 Position the object or objects - Adobe 38039927 | User Guide - Page 174
ADOBE FIREWORKS CS3 169 User Guide 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 - Adobe 38039927 | User Guide - Page 175
ADOBE FIREWORKS CS3 170 User Guide Image with mask applied The mask as it appears in the Layers panel Note: For more information about modifying a bitmap mask's appearance by drawing on - Adobe 38039927 | User Guide - Page 176
ADOBE FIREWORKS CS3 171 User Guide 5 Draw on the empty mask. In the areas where you draw, it, see "Modifying a mask's appearance" on page 175. About importing and exporting Photoshop layer masks In Photoshop, you can mask images using layer masks or grouped layers. Fireworks lets you successfully - Adobe 38039927 | User Guide - Page 177
ADOBE FIREWORKS CS3 172 User Guide Fireworks masks can also be exported to Photoshop. They are converted into Photoshop layer masks. If the masked objects include text and you want to maintain text editability in Photoshop, you must select Maintain Editability over Appearance when exporting. Note: - Adobe 38039927 | User Guide - Page 178
ADOBE FIREWORKS CS3 173 User Guide Editing masks You can modify masks in many ways. By modifying a mask's position, shape, and color, you can change the visibility of masked objects. You - Adobe 38039927 | User Guide - Page 179
ADOBE FIREWORKS CS3 174 User Guide When selected, masks have a green highlight and masked objects have a blue highlight. Moving masks and masked objects You can reposition masks and masked objects. They - Adobe 38039927 | User Guide - Page 180
2 Select the Subselection tool and drag the mask's move handle to a new location. ADOBE FIREWORKS CS3 175 User Guide To move masked objects independently of the mask using the move handle: 1 Select the mask on the canvas using the Pointer tool. 2 Drag the move - Adobe 38039927 | User Guide - Page 181
ADOBE FIREWORKS CS3 176 User Guide To modify a selected mask's color, do one of the following: • For grayscale bitmap masks, use the bitmap tools to draw on the mask using various - Adobe 38039927 | User Guide - Page 182
ADOBE FIREWORKS CS3 177 User Guide A bitmap mask applied using its alpha channel Both vector and bitmap masks can be applied using their grayscale appearance. Bitmap masks are applied using their - Adobe 38039927 | User Guide - Page 183
ADOBE FIREWORKS CS3 178 User Guide 2 Select Modify > Flatten Selection. Adding objects to a masked selection You can add more objects to an existing masked selection. To add masked objects to a masked - Adobe 38039927 | User Guide - Page 184
ADOBE FIREWORKS CS3 179 User Guide Blending and transparency Compositing is the process of varying the transparency or color interaction of two or more overlapping objects. In Fireworks, blending modes allow - Adobe 38039927 | User Guide - Page 185
ADOBE FIREWORKS CS3 180 User Guide Pin Light replaces the color, depending on the blend color. including those in the background image. For general information about blending modes-in particular, Photoshop blending modes-see the following website: www.pegtop.net/delphi/articles/blendmodes/. Blending - Adobe 38039927 | User Guide - Page 186
ADOBE FIREWORKS CS3 181 User Guide Difference Hue Saturation Color Luminosity Invert Tint Erase Adjusting opacity and applying blends You can use the Property inspector or the Layers panel to adjust - Adobe 38039927 | User Guide - Page 187
ADOBE FIREWORKS CS3 182 User Guide About the Color Fill Live Filter Fireworks also offers a Live Filter that allows you to adjust the color of an object by altering the object's - Adobe 38039927 | User Guide - Page 188
183 Chapter 10: Using Styles, Symbols, and URLs Fireworks provides three panels in which you has many predefined styles. You can add, change, and remove styles. The Fireworks DVD and the Adobe website have many more predefined styles that you can import into Fireworks. You can also export styles and - Adobe 38039927 | User Guide - Page 189
ADOBE FIREWORKS CS3 184 User Guide Styles panel When you apply a style to an object, you can later update the style without affecting the original object. Fireworks does not keep track - Adobe 38039927 | User Guide - Page 190
ADOBE FIREWORKS CS3 185 User Guide 4 Name the style if you want, and click OK. An icon depicting the style appears in the Styles panel. To base a new style on an - Adobe 38039927 | User Guide - Page 191
ADOBE FIREWORKS CS3 186 User Guide 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 - Adobe 38039927 | User Guide - Page 192
ADOBE FIREWORKS CS3 187 User Guide 3 Select a symbol type: Graphic, Animation, or Button. 4 If you want to use 9-slice scaling guides to scale the symbol, select the Enable 9-slice scaling guides check box. For more information on the 9-slice scaling feature see "Using 9-slice scaling" on page 188. - Adobe 38039927 | User Guide - Page 193
ADOBE FIREWORKS CS3 188 User Guide • Select an instance and select Modify > Symbol > Edit Symbol. • close the window. The symbol and all instances reflect the modifications. Note: Use the 9-slice scaling guides in the symbol editor to make sure the symbol shape is not distorted when it is resized. - Adobe 38039927 | User Guide - Page 194
The following figure shows how images are scaled using the 9-slice scaling feature. ADOBE FIREWORKS CS3 189 User Guide The 9-slice scaling guides are enabled in the Symbol Editor and Button Editor for all symbols by default. To scale a symbol using 9-slice scaling: 1 Double click the symbol or - Adobe 38039927 | User Guide - Page 195
ADOBE FIREWORKS CS3 190 User Guide Creating and using rich graphic symbols Rich symbols are a type of graphic symbol that can be intelligently scaled and given specific attributes using a JavaScript (JSF) - Adobe 38039927 | User Guide - Page 196
CS3 191 User Guide 7 Click the browse button in the upper right corner of the panel and browse to the symbol PNG file. This is saved in the \Application Data\Adobe\Fireworks 9\Common Library\Custom Symbols (Windows), or /Application Support/Adobe/Fireworks9/Common Library - Adobe 38039927 | User Guide - Page 197
ADOBE FIREWORKS CS3 192 User Guide The Create Symbol Script panel allows non-programmers to assign some simple symbol attributes and create the JavaScript file automatically. To open this panel, select - Adobe 38039927 | User Guide - Page 198
ADOBE FIREWORKS CS3 193 User Guide function applyCurrentValues() { var currValues = Widget.elem.customData["currentValues"]; //color_bg is the Layer name in the PNG that will change colors var color_bg = Widget.GetObjectByName("color_bg"); - Adobe 38039927 | User Guide - Page 199
ADOBE FIREWORKS CS3 194 User Guide • Opacity • Filters • Width and height • x and y coordinates Note: Button instances have additional properties that can be edited without affecting the symbol. For more information about - Adobe 38039927 | User Guide - Page 200
The imported symbols appear in the Library panel. ADOBE FIREWORKS CS3 195 User Guide You can also import and export individual symbols into and out of the Library panels of multiple documents by dragging and dropping or copying and - Adobe 38039927 | User Guide - Page 201
ADOBE FIREWORKS CS3 196 User Guide 5 Select Update from the Library panel Options menu. Note: To is usually http:// for web pages. For example, http://www.adobe.com/support/fireworks is the absolute URL for the Fireworks Support web page. Absolute URLs remain accurate regardless of the location of - Adobe 38039927 | User Guide - Page 202
ADOBE FIREWORKS CS3 197 User Guide Relative URLs are usually the simplest ones to use you create are stored in the URL Libraries folder in the Adobe/Fireworks folder in your user-specific Application Data (Windows) or Application Support (Macintosh) folder. For information on locating this folder, - Adobe 38039927 | User Guide - Page 203
ADOBE FIREWORKS CS3 198 User Guide To simultaneously add a URL to the library while assigning it to a web object: 1 Select the object. 2 Do one of the following to enter the URL: • - Adobe 38039927 | User Guide - Page 204
2 Select an HTML file and click Open. All URLs in this file are imported. ADOBE FIREWORKS CS3 199 User Guide - Adobe 38039927 | User Guide - Page 205
files. Slicing an image has at least three major advantages: Optimizing One challenge of web graphic design is ensuring that images download quickly without sacrificing quality. Slicing enables you to optimize each individual slice using the most appropriate file format and compression settings - Adobe 38039927 | User Guide - Page 206
ADOBE FIREWORKS CS3 201 User Guide Updating parts of a web page Slicing allows you to easily update tool. 2 Drag to draw the slice object. The slice object appears on the Web Layer, and the slice guides appear in the document. Note: You can adjust the position of a slice as you drag to draw it. - Adobe 38039927 | User Guide - Page 207
ADOBE FIREWORKS CS3 202 User Guide To create an HTML slice: 1 Draw a slice object and leave it a rectangular slice may swap unwanted background graphics along with the swap image. Fireworks solves this problem by allowing you to draw slices in any polygonal shape using the Polygon Slice tool. You - Adobe 38039927 | User Guide - Page 208
ADOBE FIREWORKS CS3 203 User Guide 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 - Adobe 38039927 | User Guide - Page 209
ADOBE FIREWORKS CS3 204 User Guide To change the color of a selected slice object: ❖ In the Property inspector, select a new color from the color box. To change the color of slice guides: 1 Select View > Guides > Edit Guides. 2 Select a new color from the Slice Color section of the Guides dialog box - Adobe 38039927 | User Guide - Page 210
ADOBE FIREWORKS CS3 205 User Guide The pointer changes to the guide movement pointer. 2 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 - Adobe 38039927 | User Guide - Page 211
ADOBE FIREWORKS CS3 206 User Guide • The Behaviors panel allows you to create more complex interactivity. The Behaviors panel contains a variety of interactive behaviors you can attach to slices. By attaching - Adobe 38039927 | User Guide - Page 212
ADOBE FIREWORKS CS3 207 User Guide The simplest rollover swaps an image in Frame 1 with an image directly below it in Frame 2. You can build more complicated rollovers as well. Swap- - Adobe 38039927 | User Guide - Page 213
ADOBE FIREWORKS CS3 208 User Guide Note: You can select the slice while in any frame. 7 Click the behavior handle and select Simple Rollover from the menu. 8 Click the Preview tab - Adobe 38039927 | User Guide - Page 214
ADOBE FIREWORKS CS3 209 User Guide A slice triggering a rollover behavior and a disjoint rollover behavior Note: You can also add multiple behaviors using the Behaviors panel. For more information, see "Using the - Adobe 38039927 | User Guide - Page 215
ADOBE FIREWORKS CS3 210 User Guide Set Nav Bar Image sets a slice to be a part of a Fireworks navigation bar. Each slice that is part of the navigation bar must have this - Adobe 38039927 | User Guide - Page 216
ADOBE FIREWORKS CS3 211 User Guide 3 Click the arrow beside the event and select a new animated GIF). Pre-caching can interrupt the display of animated GIFs as rollover states. To avoid this problem, deselect Preload Images when setting up the rollover. Note: If you plan to export your document for - Adobe 38039927 | User Guide - Page 217
ADOBE FIREWORKS CS3 212 User Guide Using the Property inspector or the Layers panel, you or alt, text appears on the image placeholder while the image is downloading from the web; it also substitutes for graphics that fail to download. In some newer versions of browsers, the text also appears next - Adobe 38039927 | User Guide - Page 218
ADOBE FIREWORKS CS3 213 User Guide Export settings You can optimize a slice by selecting an option from the Export Settings pop-up menu in the Property inspector or Optimize panel. You - Adobe 38039927 | User Guide - Page 219
ADOBE FIREWORKS CS3 214 User Guide Option Description Slice # (1,2,3...) Slice # (01,02,03...) Slice # (A,B,C...) Slice # (a,b,c...) The element is labeled numerically or alphabetically, according to the style you select. row/column (r3_c2, - Adobe 38039927 | User Guide - Page 220
ADOBE FIREWORKS CS3 215 User Guide Note: 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 - Adobe 38039927 | User Guide - Page 221
ADOBE FIREWORKS CS3 216 User Guide Working with hotspots and image maps Web designers can use hotspots Slicing can be more resourceintensive to web browsers because of the additional HTML code they must download and the processing power required to reassemble sliced graphics. Note: It is possible to - Adobe 38039927 | User Guide - Page 222
ADOBE FIREWORKS CS3 217 User Guide 2 Drag the hotspot tool to draw a hotspot over an area of the graphic. Hold down Alt (Windows) or Option (Macintosh) to draw from a center point. - Adobe 38039927 | User Guide - Page 223
ADOBE FIREWORKS CS3 218 User Guide Creating image maps After you've inserted several hotspots on top of a desired graphic, you must export the graphic as an image map so it - Adobe 38039927 | User Guide - Page 224
ADOBE FIREWORKS CS3 219 User Guide Note: A hotspot can trigger only a disjoint rollover. It cannot be the target of a rollover coming from another hotspot or slice. After you create a disjoint rollover - Adobe 38039927 | User Guide - Page 225
. When you export a button or pop-up menu, Fireworks automatically generates the CSS code or JavaScript necessary to display it in a web browser. In Adobe Dreamweaver, you can easily insert CSS code, JavaScript, and HTML code from Fireworks into your web pages, or you can cut and paste the code - Adobe 38039927 | User Guide - Page 226
ADOBE FIREWORKS CS3 221 User Guide About button states A button can have up to four different to create a graphic or use the Text tool to create a button from text. • Set the 9-slice scaling guides to keep the button shape from being distorted when it is resized. For more infor- mation, see "Using 9- - Adobe 38039927 | User Guide - Page 227
ADOBE FIREWORKS CS3 222 User Guide • Click Copy Up Graphic to paste a copy of the Up state button into the Over window, and then edit it to change its appearance or - Adobe 38039927 | User Guide - Page 228
ADOBE FIREWORKS CS3 223 User Guide 3 In the pop-up menu that appears, do one of the following: • Select Bevel and Emboss > Inner Bevel. • Select Bevel and Emboss > Outer Bevel. 4 In - Adobe 38039927 | User Guide - Page 229
ADOBE FIREWORKS CS3 224 User Guide To place instances of a button symbol in a document: 1 Open the Library on the submenu. These libraries contain a wide variety of premade button symbols prepared by Adobe. You import and export button symbols just as you import and export animation and graphic - Adobe 38039927 | User Guide - Page 230
ADOBE FIREWORKS CS3 225 User Guide • Size and position of the active area • Core button behavior • Optimization and export settings • URL link (also available as an instance-level property) • Target frame ( - Adobe 38039927 | User Guide - Page 231
ADOBE FIREWORKS CS3 226 User Guide Setting interactive button properties With Fireworks, you can control the Do one of the following: • Use the Pointer tool to move or reshape the slice or move a slice guide. • Use any of the slice or hotspot tools to draw a new active area. Setting the URL for a - Adobe 38039927 | User Guide - Page 232
ADOBE FIREWORKS CS3 227 User Guide • Select a URL from the URL panel. Note: Changing the URL for a button symbol won't change the URL for existing button instances of that symbol that - Adobe 38039927 | User Guide - Page 233
ADOBE FIREWORKS CS3 228 User Guide Setting the alternate (alt) text for a button symbol or instance Alternate (alt) text appears on or near an image placeholder while an image is downloading from the web or in place of an image if it fails to download. It also replaces graphics if the user has the - Adobe 38039927 | User Guide - Page 234
ADOBE FIREWORKS CS3 229 User Guide Creating pop-up menus Pop-up menus are displayed in a browser when menus. 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 - Adobe 38039927 | User Guide - Page 235
ADOBE FIREWORKS CS3 230 User Guide Depending on the design of the pop-up menu, you may not use all the tabs or options in the Pop-up Menu Editor. You - Adobe 38039927 | User Guide - Page 236
ADOBE FIREWORKS CS3 231 User Guide 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 - Adobe 38039927 | User Guide - Page 237
ADOBE FIREWORKS CS3 232 User Guide 3 Click Done. Designing the appearance of a pop-up menu After you create a basic menu and optional submenus, you can format the text, apply graphic styles - Adobe 38039927 | User Guide - Page 238
ADOBE FIREWORKS CS3 233 User Guide For information on opening an existing pop-up menu in the Pop-up Menu Editor, see "Editing pop-up menus" on page 236. 2 Select a preset - Adobe 38039927 | User Guide - Page 239
ADOBE FIREWORKS CS3 234 User Guide 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; - Adobe 38039927 | User Guide - Page 240
ADOBE FIREWORKS CS3 235 User Guide 8 Do one of the following to complete the pop-up menu or continue building it: • Click Next to move to the Position tab or select - Adobe 38039927 | User Guide - Page 241
ADOBE FIREWORKS CS3 236 User Guide To set the position for a pop-up submenu using the Pop-up Menu Editor: 1 With the desired pop-up menu open in the Pop-up - Adobe 38039927 | User Guide - Page 242
ADOBE FIREWORKS CS3 237 User Guide To move an entry in the pop-up menu: 1 With the desired pop-up menu displayed in the Pop-up Menu Editor, click the Content - Adobe 38039927 | User Guide - Page 243
settings to control how your file is created. Fireworks can export animations as animated GIF or Adobe Flash SWF files. You can also import Fireworks animations directly into Flash for further editing. This chapter contains the following topics: • "Building animation" on page 238 • "Working with - Adobe 38039927 | User Guide - Page 244
ADOBE FIREWORKS CS3 239 User Guide Note: Degree and direction of movement options are found only document as an Animated GIF or SWF, or save it as a Fireworks PNG and import it into Flash for further editing. For more information, see "Animation export formats" on page 248. Working with animation - Adobe 38039927 | User Guide - Page 245
ADOBE FIREWORKS CS3 240 User Guide 2 Select Modify > Animation > Animate selection. 3 Enter the desired wish in the Move text box. Movement is linear, and there are no keyframes (unlike in Flash and Adobe Director). Direction is the direction, in degrees, in which you want the object to move. Values - Adobe 38039927 | User Guide - Page 246
ADOBE FIREWORKS CS3 241 User Guide To change animation symbol properties: 1 Select an animation symbol. 2 Select Modify > Animation > Settings to open the Animate dialog box or Window > Properties to open the - Adobe 38039927 | User Guide - Page 247
the motion by changing the angle of the path. ADOBE FIREWORKS CS3 242 User Guide To change movement or direction: ❖ Drag one of the 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. - Adobe 38039927 | User Guide - Page 248
ADOBE FIREWORKS CS3 243 User Guide 3 Enter a value for the frame delay. 4 Press Enter, or click outside the panel to close the pop-up window. Showing and hiding frames for playback - Adobe 38039927 | User Guide - Page 249
ADOBE FIREWORKS CS3 244 User Guide To copy a selected frame and place it in a sequence: 1 Select Duplicate Frame from the Frames panel Options menu. 2 Enter the number of duplicates to create - Adobe 38039927 | User Guide - Page 250
ADOBE FIREWORKS CS3 245 User Guide To share a layer across frames: 1 Click the layer to select it. 2 Select Share Across Frames. Note: All the contents in a shared layer appear in every - Adobe 38039927 | User Guide - Page 251
ADOBE FIREWORKS CS3 246 User Guide No Onion Skinning turns off onion skinning and displays more instances of the same symbol, creating interim instances with interpolated attributes. Tweening is a manual process useful for more sophisticated movement of an object across the canvas and for objects - Adobe 38039927 | User Guide - Page 252
ADOBE FIREWORKS CS3 247 User Guide • To set how long each frame appears in the Document window, your exported file smaller and easier to download. Note: If you plan to import your animation into Flash for further editing, you do not need to export it. Flash can directly import Fireworks PNG source - Adobe 38039927 | User Guide - Page 253
ADOBE FIREWORKS CS3 248 User Guide 2 the smallest package for fast loading and exporting, making downloading time much quicker on your website. To optimize an if desired, and then further edit them within Flash. For more information, see "Working with Flash" on page 305. You can also export frames - Adobe 38039927 | User Guide - Page 254
ADOBE FIREWORKS CS3 249 User Guide Imported GIFs lose their original frame delay settings and assume the frame delay of the current document. Because the imported file is an animation symbol, - Adobe 38039927 | User Guide - Page 255
to a specific folder • Use a default Fireworks album player for your slideshow, or find more players on the Fireworks Adobe Exchange site The Create Slideshow output is built so that any Flash designer/developer can build a Fireworks Album Player in Flash that uses the generated XML output. Building - Adobe 38039927 | User Guide - Page 256
ADOBE FIREWORKS CS3 251 User Guide If you are a Flash designer or developer, you can also build a custom album player in Flash to display the Fireworks Album Creator's XML output. For more information, see "Creating a custom Fireworks album player" on page 254. To create a slideshow: 1 Select - Adobe 38039927 | User Guide - Page 257
ADOBE FIREWORKS CS3 252 User Guide To delete an album: 1 Select Commands > Create Slideshow. 2 In the (next to Player): When this icon is enabled, you can click it to see additional information about the player, including what album and AlbumBook properties the selected player type will support. - Adobe 38039927 | User Guide - Page 258
ADOBE FIREWORKS CS3 253 User Guide Auto-Start Slideshow: Starts the slideshow automatically when the player opens. Allow image. First Album: Select which album in the AlbumBook is loaded when the player starts. Album Properties panel The following properties apply only to the individual selected - Adobe 38039927 | User Guide - Page 259
ADOBE FIREWORKS CS3 254 User Guide Slideshow Properties panel Use these options to customize the images in the slideshow. First image: Select the image number of the first image that the player displays in the slideshow. Display sequence: Choose whether to display images in order or randomly. - Adobe 38039927 | User Guide - Page 260
ADOBE FIREWORKS CS3 255 User Guide - Adobe 38039927 | User Guide - Page 261
ADOBE FIREWORKS CS3 256 User Guide showThumbnails: whether or not to show thumbnails; or, whether or not to take when an image is clicked (open it in new window, new tab, or let the player decide) Album node title: title of this particular album description: description for the album path: name of - Adobe 38039927 | User Guide - Page 262
goal in web graphic design is to create great-looking images that download as fast as possible. To do that, you must select optimizing and exporting web graphics, you can use the Export Wizard. The wizard guides you through the export process and suggests settings. It also displays the Image Preview, - Adobe 38039927 | User Guide - Page 263
ADOBE FIREWORKS CS3 258 User Guide • Adjusting the colors in the graphic (for 8-bit file formats only). You can limit colors by confining 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. - Adobe 38039927 | User Guide - Page 264
ADOBE FIREWORKS CS3 259 User Guide A. Saved set of options for the selected export B. File size and download time estimates C. Preview chosen export settings D. Save export settings in the active view You can use split views to compare various settings to find the - Adobe 38039927 | User Guide - Page 265
ADOBE FIREWORKS CS3 260 User Guide Note: When you zoom or pan while multiple views are open, all views zoom and pan simultaneously. 5 Click Export when you have finished changing settings. 6 - Adobe 38039927 | User Guide - Page 266
• Enter pixel coordinates for the boundaries of the export area. ADOBE FIREWORKS CS3 261 User Guide To set animation settings using Image Preview: 1 Click the Animation tab. 2 Use the following techniques to preview animation frames: • To display a single frame, select the - Adobe 38039927 | User Guide - Page 267
ADOBE FIREWORKS CS3 262 User Guide You don't have to use the Export Wizard and Image Preview in Fireworks if you're comfortable optimizing and exporting graphics. Fireworks has optimization and - Adobe 38039927 | User Guide - Page 268
ADOBE FIREWORKS CS3 263 User Guide GIF Adaptive 256 is a color palette that contains only the buttons display a document's total size, estimated download time, and file format. The estimated download time is the average amount of time it would take to download all the document's slices and frames on - Adobe 38039927 | User Guide - Page 269
ADOBE FIREWORKS CS3 264 User Guide When you optimize a selected slice, the slices not being of the Document window. Note: Click Hide Slices in the Tools panel to hide slices and slice guides while previewing. To compare views with different optimization settings: 1 Click the 2-Up or 4-Up button - Adobe 38039927 | User Guide - Page 270
ADOBE FIREWORKS CS3 265 User Guide Choosing a file type You should base your choice of file is a versatile web graphic format. However, not all web browsers can view PNG graphics. A PNG can support up to 32-bit color, can contain transparency or an alpha channel, and can be progressive. PNG is - Adobe 38039927 | User Guide - Page 271
ADOBE FIREWORKS CS3 266 User Guide Choosing a color palette GIFs and other 8-bit image formats contain a color palette. A color palette is a list of up to 256 colors available to the file. - Adobe 38039927 | User Guide - Page 272
ADOBE FIREWORKS CS3 267 User Guide To select a color depth: ❖ Select an option from the Colors pop-up menu in the Optimize panel or type a value in the text box. You - Adobe 38039927 | User Guide - Page 273
ADOBE FIREWORKS CS3 268 User Guide 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 - Adobe 38039927 | User Guide - Page 274
ADOBE FIREWORKS CS3 269 User Guide To select a range of colors: 1 Click a color. 2 Hold Shift and click the last color in the range you want to select. To preview all the - Adobe 38039927 | User Guide - Page 275
ADOBE FIREWORKS CS3 270 User Guide Note: Right-click (Windows) or Control-click (Macintosh) a color with other Fireworks documents or in other applications that support external palette files, such as Adobe FreeHand, Adobe Flash, and Adobe Photoshop. Saved palette files have the .act extension. To - Adobe 38039927 | User Guide - Page 276
ADOBE FIREWORKS CS3 271 User Guide To change a GIF's compression: ❖ Enter a Loss setting in the Optimize pixels. Alpha transparency is also useful for exporting files to Flash or Adobe Director, because both applications support this type of transparency. Note: Setting colors to transparent affects - Adobe 38039927 | User Guide - Page 277
ADOBE FIREWORKS CS3 272 User Guide • Click a color in the document. To add or remove transparent colors graphic is ready for export. Interlacing: Downloading gradually When viewed in a web browser, interlaced images appear gradually while they are downloading. They display at a low resolution first - Adobe 38039927 | User Guide - Page 278
ADOBE FIREWORKS CS3 273 User Guide 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 - Adobe 38039927 | User Guide - Page 279
ADOBE FIREWORKS CS3 274 User Guide 7 Select Preserve Text Quality. All text items will automatically be exported at PNGs, are displayed at a low resolution initially and then increase in quality as they download. To export or save a progressive JPEG: ❖ Select Progressive JPEG from the Optimize panel - Adobe 38039927 | User Guide - Page 280
ADOBE FIREWORKS CS3 275 User Guide By setting the Matte option in the Optimize panel, you PNG files and in imported Photoshop files. For other file types such as GIF, however, you must remove the halo manually. To prevent halos in native Fireworks PNG files and imported Photoshop files, do one of the - Adobe 38039927 | User Guide - Page 281
ADOBE FIREWORKS CS3 276 User Guide • File > Export Fireworks then applies these settings to new documents. Note: As in previous versions of Fireworks, new slices still get their default optimization settings - Adobe 38039927 | User Guide - Page 282
ADOBE FIREWORKS CS3 277 User Guide 2 The current export/save location, which is defined anytime you browse away from the default location presented in a Save, Save As, Save a Copy, or Export - Adobe 38039927 | User Guide - Page 283
ADOBE FIREWORKS CS3 278 User Guide 7 (Optional) Select Put Images in Subfolder. 8 Click Export. The files Fireworks exported appear on your hard disk. Images and an HTML file are generated in - Adobe 38039927 | User Guide - Page 284
ADOBE FIREWORKS CS3 279 User Guide If you retain the original filename for the updated slice and an animation, it is ready to export. You can export an animation as an Animated GIF, as a Flash SWF file, or as multiple files. If your document contains more than one animation, you can insert slices on - Adobe 38039927 | User Guide - Page 285
ADOBE FIREWORKS CS3 280 User Guide 2 Type a filename and select a destination folder. 3 In the Export pop-up menu, select one of the following: Frames to Files exports frames as multiple files. - Adobe 38039927 | User Guide - Page 286
ADOBE FIREWORKS CS3 281 User Guide • Export each page in a Fireworks file to a separate HTML file. • Copy HTML code to the Clipboard in Fireworks, and then paste that code directly into an existing HTML document. • Export an HTML file, open it in an HTML editor, manually copy sections of code from - Adobe 38039927 | User Guide - Page 287
ADOBE FIREWORKS CS3 282 User Guide , 1-pixel-by-1-pixel GIF that Fireworks uses to fix spacing problems when sliced images are reassembled in an HTML table. You can you are exporting Fireworks HTML to Dreamweaver, follow these instructions, but for additional application-specific notes, also see " - Adobe 38039927 | User Guide - Page 288
ADOBE FIREWORKS CS3 283 User Guide check box to export all of the pages into separate HTML documents. 10 Click Export. After export, you'll see the files Fireworks exported on copied but may not function correctly. If these issues pose a problem for you, use the Export HTML option instead of copying - Adobe 38039927 | User Guide - Page 289
ADOBE FIREWORKS CS3 284 User Guide To copy Fireworks HTML using the Export dialog box: 1 Select tags. 3 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 - Adobe 38039927 | User Guide - Page 290
ADOBE FIREWORKS CS3 285 User Guide 5 If your Fireworks document contains interactive elements, you'll need to copy the JavaScript code as well. JavaScript code is surrounded by tags and - Adobe 38039927 | User Guide - Page 291
ADOBE FIREWORKS CS3 286 User Guide Fireworks Frames exports all frames as CSS layers. Fireworks Slices XHTML contains the elements of HTML while adhering to the more strict syntax rules of XML. To support this standard, Fireworks allows you to export XHTML. Note: Fireworks can also import XHTML. For - Adobe 38039927 | User Guide - Page 292
ADOBE FIREWORKS CS3 287 User Guide Note: For more information on HTML setup options, see "Setting HTML export options" on page 287. 3 Export your document using any of the methods available - Adobe 38039927 | User Guide - Page 293
ADOBE FIREWORKS CS3 288 User Guide • of all images while they are downloading from the web and in place of any images that fail to download. In some browsers it may also can copy Dreamweaver HTML to the Clipboard. You can export a Flash SWF file or copy selected objects as vectors. You can even use - Adobe 38039927 | User Guide - Page 294
ADOBE FIREWORKS CS3 289 User Guide Customizing the Quick Export pop-up menu You can add the settings defined in the Optimize panel. Note: Mozilla, Netscape 6, and Nisus Emailer are not supported on the Macintosh. Using the File Management button The File Management button, located at the top of - Adobe 38039927 | User Guide - Page 295
ADOBE FIREWORKS CS3 290 User Guide Check Out checks the file out, overwriting the local file with the remote copy. Check Out is enabled in Fireworks only if the Enable File - Adobe 38039927 | User Guide - Page 296
with Dreamweaver" on page 292 • "Working with Flash" on page 305 • "Working with FreeHand" on page 312 • "Working with Director" on page 317 • "Working with HomeSite" on page 320 • "Working with Photoshop" on page 322 • "About working with Illustrator" on page 326 • "About working with GoLive - Adobe 38039927 | User Guide - Page 297
ADOBE FIREWORKS CS3 292 User Guide Working with Dreamweaver Unique integration features make Fireworks document from a Dreamweaver image placeholder. You can insert any graphic file format supported by Fireworks and Dreamweaver directly into a Dreamweaver document using the Dreamweaver Files panel - Adobe 38039927 | User Guide - Page 298
ADOBE FIREWORKS CS3 293 User Guide When you create a Fireworks image from a Dreamweaver image placeholder, a new Fireworks document is created with a canvas of the same dimensions as the selected placeholder. Inside - Adobe 38039927 | User Guide - Page 299
ADOBE FIREWORKS CS3 294 User Guide Fireworks is opened with an empty canvas that is exactly the same size as the placeholder image. The Document window indicates that you are editing - Adobe 38039927 | User Guide - Page 300
ADOBE FIREWORKS CS3 295 User Guide Exporting Fireworks HTML to Dreamweaver Exporting Fireworks files to Dreamweaver is a two-step process. From Fireworks, you export files directly to a Dreamweaver site folder. This - Adobe 38039927 | User Guide - Page 301
ADOBE FIREWORKS CS3 296 User Guide 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. Note: Before exporting from - Adobe 38039927 | User Guide - Page 302
Note: Dreamweaver library items do not support pop-up menus. To export a Fireworks document as a Dreamweaver library item: 1 Select File > Export. 2 Select Dreamweaver Library from the Save as Type pop-up menu. ADOBE FIREWORKS CS3 297 User Guide Select the Library folder in your Dreamweaver site - Adobe 38039927 | User Guide - Page 303
ADOBE FIREWORKS CS3 298 User Guide About Roundtrip HTML Fireworks recognizes and preserves most types of edits made identify Fireworks-generated images, table slices, and tables in a document. Although Fireworks supports most types of Dreamweaver edits, radical changes made to a table's structure in - Adobe 38039927 | User Guide - Page 304
ADOBE FIREWORKS CS3 299 User Guide Editing Fireworks tables When you open and edit an image slice that is part of a placed Fireworks still be intact when you return to Dreamweaver. When you work with Roundtrip HTML from Dreamweaver, Fireworks supports server-side file formats such as CFM and PHP. - Adobe 38039927 | User Guide - Page 305
ADOBE FIREWORKS CS3 300 User Guide Dreamweaver supports all behaviors applied in Fireworks, including those required for rollovers and buttons. The following Dreamweaver behaviors are supported by Fireworks during a launch-and-edit session: • Simple Rollover • Swap Image • Swap Image Restore • Set - Adobe 38039927 | User Guide - Page 306
ADOBE FIREWORKS CS3 301 User Guide A dialog box opens. Although the title bar doesn't display this name, this is actually the Fireworks Export Preview dialog box. 3 Make the desired edits in - Adobe 38039927 | User Guide - Page 307
ADOBE FIREWORKS CS3 302 User Guide To edit a placed animation's settings, see "Optimizing support opening and editing source PNG files for placed images. Note: Since Fireworks is the default external image editor in Dreamweaver, setting this preference is only necessary if you're having trouble - Adobe 38039927 | User Guide - Page 308
ADOBE FIREWORKS CS3 303 User Guide 3 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 - Adobe 38039927 | User Guide - Page 309
ADOBE FIREWORKS CS3 304 User Guide To specify launch-and-edit preferences for Fireworks: 1 In Fireworks, choose Edit > Preferences. Note: On Mac OS X, choose Fireworks > Preferences. 2 Click the Launch and Edit - Adobe 38039927 | User Guide - Page 310
ADOBE FIREWORKS CS3 305 User Guide Working with Flash Fireworks integrates well with Flash. You can easily import, copy and paste, or export Fireworks vectors, bitmaps, animations, and multi-state button graphics for use in Flash. Launch-and-edit functionality also makes it easy to edit Fireworks - Adobe 38039927 | User Guide - Page 311
The Import Fireworks Document dialog box appears. ADOBE FIREWORKS CS3 306 User Guide Do one of the following: a Select objects have special fills, strokes, or effects that Flash does not support, those properties are either lost or converted to their Flash equivalents, which may not look the same. - Adobe 38039927 | User Guide - Page 312
ADOBE FIREWORKS CS3 307 User Guide Keep all text editable preserves the editability of all text. If text objects contain special fills, strokes, or effects that Flash does not support, those properties are either lost or converted to their Flash equivalents, which may not look the same. 8 Click OK. - Adobe 38039927 | User Guide - Page 313
ADOBE FIREWORKS CS3 308 User Guide 6 Select the way you'd like text imported: Import as bitmaps to maintain appearance preserves the editability of text, unless it has special fills, strokes, or effects that Flash does not support. To preserve the appearance of such text, Flash converts it to a non- - Adobe 38039927 | User Guide - Page 314
symbol in Flash, you need to replace it with the Flash version of the symbol. About preserving Photoshop layer effects Fireworks supports the Photoshop layer effects formats for use in Flash You can export Fireworks graphics as JPEG, GIF, PNG, and Adobe Illustrator 7 (AI) files, and then import - Adobe 38039927 | User Guide - Page 315
ADOBE FIREWORKS CS3 310 User Guide For information on exporting JPEG and GIF files, see Fireworks Help. For information on exporting to PNG format, see "Exporting PNG files with transparency" on page 311. For information on importing any of these formats into Flash, see "Importing exported Fireworks - Adobe 38039927 | User Guide - Page 316
ADOBE FIREWORKS CS3 311 User Guide 5 In the Objects 10 Click Save in the Export dialog box. For information on importing an exported SWF file into Flash, see "Importing exported Fireworks graphics and animations into Flash" on page 311. Exporting PNG files with transparency The PNG format supports - Adobe 38039927 | User Guide - Page 317
ADOBE FIREWORKS CS3 312 User Guide 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 such as Adobe Illustrator and drag them. Fireworks CS3 supports FreeHand 7 or later - Adobe 38039927 | User Guide - Page 318
ADOBE FIREWORKS CS3 313 User Guide Note: Use the Property inspector to change selected objects to Anti-Alias or Hard Edge. File Conversion specifies how multi-page documents are handled when - Adobe 38039927 | User Guide - Page 319
ADOBE FIREWORKS CS3 314 User Guide 2 Create a new document in Fireworks or open an existing one. 3 Select Edit > Paste. To drag a FreeHand graphic into Fireworks: ❖ Drag the graphic from FreeHand into - Adobe 38039927 | User Guide - Page 320
ADOBE FIREWORKS CS3 315 User Guide this option only if editability is not important to you. 10 Click OK. 11 Click in the FreeHand Document window where placing Fireworks graphics into other applications also works with Illustrator, CorelDraw, and Photoshop. To copy and paste graphics into FreeHand: - Adobe 38039927 | User Guide - Page 321
ADOBE FIREWORKS CS3 316 User Guide Note: Use the Copy Path Outlines command with FreeHand 10 and earlier versions. vector graphics with other vector graphics applications, such as Adobe Illustrator. In Fireworks, you export and import vector graphics from not support the following Fireworks features: - Adobe 38039927 | User Guide - Page 322
Many text-formatting options • Guides, grids, and canvas color • Bitmap images • Some strokes ADOBE FIREWORKS CS3 317 User Guide Working with Director You can without compromising quality. Note: The Director HTML style does not support pop-up menu code. Placing Fireworks files in Director Director - Adobe 38039927 | User Guide - Page 323
ADOBE FIREWORKS CS3 318 User Guide 3 Select Director from the Save As pop-up menu. 4 Select an option from the Source pop-up menu: Fireworks Layers exports each layer in the - Adobe 38039927 | User Guide - Page 324
ADOBE FIREWORKS CS3 319 User Guide 3 Change options if desired: Color allows you to specify a color depth for the imported graphics. If they contain transparency, choose 32-bit color. Registration allows - Adobe 38039927 | User Guide - Page 325
ADOBE FIREWORKS CS3 320 User Guide 2 In Fireworks, change the optimization settings as desired. 3 Click Update when finished. Click Done if the MIX Editing dialog box appears. The image is updated - Adobe 38039927 | User Guide - Page 326
ADOBE FIREWORKS CS3 321 User Guide To export Fireworks HTML to HomeSite: ❖ Export your document 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. Note: Before exporting, make - Adobe 38039927 | User Guide - Page 327
ADOBE FIREWORKS CS3 322 User Guide • Right-click the image on the Thumbnails tab of the source file is saved if a source file was selected. Working with Photoshop Fireworks provides excellent support for importing native Photoshop (PSD) files, with options for retaining many aspects of the imported - Adobe 38039927 | User Guide - Page 328
ADOBE FIREWORKS CS3 323 User Guide • The first alpha channel in the Channels palette converts to transparent areas in the Fireworks image. Fireworks does not support additional Photoshop alpha channels. Photoshop adjustment layers, clipping groups, and paths are not supported by Fireworks. Fireworks - Adobe 38039927 | User Guide - Page 329
ADOBE FIREWORKS CS3 324 User Guide Layers: Convert to Fireworks Objects imports each layer in the Photoshop file as a separate or the Filters menu. Note: Plug-ins and filters for Photoshop 5.5 and earlier versions are supported. Photoshop 6 or later plug-ins and filters are not compatible with - Adobe 38039927 | User Guide - Page 330
ADOBE FIREWORKS CS3 325 User Guide 3 Navigate to the folder where the Photoshop or other filters and plug-ins are installed, Fireworks Plug-ins folder. Placing Fireworks graphics in Photoshop Fireworks provides extensive support for exporting files in Photoshop (PSD) format. Export settings let you - Adobe 38039927 | User Guide - Page 331
that is not supported by Photoshop is lost. Render Text turns text into an image object. When you choose this option, you preserve the appearance of the text, at expense of the ability to edit it. About working with Illustrator Fireworks provides support for importing native Illustrator (AI) CS2 and - Adobe 38039927 | User Guide - Page 332
ADOBE FIREWORKS CS3 327 User Guide Images: Illustrator AI files can contain linked files and placed files of the following types: PDF, BMP, EPS, GIF, JPEG, HTML, see Fireworks Help. Note: The GoLive HTML style does not support pop-up menu code. If your Fireworks document contains pop-up menus, - Adobe 38039927 | User Guide - Page 333
ADOBE FIREWORKS CS3 328 User Guide Creative Suite component (except Acrobat 8), and use it to access both Adobe and non-Adobe assets. From Adobe Bridge, you can: • Photoshop. You can also search leading stock libraries and download royalty-free images by way of Adobe Stock Photos. • Work with Adobe - Adobe 38039927 | User Guide - Page 334
ADOBE FIREWORKS CS3 329 User Guide Flex integration for rich Internet application layouts (MXML export) to as RIAs-by making it possible to export common library assets as known components for use in Adobe Flex™ Builder™. The best part is there's no work necessary on your part, because Fireworks - Adobe 38039927 | User Guide - Page 335
page 330 • "Batch processing" on page 334 • "Extending Fireworks" on page 341 • "Flash SWF movies used as Fireworks panels" on page 345 Finding and replacing The Find and Replace feature in files containing vector objects, such as Adobe FreeHand, uncompressed CorelDraw, and Adobe Illustrator files. - Adobe 38039927 | User Guide - Page 336
ADOBE FIREWORKS CS3 331 User Guide Find panel A. Search option B. Find option To select Windows) or Command+F (Macintosh). Note: If the files you select are locked or checked in from an Adobe Dreamweaver site, you are prompted to unlock them or check them out before proceeding. 3 From the Search pop - Adobe 38039927 | User Guide - Page 337
ADOBE FIREWORKS CS3 332 User Guide Setting options for finding and replacing in multiple files When finding and replacing among multiple files, you can determine how Fireworks handles multiple open files - Adobe 38039927 | User Guide - Page 338
ADOBE FIREWORKS CS3 333 User Guide To search for and replace fonts in one or more Fireworks documents: 1 Select Find Font from the Find pop-up menu of the Find panel. 2 - Adobe 38039927 | User Guide - Page 339
pop-up menu of the Find panel. Note: Find Non-Web216 does not find or replace pixels within image objects. ADOBE FIREWORKS CS3 334 User Guide Batch processing Batch processing is a convenient way to automatically convert a group of graphic files. These are the batchprocessing options: • Convert - Adobe 38039927 | User Guide - Page 340
ADOBE FIREWORKS CS3 335 User Guide Note: If the files you select are locked or checked in from a Dreamweaver site, you are prompted to unlock them or check them out before - Adobe 38039927 | User Guide - Page 341
ADOBE FIREWORKS CS3 336 User Guide • 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 - Adobe 38039927 | User Guide - Page 342
ADOBE FIREWORKS CS3 337 User Guide 10 able to be processed, a notification appears that alerts you to the problem. In addition, a log file named FireworksBatchLog.txt is created during the Data\Adobe\Fireworks 9\FireworksBatchLog.txt (Windows) • /Users/username/Library/Application Support/Adobe - Adobe 38039927 | User Guide - Page 343
ADOBE FIREWORKS CS3 338 User Guide Scaling graphics with a batch process You can alter the the Batch Process dialog box. Batch Replace affects only the following file formats: Fireworks PNG, Illustrator, FreeHand, and CorelDraw. Batch Replace does not affect GIFs and JPEGs. To select attributes to - Adobe 38039927 | User Guide - Page 344
ADOBE FIREWORKS CS3 339 User Guide 3 Select the type of attribute to find and replace from the Find pop-up menu: text, font, color, URL, or NonWeb216. 4 Enter or select the - Adobe 38039927 | User Guide - Page 345
ADOBE FIREWORKS CS3 340 User Guide For information on completing the batch process, see "Batch processing" on page 334. For more information on creating commands, see "Scripting with the History panel" - Adobe 38039927 | User Guide - Page 346
ADOBE FIREWORKS CS3 341 User Guide Note: The exact location of this folder varies from a custom command in Fireworks. You can also use Adobe Flash SWF movies as custom commands in Fireworks. You can paste color values directly from Flash actionscript into Fireworks color boxes. In addition, the - Adobe 38039927 | User Guide - Page 347
FIREWORKS CS3 342 User Guide Note: If stored as a SWF file in the Command Panels folder on your hard disk, commands are available as panels in the Window menu. For more information, see "About scripting with Flash SWF files" on page 344. Using the Adobe Extension Manager An extension is a command - Adobe 38039927 | User Guide - Page 348
ADOBE FIREWORKS CS3 343 User Guide To undo or redo steps using the History panel: 1 Drag the Undo Marker up the panel until you reach the last step you want to - Adobe 38039927 | User Guide - Page 349
ADOBE FIREWORKS CS3 344 User Guide For documentation on the JavaScript API, see Extending Fireworks. About scripting with Flash SWF files With Flash instructions about creating commands or panels from Flash SWF Fireworks or that you downloaded and installed from the Adobe Exchange website. To rename - Adobe 38039927 | User Guide - Page 350
ADOBE FIREWORKS CS3 345 User Guide To edit a command using JavaScript: 1 From your desktop, navigate to the 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 - Adobe 38039927 | User Guide - Page 351
346 Chapter 18: Preferences and Keyboard Shortcuts Fireworks CS3 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 - Adobe 38039927 | User Guide - Page 352
works when Snap to Grid or Snap to Guides is turned on. Snap Distance can be between 1 and 10 pixels. Launch and Edit preferences By setting launch-and-edit preferences, you can control how external applications, such as Adobe Flash and Adobe Director launch and edit graphics in Fireworks. In - Adobe 38039927 | User Guide - Page 353
ADOBE FIREWORKS CS3 348 User Guide Note: Flash is an exception. When launching and editing graphics in Flash, Fireworks always hard disk, on a CD-ROM or other external drive, or on a network volume. Photoshop plug-ins appear in the Fireworks Filters menu and the Property inspector's Add Effects menu. - Adobe 38039927 | User Guide - Page 354
ADOBE FIREWORKS CS3 349 User Guide 2 Locate the Fireworks CS3 Preferences file on your hard disk quickly. If you are accustomed to using shortcuts from other applications such as Adobe FreeHand, Adobe Illustrator, Photoshop, or products that use a different standard, you can switch to the shortcut - Adobe 38039927 | User Guide - Page 355
ADOBE FIREWORKS CS3 350 User Guide 7 Do one of the following: • Click the Add a New Shortcut (+) button file. 4 Click Save. Working with configuration files To accommodate multiuser systems, Fireworks supports user-specific configuration files. This lets you customize features in Fireworks such as - Adobe 38039927 | User Guide - Page 356
ADOBE FIREWORKS CS3 351 User Guide Note: Windows stored in the Adobe/Fireworks 9 folder in your user-specific Application Data folder (Windows) or Application Support folder (Macintosh). The default settings, you must manually delete your user-specific configuration files before reinstalling the - Adobe 38039927 | User Guide - Page 357
ADOBE FIREWORKS CS3 352 User Guide Note: Your user-specific configuration files are located in your user-specific Application Data (Windows) or Application Support (Macintosh) folder. For information on locating this folder, see "About user configuration files" on page 351. You will be asked during - Adobe 38039927 | User Guide - Page 358
adjusting hue or saturation 77 tonal range using eyedropper 75 Adobe Bridge 328 Adobe Bridge Home 6 Adobe Design Center 6 Adobe Fireworks system requirements 1 Adobe Flex Builder 329 Adobe GoLive 288 Adobe Help 2 Adobe Video Workshop 4 Adobe XMP 328 Align panel 28 aligning objects 59 alpha channel - Adobe 38039927 | User Guide - Page 359
79 bitmap areas 66 images 67 BMP file format 265 BMP, saving 23 bold text 112 Border command 50 boundaries 136 Bridge Home 6 Bridge, Adobe 328 brightness 76 Brightness/Contrast filter 76 Bring Forward command 59 Bring to Front command 59 Brush tool 64, 93 brushes saving settings 140 setting - Adobe 38039927 | User Guide - Page 360
104 copying all selected objects on a layer 161 bitmaps 53 frames 243 HTML 283 object attributes 186 objects 53 pixels 44 copying and pasting Adobe Fireworks HTML 283 symbol instances 195 copying and pasting objects from other applications 19 corner points 94 Create Symbol Script panel 28 creating - Adobe 38039927 | User Guide - Page 361
Doughnut tool 87 Down button state 221 downloads updates, plug-ins, and tryouts 7 downsampling 84 e-mail 289 embossing 149 EPS files, opening in Adobe Fireworks 17 Eraser tool 65 erasing bitmaps 65 Expand Flash 305, 310 to FreeHand 314 to Illustrator 314 to Photoshop 325 to WBMP files 265 INDEX 356 - Adobe 38039927 | User Guide - Page 362
Edges 80 Gaussian Blur 79 Hue/Saturation 77 Invert 78 Motion Blur 79 Photoshop plug-ins 150 Radial Blur 80 Sharpen 81 Sharpen More 81 Unsharp Mask 327 Fireworks. See Adobe Fireworks Fit to Canvas 36 Flash exporting to 305, 310 importing Adobe Fireworks PNG to 305 Flash SWF movies 345 Flatten - Adobe 38039927 | User Guide - Page 363
39 snapping objects to 39 grouping objects 58 guides 38 locking 39 snapping objects to 39 H images. See thumbnails Illustrator exporting to 314 importing files into Adobe Fireworks 326 Image Editing Photoshop files 123, 323 RTF files 123 importing from digital camera 20 Photoshop files 323 Photoshop - Adobe 38039927 | User Guide - Page 364
pages 157 Live Filters applying 153 applying to objects 148 creating 152 editing 152 enabling or disabling 148 Fill Color 182 in buttons 222 Photoshop plug-ins 150 removing 152 renaming 153 reordering 152 LiveDocs 2 locked files 289, 304 locking layers 162 L-shape tool 87 M macros 343 marquees 44 - Adobe 38039927 | User Guide - Page 365
for export 325 exporting to 325 grouped layers 164 import preferences 348 importing files into Adobe Fireworks 322 installing plug-ins 151 layer masks 171 patterns 348 plug-ins 324, 348 textures 348 Photoshop Acquire installation plug- ins 20 Photoshop and Adobe Fireworks exporting PSD files from - Adobe 38039927 | User Guide - Page 366
macros 343 saved commands 343 plotting points 94 plug-ins 5, 324 in Adobe Store 7 PNG file format choosing 265 choosing a color palette 266 transparency 42 undocking 26 working with text in 109 PSD files 17 opening from Adobe Fireworks 17 Punch command 105 Q Quick Export button 31, 288 Quick Export - Adobe 38039927 | User Guide - Page 367
objects 55 scripting 343 editing scripts 344 Flash SWF files 344 scrolling the canvas 33 guides changing color 203 removing 205 viewing 203 slices 13 auto-naming 213 changing color 203 creating 201 editing Adobe software activation 1 registration 1 software downloads 7 solid fills adding texture to - Adobe 38039927 | User Guide - Page 368
INDEX 363 straight segments, editing 95 Stroke Color box 136 strokes 136 adding texture 145 changing centering 139 changing color of drawing tools 137 choosing 136 creating custom 138 drawing fill over 139 edges of 136 editing 136 finding and replacing 333 reorienting 139 resetting default color - Adobe 38039927 | User Guide - Page 369
of undo steps 346 using History panel 343 ungrouping objects 58 uninstalling Adobe Fireworks 352 Union command 104 Unsharp Mask filter 82 Up button state 221 Windows system colors as a swatch group 128 work environment 24 workflow in Adobe Fireworks 12 X XHTML 286 Z Zoom Blur filter 80 Zoom tool 32
-
1 -
2 -
3 -
4 -
5 -
6 -
7 -
8
-
9
-
10
-
11
-
12
-
13
-
14
-
15
-
16
-
17
-
18
-
19
-
20
-
21
-
22
-
23
-
24
-
25
-
26
-
27
-
28
-
29
-
30
-
31
-
32
-
33
-
34
-
35
-
36
-
37
-
38
-
39
-
40
-
41
-
42
-
43
-
44
-
45
-
46
-
47
-
48
-
49
-
50
-
51
-
52
-
53
-
54
-
55
-
56
-
57
-
58
-
59
-
60
-
61
-
62
-
63
-
64
-
65
-
66
-
67
-
68
-
69
-
70
-
71
-
72
-
73
-
74
-
75
-
76
-
77
-
78
-
79
-
80
-
81
-
82
-
83
-
84
-
85
-
86
-
87
-
88
-
89
-
90
-
91
-
92
-
93
-
94
-
95
-
96
-
97
-
98
-
99
-
100
-
101
-
102
-
103
-
104
-
105
-
106
-
107
-
108
-
109
-
110
-
111
-
112
-
113
-
114
-
115
-
116
-
117
-
118
-
119
-
120
-
121
-
122
-
123
-
124
-
125
-
126
-
127
-
128
-
129
-
130
-
131
-
132
-
133
-
134
-
135
-
136
-
137
-
138
-
139
-
140
-
141
-
142
-
143
-
144
-
145
-
146
-
147
-
148
-
149
-
150
-
151
-
152
-
153
-
154
-
155
-
156
-
157
-
158
-
159
-
160
-
161
-
162
-
163
-
164
-
165
-
166
-
167
-
168
-
169
-
170
-
171
-
172
-
173
-
174
-
175
-
176
-
177
-
178
-
179
-
180
-
181
-
182
-
183
-
184
-
185
-
186
-
187
-
188
-
189
-
190
-
191
-
192
-
193
-
194
-
195
-
196
-
197
-
198
-
199
-
200
-
201
-
202
-
203
-
204
-
205
-
206
-
207
-
208
-
209
-
210
-
211
-
212
-
213
-
214
-
215
-
216
-
217
-
218
-
219
-
220
-
221
-
222
-
223
-
224
-
225
-
226
-
227
-
228
-
229
-
230
-
231
-
232
-
233
-
234
-
235
-
236
-
237
-
238
-
239
-
240
-
241
-
242
-
243
-
244
-
245
-
246
-
247
-
248
-
249
-
250
-
251
-
252
-
253
-
254
-
255
-
256
-
257
-
258
-
259
-
260
-
261
-
262
-
263
-
264
-
265
-
266
-
267
-
268
-
269
-
270
-
271
-
272
-
273
-
274
-
275
-
276
-
277
-
278
-
279
-
280
-
281
-
282
-
283
-
284
-
285
-
286
-
287
-
288
-
289
-
290
-
291
-
292
-
293
-
294
-
295
-
296
-
297
-
298
-
299
-
300
-
301
-
302
-
303
-
304
-
305
-
306
-
307
-
308
-
309
-
310
-
311
-
312
-
313
-
314
-
315
-
316
-
317
-
318
-
319
-
320
-
321
-
322
-
323
-
324
-
325
-
326
-
327
-
328
-
329
-
330
-
331
-
332
-
333
-
334
-
335
-
336
-
337
-
338
-
339
-
340
-
341
-
342
-
343
-
344
-
345
-
346
-
347
-
348
-
349
-
350
-
351
-
352
-
353
-
354
-
355
-
356
-
357
-
358
-
359
-
360
-
361
-
362
-
363
-
364
-
365
-
366
-
367
-
368
-
369
 |
 |
USING FIREWORKS