Adobe 65011817 User Guide
Adobe 65011817 - Fireworks CS4 - Mac Manual
 |
UPC - 883919157368
View all Adobe 65011817 manuals
Add to My Manuals
Save this manual to your list of manuals |
Adobe 65011817 manual content summary:
- Adobe 65011817 | User Guide - Page 1
Using ADOBE® FIREWORKS® CS4 - Adobe 65011817 | User Guide - Page 2
visit http://creativecommons.org/licenses/by-nc-sa/3.0/ Adobe, the Adobe logo, Adobe AIR, Acrobat, ActionScript, Creative Suite, Director, Dreamweaver, Fireworks, Flash, Flex, Flex Builder, Freehand, GoLive, HomeSite, Illustrator, InCopy, InDesign, Photoshop, Reader, Version Cue, and XMP are either - Adobe 65011817 | User Guide - Page 3
Contents Chapter 1: Resources Activation and registration 1 Help and support ...2 Services, downloads, and extras 3 What's new in Fireworks CS4 4 8 Create Fireworks PNG files from HTML files 10 Insert objects into a Fireworks document 10 Saving Fireworks files 13 Chapter 3: Workspace Workspace - Adobe 65011817 | User Guide - Page 4
Live Filters Applying Live Filters 117 Edit and customize Live Filters 121 Chapter 10: Layers, masking, and blending Layers ...123 Masking ...128 Blending and based layouts 189 Prototyping Flex applications 191 Prototyping Adobe AIR applications 194 Chapter 15: Creating animations Animation - Adobe 65011817 | User Guide - Page 5
206 Customize a slide show 207 Create a custom Fireworks album player 209 Chapter 17: Optimizing and exporting Use the Export Wizard Flash 248 Working with FreeHand and Illustrator 253 Working with Photoshop 257 Working with Director 261 About Adobe Bridge 263 Share image metadata with Adobe - Adobe 65011817 | User Guide - Page 6
USING FIREWORKS CS4 vi Contents Work with configuration files 283 About reinstalling Fireworks 284 View package contents (Mac OS only 285 Index ...286 Last updated 3/8/2011 - Adobe 65011817 | User Guide - Page 7
Photoshop®, Adobe Illustrator®, Adobe Dreamweaver®, and Adobe Flash® Professional software. Activation and registration Help with installation For help with installation issues, see the Installation Support Center at www.adobe.com/go/cs4install. License activation During the installation process - Adobe 65011817 | User Guide - Page 8
• Font installation • Troubleshooting • Customer support • Legal notices Help and support Community Help Community Help is an integrated environment on Adobe.com that gives you access to community-generated content moderated by Adobe and industry experts. Comments from users help guide you to an - Adobe 65011817 | User Guide - Page 9
's Help and Support page (upper-right corner of the page) • Local and web Help (top of the Help interface) For more information on accessing product help, see http://help.adobe.com/en_US/CommunityHelp/. If you are working in Adobe InDesign, Photoshop, Illustrator, Flash, Fireworks, or Dreamweaver - Adobe 65011817 | User Guide - Page 10
Adobe downloads Visit www.adobe.com/go/downloads to find free updates, tryouts, and other useful software. Adobe Labs Adobe Labs at www.adobe needs and expectations of the community. Adobe TV Visit Adobe TV at http://tv.adobe.com to view instructional and inspirational videos. Extras The installation - Adobe 65011817 | User Guide - Page 11
-fidelity, interactive, secure PDF documents from your Fireworks design comps for enhanced client communication. 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 - Adobe 65011817 | User Guide - Page 12
containing HTML tables and JavaScript code so you can use them on the web. For a video tutorial that introduces Fireworks basics, see www.adobe.com/go/lrvid4032_fw. Draw and edit vector and bitmap objects The Fireworks Tools panel includes distinct sections containing tools for drawing and editing - Adobe 65011817 | User Guide - Page 13
USING FIREWORKS CS4 7 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 - Adobe 65011817 | User Guide - Page 14
the Clipboard into the new document. 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 - Adobe 65011817 | User Guide - Page 15
files created in other applications or file formats, including Photoshop®, Adobe FreeHand®, Adobe Illustrator®, WBMP, EPS, JPEG, GIF, and animated GIF files JPEG, PICT, and TIFF formats. You can download this extension from http://www.adobe.com/cfusion/exchange/index.cfm?event=extensionDetail&loc= - Adobe 65011817 | User Guide - Page 16
CS4 10 vector objects, bitmap images, or text from any application that supports dragging. ❖ From the other application, drag the object or these formats can be pasted from the Clipboard: • Adobe FreeHand 7 or later • Adobe Illustrator • PNG • PICT (Mac OS) • DIB (Windows) • - Adobe 65011817 | User Guide - Page 17
USING FIREWORKS CS4 11 Fireworks basics • EPS • WBMP • TXT • RTF 1 In the other application, copy the object or text that you want to paste. 2 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: • If - Adobe 65011817 | User Guide - Page 18
OS, Fireworks automatically looks for Photoshop Acquire plug-ins in that folder. Direct Fireworks to Photoshop Acquire plug-ins 1 In Fireworks to import. The user interface for your camera software appears. 4 Follow the instructions to apply settings. Import an image from a digital camera (Mac OS) 1 - Adobe 65011817 | User Guide - Page 19
most TWAIN modules or Photoshop Acquire plug-ins, additional dialog boxes prompt you to set other options. 4 Follow the instructions to apply settings. back up all open Fireworks documents. Download the utility from Adobe AIR Marketplace at http://www.adobe.com/cfusion/exchange/index.cfm?event= - Adobe 65011817 | User Guide - Page 20
USING FIREWORKS CS4 14 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 1 - Adobe 65011817 | User Guide - Page 21
15 Chapter 3: Workspace Workspace basics 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 - Adobe 65011817 | User Guide - Page 22
USING FIREWORKS CS4 16 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 - Adobe 65011817 | User Guide - Page 23
in all of them. A B C D E G F H Default Illustrator workspace A. Tabbed Document windows B. Application bar C. Workspace switcher D. Panel title the options bar in Photoshop. (Adobe Flash®, Adobe Dreamweaver®, and Adobe Fireworks® have no Control panel.) • Flash, Dreamweaver, and Fireworks - Adobe 65011817 | User Guide - Page 24
Window > Application Frame to toggle it on or off. (In Flash, the Application frame is on permanently. Dreamweaver does not use an Application frame.) Hide or show all panels • (Illustrator, Adobe InCopy®, Adobe InDesign®, Photoshop, Fireworks)To hide or show all panels, including the Tools panel - Adobe 65011817 | User Guide - Page 25
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 Layout button on the Application bar. Note: Some products do not support this functionality. However, your product may have Cascade and Tile commands - Adobe 65011817 | User Guide - Page 26
USING FIREWORKS CS4 20 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 - Adobe 65011817 | User Guide - Page 27
area (the empty space next to the tabs). • To resize a panel, drag any side of the panel. Some panels, such as the Color panel in Photoshop, cannot be resized by dragging. Manipulate panels collapsed to icons You can collapse panels to icons to reduce clutter on the workspace. In some cases - Adobe 65011817 | User Guide - Page 28
panels). Restore the default workspace • Select the default, Essentials workspace from the workspace switcher in the Application bar. • (Photoshop) Select Window > Workspace > Essentials (Default). • (InDesign, InCopy) Select Window > Workspace > Reset [Workspace Name]. Last updated 3/8/2011 - Adobe 65011817 | User Guide - Page 29
use to access the Connections panel, logging in automatically connects you to services such as ConnectNow meetings. 1 In Adobe InDesign, Photoshop, Illustrator, Flash, Fireworks, or Dreamweaver, choose Window > Extensions > Connections. 2 Enter your Adobe ID and password. (If you lack an ID or can - Adobe 65011817 | User Guide - Page 30
ConnectNow application window. For complete instructions on using ConnectNow, see http://help.adobe.com/en_US/Acrobat.com/ConnectNow/index.html. the configuration you want to save, do one of the following: • (Photoshop, Illustrator) Choose Window > Workspace > Save Workspace. • (InDesign, InCopy) - Adobe 65011817 | User Guide - Page 31
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. • (Illustrator) Choose Window > Workspace > Manage Workspaces, select the workspace, and then click the Delete icon - Adobe 65011817 | User Guide - Page 32
USING FIREWORKS CS4 26 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 - Adobe 65011817 | User Guide - Page 33
USING FIREWORKS CS4 27 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: Main Displays a toolbar above the document window with buttons for common file - Adobe 65011817 | User Guide - Page 34
USING FIREWORKS CS4 28 Workspace Zoom and pan in and out AB C 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 - Adobe 65011817 | User Guide - Page 35
USING FIREWORKS CS4 29 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 ❖ Alt-drag (Windows) or - Adobe 65011817 | User Guide - Page 36
USING FIREWORKS CS4 30 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. - Adobe 65011817 | User Guide - Page 37
, some strokes or fills may appear slightly different after resampling. This occurs because the pixels that compose the stroke or fill must be redrawn. Note: Guides, hotspot objects, and slice objects are resized when the document's image size is changed. You can alter the size of a bitmap image by - Adobe 65011817 | User Guide - Page 38
Delete Objects When Cropping on the Edit tab of the Preferences dialog box before cropping. Use rulers, guides, and the grid Rulers, guides, and the grid are drawing aids that help you to place and align objects. Guides are lines that you drag onto the document canvas from the rulers. You can use - Adobe 65011817 | User Guide - Page 39
apply to all pages in the document. This extension is available at http://www.adobe.com/cfusion/exchange/index.cfm?event=extensionDetail&loc=en_us&extid=1333018. To change grid size or guide and grid color, see "Guides and Grids preferences" on page 280. Show and hide rulers ❖ Select View > Rulers - Adobe 65011817 | User Guide - Page 40
> Show Grid. Snap objects to guides or to the grid ❖ Select View > Guides > Snap To Guides or View > Grid > Snap To Grid. Lock or unlock all guides ❖ Select View > Guides > Lock Guides. Remove a guide ❖ Drag the guide off the canvas. Display distance between guides ❖ Press Shift when the pointer is - Adobe 65011817 | User Guide - Page 41
USING FIREWORKS CS4 35 Workspace 2 Drag the Undo marker up or down. Repeat actions 1 Perform the actions. 2 Do one of the following to highlight the actions you want to repeat in the History panel: • Click an action to highlight it. • Control-click (Windows) or Command-click (Mac OS) to highlight - Adobe 65011817 | User Guide - Page 42
36 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 - Adobe 65011817 | User Guide - Page 43
USING FIREWORKS CS4 37 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. 1 Select the Subselection tool. 2 Make a selection. 3 Do one of the - Adobe 65011817 | User Guide - Page 44
USING FIREWORKS CS4 38 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 - Adobe 65011817 | User Guide - Page 45
USING FIREWORKS CS4 39 Selecting and transforming objects Options for bitmap selection tools Various options are available for the tools used to select bitmaps. Edge options Hard Creates a marquee selection with a defined edge. Anti-alias Prevents jagged edges in the marquee selection. Feather - Adobe 65011817 | User Guide - Page 46
USING FIREWORKS CS4 40 Selecting and transforming objects Hold down Shift to constrain Polygon Lasso marquee segments to 45° increments. 4 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 1 Select - Adobe 65011817 | User Guide - Page 47
. • Use the arrow keys to nudge the marquee in 1-pixel increments. • Press Shift and use the arrow keys to move the marquee in 10-pixel increments. Add pixels to an existing selection 1 Select any bitmap selection tool. 2 Hold down Shift and draw additional selection marquees. Last updated 3/8/2011 - Adobe 65011817 | User Guide - Page 48
USING FIREWORKS CS4 42 Selecting and transforming objects 3 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 - Adobe 65011817 | User Guide - Page 49
USING FIREWORKS CS4 43 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 - Adobe 65011817 | User Guide - Page 50
any Bitmap tool. If you hold down the modifier keys noted below, you can move and copy selections with the arrow keys. To move in 10-pixel increments, also hold down Shift. Move the contents of a marquee selection 1 Make a pixel selection with a bitmap selection tool. 2 Do one of the following - Adobe 65011817 | User Guide - Page 51
USING FIREWORKS CS4 45 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. • Enter the object's x and - Adobe 65011817 | User Guide - Page 52
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. A B A. Center point B. Transform handles Object rotated, scaled, skewed, distorted, and flipped vertically - Adobe 65011817 | User Guide - Page 53
USING FIREWORKS CS4 47 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. 1 Select the objects on the - Adobe 65011817 | User Guide - Page 54
USING FIREWORKS CS4 48 Selecting and transforming objects 2 Move the pointer outside the object until the rotation pointer appears. 3 Drag to rotate the object. To constrain rotation to 15° increments relative to the horizon, Shift-drag the pointer. 4 Double-click inside the window or press - Adobe 65011817 | User Guide - Page 55
scaling, see the article by Sarthak Singhal at http://www.adobe.com/devnet/fireworks/articles/9-slice_scaling.html. To achieve the most mode. 2 In the Properties panel, select Enable for 9-slice Scaling Guides. 3 Move the guides and place them appropriately on the button or symbol. Make sure that - Adobe 65011817 | User Guide - Page 56
1, Fireworks prompts you to ungroup it. Do so only if you have finished adjusting Auto Shape control points. 3 On the canvas, arrange the slicing guides to best retain the geometry of the object. (For details, see "9-slice scaling" on page 49.) 4 Transform the object by dragging a corner or side - Adobe 65011817 | User Guide - Page 57
USING FIREWORKS CS4 51 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 Group objects Treats objects as one or protects each object's relationship to the - Adobe 65011817 | User Guide - Page 58
USING FIREWORKS CS4 52 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. • Choose Select > Superselect. - Adobe 65011817 | User Guide - Page 59
USING FIREWORKS CS4 53 Selecting and transforming objects 2 Choose one of the following options: Left Aligns the objects to the leftmost selected object. Center Vertical Aligns the center points of the objects along a vertical axis. Right Aligns the objects to the rightmost selected object. Top - Adobe 65011817 | User Guide - Page 60
of bitmap graphics include photographs, scanned images, and graphics created from paint programs. 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 - Adobe 65011817 | User Guide - Page 61
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 1 Select the Pencil tool . 2 Set tool options in the Property inspector: Anti-aliased Smoothes the edges of - Adobe 65011817 | User Guide - Page 62
USING FIREWORKS CS4 56 Working with bitmaps Apply a gradient fill to a pixel selection 1 Make the selection. 2 Click the Paint Bucket tool in the Tools panel and select the Gradient tool 3 Set the fill attributes in the Property inspector. 4 Click the pixel selection to apply the fill. from the - Adobe 65011817 | User Guide - Page 63
USING FIREWORKS CS4 57 Working with bitmaps Bounding box 4 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. - Adobe 65011817 | User Guide - Page 64
. The Blur tool lets you emphasize parts of an image by selectively blurring the focus of elements. The Sharpen tool is useful for repairing scanning problems or out-of-focus photographs. The Smudge tool lets you gently blend colors. 1 Select the Blur, Sharpen, or Smudge tool. 2 Set brush options in - Adobe 65011817 | User Guide - Page 65
USING FIREWORKS CS4 59 Working with bitmaps 3 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 - Adobe 65011817 | User Guide - Page 66
USING FIREWORKS CS4 60 Working with bitmaps Replace colors in bitmap objects Original photograph; after using the Replace Color tool Replace a color by using the color swatch 1 In the Bitmap section of the Tools panel, select the Replace Color tool Rubber Stamp tool until a pop-up menu appears - Adobe 65011817 | User Guide - Page 67
Selection dialog box, type a feather radius value. The default value of 10 is good for most practical purposes. Alternatively select a value for the feather and that do not permanently alter pixels, use Live Filters. Adobe recommends using filters as Live Filters whenever possible. Note: Although - Adobe 65011817 | User Guide - Page 68
USING FIREWORKS CS4 62 Working with bitmaps 4 Click the thumbnail of the new bitmap object in the Layers panel to select the bitmap object. 5 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 - Adobe 65011817 | User Guide - Page 69
sliders under the Histogram: • The right slider adjusts the highlights using values from 255 to 0. • The center slider adjusts the midtones using values from 10 to 0. • The left slider adjusts the shadows using values from 0 to 255. Note: The shadow value cannot be higher than the highlight value - Adobe 65011817 | User Guide - Page 70
. 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: The horizontal axis Represents the original brightness of the pixels, shown in the Input box The vertical axis Represents the new - Adobe 65011817 | User Guide - Page 71
Delete a point along the curve ❖ Drag the point off the grid. Note: You cannot delete the end points of the curve. Adjust the tonal balance manually 1 Open the Levels or Curves dialog box, and select a color channel from the Channel pop-up menu. 2 Select the appropriate eyedropper to reset the tonal - Adobe 65011817 | User Guide - Page 72
USING FIREWORKS CS4 66 Working with bitmaps 2 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. 3 Drag the - Adobe 65011817 | User Guide - Page 73
USING FIREWORKS CS4 67 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 - Adobe 65011817 | User Guide - Page 74
USING FIREWORKS CS4 68 Working with bitmaps Change an object to sepia tone 1 Select the object. 2 Select Commands > Creative > Convert To Sepia Tone. Blurring and sharpening bitmaps Blurring options Blur Softens the focus of selected pixels. Blur More Blurs about three times as much as Blur. - Adobe 65011817 | User Guide - Page 75
USING FIREWORKS CS4 69 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 - Adobe 65011817 | User Guide - Page 76
USING FIREWORKS CS4 70 Working with bitmaps An increase in radius results in a greater area of sharp contrast surrounding each pixel edge. 5 Drag the Threshold slider to select a threshold of 0 to 255. Values between 2 and 25 are most commonly used. An increase in threshold sharpens only those - Adobe 65011817 | User Guide - Page 77
does not work for paths. Resizing the object can make the line blurred again. Note: You cannot undo the Snap To Pixel command. Scenario Problem Solution A rectangle drawn using Snap To Pixels is The rectangle doesn't snap to pixels. scaled with Scale Strokes and Effects option disabled in the - Adobe 65011817 | User Guide - Page 78
USING FIREWORKS CS4 72 Working with vector objects Add arrowheads to a line 1 Draw or select a line. 2 Select Commands > Creative > Add Arrowheads. 3 Set the following: • Select Add To Start and Add To End as necessary and set the arrowhead style. • Select Apply Stroke and Solid Fill as necessary - Adobe 65011817 | User Guide - Page 79
USING FIREWORKS CS4 73 Working with vector objects Draw a star 1 In the Vector section of the Tools panel, select the Polygon tool. 2 In the Property inspector, select Star from the Shape pop-up menu. 3 In the Sides box, enter the number of points for the star. 4 In the Angle box, select - Adobe 65011817 | User Guide - Page 80
numeric control over a selected Auto Shape or to insert another Auto Shape into your document. Note: This panel only supports Auto Shapes that appear in the Tools panel. It does not support third-party Auto Shapes or those in the Shapes panel (Window > Auto Shapes). The properties that you can - Adobe 65011817 | User Guide - Page 81
USING FIREWORKS CS4 75 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 - Adobe 65011817 | User Guide - Page 82
USING FIREWORKS CS4 76 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. • To switch the units from - Adobe 65011817 | User Guide - Page 83
to Fireworks Add new Auto Shapes from the Adobe® Fireworks® Exchange website. New Auto Shapes In the Exchange website, follow the onscreen instructions for adding new shapes. Free-form shapes wide variety of brush stroke categories, including Air Brush, Calligraphy, Charcoal, Crayon, and Unnatural - Adobe 65011817 | User Guide - Page 84
USING FIREWORKS CS4 78 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 - Adobe 65011817 | User Guide - Page 85
USING FIREWORKS CS4 79 Working with vector objects 3 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. 4 Continue plotting points. If you drag a new point, you produce a curve point; if you - Adobe 65011817 | User Guide - Page 86
USING FIREWORKS CS4 80 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 1 In the Tools panel, select the Pen tool. 2 Click a curve point on - Adobe 65011817 | User Guide - Page 87
USING FIREWORKS CS4 81 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. • Double-click a curve point on a selected object with - Adobe 65011817 | User Guide - Page 88
USING FIREWORKS CS4 82 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 1 Using the Subselection tool, select a corner point. 2 Alt-drag (Windows) - Adobe 65011817 | User Guide - Page 89
USING FIREWORKS CS4 83 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 - Adobe 65011817 | User Guide - Page 90
USING FIREWORKS CS4 84 Working with vector objects Pull a selected path When the pointer is directly over the path, you can pull the path. 1 In the Tools panel, select the Freeform tool . 2 Move the pointer directly over the selected path. 3 Drag the path. Push a selected path When the pointer is - Adobe 65011817 | User Guide - Page 91
USING FIREWORKS CS4 85 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. • While holding down the mouse button, press the Left Arrow - Adobe 65011817 | User Guide - Page 92
USING FIREWORKS CS4 86 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 - Adobe 65011817 | User Guide - Page 93
USING FIREWORKS CS4 87 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. 1 Select the path object that defines the area you want to remove. - Adobe 65011817 | User Guide - Page 94
USING FIREWORKS CS4 88 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: - Adobe 65011817 | User Guide - Page 95
USING FIREWORKS CS4 89 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 - Adobe 65011817 | User Guide - Page 96
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. Enter text Use the Text tool and the options in the Property inspector to enter, format, and edit text in your graphics. Note: If - Adobe 65011817 | User Guide - Page 97
About fonts 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 - Adobe 65011817 | User Guide - Page 98
to the fonts installed on your system, you can also use the fonts installed in these folders: Windows Program Files/Common Files/Adobe/Fonts Mac OS Library/Application Support/Adobe/Fonts If you install a Type 1, TrueType, OpenType, or CID font into the local Fonts folder, the font appears in - Adobe 65011817 | User Guide - Page 99
USING FIREWORKS CS4 93 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 1 Choose a family from the Font - Adobe 65011817 | User Guide - Page 100
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 - Adobe 65011817 | User Guide - Page 101
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 while pressing the Up Arrow or Down Arrow keys to adjust leading by increments of 10. 2 To change the type of leading unit, select % or PX (pixels) from - Adobe 65011817 | User Guide - Page 102
USING FIREWORKS CS4 96 Working with text 2 Select an orientation option: Horizontal Left to Right The default setting. Vertical Right to Left Orients text vertically, flowing from top to bottom. Multiple lines of text separated by returns are displayed as columns that flow from right to left. To - Adobe 65011817 | User Guide - Page 103
the text edges and the background • Strength Determines how much the text edges blend into the background 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 - Adobe 65011817 | User Guide - Page 104
USING FIREWORKS CS4 98 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. Strokes, fills, - Adobe 65011817 | User Guide - Page 105
USING FIREWORKS CS4 99 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 - Adobe 65011817 | User Guide - Page 106
select Modify > 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 - Adobe 65011817 | User Guide - Page 107
USING FIREWORKS CS4 101 Working with text More Help topics "Type preferences" on page 280 Select a replacement font 1 Open a document with missing fonts, and select a missing font from the Change Missing Font list. 2 Do one of the following: • Select a replacement font from the To list. • Click - Adobe 65011817 | User Guide - Page 108
102 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 - Adobe 65011817 | User Guide - Page 109
USING FIREWORKS CS4 103 Applying color, strokes, and fills 2 Select Window > Swatches. 3 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 - Adobe 65011817 | User Guide - Page 110
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. Apply color to a selected vector object 1 In the - Adobe 65011817 | User Guide - Page 111
USING FIREWORKS CS4 105 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 1 Click the fill color box on the Selector tab of the Color Palette - Adobe 65011817 | User Guide - Page 112
USING FIREWORKS CS4 106 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 - Adobe 65011817 | User Guide - Page 113
USING FIREWORKS CS4 107 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 - Adobe 65011817 | User Guide - Page 114
see "Make areas transparent" on page 222. Note: Not all browsers support PNG files. Kuler panel About the Kuler panel The Kuler™ panel is your panel is available in Adobe Photoshop® CS4, Adobe Flash® Professional CS4, Adobe InDesign® CS4, Adobe Illustrator® CS4, and Adobe Fireworks® CS4. The panel - Adobe 65011817 | User Guide - Page 115
Color/Recolor Artwork dialog box, rather than the Create panel. For details, see Illustrator Help. Add a theme to the Swatches panel of your application 1 In at the bottom of the panel. • Upload the theme to the Kuler service by clicking the Upload button at the bottom of the panel. Create panel - Adobe 65011817 | User Guide - Page 116
icon indicates the Stroke Color box in the Tools panel, the Property inspector, and the Color Mixer. To apply a stroke to a bitmap object, use Photoshop Live Effects and select the Stroke attribute. (See "Apply Live Filters" on page 118.) Change stroke attributes of selected objects Do one of the - Adobe 65011817 | User Guide - Page 117
USING FIREWORKS CS4 111 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 1 Select Stroke Options from the Stroke Category pop-up menu in the Property inspector. 2 Click - Adobe 65011817 | User Guide - Page 118
USING FIREWORKS CS4 112 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. 3 Click OK. Modify the brush tip 1 On the Shape tab, select - Adobe 65011817 | User Guide - Page 119
USING FIREWORKS CS4 113 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 - Adobe 65011817 | User Guide - Page 120
USING FIREWORKS CS4 114 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 1 Select an object that has - Adobe 65011817 | User Guide - Page 121
. 3 For a feathered edge, select the number of pixels (between 0 and 100) on each side of the edge that is to be feathered. The default is 10. The higher the level, the more feathering occurs. Last updated 3/8/2011 - Adobe 65011817 | User Guide - Page 122
USING FIREWORKS CS4 116 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: • Select None from the Fill Options pop- - Adobe 65011817 | User Guide - Page 123
117 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 - Adobe 65011817 | User Guide - Page 124
USING FIREWORKS CS4 118 Using Live Filters Apply Live Filters Apply a Live Filter to selected objects 1 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 - Adobe 65011817 | User Guide - Page 125
USING FIREWORKS CS4 119 Using Live Filters An object, with Inset Emboss, and with Raised Emboss 1 Click the plus (+) icon next to the Filters label in the Property inspector, and then select an emboss option from the pop-up menu. 2 Edit the filter settings. If you want the original object to - Adobe 65011817 | User Guide - Page 126
them from an object. Use the Filters menu to apply filters and Adobe Photoshop® plug-ins only when you are certain that you will not want to change the path to the plug-ins. Then restart Fireworks. 4 To apply the Photoshop plug-in to a selected object, in the Property inspector, click the plus (+) - Adobe 65011817 | User Guide - Page 127
USING FIREWORKS CS4 121 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 - Adobe 65011817 | User Guide - Page 128
USING FIREWORKS CS4 122 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 - Adobe 65011817 | User Guide - Page 129
, 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 - Adobe 65011817 | User Guide - Page 130
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 - Adobe 65011817 | User Guide - Page 131
USING FIREWORKS CS4 125 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 - Adobe 65011817 | User Guide - Page 132
USING FIREWORKS CS4 126 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 ❖ - Adobe 65011817 | User Guide - Page 133
, and then click outside the window or press Enter. Note: The new name is used when the slice is exported. About importing Photoshop grouped layers Photoshop files that contain layers are imported with each layer placed as a separate object on a single Fireworks layer. Grouped layers are imported as - Adobe 65011817 | User Guide - Page 134
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 . About bitmap masks Fireworks bitmap masks are like Photoshop layer masks in that the pixels of the mask object affect the visibility - Adobe 65011817 | User Guide - Page 135
USING FIREWORKS CS4 129 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. • Creating an empty mask. Empty - Adobe 65011817 | User Guide - Page 136
USING FIREWORKS CS4 130 Layers, masking, and blending If you are masking multiple objects, they must be grouped. 5 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 - Adobe 65011817 | User Guide - Page 137
USING FIREWORKS CS4 131 Layers, masking, and blending 4 Select the object into which you want to paste the contents. This object will be used as the mask (the clipping path). 5 Select Edit > Paste Inside. The objects you pasted appear to be inside or clipped by the mask object. Use text as a - Adobe 65011817 | User Guide - Page 138
USING FIREWORKS CS4 132 Layers, masking, and blending Fireworks applies an empty mask to the selected object. The Layers panel displays a mask thumbnail representing the empty mask. 3 (Optional) If the masked object is a bitmap, use one of the marquee or lasso tools to create a pixel selection. 4 - Adobe 65011817 | User Guide - Page 139
reveal or hide the remaining pixels of the masked object using the bitmap tools in the Tools panel. About importing and exporting Photoshop layer masks In Photoshop, you can mask images using layer masks or grouped layers. Fireworks lets you import images that employ layer masks while retaining the - Adobe 65011817 | User Guide - Page 140
USING FIREWORKS CS4 134 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). 1 Shift-click two or more overlapping - Adobe 65011817 | User Guide - Page 141
USING FIREWORKS CS4 135 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 1 Using the Pointer tool, select the mask on the canvas. 2 Drag the mask to a - Adobe 65011817 | User Guide - Page 142
USING FIREWORKS CS4 136 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 - Adobe 65011817 | User Guide - Page 143
USING FIREWORKS CS4 137 Layers, masking, and blending 2 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 - Adobe 65011817 | User Guide - Page 144
USING FIREWORKS CS4 138 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 - Adobe 65011817 | User Guide - Page 145
USING FIREWORKS CS4 139 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 ❖ Select Alpha Channel in the - Adobe 65011817 | User Guide - Page 146
USING FIREWORKS CS4 140 Layers, masking, and blending Linear Burn Inspects each channel of the current and background layers and darkens the background color to reflect the blend color by decreasing the brightness. The overall effect is to darken the image. The neutral color is white, so Linear - Adobe 65011817 | User Guide - Page 147
base color pixels, including those pixels in the background image. For general information and examples regarding blending modes-in particular, Photoshop blending modes-see the following website: www.pegtop.net/delphi/articles/blendmodes/. Examples of blending modes Original image Normal Multiply - Adobe 65011817 | User Guide - Page 148
USING FIREWORKS CS4 142 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 - Adobe 65011817 | User Guide - Page 149
. By default, all three panels are organized in the Assets panel group. For a video tutorial on using styles and symbols in Fireworks, see www.adobe.com/go/lrvid4033_fw. Styles You can save and reapply a set of predefined fill, stroke, filter, and text attributes by creating a style. When you apply - Adobe 65011817 | User Guide - Page 150
USING FIREWORKS CS4 144 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, - Adobe 65011817 | User Guide - Page 151
USING FIREWORKS CS4 145 Styles, symbols, and URLs More Help topics "Edit and customize Live Filters" on page 121 Edit a style 1 Choose Select > Deselect to deselect any objects on the canvas. 2 Double-click a style in the Styles panel. 3 In the Edit Style dialog box, select or deselect attributes - Adobe 65011817 | User Guide - Page 152
USING FIREWORKS CS4 146 Styles, symbols, and URLs 3 Deselect the original object, and then select the objects to which you want to apply the new attributes. 4 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 - Adobe 65011817 | User Guide - Page 153
2 Type a name for the symbol in the Name box. 3 Select a symbol type. 4 To scale the symbol without distorting its geometry, select Enable 9-slice Scaling Guides. (See "9-slice scaling" on page 49.) 5 To store the symbol so that it can be used in multiple documents, select the Save To Common Library - Adobe 65011817 | User Guide - Page 154
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" on page 49.) Switch from symbol editing to page editing When you edit a symbol - Adobe 65011817 | User Guide - Page 155
USING FIREWORKS CS4 149 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. - Adobe 65011817 | User Guide - Page 156
Fireworks CS4\Common Library\Custom Symbols • For Mac® OS: /Application Support/Adobe/Fireworks CS4/Common Library/Custom Symbols 9 Click the plus button to add an element name. 10 In the Element Name box, type the name of the element to customize. For example, to customize the text field - Adobe 65011817 | User Guide - Page 157
\Fireworks CS4\Common Library\Custom Symbols • (Windows Vista) \Users\\AppData\Roaming\Adobe\Fireworks CS4\Common Library\Custom Symbols • (Mac OS) /Application Support/Adobe/Fireworks CS4/Common Library/Custom Symbols To create a component symbol, a JavaScript file must be - Adobe 65011817 | User Guide - Page 158
USING FIREWORKS CS4 152 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 - Adobe 65011817 | User Guide - Page 159
USING FIREWORKS CS4 153 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. 1 Open a Fireworks document. 2 Select a folder - Adobe 65011817 | User Guide - Page 160
scaling for nested symbols can be viewed only through the Library panel. Double-clicking a symbol on the canvas does not display the 9-Slice scale guides. Enable 9-slice scaling for an existing symbol 1 Move to the view where you created the symbol. 2 Select the Symbol in the Document Library panel - Adobe 65011817 | User Guide - Page 161
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 - Adobe 65011817 | User Guide - Page 162
, symbols, and URLs URLs.htm and any new libraries you create are stored in the Adobe/Fireworks CS4/URL Libraries folder in your userspecific Application Data folder (Windows) or Application Support folder (Mac OS). For information on locating these folders, see "Work with configuration files" on - Adobe 65011817 | User Guide - Page 163
USING FIREWORKS CS4 157 Styles, symbols, and URLs Export URLs 1 Select Export URLs from the URL panel Options menu. 2 Enter a filename and click Save. An HTML file is created that contains the URLs you have exported. Import URLs 1 Select Import URLs from the URL panel Options menu. 2 Select an - Adobe 65011817 | User Guide - Page 164
the basic building blocks for creating interactivity in Adobe® Fireworks®. Slices are web objects that ultimately advantages: Optimizes images For fastest downloading. Adds interactivity So images can respond based on a selected object. Use slice guides (the lines extending from the slice object) - Adobe 65011817 | User Guide - Page 165
USING FIREWORKS CS4 159 Slices, rollovers, and hotspots Draw a rectangular slice object 1 Select the Slice tool . 2 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 - Adobe 65011817 | User Guide - Page 166
web objects in your document by using the Layers panel and the Tools panel. When you turn slice visibility off for the whole document, slice guides are hidden too. View and select slices The Web Layer displays all the web objects in the document. 1 Select Window > Layers. 2 Expand the Web Layer - Adobe 65011817 | User Guide - Page 167
also resized. You can also use the Property inspector to resize and transform slices. Edit slices by moving slice guides Slice guides define the perimeter and position of slices. Slice guides that extend beyond slice objects define how the rest of the document is sliced upon export. You can change - Adobe 65011817 | User Guide - Page 168
slices can create overlapping slices. When slices overlap, the topmost slice takes precedence if interactivity is involved. To avoid overlapping slices, use slice guides to edit slices. ❖ To edit the shaped of a selected slice, do one of the following: • Select the Pointer or Subselection tool and - Adobe 65011817 | User Guide - Page 169
, 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 - Adobe 65011817 | User Guide - Page 170
USING FIREWORKS CS4 164 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 - Adobe 65011817 | User Guide - Page 171
USING FIREWORKS CS4 165 Slices, rollovers, and hotspots 6 Select the slice and place the pointer over the behavior handle. Note: You can select the slice while in any state. 7 Click the behavior handle and select Add Simple Rollover Behavior from the menu. 8 Click the Preview tab and test the - Adobe 65011817 | User Guide - Page 172
Slices, rollovers, and hotspots 9 From the Swap Image From pop-up menu, select the state you created in step 2, and click OK. 10 Preview and test the disjoint rollover. Apply multiple rollovers to a slice A slice triggering a rollover behavior and a disjoint rollover behavior 1 Drag a behavior - Adobe 65011817 | User Guide - Page 173
USING FIREWORKS CS4 167 Slices, rollovers, and hotspots Nav Bar Over Specifies the Over state for the currently selected slice when it is part of a navigation bar and optionally specifies the Preload images state and Include Over While Down state. Nav Bar Down Specifies a Down state for the - Adobe 65011817 | User Guide - Page 174
FIREWORKS CS4 168 Slices, rollovers, and hotspots 3 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 - Adobe 65011817 | User Guide - Page 175
USING FIREWORKS CS4 169 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 - Adobe 65011817 | User Guide - Page 176
USING FIREWORKS CS4 170 Slices, rollovers, and hotspots Option Description Slice # (1,2,3...) Slice # (01,02,03...) Slice # (A,B,C...) Slice # (a,b,c...) The element is labeled numerically or alphabetically, according to the style you select. row/column (r3_c2, r4_c7...) Row (r##) and Col - Adobe 65011817 | User Guide - Page 177
USING FIREWORKS CS4 171 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 - Adobe 65011817 | User Guide - Page 178
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. Exporting a sliced image map typically generates many graphic - Adobe 65011817 | User Guide - Page 179
USING FIREWORKS CS4 173 Slices, rollovers, and hotspots Create a hotspot by tracing one or more selected objects 1 Select multiple objects and then select Edit > Insert > Hotspot. 2 Click Single to create a single rectangular hotspot covering all objects or Multiple to create multiple hotspots ( - Adobe 65011817 | User Guide - Page 180
USING FIREWORKS CS4 174 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 - Adobe 65011817 | User Guide - Page 181
code. 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. Create - Adobe 65011817 | User Guide - Page 182
button's states is automatically filled with the appropriate graphics and text. • (Optional) Set the 9-slice scaling guides to keep the button shape from being distorted when it is resized. (See "Apply 9-slice guides to a symbol" on page 49.) • (Optional) Select the Text tool and create text for the - Adobe 65011817 | User Guide - Page 183
USING FIREWORKS CS4 177 Creating buttons and pop-up menus Button preset filter Raised Description The bevel appears to rise from the underlying objects. The button's colors lighten. Highlighted Inset Inverted The bevel appears to sink into the underlying objects. The bevel appears to sink into - Adobe 65011817 | User Guide - Page 184
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 - Adobe 65011817 | User Guide - Page 185
) text for a button symbol or instance Alternate (alt) text appears on or near an image placeholder while an image is downloading or in place of an image if it fails to download. It also replaces graphics if the user has the browser set to refrain from displaying images. Alt text can be - Adobe 65011817 | User Guide - Page 186
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. • To set the URL for a button symbol, select Active Area from - Adobe 65011817 | User Guide - Page 187
USING FIREWORKS CS4 181 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. 5 Repeat steps 3 and 4 until you have added all menu items. To delete a menu item, click the Delete Menu button. 6 Click - Adobe 65011817 | User Guide - Page 188
USING FIREWORKS CS4 182 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" on page 144. Note: The exact location of the Menu Bars - Adobe 65011817 | User Guide - Page 189
USING FIREWORKS CS4 183 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 - Adobe 65011817 | User Guide - Page 190
USING FIREWORKS CS4 184 Creating buttons and pop-up menus 2 Select the web object that is the trigger for the pop-up menu. 3 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 - Adobe 65011817 | User Guide - Page 191
a functioning site, simply export it to Adobe Flash®, Adobe Flex®, Adobe AIR™, or Adobe Dreamweaver®. See the following articles on Fireworks images. To align elements, use Smart Guides. For maximum flexibility, structure your layout with CSS. (See "Smart Guides" on page 34 and "Creating CSS- - Adobe 65011817 | User Guide - Page 192
for comments or printing, see "Export Adobe PDF files" on page 236. • To create a Flex application prototype, see "Prototyping Flex applications" on page 191. To create an Adobe AIR application, see "Create an Adobe AIR application" on page 194. Working with Fireworks pages A single Fireworks - Adobe 65011817 | User Guide - Page 193
USING FIREWORKS CS4 187 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 . • Right-click the panel, and choose New - Adobe 65011817 | User Guide - Page 194
USING FIREWORKS CS4 188 Prototyping websites and application interfaces Edit a page canvas Each page has a unique canvas, with independent canvas size, color, and image resolution. 1 Select a page from the Pages panel or the pages pop-up menu at the top of the document window. 2 Select Modify > - Adobe 65011817 | User Guide - Page 195
. For a video tutorial on creating CSS-based HTML page layouts, see www.adobe.com/go/lrvid4035_fw. Also see the following resources: • Tutorial on exporting CSS -compliant web designs with Fireworks CS4 at http://www.adobe.com/devnet/fireworks/articles/standards_compliant_design.html. About CSS page - Adobe 65011817 | User Guide - Page 196
USING FIREWORKS CS4 190 Prototyping websites and application interfaces Rule 2: Avoid overlapping of objects The export engine treats text, images, and rectangles as rectangular blocks. It examines the size and position of these objects to determine the logical rows and columns to place them in - Adobe 65011817 | User Guide - Page 197
USING FIREWORKS CS4 191 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 - Adobe 65011817 | User Guide - Page 198
® 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. These RIAs can run in a web browser using Flash Player or on the desktop as an Adobe AIR - Adobe 65011817 | User Guide - Page 199
, but are kept within the same MXML document inside a tag. Fireworks cannot define the styles in an external CSS file. Frames are not supported When creating designs and layouts for MXML output, do not use frames. If you want to have different designs in one document, use pages. More - Adobe 65011817 | User Guide - Page 200
or folder from your list, select the file or folder and click the Minus (-) button. The files or folders you select to include in the Adobe AIR package must belong to the root content folder. System Chrome and Transparent Specify the window style (or chrome) to use when users run the application - Adobe 65011817 | User Guide - Page 201
and select the image file you want to use. Only PNG files are supported for application icon images. Note: Selected custom images must reside in the based on the site name with an .air extension. This setting is required. Sign an Adobe AIR application with a digital certificate A digital signature - Adobe 65011817 | User Guide - Page 202
your file is created. Fireworks can export animations as animated GIF or Adobe Flash® SWF files. You can also import Fireworks animations directly into Flash for further editing. Zsolt Szekely's article in the Adobe Dev Center provides useful information on creating animated logos in Fireworks CS4 - Adobe 65011817 | User Guide - Page 203
USING FIREWORKS CS4 197 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 - Adobe 65011817 | User Guide - Page 204
pixels, that the object moves. The default is 72, but it has no limit. Movement is linear, and there are no key states (unlike in Flash and Adobe Director). Direction (Animate dialog box only) The direction, in degrees from 0 to 360º, in which the object moves. You can also change Movement and - Adobe 65011817 | User Guide - Page 205
in Fireworks CS4. You build animations by creating states, whose contents appear in the States panel. There, you can name the states, reorganize them, manually set the timing of the animation, and move objects from one state to another. Each state also has associated properties. By setting the state - Adobe 65011817 | User Guide - Page 206
USING FIREWORKS CS4 200 Creating animations 4 Press Enter, or click outside the panel. Hide states during playback Hidden states are not displayed during playback and are not exported. 1 Do one of the following: • Select Properties from the States panel Options menu. • Double-click the state - Adobe 65011817 | User Guide - Page 207
USING FIREWORKS CS4 201 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. 1 Select Commands > Document > Reverse States. 2 Do one of the following: • Select All - Adobe 65011817 | User Guide - Page 208
Editing option to select and edit all visible objects. Deselect to edit in the current page only. Tweening In Fireworks, tweening is a manual process that blends two or more instances of the same symbol, creating interim instances with interpolated attributes. Use tweening to create sophisticated - Adobe 65011817 | User Guide - Page 209
in the Optimize panel, even if you plan to import the animation into Flash as a SWF file or Fireworks PNG file. Optimize an animation After you panel Optimization compresses a file into the smallest package, making web downloading time much quicker. For more information on optimizing options, see " - Adobe 65011817 | User Guide - Page 210
USING FIREWORKS CS4 204 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 - Adobe 65011817 | User Guide - Page 211
USING FIREWORKS CS4 205 Creating animations 3 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. Steps The - Adobe 65011817 | User Guide - Page 212
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. Create a slide show 1 Select Commands > Create Slideshow. 2 Click the Add - Adobe 65011817 | User Guide - Page 213
for example, "My Journey." Description Enter a description. Player Select the type. Info icon (next to Player) Click to see additional information about the player, including the album and AlbumBook properties that the selected player type supports. Auto-Start Slideshow Start the slide show when the - Adobe 65011817 | User Guide - Page 214
for the slide show images and directories. Deselect to export only the images. XML Format Select the XML format exported as Create Slideshow or Adobe Media Gallery if you select Generate XML. Export path Location where the slide show and associated files are exported or generated. Width and Height - Adobe 65011817 | User Guide - Page 215
as the SWF file, create an XML file that has the following format: - Adobe 65011817 | User Guide - Page 216
allow users to click the images. clickAction The action to take when an image is clicked (open in new window, new tab, or let the player decide). Album node title Title of this particular album. description Description for the album. path Name of the folder that contains the images for this - Adobe 65011817 | User Guide - Page 217
USING FIREWORKS CS4 211 Creating slide shows width Width of the slide. height Height of the slide. thumbWidth Width of the slide thumbnail. thumbHeight Height of the slide thumbnail. Last updated 3/8/2011 - Adobe 65011817 | User Guide - Page 218
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. To be guided through the optimization - Adobe 65011817 | User Guide - Page 219
USING FIREWORKS CS4 213 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 - Adobe 65011817 | User Guide - Page 220
USING FIREWORKS CS4 214 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 • Enabling or - Adobe 65011817 | User Guide - Page 221
USING FIREWORKS CS4 215 Optimizing and exporting Restore to Previous Discards the current state and temporarily replaces it with the previous state. Choose this option if animated objects move above an opaque background. 3 To set the state delay, select a state from the list and enter the delay - Adobe 65011817 | User Guide - Page 222
estimated download time, and file format of a document. The estimated download time is the average amount of time it would take to download Note: Click Hide Slices in the Tools panel to hide slices and slice guides while previewing. Compare views with different optimization settings 1 Click the 2-Up - Adobe 65011817 | User Guide - Page 223
gradient color transitions, and any images that require more than 256 colors. PNG Portable Network Graphic (PNG) is a versatile web graphic format that can support up to 32-bit color, can contain transparency or an alpha channel, and can be progressive. However, not all web browsers can view PNG - Adobe 65011817 | User Guide - Page 224
USING FIREWORKS CS4 218 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 - Adobe 65011817 | User Guide - Page 225
USING FIREWORKS CS4 219 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 - Adobe 65011817 | User Guide - Page 226
USING FIREWORKS CS4 220 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 - Adobe 65011817 | User Guide - Page 227
USING FIREWORKS CS4 221 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 1 Click the Preview button at the upper left of the document window. 2 - Adobe 65011817 | User Guide - Page 228
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. 1 From the Optimize panel Options menu, select Save Palette - Adobe 65011817 | User Guide - Page 229
browsers do not support PNG format), it is useful for export to Flash or Adobe Director, because both applications support this type of transparency table, or click a color in the document preview. Interlace images to download gradually When viewed in a web browser, interlaced images display at a - Adobe 65011817 | User Guide - Page 230
on a dark background. Prevent halos in Fireworks PNG files and imported Photoshop files ❖ Do one of the following: • Set the Canvas Color in Hard from the Edge pop-up menu in the Property inspector. Remove a halo manually from a GIF or other graphic file 1 With the file open in Fireworks, - Adobe 65011817 | User Guide - Page 231
USING FIREWORKS CS4 225 Optimizing and exporting 4 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 - Adobe 65011817 | User Guide - Page 232
USING FIREWORKS CS4 226 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. 1 In Original view, select an area of the graphic for compression using one of the Marquee tools. - Adobe 65011817 | User Guide - Page 233
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. Export from - Adobe 65011817 | User Guide - Page 234
USING FIREWORKS CS4 228 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. 1 In the Optimize panel, select a file format and set format-specific options. 2 Select File > Export. 3 Select a - Adobe 65011817 | User Guide - Page 235
. Using this direct method, you can import all layers and states of your animation and then further edit them within Flash. See "Working with Flash" on page 248. Multiple files Exporting animation states or layers as multiple files is useful when you have many symbols on different layers for the - Adobe 65011817 | User Guide - Page 236
USING FIREWORKS CS4 230 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 - Adobe 65011817 | User Guide - Page 237
an HTML file, open it in an HTML editor, manually copy sections of code from the file, and paste that FrontPage®, and Adobe GoLive® formats. Note: Adobe Dreamweaver shares a 1-pixel-by-1-pixel GIF that Fireworks uses to fix spacing problems when sliced images are reassembled in an HTML table. You - Adobe 65011817 | User Guide - Page 238
Page Only check box to export all of the pages into separate HTML documents. 10 Click Save. After export, you'll see the files Fireworks exported on your images is copied but may not function correctly. If these issues pose a problem for you, use the Export HTML option instead of copying HTML to - Adobe 65011817 | User Guide - Page 239
already be included in the destination HTML document. If you chose Include HTML Comments in the HTML Setup dialog box in Fireworks, follow the instructions in the comments to copy and paste the code into the appropriate location. 5 If your Fireworks document contains interactive elements, copy the - Adobe 65011817 | User Guide - Page 240
, such as PDAs, mobile phones, and other handheld devices. Fireworks can also import XHTML. See "Create Fireworks PNG files from HTML files" on page 10. For more information on XHTML, visit the World Wide Web Consortium (W3C) XHTML specification at www.w3.org. 1 Select File > HTML Setup, select an - Adobe 65011817 | User Guide - Page 241
is turned on by default. Fireworks can also import documents that use UTF-8 encoding. See "Create Fireworks PNG files from HTML files" on page 10. Export documents without UTF-8 encoding 1 Select File > HTML Setup. 2 On the Document Specific tab, clear the UTF-8 Encoding check box and click OK - Adobe 65011817 | User Guide - Page 242
in place of all images while they are downloading from the web and in place of any images that fail to download. In some browsers, it may also Adobe PDF. 3 Choose the pages to export, and select View PDF After Export to automatically open the PDF in Adobe Reader or Acrobat. 4 To customize the PDF, - Adobe 65011817 | User Guide - Page 243
lose their transparent characteristics when you export to PDF. To avoid this, set the canvas to a non-transparent background before exporting to PDF. Send a Fireworks document as an e-mail panel. Note: Mozilla, Netscape 6, and Nisus Emailer are not supported on the Macintosh. Last updated 3/8/2011 - Adobe 65011817 | User Guide - Page 244
can easily import and export Photoshop graphics as fully editable files, or create and edit HTML using Fireworks and GoLive. Dan Carr's tutorial in the Adobe Dev Center provides an understanding of Creating simple interactive content using Fireworks, Flash, and Dreamweaver. Working with Dreamweaver - Adobe 65011817 | User Guide - Page 245
USING FIREWORKS CS4 239 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 - Adobe 65011817 | User Guide - Page 246
USING FIREWORKS CS4 240 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 - Adobe 65011817 | User Guide - Page 247
symbols; changes to the master library (LBI) document are reflected in all library instances across your site. Note: Dreamweaver library items do not support pop-up menus. 1 Select File > Export. 2 Select Dreamweaver Library from the Export pop-up menu. Select or create a folder named Library in - Adobe 65011817 | User Guide - Page 248
Dreamweaver. The Property inspector in Dreamweaver helps you identify Fireworks-generated images, table slices, and tables in a document. Fireworks supports most types of Dreamweaver edits. However, major changes to a table's structure in Dreamweaver can create irreconcilable differences between the - Adobe 65011817 | User Guide - Page 249
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 - Adobe 65011817 | User Guide - Page 250
the primary editor for GIF, JPEG, and PNG files in Dreamweaver. Note: Setting this preference is necessary only if you're having trouble starting Fireworks from within Dreamweaver. 1 In Dreamweaver, choose Edit > Preferences and then choose File Types/Editors. 2 In the Extensions list, select a web - Adobe 65011817 | User Guide - Page 251
USING FIREWORKS CS4 245 Using Fireworks with other applications 3 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. 4 Click Make Primary. 5 Repeat steps 2 through 4 to set - Adobe 65011817 | User Guide - Page 252
RDS cannot be transported to and from the remote server from within Fireworks. 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 - Adobe 65011817 | User Guide - Page 253
USING FIREWORKS CS4 247 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 - Adobe 65011817 | User Guide - Page 254
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. • The Flash HTML style does not support pop-up menu code. Fireworks - Adobe 65011817 | User Guide - Page 255
. Import As Editable Paths Preserves the editability of all vector objects. If objects have special fills, strokes, or effects that Flash does not support, those properties might look different after they are imported. Options for importing text Import As Bitmaps To Maintain Appearance Preserves the - Adobe 65011817 | User Guide - Page 256
the following issues: • If a symbol uses 9-slice scaling, the four slice guides are imported and preserved in Flash. The 9-slice scaling is not preserved for animations, however. The imported symbols are saved as symbols in the Flash library. • Soft edits that have been applied to rich symbols are - Adobe 65011817 | User Guide - Page 257
to blurX, blurY • 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. Although PNG is the native file - Adobe 65011817 | User Guide - Page 258
, behaviors, pattern fills, and contour gradients. 1 Select File > Save As. 2 Enter a filename and choose a destination folder. 3 For the format, select Adobe Flash SWF. 4 Click Options. Then select an Objects option: Maintain Paths Allows you to maintain path editability. Effects and formatting are - Adobe 65011817 | User Guide - Page 259
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. Fireworks supports graphics from FreeHand 7 and later - Adobe 65011817 | User Guide - Page 260
USING FIREWORKS CS4 254 Using Fireworks with other applications Render as Images Rasterizes complex groups, blends, or tiled fills and places each as a single bitmap object in a Fireworks document. Enter a number in the text box to determine how many objects a group, blend, or tiled fill can - Adobe 65011817 | User Guide - Page 261
and not the content within them. Note: Use the Copy As Vectors command with FreeHand 10 and earlier versions. With FreeHand MX, use Edit > Copy to get full object including FreeHand. 4 Click the Options button. 5 In the Illustrator Export Options dialog box, choose a state option: Export Current - Adobe 65011817 | User Guide - Page 262
following types: PDF, BMP, EPS, GIF, JPEG, JPEG2000, PICT, PCX, PCD, PSD, PXR, PNG, TGA and TIFF. Embedded Images are brought into Fireworks as raster images. However, Fireworks cannot open Illustrator AI files that contain linked images such as EPS and AI. Clip Masks Fireworks supports the import - Adobe 65011817 | User Guide - Page 263
: File conversion options are disabled when you import Illustrator files from versions previous to CS3, and for Illustrator files with a single artboard. Working with Photoshop Fireworks imports native Photoshop (PSD) files and retains many Photoshop features. You can also export Fireworks graphics - Adobe 65011817 | User Guide - Page 264
appearance. • The first alpha channel in the Channels palette converts to transparent areas in the Fireworks image. Fireworks does not support additional Photoshop alpha channels. • All Photoshop color depths and modes convert to 8-bit RGB. • Adjustment layers are unsupported. Drag, open, or import - Adobe 65011817 | User Guide - Page 265
either replace them or maintain their appearance. If the text in your Photoshop file has effects applied to it that Fireworks supports, the effects are applied in Fireworks. However, because Fireworks and Photoshop apply effects differently, the effects may appear different in each application. When - Adobe 65011817 | User Guide - Page 266
you can install plug-ins directly into the Fireworks Plug-ins folder. Place Fireworks graphics in Photoshop Fireworks provides extensive support for exporting files in Photoshop (PSD) format. A Fireworks image exported into Photoshop maintains the same editability when reopened in Fireworks as other - Adobe 65011817 | User Guide - Page 267
. 5 From the Text pop-up menu, choose one of the following: Maintain Editability Converts text to an editable Photoshop layer. Text formatting that is not supported by Photoshop is lost. Render Text Turns text into an image object. When you choose this option, you preserve the appearance of the - Adobe 65011817 | User Guide - Page 268
USING FIREWORKS CS4 262 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 - Adobe 65011817 | User Guide - Page 269
to create print, web, video, and audio content. 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: • Manage image, footage, and audio files. • Manage your photos. • Work - Adobe 65011817 | User Guide - Page 270
-managed Creative Suite components. • 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 - Adobe 65011817 | User Guide - Page 271
special instructions, and headline information. DICOM Lists patient, study, series, and equipment information for DICOM images. History Displays Adobe Photoshop history log information for images saved with Photoshop. The History option appears only if Adobe Photoshop is installed. Illustrator Lets - Adobe 65011817 | User Guide - Page 272
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 1 Select one or more files. 2 Choose either of the following commands from the Metadata panel menu or the Tools menu: • Append Metadata, followed by - Adobe 65011817 | User Guide - Page 273
document or multiple files. • Find and Replace works only in Fireworks PNG files or in files containing vector objects, such as Adobe FreeHand® and Adobe Illustrator® files. A B Find panel A. Search option B. Find option Select the source for the search 1 Open the document. 2 Do one of the following - Adobe 65011817 | User Guide - Page 274
USING FIREWORKS CS4 268 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. 1 Select Replace Options from the Find panel Options menu. 2 Select Save And Close - Adobe 65011817 | User Guide - Page 275
USING FIREWORKS CS4 269 Automating tasks Find and replace colors 1 In the Find panel, select Find Color from the second pop-up menu. 2 Select an item from the Apply To pop-up menu to determine how the colors found are applied: Fills & Strokes Finds and replaces both fill and stroke colors All - Adobe 65011817 | User Guide - Page 276
USING FIREWORKS CS4 270 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 1 Select File > Batch Process, and select the files to process. • Files can be from different - Adobe 65011817 | User Guide - Page 277
\Fireworks CS4\FireworksBatchLog.txt (Windows XP) • \Users\\AppData\Roaming\Adobe\Fireworks CS4\ FireworksBatchLog.txt (Windows Vista) • /Users//Library/Application Support/Adobe/Fireworks CS4/FireworksBatchLog.txt (Mac OS) Change optimization settings during batch-processing - Adobe 65011817 | User Guide - Page 278
USING FIREWORKS CS4 272 Automating tasks Change filenames during batch-processing 1 Select Rename from the Batch Options list and click Add. 2 Specify Rename options at the bottom of the Batch Process dialog box: Replace With Lets you replace characters in each filename with different characters - Adobe 65011817 | User Guide - Page 279
USING FIREWORKS CS4 273 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. 1 Select Find and Replace from the Batch Options list and click Add. 2 - Adobe 65011817 | User Guide - Page 280
USING FIREWORKS CS4 274 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. 1 Select a location for the batch output. 2 Select Backups to set your backup options. 3 Select how you - Adobe 65011817 | User Guide - Page 281
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 - Adobe 65011817 | User Guide - Page 282
USING FIREWORKS CS4 276 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 1 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 - Adobe 65011817 | User Guide - Page 283
Fireworks. Creating commands and panels with Flash To create your own Fireworks commands or panels, use Adobe Flash® to create SWF movies that or delete a command that shipped with Fireworks or that you downloaded from the Adobe Exchange, open the Extension Manager. Edit a command, using JavaScript - Adobe 65011817 | User Guide - Page 284
USING FIREWORKS CS4 278 Automating tasks Edit selected actions from the History panel, using JavaScript 1 In Fireworks, select a range of steps in the History panel. 2 Click the Copy Steps To Clipboard button at the bottom of the History panel. 3 Create a new document in a text editing - Adobe 65011817 | User Guide - Page 285
279 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 1 Choose Edit > Preferences ( - Adobe 65011817 | User Guide - Page 286
them while editing objects. Snap Distance Specifies how close the object you are moving must be (1 - 10 pixels) before it snaps to a grid or guide line. Snap Distance works when Snap To Grid or Snap To Guides is selected. Grid Settings Change the size, in pixels, of grid cells. Enter values in the - Adobe 65011817 | User Guide - Page 287
masks, maintaining their appearance. Deselect this option if you want to edit these masks in Fireworks. However, the appearance varies from Photoshop. Launch and Edit preferences Launch-and-edit preferences control how external applications launch and edit graphics in Fireworks. 1 Choose either of - Adobe 65011817 | User Guide - Page 288
miscellaneous tasks that do not exist as menu commands. 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. Select a shortcut set 1 Select Edit - Adobe 65011817 | User Guide - Page 289
USING FIREWORKS CS4 283 Preferences and keyboard shortcuts Miscellaneous A range of predefined actions 5 From the Commands list, select the command whose shortcut you want to modify. 6 Click in the Press Key text box, and press the desired keys for the new shortcut on the keyboard. 7 To add a - Adobe 65011817 | User Guide - Page 290
files are stored in the Adobe/Fireworks CS4 folder in your user-specific Application Data folder (Windows) or Application Support folder (Mac OS). The to reinstall Fireworks using the default settings, you must manually delete your user-specific configuration files before reinstalling the - Adobe 65011817 | User Guide - Page 291
USING FIREWORKS CS4 285 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 - Adobe 65011817 | User Guide - Page 292
hue or saturation 66 Adobe AIR adding mouse events 194 creating digital signature for 195 previewing application 194 Adobe Bridge 263 Adobe ConncectNow 24 Adobe Exchange 4 Adobe Flex Builder 190, 192 Adobe PDF files, exporting 236 Adobe Product Improvement Program 1 Adobe XMP 264 aligning objects - Adobe 65011817 | User Guide - Page 293
box 147 converting paths 86 copying bitmaps 44 pixels 38 states 200 copying and pasting symbol instances 153 copying and pasting objects from other applications 10 corner points 78 creating component symbols 149 master pages 188 Crop command 87 CSS layers using slices to export images 190 CSS layers - Adobe 65011817 | User Guide - Page 294
263 exporting to 262 placing Adobe Fireworks files in 262 disjoint 57 Doughnut tool 73 downloads updates, plug-ins, and tryouts 4 deleting 165 dragging and dropping 10 drawing 74 arrows 73 bending 241 to Flash 248 to FreeHand 254 to HomeSite 247 to Illustrator 254 to Photoshop 260 to WBMP - Adobe 65011817 | User Guide - Page 295
Find Edges 68 Hue/Saturation 66 Invert 67 Photoshop plug-ins 120 Sharpen 69 Sharpen More 69 267 Fit to Canvas 32 Flash exporting to 248 importing Adobe Fireworks PNG to 248 Flash SWF movies 277 Flex cell size 280 grouping objects 51 guides 32 Smart Guides 34 Guides, Grids, and Slices preferences 280 - Adobe 65011817 | User Guide - Page 296
Illustrator exporting to 254 importing files into Adobe Fireworks 256 Image Editing panel 55 image maps 171 creating 171 exporting 173 images exporting 227 Image Editing panel 55 saving 227 selecting 38 selecting pixels 38 import text 100 Photoshop 280 moving objects Smart Guides 34 Multiple Master - Adobe 65011817 | User Guide - Page 297
47 slanting 47 Smart Guides 34 stacking 52 ungrouping Index rotating 115 transforming 115 PDF files, exporting 236 Pen Adobe Fireworks 258 layer masks 133 patterns 282 plug-ins 259 textures 282 Photoshop and Adobe Fireworks exporting PSD files from Adobe Fireworks 260 importing PSD files into Adobe - Adobe 65011817 | User Guide - Page 298
and edit options 281 location of file 284 Photoshop Import 281 Plug-Ins 282 restoring defaults 282 111 with Export Preview 212 printing Adobe PDF files 236 progressive JPEGs 227 properties, 272 interpolation options 279 objects 46 scripting 277 Flash SWF files 277 searching 267 See also finding - Adobe 65011817 | User Guide - Page 299
objects 47 slice guides changing color 161 removing 162 viewing 160 slices 6 changing color 161 creating 158 editing Adobe Fireworks table slices color picker 104 T tables opening from HTML pages 10 reconstituting from HTML pages 10 text adjusting character width 97 alignment 96 checking spelling - Adobe 65011817 | User Guide - Page 300
45 pattern fills 115 text 100 transforming objects with Smart Guides 34 transparency 222 adding or removing colors 223 converting images WAP graphics. See also WBMP files WBMP files 9 exporting to 217 opening from Adobe Fireworks 9 saving 15 Web Layer 127 web safe colors 105 websafe colors 221
-
1 -
2 -
3 -
4 -
5 -
6 -
7 -
8
-
9
-
10
-
11
-
12
-
13
-
14
-
15
-
16
-
17
-
18
-
19
-
20
-
21
-
22
-
23
-
24
-
25
-
26
-
27
-
28
-
29
-
30
-
31
-
32
-
33
-
34
-
35
-
36
-
37
-
38
-
39
-
40
-
41
-
42
-
43
-
44
-
45
-
46
-
47
-
48
-
49
-
50
-
51
-
52
-
53
-
54
-
55
-
56
-
57
-
58
-
59
-
60
-
61
-
62
-
63
-
64
-
65
-
66
-
67
-
68
-
69
-
70
-
71
-
72
-
73
-
74
-
75
-
76
-
77
-
78
-
79
-
80
-
81
-
82
-
83
-
84
-
85
-
86
-
87
-
88
-
89
-
90
-
91
-
92
-
93
-
94
-
95
-
96
-
97
-
98
-
99
-
100
-
101
-
102
-
103
-
104
-
105
-
106
-
107
-
108
-
109
-
110
-
111
-
112
-
113
-
114
-
115
-
116
-
117
-
118
-
119
-
120
-
121
-
122
-
123
-
124
-
125
-
126
-
127
-
128
-
129
-
130
-
131
-
132
-
133
-
134
-
135
-
136
-
137
-
138
-
139
-
140
-
141
-
142
-
143
-
144
-
145
-
146
-
147
-
148
-
149
-
150
-
151
-
152
-
153
-
154
-
155
-
156
-
157
-
158
-
159
-
160
-
161
-
162
-
163
-
164
-
165
-
166
-
167
-
168
-
169
-
170
-
171
-
172
-
173
-
174
-
175
-
176
-
177
-
178
-
179
-
180
-
181
-
182
-
183
-
184
-
185
-
186
-
187
-
188
-
189
-
190
-
191
-
192
-
193
-
194
-
195
-
196
-
197
-
198
-
199
-
200
-
201
-
202
-
203
-
204
-
205
-
206
-
207
-
208
-
209
-
210
-
211
-
212
-
213
-
214
-
215
-
216
-
217
-
218
-
219
-
220
-
221
-
222
-
223
-
224
-
225
-
226
-
227
-
228
-
229
-
230
-
231
-
232
-
233
-
234
-
235
-
236
-
237
-
238
-
239
-
240
-
241
-
242
-
243
-
244
-
245
-
246
-
247
-
248
-
249
-
250
-
251
-
252
-
253
-
254
-
255
-
256
-
257
-
258
-
259
-
260
-
261
-
262
-
263
-
264
-
265
-
266
-
267
-
268
-
269
-
270
-
271
-
272
-
273
-
274
-
275
-
276
-
277
-
278
-
279
-
280
-
281
-
282
-
283
-
284
-
285
-
286
-
287
-
288
-
289
-
290
-
291
-
292
-
293
-
294
-
295
-
296
-
297
-
298
-
299
-
300
 |
 |
Using
ADOBE
®
FIREWORKS
®
CS
4