Page 1 Using CS 4 ADOBE FIREWORKS ® ®...
Page 2 This user guide is licensed for use under the terms of the Creative Commons Attribution Non-Commercial 3.0 License. This License allows users to copy, distribute, and transmit the user guide for noncommercial purposes only so long as (1) proper attribution to Adobe is given as the owner of the user guide; and (2) any reuse or distribution of the user guide contains a notice that use of the user guide is governed by these terms.
Page 3: Table Of Contents
Contents Chapter 1: Resources Activation and registration ................... . 1 Help and support .
Page 4 ..................191 Prototyping Adobe AIR applications .
Page 5 About Adobe Bridge ....................263 Share image metadata with Adobe XMP .
Page 6 USING FIREWORKS CS4 Contents Work with configuration files ..................283 About reinstalling Fireworks .
Page 7: Chapter 1: Resources
If you postpone registration, you can register at any time by choosing Help > Registration. Adobe Product Improvement Program After you have used your Adobe software a certain number of times, a dialog box appears, asking whether you want to participate in the Adobe Product Improvement Program.
Page 8: Help And Support
The sites searched by the default Community Help search engine are hand-selected and reviewed for quality by Adobe and Adobe Community Experts. Adobe experts also work to ensure that the top search results include a mixture of different kinds of content, including results from on-line product Help.
Page 9: Services, Downloads, And Extras
From the Connections panel menu , select Offline Options. Select Keep Me Offline and click OK. Note: When you disable web services from the Connections panel, all other web services (such as Adobe Kuler and Adobe ConnectNow) are also disabled. Printed resources Printed versions of the complete on-line product Help are available for the cost of shipping and handling at www.adobe.com/go/store.
Page 10: What's New In Fireworks Cs4
Extras The installation disc contains a variety of extras to help you make the most of your Adobe software. Some extras are installed on your computer during the setup process; others are located on the disc.
Page 11 Adobe Type Engine Produce superior type designs with the enhanced typesetting capabilities of the Adobe Type Engine, familiar to users of Photoshop and Illustrator, and now in Fireworks. Import or copy/paste double-byte characters from Adobe Illustrator or Photoshop without loss of fidelity. Float text inside a path for high impact text logos.
Page 12: Chapter 2: Fireworks Basics
About working in Fireworks Adobe® Fireworks® is a versatile program for creating, editing, and optimizing web graphics. You can create and edit both bitmap and vector images, design web effects such as rollovers and pop-up menus, crop and optimize graphics to reduce their file size, and save time by automating repetitive tasks.
Page 13: Creating A New Fireworks Document
USING FIREWORKS CS4 Fireworks basics About vector graphics Vector graphics render images using lines and curves (vectors) that include color and position information. For example, the image of a leaf can be defined by a series of points that describe the outline of the leaf. The color of the leaf is determined by the color of its outline (the stroke) and the color of the area enclosed by the outline (the fill).
Page 14: Opening And Importing Files
Opening and importing files Note: When you import a file from Adobe Dreamweaver®, Fireworks preserves many, but not all JavaScript behaviors. If Fireworks supports a particular behavior, it recognizes that behavior and maintains it when you move a file back to Dreamweaver.
Page 15 Click the file name on the Start page. Open graphics created in other applications You can open files created in other applications or file formats, including Photoshop®, Adobe FreeHand®, Adobe Illustrator®, WBMP, EPS, JPEG, GIF, and animated GIF files. When you open a file format other than PNG using File > Open, you create a new Fireworks PNG document based on the file you open.
Page 16: Create Fireworks Png Files From Html Files
Pasting an object copied from another application into Fireworks places the object in the center of the active document. Text or objects in any of these formats can be pasted from the Clipboard: • Adobe FreeHand 7 or later • Adobe Illustrator • PNG •...
Page 17 USING FIREWORKS CS4 Fireworks basics • EPS • WBMP • TXT • RTF In the other application, copy the object or text that you want to paste. In Fireworks, paste the object or text into your document. Location of pasted objects The placement of the pasted object depends on what is selected: •...
Page 18 USING FIREWORKS CS4 Fireworks basics Do one of the following: • Click to import the full-size image. • Drag the import pointer to resize the image as you import. Import 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 built-in Image Capture capability (Mac OS).
Page 19: Saving Fireworks Files
❖ Select Commands > Save All. Note: You can use the Fireworks Auto Backup utility to automatically back up all open Fireworks documents. Download the utility from Adobe AIR Marketplace at http://www.adobe.com/cfusion/exchange/index.cfm?event=extensionDetail&extid=1698332. Save documents in other formats If you use File > Open to open a file in a format other than PNG, you can later select File > Save As to save your work as a new Fireworks PNG file, or you can select a different format.
Page 20 USING FIREWORKS CS4 Fireworks basics Note: If you save a PNG file as a bitmap file such as a GIF or JPEG, the graphic objects you manipulated in the PNG are no longer available in the bitmap file. To revise the image, edit the source PNG file and then export it again. Add a picture frame Select Commands >...
Page 21: Chapter 3: Workspace
Fireworks workspace overview When you open a document in Adobe® Fireworks® for the first time, the workspace includes the Tools panel, Property inspector, menus, and other panels. The Tools panel, on the left of the screen, contains labeled categories, including bitmap, vector, and web tool groups.
Page 22 USING FIREWORKS CS4 Workspace About Fireworks panels Panels are floating controls that help you edit aspects of a selected object or elements of the document. Panels let you work on states, layers, symbols, color swatches, and more. Each panel is draggable, so you can group panels in custom arrangements.
Page 23: Workspace Overview
You create and manipulate your documents and files using various elements, such as panels, bars, and windows. Any arrangement of these elements is called a workspace. The workspaces of the different applications in Adobe® Creative Suite® 4 share the same appearance so that you can move between the applications easily. You can also adapt each application to the way you work by selecting from several preset workspaces or by creating one of your own.
Page 24 USING FIREWORKS CS4 Workspace • Panels help you monitor and modify your work. Examples include the Timeline in Flash, the Layers panel in Adobe Photoshop®, and the CSS Styles panel in Dreamweaver. Panels can be grouped, stacked, or docked. • On the Mac, the Application frame groups all the workspace elements in a single, integrated window that lets you treat the application as a single unit.
Page 25 USING FIREWORKS CS4 Workspace Narrow blue drop zone indicates Color panel will be docked on its own above the Layers panel group. A. Title bar B. Tab C. Drop zone In Photoshop, you can change the font size of the text in the Control panel, in the panels, and in tool tips. Choose a size from the UI Font Size menu in Interface preferences.
Page 26 USING FIREWORKS CS4 Workspace Navigator panel being dragged out to new dock, indicated by blue vertical highlight Navigator panel now in its own dock You can prevent panels from filling all the space in a dock. Drag the bottom edge of the dock up so it no longer meets the edge of the workspace.
Page 27 USING FIREWORKS CS4 Workspace Manipulate panel groups • To move a panel into a group, drag the panel’s tab to the highlighted drop zone in the group. Adding a panel to a panel group • To rearrange panels in a group, drag a panel’s tab to a new location in the group. •...
Page 28 USING FIREWORKS CS4 Workspace Panels collapsed to icons Panels expanded from icons • To collapse or expand all panel icons in a dock, click the double arrow at the top of the dock. • To expand a single panel icon, click it. •...
Page 29 In Adobe InDesign, Photoshop, Illustrator, Flash, Fireworks, or Dreamweaver, choose Window > Extensions > Connections. Enter your Adobe ID and password. (If you lack an ID or can’t remember it, click the appropriate link.) (Optional) To remain logged in when you restart the computer, select Remember Me On This Computer.
Page 30: Working With Connectnow
Choose File > Share My Screen. In the Share My Screen dialog box, enter your Adobe ID and password, and click Sign In. If you don’t have an Adobe ID and password, click the Create a Free Adobe ID link at the top of the dialog box.
Page 31 USING FIREWORKS CS4 Workspace Delete a custom workspace • Select Manage Workspaces from the workspace switcher in the Application bar, select the workspace, and then click Delete. (The option is not available in Fireworks.) • (Photoshop, InDesign, InCopy) Select Delete Workspace from the workspace switcher. •...
Page 32 USING FIREWORKS CS4 Workspace Display tool options in the Property inspector ❖ With a tool selected, choose Select > Deselect to deselect all objects on the canvas. Select a tool from a tool group A small triangle in the lower right corner of a tool in the Tools panel indicates that it is part of a tool group. Click the tool icon and hold down the mouse button.
Page 33: Navigate And View Documents
USING FIREWORKS CS4 Workspace • Click the arrow in the upper-left corner of the panel. Display and move toolbars (Windows only) Show or hide a toolbar ❖ Choose Window > Toolbars, and select either of the following: Displays a toolbar above the document window with buttons for common file commands such as Open, Save, Main Print, and Copy.
Page 34 USING FIREWORKS CS4 Workspace Zoom and pan in and out A. Hand tool B. Zoom tool C. Set magnification pop-up menu Zoom in, using preset increments ❖ Do one of the following: • Select the Zoom tool and click to specify the new center point inside the document window. Each click magnifies the image to the next preset magnification.
Page 35 USING FIREWORKS CS4 Workspace The size of the zoom selection box determines the precise magnification percentage, which is displayed in the Set Magnification box. Note: You cannot enter a magnification percentage in the Set Magnification box. Zoom out of a specific area ❖...
Page 36: Change The Canvas
USING FIREWORKS CS4 Workspace Full Display and draft modes View documents as they appear on different platforms ❖ Do one of the following: • In Windows, select View > Macintosh Gamma. • On the Macintosh®, select View > Windows Gamma. Change the canvas You can adjust the canvas at any time.
Page 37 USING FIREWORKS CS4 Workspace Resize a document and its contents Do one of the following: • Choose Select > Deselect, click the Pointer tool to display the document properties in the Property inspector, and click the Image Size button in the Property inspector. •...
Page 38 USING FIREWORKS CS4 Workspace Rotate the canvas Rotate the canvas when an image is imported upside down or sideways. You can rotate the canvas 180°, 90° clockwise, or 90° counterclockwise. When you rotate the canvas, all objects in the document rotate. ❖...
Page 39 This extension is available at http://www.adobe.com/devnet/fireworks/articles/guides_panel.html. This extension allows you to copy guides from one page and past them to another within Copy-Paste Guides extension the same document.
Page 40: Undo And Repeat Multiple Actions
USING FIREWORKS CS4 Workspace Move a guide to a specific position Double-click the guide. Enter the new position in the Move Guide dialog box, and click OK. Show or hide guides or the grid ❖ Select View > Guides > Show Guides or View > Grid > Show Grid. Snap objects to guides or to the grid ❖...
Page 41 USING FIREWORKS CS4 Workspace Drag the Undo marker up or down. Repeat actions Perform the actions. Do one of the following to highlight the actions you want to repeat in the History panel: • Click an action to highlight it. •...
Page 42: Chapter 4: Selecting And Transforming Objects
Chapter 4: Selecting and transforming objects Select objects Before you can do anything with any object on the canvas, 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. To select an object, use the Layers panel or a selection tool.
Page 43: Modify A Selection
USING FIREWORKS CS4 Selecting and transforming objects Move or modify objects with the Subselection tool Use the Subselection tool to select, move, or modify points on a vector path or an object that is part of a group. Select the Subselection tool. Make a selection.
Page 44: Select Pixels
USING FIREWORKS CS4 Selecting and transforming objects Select everything on every layer in the document ❖ Choose Select > Select All. Note: Select All does not select hidden objects. Deselect all selected objects ❖ Choose Select > Deselect. Note: Deselect the Single Layer Editing preference to select all visible objects on all layers in a document. When you select the Single Layer Editing preference, only objects on the current layer are selected.
Page 45 USING FIREWORKS CS4 Selecting and transforming objects Options for bitmap selection tools Various options are available for the tools used to select bitmaps. Edge options Creates a marquee selection with a defined edge. Hard Prevents jagged edges in the marquee selection. Anti-alias Lets you soften the edge of the pixel selection.
Page 46 USING FIREWORKS CS4 Selecting and transforming objects Hold down Shift to constrain Polygon Lasso marquee segments to 45° increments. Do one of the following to close the polygon: • Click the starting point. • Double-click in the workspace. Select pixels in areas of similar color Select the Magic Wand tool.
Page 47 USING FIREWORKS CS4 Selecting and transforming objects Create a selection based on opaque areas of objects With a bitmap object selected, you can create a pixel selection based on the opacity of any object or mask in the Layers panel. Select a bitmap object on the canvas.
Page 48 USING FIREWORKS CS4 Selecting and transforming objects Repeat steps 1 and 2 with any bitmap selection tool to continue adding to the selection. Overlapping marquees join to form a contiguous marquee. Subtract pixels from a selection ❖ Hold down Alt (Windows) or Option (Mac OS) and use a bitmap selection tool to select the pixel area you want to remove.
Page 49 USING FIREWORKS CS4 Selecting and transforming objects A pixel selection before and after smoothing Convert, transfer, or save marquee selections Convert a marquee to a path You can convert a bitmap selection to a vector object by drawing a marquee around the part of the bitmap that you want to convert.
Page 50: Edit Selected Objects
USING FIREWORKS CS4 Selecting and transforming objects Copy or move the contents of a marquee selection When you use a selection tool to drag a marquee to a new location, the marquee moves, but not its contents. To copy or move the selected pixels, either use the Pointer tool or hold down a modifier key while using any Bitmap tool.
Page 51 USING FIREWORKS CS4 Selecting and transforming objects • Hold down Shift while pressing any arrow key to move the selection in 10-pixel increments. • In the Property inspector, enter the x and y coordinates for the location of the upper-left corner of the selection. •...
Page 52 Distort moves the sides or corners of an object in the direction you drag a selection handle while the tool is active. This is helpful in creating a 3D look. When you select any transformation tool or Transform menu command, Adobe® Fireworks® displays transform handles around selected objects.
Page 53 USING FIREWORKS CS4 Selecting and transforming objects • To scale the object from the center, press Alt while dragging any handle. Resize all selected objects You can select objects on your canvas and resize them horizontally, vertically, or in both directions. Select the objects on the canvas using the Pointer tool.
Page 54 USING FIREWORKS CS4 Selecting and transforming objects Move the pointer outside the object until the rotation pointer appears. Drag to rotate the object. To constrain rotation to 15° increments relative to the horizon, Shift-drag the pointer. Double-click inside the window or press Enter to apply the changes. Relocate the axis of rotation ❖...
Page 55: 9-Slice Scaling
Standard scaling is ideal for quick, one-time adjustments to bitmap objects or basic shapes that you’re incorporating into design mockups. For a video tutorial on creating scalable objects with 9-slice scaling, see www.adobe.com/go/lrvid4036_fw. For a demonstrative example of using 9-slice scaling, see the article by Sarthak Singhal at http://www.adobe.com/devnet/fireworks/articles/9-slice_scaling.html.
Page 56 USING FIREWORKS CS4 Selecting and transforming objects Resize the symbol as needed by using the Scale tool The button scales without distorting corner shape. After applying 9-slice guides to a symbol, you can nest it in the protected regions of other 9-sliced symbols, creating complex objects that scale perfectly.
Page 57: Organize Multiple Objects
USING FIREWORKS CS4 Selecting and transforming objects More Help topics “Basic shapes” on page 71 “Auto Shapes” on page 73 “Edit preferences” on page 279 Organize multiple objects Options for organizing objects Treats objects as one or protects each object's relationship to the others in the group. Group objects Arranges objects behind or in front of other objects.
Page 58 USING FIREWORKS CS4 Selecting and transforming objects Select the group that contains a subselected object ❖ Do one of the following: • Right-click (Windows) or Control-click (Mac OS) anywhere in the group and choose Select > Superselect from the context menu. •...
Page 59 USING FIREWORKS CS4 Selecting and transforming objects Choose one of the following options: Aligns the objects to the leftmost selected object. Left Aligns the center points of the objects along a vertical axis. Center Vertical Aligns the objects to the rightmost selected object. Right Aligns the objects to the topmost selected object.
Page 60: Chapter 5: Working With Bitmaps
They are sometimes referred to as raster images. Adobe® Fireworks® combines the functionality of photo-editing, vector-drawing, and painting applications. You can create bitmap images by drawing and painting with bitmap tools, by converting vector objects to bitmap images, or by opening or importing images.
Page 61: Editing Bitmaps
Most commonly used tools for photo editing are located in the Image Editing panel (Window > Others > Image Editing). For more information, see Ruth Kastenmayer’s article, Using the Image Editing Panel in Fireworks, at the Adobe Dev Center. Draw bitmap objects Select the Pencil tool Set tool options in the Property inspector:...
Page 62 USING FIREWORKS CS4 Working with bitmaps Apply a gradient fill to a pixel selection Make the selection. Click the Paint Bucket tool in the Tools panel and select the Gradient tool from the pop-up menu. Set the fill attributes in the Property inspector. Click the pixel selection to apply the fill.
Page 63: Retouching Bitmaps
USING FIREWORKS CS4 Working with bitmaps Bounding box Double-click inside the bounding box or press Enter to crop the selection. Retouching bitmaps The Rubber Stamp tool lets you copy or clone one area of an image to another. The Blur tool decreases the focus of selected areas in an image. The Smudge tool picks up color and pushes it in the direction that you drag in an image.
Page 64 USING FIREWORKS CS4 Working with bitmaps Two pointers appear. • The first is the source and is in the shape of a cross hair. • Depending upon the brush preferences you've selected, the second pointer is a rubber stamp, a cross hair, or a blue circle.
Page 65 USING FIREWORKS CS4 Working with bitmaps Drag the tool over the pixels you want to sharpen, blur, or smudge. Hold down Alt (Windows) or Option (Mac OS) to change from one tool behavior to the other. Lighten and darken parts of images Use the Dodge or Burn tool to lighten or darken pixels in an image.
Page 66 USING FIREWORKS CS4 Working with bitmaps Replace colors in bitmap objects Original photograph; after using the Replace Color tool Replace a color by using the color swatch In the Bitmap section of the Tools panel, select the Replace Color tool .
Page 67: Adjust Bitmap Color And Tone
Use color- and tone-adjustment filters to improve and enhance the colors in your bitmap images. • To apply filters that are removable, editable, and that do not permanently alter pixels, use Live Filters. Adobe recommends using filters as Live Filters whenever possible.
Page 68 USING FIREWORKS CS4 Working with bitmaps Click the thumbnail of the new bitmap object in the Layers panel to select the bitmap object. Apply a Live Filter from the Property inspector. Fireworks applies the Live Filter only to the new bitmap object, simulating the application of a filter to a pixel selection.
Page 69 USING FIREWORKS CS4 Working with bitmaps Do one of the following: • In the Property inspector, click the plus (+) icon next to the Filters label, and then select Adjust Color > Levels from the Filters pop-up menu. • Select Filters > Adjust Color > Levels. Levels dialog box To view your changes in the workspace, select Preview in the dialog box.
Page 70 USING FIREWORKS CS4 Working with bitmaps Adjust a specific color in the tonal range with Curves The Curves feature provides more precise control over the tonal range than the Levels feature. The Curves feature lets you adjust any color along the tonal range, without affecting other colors. The grid in the Curves dialog box illustrates two brightness values: Represents the original brightness of the pixels, shown in the Input box The horizontal axis...
Page 71 USING FIREWORKS CS4 Working with bitmaps Curve after dragging a point to adjust To adjust highlights, midtones, and shadows automatically, click the Auto button in the Curves dialog box. Delete a point along the curve ❖ Drag the point off the grid. Note: You cannot delete the end points of the curve.
Page 72 USING FIREWORKS CS4 Working with bitmaps Do one of the following: • In the Property inspector, click the plus (+) icon next to the Filters label, and then select Adjust Color > Brightness/Contrast from the Filters pop-up menu. • Select Filters > Adjust Color > Brightness/Contrast. Drag the Brightness and Contrast sliders to adjust the settings between the range of –100 to 100.
Page 73 USING FIREWORKS CS4 Working with bitmaps Change an RGB image to a two-tone image or add color to a grayscale image ❖ Select Colorize in the Hue/Saturation dialog box. Note: When you select Colorize, the value range of the Hue and Saturation sliders changes. Hue changes to 0 to 360. Saturation changes to 0 to 100.
Page 74: Blurring And Sharpening Bitmaps
USING FIREWORKS CS4 Working with bitmaps Change an object to sepia tone Select the object. Select Commands > Creative > Convert To Sepia Tone. Blurring and sharpening bitmaps Blurring options Softens the focus of selected pixels. Blur Blurs about three times as much as Blur. Blur More Applies a weighted average of blur to each pixel to produce a hazy effect.
Page 75 USING FIREWORKS CS4 Working with bitmaps Original; after applying Find Edges Convert an image to a transparency Convert an object or text into a transparency based upon the transparency of the image. Do one of the following: • In the Property inspector, click the plus (+) icon next to the Filters label, and then select Other > Convert to Alpha from the Filters pop-up menu.
Page 76: Add Noise To An Image
USING FIREWORKS CS4 Working with bitmaps An increase in radius results in a greater area of sharp contrast surrounding each pixel edge. Drag the Threshold slider to select a threshold of 0 to 255. Values between 2 and 25 are most commonly used. An increase in threshold sharpens only those pixels of a higher contrast in the image.
Page 77: Chapter 6: Working With Vector Objects
Chapter 6: Working with vector objects A vector object is a computer graphic whose shape is defined by a path. The shape of a vector path is determined by points that are plotted along the path. A vector object's stroke color follows the path, and its fill occupies the area inside the path.
Page 78 USING FIREWORKS CS4 Working with vector objects Add arrowheads to a line Draw or select a line. Select Commands > Creative > Add Arrowheads. Set the following: • Select Add To Start and Add To End as necessary and set the arrowhead style. •...
Page 79: Auto Shapes
USING FIREWORKS CS4 Working with vector objects Draw a star In the Vector section of the Tools panel, select the Polygon tool. In the Property inspector, select Star from the Shape pop-up menu. In the Sides box, enter the number of points for the star. In the Angle box, select Automatic or enter a value.
Page 80 USING FIREWORKS CS4 Working with vector objects Equilateral polygons with 3 to 25 sides. Smart Polygon Open spirals. Spiral Stars with any number of points from 3 to 25. Star Draw an Auto Shape In the Vector section of the Tools panel, select an Auto Shape tool from the pop-up menu. Do one of the following: •...
Page 81 USING FIREWORKS CS4 Working with vector objects Change Auto Shape properties by using control points Select an Auto Shape, and then use the yellow control points to adjust the Auto Shape properties. Names for control points reveal their function. To see a name, hover the mouse over a control point until a tool tip appears.
Page 82 USING FIREWORKS CS4 Working with vector objects • To adjust the roundness of the corners, drag the corner radius control point. Adjust Measure Tool Auto Shapes • To change the length or angle of the measured section, drag a control point at either end of the line. •...
Page 83: Free-Form Shapes
(Optional) Edit the Auto Shape by dragging any of its control points. Add new Auto Shapes to Fireworks Add new Auto Shapes from the Adobe® Fireworks® Exchange website. New Auto Shapes appear either in the Auto Shapes panel or the Tools menu.
Page 84 USING FIREWORKS CS4 Working with vector objects Draw free-form paths by plotting points with the Pen tool Plotting points is like drawing a connect-the-dots picture. When you click each point with the Pen tool, Fireworks automatically draws the path of the vector object from the last point you clicked. In addition to connecting the points with straight segments, the Pen tool can draw smooth, mathematically derived curve segments known as Bezier curves.
Page 85 USING FIREWORKS CS4 Working with vector objects Move to the location of the next point, and then drag to produce a curve point. Each time you drag, Fireworks extends the line segment to the new point. Continue plotting points. If you drag a new point, you produce a curve point; if you just click, you produce a corner point.
Page 86 USING FIREWORKS CS4 Working with vector objects Note: To edit the point's handles, choose the Subselection tool or press Control (Windows) or Command (Mac) while the Pen tool is active. Convert a curve point to a corner point In the Tools panel, select the Pen tool. Click a curve point on a selected path.
Page 87 USING FIREWORKS CS4 Working with vector objects Delete a point from a selected path Deleting points from the path reshapes it or simplifies editing. ❖ Do one of the following: • Click a corner point on a selected object with the Pen tool. •...
Page 88 USING FIREWORKS CS4 Working with vector objects For example, if you drag the left point handle downward, the right point handle goes up. Alt-drag a handle to move it independently. Adjust the handle of a corner point Using the Subselection tool, select a corner point. Alt-drag (Windows) or Option-drag (Mac OS) the point to display its handle and bend the adjacent segment.
Page 89: Special Vector-Editing Techniques
USING FIREWORKS CS4 Working with vector objects Special vector-editing techniques In addition to dragging points and point handles, you can use several Fireworks tools to edit vector objects directly. You can also use path operations to create new shapes by combining or altering existing paths. And, you can use the Path panel to gain quick access to path-related commands.
Page 90 USING FIREWORKS CS4 Working with vector objects Pull a selected path When the pointer is directly over the path, you can pull the path. In the Tools panel, select the Freeform tool Move the pointer directly over the selected path. Drag the path.
Page 91 USING FIREWORKS CS4 Working with vector objects Change the size of the reshape area pointer ❖ Do one of the following: • While holding down the mouse button, press the Right Arrow key or the 2 key to increase the width of the pointer.
Page 92 USING FIREWORKS CS4 Working with vector objects Edit with path operations You can use path operations in the Modify menu to create new shapes by combining or altering existing paths. For some path operations, the stacking order of selected path objects defines how the operation works. For information on arranging the stacking order of selected objects, see “Stack the order of objects”...
Page 93 USING FIREWORKS CS4 Working with vector objects Remove portions of a path object You can remove portions of a selected path object as defined by the overlapping portions of another selected path object arranged in front of it. Select the path object that defines the area you want to remove. Select Modify >...
Page 94 USING FIREWORKS CS4 Working with vector objects Expand a selected object's stroke You can convert the stroke of a selected path into a closed path. The result creates the illusion of a path with no fill and a stroke that takes on the same attributes as the original object's fill. Note: Expanding the stroke of a path that intersects itself can produce interesting results.
Page 95 USING FIREWORKS CS4 Working with vector objects Edit paths using the Path panel To speed up path editing tasks, use the following tools in the Path panel (Window > Others > Path). Last updated 3/8/2011...
Page 96: Chapter 7: Working With Text
Adobe® Fireworks® enables you to use many features typically reserved for sophisticated desktop publishing applications, including using a variety of fonts and sizes and adjusting kerning, spacing, color, leading, and baseline shift. You can edit text any time—even after you apply Live Filters, and can import editable text from an Adobe Photoshop® document.
Page 97: Format And Edit Text
A font is a complete set of characters—letters, numbers, and symbols—that share a common weight, width, and style, such as 10-pt Adobe Garamond Bold. Typefaces (often called type families or font families) are collections of fonts that share an overall appearance, and are designed to be used together, such as Adobe Garamond. Last updated 3/8/2011...
Page 98 Windows Library/Application Support/Adobe/Fonts Mac OS If you install a Type 1, TrueType, OpenType, or CID font into the local Fonts folder, the font appears in Adobe applications only. Previewing fonts You can view samples of a font in the font family and font style menus in the Character panel and other areas in the application from where you can choose fonts.
Page 99 USING FIREWORKS CS4 Working with text Choose a font family and style You can choose a font family and style with the Property inspector or the Text menu. More Help topics “Type preferences” on page 280 Choose a font family and style with the Property inspector Choose a family from the Font menu.
Page 100 Note: You can also use the LoremIpsum random text generator extension for quickly adding placeholder text for your mockups. The extension is available at http://www.adobe.com/cfusion/exchange/index.cfm?event=productHome&exc=6&loc=en_us. Apply color to text • By default, text is black and has no stroke. You can change the color of all text in a selected text block or of all highlighted text in a text block.
Page 101 Leading determines the distance between adjacent lines in a paragraph. Leading can be measured in pixels or as a percentage of the distance, in points, separating the lines baseline to baseline. For a detailed overview of how Fireworks uses the Adobe Text Engine (ATE) to render text elements, see the article by Arun Kaza at http://www.adobe.com/devnet/fireworks/articles/adobe_text_engine.html.
Page 102 USING FIREWORKS CS4 Working with text Select an orientation option: The default setting. Horizontal Left to Right Orients text vertically, flowing from top to bottom. Multiple lines of text separated by returns Vertical Right to Left are displayed as columns that flow from right to left. To reverse text for a special effect, use the Distort tool and drag a side handle.
Page 103 • Determines how much the text edges blend into the background Strength Note: Text in vector files (such as Adobe FreeHand® files) is anti-aliased when opened in Fireworks. Adjust the character width of selected characters ❖ In the Property inspector, drag the Horizontal Scale pop-up slider or enter a value in the text box. Drag the slider higher than 100% to expand the width or height of the characters, and drag it lower to reduce their width or height.
Page 104: Attaching Text To A Path
USING FIREWORKS CS4 Working with text Save stroke, fill, and filter text attributes as a style You can apply strokes, fills, and filters to text in a selected text block and then save the text attributes as a style. After you create text, it remains editable in Fireworks.
Page 105 USING FIREWORKS CS4 Working with text • To edit the shape of the path, use the Subselection tool to select the text-on-a-path object, and drag the subselected points to reshape the path. Note: You can also use the Bezier Pen tool to edit the path. The text automatically flows around the path as points are edited.
Page 106 Combine Paths > Split. Import text • To import text from Adobe Photoshop or Adobe Illustrator®, import a Photoshop or Illustrator file, or copy the text into Fireworks. By default, text from Photoshop and Illustrator retains all attributes in Fireworks. However, you can also import Photoshop text as bitmap images.
Page 107 USING FIREWORKS CS4 Working with text More Help topics “Type preferences” on page 280 Select a replacement font Open a document with missing fonts, and select a missing font from the Change Missing Font list. Do one of the following: •...
Page 108: Chapter 8: Applying Color, Strokes, And Fills
Chapter 8: Applying color, strokes, and fills Adobe® Fireworks® has a wide range of options for organizing, selecting, and applying colors. Applying colors Activate, remove, or swap the stroke and fill Activate the stroke or fill to determine which attribute your color adjustments affect. Reset stroke and fill colors to apply the defaults specified in the Preferences dialog box.
Page 109 USING FIREWORKS CS4 Applying color, strokes, and fills Select Window > Swatches. Click a swatch to apply the color to the stroke or fill of the selected object. Select, change, or add swatch groups You can easily switch to another default swatch group or create your own. You can also import custom swatches from color palette files saved in ACT or GIF format.
Page 110 Although CMY is a color model option, graphics exported directly from Fireworks are not ideal for printing. To repurpose exported Fireworks graphics for print, import them into Adobe Illustrator, Adobe Photoshop, or Adobe FreeHand. For more information, see the documentation for those applications.
Page 111 USING FIREWORKS CS4 Applying color, strokes, and fills Manage colors with the Color Palette panel ❖ To open the Color Palette panel, select Window > Others > Color Palette. Find the nearest websafe color for any color value Click the fill color box on the Selector tab of the Color Palette panel. To sample a color, use the eyedropper pointer to click anywhere inside any Fireworks document window.
Page 112 USING FIREWORKS CS4 Applying color, strokes, and fills Create a shared palette If you edit multiple images that have a restricted color palette, you can export a shared color palette that contains the colors in these images. To create a shared color palette, all images must reside in the same folder. Select Commands >...
Page 113 USING FIREWORKS CS4 Applying color, strokes, and fills View the color value of the active stroke or fill color ❖ Do one of the following: • Select Window > Color Mixer for RGB or other color system values. • Click a color box to open the color pop-up window and view the hexadecimal value at the top of the window. •...
Page 114: Kuler Panel
The Kuler panel is available in Adobe Photoshop® CS4, Adobe Flash® Professional CS4, Adobe InDesign® CS4, Adobe Illustrator® CS4, and Adobe Fireworks® CS4. The panel is not available in the French versions of these products. For a video on the Kuler panel, see www.adobe.com/go/lrvid4088_xp.
Page 115 USING FIREWORKS CS4 Applying color, strokes, and fills Working with themes You can use the Kuler panel to create or edit themes, and include them in your projects. Note: In Illustrator, you create and edit themes with the Edit Color/Recolor Artwork dialog box, rather than the Create panel.
Page 116: Applying Strokes And Fills
USING FIREWORKS CS4 Applying color, strokes, and fills Applying strokes and fills Apply and change strokes You have full control of every brush nuance, including ink amount, tip size and shape, texture, edge effect, and aspect. You can apply changes to stroke attributes before or after creating objects. The pencil icon indicates the Stroke Color box in the Tools panel, the Property inspector, and the Color Mixer.
Page 117 USING FIREWORKS CS4 Applying color, strokes, and fills Create and edit custom strokes Use the Edit Stroke dialog box to change specific stroke characteristics. Open the Edit Stroke dialog box Select Stroke Options from the Stroke Category pop-up menu in the Property inspector. Click Advanced.
Page 118 USING FIREWORKS CS4 Applying color, strokes, and fills • 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. Click OK.
Page 119 USING FIREWORKS CS4 Applying color, strokes, and fills Create and edit solid fills Create and use fills for vector objects and text, and use the Paint Bucket or Gradient tool to fill pixel selections based on current fill settings. The Paint Bucket icon indicates the Fill Color box in the Tools panel, the Property inspector, and the Color Mixer.
Page 120 USING FIREWORKS CS4 Applying color, strokes, and fills Apply a gradient fill to a selected object Objects with various gradient fills ❖ Select a gradient from the Fill Options pop-up menu in the Property inspector. Edit a gradient fill Edit Gradient pop-up window Select an object that has a gradient fill or select a gradient fill from the Fill Options pop-up menu in the Property inspector.
Page 121 USING FIREWORKS CS4 Applying color, strokes, and fills Create fills with the Gradient tool Use the Gradient tool to fill an object with a gradient instead of a solid color. The Gradient tool retains the properties of the last-used element. Click the Paint Bucket tool in the Tools panel and select the Gradient tool from the pop-up menu.
Page 122 USING FIREWORKS CS4 Applying color, strokes, and fills Save a custom gradient fill ❖ To save the current gradient settings as a custom gradient for use across many documents, create a style. Remove a fill from a selected object Do one of the following: •...
Page 123: Chapter 9: Using Live Filters
Chapter 9: Using Live Filters Applying Live Filters Adobe® Fireworks® Live Filters (formerly known as Live Effects) are enhancements that you can apply to vector objects, bitmap images, and text. Live Filters include bevels and embossing, solid shadows, drop shadows and glows, color correction, and blurring and sharpening.
Page 124 USING FIREWORKS CS4 Using Live Filters Apply Live Filters Apply a Live Filter to selected objects Click plus (+) icon next to the Filters label in the Property inspector, and then select a filter from the Add Live Filters pop-up menu. The filter is added to the Live Filters list for the selected object.
Page 125 USING FIREWORKS CS4 Using Live Filters An object, with Inset Emboss, and with Raised Emboss Click the plus (+) icon next to the Filters label in the Property inspector, and then select an emboss option from the pop-up menu. Edit the filter settings. If you want the original object to appear in the embossed area, select Show Object.
Page 126 Use the Filters menu to apply filters and Adobe Photoshop® plug-ins only when you are certain that you will not want to edit or remove the filter. You can remove a filter only if the Undo command is available.
Page 127: Edit And Customize Live Filters
USING FIREWORKS CS4 Using Live Filters Apply filters to grouped objects When you apply a filter to a group, the filter is applied to all objects in the group. If the objects are ungrouped, each object's filter settings revert to those applied to the object individually. To apply a filter to an individual object within a group, select only that object with the Subselection tool.
Page 128 USING FIREWORKS CS4 Using Live Filters Note: If you select any additional properties in the New Style dialog box, the style will no longer be an item on the Add Live Filters pop-up menu in the Property inspector, although it will remain on the Styles panel as a typical style. Apply a custom Live Filter to selected objects ❖...
Page 129: Chapter 10: Layers, Masking, And Blending
Layers divide an Adobe® Fireworks® document into discrete planes, as though the components of the illustration were drawn on separate tracing paper overlays. A document can be made up of many layers, each containing many sublayers or objects. Fireworks layers are similar to layer sets in Adobe Photoshop®. Photoshop layers are similar to individual Fireworks objects.
Page 130 You can use the Delete Empty Layers extension to remove all empty normal and web layers across all states and pages in the current document. This extension is available at http://www.adobe.com/cfusion/exchange/index.cfm?event=extensionDetail&loc=en_us&extid=1373020. Duplicate a layer and objects A duplicate layer contains the same objects as the currently selected one. Duplicated objects retain the opacity and blending mode of the original objects.
Page 131 USING FIREWORKS CS4 Layers, masking, and blending Expand or collapse layers To eliminate clutter in the Layers panel, collapse the display of layers. To view or select specific objects on a layer, expand the layer. • To expand or collapse a single layer, click the triangle to the left of the layer name. •...
Page 132 USING FIREWORKS CS4 Layers, masking, and blending • To lock multiple layers, drag the pointer along the Lock column in the Layers panel. • To lock or unlock all layers, select Lock All or Unlock All from the Layers panel Options menu or pop-up menu. Turn on or off Single Layer Editing ❖...
Page 133 USING FIREWORKS CS4 Layers, masking, and blending Share layers When you share a layer across pages or states, you can update an object on a layer and it is updated in all pages or states. Share layers when you want objects such as background elements to appear on all pages of a website or all states of an animation.
Page 134: Masking
Vector masks, which are sometimes called clipping paths or paste insides, are used in vector-illustration applications such as Adobe FreeHand®. The vector mask object crops or clips the underlying objects to the shape of its path, creating a cookie-cutter effect.
Page 135 USING FIREWORKS CS4 Layers, masking, and blending Original objects and a bitmap mask applied using its grayscale appearance You can apply bitmap masks in two ways: • Using an existing object to mask other objects. This technique is like applying a vector mask. •...
Page 136 USING FIREWORKS CS4 Layers, masking, and blending If you are masking multiple objects, they must be grouped. Do one of the following: • Select Edit > Paste As Mask. • Select Modify > Mask > Paste As Mask. A mask applied to an image with a black canvas Mask objects by using the Paste Inside command If you use FreeHand, you might be familiar with the Paste Inside method of creating masks.
Page 137 USING FIREWORKS CS4 Layers, masking, and blending Select the object into which you want to paste the contents. This object will be used as the mask (the clipping path). Select Edit > Paste Inside. The objects you pasted appear to be inside or clipped by the mask object. Use text as a mask Text masks are a type of vector mask that you apply just as you apply masks that use existing objects.
Page 138 USING FIREWORKS CS4 Layers, masking, and blending Fireworks applies an empty mask to the selected object. The Layers panel displays a mask thumbnail representing the empty mask. (Optional) If the masked object is a bitmap, use one of the marquee or lasso tools to create a pixel selection. From the Tools panel, select a bitmap painting tool.
Page 139 USING FIREWORKS CS4 Layers, masking, and blending Draw on the empty mask. In the areas where you draw, the underlying masked object is either hidden or shown, depending on the type of mask you applied. Use Reveal Selection and Hide Selection to create a mask Select the Magic Wand or any marquee or lasso tool from the Tools panel.
Page 140 USING FIREWORKS CS4 Layers, masking, and blending Group objects to form a mask If you group two or more objects to create a mask, the topmost object becomes the mask object. The type of the top object determines the type of mask (vector or bitmap). Shift-click two or more overlapping objects.
Page 141 USING FIREWORKS CS4 Layers, masking, and blending Move masks and masked objects You can reposition masks and masked objects. They can be moved together or independently. Move a mask and its masked objects together Using the Pointer tool, select the mask on the canvas. 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.
Page 142 USING FIREWORKS CS4 Layers, masking, and blending The objects move without affecting the position of the mask. Note: If there is more than one masked object, all masked objects move together. Move masked objects independently of each other ❖ Click the object with the Subselection tool to select it, and then drag the object. This is the only way to select and move an individual masked object without moving other masked objects.
Page 143 USING FIREWORKS CS4 Layers, masking, and blending Use a transformation tool or a command from the Modify > Transform submenu to apply a transformation to the mask. You can apply a transformation to the mask object alone by first unlinking the mask from the mask objects in the Layers panel and then performing the transformation.
Page 144 USING FIREWORKS CS4 Layers, masking, and blending Vector masks are applied using their path outline by default. Showing the mask's fill and stroke produces the same result as using Paste Inside to create masks. A vector mask applied using its path outline with Show Fill and Stroke enabled By applying a bitmap mask using its alpha channel, you can create a mask that looks similar to a vector mask applied using its path outline.
Page 145: Blending And Transparency
USING FIREWORKS CS4 Layers, masking, and blending Show a vector mask's fill and stroke ❖ Select Show Fill And Stroke in the Property inspector when a vector mask that has been applied using its path outline is selected. Apply a bitmap mask using its alpha channel ❖...
Page 146 USING FIREWORKS CS4 Layers, masking, and blending Inspects each channel of the current and background layers and darkens the background color to reflect Linear Burn the blend color by decreasing the brightness. The overall effect is to darken the image. The neutral color is white, so Linear Burn blending with white has no effect.
Page 147 USING FIREWORKS CS4 Layers, masking, and blending Combines the luminance of the blend color with the hue and saturation of the base color. Luminosity Inverts the base color. Invert Adds gray to the base color. Tint Removes all base color pixels, including those pixels in the background image. Erase For general information and examples regarding blending modes—in particular, Photoshop blending modes—see the following website: www.pegtop.net/delphi/articles/blendmodes/.
Page 148 USING FIREWORKS CS4 Layers, masking, and blending You can also specify a blending mode and opacity before you draw an object. Specify a blending mode and opacity before you draw an object ❖ With the desired tool selected in the Tools panel, set blend and opacity options in the Property inspector before you draw the object.
Page 149: Chapter 11: Styles, Symbols, And Urls
Chapter 11: Styles, symbols, and URLs Adobe® Fireworks® provides three panels in which to store and reuse styles, symbols, and URLs. Styles are stored in the Styles panel, symbols for the current document in the Document Library panel, and URLs in the URL panel. By default, all three panels are organized in the Assets panel group.
Page 150 USING FIREWORKS CS4 Styles, symbols, and URLs Create and delete styles You can create a style based on the attributes of a selected object. The following attributes can be saved in a style: • Fill type and color, including patterns, textures, and vector gradient attributes such as angle, position, and opacity •...
Page 151 USING FIREWORKS CS4 Styles, symbols, and URLs More Help topics “Edit and customize Live Filters” on page 121 Edit a style Choose Select > Deselect to deselect any objects on the canvas. Double-click a style in the Styles panel. In the Edit Style dialog box, select or deselect attributes. Click OK to apply the changes to the style.
Page 152: Symbols
USING FIREWORKS CS4 Styles, symbols, and URLs Deselect the original object, and then select the objects to which you want to apply the new attributes. Select Edit > Paste Attributes. Break the link to a style You can break the link between an object and the style applied to it. The object retains the same attributes, but no longer changes if the style is changed.
Page 153 USING FIREWORKS CS4 Styles, symbols, and URLs Create a symbol from a selected object Select the object, and select Modify > Symbol > Convert to Symbol. Type a name for the symbol in the Name box. Select a symbol type. To scale the symbol without distorting its geometry, select Enable 9-slice Scaling Guides.
Page 154 USING FIREWORKS CS4 Styles, symbols, and URLs Note: If the selected symbol is not enabled for 9-slice scaling, you can edit the symbol within the context itself. You can choose Modify > Symbol > Edit In Place. Use 9-slice scaling guides to avoid distortion when resizing the symbol. (See “9-slice scaling”...
Page 155 USING FIREWORKS CS4 Styles, symbols, and URLs Button symbols have several features that let you retain symbol-instance relationships while assigning unique button text and URLs to each instance. To adjust JavaScript behaviors for component symbols, edit values in the Symbol Properties panel. To add customizable properties to that panel, you must edit the JavaScript file associated with the symbol.
Page 156 • For Windows Vista®: \Users\<username>\AppData\Roaming\Adobe\Fireworks CS4\Common Library\Custom Symbols • For Mac® OS: <user name>/Application Support/Adobe/Fireworks CS4/Common Library/Custom Symbols Click the plus button to add an element name. In the Element Name box, type the name of the element to customize. For example, to customize the text field named “label,”...
Page 157 Create a JavaScript file to control the symbol properties. Create editable symbol parameters using JavaScript When you save a component symbol, Fireworks saves a PNG file in the following default folders: • (Windows XP) <user settings>\Application Data\Adobe\Fireworks CS4\Common Library\Custom Symbols • (Windows Vista) \Users\<user name>\AppData\Roaming\Adobe\Fireworks CS4\Common Library\Custom Symbols •...
Page 158 USING FIREWORKS CS4 Styles, symbols, and URLs function setDefaultValues() var currValues = new Array(); //to build symbol properties currValues.push({name:"Selected", value:"true", type:"Boolean"}); Widget.elem.customData["currentValues"] = currValues; function applyCurrentValues() var currValues = Widget.elem.customData["currentValues"]; // Get symbol object name var Check = Widget.GetObjectByName("Check"); Check.visible = currValues[0].value; switch (Widget.opCode) case 1: setDefaultValues();...
Page 159 USING FIREWORKS CS4 Styles, symbols, and URLs Import one or more prepared symbols from a Fireworks symbol library You can import prepared animation symbols, graphic symbols, and button symbols, as well as navigation bars and multi-symbol themes. Open a Fireworks document. Select a folder in the Common Library panel.
Page 160: Urls
USING FIREWORKS CS4 Styles, symbols, and URLs Right-click the rectangle, and select Convert To Symbol. In the Convert To Symbol dialog box, do the following: Enter a name for the symbol. For example, call it Symbol A. If you are planning to apply 9-slice scaling to the symbol, select Enable 9-slice Scaling Guides. Double-click the “+”...
Page 161 Absolute URLs are complete, including the server protocol, which is usually http:// for web pages. For example, http://www.adobe.com/support/fireworks is the absolute URL for the Fireworks Support web page. Absolute URLs remain accurate regardless of the location of the source document, but they do not link correctly if the target document is moved.
Page 162 USING FIREWORKS CS4 Styles, symbols, and URLs URLs.htm and any new libraries you create are stored in the Adobe/Fireworks CS4/URL Libraries folder in your user- specific Application Data folder (Windows) or Application Support folder (Mac OS). For information on locating these folders, see “Work with configuration...
Page 163 USING FIREWORKS CS4 Styles, symbols, and URLs Export URLs Select Export URLs from the URL panel Options menu. Enter a filename and click Save. An HTML file is created that contains the URLs you have exported. Import URLs Select Import URLs from the URL panel Options menu. Select an HTML file and click Open.
Page 164: Chapter 12: Slices, Rollovers, And Hotspots
Creating and editing slices Slices are the basic building blocks for creating interactivity in Adobe® Fireworks®. Slices are web objects that ultimately exist as HTML code. You can view, select, and rename them through the Web Layer in the Layers panel.
Page 165 USING FIREWORKS CS4 Slices, rollovers, and hotspots Draw a rectangular slice object Select the Slice tool Drag to draw the slice object. Note: To adjust the position of a slice as you drag to draw it, hold down the mouse button, press and hold down the spacebar, and then drag the slice to another location on the canvas.
Page 166 USING FIREWORKS CS4 Slices, rollovers, and hotspots Create HTML text slices An HTML slice designates an area where ordinary HTML text appears in the browser. It then exports the HTML text that appears in the table cell defined by the slice. HTML slices are useful for quickly updating website text without creating new graphics.
Page 167 USING FIREWORKS CS4 Slices, rollovers, and hotspots • To hide or show all hotspots, slices, and guides, click the appropriate Hide/Show Slices button in the Web tools section of the Tools panel, or click the eye icon next to the Web Layer in the Layers panel. •...
Page 168 USING FIREWORKS CS4 Slices, rollovers, and hotspots Resizing multiple slice objects by dragging a single guide If you drag one guide along a given coordinate, all other guides on that coordinate move with it. Resize one or more slices Position the Pointer or Subselection tool over a slice guide. The pointer changes to the guide movement pointer Drag the slice guide to the desired location.
Page 169: Interactive Slices
Fireworks provides two ways to make slices interactive: • For simple interactivity, use the drag-and-drop rollover method. • For more complex interactivity, use the Behaviors panel. Behaviors in Fireworks are compatible with Adobe Dreamweaver® behaviors. When you export a Fireworks rollover to Dreamweaver, you can edit Fireworks behaviors by using the Dreamweaver Behaviors panel.
Page 170 USING FIREWORKS CS4 Slices, rollovers, and hotspots About rollovers Rollovers all work the same way: when the mouse pointer rolls over one graphic, that action triggers the display of another graphic. The trigger is always a web object (a slice, a hotspot, or a button). The simplest rollover swaps an image in State 1 with an image directly below it in State 2.
Page 171 USING FIREWORKS CS4 Slices, rollovers, and hotspots Select the slice and place the pointer over the behavior handle. Note: You can select the slice while in any state. Click the behavior handle and select Add Simple Rollover Behavior from the menu. Click the Preview tab and test the simple rollover, or press F12 to preview it in a browser.
Page 172 USING FIREWORKS CS4 Slices, rollovers, and hotspots From the Swap Image From pop-up menu, select the state you created in step 2, and click OK. Preview and test the disjoint rollover. Apply multiple rollovers to a slice A slice triggering a rollover behavior and a disjoint rollover behavior Drag a behavior handle from the selected slice to the edge of the same slice or onto another slice.
Page 173 USING FIREWORKS CS4 Slices, rollovers, and hotspots Specifies the Over state for the currently selected slice when it is part of a navigation bar and optionally Nav Bar Over specifies the Preload images state and Include Over While Down state. Specifies a Down state for the currently selected slice when it is part of a navigation bar and optionally Nav Bar Down specifies a Preload images state.
Page 174: Preparing Slices For Export
USING FIREWORKS CS4 Slices, rollovers, and hotspots If the external file is an animated GIF, deselect Preload Images. Doing so prevents problems when displaying animated GIFs as rollover states. Note: Fireworks creates document-relative paths to image files. If you are exporting your document for use on the web, be sure that your external image file is accessible from the exported Fireworks HTML.
Page 175 USING FIREWORKS CS4 Slices, rollovers, and hotspots Set default alternate text You can select the slices and hotspots for which you haven’t entered alternate text and set a default ALT text for all of them. ❖ Select Commands > Web > Set ALT Text and enter the default alternate text. Assign a target for a selected slice or hotspot A target is an alternate web page state or web browser in which the linked document opens.
Page 176 USING FIREWORKS CS4 Slices, rollovers, and hotspots Option Description Slice # (1,2,3...) The element is labeled numerically or alphabetically, according to the style you select. Slice # (01,02,03...) Slice # (A,B,C...) Slice # (a,b,c...) row/column (r3_c2, r4_c7...) Row (r##) and Col (c##) designate the rows and columns of the table that web browsers use to reconstruct a sliced image.
Page 177: Hotspots And Image Maps
USING FIREWORKS CS4 Slices, rollovers, and hotspots Define how HTML tables are exported Slicing defines how the HTML table structure appears when a Fireworks document is exported for use on the web. When you export a sliced Fireworks document to HTML, your document is reassembled using an HTML table. Each sliced element from the Fireworks document resides in a table cell.
Page 178 USING FIREWORKS CS4 Slices, rollovers, and hotspots An image map with hotspots Hotspots and image maps are often less resource-intensive than sliced graphics. Slicing requires more processing power because of the additional HTML code needed to download and reassemble sliced graphics. Note: It is possible to create a sliced image map.
Page 179 USING FIREWORKS CS4 Slices, rollovers, and hotspots Create a hotspot by tracing one or more selected objects Select multiple objects and then select Edit > Insert > Hotspot. Click Single to create a single rectangular hotspot covering all objects or Multiple to create multiple hotspots (one for each object).
Page 180 USING FIREWORKS CS4 Slices, rollovers, and hotspots Create rollovers with hotspots Use the drag-and-drop rollover method to attach a disjoint rollover effect to a hotspot. The target area must be defined by a slice. Rollover effects are applied to hotspots the same way that they are to slices. Note: A hotspot can trigger only a disjoint rollover.
Page 181: Chapter 13: Creating Buttons And Pop-Up Menus
When you export a button or pop-menu, Fireworks automatically generates the CSS code or JavaScript necessary to display it in a web browser. In Adobe Dreamweaver, you can easily insert CSS code, JavaScript, and HTML code from Fireworks into your web pages or into any HTML or CSS file.
Page 182 USING FIREWORKS CS4 Creating buttons and pop-up menus • You can edit the text, URL, and target for one button instance without affecting other instances of the same button, and without breaking the symbol-instance relationship. • A button instance is encapsulated. Fireworks moves all the components and states associated with the buttons that you drag into the document.
Page 183 USING FIREWORKS CS4 Creating buttons and pop-up menus Button preset filter Description The bevel appears to rise from the underlying objects. Raised The button's colors lighten. Highlighted The bevel appears to sink into the underlying objects. Inset The bevel appears to sink into the underlying objects, and the colors lighten.
Page 184: Edit Button Symbols
PNG library file into the document. • Select Import Symbols from the Document Library panel Options menu. The libraries contain a wide variety of premade button symbols prepared by Adobe. Edit button symbols You can edit multiple instances of button properties at the symbol level or you can edit single instances of button properties.
Page 185 USING FIREWORKS CS4 Creating buttons and pop-up menus Edit button properties at the instance level ❖ Select the button instance in the work area, and set the properties in the Property inspector. Editable instance-level properties typically differ from button to button in a series of buttons. You can change instance-level properties for an instance without affecting the associated symbol or any other instances of that symbol.
Page 186: Pop-Up Menus
USING FIREWORKS CS4 Creating buttons and pop-up menus Do one of the following: • To edit a slice or hotspot in the button symbol's active area, select Active Area from the pop-up menu in the property inspector. Use the Pointer tool to move or reshape the slice or a slice guide. Or, use any of the slice or hotspot tools to draw a new active area.
Page 187 USING FIREWORKS CS4 Creating buttons and pop-up menus Press the Tab key to move between cells and the Up Arrow and Down Arrow keys to scroll through the list vertically. Repeat steps 3 and 4 until you have added all menu items. To delete a menu item, click the Delete Menu button. Click Next or Done, or select another tab.
Page 188 USING FIREWORKS CS4 Creating buttons and pop-up menus Add custom menu styles to the Pop-up Menu Editor Select a cell style for use when Image is selected as the cell style. For more information about styles, see “Create and delete styles”...
Page 189 USING FIREWORKS CS4 Creating buttons and pop-up menus Change the position of pop-up menus and submenus Use the Position tab of the Pop-up Menu Editor to specify a pop-up menu's position. You can also position a top-level pop-up menu by dragging its outline in the workspace when the Web Layer is visible. Set a specific position for a pop-up menu or submenu With the desired pop-up menu open in the Pop-up Menu Editor, click the Position tab.
Page 190 USING FIREWORKS CS4 Creating buttons and pop-up menus Select the web object that is the trigger for the pop-up menu. Drag the pop-up menu outline to another location in the workspace. Edit or move items in pop-up menus In the Pop-up Menu Editor, you can edit or update the contents of a pop-up menu, rearrange the menu items, or change other properties on any of the four tabs.
Page 191: Chapter 14: Prototyping Websites And Application Interfaces
By combining the Pages panel with other powerful Fireworks features, you can quickly create interactive web and software prototypes. To convert a finalized prototype to a functioning site, simply export it to Adobe Flash®, Adobe Flex®, Adobe AIR™, or Adobe Dreamweaver®.
Page 192: Working With Fireworks Pages
Fireworks offers multiple output formats for your prototype, all of which retain hypertext links for page navigation. See the following articles: • To share a flexible CSS-based prototype with clients, or further edit it in Adobe Dreamweaver, see “Export a CSS layout”...
Page 193 USING FIREWORKS CS4 Prototyping websites and application interfaces Add a page A blank page is inserted at the end of the list of pages and becomes the active page. ❖ Do one of the following: • In the Pages panel, click the New/Duplicate Page button •...
Page 194 USING FIREWORKS CS4 Prototyping websites and application interfaces Edit a page canvas Each page has a unique canvas, with independent canvas size, color, and image resolution. Select a page from the Pages panel or the pages pop-up menu at the top of the document window. Select Modify >...
Page 195: Creating Css-Based Layouts
You can design CSS-based layouts in a Fireworks document, and then convert them to HTML pages with CSS rules that replicate your layouts. CSS-based layouts provide a standards-based approach and give a cross-browser friendly code. For a video tutorial on creating CSS-based HTML page layouts, see www.adobe.com/go/lrvid4035_fw. Also see the following resources: •...
Page 196 USING FIREWORKS CS4 Prototyping websites and application interfaces The export engine treats text, images, and rectangles as rectangular blocks. It Rule 2: Avoid overlapping of objects examines the size and position of these objects to determine the logical rows and columns to place them in the layout. Carefully place the objects so that their boundaries do not overlap.
Page 197: Prototyping Flex Applications
USING FIREWORKS CS4 Prototyping websites and application interfaces Prototyping Flex applications The prototyping process for Flex is like the workflow used for websites and software interfaces. (See “Prototyping workflow” on page 185.) With Fireworks, you can drag Flex components onto the canvas, specify their properties, and export the resulting user interface to MXML.
Page 198 You can create graphics using tools such as Fireworks® CS4®, Adobe Photoshop® CS4, and Adobe Illustrator® CS4 and export them into the FXG format. You then use the FXG file in tools such as Adobe Flex Builder to develop rich internet applications and experiences.
Page 199 USING FIREWORKS CS4 Prototyping websites and application interfaces Skin Flex components You can create skins for a wide variety of Flex components based on the Flex skin templates and edit them in Fireworks. Select Commands > Flex Skinning > New Flex Skin. Do one of the following: •...
Page 200: Prototyping Adobe Air Applications
Adobe® AIR™ for Fireworks lets you transform a Fireworks prototype into a desktop application. For example, some prototype pages interact with each other to display data. You can use Adobe AIR to package this set of pages into a small application that can be installed on a user's computer. When the user runs the application from their desktop, the application loads and displays the prototype in its own application window, independent of a browser.
Page 201 A digital signature provides an assurance that the code for an application has not been altered or corrupted since its creation by the software author. All Adobe AIR applications require a digital signature, and can't be installed without one. In the Create AIR Package dialog box, click the Set button next to the Digital Signature option.
Page 202: Chapter 15: Creating Animations
Chapter 15: Creating animations Animation basics In Adobe® Fireworks®, you can create animated graphics with banner ads, logos, and cartoons that move. You create animation by assigning properties to objects called animation symbols. The animation of a symbol is broken down into states, which contain the images and objects in the animation.
Page 203: Create Animation Symbols
USING FIREWORKS CS4 Creating animations Create animation symbols You can create an animation symbol from scratch or by converting an object to a symbol. You can then set properties that determine the number of states in the animation and the type of action, such as scaling or rotation. By default, a new animation symbol has five states, each with a delay time of 0.07 seconds.
Page 204 (Animate dialog box only) The distance, in pixels, that the object moves. The default is 72, but it has no limit. Move Movement is linear, and there are no key states (unlike in Flash and Adobe Director). (Animate dialog box only) The direction, in degrees from 0 to 360º, in which the object moves. You can also Direction change Movement and Direction values by dragging the animation handles of the object.
Page 205: States
USING FIREWORKS CS4 Creating animations You can change the direction of the motion by changing the angle of the path. ❖ Drag one of the animation start or end handles of the object to a new location. Shift-drag to constrain the direction of movement to 45°...
Page 206: Manipulate States
USING FIREWORKS CS4 Creating animations Press Enter, or click outside the panel. Hide states during playback Hidden states are not displayed during playback and are not exported. Do one of the following: • Select Properties from the States panel Options menu. •...
Page 207 USING FIREWORKS CS4 Creating animations Reorder states ❖ Drag the states one by one to a new location in the list. Reverse the order of states You can reverse the order all states or a selected range. Select Commands > Document > Reverse States. Do one of the following: •...
Page 208: About Onion Skinning
USING FIREWORKS CS4 Creating animations About onion skinning Onion skinning is a technique for viewing the contents of states before and after the selected state. You can smoothly animate objects without flipping back and forth through them. When you turn on onion skinning, objects in the preceding and subsequent states are dimmed so that you can distinguish them from objects in the current state.
Page 209: Optimize An Animation
USING FIREWORKS CS4 Creating animations • Hidden states excluded from export do not appear in the preview. (See “Hide states during playback” on page 200.) • Previewing the animation in the Original view displays the full-resolution source graphic, not the optimized preview used for the exported file.
Page 210: Work With Existing Animations
USING FIREWORKS CS4 Creating animations Work with existing animations You can use an existing animated GIF by importing the GIF into a Fireworks file or by opening the GIF as a new file. When you import an animated GIF, Fireworks converts it to an animation symbol and places it in the currently selected state.
Page 211 USING FIREWORKS CS4 Creating animations In the Twist And Fade dialog box, configure the parameters according to your preferences. Manipulate the various options in the dialog box to customize the effect. Position the dialog box such that you preview the changes as you make them.
Page 212: Chapter 16: Creating Slide Shows
Edit slide shows by adding or deleting images, or by adding multiple albums to a single slide show. If you are a Flash designer or developer, you can build a custom album player in Flash to display the Adobe Fireworks® Album Creator's XML output.
Page 213: Customize A Slide Show
USING FIREWORKS CS4 Creating slide shows Open an existing slide show Select Commands > Create Slideshow. In the Create Slideshow window, click Open An Existing Slideshow or the Browse button (...) next to Albums. Browse to the folder that contains the existing slide show XML file and click Open. Delete an album Open an existing slide show.
Page 214 Generate a slideshow.xml file for the slide show images and directories. Deselect to export only the Generate XML images. Select the XML format exported as Create Slideshow or Adobe Media Gallery if you select Generate XML. XML Format Location where the slide show and associated files are exported or generated.
Page 215: Create A Custom Fireworks Album Player
USING FIREWORKS CS4 Creating slide shows Create a custom Fireworks album player You can create a custom player to work with the Create Slideshow command. In addition, the source files of the default slide show players are included with the software so that you can modify or skin the players. Publish both the SWF and (if available) the HTML file (with either the .htm or .html extension).
Page 216 USING FIREWORKS CS4 Creating slide shows Node definitions AlbumBook node Version of the Create Slideshow command that generated the XML file. Main title of the slide show. title Description for the entire slide show. description Zero-based index of the first album you want to display. firstAlbum Width of the slide show.
Page 217 USING FIREWORKS CS4 Creating slide shows Width of the slide. width Height of the slide. height Width of the slide thumbnail. thumbWidth Height of the slide thumbnail. thumbHeight Last updated 3/8/2011...
Page 218: Chapter 17: Optimizing And Exporting
Chapter 17: Optimizing and exporting Exporting graphics from Adobe® Fireworks® is a two-step process. Before you export, you must optimize the graphics— select options that make the graphics look as good as possible while restricting file size so that the graphics download as fast as possible.
Page 219 USING FIREWORKS CS4 Optimizing and exporting A. Saved set of options for the selected export B. File size and download time estimates C. Preview chosen export settings D. Save export settings in the active view When you export animated GIFs or JavaScript rollovers, the estimated file size represents the total size across all states. Note: To increase redraw speed of the Image Preview, deselect Preview.
Page 220 USING FIREWORKS CS4 Optimizing and exporting The Optimize To Size Wizard attempts to match the requested file size using these methods: • Adjusting JPEG quality • Modifying JPEG smoothing • Altering the number of colors in 8-bit images • Changing dither settings in 8-bit images •...
Page 221: Optimize In The Workspace
USING FIREWORKS CS4 Optimizing and exporting Discards the current state and temporarily replaces it with the previous state. Choose this Restore to Previous option if animated objects move above an opaque background. To set the state delay, select a state from the list and enter the delay time in hundredths of a second in the State Delay box. To set the animation to play repeatedly, click the Looping button and select the number of repetitions from the pop- up menu.
Page 222 USING FIREWORKS CS4 Optimizing and exporting The preview displays the total size, estimated download time, and file format of a document. The estimated download time is the average amount of time it would take to download all the slices and states on a 56K modem. The 2-Up and 4-Up views display additional information that varies depending on the file type selected.
Page 223 USING FIREWORKS CS4 Optimizing and exporting Hide or show the slice overlay ❖ Select View > Slice Overlay. Optimize by using a preset option Choose Window Optimize to open the Optimize panel. When you choose a preset option, the rest of the options in the Optimize panel are set for you.
Page 224: Optimize Gif, Png, Tiff, Bmp, And Pict Files
USING FIREWORKS CS4 Optimizing and exporting More Help topics “Optimize GIF, PNG, TIFF, BMP, and PICT files” on page 218 “Optimize JPEGs” on page 225 Save and reuse optimization settings Fireworks remembers the last optimization settings you used after you perform any of the following actions: •...
Page 225 USING FIREWORKS CS4 Optimizing and exporting Fireworks optimization settings are similar for all 8-bit graphic file formats. For web file formats such as GIF and PNG, you can specify the amount of compression. As you experiment with different optimization settings, use the 2-Up and 4-Up buttons to test and compare a graphic's appearance and estimated file size.
Page 226 USING FIREWORKS CS4 Optimizing and exporting Select a color depth for an 8-bit image Color depth is the number of colors in the graphic. Reducing color depth makes a smaller file size, but it can also reduce the image quality. When you reduce color depth, some colors in the image are discarded, beginning with those used least.
Page 227 USING FIREWORKS CS4 Optimizing and exporting • To select a range of colors, click a color, and then hold Shift and click the last color in the range. Preview all the pixels in the document that contain a specific color Click the Preview button at the upper left of the document window.
Page 228 You can save custom palettes as external palette files that can be used with other Fireworks documents or in other applications that support external palette files, such as Adobe FreeHand®, Adobe Flash®, and Adobe Photoshop®. Saved palette files have the .act extension.
Page 229 Although the transparency is not very useful for export to the web (because most web browsers do not support PNG format), it is useful for export to Flash or Adobe Director, because both applications support this type of transparency.
Page 230 USING FIREWORKS CS4 Optimizing and exporting Note: This option is available only for GIF and PNG file formats. You can get similar results with a JPEG by making it progressive. ❖ From the Optimize panel Options menu, select Interlaced. Match a target background color Anti-aliasing makes an object appear smoother by blending its color into the background.
Page 231: Optimize Jpegs
USING FIREWORKS CS4 Optimizing and exporting If the halo is still there, repeat step 3 until the halo is gone. Optimize JPEGs Using the Optimize panel, you can optimize JPEGs by setting compression and smoothing options. JPEGs are always saved and exported in 24-bit color, so you can't optimize a JPEG by editing its color palette. The color table is empty when a JPEG image is selected.
Page 232 USING FIREWORKS CS4 Optimizing and exporting The selected area in this image is being compressed at a quality level of 90, while the unselected area is being compressed at a quality level of 50. In Original view, select an area of the graphic for compression using one of the Marquee tools. Select Modify >...
Page 233: Export From The Workspace
USING FIREWORKS CS4 Optimizing and exporting Create a progressive JPEG image Progressive JPEGs, like interlaced GIFs and PNGs, are displayed at a low resolution initially and then increase in quality as they download. ❖ From the Optimize panel Options menu, select Progressive JPEG. Note: Some older bitmap-editing applications cannot open progressive JPEGs.
Page 234 USING FIREWORKS CS4 Optimizing and exporting Note: To export only certain images in a document, you must first slice your document and then export only the desired slices. In the Optimize panel, select a file format and set format-specific options. Select File >...
Page 235 USING FIREWORKS CS4 Optimizing and exporting Update a slice If you've already exported a sliced document and have subsequently made changes to the original document in Fireworks, you can update just the image or slice that changed. To make it easy to locate the replacement slice, custom- name slices.
Page 236 USING FIREWORKS CS4 Optimizing and exporting Export states or layers as multiple files Fireworks can export each layer or state in a document as a separate image file and use the optimization settings specified in the Optimize panel. The name of the layer or state determines the filename of each exported file. This export method is sometimes used to export animations.
Page 237 Fireworks lets you export HTML in Generic, Dreamweaver, Microsoft® FrontPage®, and Adobe GoLive® formats. Note: Adobe Dreamweaver shares a tight integration with Fireworks. Fireworks handles the export of HTML to Dreamweaver differently than it handles export to other HTML editors. If you are exporting Fireworks HTML to Dreamweaver, see “Working with...
Page 238 USING FIREWORKS CS4 Optimizing and exporting Click the Options button and select your HTML editor from the HTML Style pop-up menu on the General tab of the HTML Setup dialog box. If your HTML editor is not listed, select Generic. Note: It's important that you select your HTML editor as the HTML style so that interactive elements such as buttons and rollovers function correctly when imported into your HTML editor.
Page 239 USING FIREWORKS CS4 Optimizing and exporting Note: If you plan to paste the HTML code into 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. From the Export pop-up menu, select HTML and Images.
Page 240 USING FIREWORKS CS4 Optimizing and exporting Note: For considerable changes to document layout, make your changes in Fireworks and re-export the HTML file. Select File > Update HTML. Select the file to update. Click Open. Do one of the following: •...
Page 241 USING FIREWORKS CS4 Optimizing and exporting Export your document using any of the methods available for exporting or copying HTML. See “Export HTML” on page 230. Note: Fireworks uses UTF-8 encoding when exporting to XHTML. Export files with and without UTF-8 encoding UTF-8, which stands for Universal Character Set Transformation Format-8, is a text-encoding method that allows web browsers to display different character sets (for example, Chinese text and English text) on the same HTML page.
Page 242 Export Adobe PDF files When you want to print a Fireworks design or distribute it for review, export to Adobe PDF. Reviewers can add comments and reply to comments of others in Adobe Reader® or Acrobat®. For information about setting up PDF reviews, see Acrobat Help.
Page 243: Send A Fireworks Document As An E-Mail Attachment
USING FIREWORKS CS4 Optimizing and exporting Requires the Open Password to open the exported file. Use Password to Open Document Requires the Secure Password to perform these selected functions: Printing, Use Password to Restrict Tasks Editing, Copying, and Commenting. Click OK to close the Options dialog box. Specify a filename and location, and then click Save.
Page 244: Chapter 18: Using Fireworks With Other Applications
Fireworks, Flash, and Dreamweaver. Working with Dreamweaver Adobe Dreamweaver® and Fireworks recognize and share many of the same file edits, including changes to links, image maps, and table slices. And, Dreamweaver and Fireworks provide a streamlined workflow for editing, optimizing, and placing web graphics files in HTML pages.
Page 245 USING FIREWORKS CS4 Using Fireworks with other applications Note: All behaviors applied within Fireworks are preserved upon export back to Dreamweaver. Likewise, most Dreamweaver behaviors applied to image placeholders are also preserved during launch-and-edit with Fireworks. There is one exception, however: disjoint rollovers applied to image placeholders in Dreamweaver are not preserved when opened and edited in Fireworks.
Page 246 USING FIREWORKS CS4 Using Fireworks with other applications When you return to Dreamweaver, the image placeholder you originally selected is replaced with the new Fireworks image or table. Place Fireworks HTML code in Dreamweaver Exporting Fireworks files to Dreamweaver is a two-step process. From Fireworks, export files directly to a Dreamweaver site folder.
Page 247 USING FIREWORKS CS4 Using Fireworks with other applications Update Fireworks HTML exported to Dreamweaver Roundtrip HTML provides many benefits when working with HTML exported to Dreamweaver. (See “About Roundtrip HTML” on page 242.) Make changes to the PNG document in Fireworks. Select File >...
Page 248 USING FIREWORKS CS4 Using Fireworks with other applications About Roundtrip HTML Fireworks recognizes and preserves most types of edits made to a document in Dreamweaver, including changed links, edited image maps, edited text and HTML in HTML slices, and behaviors shared between Fireworks and Dreamweaver.
Page 249 Note: You can get a Dreamweaver error if you nest another table inside the original Fireworks-generated table and then try to edit the table using Roundtrip editing in Dreamweaver. For more information, see TechNote 19231 on the Adobe website. About supported and non-supported Dreamweaver behaviors If a single, unsliced Fireworks graphic is inserted into a Dreamweaver document and a Dreamweaver behavior is applied, that graphic will have a slice on top of it when it is opened and edited in Fireworks.
Page 250 USING FIREWORKS CS4 Using Fireworks with other applications Make edits in the Export Preview dialog box: • To edit optimization settings, click the Options tab. • To edit the size and area of the exported image, click the File tab. If you change image dimensions in Fireworks, you must reset the size of the image in the Property inspector when you return to Dreamweaver.
Page 251 USING FIREWORKS CS4 Using Fireworks with other applications In the Editors list, select Fireworks. If Fireworks is not in the list, click the Plus (+) button, locate the Fireworks application on your hard disk, and click Open. Click Make Primary. Repeat steps 2 through 4 to set Fireworks as the primary editor for other web image file types.
Page 252: Working With Homesite, Golive, And Other Html Editors
Working with HomeSite, GoLive, and other HTML editors Fireworks and Adobe HomeSite® share a powerful integration that allows you to start Fireworks from HomeSite to edit web graphics. When you exit Fireworks, the updates you made are automatically applied to the placed image in HomeSite.
Page 253 USING FIREWORKS CS4 Using Fireworks with other applications For more information, see Fireworks Help. Export Fireworks HTML to HomeSite Exporting HTML from Fireworks generates an HTML file and the associated image files in the location you specify. You can then open the HTML file in HomeSite for further editing. ❖...
Page 254: Working With Flash
• You can easily import, copy and paste, or export Fireworks vectors, bitmaps, animations, and multi-state button graphics for use in Adobe Flash®. • Launch-and-edit functionality makes it easy to edit Fireworks graphics from within Flash. When you work in Flash, the launch-and-edit preferences you set in Fireworks are always applied.
Page 255 USING FIREWORKS CS4 Using Fireworks with other applications Imports all of the pages in the PNG file into a new Flash layer that Import All Pages Into New States As Movie Clips takes the name of the PNG file. A key state is created in the new layer at the current state’s location, the first page of the PNG file is placed as a movie clip in this state, and all the other pages are placed in states following it as movie clips.
Page 256 USING FIREWORKS CS4 Using Fireworks with other applications About the Flash library structure Fireworks objects are imported into a Fireworks Objects Folder in the Flash library. The structure within this folder is as follows: File 1 folder // Named with the Fireworks file name •...
Page 257 • Objects with any other Photoshop layer effects are rasterized. Exporting Fireworks graphics to other formats for use in Flash You can export Fireworks graphics as JPEG, GIF, PNG, and Adobe Illustrator 8 (AI) files, and then import them into Flash.
Page 258 Select File > Save As. Enter a filename and choose a destination folder. For the format, select Adobe Flash SWF. Click Options. Then select an Objects option: Allows you to maintain path editability. Effects and formatting are lost.
Page 259: Working With Freehand And Illustrator
281 Working with FreeHand and Illustrator Vector graphics can be easily shared between Fireworks and vector graphics applications such as Adobe FreeHand® and Adobe Illustrator®. The appearance of objects may differ between applications, however, because Fireworks does not share all the same features with all vector graphics applications.
Page 260 USING FIREWORKS CS4 Using Fireworks with other applications Rasterizes complex groups, blends, or tiled fills and places each as a single bitmap object in a Render as Images 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.
Page 261 USING FIREWORKS CS4 Using Fireworks with other applications Lets you edit all imported vector objects. Some objects might appear slightly different in Keep All Paths Editable FreeHand than in Fireworks because of differences in the way the two applications interpret information. Effects not shared by the two applications might be discarded.
Page 262 USING FIREWORKS CS4 Using Fireworks with other applications Choosing FreeHand Compatible omits bitmaps and converts gradient fills to solid fills. Click OK, and then click Save. Switch to an open document in FreeHand. Select File > Open or File > Import to navigate to the file you exported from Fireworks, and click Open. Working with Illustrator Fireworks provides support for importing native Illustrator (AI) CS2 and later files, with options for retaining many aspects of the imported files, including layers, and patterns.
Page 263: Working With Photoshop
File Options dialog box. Select the artboard that you want to import in the Page menu. Each artboard in Illustrator is mapped to a page in Fireworks. For example, artboards 1, 2, and 3 in the Adobe Illustrator File appear as 1, 2, and 3 in the Page menu.
Page 264 USING FIREWORKS CS4 Using Fireworks with other applications Converted and unsupported Photoshop features in Fireworks When you open or import a Photoshop file, Fireworks converts the image to PNG format using import preferences that you specify. (See “Photoshop Import and open preferences”...
Page 265 USING FIREWORKS CS4 Using Fireworks with other applications • Layers that use unsupported layer effects may be merged, depending on the blending mode of the layer and the presence of transparent pixels. Flattens all objects on each Photoshop layer, and converts each Photoshop Maintain Photoshop Layer Appearance layer into a bitmap object.
Page 266 Fireworks and then continue editing in Photoshop. You can use the PSD Save extension to quickly export the pages and states in your Fireworks document as separate PSD files. This extension is available at http://www.adobe.com/cfusion/exchange/index.cfm?event=extensionDetail&loc=en_us&extid=1327518. Export a file in Photoshop format Select File > Save As.
Page 267: Working With Director
USING FIREWORKS CS4 Using Fireworks with other applications Converts each object into an individual Photoshop layer, and effects and text Maintain Fireworks Appearance become non-editable. Select this option if you want to maintain control over the Fireworks objects in Photoshop but also want to maintain the original appearance of the Fireworks image.
Page 268 USING FIREWORKS CS4 Using Fireworks with other applications Place Fireworks files in Director Director can import flattened images from Fireworks, such as JPEG and GIF images. It can also import 32-bit PNG images with transparency. For sliced, interactive, and animated content, Director can import Fireworks HTML. For information on exporting flattened Fireworks images such as JPEG and GIF images, see Fireworks Help.
Page 269: About Adobe Bridge
You can start Bridge from any Creative Suite component except Acrobat® 8, and use it to access both Adobe and non-Adobe assets. Use Adobe Bridge to accomplish any of the following: •...
Page 270: Share Image Metadata With Adobe Xmp
• Start a real-time web conference. Share image metadata with Adobe XMP Adobe XMP (eXtensible Metadata Platform) lets you add file information to saved PNG, GIF, JPEG, Photoshop, and TIFF files. XMP facilitates the exchange of metadata such as author, copyright, and keywords between Adobe applications.
Page 271 XMP files with other users or apply them to other files. You can save metadata in a template to use to populate metadata in Adobe InDesign documents and other documents created with XMP-enabled software. Templates you create are stored in a shared location that all XMP-enabled software can access.
Page 272 Select the template you want to delete and press Delete, or drag it to the Recycle Bin (Windows) or the Trash (Mac OS). Apply metadata templates to files in Adobe Bridge Select one or more files. Choose either of the following commands from the Metadata panel menu or the Tools menu: •...
Page 273: Chapter 19: Automating Tasks
• Select Edit > Find And Replace. • Press Control+F (Windows) or Command+F (Mac OS). Note: If the files you select are locked or checked in from an Adobe Dreamweaver® site, you are prompted to unlock them or check them out before proceeding.
Page 274: Set Options For Finding And Replacing In Multiple Files
USING FIREWORKS CS4 Automating tasks Set options for finding and replacing in multiple files When finding and replacing among multiple files, specify how Fireworks handles multiple open files after the search. Select Replace Options from the Find panel Options menu. Select Save And Close Files to save and close each file after the find and replace.
Page 275: Find And Replace Colors
USING FIREWORKS CS4 Automating tasks Find and replace colors In the Find panel, select Find Color from the second pop-up menu. Select an item from the Apply To pop-up menu to determine how the colors found are applied: Finds and replaces both fill and stroke colors Fills &...
Page 276 USING FIREWORKS CS4 Automating tasks • Perform commands on a selection of files. For more information, see “Specify the location for saving backup files” on page 274. Batch-processing workflow Select File > Batch Process, and select the files to process. •...
Page 277 At the end of the batch process, you are prompted if any of the files added to the batch were not processed. Note: A log file named FireworksBatchLog.txt is created during the batch process. The log file is located at: • \Documents and Settings\<username>\Application Data\Adobe\Fireworks CS4\FireworksBatchLog.txt (Windows XP) •...
Page 278 USING FIREWORKS CS4 Automating tasks Change filenames during batch-processing Select Rename from the Batch Options list and click Add. Specify Rename options at the bottom of the Batch Process dialog box: Lets you replace characters in each filename with different characters that you specify, or you can Replace With delete characters from each filename.
Page 279: Using Commands For Batch-Processing
USING FIREWORKS CS4 Automating tasks Find and replace during batch-processing Batch Replace affects only the following file formats: Fireworks PNG, Illustrator, and FreeHand. Batch Replace does not affect GIFs and JPEGs. Select Find and Replace from the Batch Options list and click Add. Click Edit.
Page 280 USING FIREWORKS CS4 Automating tasks Specify the location for saving backup files Backup copies of files are placed in an Original Files subfolder in the same folder as each original file. Select a location for the batch output. Select Backups to set your backup options. Select how you want to back up the files: Overwrites the previous backup file.
Page 281: Extending Fireworks
An extension is a command script, command panel, library, filter, pattern, texture, or Auto Shape that adds to the functionality of Fireworks. Fireworks ships with the Adobe Extension Manager, which allows you to easily install, manage, and delete extensions. A collection of default extensions appears in the Commands menu.
Page 282 USING FIREWORKS CS4 Automating tasks You can execute recorded commands or a selection of actions in the History panel at any time. Save steps as a command for reuse Select the steps to save as a command: • Click a step, then Shift-click another to select a range of steps to save as a command. •...
Page 283: Manage Commands
• On your hard disk, delete the JSF file for the command from the Commands folder in your user-specific Fireworks configuration folder. Note: To rename or delete a command that shipped with Fireworks or that you downloaded from the Adobe Exchange, open the Extension Manager.
Page 284 USING FIREWORKS CS4 Automating tasks Edit selected actions from the History panel, using JavaScript In Fireworks, select a range of steps in the History panel. Click the Copy Steps To Clipboard button at the bottom of the History panel. Create a new document in a text editing application. Paste the steps into the new text document and modify as needed.
Page 285: Chapter 20: Preferences And Keyboard Shortcuts
Chapter 20: Preferences and keyboard shortcuts Fireworks preference settings let you control the general appearance of the user interface and customize aspects of editing and folder usage. In addition, you can customize your keyboard shortcuts. Set preferences Choose Edit > Preferences (Windows) or Fireworks > Preferences (Mac OS). Select the preferences category you want to modify.
Page 286 USING FIREWORKS CS4 Preferences and keyboard shortcuts Permanently deletes the path after it has been converted to a marquee. Delete Paths When Converting To Marquee Set the size and shape of the tool pointers. For certain large multi-tipped brushes, the Brush-size Painting Cursors cross-hair pointer is used by default.
Page 287 USING FIREWORKS CS4 Preferences and keyboard shortcuts Photoshop Import and open preferences These preferences determine how Fireworks behaves when you import or open Photoshop files. For more information, see “Working with Photoshop” on page 257. Displays options when you import PSD files using the File > Import command. Show Import Dialog Box Displays options when you drag PSD files into Fireworks or use the File >...
Page 288: Select And Customize Keyboard Shortcuts
If you are accustomed to using shortcuts from other applications such as Adobe FreeHand, Adobe Illustrator, Photoshop, or products that use a different standard, you can switch to the shortcut set you prefer.
Page 289: Work With Configuration Files
USING FIREWORKS CS4 Preferences and keyboard shortcuts A range of predefined actions Miscellaneous From the Commands list, select the command whose shortcut you want to modify. Click in the Press Key text box, and press the desired keys for the new shortcut on the keyboard. To add a secondary shortcut to the shortcut list, click the Add A New Shortcut (+) button.
Page 290: About Reinstalling Fireworks
Preferences and keyboard shortcuts About user configuration files Fireworks creates a different set of configuration files for each user. The files are stored in the Adobe/Fireworks CS4 folder in your user-specific Application Data folder (Windows) or Application Support folder (Mac OS). The location of this folder varies depending on what operating system you use and whether you have a multiuser or single-user system.
Page 291: View Package Contents (Mac Os Only)
USING FIREWORKS CS4 Preferences and keyboard shortcuts View package contents (Mac OS only) On Mac OS, Fireworks is installed in a self-contained format called the application program package. The application package is where the Fireworks application file is stored, along with all default configuration files that come with Fireworks.
Page 292: Index
Adobe ConncectNow 24 Saturation 140 commands 273 Adobe Exchange 4 Screen 140 filenames 272 Adobe Flex Builder 190, 192 Tint 141 saving as scripts 274 Adobe PDF files, exporting 236 Vivid Light 140 saving files 271 Adobe Product Improvement Program 1...
Page 293 USING FIREWORKS CS4 Last updated 3/8/2011 Index brushes sampling 56 commands stroke options 111 setting preferences 279 batch processing 273 Brush-size Painting Cursors preference 280 color bar 102 Commands menu 276 Burn tool 57 cycling through color models 104 managing saved commands 277 Button Editor color blending 105 Community help 2...
Page 294 237 restoring 22 pie charts 73 embossing 118 Delete Objects While Cropping polygons 72 EPS files, opening in Adobe Fireworks 9 preference 279 rounded rectangles 72, 73 Exchange 4 Delete Workspace command 25 spirals 74 Expand Stroke command 88...
Page 295 Index Flash grid Feather command 61 exporting to 248 altering cell size 280 feathering 61 importing Adobe Fireworks PNG to 248 grouping objects 51 pixel selections 42 Flash SWF movies 277 guides 32 file formats Flex integration 190, 191, 192...
Page 296 Illustrator Selective JPEG compression 225 Photoshop plug-ins 120 exporting to 254 Sharpen JPEG Edges command 226 reordering 121 importing files into Adobe Fireworks 256 JPEG, saving 15 locking layers 125 Image Editing panel 55 L-shape tool 73 image maps 171...
Page 297 260 See also panels Smart Guides 34 grouped layers 127 panel menu, displaying 18 stacking 52 importing files into Adobe Fireworks 258 panels 16 ungrouping 51 layer masks 133 See also palettes objects, locating pasted 11 patterns 282...
Page 298 USING FIREWORKS CS4 Last updated 3/8/2011 Index points PSD files 9 saving 227 adding 80 opening from Adobe Fireworks 9 animations 229 bending adjacent segments 82 Punch command 87 images 227 changing adjacent segments 82 saving documents 13 converting 79...
Page 299 9-slice scaling 49 changing color 161 turning on and off 200 components 149 creating 158 States panel 199 creating 146 editing Adobe Fireworks table slices from straight segments, editing 79 defined 146 Dreamweaver 242 Stroke Color box 110 deleting 148 exporting 228...
Page 300 WBMP files 9 adding to strokes 116 See also opacity exporting to 217 thumbnails transparent areas 222 opening from Adobe Fireworks 9 selecting masks with 134 trimming the canvas 32 saving 15 TIFF file format, choosing 217 TrueType fonts 92...

This manual is also suitable for:

Fireworks cs4

Adobe 65011817 - Fireworks CS4 - Mac Using Manual

Chapter 1: Resources

Chapter 2: Fireworks Basics

Chapter 3: Workspace

Chapter 4: Selecting and Transforming Objects

Chapter 5: Working with Bitmaps

Chapter 6: Working with Vector Objects

Chapter 7: Working with Text

Chapter 8: Applying Color, Strokes, and Fills

Chapter 9: Using Live Filters

Chapter 10: Layers, Masking, and Blending

Chapter 11: Styles, Symbols, and Urls

Chapter 12: Slices, Rollovers, and Hotspots

Chapter 13: Creating Buttons and Pop-Up Menus

Chapter 14: Prototyping Websites and Application Interfaces

Chapter 15: Creating Animations

Chapter 16: Creating Slide Shows

Chapter 17: Optimizing and Exporting

Chapter 18: Using Fireworks with Other Applications

Chapter 19: Automating Tasks

Chapter 20: Preferences and Keyboard Shortcuts

Index

Quick Links

Related Manuals for Adobe 65011817 - Fireworks CS4 - Mac

Summary of Contents for Adobe 65011817 - Fireworks CS4 - Mac

This manual is also suitable for:

Table of Contents