MACROMEDIA FIREWORKS 8 Use Manual Download Page 361 | Manualshive

Page: 361 / 472

background image

Exporting from Fireworks 361

Copying HTML to the Clipboard

A fast way to export Fireworks-generated HTML is to copy it to the Clipboard.

You can copy HTML code in Fireworks in either of two ways. You can use the Copy HTML
Code command, or you can select Copy to Clipboard as an option in the Export dialog box.
Doing so will copy the Fireworks HTML to the Clipboard and generate the associated image
files in the location you specify. You’ll later paste this HTML into a document in your
preferred HTML editor.

Although copying to the Clipboard is a fast way to get Fireworks HTML into other
applications, it is not ideal in every situation. Copying HTML to the Clipboard has the
following disadvantages:

■

You don’t have the option to save images into a subfolder. They must reside in the same
folder as the HTML file where you paste the copied HTML. An exception is HTML
copied to Macromedia Dreamweaver.

■

Any links or paths used in Fireworks pop-up menus will map to your hard drive. HTML
copied to Dreamweaver is an exception.

■

If you use an HTML editor other than Dreamweaver or Microsoft FrontPage, JavaScript
code associated with buttons, behaviors, and rollover images is copied but may not
function correctly.

If these issues pose a problem for you, use the Export HTML option instead of copying
HTML to the Clipboard.

To copy Fireworks HTML using the Copy HTML Code option:

1.

Do one of the following:

■

Select Edit > Copy HTML Code.

■

Click the Quick Export button and select Copy HTML Code from the pop-up menu.

2.

Follow the wizard as it guides you through the settings for exporting your HTML and
images. When prompted, specify a desired folder as the destination for the exported images.
This must be the location where your HTML file will reside.

The wizard exports the images to the specified destination and copies the HTML code to
the Clipboard.

NO

TE

Before you copy HTML code, be sure that you’ve selected the appropriate HTML style
and chosen Include HTML Comments from the General tab of the HTML Setup dialog
box. For more information, see

“Setting HTML export options” on page 367

.

NOT

E

If you plan to paste the HTML code into Macromedia Dreamweaver, it does not
matter where you export the images, as long as they reside in the same
Dreamweaver site as the HTML file into which you will paste your code.

«
...
359
360
361
362
363
...
»

Summary of Contents for FIREWORKS 8

Page 1: ...Using Fireworks...

Page 2: ...ility for the content on those third party sites Copyright 2005 Macromedia Inc All rights reserved This manual may not be copied photocopied reproduced translated or converted to any electronic or mac...

Page 3: ...work environment 29 Chapter 3 Selecting and Transforming Objects 51 Selecting objects 51 Selecting pixels 55 Editing selected objects 68 Transforming and distorting selected objects and selections 69...

Page 4: ...and Fills 167 Using the Colors section of the Tools panel 168 Organizing swatch groups and color models 169 Using color boxes and color pop up windows 176 Working with strokes 177 Working with fills...

Page 5: ...20 Working with existing animations 322 Using multiple files as one animation 323 Chapter 14 Optimizing and Exporting 325 About optimizing 326 Using the Export Wizard 326 Optimizing in the workspace 3...

Page 6: ...xtending Fireworks 437 Flash SWF movies used as Fireworks panels 443 Chapter 17 Preferences and Keyboard Shortcuts 445 Setting preferences 445 Changing keyboard shortcut sets 449 Working with configur...

Page 7: ...tomate the workflow to meet the demands of time consuming updates and changes Fireworks integrates with other Macromedia products such as Dreamweaver Flash FreeHand and Director as well as your other...

Page 8: ...You can register electronically during the product activation process when you first launch Fireworks By registering you get on the priority list to receive up to the minute notices about upgrades an...

Page 9: ...other Studio products Optimization Image Editing panel This new panel is a central location where you can access commonly used image editing tools filters and menu commands More import file formats F...

Page 10: ...ash grids now use a dotted line and a lighter default grid color Create without complexity 25 new blend modes 25 new choices to alter the look of your colors and objects Perspective shadow Add a persp...

Page 11: ...timization now defaults to the last settings used See Saving and reusing optimization settings on page 351 Save multiple selections Save restore name and delete multiple marquee selections within PNG...

Page 12: ...ess the guide at any time in Fireworks help Help Getting Started with Fireworks The guide is also available in PDF format on the Macromedia website at www macromedia com go fireworks_documentation The...

Page 13: ...hics from scratch after any simple edit Fireworks generates JavaScript making rollovers easy to create Efficient optimization features shrink the size of web graphic files without sacrificing quality...

Page 14: ...bitmap For example select the Pen tool from the Vector section of the Tools panel and you can begin drawing vector paths by plotting points Select the Brush tool and you can drag to paint a bitmap ob...

Page 15: ...Up or 4 Up views in the workspace You can slice an image into smaller parts and then optimize each part in the format that best suits the content For added optimization flexibility you can use select...

Page 16: ...f the lines and curves that describe its shape Vector graphics are resolution independent which means you can move resize reshape or change the color of a vector graphic as well as display it on outpu...

Page 17: ...NG document PNG is the native file format for Fireworks After you create graphics in Fireworks you can export or save them in other familiar web graphic formats such as JPEG GIF and animated GIF You c...

Page 18: ...s created in other graphics programs In addition you can import images from a digital camera or scanner To open a Fireworks document 1 Select File Open The Open dialog box appears 2 Select the file an...

Page 19: ...it the image You can then either select Save As to save your work as a new Fireworks PNG file or as another file format or with some image types you can select Save to save the document in its origina...

Page 20: ...ator EPS files that contain vector information the Vector File Options dialog box opens This is the same dialog box that appears when you open or import FreeHand files WBMP files Fireworks can open WB...

Page 21: ...ent window To open only the first table of an HTML file 1 Select File Open 2 Select the HTML file that contains the table you want to open and click Open The first table in the HTML file opens in a ne...

Page 22: ...image or text into Fireworks From the other application drag the object or text into Fireworks Pasting into Fireworks Pasting an object copied from another application into Fireworks places the object...

Page 23: ...document Fireworks asks whether you want the bitmap to be resampled Resampling adds pixels to or subtracts pixels from a resized bitmap to match the appearance of the original bitmap as closely as pos...

Page 24: ...port Fireworks retains the proportions of the image Importing from a digital camera or scanner You can import images from a digital camera or scanner only if it is TWAIN compliant Windows or uses buil...

Page 25: ...ect Images dialog box select the images you want to import and then click OK 6 Follow the instructions to apply the desired settings The imported image is opened as a new Fireworks document To import...

Page 26: ...r open an existing Fireworks PNG file the document s filename has the extension png Files of other types such as PSD and HTML also open as PNG files allowing you to use the Fireworks PNG document as y...

Page 27: ...le Save Saving documents in other formats When you use File Open to open a file of a format other than PNG you can use all of the features of Fireworks to edit the image You can then select Save As to...

Page 28: ...clude adding new objects masks and Live Filters as well as adjusting opacity applying blend modes and saving pixel selections To export a document to another format 1 Select a file format in the Optim...

Page 29: ...ent properties It then changes to display properties for a newly selected tool or currently selected object as you work in the document The panels are initially docked in groups along the right side o...

Page 30: ...ories Select Bitmap Vector Web Colors and View Changing tool options When you select a tool the Property inspector displays tool options Some tool options remain displayed as you work with the tool Fo...

Page 31: ...gle Ellipse and Polygon basic tools as well as all of the Auto Shape tools which appear below the divider line To select an alternative tool from a tool group 1 Click the tool icon and hold down the m...

Page 32: ...erty inspector and select Full Height from the Property inspector Options menu To reduce the Property inspector to half height do one of the following Click the expander arrow in the lower right corne...

Page 33: ...mages The Layers panel organizes a document s structure and contains options for creating deleting and manipulating layers The Frames panel includes options for creating animations The History panel l...

Page 34: ...rkspace You can undock panel groups add panels to a group undock individual panels rearrange the order of docked panel groups and collapse and close panel groups You can also open and close individual...

Page 35: ...4 x 768 Select Window Workspace Layouts 1280 x 1024 To open a panel Select the panel name from the Window menu To close a panel do one of the following Select the panel name from the Window menu Click...

Page 36: ...s menu listing a range of choices specific to the active panel or panel group An Options menu also appears in the Property inspector except in Windows when the Property inspector is undocked To select...

Page 37: ...export your Fireworks files to a number of Macromedia applications including Dreamweaver Flash Director and FreeHand In addition you can export your files to Photoshop FrontPage Adobe GoLive and Illu...

Page 38: ...dition you can easily pan the view of a document which is helpful if you zoom in and can no longer see the entire canvas Using document tabs Windows When your document is maximized you can easily choo...

Page 39: ...s do one of the following Select the Zoom tool and click to specify the new center point inside the document window Each click magnifies the image to the next preset magnification Select a zoom settin...

Page 40: ...t based on a specific area Alt drag Windows or Option drag Macintosh a selection area with the Zoom tool To return to 100 magnification Double click the Zoom tool in the Tools panel To pan around the...

Page 41: ...ng multiple document views You can use multiple views to see one document at different magnifications simultaneously Changes you make in one view are automatically reflected in all other views of the...

Page 42: ...se this command to preview how a document would appear on the Macintosh platform Changing the canvas When you first create a new Fireworks document you must specify document characteristics You can mo...

Page 43: ...ies in the Property inspector then click the Canvas color box 2 Pick a color from the Swatches pop up window or click the eyedropper on a color anywhere onscreen To select a transparent canvas click t...

Page 44: ...ifferently than most image editing applications do Fireworks contains pixel based bitmap image objects and path based vector objects When a bitmap object is resampled pixels are added to or removed fr...

Page 45: ...wise or 90 counterclockwise When you rotate the canvas all objects in the document rotate To rotate the canvas do one of the following Select Modify Canvas Rotate 180 Select Modify Canvas Rotate 90 CW...

Page 46: ...box surrounds the area of the document that you want to keep 3 Double click inside the bounding box or press Enter to crop the document Fireworks resizes the canvas to the area you define and deletes...

Page 47: ...rks grid and snap objects to the grid Using rulers Rulers help you to measure organize and plan the layout of your work Because Fireworks images are intended for the web where graphics are measured in...

Page 48: ...ving slice guides to edit slices on page 258 To create a horizontal or vertical guide 1 Click and then drag from the corresponding ruler 2 Position the guide on the canvas and release the mouse button...

Page 49: ...nd repeat multiple actions With the History panel you can view modify and repeat the actions taken to create the document The History panel lists the most recent actions you have performed in Firework...

Page 50: ...ction to highlight it Control click Windows or Command click Macintosh to highlight multiple individual actions Shift click to highlight a continuous range of actions 3 Click the Replay button at the...

Page 51: ...Before you can do anything with any object on the canvas you must select it This applies to a vector object path or points a text block word or letter a slice or hotspot an instance or a bitmap object...

Page 52: ...ct the object in the Layers panel To select objects by dragging Drag the Pointer tool to include one or more objects in the selection area Using the Subselection tool You use the Subselection tool to...

Page 53: ...tor identifies the selection The upper left area of the Property inspector contains the following information about the selection A description of the item being inspected A text box to enter a name f...

Page 54: ...ect To select everything on every layer in the document Choose Select Select All To deselect all selected objects Choose Select Deselect To hide the path selection feedback of a selected object Select...

Page 55: ...s the options for that tool Selecting the Live marquee box allows you to change Edge settings and the amount of feather if Feather is specified as the Edge setting for your bitmap selection while you...

Page 56: ...the Marquee or Oval Marquee tool 2 Set the Style and Edge options in the Property inspector For more information see Bitmap selection tool options on page 55 3 Drag to draw a selection marquee which d...

Page 57: ...the starting point Double click in the workspace 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 Wand s Tole...

Page 58: ...r with the Magic Wand tool 2 Select Select Select Similar One or more marquees show all areas containing the selected range of pixels according to the current Tolerance setting in the Property inspect...

Page 59: ...ls around the existing marquee or smooth the border of the marquee Moving a marquee You can move a marquee to place it over a different area of pixels To move the marquee do one of the following Drag...

Page 60: ...rt of the selection 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 out Creating a marquee from int...

Page 61: ...of its opaque area from the current pixel selection To create a pixel selection on a selected bitmap from the intersection of overlapping objects 1 Control click Windows or Command click Macintosh an...

Page 62: ...her a selection by setting a feather amount in the Property inspector before or during your use of a bitmap selection tool For more information see Bitmap selection tool options on page 55 To feather...

Page 63: ...e that you want to place around the existing marquee and click OK Smoothing the border of a marquee You can eliminate excess pixels along the edges of a pixel selection This is useful if excess pixels...

Page 64: ...e marquee selections To save a marquee selection 1 Select Select Save Bitmap Selection to open the Save Selection dialog box 2 The Document box displays the name of the active document in which your m...

Page 65: ...at you have previously named and saved To restore a marquee selection 1 Select Select Restore Bitmap Selection to open the Restore Selection dialog box 2 The Document box displays the name of the acti...

Page 66: ...election from a different document 3 The Selection box displays the name of the active selection in the active document You can leave that as is or if you want to delete a different selection from the...

Page 67: ...nsert a new bitmap by cutting and pasting a pixel selection 1 Select an area of pixels using a pixel selection tool 2 Select Edit Insert Bitmap via Cut A new bitmap object based on the pixel selection...

Page 68: ...ects by pasting 1 Select an object or multiple objects 2 Select Edit Cut or Edit Copy 3 Select Edit Paste To duplicate one or more selected objects Select Edit Duplicate As you repeat the command dupl...

Page 69: ...rea if you are using the Marquee Oval Marquee or Lasso tool Press Escape Transforming and distorting selected objects and selections You can transform a selected object or group or a pixel selection u...

Page 70: ...lected objects using the transform handles 1 Select a transformation tool As you move the pointer on or near the selection handles the pointer changes to indicate the current transformation 2 Do one o...

Page 71: ...r press Alt while dragging any handle Rotating objects When rotated an object pivots on its center point You rotate an object by selecting a preset angle or by placing the pointer outside an object s...

Page 72: ...zontal axis without moving its relative position on the canvas To flip a selected object Select Modify Transform Flip Horizontal or Flip Vertical Skewing objects Skewing an object transforms it by sla...

Page 73: ...using the Property inspector or Info panel Enter new width W or height H measurements To scale or rotate selected objects using Numeric Transform 1 Select Modify Transform Numeric Transform The Numeri...

Page 74: ...n a single document you can use several techniques to organize the document You can group individual objects to treat them as one or protect each object s relationship to the others in the group You c...

Page 75: ...a around it To add objects to or remove them from the selection hold down Shift as you click or drag To select the group that contains a subselected object do one of the following Right click Windows...

Page 76: ...r Aligning objects The Align commands in the Modify menu give you a wide range of arrangement options allowing you to do any of the following Align objects along a horizontal or vertical axis Align se...

Page 77: ...y Align Distribute Heights About arranging objects among layers The Layers panel offers another dimension of organizational control You can move selected objects from one layer to another by dragging...

Page 78: ...78 Chapter 3 Selecting and Transforming Objects...

Page 79: ...rting images Fireworks has a powerful set of Live Filters for tone and color adjustment as well as a number of ways to retouch your bitmap images including cropping feathering and duplicating or cloni...

Page 80: ...e Layers panel with layers expanded you can see a thumbnail and name for each bitmap object under the layer on which it resides Although some bitmap applications consider each bitmap object a layer Fi...

Page 81: ...one of the following Select Edit Cut then Edit Paste Select Edit Copy then Edit Paste Select Edit Insert Bitmap via Copy to copy the current selection into a new bitmap Select Edit Insert Bitmap via C...

Page 82: ...rayscale Convert to Sepia Tone Filters Blur Blur More Sharpen Sharpen More Unsharp Mask Add Noise Convert to Alpha Find Edges View Options Show Hide Rulers Show Hide Grid Snap Don t Snap to Grid Edit...

Page 83: ...Auto Erase uses the fill color when the Pencil tool is clicked over the stroke color Preserve Transparency restricts the Pencil tool to drawing only in existing pixels not in transparent areas of a g...

Page 84: ...e color of a single pixel an average of color values within a 3 by 3 pixel area or an average of color values within a 5 by 5 pixel area To sample a stroke or fill color 1 If the correct attribute is...

Page 85: ...r or Fill Color boxes throughout Fireworks Erasing bitmap objects You can use the Eraser tool to remove pixels By default the Eraser tool pointer represents the size of the current eraser but you can...

Page 86: ...selection 4 Make a selection To feather the edges of a pixel selection from the menu bar 1 Select Select Feather 2 Type a value in the Feather Selection dialog box to set the feather radius and click...

Page 87: ...two pointers The first one the source of the cloning is in the shape of a cross hair For more information see Editing preferences on page 446 Depending upon the brush preferences you ve selected the s...

Page 88: ...a pixel selection do one of the following Drag the pixel selection with the Subselection tool Alt drag Windows or Option drag Macintosh the pixel selection using the Pointer tool Blurring sharpening a...

Page 89: ...technique of increasing or decreasing light exposure as the photograph is developed To lighten or darken parts of an image 1 Select the Dodge tool to lighten parts of an image or the Burn tool to dar...

Page 90: ...olors with grays and blacks 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 pop up menu 2 Set the attr...

Page 91: ...Swatch 3 Click the From color well to select the color probe and select a color from the pop up menu to specify the color you want to replace 4 Click the To color well in the Property inspector and se...

Page 92: ...e From color with the To color leaving some of the From color intact 5 Using the tool click down on a section of the bitmap image that contains the color you want to replace Without lifting the tool c...

Page 93: ...djust the contrast and brightness the tonal range and the hue and color saturation of your images Applying filters as Live Filters from the Property inspector is nondestructive Live Filters do not per...

Page 94: ...With Levels you can correct bitmaps that contain a high concentration of pixels in the highlights midtones or shadows Or you can use Auto Levels and let Fireworks adjust the tonal range for you If yo...

Page 95: ...dows The Histogram helps you determine the best method of correcting an image s tonal range A high concentration of pixels in the shadows or highlights indicates that you could improve the image by ap...

Page 96: ...ider adjusts the midtones using values from 10 to 0 The left slider adjusts the shadows using values from 0 to 255 As you move the sliders the values are automatically entered in the Input Levels boxe...

Page 97: ...rrect the tonal range Curves lets you adjust any color along the tonal range instead of only three variables without affecting other colors For example you can use Curves to correct for a color cast c...

Page 98: ...Channel pop up menu select whether you want to apply changes to individual color channels or to all colors N OT E If the Property inspector is partially minimized click the Add Filters button instead...

Page 99: ...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 from the Channel pop up...

Page 100: ...s Contrast dialog box In the Property inspector click the Add Live Filters button and then select Adjust Color Brightness Contrast from the Filters pop up menu Select Filters Adjust Color Brightness C...

Page 101: ...uickly 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 Fill from the Filters pop up menu 2 Select...

Page 102: ...the Lightness slider to adjust the lightness of the colors Values range from 100 to 100 6 Click OK To change an RGB image to a two tone image or to add color to a grayscale image Select Colorize in th...

Page 103: ...lues You can use Invert to change each color in an image to its inverse on the color wheel For example applying the filter to a red object R 255 G 0 B 0 changes the color to light blue R 0 G 255 B 255...

Page 104: ...ng Zoom Blur creates the appearance that the image is moving toward or away from the viewer To blur an image 1 Select the image 2 Do one of the following In the Property inspector click the Add Live F...

Page 105: ...he Filters pop up menu Select Filters Blur Motion Blur 3 Drag the Angle dial to set the direction of the blur effect 4 Drag the Distance slider to set the strength of the blur effect Values range from...

Page 106: ...fect 4 Drag the Quality slider to set the smoothness of the blur effect Values range from 1 to 100 An increase in quality results in a blur effect with fewer repetitions of the original image 5 Click...

Page 107: ...ses the contrast of adjacent pixels about three times as much as Sharpen Unsharp Mask sharpens an image by adjusting the contrast of the pixel edges This option offers the most control so it is usuall...

Page 108: ...p contrast surrounding each pixel edge 5 Drag the Threshold slider to select a threshold of 0 to 255 Values between 2 and 25 are most commonly used An increase in threshold sharpens only those pixels...

Page 109: ...o create the illusion that both images come from the same source You can also add noise to an image for artistic reasons for instance to simulate an old photograph or static on a television screen Ori...

Page 110: ...ider to set the amount of noise Values range from 1 to 400 An increase in amount results in an image with more randomly placed pixels 4 Select the Color check box to apply color noise Leave the check...

Page 111: ...ith the Vector Path and Pen tools Using the Pen tool you can draw complex shapes with smooth curves and straight lines by plotting points one by one Fireworks offers several methods for editing the ve...

Page 112: ...e Line Rectangle or Ellipse tool from the Tools panel 2 If desired set the stroke and fill attributes in the Property inspector See Chapter 7 Applying Color Strokes and Fills on page 167 3 Drag on the...

Page 113: ...the Rounded Rectangle tool 2 Drag the canvas to draw the rectangle To round the corners of a selected rectangle In the Property inspector enter a value from 0 to 100 in the Roundness box and press En...

Page 114: ...enter a value Values closer to 0 result in long thin points values closer to 100 result in short stubby points 5 Drag the canvas to draw the star To constrain a star s orientation to increments of 45...

Page 115: ...can edit the end points for the first and third sections of the connector line as well as the location of the second section which connects the first and last sections Doughnut draws object groups th...

Page 116: ...ction control point to constrain its movement on a 45 degree angle Click the Direction control point to reset the shadow its size will be identical to the original shape Control Command click the Dire...

Page 117: ...ct one from the Insert New Auto Shape pop up menu at the bottom of the panel The new shape appears in the upper left corner of the document Adjusting arrow Auto Shapes Arrows have five control points...

Page 118: ...length control point of a selected bent arrow To adjust the width of a bent arrow tail Drag the handle width control point of a selected bent arrow To adjust the corner roundness of a bent arrow tail...

Page 119: ...sition of the cross bar the line that connects the start and end line segments and for adjusting the roundness of the corners To move the start or end point of a connector line Drag the control point...

Page 120: ...or resetting the pie to one slice You can add as many sections as you want using control points For each new section Fireworks adds a control point for resizing or splitting the new section To add sec...

Page 121: ...f sides on a selected smart polygon Drag the sides control point To split a selected smart polygon into segments Alt drag Windows or Option drag Macintosh the sides control point To resize the inner p...

Page 122: ...These Auto Shapes are generally more complex than those that appear in the Tools panel Instead of drawing these Auto Shapes directly on the canvas you place these Auto Shapes into your drawing by dra...

Page 123: ...ector Path tool See Chapter 7 Applying Color Strokes and Fills on page 167 Using the Vector Path tool The Vector Path tool has a wide variety of brush stroke categories including Air Brush Calligraphy...

Page 124: ...horizontal or vertical line hold down Shift while dragging 5 Release the mouse button to end the path To close the path release the mouse button when you return the pointer to the point at the beginni...

Page 125: ...nter and click to place the next point A straight line segment joins the two points 5 Continue plotting points Straight segments bridge each gap between points 6 Do one of the following to end the pat...

Page 126: ...rks extends the line segment to the new point 4 Continue plotting points If you click and drag a new point you produce a curve point if you just click you produce a corner point 5 Do one of the follow...

Page 127: ...of a vector object by dragging its point handles with the Subselection tool The point handles determine the degree of curvature between fixed points These curves are known as B zier curves To edit th...

Page 128: ...t point handle goes up Alt drag a handle to move it independently Converting path segments to straight or curved Straight path segments are intersected by corner points Curved path segments contain cu...

Page 129: ...n the Tools panel 2 Click a curve point on a selected path The handles retract and the adjacent segments straighten Selecting points The Subselection tool allows you to select multiple points Before s...

Page 130: ...on tool If either point nearest the clicked point is a curve point the near handle is also displayed Moving points and point handles You can change an object s shape by dragging its points and point h...

Page 131: ...g points from the path reshapes it or simplifies editing To insert a point on a selected path Using the Pen tool click anywhere on the path where there is not a point To delete a point from a selected...

Page 132: ...two open paths 1 Select an open path 2 Select the Subselection tool and drag an end point of the path within a few pixels of the end point of the similar path The end point snaps to the other path an...

Page 133: ...pushing a path segment 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 Pointer Meaning The Freeform tool is...

Page 134: ...oint slightly away from the path 3 Drag toward the path to push it Nudge the selected path to reshape it To change the size of the push pointer do one of the following While holding down the mouse but...

Page 135: ...holding down the mouse button press the Right Arrow key or 2 to increase the width of the pointer While holding down the mouse button press the Left Arrow key or 1 to decrease the width of the pointe...

Page 136: ...pointer 4 Drag to redraw or extend a path segment The portion of the path to be redrawn is highlighted in red 5 Release the mouse button Changing a path s appearance by varying pressure and speed You...

Page 137: ...You can combine path objects into a single path object You can connect the end points of two open paths to create a single closed path or you can join multiple paths to create a composite path To crea...

Page 138: ...to create 4 If you chose Feather in the Edge setting specify the value you want to use for the amount of feather 5 To convert the selected path to a marquee click OK Creating an object from the inters...

Page 139: ...from which the portions are to be removed 4 Select Modify Combine Paths Punch Stroke and fill attributes remain unchanged Cropping a path You can crop a path using the shape of another path The front...

Page 140: ...simplification amount and click OK As you increase the amount of simplification you increase the degree to which Fireworks can alter the path to reduce the number of points on that path Expanding a s...

Page 141: ...a specific number of pixels To expand or contract a selected path 1 Select Modify Alter Path Inset Path to open the Inset Path dialog box 2 Select a direction to contract or expand the path Inside co...

Page 142: ...142 Chapter 5 Working with Vector Objects...

Page 143: ...assigned name The capability to edit text anytime even after you apply Live Filters such as drop shadows and bevels means you can easily make changes to text You can also copy objects that include te...

Page 144: ...an change the assigned name to a different name if you prefer To change the name of a text object 1 Select the text object The existing name of that text object is displayed both in the Text box of th...

Page 145: ...eates a fixed width text block For information on the different types of text blocks see Using auto sizing and fixed width text blocks on page 146 4 Type your text To enter a paragraph break press Ent...

Page 146: ...dth of wrapped text Fixed width text blocks are created by default when you drag to draw a text block using the Text tool When the text pointer is active within a text block a hollow circle or hollow...

Page 147: ...t Editor on page 165 To edit text 1 Select the text you want to change Click a text block with the Pointer or Subselection tool to select the entire block To select multiple blocks simultaneously hold...

Page 148: ...g style button Inserting special characters You can insert special characters into your text directly from within Fireworks rather than having to copy and paste those characters from another source To...

Page 149: ...and Live Filters applied to a text block as you edit text in the text block but the Text tool does not retain stroke characteristics or Live Filters if you create a new text block For more information...

Page 150: ...the color pop up window or sample a color from anywhere on the screen using the eyedropper pointer while the Fill Color box pop up window is open Click the Fill Color box in the Tools panel and selec...

Page 151: ...old down Control Windows or Command Macintosh while pressing the Left Arrow or Right Arrow keys on the keyboard The Left Arrow key increases the space between letters by 1 and the Right Arrow key move...

Page 152: ...ses the space between lines and the Down Arrow key moves lines closer together Setting text orientation A text block can be oriented horizontally or vertically By default text is oriented horizontally...

Page 153: ...Setting text alignment Alignment determines the position of a paragraph of text relative to the edges of its text block In horizontal alignment text is aligned relative to the left and right edges of...

Page 154: ...ander arrow in the lower right corner to see all properties To indent the first line of selected paragraphs In the Property inspector drag the Paragraph Indent pop up slider or enter a value in the te...

Page 155: ...and the background preserving the shapes of the text characters and enhancing detailed areas of the characters Smooth Anti Alias creates a soft transition between the edges of the text and the backgr...

Page 156: ...width or height of the characters and drag it lower to reduce their width or height Setting baseline shift Baseline shift determines how closely text sits above or below its natural baseline If there...

Page 157: ...are applied to all text in a selected text block not just to the highlighted text For more information about strokes and fills see Chapter 7 Applying Color Strokes and Fills on page 167 For more info...

Page 158: ...h exceeds the length of the path the remaining text returns and repeats the shape of the path Text on a path that returns and repeats the path shape To place text on a path 1 Shift select a text block...

Page 159: ...raw a path establishes the direction of the text attached to it For example if you draw a path from right to left the attached text appears backward and upside down Text attached to a path drawn right...

Page 160: ...t 2 In the Property inspector enter a value in the Text Offset text box Then press Enter Transforming text You can transform text blocks in the same ways you can transform other objects You can scale...

Page 161: ...d text with the Subselection tool Select the converted text and select Modify Ungroup You can edit the individual converted character paths using the vector editing tools For more information on editi...

Page 162: ...size and style bold italic underline Alignment left right center justified Leading Baseline shift Range kerning Horizontal scale Color of the first character All other RTF information is ignored In Fi...

Page 163: ...to display the text in the default system font To leave the missing font as is click No Change 4 Click OK The next time you open a document with the same missing fonts the Missing Fonts dialog box inc...

Page 164: ...ng spell checking You can customize the way Fireworks spell checks documents using the Spelling Setup dialog box From here you can specify one or more language dictionaries for Fireworks to use during...

Page 165: ...might be difficult to edit onscreen such as large text blocks text attached to a path or text with hard to read fonts and sizes You can choose to display such text in the system font and default size...

Page 166: ...166 Chapter 6 Using Text...

Page 167: ...pop up window from which you can select a color for the color box Move the pointer away from an open color pop up window and you can click any color on your screen to apply it to the color box The Co...

Page 168: ...p window To reset colors to the default Click the Default Colors button in the Tools panel or in the Color Mixer To remove the stroke and fill from selected objects using the No Stroke or Fill button...

Page 169: ...watches panel 1 Click the icon next to the Stroke Color or Fill Color box in the Tools panel or Property inspector to make it active 2 If the Swatches panel is not already open select Window Swatches...

Page 170: ...sort color swatches or entire swatch groups using the Swatches panel Swatches panel To add a color to the Swatches panel 1 Select the Eyedropper tool from the Tools panel 2 Select the number of pixels...

Page 171: ...ch from the Swatches panel 1 Hold down Control Windows or Command Macintosh and place the pointer over a swatch The pointer becomes the scissors pointer 2 Click the swatch to delete it from the Swatch...

Page 172: ...mal displaying hexadecimal color values for red R green G and blue B color components Hexadecimal RGB values are calculated based on a range of values from 00 to FF TI P Although CMY is a color model...

Page 173: ...2 Click either the Stroke Color or Fill Color box to make it the destination for the new color 3 Select a color model from the Color Mixer Options menu 4 Do any of the following to specify color compo...

Page 174: ...lor value of any part of your document using the Info panel 1 Click the Eyedropper tool in the Tools panel 2 Select Window Info to display the Info panel 3 Move the pointer over the object containing...

Page 175: ...ce color box in the Fill Options window The two websafe dither colors appear in the color boxes to the right The web dither appears on the object and becomes the active fill color 4 Click outside the...

Page 176: ...rrent color assigned to the associated object property Selecting colors from a color pop up window When you click any color box a color pop up window similar to the Swatches panel opens You can choose...

Page 177: ...r feature associated with the color box and the color pop up window closes Working with strokes Using the Property inspector the Stroke Options pop up menu and the Edit Stroke dialog box you can have...

Page 178: ...acintosh to deselect all objects 2 Select a drawing tool in the Tools panel 3 Click the Stroke Color box in the Tools panel or Property inspector to open the color pop up window 4 Select a color for t...

Page 179: ...ent settings The current pressure and speed sensitivity settings are reflected in the preview by a stroke that tapers or fades or otherwise changes from left to right To open the Edit Stroke dialog bo...

Page 180: ...the Dash pop up menu 7 To set the lengths of dashes and spaces for a dotted line use the three sets of On and Off text input boxes to control the first second and third dashes respectively 8 Click Ap...

Page 181: ...rient brush strokes To move a brush stroke inside or outside the selected path 1 Click the Stroke Color box in the Tools panel or the Property inspector to open the color box pop up window 2 Select an...

Page 182: ...7 Working with fills Using the Property inspector the Fill Options pop up menu the Fill Options pop up window and the Gradient pop up window as well as a collection of bitmap textures and patterns you...

Page 183: ...t of swatches or sample a color from anywhere on the screen using the eyedropper pointer 4 Use the tool as desired Editing solid fills A solid fill is a solid color that fills the interior of an objec...

Page 184: ...n the Property inspector or the Fill Options pop up window to edit fill attributes Applying a pattern fill You can fill a path object with a bitmap graphic known as a pattern fill Fireworks ships with...

Page 185: ...ector object properties displayed in the Property inspector select Pattern from the Fill Options pop up menu 2 Click the Fill Color box and select Other from the Pattern Name pop up menu 3 Navigate to...

Page 186: ...n the Property inspector or Tools panel to open the pop up window The Edit Gradient pop up window opens with the current gradient in the color ramp and preview To add a new color or opacity swatch to...

Page 187: ...ith a gradient instead of a solid color Like the Paint Bucket tool it retains the properties of the last used element To use the Gradient tool 1 Click the Paint Bucket tool in the Tools panel and sele...

Page 188: ...l width and skew Drag a square handle Setting hard edged anti aliased or feathered fill edges In Fireworks you can make the edge of a fill a regular hard line or soften the edge by anti aliasing or fe...

Page 189: ...a custom gradient for use across many documents you must create a style For more information see Creating and deleting styles on page 237 Removing a fill You can easily remove fill attributes from sel...

Page 190: ...Sandpaper Use the Stroke options in the Property inspector or the Stroke Options pop up window to add a texture to a brush stroke To add texture to the stroke of a selected object 1 Do one of the fol...

Page 191: ...Other from the pop up menu and navigate to a texture file to use an external texture 3 Enter a percentage from 0 to 100 to control the depth of the texture Increasing the percentage increases the tex...

Page 192: ...192 Chapter 7 Applying Color Strokes and Fills...

Page 193: ...e or rearrange the order of filters to experiment with a combined filter You can turn Live Filters on and off or delete them in the Property inspector When you remove a filter the object or image retu...

Page 194: ...ers button and the list of applied Live Filters displayed in the Property inspector When the Property inspector is at half height click Edit Filters to display the Add Live Filters button the Delete L...

Page 195: ...box click OK If the Live Filter has a pop up window press Enter or click anywhere in the workspace 3 Repeat steps 1 and 2 to apply more Live Filters To enable or disable a Live Filter applied to an ob...

Page 196: ...You can create an inner bevel or an outer bevel A rectangle with Inner Bevel and with Outer Bevel To apply a beveled edge to a selected object 1 Click the Add Live Filters button in the Property inspe...

Page 197: ...he angle of the light shining on the object Drop Shadow Inner Shadow and Glow filters To apply a solid shadow 1 In the Property inspector click the Add Live Filters button point to Shadow and Glow and...

Page 198: ...Property inspector then select Shadow and Glow Glow 2 Edit the filter settings in the pop up window Click the color box to open the color pop up window and set the glow color Drag the Width slider to...

Page 199: ...rs however are saved with the Fireworks file To install Photoshop plug ins 1 In the Property inspector click the Add Filters button then select Options Locate Plugins 2 Navigate to the folder where th...

Page 200: ...er Bevel filter should be applied before filters that change the object s exterior For example you should apply the Inner Bevel filter before you apply the Outer Bevel Glow or Shadow filter To reorder...

Page 201: ...ns 3 Type a name for the style and click OK The custom Live Filter name is added to the Add Filters pop up menu and a style icon representing the Live Filter is added to the Styles panel To create a c...

Page 202: ...from the Commands menu You can use these commands in batch processing For more information see Performing commands with a batch process on page 434 s To save filter settings as a command 1 Apply the f...

Page 203: ...yers panel You can also create masks using options on the Select and Modify menus You can use a vector object or a bitmap object to block out part of the underlying image For example if you want to bl...

Page 204: ...mines how objects on one layer overlap objects on another You can rearrange the order of layers and of objects within layers The Layers panel displays the current state of all layers in the current fr...

Page 205: ...ou can add new layers delete unwanted layers and duplicate existing layers and objects When you create a new layer a blank layer is inserted above the currently selected layer The new layer becomes th...

Page 206: ...fore Current Layer places the new layer or layers above the selected layer After Current Layer places the new layer or layers below the selected layer At the Bottom places the new layer or layers at t...

Page 207: ...location in the Layers panel To move all selected objects on a layer to another location Drag the layer s blue selection indicator to another layer All selected objects on the layer move to the other...

Page 208: ...the left of the layer name A padlock icon indicates that the layer is locked To lock multiple layers Drag the pointer along the Lock column in the Layers panel To lock or unlock all layers Select Loc...

Page 209: ...2 Do one of the following Select Merge Down from the Layers panel Options menu Select Modify Merge Down Select Merge Down from the context menu that appears when you right click Windows or Control cli...

Page 210: ...individual layers as if the layers were ungrouped in Photoshop before being imported into Fireworks The clipping effect on Photoshop grouped layers is lost on import Masking images As the name suggest...

Page 211: ...cookie cutter effect A vector mask applied using its path outline When you create a vector mask a mask thumbnail with a pen icon appears in the Layers panel to indicate you ve created a vector mask A...

Page 212: ...mask editing process When a mask is selected the Property inspector displays a variety of properties not only for a selected mask but also for any bitmap tools you might use to edit the mask Original...

Page 213: ...You can create a mask from an existing object When used as a mask a vector object s path outline can be used to clip or crop other objects When a bitmap object is used as a mask either the brightness...

Page 214: ...ects you want to use as the mask can be either in front of or behind the objects or group to be masked 3 Select Edit Cut to cut the object or objects you want to use as the mask 4 Select the object or...

Page 215: ...type of mask object you use The Paste Inside command creates a mask by filling a closed path or bitmap object with other objects vector graphics text or bitmap images The path itself is sometimes refe...

Page 216: ...te 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 so that they overlap the object into which you want to past...

Page 217: ...as well A text mask applied using its path outline For more information see Creating a mask from an existing object on page 213 For more information about the different ways masks can be applied see C...

Page 218: ...map use one of the marquee or lasso tools to create a pixel selection 4 Select a bitmap painting tool from the Tools panel such as the Brush Pencil Paint Bucket or Gradient tool 5 Set the desired tool...

Page 219: ...the current pixel selection The other pixels in the bitmap object are shown To achieve the same effect make a pixel selection then Alt click Windows or Option click Macintosh the Add Mask button To u...

Page 220: ...dify Mask Reveal Selection to show the area defined by the pixel selection Select Modify Mask Hide Selection to hide the area defined by the pixel selection The results of Reveal Selection and Hide Se...

Page 221: ...oshop you must select Maintain Editability over Appearance when exporting Grouping objects to form a mask You can group two or more objects to create a mask The topmost object becomes the mask object...

Page 222: ...nge the visibility of masked objects You can also change a mask s type and the way it is applied In addition masks can be replaced disabled or deleted The results of editing a mask are immediately vis...

Page 223: ...red To select a mask Click the mask thumbnail in the Layers panel The Layers panel displays a yellow highlight around a mask thumbnail when it is selected To select masked objects Click the masked obj...

Page 224: ...he mask on the canvas using the Pointer tool 2 Drag the mask to a new location but don t drag the move handle unless you want to move the masked object separately from the mask To move masks and maske...

Page 225: ...jects independently of the mask using the move handle 1 Select the mask on the canvas using the Pointer tool 2 Drag the move handle to a new location The objects move without affecting the position of...

Page 226: ...grayscale bitmap masks use the bitmap tools to draw on the mask using various grayscale color values For grayscale vector masks change the color of the mask object To modify a mask by adding more mask...

Page 227: ...f the path or text is used as the mask Optionally you can show the mask s fill and stroke This produces the same result as using Paste Inside to create masks For more information see Creating a mask f...

Page 228: ...or masks into bitmap masks Bitmap masks cannot be converted into vector masks however For more information about vector and bitmap masks see About masks on page 211 To apply a vector mask using its pa...

Page 229: ...the thumbnail of the masked object in the Layers panel and select Edit Paste as Mask 3 Click Replace when asked whether to replace the existing mask or add to it The existing mask object is replaced...

Page 230: ...mode Fireworks applies it to the selected objects in their entirety Objects in a single document or on a single layer can have blending modes that differ from those of other objects in the document o...

Page 231: ...with the luminance and saturation of the base color to create the result color Saturation combines the saturation of the blend color with the luminance and hue of the base color to create the result c...

Page 232: ...s Here are examples of some of the blending modes in Fireworks For additional examples see the following web site at www pegtop net delphi blendmodes Original image Normal Multiply Screen Darken Light...

Page 233: ...or or the Layers panel 3 Select a setting from the Opacity pop up slider or type a value in the text box To set a default blending mode and opacity level to be applied to objects as you draw them 1 Ch...

Page 234: ...234 Chapter 9 Layers Masking and Blending...

Page 235: ...ly save them in the Styles panel and then apply that combination of attributes to other objects Fireworks has three types of symbols graphic animation and button Each has unique characteristics for it...

Page 236: ...has many predefined styles You can add change and remove styles The Fireworks CD ROM and the Macromedia web site have many more predefined styles that you can import into Fireworks You can also export...

Page 237: ...yle is displayed in the Styles panel You can also delete styles from the Styles panel The following attributes can be saved in a style Fill type and color including patterns textures and vector gradie...

Page 238: ...Double click a style in the Styles panel 3 In the Edit Style dialog box select or deselect components of the attributes you wish to apply The Edit Style dialog box contains the same options as the Ne...

Page 239: ...menu to switch between large and small preview sizes Applying attributes without creating a style You can copy attributes from one object and apply them to other objects without creating a new style i...

Page 240: ...submenu You can create a symbol from any object text block or group and then organize them in the Library panel To place instances in a document you simply drag them from the Library panel onto the c...

Page 241: ...select Modify Symbol Edit Symbol 2 Make changes to the symbol and close the window The symbol and all instances reflect the modifications To rename a symbol 1 Double click the symbol name in the Libr...

Page 242: ...edits you make to the symbol won t be reflected in the former instance Button symbols have several convenient features that allow you to retain the symbol instance relationship for a group of buttons...

Page 243: ...g or dragging and dropping You can import symbols from other libraries including libraries containing symbols prepared in Macromedia Fireworks and libraries containing symbols that you or someone else...

Page 244: ...an navigate to previously exported symbol library PNG files For more information see the next procedure In addition you can import symbols from previously exported library PNG files located on your ha...

Page 245: ...enu to export them in a PNG file You can then import the symbols by navigating to the PNG file that contains the symbols using the Edit Libraries submenu For more information see Importing symbols on...

Page 246: ...d store the URLs in the library You use the URL panel to add edit and organize your URLs For example if your website contains several navigation buttons to return to your home page you can add the URL...

Page 247: ...you create are stored in the URL Libraries folder in the Macromedia Fireworks 8 folder in your user specific Application Data Windows or Application Support Macintosh folder For information on locatin...

Page 248: ...ete URL from Library button at the bottom of the URL panel To delete all unused URLs from the library 1 Select Clear Unused URLs from the URL panel Options menu 2 Click OK Editing URLs You can easily...

Page 249: ...represents one level htmldocs file htm links to a file located in a folder named htmldocs which is in the folder containing the source document Relative URLs are usually the simplest ones to use for l...

Page 250: ...250 Chapter 10 Using Styles Symbols and URLs...

Page 251: ...create rollover and swap image effects in the workspace You can view the assigned behaviors in the Behaviors panel and create more complex interactions using this panel You can also incorporate intera...

Page 252: ...thout sacrificing quality Slicing enables you to optimize each individual slice using the most appropriate file format and compression settings For more information see Chapter 14 Optimizing and Expor...

Page 253: ...area includes the outermost edges of the selected object 2 If more than one object is selected select how to apply slices Single creates a single slice object that covers all selected objects Multipl...

Page 254: ...or select HTML from the Type pop up menu 3 Click Edit 4 Type text in the Edit HTML Slice window and format the text if desired by adding HTML text formatting tags 5 Click OK to apply your changes and...

Page 255: ...ygon Slice tool 2 Click to place the vector points of the polygon The Polygon Slice tool draws only straight line segments 3 When drawing a polygon slice object around objects with soft edges be sure...

Page 256: ...bjects currently in your document 3 Click a slice name to select it The slice is highlighted in the Web Layer and is selected on the canvas Showing and hiding slices Hiding a slice renders the slice i...

Page 257: ...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 se...

Page 258: ...ce object by dragging its slice guides If multiple slice objects are aligned along a single slice guide you can drag that slice guide to resize all the slice objects simultaneously Resizing multiple s...

Page 259: ...o edit the shape of a selected slice do one of the following Select the Pointer or Subselection tool and drag the slice s corner points to modify its shape Use a transformation tool to perform the des...

Page 260: ...ate simple interactivity 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 multi...

Page 261: ...incorporating rollover effects For more information see Creating hotspots on page 276 About rollovers Rollovers all work the same way One graphic triggers the display of another when the pointer rolls...

Page 262: ...mple rollover to a slice 1 Ensure that the trigger object is not on a shared layer For more information see Sharing layers on page 209 2 Select Edit Insert Slice to create a slice on top of the trigge...

Page 263: ...erent location on the web page The image that is rolled over is considered the trigger the image that changes is considered the target As with simple rollovers that use just one slice you first have t...

Page 264: ...1 in the Frames panel to return to the frame that has the original image 6 Select the slice hotspot or button that covers the trigger area the original image and place the pointer over the behavior ha...

Page 265: ...to the upper left edge of the same slice creates a swap image and dragging it to another slice creates a disjoint rollover 2 Select the frame of the swap image and click OK 3 Create more rollovers by...

Page 266: ...is automatically set for you by default when you use the Button Editor to create a button that includes an Include Over While Down state or Show Down Image Upon Load state When you create a two state...

Page 267: ...t such as onClick that triggers the behavior To change the mouse event that activates the behavior 1 Select the trigger slice or hotspot containing the behavior you want to modify All behaviors associ...

Page 268: ...av Bar Down dialog box select Image File and click the folder icon 2 Navigate to the file you want to use and click Open 3 If necessary deselect Preload Images if the external file is an animated GIF...

Page 269: ...auto naming convention that Fireworks uses through the HTML Setup dialog box Fireworks exports a sliced Fireworks document as an HTML file and a series of graphic files You can define properties for...

Page 270: ...nts in a new unnamed browser window parent loads the linked document in the parent frameset or window of the frame that contains the link If the frame containing the link is not nested then the linked...

Page 271: ...me to each slice file automatically based on the default naming convention To auto name a slice file When you export your sliced image enter a name in the File Name Windows or Name Macintosh text box...

Page 272: ...hic home_f2 gif and the Down state graphic home_f3 gif You can create your own naming convention for multiframe slices using the HTML Setup dialog box To change the default auto naming convention 1 Se...

Page 273: ...wly in browsers but because there are no spacers it is easier to edit their HTML For more information about HTML see Exporting HTML on page 357 To define how Fireworks exports HTML tables 1 Select Fil...

Page 274: ...reaking Space places an HTML space tag in empty cells The cell appears hollow 6 Click OK For more information about specifying HTML export options see Setting HTML export options on page 367 NO TE If...

Page 275: ...wnload and the processing power required to reassemble sliced graphics Hotspots are ideal when you want areas of an image to link to other web pages but you don t need those areas to highlight or prod...

Page 276: ...panel 2 Drag the hotspot tool to draw a hotspot over an area of the graphic Hold down Alt Windows or Option Macintosh to draw from a center point To create an odd shaped hotspot 1 Select the Polygon H...

Page 277: ...or polygon hotspot In the Property inspector select Rectangle Circle or Polygon from the Hotspot Shape pop up menu Preparing hotspots for export You can use the Property inspector to assign URLs alter...

Page 278: ...rresponding graphics files which you can later import into Dreamweaver or another HTML editor Copy to Clipboard copies all required HTML including a table if the document is sliced to the Clipboard so...

Page 279: ...fined by a slice Rollover effects are applied to hotspots the same way that they are to slices For more information see Adding simple interactivity to slices on page 260 After you create a disjoint ro...

Page 280: ...t the text triggers the rollover effect yet the entire graphic beneath the slice swaps out when the rollover effect occurs Avoid creating hotspots that overlap more than one slice or unpredictable beh...

Page 281: ...has a Pop up Menu Editor which allows you to quickly and easily create vertical or horizontal pop up menus The Advanced tab of the Pop up Menu Editor gives you creative control over cell spacing and p...

Page 282: ...to edit Double click the instance on the canvas and you can change it in the Button Editor or the Property inspector Like other symbols buttons have a registration point The registration point is a ce...

Page 283: ...tate tab 2 Import or create the Up state graphic Drag and drop or import the graphic that will appear as the button s Up state into the work area of the Button Editor Use the drawing tools to create a...

Page 284: ...two state button on page 283 To create a Down state 1 With a two state button open in the Button Editor click the Down tab 2 Do one of the following to create the button s Down state Click Copy Over...

Page 285: ...Select Bevel and Emboss Inner Bevel Select Bevel and Emboss Outer Bevel 4 In the pop up window that appears select a button preset filter These are described below 5 Repeat steps 1 through 4 for the r...

Page 286: ...tional instances of a button symbol in a document do one of the following Select an instance and then select Edit Clone to place another instance directly in front of the selected instance The new ins...

Page 287: ...on the submenu These libraries contain a wide variety of premade button symbols prepared by Macromedia You import and export button symbols just as you import and export animation and graphic symbols...

Page 288: ...ce level properties are edited in the Property inspector when a single instance is selected You change these properties for an instance without affecting the associated symbol or any other instances o...

Page 289: ...nclose all the states of a button You can edit a button slice only in the Active Area tab of the Button Editor Each button can have only one slice If you draw a slice using a slice tool in the active...

Page 290: ...pears in the Link text box in the Property inspector for each instance This is helpful when entering absolute URLs within a site you need only complete the last part of the URL in each instance s Link...

Page 291: ...tor 1 Do one of the following to open the button in the Button Editor Double click a button instance in the workspace In the Library panel double click the button preview or the symbol icon beside the...

Page 292: ...be a symbol or instance level button property You can set alternate text for a button symbol or instance in the Property inspector To set the alt text for a button symbol in the Button Editor 1 Do on...

Page 293: ...stance and select Edit Clone Alt drag Windows or Option drag Macintosh the button instance 4 Shift drag a button to align it horizontally or vertically For more precise control use the arrow keys to m...

Page 294: ...zontal orientation Advanced contains options that determine the cell dimensions padding and spacing the cell border width and color menu delay and text indention Position contains options that determi...

Page 295: ...pop up menu if any are available If you ve entered URLs for other web objects in the document those URLs appear in the Link pop up menu Target designates the target for the URL You can enter a custom...

Page 296: ...der the item directly above it on the menu item list 4 To add the next item to the submenu highlight it and click Indent Menu All items that are contiguously indented at the same level constitute a si...

Page 297: ...to the Appearance tab or select another tab to continue building the pop up menu Click Done to close the Pop up Menu Editor In the workspace the hotspot or slice on which you built the pop up menu dis...

Page 298: ...states and select vertical or horizontal orientation in the Appearance tab of the Pop up Menu Editor To set the orientation of a pop up menu 1 With the desired pop up menu open in the Pop up Menu Edit...

Page 299: ...p menu or enter the name of a custom font 4 Optionally click a text style button to apply a bold or italic style 5 Click a justification button to align text to the left or right or center it 6 Select...

Page 300: ...itor 1 Apply any combination of stroke fill texture and Live Filters to an object and save it as a style using the Styles panel For more information see Creating and deleting styles on page 237 2 Sele...

Page 301: ...menu in the Pop up Menu Editor see Editing pop up menus on page 304 2 Select a width or height constraint from the Automatic Pixels pop up menu Automatic forces the cell height to conform to the text...

Page 302: ...rder Border Color Shadow and Highlight allow you to modify the color of pop up menu borders 8 Do one of the following to complete the pop up menu or continue building it Click Next to move to the Posi...

Page 303: ...on tab For information on opening an existing pop up menu in the Pop up Menu Editor see Editing pop up menus on page 304 2 Do one of the following to define the menu position Click a Position button t...

Page 304: ...submenu position To make each submenu s position relative to the parent pop up menu select Place in Same Position 4 Click Done to close the Pop up Menu Editor or click Back to modify properties on oth...

Page 305: ...can also choose to have the CSS code written to an external css file and export that file along with an mm_css_menu js file to the same location as the HTML file If you do not choose to use CSS code f...

Page 306: ...n image file called arrows gif This image is the tiny arrow that appears next to a menu entry that tells users a submenu exists No matter how many submenus a document contains Fireworks always uses th...

Page 307: ...ngs to the symbol to gradually change the content of successive frames You can make a symbol appear to move across the canvas fade in or out get bigger or smaller or rotate Because you can have multip...

Page 308: ...fading in or out and angle and direction of rotation For more information see Editing animation symbols on page 310 3 Use the Frame Delay controls in the Frames panel to set the speed of the animated...

Page 309: ...on and the type of action such as scaling or rotation By default a new animation symbol has five frames each with a delay time of 0 07 seconds To create an animation symbol 1 Select Edit Insert New Sy...

Page 310: ...properties in the Property inspector You can edit any of the following properties for an animation symbol Frames is the number of frames you want to include in the animation Although the slider limit...

Page 311: ...x click OK to accept the changed properties Removing animations You can remove animations either by deleting the animation symbol from the library or by removing the animation from the symbol To remov...

Page 312: ...mbol moves The green dot on the motion path indicates the starting point and the red dot shows the end point The blue points on the path represent frames For example a symbol with five frames would ha...

Page 313: ...me delay determines how long the current frame is displayed It is specified in hundredths of a second For example a setting of 50 displays the frame for half a second and a setting of 300 displays it...

Page 314: ...ming animation frames As you set up an animation Fireworks creates the appropriate number of frames and displays them in the Frames panel By default the frames are named Frame 1 Frame 2 and so on When...

Page 315: ...ick OK Duplicating a frame is useful when you want objects to reappear in another part of the animation To reorder frames Drag the frames one by one to a new location in the list To delete the selecte...

Page 316: ...the Layers panel to share the layer across frames When a layer is shared across frames all objects on that layer are visible in every frame You can edit objects on shared layers from any frame those...

Page 317: ...and following the currently selected frame You can smoothly animate objects without having to flip back and forth through them The term onion skinning comes from a traditional animation technique of...

Page 318: ...frames in between In Fireworks tweening blends two or more instances of the same symbol creating interim instances with interpolated attributes Tweening is a manual process useful for more sophistica...

Page 319: ...do not appear in the preview Previewing the animation in the Original view displays the full resolution source graphic not the optimized preview used for the exported file To preview an animation in...

Page 320: ...he number of times to repeat the animation after the first time If you select 4 for example the animation plays five times in all Forever repeats the animation continuously Setting transparency As par...

Page 321: ...clip art and cartoonlike graphics For information about exporting animated GIFs see Exporting an animation on page 355 You can export the animation as a Flash SWF file and then import it into Macromed...

Page 322: ...additional motion to it For example you can import an animation of a man walking in place and then apply direction and motion properties to have the man walk across the screen When you open an animat...

Page 323: ...ad based on several existing graphics by opening each graphic and placing it in a separate frame in the same document To open multiple files as an animation 1 Select File Open 2 Shift click to select...

Page 324: ...324 Chapter 13 Creating Animation...

Page 325: ...The wizard guides you through the export process and suggests settings It also displays the Image Preview where you can optimize a document as part of the export process If you are comfortable with th...

Page 326: ...can limit colors by confining the image to a specific set of colors called a color palette Then you trim unused colors from the color palette Fewer colors in the palette means fewer colors in the imag...

Page 327: ...ving see Saving documents in other formats on page 27 To export a document using the Export Wizard 1 Select File Export Wizard 2 Answer any questions that appear and click Continue in each panel Firew...

Page 328: ...ge Preview To edit optimization settings click the Options tab For information about the options available on this tab see the following procedures To edit the size and area of the exported image clic...

Page 329: ...tings 6 In the Export dialog box type a name for the file select a destination set any other options if desired and click Save For more information about the options in the Export dialog box see Expor...

Page 330: ...export area Drag the dotted border that appears around the preview until it encloses the desired export area Drag inside the preview to move hidden areas into view Enter pixel coordinates for the bou...

Page 331: ...ing graphics for use on the web is a two step process optimizing then exporting or in some cases simply saving Optimizing graphics ensures they possess the right mix of color compression and quality A...

Page 332: ...When you select an option from the Default export options pop up menu in the Property inspector the rest of the options in the Optimize panel are automatically set for you You can further adjust each...

Page 333: ...mize panel select an option from the Export File Format pop up menu 2 Set format specific options such as color depth dither and quality 3 Select other optimization settings from the Optimize panel Op...

Page 334: ...it would take to download all the document s slices and frames on a 56K modem The 2 Up and 4 Up views display additional information that varies depending on the file type selected You can use the Opt...

Page 335: ...from 2 Up or 4 Up view 1 Select an optimized view 2 Select Original No Preview from the Preview pop up menu at the bottom of the preview window To switch the Original view to an optimized view from 2...

Page 336: ...ons WBMP or Wireless Bitmap is a graphic format created for mobile computing devices such as cell phones and PDAs This format is used on Wireless Application Protocol WAP pages WBMP is a 1 bit format...

Page 337: ...close to websafe colors are converted to the closest websafe color Websafe colors are those that come from the Web 216 palette Web 216 is a palette of the 216 colors common to both Windows and Macinto...

Page 338: ...es smaller by reducing the number of colors they use Reducing color depth discards some colors in the image beginning with those used least Pixels containing discarded colors convert to the closest co...

Page 339: ...lend to create the appearance of the missing color Dithering is especially helpful when exporting images with complex blends or gradients or when exporting photographic images to an 8 bit graphic file...

Page 340: ...ols appear on some color swatches indicating certain characteristics of individual colors as follows If you edit the document the color table may no longer show all the colors in the document When thi...

Page 341: ...he pixels that contain the selected swatch temporarily change to another highlight color until you release the mouse button Locking colors in a palette You can lock individual colors so that you canno...

Page 342: ...the replaced color in the preview area Using websafe colors Websafe colors are colors that are common to both Macintosh and Windows platforms These colors are not dithered when viewed in a web browse...

Page 343: ...Optimize panel Options menu 2 Type a name for the palette and select a destination folder 3 Click Save You can load the saved palette file into the Swatches panel or Optimize panel for use when export...

Page 344: ...t it and most web browsers do not support PNG format Alpha transparency is often used in exported graphics that contain gradient transparency and semi opaque pixels Alpha transparency is also useful f...

Page 345: ...r 4 Up button at the upper left of the Document window In 2 Up or 4 Up view click a view other than the original 2 In the Optimize panel click the Add Color to Transparency or Remove Color from Transp...

Page 346: ...G by editing its color palette The color table is empty when a JPEG image is selected As you experiment with different optimization settings you can use the 2 Up and 4 Up buttons to test and compare a...

Page 347: ...tting maintains image quality but compresses less producing larger files A low percentage setting yields a small file but produces a lower quality image Selectively compressing areas of a JPEG Selecti...

Page 348: ...All text items will automatically be exported at a higher level regardless of the Selective Quality value 8 Select Preserve Button Quality All button symbols will automatically be exported at a highe...

Page 349: ...an object into the background on which it is placed For example if the object is black and the page on which it rests is white anti aliasing adds several shades of gray to the pixels surrounding the...

Page 350: ...alos in native Fireworks PNG files and imported Photoshop files do one of the following Set the Canvas Color in the Property inspector or the Matte Color in the Optimize panel to the color of the targ...

Page 351: ...enu in the Optimize panel and in the Property inspector They are available in all subsequent documents The preset file is saved in the Export Settings folder in your user specific Fireworks configurat...

Page 352: ...erence which is defined if you ve ever exported the document and then saved the PNG 2 The current export save location which is defined anytime you browse away from the default location presented in a...

Page 353: ...ML Setup dialog box For more information see Setting HTML export options on page 367 To export a sliced Fireworks document 1 Select File Export 2 Navigate to the desired folder on your hard drive 3 Se...

Page 354: ...ort only the slices you selected before export select Selected Slices Only and ensure that the Include Areas Without Slices option is not selected 6 Click Export Each slice is exported using its optim...

Page 355: ...porting to multiple files see Exporting frames or layers on page 356 For information about exporting animations as Flash SWF files see Working with Macromedia Flash on page 392 To export an animation...

Page 356: ...estination and click Export Exporting frames or layers Fireworks can export each layer or frame in a document as a separate image file using the optimization settings specified in the Optimize panel T...

Page 357: ...Export 6 In the Export dialog box type a filename and select a destination folder 7 In the Export pop up menu select Images Only 8 Click Export Exporting HTML Unless you specify otherwise when you exp...

Page 358: ...e standard for displaying web pages on the Internet An HTML file is a text file that contains these elements Text that will appear on the web page HTML tags that define the formatting and structure of...

Page 359: ...nt contains pop up menus and you export those pop up menus the following files are exported mm_css_menu js and a css file containing the CSS pop up menu code If your pop up menus contain submenus an a...

Page 360: ...hoosing Export HTML generates an HTML file and the associated image files in the location you specify 7 Select Export Slices from the Slices pop up menu if your document contains slices 8 Select Put I...

Page 361: ...ther than Dreamweaver or Microsoft FrontPage JavaScript code associated with buttons behaviors and rollover images is copied but may not function correctly If these issues pose a problem for you use t...

Page 362: ...he same location in which you exported your images 2 View the HTML code and place the insertion point in the desired location between the BODY tags NO T E Optionally if you are exporting to Dreamweave...

Page 363: ...necessary code and copy it to the Clipboard 3 Open an existing HTML document or create a new one 4 Paste the code from the Clipboard at the desired location in the new HTML file You do not have to cop...

Page 364: ...he end of the document 5 If Fireworks generated HTML is found select one of the following and click OK Replace Images and Their HTML replaces the previous Fireworks HTML Update Images Only overwrites...

Page 365: ...In the not too distant future XHTML is expected to replace HTML as the standard for displaying web content Not only is XHTML backward compatible meaning that most current web browsers can view it but...

Page 366: ...splay different character sets on the same HTML page Fireworks allows you to export HTML with UTF 8 encoding In Fireworks UTF 8 encoding is turned on by default so that any HTML document you export ca...

Page 367: ...ctive elements export differently from Fireworks depending on the selected HTML style To export your document using the XHTML standard select the appropriate XHTML style from the pop up menu For more...

Page 368: ...e 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 appear as a tooltip when the pointer passes over the image This is...

Page 369: ...ML to the Clipboard You can export a Flash SWF file or copy selected objects as vectors You can even use the Quick Export button to start other applications as well as preview Fireworks documents in a...

Page 370: ...le in the Optimize panel To send a document as an e mail attachment using your default e mail client 1 Select File Send to E mail 2 Select one of the following options Fireworks PNG attaches the curre...

Page 371: ...opies the local version of the file to the remote site overwriting the remote file with the local copy Check In checks the local file in overwriting the remote file with the local copy Check In is ena...

Page 372: ...372 Chapter 14 Optimizing and Exporting...

Page 373: ...amweaver and Fireworks share a tight integration known as Roundtrip HTML Roundtrip HTML allows you to make changes in one application and have those changes seamlessly reflected in the other Dreamweav...

Page 374: ...an open the Fireworks Export Preview dialog box from the Dreamweaver Property inspector and enter updated settings In either case updates are made to the placed files in Dreamweaver as well as to the...

Page 375: ...of Fireworks and Dreamweaver by allowing you to experiment with various web page layouts before creating the final artwork for your page Image placeholders allow you to specify the size and position o...

Page 376: ...Click the Images Image pop up menu in the Common category of the Insert bar and choose Image Placeholder The Image Placeholder dialog box appears 3 Enter the name dimensions color and alternate text f...

Page 377: ...works Help 7 Specify a name for the exported image file or files in the Export dialog box These are the image files that are displayed in Dreamweaver 8 Specify a location for the exported image file o...

Page 378: ...the location you specify You then place the HTML code into Dreamweaver using the Insert Fireworks HTML feature To export Fireworks HTML Export your document to HTML format For more information see Fir...

Page 379: ...nt is copied into the Dreamweaver document images are exported to a location you specify and Dreamweaver updates the HTML with document relative links to those images To copy Fireworks HTML to the Cli...

Page 380: ...orted HTML code and image files placed in a Dreamweaver document This command lets you update Dreamweaver files even when Dreamweaver is not running To update Fireworks HTML placed in Dreamweaver 1 Ma...

Page 381: ...e process of editing and updating frequently used website components such as company logos or other graphics that appear on every page of a site A library item is a portion of an HTML file located in...

Page 382: ...not exist use the Select Folder dialog box to create or locate the folder The folder must be named Library the case is important because Dreamweaver is case sensitive 3 In the Export dialog box type...

Page 383: ...pector in Dreamweaver helps you 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...

Page 384: ...ver Dreamweaver recognizes and preserves all edits applied to the image in Fireworks 5 When you have finished editing the image click Done in the Document window The image is exported using the curren...

Page 385: ...Property inspector Select an image in the table then click Edit in the Property inspector Control double click Windows or Command double click Macintosh the image you want to edit Right click Windows...

Page 386: ...desired and the behavior will 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 Dreamwe...

Page 387: ...ed image 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 the Export Preview dialog box To edit...

Page 388: ...nimations placed in Dreamweaver on page 386 and Using Export Preview in Fireworks Help Setting launch and edit options To use Roundtrip HTML effectively you should perform some preliminary tasks such...

Page 389: ...orks 2 does not support opening and editing source PNG files for placed images To set Fireworks as the primary external image editor for Dreamweaver 1 In Dreamweaver choose Edit Preferences and then c...

Page 390: ...aring the site can locate the source PNG when starting Fireworks from within Dreamweaver Specifying launch and edit preferences for Fireworks source files The Fireworks launch and edit preferences let...

Page 391: ...ccess to file transport commands You can use the File Management button if your document resides in a Dreamweaver site folder and if the site has access to a remote server Fireworks recognizes your fo...

Page 392: ...you can also import JPEG GIF PNG and SWF files that have been exported from Fireworks Importing Fireworks PNG files into Flash You can import Fireworks PNG source files directly into Flash without hav...

Page 393: ...iles see Fireworks Help 2 Switch to an open document in Flash 3 Optional Click the keyframe and layer onto which you want to import the Fireworks content This is necessary only if you plan to import t...

Page 394: ...map image 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 lost 9 Select the Impor...

Page 395: ...ations as SWF files Fireworks graphics and animations can be exported as Flash SWF files You can make several choices about how objects are exported Some formatting is lost unless you choose Maintain...

Page 396: ...g are lost Maintain Appearance converts vector objects to bitmap objects as needed and preserves the appearance of applied strokes and fills Editability is lost 6 In the Text section choose one of the...

Page 397: ...Select PNG 8 as the Export file format and Alpha Transparency from the Transparency pop up menu 3 Select File Export 4 Select Images Only from the Save as Type pop up menu Name the file then click Sa...

Page 398: ...Control click Macintosh the graphic file in the Library panel 2 Select Edit with Fireworks from the pop up menu 3 Click Yes in the Find Source box if you want to locate the original PNG file for your...

Page 399: ...later graphics Importing FreeHand graphics into Fireworks Fireworks can import vector graphics that were created in FreeHand You can set the following options when importing a FreeHand graphic Scale...

Page 400: ...le bitmap object in a Fireworks document Enter a number in the text box to determine how many objects a group blend or tiled fill can contain before it is rasterized during import To import vector gra...

Page 401: ...that were created in Fireworks Depending on the options you select when importing or opening FreeHand can import Fireworks layers frames vectors text bitmaps and some effects that are shared by both a...

Page 402: ...o uneditable bitmap images Only objects with effects strokes and fills not shared by FreeHand are converted Keep All Paths Editable lets you edit all imported vector objects Some objects might appear...

Page 403: ...opy in Fireworks 2 Select Edit Copy or click the Quick Export button and choose Copy from the FreeHand pop up menu 3 Switch to an open document in FreeHand 4 Select Edit Paste The Fireworks PNG Import...

Page 404: ...from the Save As pop up menu 4 Click the Options button 5 In the Illustrator Export Options dialog box choose one of the following Export Current Frame Only preserves layer names and exports only the...

Page 405: ...aphic editors including Macromedia FreeHand do not support the following Fireworks features Live Filters Blending modes Textures pattern fills web dither fills and gradient fills Slice objects and ima...

Page 406: ...g layered and sliced content to Director By exporting Fireworks slices to Director you can export sliced and interactive content such as buttons and rollover images By exporting layers to Director you...

Page 407: ...ttened images that you have exported from Fireworks such as JPEG GIF and 32 bit PNG images Or you can import Fireworks layers slices and interactive elements by inserting Fireworks HTML To import a fl...

Page 408: ...f they contain transparency choose 32 bit color Registration allows you to set the registration point for the imported graphics Import Rollover Behaviors as Lingo converts Fireworks behaviors to Lingo...

Page 409: ...ember 1 In Director right click Windows or Control click Macintosh the graphic in the Cast window 2 Select Launch External Editor from the pop up menu The file opens in Fireworks and the Document wind...

Page 410: ...asy But even more important Fireworks and HomeSite share a powerful integration that allows you to start Fireworks from HomeSite to edit web graphics Placing Fireworks images in HomeSite You can inser...

Page 411: ...e exported file in HomeSite by choosing File Open For more information see Fireworks Help Copying Fireworks HTML to the Clipboard for use in HomeSite A fast way to place Fireworks generated HTML in Ho...

Page 412: ...ages in HomeSite You can use launch and edit integration to edit images in a HomeSite document HomeSite automatically starts Fireworks letting you make the desired edits to the image When you exit Fir...

Page 413: ...g native Photoshop PSD files with options for retaining many aspects of the imported files including layers masks and editable text As a result you can bring Photoshop images into Fireworks for furthe...

Page 414: ...ireworks 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...

Page 415: ...ctual text that may differ in appearance from the original text The original font data is stored in the PNG file so that if the file is on a system that does have the fonts you can choose to use those...

Page 416: ...m the original Text Maintain Appearance converts text in the Photoshop file to a bitmap object in Fireworks This option maintains the original appearance of the text but does not allow you to edit it...

Page 417: ...third party filters and plug ins using the Live Filters window 1 Select any vector object bitmap object or text block on the canvas and click the Add Effects button in the Property inspector 2 Select...

Page 418: ...ns for objects effects and text in the Fireworks file Individual export options are described in detail in Customizing files for export to Photoshop on page 419 Maintain Editability over Appearance co...

Page 419: ...ent in Photoshop If the effects do not exist in Photoshop they are discarded Render Effects flattens effects into their objects When you choose this option you preserve the appearance of the effects a...

Page 420: ...ure allowing you to open and edit most any HTML document within Fireworks For more information see Fireworks Help About extending Fireworks If you are proficient in JavaScript and Fireworks you can us...

Page 421: ...Process can apply custom optimization settings to groups of files You can also resize a group of files making Batch Process an ideal tool for creating thumbnails Using the History panel you can create...

Page 422: ...rch 1 Open the document 2 Do one of the following to open the Find panel Select Window Find Select Edit Find Press Control F Windows or Command F Macintosh 3 From the Search pop up menu select a sourc...

Page 423: ...a found element with the contents of the Change To option Replace All finds and replaces every occurrence of a found element throughout the search range Setting options for finding and replacing in m...

Page 424: ...es folder and the next higher number is added to its filename For example for a file named Drawing png the first time you find and replace the backup file is named Drawing 1 png The second time you fi...

Page 425: ...Select an item from the Apply To pop up menu to determine how the colors found are applied Fills Strokes finds and replaces both fill and stroke colors All Properties finds and replaces fill stroke an...

Page 426: ...Select Find Non Web216 from the Find pop up menu of the Find panel Batch processing Batch processing is a convenient way to automatically convert a group of graphic files These are the batch processi...

Page 427: ...Batch processing 427 You also have the option of not selecting any files at all while using the wizard if you only want to save the batch process script for later use...

Page 428: ...ves selected files from the list of files to batch process 3 Select Include Current Open Files to add all currently open files These files do not appear in the list of files to batch process but they...

Page 429: ...lenames with a batch process on page 433 For more information on adding commands see Performing commands with a batch process on page 434 To reorder the list select the task in the Include in Batch li...

Page 430: ...the batch process output location on page 435 10 Click Save Script if you want to save the batch process settings for future use For more information see Saving batch processes as scripts on page 436...

Page 431: ...example when you batch process a folder of GIFs and JPEGs the resulting files remain GIFs and JPEGs and Fireworks uses the original palette and compression settings when exporting each file Select Cus...

Page 432: ...you can also choose to scale only those documents that are currently larger than the target size To do so select the Only Scale Documents Currently Larger Than Target Size option 4 Click Next to cont...

Page 433: ...box To set naming options for batch processed files 1 Select Rename from the Batch Options list and click Add 2 Specify Rename options at the bottom of the Batch Process dialog box Replace with lets...

Page 434: ...iangle Macintosh beside the Commands option in the Batch Options list to view the available commands 2 Select a command and click Add to add it to the Include in Batch list 3 Click Next to continue th...

Page 435: ...ackups to set your backup options 3 Select how you want to back up the files Overwrite Existing Backups overwrites the previous backup file Incremental Backups keeps copies of all the backup files Whe...

Page 436: ...tside Fireworks double click the script filename on your hard disk 2 Select a script and click Open 3 Select the files to process with the script Current Open Files processes all open documents Custom...

Page 437: ...install and manage extensions that augment the functionality of Fireworks Or you can write custom JavaScript code and use it as a custom command in Fireworks You can also use Flash SWF movies as custo...

Page 438: ...er see About user configuration files on page 452 To open the Extension Manager from within Fireworks do one of the following Select Commands Manage Extensions Select Help Manage Extensions For more i...

Page 439: ...left of the History panel To change the number of steps the History panel remembers 1 Select Edit Preferences Windows or Fireworks Preferences Macintosh 2 Change Undo Steps to the number of steps you...

Page 440: ...dit Paste To repeat the last step Select Edit Repeat Command Script About scripting with JavaScript You can reduce the tedium of some repetitive tasks by writing your own JavaScript in a text editor t...

Page 441: ...that you created do one of the following In Fireworks select Commands Manage Saved Commands Then select the command and click Delete On your hard disk delete the JSF file for the command from the Comm...

Page 442: ...directly into the Commands folder as well as those saved in the History panel appear in the Commands menu as soon as you save them so restarting Fireworks is not necessary However commands saved in th...

Page 443: ...r hard disk the movie will appear as a panel in the Fireworks Window menu For more information about using Flash SWFs as Fireworks panels see Extending Fireworks NO TE The exact location of this folde...

Page 444: ...444 Chapter 16 Automating Repetitive Tasks...

Page 445: ...preferences 445 Changing keyboard shortcut sets 449 Working with configuration files 451 About reinstalling Fireworks 453 Viewing package contents Macintosh only 453 Setting preferences Fireworks has...

Page 446: ...as sharp as Bicubic Soft interpolation which was used in Fireworks 1 gives a soft blur and eliminates sharp details This method is useful when others produce unwanted artifacts Nearest Neighbor interp...

Page 447: ...p 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 Macromedia Fl...

Page 448: ...s in the Property inspector For more information about textures and patterns see Adding texture to a fill on page 191 Photoshop Import preferences The preferences in the Import tab let you manage Phot...

Page 449: ...ands Using shortcuts increases your productivity by allowing you to perform simple actions quickly If you are accustomed to using shortcuts from other applications such as FreeHand Illustrator Photosh...

Page 450: ...cular category appear in the Commands scroll list 5 Select the command whose shortcut you want to modify from the Commands list If a shortcut exists it is displayed in the Shortcuts list 6 Click in th...

Page 451: ...guration files This lets you customize features in Fireworks such as styles keyboard shortcuts commands and so forth without affecting the configuration of Fireworks for other users Fireworks creates...

Page 452: ...e access to all files if they are on multiuser systems Users with administrator level access can customize features for all users by modifying the master configuration files in the Fireworks applicati...

Page 453: ...This is a feature from Apple that allows applications to be installed in a self contained package The application package is where the Fireworks application file is stored along with all default confi...

Page 454: ...454 Chapter 17 Preferences and Keyboard Shortcuts...

Page 455: ...1 frames 310 inserting frames 314 looping 320 managing frames 313 movement 310 moving objects to another frame 315 multiframe editing 318 naming frames 314 onion skinning 317 opacity 311 opening 322 o...

Page 456: ...ing with tools 30 Display Striped Border preference 447 switching to 80 bitmaps adjusting brightness and contrast 100 adjusting color and tone 93 adjusting hue and saturation 101 blurring and sharpeni...

Page 457: ...bsafe 175 fills 101 finding and replacing 425 finding and replacing non websafe 426 gradient fills 185 inverting values 103 picking from color bar 173 pop up window 176 removing unused 339 replacing a...

Page 458: ...138 copying all selected objects on a layer 207 bitmaps 67 frames 315 HTML 361 object attributes 239 objects 68 pixels 55 copying and pasting Fireworks HTML 361 362 symbol instances 245 copying and p...

Page 459: ...canvas drop shadows 197 198 duplicating by dragging 68 selected objects 68 E e mail 370 edges beveled 196 showing and hiding 54 Edit Gradient dialog box 186 Edit Stroke dialog box 179 editing actions...

Page 460: ...le size reducing quality 347 setting loss to reduce size 343 filenames changing in a batch process 433 files unlocking 371 391 Fill Color box 84 Fill Color Live Filter 233 fills adding texture to 191...

Page 461: ...ewing current and adjacent 318 viewing next 318 Frames panel 33 313 freeform paths 123 FrontPage 369 Full Screen with Menus mode 40 G Gaussian Blur filter 105 GIF file format choosing 336 choosing a c...

Page 462: ...ting 277 images exporting 352 Image Editing panel 82 painting 83 saving 352 selecting 55 selecting pixels 55 images as fills See Paste Inside command import text 161 ASCII text 162 Photoshop files 162...

Page 463: ...cts 195 creating 201 editing 200 enabling or disabling 195 Fill Color 233 in buttons 285 Photoshop plug ins 198 removing 200 renaming 201 reordering 200 locked files 371 391 locking layers 208 M Macro...

Page 464: ...matching Clipboard size 18 new features 9 newsgroup Fireworks 12 Numeric Transform command 73 O object oriented graphics 16 objects converting to animation 309 creating bitmaps 80 distorting 73 groupi...

Page 465: ...djacent segments 131 changing adjacent segments 130 changing shape 130 converting straight to curved 129 copying and pasting 403 creating custom strokes 179 cropping 139 editing strokes 177 pulling 13...

Page 466: ...g appearance 298 editing 304 entering menu text 295 296 exporting 305 setting position 303 Precise Cursors preference 446 preferences 445 color defaults 446 default 449 editing options 446 folder opti...

Page 467: ...tool 71 scaling graphics 431 interpolation options 446 objects 71 scripting 440 editing scripts 442 Flash SWF files 440 scrolling the canvas See also panning searching 422 See also finding and replaci...

Page 468: ...59 showing or hiding slice overlay 335 text 254 updating 354 using nested tables 273 using spacer 273 slicing definition 252 for interactivity 252 Smart Polygon tool 115 Smooth command 63 Smudge tool...

Page 469: ...uirements for Fireworks 7 T text alignment 153 attributes saving 157 checking spelling 163 color 148 direction of 152 editing 147 entering 144 expanding or contracting character width 156 finding and...

Page 470: ...See also opacity transparent areas 344 trimming the canvas 45 Turn off Hide Edges preference 447 Tween Instances command 318 tweening characteristics 318 defined 318 objects 318 typefaces See fonts U...

Page 471: ...files 20 exporting to 336 opening from Fireworks 20 saving 28 Web Layer 210 websafe colors 342 Windows system colors as a swatch group 169 work environment 29 workflow in Fireworks 14 X XHTML 365 Z Z...

Page 472: ...472 Index...

Reviews:

No comments

Related manuals for FIREWORKS 8

Brand: QMS Pages: 118

ONLINE BACKUP - HELP

Brand: F-SECURE Pages: 20

Brand: Drobo Pages: 6

LaserWriter 8.x driver

Brand: Xerox Pages: 12

ATV-TURBO - WINDOWS 98

Brand: OCZ Pages: 5

JBoss Developer Studio 3.0

Brand: Red Hat Pages: 78

FLASH 8-USING FLASH VIDEO ENCODER

Brand: MACROMEDIA Pages: 30

DS-605 - VPN Client - PC

Brand: D-Link Pages: 15

DSN-210-SW - SureSync Continuous Data Protection

Brand: D-Link Pages: 4

Brand: D-Link Pages: 56

D-View 6 Professional

Brand: D-Link Pages: 143

Brand: D-Link Pages: 136

Brand: D-Link Pages: 279

Brand: Palm Pages: 22

POLICY MANAGER 9.0

Brand: F-SECURE Pages: 102

FLASH MX 2004-DATA

Brand: MACROMEDIA Pages: 20

Brand: Tandem Pages: 312

Brand: Barracuda Networks Pages: 71

Brands by name

0 1 2 3 4 5 6 7 8 9 A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

Popular brands

Load more brands