Home

Adobe Fireworks CS3 User's Manual

1. You can edit any of the following properties for an animation symbol Frames is the number of frames you want to include in the animation Although the slider limits you to a maximum of 250 you can enter any number you wish in the Frames text box The default is 5 Move is the distance in pixels that you want each object to move This option is available only in the Animate dialog box Although the default is 72 you can enter any number you wish in the Move text box Movement is linear and there are no keyframes unlike in Flash and Adobe Director Direction is the direction in degrees in which you want the object to move Values range from 0 to 360 This option is available only in the Animate dialog box You can also change Movement and Direction values by dragging the object s animation handles see Editing symbol motion paths on page 241 Scaling is the percent change in size from start to finish Although the default is 100 you can enter any number you wish in the Scaling text box To scale an object from 0 to 100 the original object must be very small vector objects are recommended Opacity is the degree of fading in or out from start to finish Values range from 0 to 100 and the default is 100 Creating a fade in fade out requires two instances of the same symbol one to play the fade in and the other to play the fade out Rotation is the amount in degrees that the symbol rotates from start to finish
2. To play back a saved command 1 Ifnecessary select one or more objects 2 Select the command from the Commands menu To replay a selection of steps 1 Select one or more objects 2 Select the steps in the History panel 3 Click the Replay button at the bottom of the History panel Steps marked with an X are nonrepeatable and cannot be played back Separator lines indicate that a different object has become selected Commands created from steps that cross a separator line can produce unpredictable results To apply selected steps to objects in many documents 1 Select a range of steps 2 Click the Copy Steps to Clipboard button at the bottom of the History panel 3 Select one or more objects in any Fireworks document 4 Select Edit gt Paste To repeat the last step Select Edit gt Repeat Command Script About scripting with JavaScript You can reduce the tedium of some repetitive tasks by writing your own JavaScript in a text editor to run within Fireworks You can control nearly every command or setting in Fireworks through JavaScript Dreamweaver also uses JavaScript You can write scripts that control Fireworks from within Dreamweaver ADOBE FIREWORKS CS3 344 User Guide For documentation on the JavaScript API see Extending Fireworks About scripting with Flash SWF files With Flash you can create SWF movies that contain JavaScript code These movies can be used as Fireworks commands accessible from the Co
3. 2 Select Backups to set your backup options 3 Select how you want to back up the files Overwrite Existing Backups overwrites the previous backup file Incremental Backups keeps copies of all the backup files When you run a new batch process a number is appended to the end of the filename of the new backup copy Note If Backup is deselected batch processing in the same file format overwrites the original file if the name is the same However batch processing in a different file format creates a new file and does not move or delete the original file 4 Click Batch to finish the batch process or click Back to return to the Batch Process dialog box Saving batch processes as scripts You can save batch process settings as a script or command to re create the batch process easily in the future After you select all batch options in the Batch dialog box you are given options for saving your files To create a batch script 1 Click Save Script to create a batch script 2 Enter a name and destination for the script 3 Click Save Saving your script into the Commands folder on your hard disk adds it to the Commands menu in Fireworks ADOBE FIREWORKS CS3 341 User Guide Note The exact location of this folder varies from system to system and depends on whether you want the command to be available just to your user profile or to all users Commands folders are located in the Configuration folder in the Fireworks application folder and
4. All PDF documentation is available through the Adobe Help Resource Center at www adobe com go documen tation PDF documentation included with your product can be found in the Documents folder on the installation or content DVD Printed documentation Printed editions of the complete in product Help are available for purchase in the Adobe Store at www adobe com go store You can also find books published by Adobe publishing partners in the Adobe Store A printed workflow guide is included with all Adobe Creative Suite 3 products and individual Adobe products may include a printed getting started guide Using Help in the product In product Help is available through the Help menu After you start the Adobe Help Viewer click Browse to see Help for additional Adobe products installed on your computer To help you learn about multiple Adobe products these features are available e You can search across Help for multiple products e Topics may contain links to topics in Help for other Adobe products or to additional content on the web e Some topics are shared across multiple products If you see a Help topic with a Fireworks icon and a Dreamweaver icon you know that the topic either describes functionality that is similar in the two products or documents cross product workflows Note If you search for a phrase such as shape tool enclose it in quotation marks to see only those topics that include all the words in the phrase Acc
5. Note The order in which tasks appear in the Include in Batch list is the order in which the tasks are performed during the batch process with the exception of Export and Rename which are always performed last 5 To view extra options for a task select the task in the Include in Batch list 6 Select settings for each option as required To remove a task from the batch select the task in the Include in Batch list and click Remove 7 Click Next 8 Select options for saving processed files Same Location as Original File saves the file in the same location as its source file and overwrites the source file if the filenames are the same and in the same format Custom Location lets you select a location in which to save the processed files 9 Select Backups to select backup options for the original files It is always safer to back up files For more information see Specifying the batch process output location on page 340 ADOBE FIREWORKS CS3 337 User Guide 10 Click Save Script if you want to save the batch process settings for future use For more information see Saving batch processes as scripts on page 340 11 Click Batch to perform your batch process At the end of the batch process if any of the files added to the batch were not able to be processed a notification appears that alerts you to the problem In addition a log file named FireworksBatchLog txt is created during the batch process It lists all of th
6. 3 Click Exit in the Analysis Results window of the wizard The Image Preview opens with recommended export options For more information see Using Image Preview on page 258 Using Image Preview When accessed through the Export Wizard the Image Preview displays recommended optimization and export options for the current document When selected directly from the File menu the Image Preview displays the current document export settings as defined in the optimize panel The preview area of the Image Preview displays the document or graphic exactly as it will be exported and estimates file size and download time with the current export settings ADOBE FIREWORKS CS3 User Guide Pre Qualty 92 0 1 420 1B sec GStibps Quality fe a Seething Ne sorina I Progressive browser display FF Sharpen celor edges 50047 G02 8 626 2f 1bta FF Remove unused colors Md s Epot te Coc A Saved set of options for the selected export B File size and download time estimates C Preview chosen export settings D Save export settings in the active view You can use split views to compare various settings to find the smallest file size that maintains an acceptable level of quality You can also constrain the file size using the Optimize to Size wizard When you export animated GIFs or JavaScript rollovers the estimated file size represents the total size across all frames Note To increase re
7. 3 Select the number of times to repeat the animation after the first time If you select 4 for example the animation plays five times in all Forever repeats the animation continuously Setting transparency As part of the optimization process you can have one or more colors in an animated GIF be displayed as transparent in a web browser This is useful when you want a web page background color or image to show through the animation To display a color as transparent in a web browser 1 Select Window gt Optimize if the Optimize panel is not visible ADOBE FIREWORKS CS3 248 User Guide 2 From the Transparency pop up menu in the Optimize panel select either Index Transparency or Alpha Trans parency For a description of these options see Making areas transparent on page 271 3 Use the transparency tools in the Optimize panel to select colors for transparency a Get Eat Optimizing an animation Optimization compresses your file into the smallest package for fast loading and exporting making downloading time much quicker on your website To optimize an animation 1 Ifyou plan to export your animation as an animated GIF select Animated GIF as the Export file format in the Optimize panel If the panel is not visible select Window gt Optimize 2 Set the Palette Dither or Transparency options For more information on optimizing options see Optimizing GIF PNG TIFF BMP and PICT files on page 265 3 Inthe Fr
8. 4 Press Enter or click outside the panel to close the pop up window Showing and hiding frames for playback You can show or hide frames for playback If a frame is hidden it is not displayed during playback and it is not exported To show or hide a frame 1 Do one of the following e Select Properties from the Frames panel Options menu e Double click the frame delay column The Frame Properties pop up window appears 2 Deselect Include when Exporting A red X is displayed in place of the frame delay time 3 Press Enter or click outside the Frame Properties pop up window to close it Naming animation frames As you set up an animation Fireworks creates the appropriate number of frames and displays them in the Frames panel By default the frames are named Frame 1 Frame 2 and so on When you move a frame in the panel Fireworks renames each one to reflect the new order It s a good idea to name your frames for easy reference and to keep track of them That way you always know which frame contains which part of the animation Moving a renamed frame has no effect on the name it remains the same To change a frame s name 1 In the Frames panel double click the frame s name 2 Inthe pop up text box type a new name and press Enter Adding moving copying and deleting frames You can add copy delete and change the order of frames in the Frames panel To add a new frame Click the New Duplicate Frame button at the b
9. Check In checks the local file in overwriting the remote file with the local copy Check In is enabled in Fireworks only if the Enable File Check In and Check Out option is enabled in Dreamweaver for the site in which the document resides Undo Check Out undoes Check Out of the local file and checks it in overwriting the local file with the remote copy Undo Check Out is enabled in Fireworks only if the Enable File Check In and Check Out option is enabled in Dream weaver for the site in which the document resides Note File Management commands are enabled in Fireworks only if your document resides in a Dreamweaver site folder with a remote server defined Fireworks File Management commands can be used only for files that reside in sites that use the Local Network and FTP transport methods Files in sites that use SFTP or third party transport methods such as SourceSafe WebDAV and RDS cannot be transported to and from the remote server from within Fireworks ADOBE FIREWORKS CS3 305 User Guide Working with Flash Fireworks integrates well with Flash You can easily import copy and paste or export Fireworks vectors bitmaps animations and multi state button graphics for use in Flash Launch and edit functionality also makes it easy to edit Fireworks graphics from within Flash Note The Flash HTML style does not support pop up menu code Fireworks button behaviors and other types of inter activity are not imported into Flash Placin
10. Freeform tools let you alter the shape of objects by editing paths directly You can also edit Auto Shapes using their predefined editing methods Commands on the Modify menu give you more options for editing objects including combining objects to create a single object creating an object from the intersection of several objects and expanding the stroke of an object You can also import graphics and manipulate them using these commands This chapter contains the following topics e Drawing vector objects on page 84 e Editing paths on page 100 Drawing vector objects Fireworks has many tools for drawing vector objects With these you can draw basic shapes freeform paths and complex shapes by plotting points one by one You can also draw Auto Shapes which are vector object groups that have special controls for adjusting their attributes Drawing basic lines rectangles and ellipses You can use the Line Rectangle or Ellipse tool to draw basic shapes quickly The Rectangle tool draws rectangles as grouped objects To move a rectangle corner point independently you must ungroup the rectangle or use the Subse lection tool To draw a basic rectangle with beveled chamfered or rounded corners see the following procedure To draw a Auto Shape rectangle with rounded corners see Adjusting beveled chamfered and rounded rectangle Auto Shapes on page 89 To draw a line rectangle or ellipse 1 Select the Line Rectangle
11. G Gaussian Blur filter 79 GIF file format choosing 265 choosing a color palette 266 swatches 128 GIF saving 23 glow effects 150 GoLive 288 327 gradient fills 64 adding new color 143 adjusting 144 adjusting color transition 143 applying 142 changing colors 143 converting images to transparency 81 Edit Gradient dialog box 143 editing 142 moving 144 removing colors from 143 rotating 144 saving custom 145 transforming 144 Grayscale color model 130 grid altering cell size 40 changing default color 39 showing hiding 39 snapping objects to 39 grouping objects 58 guides 38 locking 39 snapping objects to 39 H halos removing 275 handles transform 54 Help 2 Hexadecimal color model 130 Hide All command 170 Hide Panels command 29 Hide Selection command 170 hiding edges 43 layers 162 objects on layers 162 panels 29 toolbars 31 highlights 72 Histogram 72 History panel 27 40 changing the number of steps in 343 clearing all steps from 343 editing actions with 345 replaying steps 343 HomeSite placing Adobe Fireworks HTML in 320 placing Adobe Fireworks images in 320 hotspots 13 applying drag and drop rollovers 218 assigning URLs 212 creating 216 editing shape 217 irregular 217 on top of slices 219 HSB color model 130 HTML 281 copying and pasting from Adobe Fireworks to Dreamweaver 283 exporting 280 282 inserting from Adobe Fireworks into Dreamweaver 295 replacing older v
12. If you want to change the attributes that a style contains you can edit the style from the Styles panel To edit a style 1 Choose Select gt Deselect to deselect any objects on the canvas 2 Double click a style in the Styles panel 3 Inthe Edit Style dialog box select or deselect components of the attributes you wish to apply The Edit Style dialog box contains the same options as the New Style dialog box For details on choosing attributes to include in a style see Creating and deleting styles on page 184 4 Click OK to apply the changes to the style Exporting and importing styles You may want to share styles with other Fireworks users to save time and maintain consistency You can share styles by exporting them for use on other computers To export styles 1 Select a style from the Styles panel Shift click to select multiple styles Control click Windows or Command click Macintosh to select multiple noncontiguous styles 2 Select Export Styles from the Styles panel Options menu 3 Enter a name and location for the document that will contain the saved styles 4 Click Save To import styles 1 Select Import Styles from the Styles panel Options menu 2 Select a styles document to import All styles in the styles document are imported and placed directly after the selected style in the Styles panel ADOBE FIREWORKS CS3 186 User Guide Using style defaults If you want to delete all custom styles from the
13. Scale specifies the scale percentage for the imported file Width and Height specify the width and height of the imported file in pixels inches or centimeters Resolution specifies the resolution of the imported file Anti Alias smoothes imported objects to avoid jagged edges You can choose this option separately for paths or text ADOBE FIREWORKS CS3 313 User Guide Note Use the Property inspector to change selected objects to Anti Alias or Hard Edge File Conversion specifies how multi page documents are handled when imported e The Open a Page option imports only the specified page The Open Pages as Frames option imports all the pages from the document and places each in a separate frame The Ignore Layers option imports all objects on a single layer The Remember Layers option maintains the layer structure of the imported file The Convert Layers to Frames option places each layer of the imported document into a separate frame Include Invisible Layers imports objects on layers that have been hidden Otherwise invisible layers are ignored Include Background Layers imports objects from the document s background layer Otherwise the background layer is ignored Render as Images rasterizes complex groups blends or tiled fills and places each as a single bitmap object in a Fireworks document Enter a number in the text box to determine how many objects a group blend or tiled fill can contain before it is rasterized duri
14. When you start Fireworks without opening a document the Fireworks Start page appears in the work environment The Start page gives you quick access to Fireworks tutorials recent files and Fireworks Exchange where you can add new capabilities to some Fireworks features Use the Start page much like a web page Click any of the features you see to use them To disable the Start page 1 Run Fireworks without opening a document The Start page is displayed 2 Click Dont Show Again ADOBE FIREWORKS CS3 25 User Guide Using the Tools panel The Tools panel is organized into six categories Select Bitmap Vector Web Colors and View Select Vector ree OA Changing tool options When you select a tool the Property inspector displays tool options Some tool options remain displayed as you work with the tool For other tools such as the basic shape Pen and Line tools the Property inspector displays the properties of selected objects For more information about the Property inspector see Using the Property inspector on page 26 To display tool options in the Property inspector for a tool that you are already using Choose Select gt Deselect to deselect all objects For information about specific tool options see the sections that introduce the various tools throughout Using Fireworks or Fireworks Help Y Properties Path amp iY None w S M 1 v 1 Pixel Hard x E 100
15. i Original photograph after using the Red eye Removal tool fe To correct the red eye effect in a photograph 1 Select the Red eye Removal tool from its pop up menu 2 Set the attributes in the Property inspector Tolerance determines the range of hues to replace 0 replaces only red 100 replaces all hues that contain red Strength sets the darkness of the grays used to replace reddish colors 3 Click and drag the cross hair pointer over the red pupils in the photograph Replacing colors The Replace Color tool lets you select a color and paint over that color with a different color Original photograph after using the Replace Color tool Fireworks provides two different ways to replace one color with another You can replace a color that you ve specified in the color swatch or you can replace a color by using the Replace Color tool directly on the image To replace one color with another using the color swatch 1 Select the Replace Color tool from its pop up menu 2 Inthe From box in the Property inspector click Swatch ADOBE FIREWORKS CS3 70 User Guide 3 Click the From color box to select the color probe and select a color from the pop up menu to specify the color you want to replace 4 Click the To color box in the Property inspector and select a color from the pop up menu 5 Set the other stroke attributes in the Property inspector Size sets the size of the brush tip Shape sets a round or square brush t
16. 129 choosing a color with 130 cycling through color models 131 color blending 135 color correction brightness and contrast 76 Curves 74 Levels 72 using eyedropper 75 Color Mixer 28 129 130 creating colors with 131 displaying 130 mixing colors in 130 resetting default colors in 127 swapping stroke and fill colors in 127 color models CMY 130 Grayscale 130 Hexadecimal 130 HSB 130 RGB 130 Color Palette panel 133 color palettes Adaptive 266 appending to current swatches 128 Black and White 266 Custom 266 editing 269 Exact 266 Grayscale 266 importing 266 locking colors 269 optimizing 269 saving 270 setting number of colors 266 System Macintosh 266 System Windows 266 Uniform 266 viewing 268 Web 216 266 WebSnap Adaptive 266 color palettes swapping 134 color picker system 131 color table 268 edited swatch in 268 locked swatch in 268 selecting colors in 268 swatch with multiple attributes in 268 transparent swatch in 268 updating 268 websafe swatch in 268 colorizing images 77 command scripts editing 344 commands batch processing 339 creating 342 deleting custom 344 editing 344 renaming custom 344 renaming or deleting Adobe Fireworks commands 344 saving 40 Commands menu 343 managing saved commands 344 composite paths 104 compositing 179 compression adjusting 270 and optimization 261 blurring edges 274 choosing a file type 265 selective 273 configuration fil
17. 176 User Guide To modify a selected mask s color do one of the following e For grayscale bitmap masks use the bitmap tools to draw on the mask using various grayscale color values e For grayscale vector masks change the color of the mask object Note Use lighter colors to display the masked objects and darker colors to hide the masked objects To modify a mask by adding more mask objects 1 Select Edit gt Cut to cut the selected object or objects you want to add 2 Select the thumbnail of the masked object in the Layers panel 3 Select Edit gt Paste as Mask 4 Select Add when asked whether to replace the existing mask or add to it The object or objects are added to the mask To modify a mask using the transformation tools 1 Select the mask on the canvas using the Pointer tool 2 Usea transformation tool or a command from the Modify gt Transform submenu to apply a transformation to the mask For more information about using the transformation tools see Transforming and distorting selected objects and selections on page 54 The transformation is applied to the mask and its masked objects Note You can apply a transformation to the mask object alone by first unlinking the mask from the mask objects in the Layers panel and then performing the transformation Changing the way masks are applied You can use the Property inspector to ensure that you are editing a mask and to identify the type of mask you are worki
18. 2 Select Save and Close Files to save and close each file after the find and replace Only the originally active documents remain open Note If Save and Close is disabled and you are batch processing a large number of files Fireworks may run out of memory and cancel the batch process 3 Select one of the following from the Backups pop up menu No Backups finds and replaces without backing up original files The changed files replace the original files Overwrite Existing Backups creates and stores only one backup copy of each file changed during a find and replace If you perform additional find and replace operations the previous original file always replaces the backup copy The backup copies are stored in a subfolder called Original Files Incremental Backups saves all backup copies of files changed during a find and replace The original files are moved to an Original Files subfolder within their current folder and an incremental number is appended to each filename If you perform additional find and replace operations the original file is copied to the Original Files folder and the next higher number is added to its filename For example for a file named Drawing png the first time you find and replace the backup file is named Drawing 1 png The second time you find and replace the backup file is named Drawing 2 png and so on 4 Click OK Finding and replacing text Fireworks makes it easy to search for and replace text You have a
19. HTML or Hypertext Markup Language is currently the standard for displaying web pages on the Internet An HTML file is a text file that contains these elements Text that will appear on the web page HTML tags that define the formatting and structure of that text and of the entire document as well as links to images and other HTML documents web pages HTML tags are enclosed in brackets and look something like this lt TAG gt affected text lt TAG gt The opening tag tells a browser to format the text following in a certain way or to include a graphic The closing tag lt TAG gt when there is one indicates the end of that formatting Including comments in HTML Fireworks HTML is well commented telling you what the pieces of code relate to Fireworks HTML comments begin with lt and end with gt Anything between these two markers is not interpreted as HTML or JavaScript code If you want comments included in your HTML you must tell Fireworks you want this option turned on To include comments in exported HTML Before exporting select the Include HTML Comments option on the General tab of the HTML Setup dialog box Results of exporting When you export or copy HTML from Fireworks the following is generated so that your Fireworks image can be re created on a web page ADOBE FIREWORKS CS3 282 User Guide e The HTML code necessary to reassemble sliced images and any JavaScript code if the document contains inter
20. If more than one object or group is selected the objects move in front of or behind all unselected objects while maintaining their order relative to one another Aligning objects The Align commands in the Modify menu or the options on the Align panel give you a wide range of arrangement options allowing you to do any of the following e Align objects along a horizontal or vertical axis e Align selected objects vertically along their right edge center or left edge or horizontally along their top edge center or bottom edge Note Edges are determined by the bounding boxes enclosing each selected object e Distribute selected objects so that their centers or edges are evenly spaced You can apply one or more Align commands to selected objects To align selected objects do one of the following e Select Modify gt Align gt Left to align the objects to the leftmost selected object e Select Modify gt Align gt Center Vertical to align the center points of the objects along a vertical axis e Select Modify gt Align gt Right to align the objects to the rightmost selected object e Select Modify gt Align gt Top to align the objects to the topmost selected object ADOBE FIREWORKS CS3 60 User Guide e Select Modify gt Align gt Center Horizontal to align the center points of the objects along a horizontal axis e Select Modify gt Align gt Bottom to align the objects to the bottommost selected object To evenly d
21. Import as a single flattened bitmap Cancel 5 Select a File Conversion Option Open Frames as Pages imports Fireworks frames onto separate FreeHand pages If you want select Remember Layers to convert Fireworks layers to FreeHand layers Deselecting this option causes the content of all Fireworks layers to be combined onto a single layer ADOBE FIREWORKS CS3 315 User Guide Open Frames as Layers imports Fireworks frames as separate layers 6 Select a frame to import from the Frame pop up menu To import all frames select All Note The All option is available only if you are opening frames as layers or if you are opening a PNG file rather than importing it 7 Select how to import objects Rasterize If Necessary to Maintain Appearance converts some vector objects to uneditable bitmap images Only objects with effects strokes and fills not shared by FreeHand are converted Keep All Paths Editable lets you edit all imported vector objects Some objects might appear slightly different in FreeHand than in Fireworks because of differences in the way the two applications interpret information Also some effects not shared by the two applications might be discarded 8 Select how to import text Rasterize If Necessary to Maintain Appearance converts some text objects to uneditable bitmap images Only text with effects strokes and fills not shared by FreeHand is rasterized Keep All Text Editable enables you to edit all imported
22. Placing Fireworks graphics in FreeHand You can place Fireworks graphics into FreeHand in a number of ways You can quickly place Fireworks graphics into FreeHand by importing or copying and pasting them You can also export Fireworks graphics in a Freehand compatible format and then import them into FreeHand Importing Fireworks graphics into FreeHand FreeHand can import vector graphics that were created in Fireworks Depending on the options you select when importing or opening FreeHand can import Fireworks layers frames vectors text bitmaps and some effects that are shared by both applications Hidden Fireworks layers are ignored and are not imported Whether or not the content you import or open is editable in FreeHand depends on the import options you select in the Fireworks PNG Import Settings dialog box To import a Fireworks PNG file into FreeHand 1 Save the desired document in Fireworks For information on saving files see Fireworks Help 2 Switch to an open document in FreeHand 3 Select File gt Import or File gt Open 4 Locate and select the desired PNG file from the Import dialog box and click Open The Fireworks PNG Import Settings dialog box appears Fireworks PNG Import Settings File Conversion Open frames as layers X Frame All X r Objects Rasterize if necessary to maintain appearance C Keep all paths editable Text Rasterize if necessary to maintain appearance C Keep all text editable
23. The trigger is always a web object a slice hotspot or button ADOBE FIREWORKS CS3 207 User Guide The simplest rollover swaps an image in Frame 1 with an image directly below it in Frame 2 You can build more complicated rollovers as well Swap image rollovers can swap in images from any frame disjoint rollovers swap in an image from a slice other than the trigger slice Slice GIF In Fireworks when you select a trigger web object created using a behavior handle or the Behaviors panel all of its behavior relationships are displayed By default a rollover interaction is represented by a blue behavior line Creating a simple rollover A simple rollover swaps in the frame directly under the top frame and involves only one slice To attach a simple rollover to a slice 1 Ensure that the trigger object is not on a shared layer For more information see Sharing layers on page 163 2 Select Edit gt Insert gt Slice to create a slice on top of the trigger object 3 Create a new frame in the Frames panel by clicking the New Duplicate Frame button 4 Create paste or import an image to use as the swap image on the new frame Position the image beneath the slice you created in step 2 which is still visible even though you re in Frame 2 Slices are visible across all frames 5 Select Frame 1 in the Frames panel to return to the frame that has the original image 6 Select the slice and place the pointer over
24. Use Export Settings attaches the current document to an e mail message using the settings defined in the Optimize panel Note Mozilla Netscape 6 and Nisus Emailer are not supported on the Macintosh Using the File Management button I The File Management button located at the top of the Document window next to the Quick Export button offers easy access to file transport commands You can use the File Management button if your document lives in a Dreamweaver site folder and if the site has access to a remote server Fireworks recognizes your folder as a site if you have used the Manage Site dialog box in Dreamweaver to define the target folder or a folder that contains the target folder as the local root folder for a site The File Management button displays the following menu commands Get copies the remote version of the file to the local site overwriting the local file with the remote copy ADOBE FIREWORKS CS3 290 User Guide Check Out checks the file out overwriting the local file with the remote copy Check Out is enabled in Fireworks only if the Enable File Check In and Check Out option is enabled in Dreamweaver for the site in which the document lives Put copies the local version of the file to the remote site overwriting the remote file with the local copy Check In checks the local file in overwriting the remote file with the local copy Check In is enabled in Fireworks only if the Enable File Check In and Check Out o
25. Using the Text Editor In Fireworks 4 and previous versions the Text Editor was used to create and edit text All text editing and formatting options found in the Text Editor are now located in the Property inspector However you still have access to the Text Editor through the Text menu The Text Editor is useful for working with text that might be difficult to edit onscreen such as large text blocks text attached to a path or text with hard to read fonts and sizes You can choose to display such text in the system font and default size if necessary to make editing easier To display the Text Editor 1 Select a text block and select Text gt Editor 2 Modify and format the text using the options available 3 Click OK to apply changes and close the Text Editor To view text in the system font Deselect Show Font in the Text Editor C Show Font To view text in the default size Deselect Show Size amp Color in the Text Editor C Show Size amp Color Chapter 7 Applying Color Strokes and Fills Fireworks CS3 has a wide range of panels tools and options for organizing and selecting colors and applying colors to bitmap images and vector objects In the Swatches panel you can select a preset swatch group such as Color Cubes Continuous Tone or Grayscale or you can create custom swatch groups that include your favorite colors or colors approved by your client In the Color Mixer you can select a color model such
26. Windows or Command double click Macintosh the image you want to edit e Right click Windows or Control click Macintosh the desired image and choose Edit with Fireworks from the context menu Dreamweaver starts Fireworks if it is not already open 3 If prompted specify whether to locate a source Fireworks file for the placed image For more information on Fireworks source PNG files see Fireworks Help 4 In Fireworks edit the image The Document window indicates that you are editing an image from Dreamweaver Dreamweaver recognizes and preserves all edits applied to the image in Fireworks 5 When you have finished editing the image click Done in the Document window The image is exported using the current optimization settings the GIF or JPEG file used by Dreamweaver is updated and the PNG source file is saved if a source file was selected Note Using Fireworks technology Dreamweaver provides basic image editing features that let you modify images without having to use an external image editing application You can crop resize resample and so on without leaving Dreamweaver Dreamweaver image editing features apply only to JPEG and GIF image file formats Other bitmap image file formats cannot be edited using these image editing features For more information on editing images in Dreamweaver see Dreamweaver Help Note When you open an image from the Dreamweaver Site panel the default editor for that image type which is
27. and images e Live Filters or opacity applied to individual objects in the button symbol e Size and position of the active area e Core button behavior e Optimization and export settings e URL link also available as an instance level property Target frame also available as an instance level property To edit button properties at the symbol level 1 Do one of the following to open the button in the Button Editor Double click a button instance in the workspace 2 Make changes to the button s characteristics and click Done Changes are applied to all instances of the button symbol Editing instance level properties ADOBE FIREWORKS CS3 User Guide In the Library panel double click the button preview or the symbol icon beside the button symbol Instance level properties are edited in the Property inspector when a single instance is selected You change these properties for an instance without affecting the associated symbol or any other instances of that symbol These properties typically differ from button to button in a series of buttons e An instance s object name which appears in the Layers panel and is used for naming the exported slices for the button instance upon export Live Filters or opacity applied to the entire instance e Text characters and text formatting such as font size orientation and color e URL link overrides any URL that exists as a symbol level property e Alternate alt image descr
28. b Select an import option from the two pop up menus Import all pages into new frames as movie clips Imports all of the pages in the PNG file into a new Flash layer that takes the name of the PNG file A keyframe is created in the new layer at the current frame s location the first page of the PNG file is placed as a movie clip in this frame and all the other pages are placed in frames following it as movie clips The layer hierarchy and frames within the PNG file are preserved Import Page 1 into current frame as movie clip The contents of the selected page are imported as a movie clip which is placed in the active frame and layer in the Flash file The layer hierarchy and frames within the PNG file are preserved Import all pages into new scenes as movie clips Imports all of the pages from the PNG file and maps each one to a new scene as movie clips Any layers and frames within the pages are preserved If scenes already exist in the Flash file the import process adds the new scenes after the existing ones Import Page 7 into new layer The selected page is imported as new layer Frames are imported into the timeline as separate frames 6 Select the way youd like vector objects imported Import as bitmaps to maintain appearance preserves the editability of vector objects unless they have special fills strokes or effects that Flash does not support To preserve the appearance of such objects Flash converts them to non editable bitmap imag
29. break case 2 applyCurrentValues break default break This sample JavaScript shows a rich symbol that can change colors function setDefaultValues var currValues new Array Name is the Parameter name that will be displayed in the Symbol Properties Panel Value is the default Value that is displayed when Rich symbol loads first time In this case Blue will be the default color when the Rich symbol is used Color is the Type of Parameter that is displayed Color will invoke the Color Popup box in the Symbol Properties Panel currValues push name BG Color value 003366 type Color Widget elem customData currentValues currValues 192 ADOBE FIREWORKS CS3 193 User Guide function applyCurrentValues var currValues Widget elem customData current Values color_bg is the Layer name in the PNG that will change colors var color_bg Widget GetObjectByName color_bg color_bg path Attributes fillColor currValues 0 value switch Widget opCode case 1 setDefaultValues break case 2 applyCurrentValues break default break To better understand how the JSF file can be used to customize symbol properties explore the sample components that have been included with the software Editing instances When you double click an instance to edit it you re actually editing the symbol itself in the Symbol Editor or Button Editor To edit only the current instance you need
30. css file that is exported to the same location as the HTML file The name of the css file matches the name of the HTML file except for the file extension Choosing this option also exports a file named mm_css_menu js to the same location as the HTML file Note The Write CSS to an external file option is only available if you have chosen the Use CSS for Popup Menus option e Select an associated application from the File Creator pop up menu Macintosh When you double click the exported HTML file on your hard disk it automatically opens in the application you specified 3 Inthe Table tab select settings for your HTML tables For information on defining properties for exported Fireworks HTML tables see Defining how HTML tables are exported on page 215 4 Inthe Document Specific tab select from the following options ADOBE FIREWORKS CS3 288 User Guide e Select a formula for auto naming slices in the Slice Auto Naming pop up menus You can use the default settings or choose your own options Note Use caution when selecting None as a menu option for slice auto naming If you select None as the option for any of the first three menus Fireworks exports slice files that overwrite one another resulting in a single exported graphic and a table that displays this graphic in every cell Enter text in the Alternate Image Description text box This alt text appears in place of all images while they are downloading from the web and
31. e Select Merge Down from the Layers panel Options menu Select Modify gt Merge Down e Select Merge Down from the context menu that appears when you right click Windows or Control click Macintosh the selected objects on the canvas The selected object or objects merge with the bitmap object The result is a single bitmap object Note Merge Down does not affect slices hotspots or buttons Sharing layers You can share a layer across all pages or all frames in a document This allows you to update an object on a layer and have that object be updated automatically in all pages or frames This is useful when you want objects such as background elements to appear on all pages of a website or all frames of an animation Note Sub layers cannot be shared across pages or frames you must select the parent layer to share To share a selected layer across frames do one of the following e Select Share Layer to Frames from the Layers panel Options menu e Double click the layer name in the Layers panel and select Share Across Frames To share a selected layer across pages do the following Select Share Layer to Pages from the Layers panel Options menu When a layer has been shared across one or more pages it is displayed in yellow to differentiate it from unshared layers Only a parent layer can be shared across pages Sub layers cannot be shared Using the Web Layer The Web Layer is a special layer that appears as the to
32. or Ellipse tool from the Tools panel 2 If desired set the stroke and fill attributes in the Property inspector See Applying Color Strokes and Fills on page 126 3 Drag on the canvas to draw the shape For the Line tool Shift drag to constrain lines to 45 increments ADOBE FIREWORKS CS3 85 User Guide For the Rectangle or Ellipse tool Shift drag to constrain shapes to squares or circles To constrain a shape and draw from the center point Position the pointer at the intended center point and Shift Alt drag Windows or Shift Option drag Macintosh the drawing tool To adjust the position of a basic shape as you draw it While holding down the mouse button press and hold the Spacebar then drag the object to another location on the canvas Release the Spacebar to continue drawing the object Note An exception is the Line tool Pressing the Spacebar while using the Line tool does not change a line position on the canvas To resize a selected line rectangle or ellipse do one of the following Enter new width W or height H values in the Property inspector or the Info panel e In the Select section of the Tools panel select the Scale tool and drag a corner transform handle This resizes the object proportionally Note You can also resize an object proportionally by selecting Modify gt Transform gt Scale and dragging a corner transform handle or by selecting Modify gt Transform gt Numeric
33. place the insertion point where you want to insert the Fireworks image then right click the file in the Resources window and choose Insert as Link A link to the Fireworks image is created in the HTML code Click the Browse tab to preview your image within the HomeSite document Placing Fireworks HTML in HomeSite There are a few ways to place Fireworks HTML into HomeSite You can export Fireworks HTML or you can copy HTML to the Clipboard You can also open an exported Fireworks HTML file in HomeSite and copy and paste selected sections of code In addition you can easily update code you ve exported to HomeSite using the Update HTML command in Fireworks Note Before exporting copying or updating Fireworks HTML for use in HomeSite make sure to set the HTML type to Generic in the HTML Setup dialog box For more information see Fireworks Help Exporting Fireworks HTML to HomeSite Exporting HTML from Fireworks generates an HTML file and the associated image files in the location you specify You can then open the HTML file in HomeSite for further editing Note Before exporting make sure to set the HTML type to Generic in the HTML Setup dialog box For more infor mation see Fireworks Help ADOBE FIREWORKS CS3 321 User Guide To export Fireworks HTML to HomeSite Export your document to HTML in Fireworks and then open the exported file in HomeSite by choosing File gt Open For more information see Fireworks Help Copying Fi
34. 228 animation 238 adding frames 243 creating from multiple files 249 custom frame viewing 246 deleting frames 244 disabling layer sharing 245 editing 301 exporting 248 frames 240 inserting frames 243 looping 247 managing frames 242 movement 240 moving objects to another frame 244 multiframe editing 246 naming frames 243 onion skinning 245 opacity 240 opening 248 optimizing 248 playing 246 previewing 246 properties 239 removing 241 reordering frames 244 rotation 240 scaling 240 setting frame delay 242 sharing layers across frames 244 transparency 247 turning frames on and off 243 viewing all frames 246 viewing current and adjacent frames 246 viewing multiple frames 245 viewing next frame 246 anti aliasing edges 144 removing halos 275 smoothing text edges 118 target background color 274 application program package 352 arranging frames 244 Arrow tool 86 Auto Levels feature for adjusting tonal range 72 Auto Shapes 86 87 88 92 Auto Shapes Properties panel 28 auto naming slices 213 353 changing default naming convention 214 B backing up during Find and Replace 332 baseline shift 119 Batch Process dialog box 334 batch processing 334 backing up files 340 commands 339 export settings 337 filenames 339 Find and Replace 338 optimization settings 337 saving as scripts 340 saving files 336 scaling graphics 338 batch scripts 340 dragging and dropping 341 running 341 behaviors
35. 3 Select New Style from the Styles panel Options menu 4 Select the properties for the new style and name it 5 Click OK ADOBE FIREWORKS CS3 120 User Guide Attaching text to a path To free text from the restrictions of rectangular text blocks you can draw a path and attach text to it The text flows along the shape of the path and remains editable A path to which you attach text temporarily loses its stroke fill and filter attributes Any stroke fill and filter attributes you apply subsequently are applied to the text not the path If you then detach the text from the path the path regains its stroke fill and filter attributes Note Attaching text that contains hard or soft returns to a path can produce unexpected results If text attached to an open path exceeds the length of the path the remaining text returns and repeats the shape of the path dam ad sates era gv To place text on a path 1 Shift select a text block and a path 2 Select Text gt Attach to Path To detach text from a selected path Select Text gt Detach from Path Editing paths and text attached to paths Text that you have attached to a path remains editable In addition you can edit the shape of the path To edit text attached to a path do one of the following e Double click the text on a path object with the Pointer or the Subselection tool Select the Text tool and select the text to edit To edit the shape of t
36. Adobe website at www adobe com go activation 1 Ifthe Activation dialog box isn t already open choose Help gt Activate 2 Follow the on screen instructions ADOBE FIREWORKS CS3 2 User Guide Note If you want to install the software on a different computer you must first deactivate it on your computer Choose Help gt Deactivate Register Register your product to receive complimentary installation support notifications of updates and other services To register follow the on screen instructions in the Registration dialog box which appears after you install and activate the software x If you postpone registration you can register at any time by choosing Help gt Online Registration Read me The Read Me html file for your product can be found on the installation DVD and is also copied to the application folder during product installation This file provides valuable information about the following e System requirements Installing and uninstalling e Activation and registration e Font installation e Troubleshooting e Customer support e Legal notices Viewing the files installed with Fireworks At some point you may need to view or access the files installed with Fireworks During installation Fireworks places files in various locations on your system It s important to understand why these files reside where they do For more information see Working with configuration files on page 350 Macint
37. Button Editor click the Over While Down tab 2 Do one of the following to create the button s Over While Down state e Click Copy Down Graphic to paste a copy of the Down state graphic into the Over While Down window and then edit it to change its appearance Drag and drop import or draw a graphic Note When you insert or create a graphic for the Over While Down State the Include Nav Bar Over While Down State option is automatically chosen This button state is for buttons that are part of navigation bars Using bevel filters to draw button states As you create graphics for each button state you can apply preset Live Filters to create common appearances for each state For example if you are creating a four state button you can apply the Raised filter to the Up state graphic the Highlighted filter to the Down state graphic and so on To apply preset Live Filters to a button symbol 1 With the desired button symbol open in the Button Editor select the graphic to which you want to add a Live Filter 2 Click the Add Filters button in the Property inspector 222 ADOBE FIREWORKS CS3 223 User Guide 3 Inthe pop up menu that appears do one of the following e Select Bevel and Emboss gt Inner Bevel e Select Bevel and Emboss gt Outer Bevel 4 Inthe pop up window that appears select a button preset filter These are described below Button preset filter Description Raised The bevel appears to rise from t
38. Color Mixer Options menu Dithering with websafe colors Sometimes you might need to use a color that is not a websafe color For example your company logo may use a color that is not websafe To approximate a websafe color that doesn t shift or dither when exported with a websafe palette you use a web dither fill Note Web dithering can increase the size of the file Source Color fm Fill Options Two websafe colors create a web dither fill To use the web dither fill 1 Select an object containing a non websafe color 2 Select Web Dither from the Fill Options pop up menu in the Property inspector 3 Click the Fill Color box in the Property inspector The color pop up window opens displaying options for web dither fills The object s non websafe color appears in the Source color box in the Fill Options window The two websafe dither colors appear in the color boxes to the right The web dither appears on the object and becomes the active fill color Note Setting the edge of a web dither fill to Anti Alias or Feather results in colors that are not websafe 4 Click outside the pop up window to close it To create the illusion of a true transparent fill in a web browser 1 Select the object to which you want to apply a transparent fill 2 Select Web Dither from the Fill Options pop up menu in the Property inspector 3 Click the Fill Color box in the Property inspector The color pop up window opens disp
39. FIREWORKS CS3 46 User Guide Selecting areas of similar color The Magic Wand tool allows you to select areas of pixels that are similar in color By adjusting the Magic Wand s Tolerance and Edge options in the Property inspector you can control how the Magic Wand selects pixels To select an area of pixels of similar color range 1 Select the Magic Wand tool 2 Select an Edge option in the Property inspector For more information see Bitmap selection tool options on page 44 3 Set the tolerance level by dragging the tolerance slider in the Property inspector Tolerance represents the tonal range of colors that are selected when you click a pixel with the Magic Wand If you enter 0 and click a pixel only adjacent pixels of exactly the same tone are selected If you enter 65 a wider range of tones is selected 4 Click the area of color you want to select A marquee appears around the selected range of pixels Pixels selected with a lower tolerance above then a higher tolerance below To select similar colors throughout the document 1 Select an area of color with a marquee or lasso tool or with the Magic Wand tool 2 Choose Select gt Select Similar One or more marquees show all areas containing the selected range of pixels according to the current Tolerance setting in the Property inspector for the Magic Wand tool Note To adjust the tolerance for the Select Similar command select the Magic Wand tool and t
40. GIF and animated GIF You can also export or save graphics in many of the popular formats used off the web such as TIFF PSD and BMP Whatever optimization and export settings you choose the original Fireworks PNG file is preserved to allow easy editing later To create a web graphic in Fireworks you must first set up a new document or open an existing one You can adjust the setup options later in the Property inspector To create a new document 1 Select File gt New The New Document dialog box opens New Document Canvas Size 976 66 Width 500 Pixels Height 500 Pixels Resolution 96 Pixels Inch Canvas Color White O Transparent Custom E cd 2 Enter the canvas width and height measurements in pixels inches or centimeters 3 Enter a resolution in pixels per inch or pixels per centimeter 4 Select white transparent or a custom color for the canvas Note Use the Custom color box pop up window to select a custom canvas color 5 Click OK to create the new document To create a new document the same size as an object on the Clipboard 1 Copy an object to the Clipboard from any of the following e Another Fireworks document A web browser Any of the applications listed in Pasting into Fireworks on page 19 2 Select File gt New The New Document dialog box opens with the width and height dimensions of the object on the Clipboard 3 Set the resolution and canvas color and
41. Guide Original trimmed canvas To trim or fit the canvas to the document contents 1 Choose Select gt Deselect to view the document properties in the Property inspector 2 Click Fit Canvas in the Property inspector The canvas expands or contracts to the size of the contents of the canvas Cropping a document By cropping you can delete unwanted portions of a document The canvas is resized to fit an area that you define By default cropping deletes objects that extend beyond the canvas boundaries You can retain objects outside the canvas by changing a preference before cropping To crop a document is 1 Select the Crop tool from the Tools panel or select Edit gt Crop Document 2 Drag a bounding box on the canvas Adjust the crop handles until the bounding box surrounds the area of the document that you want to keep 3 Double click inside the bounding box or press Enter to crop the document Fireworks resizes the canvas to the area you define and deletes objects beyond the edges of the canvas Preferences dialog box before cropping For more information about preferences see Setting preferences on page 346 5 can retain objects outside the canvas by deselecting Delete Objects when Cropping on the Editing tab of the Using context menus Context menus let you quickly access commands that are relevant to the current selection To display a context menu Right click Windows or Control click Macintosh a sel
42. HTML 157 results 281 slices 211 278 styles 185 symbols 195 to Director 317 to Dreamweaver 296 to Flash 305 310 to FreeHand 314 to Illustrator 314 to Photoshop 325 to WBMP files 265 UTE 8 286 XHTML 286 exporting graphics 13 Extension Manager 341 external editor preference 303 external files converting to swap image 211 Extras 5 eyedropper pointer 130 135 136 140 Eyedropper tool 64 128 F Feather command 65 feathering 65 creating feathered edges 144 pixel selections 49 features new 8 file formats BMP 265 GIF 265 JPEG 265 PNG 265 TIFF 265 File Management button 289 304 File Management menu 289 304 file size reducing quality 273 setting loss to reduce size 270 filenames changing in a batch process 339 files unlocking 289 304 Fill Color box 64 Fill Color Live Filter 182 fills adding texture to 146 adjusting 144 applying color fills 76 applying gradient 64 142 applying pattern 141 applying solid 141 changing color for basic shape tools 140 changing edges 144 drawing over strokes 139 editing gradient 142 editing solid 141 feathering or anti aliasing 144 finding and replacing 333 moving 144 resetting default color 127 rotating 144 saving custom gradient 145 saving gradient 145 swapping stroke and fill colors 127 transforming gradient 144 transforming pattern 144 transparency illusion 132 web dither fill 132 filters Add Noise 83 Blur 79 Blur More 79 Brightness Contr
43. History panel on page 342 To undo and redo actions 1 Select Window gt History to open the History panel 2 Drag the Undo marker up or down To repeat actions 1 Perform the actions 2 Do one of the following to highlight the actions to be repeated in the History panel e Click an action to highlight it Control click Windows or Command click Macintosh to highlight multiple individual actions Shift click to highlight a continuous range of actions 3 Click the Replay button at the bottom of the History panel To save actions for reuse 1 Highlight the actions to be saved in the History panel 2 Click the Save button at the bottom of the panel 3 Enter a command name and click OK To use the saved custom command Select the command name from the Commands menu i Chapter 3 Selecting and Transforming Objects As you work in Fireworks CS3 you manipulate vector and bitmap objects text blocks slices and hotspots and areas of pixels Using the selection and transformation tools you can move copy delete rotate scale or skew objects In documents that have multiple objects you can organize the objects by stacking grouping and aligning them This chapter contains the following topics e Selecting objects on page 41 e Selecting pixels on page 44 e Editing selected objects on page 53 e Transforming and distorting selected objects and selections on page 54 e Organizing
44. Image behavior 210 Set Pop up Menu behavior 210 Set Text of Status Bar behavior 210 shadows 72 150 shapes 14 Shapes panel 27 sharing layers 163 Sharpen filter 81 Sharpen More filter 81 Sharpen tool 66 sharpening 81 bitmap areas 66 images 67 shortcut sets 350 See also keyboard shortcuts Show Fill Handles preference 347 Show Pen Preview preference 347 Show Solid Points preference 347 Show Hide hotspots and slices 203 showing edges 43 panels 29 rulers 38 toolbars 31 Simple Rollover behavior 209 simple rollovers 207 creating 209 Simplify command 106 simplifying paths 105 Skew tool 56 skewing objects 56 slanting objects 56 INDEX 362 slice guides changing color 203 removing 205 viewing 203 slices 13 auto naming 213 changing color 203 creating 201 editing Adobe Fireworks table slices from Dreamweaver 299 exporting 277 278 overlapping 205 polygon 202 resizing 204 showing or hiding slice overlay 264 text 201 updating 278 using nested tables 215 using spacer 215 slicing definition 200 for interactivity 200 slideshow properties 252 slideshows creating 250 Smart Polygon tool 87 Smooth command 50 Smudge tool 66 smudging bitmap areas 66 images 68 Snap Distance preference 347 soft interpolation scaling method 346 software activation 1 registration 1 software downloads 7 solid fills adding texture to 146 applying 141 spacers 215 Special Characters panel 28 spell checking 124 Spiral tool 87 Spli
45. Photoshop 2 In the Export dialog box name your file and choose Photoshop PSD from the Save As menu 3 To specify grouped export settings choose an option from the Settings menu These settings provide preset combinations of individual export options for objects effects and text in the Fireworks file Individual export options are described in detail in Customizing files for export to Photoshop on page 325 Maintain Editability over Appearance converts objects to layers keeps effects editable and converts the text to editable Photoshop text layers Select this option if you plan to edit the image extensively in Photoshop and do not need to preserve the exact appearance of the Fireworks image Maintain Fireworks Appearance converts each object into an individual Photoshop layer and effects and text become non editable Select this option if you want to maintain control over the Fireworks objects in Photoshop but also want to maintain the original appearance of the Fireworks image Smaller Photoshop File flattens each layer into a fully rendered image Select this option if you are exporting a file containing a large number of Fireworks objects Custom allows you to choose specific settings for objects effects and text 4 Click Save to export the Photoshop file Note Photoshop 5 5 and earlier cannot open files with more than 100 layers You must delete or merge objects if the Fireworks document you are exporting contains more than 1
46. Properties inspector and then type a new name e Double click the name in the Layers panel object thumbnail and then type a new name Creating text blocks All text in a Fireworks document appears inside a rectangle with handles called a text block To enter text 1 Select the Text tool The Property inspector displays options for the Text tool 2 Select color font size spacing and other text characteristics 3 Do one of the following e Click in your document where you want the text block to begin This creates an auto sizing text block Drag to draw a text block This creates a fixed width text block For information on the different types of text blocks see Using auto sizing and fixed width text blocks on page 111 4 Type your text To enter a paragraph break press Enter 5 If desired highlight text within the text block after you type it and reformat it ADOBE FIREWORKS CS3 111 User Guide 6 When you have finished entering text do one of the following e Click outside the text block e Select another tool in the Tools panel e Press Escape Moving text blocks You can select a text block and move it anywhere in your document as you would any other object You can also move text blocks as you drag to create them To move a text block Drag it to the new location To move a text block while you drag to create it 1 While holding down the mouse button press and hold down the Spacebar then drag the
47. Selecting masks and masked objects using mask thumbnails Masks and masked objects can be easily identified and selected using the thumbnails in the Layers panel Thumbnails allow you to easily select and edit just the mask or the masked objects without affecting the other objects When you select the mask thumbnail the mask icon appears beside it in the Layers panel and the mask s properties show in the Property inspector where they can be changed if desired v Layers al 100 Normal v Oo amp Web Layer Y Properties VN Vector Mask Mask Path outline CI Show fill and stroke E 100 Normal i aE e re w 99 x 0 E soio OOOO a 2 70 None Hilo Yi o Edge ant aias wi 9 Edges o a To select a mask gt Click the mask thumbnail in the Layers panel The Layers panel displays a green highlight around a mask thumbnail when it is selected To select masked objects Click the masked object thumbnail in the Layers panel The Layers panel displays a blue highlight around a masked objects thumbnail when it is selected Selecting masks and masked objects using the Subselection tool You can use the Subselection tool to select individual masks and masked objects on the canvas without selecting the other components of the mask When you select a mask or a masked object with the Subselection tool the Property inspector shows the properties for the selected object
48. To edit a page s canvas size color or image resolution 1 Select a page from the Pages panel or the pages pop up menu at the bottom of the document window 2 Select Modify gt Canvas gt Image Size Modify gt Canvas gt Canvas Color or Modify gt Canvas gt Canvas Size 3 Make the desired changes These changes can also be made using the Properties panel when the canvas for a page is selected 4 To apply the changes to only the selected page leave the Current Page Only check box selected To apply the changes to all pages deselect the check box ADOBE FIREWORKS CS3 157 User Guide Using a master page If you have some elements that you want to be common across all of your pages you can use a master page When you convert an ordinary page to a master page it moves to the top of the list in the Pages panel and it is colored gray When a master page is created a Master Page Layer is added at the bottom of the layer hierarchy for each page This layer can be removed by selecting Remove Master Page Layer from the Options menu in the Layers panel The visibility of the master page layer can be toggled by clicking on the eye icon to the left of the master page layer in the Layers panel If you change the master visibility on one page this change is reflected across all of the pages For more information about controlling the visibility of layers see Protecting layers and objects on page 162 To create a master page gt In
49. To select a mask or masked object independently Click the object on the canvas with the Subselection tool ADOBE FIREWORKS CS3 174 User Guide When selected masks have a green highlight and masked objects have a blue highlight Moving masks and masked objects You can reposition masks and masked objects They can be moved together or independently To move a mask and its masked objects together 1 Select the mask on the canvas using the Pointer tool 2 Drag the mask to a new location but don t drag the move handle unless you want to move the masked object separately from the mask To move masks and masked objects independently by unlinking 1 Click the link icon on the mask in the Layers panel This unlinks masks from masked objects so that they can be moved independently 100 Normal os Web Layer o f Layers A Link icon 2 Select the thumbnail of the object you want to move the mask or the masked objects 3 Drag the object or objects on the canvas with the Pointer tool Note If there is more than one masked object all masked objects move together 4 Click between the mask thumbnails in the Layers panel This relinks the masked objects to the mask To move a mask independently using its move handle 1 Select the mask on the canvas using the Pointer tool ADOBE FIREWORKS CS3 175 User Guide 2 Select the Subselection tool and drag the mask s move handle to a new location To move maske
50. URL panel Options menu 2 Click OK Editing URLs You can easily edit URLs using the URLs panel You can edit just a single occurrence of a URL or you can make your changes ripple throughout the document To edit a URL 1 Select the URL to be edited from the URL preview pane 2 Select Edit URL from the URL panel Options menu 3 Edit the URL Select Change All Occurrences in Document if you want to update this link throughout the entire document Importing and exporting URLs If the URL panel contains URLs that you want to use again in other Fireworks documents you can export them for later use You can then easily import them into any of your other Fireworks documents for easy access You can also import all URLs referenced in any existing HTML document To export URLs 1 Select Export URLs from the URL panel Options menu 2 Enter a filename and click Save An HTML file is created This file contains the URLs you have exported To import URLs 1 Select Import URLs from the URL panel Options menu ADOBE FIREWORKS CS3 199 User Guide 2 Select an HTML file and click Open All URLs in this file are imported 200 Chapter 11 Slices Rollovers and Hotspots Slices are the basic building blocks for creating interactivity in Fireworks Slices are web objects they exist not as images but ultimately as HTML code You can view select and rename them through the Web Layer in the Layers panel This chapter discusses the c
51. Without Slices option is not selected 6 Click Export Each slice is exported using its optimization settings as defined in the Optimize panel For more information about optimizing see About optimizing on page 257 Updating a slice If you ve already exported a sliced document and you ve made changes to the original document in Fireworks since you exported it you can update just the image or slice that changed without having to export and upload the entire sliced image It is recommended that you custom name slices so that you can easily locate the replacement slice For more information see Naming slices on page 213 To update a single slice 1 Hide the slice and edit the area underneath 2 Show the slice again 3 Right click Windows or Control click Macintosh the slice and select Export Selected Slice from the context menu 4 Click Export to export the slice into the same folder as the original slice using the same base name 5 Click OK when asked to replace the existing file ADOBE FIREWORKS CS3 279 User Guide If you retain the original filename for the updated slice and upload the slice to the same place on your website where the original came from the new slice replaces the original slice in the HTML document Note Avoid resizing the slice beyond its original export size in Fireworks or you could create unexpected results in the HTML document after the slice is updated Exporting an animation Aft
52. You can optimize the entire document at once or only selected slices The slice overlay helps you differentiate the slices currently being optimized from the rest of the document The slice overlay displays areas not currently being optimized with a dimmed transparent white tint You can turn the slice overlay on or off ADOBE FIREWORKS CS3 264 User Guide J Original B Preview T 2 up FH 4 Up Original Untitled 1 png 22 60K 3 sec 56kbps JPEG Slice When you optimize a selected slice the slices not being optimized are dimmed To preview a graphic based on the current optimization settings Click the Preview button in the upper left of the Document window Note Click Hide Slices in the Tools panel to hide slices and slice guides while previewing To compare views with different optimization settings 1 Click the 2 Up or 4 Up button in the upper left of the Document window 2 Click one of the split view previews to select it 3 Enter settings in the Optimize panel 4 Select the other previews and specify different optimization settings for each preview to compare them When you select 2 Up or 4 Up view the first split view displays the original Fireworks PNG document so that you can compare it with optimized versions You can switch this view with another optimized version To switch any optimized view to the Original view from 2 Up or 4 Up view 1 Select an optimized view 2 Select Original No Preview from the P
53. a custom texture You can use bitmap files from Fireworks and other applications as textures You can apply textures from files with these formats PNG GIF JPEG BMP TIFF and PICT Macintosh only When you add a new texture its name appears in the Texture Name pop up menu To create a new texture from an external file 1 With vector object properties displayed in the Property inspector select Other from either of the Texture Name pop up menus 2 Navigate to the bitmap file you want to use as the new texture and click Open The new texture is added to the Texture Name list in alphabetical order 147 Chapter 8 Using Live Filters Fireworks CS3 Live Filters formerly known as Live Effects are enhancements that you can apply to vector objects bitmap images and text Live Filters include bevels and embossing solid shadows drop shadows and glows color correction and blurring and sharpening You can apply Live Filters to selected objects directly from the Property inspector Fireworks automatically updates Live Filters when you edit objects that have them applied After you apply a Live Filter you can change its options anytime or rearrange the order of filters to experiment with a combined filter You can turn Live Filters on and off or delete them in the Property inspector When you remove a filter the object or image returns to its previous appearance Some filters now listed among Fireworks Live Filters such as Auto Level
54. a pattern or gradient fill A vector mask with a pattern fill applied using its grayscale appearance You can also convert vector masks into bitmap masks Bitmap masks cannot be converted into vector masks however For more information about vector and bitmap masks see About masks on page 164 To apply a vector mask using its path outline Select Path Outline in the Property inspector when a vector mask is selected To 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 To apply a bitmap mask using its alpha channel Select Alpha Channel in the Property inspector when a bitmap mask is selected To apply a vector or bitmap mask using its grayscale appearance Select Grayscale Appearance in the Property inspector when a mask is selected To convert a vector mask to a bitmap mask 1 In the Layers panel select the thumbnail of the mask object ADOBE FIREWORKS CS3 178 User Guide 2 Select Modify gt Flatten Selection Adding objects to a masked selection You can add more objects to an existing masked selection To add masked objects to a masked selection 1 Select Edit gt Cut to cut the selected object or objects you want to add 2 Select the thumbnail of the masked object in the Layers panel 3 Select Edit gt Paste Inside The object or objects are added to the masked objects Note U
55. active To show or hide a layer or objects on a layer Click the square in the column farthest to the left of a layer or object name The eye icon indicates that a layer is visible To show or hide multiple layers or objects Drag the pointer along the Eye column in the Layers panel To show or hide all layers and objects Select Show All or Hide All from the Layers panel Options menu Merging objects in the Layers panel If you work with bitmap objects you may find that the Layers panel easily becomes cluttered You can merge objects in the Layers panel if the bottommost selected object is immediately above a bitmap object Objects and bitmaps to be merged do not have to be adjacent in the Layers panel or reside on the same layer ADOBE FIREWORKS CS3 163 User Guide Merging down causes all selected vector objects and bitmap objects to be flattened into the bitmap object that lies just beneath the bottommost selected object The result is a single bitmap object Vector objects and bitmap objects cannot be edited separately once merged and editability for vector objects is lost To merge objects 1 Select the object or objects on the Layers panel that you want to merge with a bitmap object Shift click or Ctrl click to select more than one object You can merge the contents of a selected layer into a bitmap object that is the topmost object on the layer immedi ately beneath the selected layer 2 Do one of the following
56. active elements Fireworks HTML contains links to the exported images and sets the web page background color to the canvas color One or more image files depending on how many slices are in your document and how many states you include in buttons A file called spacer gif if necessary Spacer gif is a transparent 1 pixel by 1 pixel GIF that Fireworks uses to fix spacing problems when sliced images are reassembled in an HTML table You can choose whether Fireworks exports a spacer For more information see Setting HTML export options on page 287 e If your Fireworks document contains pop up menus and you export those pop up menus the following files are exported mm_css_menu js and a css file containing the CSS pop up menu code If your pop up menus contain submenus an arrows gif file is also exported e If you export or copy HTML to Dreamweaver notes files are created that facilitate the integration between Fireworks and Dreamweaver These files have an mno extension Exporting Fireworks HTML Fireworks lets you export HTML in Generic Dreamweaver FrontPage and Adobe GoLive formats Generic HTML works in most HTML editors Exporting Fireworks HTML generates an HTML file and the associated image files in a location you specify Note Fireworks also exports HTML when you export to CSS layers and to Director For more information about CSS layers see Exporting CSS layers on page 285 For more about Director see Worki
57. adding to a path Merging two open paths You can connect two open paths to form one continuous path When you connect two paths the topmost path s stroke fill and filter attributes become the attributes of the newly merged path ADOBE FIREWORKS CS3 100 User Guide To merge two open paths 1 Select the Pen tool in the Tools panel 2 Click the end point of one of the paths 3 Move the pointer to the end point of the other path and click Auto joining similar open paths You can easily join one open path with another that has similar stroke and fill characteristics To auto join two open paths 1 Select an open path 2 Select the Subselection tool and drag an end point of the path within a few pixels of the end point of the similar path The end point snaps to the other path and the two become a single path Editing paths Fireworks offers several methods for editing vector objects You can change an object s shape by moving adding or deleting points or you can move point handles to change the shape of adjacent path segments Freeform tools let you alter the shape of objects by editing paths directly You can also use path operations to create new shapes by combining or altering existing paths Editing with vector tools In addition to dragging points and point handles you can use several Fireworks tools to edit vector objects directly Bending and reshaping vector objects The Freeform tool allows you to bend and resha
58. addition you can export Fireworks frames and layers as separate image files The default location to which Fireworks exports files is determined by the following in this order 1 The document s current export preference which is defined if you ve ever exported the document and then saved the PNG ADOBE FIREWORKS CS3 277 User Guide 2 The current export save location which is defined anytime you browse away from the default location presented in a Save Save As Save a Copy or Export dialog box 3 The current file s location 4 The default location where new documents or images are saved on your operating system In contrast the default location where Fireworks saves a document is determined by a different set of criteria For more information see Saving Fireworks files on page 22 Exporting a single image You use the File gt Export command to export a graphic after you have finished optimizing it in the workspace If you are working with an existing image that you opened in Fireworks you can save it rather than export it For more information see Saving documents in other formats on page 23 Note To export only certain images in a document you must first slice your document and then export only the desired slices For more information see Exporting selected slices on page 278 To export a Fireworks document as a single image 1 Select the file format you would like to use for exporting in the Optimize pa
59. also in your user specific Fireworks configuration folder For more information see Working with configuration files on page 350 To run a batch script 1 Do one of the following In Fireworks select Commands gt Run Script Outside Fireworks double click the script filename on your hard disk 2 Select a script and click Open 3 Select the files to process with the script Current Open Files processes all open documents Custom lets you select files to process Note Click the Ellipsis button beside the Files to Process pop up menu to select files to process 4 Click OK For more information on selecting files see Batch processing on page 334 Running scripts by dragging and dropping If you have a batch process that you repeat frequently save it as a script then drag that script from your hard drive to the Fireworks icon on your desktop to run the batch process The Fireworks application launches and runs that script To run a script by dragging and dropping 1 Save a script 2 Do one of the following e Drag the script file icon onto the Fireworks desktop icon Drag the script file icon into an open Fireworks document Note Dragging multiple script files and multiple graphic files into Fireworks processes the graphic files multiple times once for each script Extending Fireworks Extending Fireworks has never been easier Fireworks offers a variety of different ways you can create custom command
60. and click Open 3 Ifnecessary deselect Preload Images if the external file is an animated GIF Pre caching can interrupt the display of animated GIFs as rollover states To avoid this problem deselect Preload Images when setting up the rollover Note If you plan to export your document for use on the web be sure that your external image file is accessible from the exported Fireworks HTML Fireworks creates document relative paths to image files It is a good idea to place external files in your local site before using them as swap images in Fireworks When you upload your files to the web be sure that the external image file is uploaded as well For more information on Fireworks HTML see Exporting HTML on page 280 Preparing slices for export Using the Property inspector you can make slices interactive by assigning links and targets to the slices You can also specify alternate text to be displayed in a browser while an image is loading In addition you can select an export file format to optimize a selected slice If the Property inspector is minimized click the expander arrow in the lower right corner to see all slice properties Slice Type Image v a Link http www myurl com w Untitled 1_r 4 GIF WebSnap 128 v Alt Go to my url W 57 X 288 Target _self v Hil ez Y 721 A Slice properties in the Property inspector ADOBE FIREWORKS CS3 212 User Guide Using the Property inspe
61. appear on the path you draw 4 Drag to draw To constrain the path to a horizontal or vertical line hold down Shift while dragging 5 Release the mouse button to end the path To close the path release the mouse button when you return the pointer to the point at the beginning of the path ADOBE FIREWORKS CS3 94 User Guide Drawing paths by plotting points One way to draw and edit vector objects in Fireworks is to plot points as if drawing a connect the dots picture When you click each point with the Pen tool Fireworks automatically draws the path of the vector object from the last point you clicked In addition to connecting the points with only straight segments the Pen tool can draw smooth mathematically derived curve segments known as Bezier curves Each points type corner point or curve point determines whether the adjacent curves are straight lines or curves You can modify straight and curved path segments by dragging their points You can further modify curved path segments by dragging their point handles You can also convert straight path segments to curved and vice versa by converting their points Drawing straight path segments Drawing straight line segments with the Pen tool is a simple matter of clicking to place the points Each click with the Pen tool plots a corner point To draw a path with straight line segments 1 oJ Select the Pen tool in the Tools panel 2 Ifdesired select Edit gt Preferences and
62. are converted to this setting 3 Click Next to continue the batch process For information on completing the batch process see Batch processing on page 334 ADOBE FIREWORKS CS3 338 User Guide Scaling graphics with a batch process You can alter the height and width of images being exported using the Scale option in the Batch Process dialog box To set scaling options for batch processed files 1 Select Scale from the Batch Options list and click Add 2 Inthe Scale pop up menu select an option No Scaling exports files unaltered Scale to Size scales images to the exact width and height you specify Scale to Fit Area makes images fit proportionally with the maximum width and height range you specify X Use Scale to Fit Area to convert a group of images to uniformly sized thumbnail images Scale to Percentage scales images by a percentage 3 Ifyou have chosen either Scale to Size or Scale to Fit Area in the Scale pop up menu you can also choose to scale only those documents that are currently larger than the target size To do so select the Only Scale Documents Currently Larger Than Target Size option 4 Click Next to continue the batch process For information on completing the batch process see Batch processing on page 334 Finding and replacing during a batch process You can find and replace text fonts colors or URLs in buttons hotspots or slices using the Find and Replace option in the Batch Process d
63. as Hexadecimal RGB or Grayscale and then select stroke and fill colors directly from the color bar or by entering specific color values Throughout the Fireworks workspace you will find color boxes that show the current color choices for options and object characteristics When you click a color box you see a color pop up window from which you can select a color for the color box Move the pointer away from an open color pop up window and you can click any color on your screen to apply it to the color box The Colors section of the Tools panel contains stroke and fill color controls and other color options The Bitmap section contains the Paint Bucket Gradient Fill and Eyedropper tools which you can use to apply color to bitmap selections areas of similar color and vector objects For information on these bitmap tools see Working with Bitmaps on page 61 Note For information about color correction using Live Filters and filters see Adjusting bitmap color and tone on page 71 This chapter contains the following topics e Using the Colors section of the Tools panel on page 126 e Organizing swatch groups and color models on page 127 e Using color boxes and color pop up windows on page 135 e Working with strokes on page 136 e Working with fills on page 140 Applying gradient and pattern fills on page 141 e Adding texture to strokes and fills on page 145 Using the Colors sectio
64. associated instances when you finish editing Note For most types of edits modifying an instance affects the symbol and all other instances There are some excep tions however For more information see Editing instances on page 193 To edit a symbol and all its instances 1 Do one of the following to open the Symbol Editor e Double click an instance ADOBE FIREWORKS CS3 User Guide e Select an instance and select Modify gt Symbol gt Edit Symbol e Select a symbol in the Library panel and choose Edit Symbol from the Options menu 2 Make changes to the symbol and close the window The symbol and all instances reflect the modifications Note Use the 9 slice scaling guides in the symbol editor to make sure the symbol shape is not distorted when it is resized For more information see Using 9 slice scaling on page 188 To rename a symbol 1 Double click the symbol name in the Library panel 2 Change the name in the Symbol Properties dialog box and click OK To duplicate a symbol 1 In the Library panel select the symbol 2 Select Duplicate from the Library panel Options menu To change a symbol s type 1 Double click the symbol name in the Library 2 Select a different Symbol Type option To select all unused symbols in the Library panel Choose Select Unused Items from the Library panel Options menu To delete a symbol 1 In the Library panel select the symbol 2 Select Delete from the Librar
65. bars 6 ccc ce cence eee eee nee enn ence een n eben ene E 228 Creating pop UpiMeNnUS merena rin r tense Vetus eee wag A ARA E Ges Madden gedals tans 229 Chapter 13 Creating Animations Building animation oys iae edn tek sts oe het ead alee Sed eee eens 238 Working with animation symbols 1 1 eee cece eee ene ence n tent n tent eee n ene enees 239 Working with frames priren saci we dea eh ween cae devas 8 eRe AR ea ee eee 242 TWEENING Serei eas eee cea eae eee nay E ace Seren UM ere Macca Merde Fred OES eR Sas 246 Previewing an animation 0 eee cece ee ete eee nnn e een ence een ence een e ne eeees 246 Exporting your animation 6 cece eee eee een e eee n nent n eee ee en eee aeae 247 Working with existing animations 0 cece cnc e erence eee n ene e en enenee 248 Using multiple files as one animation 6 eect e eee e ence eee e ence eneee 249 Chapter 14 Creating Slideshows The Create Slideshow command 1 eee eee cece eee teen eee ene n tent en tent eneneeanes 250 Building or editing a slideshow oo eee ccc cece nee een e nee n eben ee eee ee eeeneneee 250 Slideshow properties 2 2 055 deneri annA dane evi aie AARS EAA E aia aA REER 252 Creating a custom Fireworks album player s ssssssssuseserirssrerererrrrererrrerereres 254 Chapter 15 Optimizing and Exporting About optimizing _ dics ees saieadee ee eek Sees E AEA EAE E e 257 Using the EXport Wizard s wccisices basacache canines nucieuasacieesadaadlcna
66. bottom half of the Property inspector displays additional properties that allow you to edit the mask object s stroke and fill Y Properties Vector Mask Mask Path outline C show fill and stroke E 100 v Normal v z O Grayscale appearance Eee Co w 172 x 514 7 none w 2 s v iels iv H 172 Y 169 Edge Anti l Edge 0 v Vector mask properties in the Property inspector By default vector masks are applied using their path outline but you can also apply them in other ways For more information see Changing the way masks are applied on page 176 About bitmap masks If you re a Photoshop user you may be familiar with layer masks Fireworks bitmap masks are similar to layer masks in that the pixels of a mask object affect the visibility of underlying objects However Fireworks bitmap masks are much more versatile you can easily change how they are applied whether using their grayscale appearance or their own transparency In addition the Fireworks Property inspector makes mask properties and bitmap tool options more readily available greatly simplifying the mask editing process When a mask is selected the Property inspector displays a variety of properties not only for a selected mask but also for any bitmap tools you might use to edit the mask Original objects and a bitmap mask applied using its grayscale appearance You can apply bitmap masks i
67. box Doing so will copy the Fireworks HTML to the Clipboard and generate the associated image files in the location you specify You ll later paste this HTML into a document in your preferred HTML editor Although copying to the Clipboard is a fast way to get Fireworks HTML into other applications it is not ideal in every situation Copying HTML to the Clipboard has the following disadvantages e You don t have the option to save images into a subfolder They must reside in the same folder as the HTML file where you paste the copied HTML An exception is HTML copied to Dreamweaver e Any links or paths used in Fireworks pop up menus will map to your hard drive HTML copied to Dreamweaver is an exception If you use an HTML editor other than Dreamweaver or Microsoft FrontPage JavaScript code associated with buttons behaviors and rollover images is copied but may not function correctly If these issues pose a problem for you use the Export HTML option instead of copying HTML to the Clipboard Note Before you copy HTML code be sure that you ve selected the appropriate HTML style and chosen Include HTML Comments from the General tab of the HTML Setup dialog box For more information see Setting HTML export options on page 287 To copy Fireworks HTML using the Copy HTML Code option 1 Do one of the following e Select Edit gt Copy HTML Code e Click the Quick Export button and select Copy HTML Code from the pop up menu 2 Fol
68. broken Dreamweaver always prompts you to locate the source PNG file For more information on working with Fireworks graphics and interactive elements within Dreamweaver see Working with Dreamweaver on page 292 Folders preferences The folders preferences give you access to additional Adobe Photoshop plug ins texture files and pattern files from external sources Additional Materials Photoshop Plug Ins Textures and Patterns targets folders containing plug ins textures and patterns The folders can be in another folder on your hard disk on a CD ROM or other external drive or on a network volume Photoshop plug ins appear in the Fireworks Filters menu and the Property inspector s Add Effects menu Textures or patterns stored as PNG JPEG and GIF files appear as options in the Pattern and Texture pop up menus in the Property inspector For more information about textures and patterns see Adding texture to a fill on page 146 Photoshop Import preferences The preferences in the Import tab let you manage Photoshop file conversions e You can convert layers as objects or new frames e You can choose between editing imported text or maintaining its appearance e You can import a Photoshop file as a flattened bitmap object For more information on the Import preferences see Working with Photoshop on page 322 Restoring preferences You can restore preferences to their original settings by deleting the preferenc
69. by a slice Rollover effects are applied to hotspots the same way that they are to slices For more information see Adding simple interactivity to slices on page 206 ADOBE FIREWORKS CS3 219 User Guide Note A hotspot can trigger only a disjoint rollover It cannot be the target of a rollover coming from another hotspot or slice After you create a disjoint rollover with a hotspot the connecting blue line remains visible only while the hotspot is selected Using hotspots on top of slices You can place a hotspot on top of a slice to trigger an action or behavior You may want to do this if you have a large graphic and you want only a small portion of it to act as the trigger for an action For example perhaps you have a large graphic with text on it and you want just the text to trigger an action or behavior such as a rollover effect You could place a slice on top of the graphic and then a hotspot on top of the text Rolling over just the text triggers the rollover effect yet the entire graphic beneath the slice swaps out when the rollover effect occurs Avoid creating hotspots that overlap more than one slice or unpredictable behavior may result To create a trigger for a rollover effect using a hotspot on top of a slice 1 Insert a slice on top of the image you want to swap out 2 Create a new frame in the Frames panel and insert an image that you will use as your swapped image Be sure to place it beneath the
70. character width You can expand or contract the character width of horizontal text using the Horizontal Scale option in the Property inspector Horizontal scale is measured in percentage values 100 is the default A 100 Horizontal Scale option in the Property inspector If the Property inspector is minimized click the expander arrow in the lower right corner to see all properties To expand or contract selected characters In the Property inspector drag the Horizontal Scale pop up slider or enter a value in the text box Drag the slider higher than 100 to expand the width or height of the characters and drag it lower to reduce their width or height ADOBE FIREWORKS CS3 119 User Guide Setting baseline shift Baseline shift determines how closely text sits above or below its natural baseline If there is no baseline shift the text sits on the baseline You can use baseline shift to create subscript and superscript characters Non ESt quod contemnas hoc studendi genus The baseline shift controls are in the Property inspector Baseline shift is measured in pixels aglo_ Baseline Shift option in the Property inspector To set baseline shift for selected text In the Property inspector drag the Baseline Shift pop up slider or enter a value in the text box to specify how low or high respectively Fireworks should place the subscript or superscript text Enter positive values to create super script characters Enter n
71. characteristics such as ink amount tip shape and tip sensitivity and save the custom stroke as a style for reuse across many documents To create custom strokes 1 Do one of the following e Click the Stroke Color box in the Tools panel and then click Stroke Options e Select Stroke Options from the Stroke Options pop up menu in the Property inspector The Stroke Options pop up window opens 2 Edit the desired brush stroke attributes 3 Save your custom stroke attributes as a style For more information see Creating and deleting styles on page 184 Working with fills Using the Property inspector the Fill Options pop up menu the Fill Options pop up window and the Gradient pop up window as well as a collection of bitmap textures and patterns you can create a wide variety of fills for vector objects and text Using the Paint Bucket or Gradient tool you can also fill pixel selections based on current fill settings Setting fill attributes of the drawing tools You can set the fill attributes of the Rectangle Rounded Rectangle Ellipse Polygon and Auto Shape drawing tools that are applied to objects as you draw The current fill appears in the Fill Color box in the Property inspector the Tools panel and the Color Mixer You can use any of these panels to change a drawing tool s fill The paint bucket icon indicates the Fill Color box in the Tools panel the Property inspector and the Color Mixer To change the solid fill
72. click OK 4 Select Edit gt Paste to paste the object from the Clipboard into the new document ADOBE FIREWORKS CS3 16 User Guide Opening and importing files In Fireworks you can easily open import and edit both vector and bitmap images created in other graphics programs In addition you can import images from a digital camera or scanner Note Fireworks preserves many but not all JavaScript behaviors when you import a file from Adobe Dreamweaver If Fireworks supports a particular behavior it recognizes that behavior and maintains it when you move a file back to Dreamweaver To open a Fireworks document 1 Select File gt Open The Open dialog box appears 2 Select the file and click Open To open a file without overwriting the previous version select Open as Untitled and then save the file using a different name This section covers the following topics e Opening recently closed documents on page 16 e Opening graphics created in other applications on page 16 e Creating Fireworks PNG files from HTML files on page 17 e Inserting objects into a Fireworks document on page 18 Opening recently closed documents The File menu lists up to 10 recently closed documents in the Open Recent submenu The Start Page also lists recently closed documents To open a recently closed file 1 Select File gt Open Recent 2 Select a file from the submenu To open a recently closed file when no files
73. click the Direction control point to reset the x axis only e Double click the Perspective control point to reset the width of the shadow only For information about how to change the properties of an Auto Shape see Changing the properties of Auto Shapes on page 88 Changing the properties of Auto Shapes The Auto Shape Properties panel gives you precise numeric control over your Auto Shapes After inserting an Auto Shape you can use this panel to make changes to its properties The specific properties that you can change will vary with each Auto Shape you select For example if you ve inserted the Arrow shape you can change its width height thickness and more If you ve inserted the Star shape you can change its number of points radius and more You can also insert another Auto Shape into your document directly from the Auto Shape Properties panel Note This panel only supports Auto Shapes that appear in the Tools panel It does not support third party Auto Shapes or those in the Shapes panel Window gt Auto Shapes To change properties for your Auto Shape 1 Insert an Auto Shape into your document 2 Select Window gt Auto Shape Properties The Auto Shape Properties panel appears displaying the properties for the selected Auto Shape 3 Adjust the properties in the Auto Shape Properties panel For Rectangle shapes you can choose to lock the shape corners so that changes to one corner will affect all four VE You can als
74. color of applicable vector drawing tools and the Paint Bucket tool 1 Select a vector drawing tool or the Paint Bucket tool 2 Do one of the following Press Control D Windows or Command D Macintosh to deselect all objects and then click the Fill Color box in the Property inspector to open the Fill Color pop up window e Click the Fill Color box in the Tools panel or Color Mixer to open the color pop up window 3 Select a color for the fill from the set of swatches or sample a color from anywhere on the screen using the eyedropper pointer 4 Use the tool as desired Note Selecting the Text tool always causes the Fill Color box to revert to the last solid text color used by the Text tool ADOBE FIREWORKS CS3 141 User Guide Editing solid fills A solid fill is a solid color that fills the interior of an object You can change an object s fill color in the Tools panel Property inspector or Color Mixer To edit a selected vector object s solid fill 1 Click the Fill Color box in the Property inspector Tools panel or Color Mixer to open the color pop up window 2 Select a swatch from the color pop up window The fill appears in the selected object and becomes the active fill color Applying gradient and pattern fills You can change fills to display a variety of solid dithered pattern or gradient characteristics that range from solid colors to gradients These characteristics resemble satin ripples folds or gradi
75. delete a page the page above it becomes the active page Creating a duplicate page adds a new page that contains the same objects and layer hierarchy as the currently selected one Duplicated objects retain the opacity and blending mode of the objects from which they were copied You can make changes to the duplicated objects without affecting the originals To add a page do one of the following al Click the New Duplicate Page button on the Pages panel e Select Edit gt Insert gt Page e Select New Page from the Pages panel Options menu and click OK To delete a page do one of the following Drag the page to the trash can icon in the Pages panel Select the page and click the trash can icon in the Pages panel e Select Delete Page from the Pages panel Options menu To duplicate a page do one of the following Drag a page to the New Duplicate Page button e Select a page and select Duplicate Page from the Pages panel Options menu To move between pages do one of the following e Select the desired page in the Pages panel Use the Page Up and Page Down buttons on the keyboard e Choose the desired page from the pages pop up menu at the bottom of the document window y asterisk next to the page name in the pages pop up menu indicates the master page Editing pages Each page is a different canvas document The canvas size color and image resolution can be customized for each individual page as needed
76. e Layer masks convert to Fireworks object masks e Layer effects convert to Fireworks Live Filters if a corresponding Live Filter exists For example the Drop Shadow layer effect converts to a Drop Shadow Live Filter in Fireworks Note Layer effects and Live Filters may vary in appearance slightly e Blending modes for layers convert to Fireworks blending modes for corresponding objects if those blending modes are supported by Fireworks ADOBE FIREWORKS CS3 323 User Guide e The first alpha channel in the Channels palette converts to transparent areas in the Fireworks image Fireworks does not support additional Photoshop alpha channels Photoshop adjustment layers clipping groups and paths are not supported by Fireworks Fireworks ignores these features when importing Photoshop files However you can export paths to Illustrator in Photoshop and then import the AI file into Fireworks Note In Windows Photoshop filenames must include a PSD extension for Fireworks to recognize the Photoshop file type To import a Photoshop file into Fireworks 1 Select File gt Import or File gt Open and navigate to a Photoshop PSD file 2 Click Open The Photoshop file is imported into a PNG file If you make changes and want to save the file as a PSD you must export it to PSD format For more information see Placing Fireworks graphics in Photoshop on page 325 About importing text from Photoshop You can open or import a Photo
77. enable any of the following options on the Editing tab of the Preferences dialog box then click OK Show Pen Preview previews the line segment that would result from the next click Show Solid Points shows solid points while you draw Note On Mac OS X select Fireworks gt Preferences to open the Preferences dialog box 3 Click on the canvas to place the first corner point 4 Move the pointer and click to place the next point A straight line segment joins the two points 5 Continue plotting points Straight segments bridge each gap between points 6 Do one of the following to end the path either open or closed e Double click the last point to end the path as an open path e Select another tool to end the path as an open path Note When you select any selection tool or vector tool other than the Text tool and then return to the Pen tool Fireworks resumes drawing the object at your next click ADOBE FIREWORKS CS3 95 User Guide e To close the path click the first point you plotted The beginning and end points of a closed path are the same Note Loops formed by a path overlapping itself are not closed paths Only paths that begin and end on the same point are closed paths Drawing curved path segments To draw curved path segments you click and drag as you plot points As you draw the current point shows point handles Whether drawn with the Pen tool or with another Fireworks drawing tool all points on all vector objects ha
78. existing Fireworks document Note Fireworks can also import documents that use UTF 8 encoding and those that are written in XHTML For more information on these file types see Exporting files with and without UTF 8 encoding on page 286 and Exporting XHTML on page 286 To open all tables of an HTML file 1 Select File gt Reconstitute Table 2 Select the HTML file that contains the tables you want to open and click Open Each of the tables opens in its own document window To open only the first table of an HTML file 1 Select File gt Open 2 Select the HTML file that contains the table you want to open and click Open The first table in the HTML file opens in a new document window To import the first table of an HTML file into an open Fireworks document 1 Select File gt Import 2 Select the HTML file you want to import from and click Open 3 Click to place the insertion point where youd like the imported table to appear Inserting objects into a Fireworks document You can import drag or copy and paste vector objects bitmap images or text created in other applications into a Fireworks document You can also import images from a digital camera or scanner Dragging images into Fireworks You can drag vector objects bitmap images or text into Fireworks from any application that supports dragging These applications include the following e FreeHand 7 or later e Flash 3 or later e Photoshop 4 or la
79. following attributes can be saved in a style Fill type and color including patterns textures and vector gradient attributes such as angle position and opacity e Stroke type and color Filters e Text attributes such as font point size style bold italic or underline alignment anti aliasing auto kerning horizontal scale range kerning and leading To create a new style 1 Create or select a vector object or text with the stroke fill filter or text attributes you want 2 a Click the New Style button at the bottom of the Styles panel 3 Select the attributes you want to be part of the style from the New Style dialog box Note To save other text attributes not listed such as alignment anti aliasing auto kerning horizontal scale range kerning and leading select the Text Other option 184 ADOBE FIREWORKS CS3 185 User Guide 4 Name the style if you want and click OK An icon depicting the style appears in the Styles panel To base a new style on an existing style 1 Apply the existing style to a selected object 2 Edit the attributes of the object 3 Save the attributes by creating a new style as described in the previous procedure To delete a style 1 Select a style from the Styles panel Shift click to select multiple styles Control click Windows or Command click Macintosh to select multiple noncontiguous styles 2 a Click the Delete Style button in the Styles panel Editing styles
80. for creating editing and optimizing web graphics You can create and edit both bitmap and vector images design web effects such as rollovers and pop up menus crop and optimize graphics to reduce their file size and save time by automating repetitive tasks When a document is complete you can export or save it as a JPEG file GIF file or file of another format along with HTML files containing HTML tables and JavaS cript code for use on the web You also can export or save a type of file specific to another program such as Adobe Photoshop or Adobe Flash if you want to continue working in the other program Vector and bitmap objects In the Fireworks Tools panel you will find distinct sections containing tools for drawing and editing vectors and bitmaps For more information on these two basic formats see About vector and bitmap graphics on page 13 In Fireworks the tool you select determines whether the object you create is a vector or a bitmap For example select the Pen tool from the Vector section of the Tools panel and you can begin drawing vector paths by plotting points Select the Brush tool and you can drag to paint a bitmap object Select the Text tool and you can begin typing After drawing vector objects bitmap objects or text you can use a wide array of tools effects commands and techniques to enhance and complete your graphics You can use the Fireworks tools in the Button Editor to create interactive navigation b
81. from the workspace altogether To move a selection do one of the following e Drag it with the Pointer Subselection or Select Behind tool e Press any arrow key to move the selection in 1 pixel increments e 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 top left corner of the selection e Enter the object s x and y coordinates in the Info panel If the X and Y boxes aren t visible drag the bottom edge of the panel To move or copy selected objects by pasting 1 Select an object or multiple objects 2 Select Edit gt Cut or Edit gt Copy 3 Select Edit gt Paste To duplicate one or more selected objects Select Edit gt Duplicate As you repeat the command duplicates of the selected object appear in a cascading arrangement from the original 10 pixels lower and 10 pixels to the right of the previous duplicate The most recently duplicated object becomes the selected object ADOBE FIREWORKS CS3 54 User Guide Note You cannot use the Duplicate or Clone commands with bitmap selections Use the Subselection tool or Rubber Stamp tool to duplicate parts of a bitmap image For more information about using the Subselection tool see the following procedures For more information about using the Rubber Stamp tool see Retouching bitmaps on page 66 To duplicate a pixel selection do one of the fo
82. has a wide variety of brush stroke categories including Air Brush Calligraphy Charcoal Crayon and Unnatural Each category typically has a choice of strokes such as Light Marker and Dark Marker Splat tered Oil Bamboo Ribbon Confetti 3D Toothpaste and Viscous Alien Paint Although the strokes may look like paint or ink each has the points and paths of a vector object That means that you can change the shape of the stroke using any of several vector editing techniques After you reshape the path the stroke is redrawn For more precise path smoothing you can change the number of points that appear on the path in the Precision box in the Property inspector before you draw the path eee ed A painting edited by moving vector points You can also modify existing brush strokes and add fills to selected objects you have drawn with the Vector Path tool The new stroke and fill settings are retained for subsequent use of the Vector Path tool in the current document To draw a freeform vector path 1 From the Pen tool pop up menu select the Vector Path tool 2 If desired set stroke attributes and Vector Path tool options in the Property inspector See Applying Color Strokes and Fills on page 126 3 If desired change the precision level of the path by selecting a number from the Precision pop up menu in the Property inspector for the vector path tool The higher the number you select the greater the number of points that
83. image file is not in the current Dreamweaver site a message appears asking whether you want to copy the file to the site folder Creating new Fireworks files from Dreamweaver placeholders Image placeholders combine the power of Fireworks and Dreamweaver by allowing you to experiment with various web page layouts before creating the final artwork for your page Image placeholders allow you to specify the size and position of future Fireworks images to be placed in Dreamweaver ADOBE FIREWORKS CS3 293 User Guide When you create a Fireworks image from a Dreamweaver image placeholder a new Fireworks document is created with a canvas of the same dimensions as the selected placeholder Inside Fireworks you can use any Fireworks tools to create your graphic You can even slice your document and add interactivity using buttons rollovers and other behaviors Note All behaviors applied within Fireworks are preserved upon export back to Dreamweaver Likewise most Dream weaver behaviors applied to image placeholders are also preserved during launch and edit with Fireworks There is one exception however disjoint rollovers applied to image placeholders in Dreamweaver are not preserved when opened and edited in Fireworks Once the Fireworks session has ended and you ve returned to Dreamweaver the new Fireworks graphic you created takes the place of the image placeholder originally selected To create a Fireworks image from an image placeholder i
84. in 2 Up or 4 Up view is not recommended To preview an animation in a web browser Select File gt Preview in Browser and select a browser from the submenu Note Animated GIF must be selected as the Export file format in the Optimize panel or no motion will be visible when you preview the document in your browser This is required even if you plan to import your animation into Flash as a SWE or Fireworks PNG file Exporting your animation After you set up the symbols and frames that make up your animation you are ready to export the file as an animation Before you export the files you need to enter a few settings to make your animation load more easily and play more smoothly You can set playback settings like looping and transparency and then use optimization to make your exported file smaller and easier to download Note If you plan to import your animation into Flash for further editing you do not need to export it Flash can directly import Fireworks PNG source files For more information see Working with Flash on page 305 Setting the animation repetition The Loop setting in the Frames panel determines how many times the animation repeats This feature loops frames over and over so you can minimize the number of frames needed to build the animation To set the selected animation to repeat 1 Select Window gt Frames to display the Frames panel 2 gt Click the GIF Animation Looping button at the bottom of the panel
85. in either the Property inspector or the Layers panel Fireworks reverts to auto naming Auto naming assigns a unique name to each slice file automatically based on the default naming convention To auto name a slice file When you export your sliced image enter a name in the File Name Windows or Name Macintosh text box in the Export dialog box Do not add a file extension Fireworks automatically adds file extensions to slice files upon export Changing the default auto naming convention You can change the naming convention for slices from the Document Specific tab in the HTML Setup dialog box Fireworks lets you specify your own naming convention using a wide range of naming options You can create a naming convention that contains up to eight elements An element can consist of any of the following auto naming options Option Description None No name is applied to the element doc name The element takes the name of the document slice You can insert the word slice into the naming convention ADOBE FIREWORKS CS3 User Guide Option Description Slice 1 2 3 The element is labeled numerically or alphabetically according to the style you select Slice 01 02 03 Slice A B C Slice a b c row column r3_c2 r4_c7 Row r and Col c designate the rows and columns of the table that web browsers use to reconstruct a sliced image You can use this information
86. in the naming convention Underscore The element uses any of these characters typically as separators between other elements Period Space Hyphen For example if the document name is mydoc the naming convention doc name slice Slice A B C results in a slice called mydocsliceA Chances are that you will never require a naming convention that uses all eight elements If a slice has more than one frame by default Fireworks adds a number to each frame s file For example if you enter the custom slice filename home for a three state button then Fireworks names the Up state graphic home gif the Over state graphic home_f2 gif and the Down state graphic home_f3 gif You can create your own naming convention for multiframe slices using the HTML Setup dialog box To change the default auto naming convention 1 Select File gt HTML Setup to open the HTML Setup dialog box 2 Click the Document Specific tab 3 Inthe File Names section create your new naming convention by selecting from the lists HTML Setup General Table Document Specific Slice file names doc name sj underscore v rowjcolumn r3_c2 r4_c7 Y None v None v None y Frame names Underscore wv Frame F2 F3 f4 v Example Untitled 1_r1_c2_f2 gif Default ALT tag C Export multiple nav bar HTML files for use without frame sets M Include areas without slice objects UTF
87. is lost Render Text turns text into an image object When you choose this option you preserve the appearance of the text at expense of the ability to edit it About working with Illustrator Fireworks provides support for importing native Illustrator AI CS2 and CS3 files with options for retaining many aspects of the imported files including layers patterns and linked images As a result you can bring Illustrator images into Fireworks for further editing and web optimization You can also export Illustrator files from Fireworks that are compatible with the Illustrator 8 0 software The following features are preserved when importing Illustrator files Bezier Points The number and position of Bezier points will be preserved Colors Colors will be preserved as closely as possible when importing AI content to Fireworks Text Attributes The following font attributes will be preserved e Font e Size e Color e Bold e Italic e Align Left Right Center Justify e Orientation Horizontal Vertical Left to Right Vertical Right to Left e Letter Spacing e Character Position Normal SuperScript SubScript e Auto kerning e Kerning pairs Gradient Fills Gradients will be imported as native Fireworks gradients All of the ramp points of the gradient will be preserved ADOBE FIREWORKS CS3 327 User Guide Images Illustrator AI files can contain linked files and placed files of the following types PDF BMP EPS GIF JPE
88. languages To participate in forums or blogs visit www adobe com communities What s new in Fireworks CS3 Create rich symbols This version of Fireworks introduces new and enhanced symbol features Create graphic symbols that can be intel ligently scaled and given specific attributes using a JavaScript JSF file Quickly mock up a user interface by dragging these symbols on to the document and editing the parameters associated with them using the new Symbol Properties panel Rich symbols Symbol Properties panel This new panel is a central location where you can control the properties for intelligent graphic symbols Enhanced graphic symbol An enhancement to the graphic symbol allows the creation of customizable symbol properties using JavaScript Symbol library Apre designed library of graphic symbols that utilize the new functionality has been included in this software release These can be customized to accommo date the look and feel of a particular website or user interface Swap symbols A new swap symbol feature allows you to easily swap symbols as you are designing your document For more information see Creating and using rich graphic symbols on page 190 Intelligent scaling for symbols Traditionally when you apply scale transformations to symbols the entire object is transformed as a single unit With certain kinds of objects especially geometric shapes with styled corners the result is a symb
89. layer or object and press Enter Note The Web Layer cannot be renamed However you can rename sub layers of the Web Layer and web objects on the Web Layer such as slices and hotspots For more information see Using the Web Layer on page 163 To move a layer or object Drag the layer or object to the desired location in the Layers panel To move all selected objects on a layer to another location do one of the following Drag the layer s blue selection indicator to another layer e After selecting the objects click once in the right hand column where the blue selection indicator would normally appear of the destination layer All selected objects on the layer move to the other layer simultaneously Note A parent layer cannot be dragged into its child layer To copy all selected objects on a layer to another location do one of the following Alt drag Windows or Option drag Macintosh the layer s blue selection indicator to another layer e After selecting the objects Alt click Windows or Option click Macintosh once in the right hand column where the blue selection indicator would normally appear of the destination layer Fireworks copies all selected objects on the layer to the other layer ADOBE FIREWORKS CS3 162 User Guide Protecting layers and objects The Layers panel offers a number of options that let you control the accessibility of objects You can protect objects in your document from ina
90. left corner away from the panel docking area on the right side of the screen To dock a panel group Drag the panel gripper onto the panel docking area As you drag a panel or panel group over the panel docking area a placement preview line or rectangle shows where it would be placed among the groups To collapse or expand a panel group or panel do one of the following e Click the title of the panel group or panel Note The title bar is still visible when the panel group or panel is collapsed e Click the expander arrow in the upper left corner of the panel group or panel To undock a panel from a panel group do one of the following e Click on the panel and drag the panel out of the panel group Drop the panel in the desired new location ADOBE FIREWORKS CS3 29 User Guide e Select Group With gt New Panel Group from the Options menu in the panel group s title bar The Group With command s name changes depending on the name of the active panel The panel appears in a new panel group of its own To dock a panel in a panel group do one of the following e Make sure both the panel and the panel group are open Click on the panel and drag it to the panel group e Select the name of a panel group from the Group With submenu of the panel group s Options menu The Group With command s name changes depending on the name of the active panel To rename a panel group 1 Click the icon in the upper right of the panel group an
91. marquee selection Feather lets you soften the edge of the pixel selection When using a selection tool you can set the Feather option before creating a selection or you can feather existing selections by selecting the Live marquee box You can also feather existing selections using the Feather command in the Select menu For more information see Feathering a pixel selection on page 49 When you select the Marquee or Oval Marquee the Property inspector also displays three style options Normal lets you create a marquee in which the height and width are independent of each other Fixed Ratio constrains the height and width to defined ratios Fixed Size sets the height and width to a defined dimension ADOBE FIREWORKS CS3 45 User Guide Note The Magic Wand tool also has a Tolerance setting For more information see Selecting areas of similar color on page 46 Creating pixel selection marquees The Marquee Oval Marquee and Lasso tools in the Bitmap section of the Tools panel allow you to select specific pixel areas of a bitmap image by drawing a marquee around them Note If you want to be able to change the settings for your selection while using one of these tools be sure that you selected the Live marquee box before making your selection To select a rectangular or elliptical area of pixels 1 Select the Marquee or Oval Marquee tool 2 Set the Style and Edge options in the Property inspector For more information
92. menu in the Pop up Menu Editor see Editing pop up menus on page 236 2 Select Vertical or Horizontal from the Orientation pop up menu To set whether a pop up menu is HTML or image based 1 With the desired pop up menu open in the Pop up Menu Editor click the Appearance tab For information on opening an existing pop up menu in the Pop up Menu Editor see Editing pop up menus on page 236 2 Select a Cells option HTML sets the menu s appearance using HTML code only This setting produces pages with smaller file sizes Image gives you a selection of graphic image styles to use as the cell background This setting produces pages with larger file sizes Note You can add to this selection of styles by creating custom pop up menu styles For more information see Adding pop up menu styles on page 233 To format text in the current pop up menu 1 With the desired pop up menu open in the Pop up Menu Editor click the Appearance tab ADOBE FIREWORKS CS3 233 User Guide For information on opening an existing pop up menu in the Pop up Menu Editor see Editing pop up menus on page 236 2 Select a preset size from the Size pop up menu or enter a value in the Size text box Note When cell width and height are set to Automatic in the Advanced tab of the Pop up Menu Editor text size deter mines the size of graphics associated with the menu item 3 Select a system font group from the Font pop up menu or enter
93. most other HTML editors The only exception is that you must choose GoLive HTML as your HTML style before you export or copy HTML from Fireworks For more information about choosing an HTML style and exporting Fireworks HTML see Fireworks Help Note The GoLive HTML style does not support pop up menu code If your Fireworks document contains pop up menus you should choose Generic HTML as the HTML style before exporting About working with HTML editors Fireworks generates pure HTML that can be read by all HTML editors For general information on placing Fireworks HTML into HTML editors see Fireworks Help Fireworks can also import HTML content This is a powerful feature allowing you to open and edit most any HTML document within Fireworks For more information see Fireworks Help ADOBE FIREWORKS CS3 328 User Guide About extending Fireworks If you are proficient in JavaScript and Fireworks you can use JavaScript to write your own objects and commands that affect Fireworks documents and the elements within them In addition you can use Fireworks Cross Product Communication Architecture to allow ActionScript 2 0 and C applications to control Fireworks For more information see Extending Fireworks Help About Adobe XMP Adobe XMP eXtensible Metadata Platform is a technology that assists the user in adding file information to files saved in PNG GIF JPEG Photoshop and TIFF formats XMP facilitates the exchange of metadata betw
94. new bitmap masks using the Layers panel For more information about masking see Masking images on page 164 Opacity and blend mode controls are at the top of the Layers panel For more information see Adjusting opacity and applying blends on page 181 ecm Layers VCI 100 Normal 7 L Web Layer Hy Frame 1 365 ao g e FGHI A Expand Collapse Layer B Lock Unlock Layer C Show Hide Layer D Active Layer E Delete Layer F New Duplicate Layer G New Sub Layer H Add Mask I New Bitmap Image Activating layers When you click a layer or an object on a layer that layer becomes the active layer Objects that you subsequently draw paste or import reside initially at the top of the active layer ADOBE FIREWORKS CS3 160 User Guide To activate a layer do one of the following e Click the layer name in the Layers panel e Select an object on that layer Adding and removing layers Using the Layers panel you can add new layers add new sub layers delete unwanted layers and duplicate existing layers and objects When you create a new layer a blank layer is inserted above the currently selected layer The new layer becomes the active layer and is highlighted in the Layers panel When you delete a layer the layer above it becomes the active layer unless it is the last remaining layer in which case a new empty layer is created Creating a duplicate layer adds a new layer that contains the same obj
95. of up to 256 colors available to the file Only colors defined in the color palette appear in the graphic however some color palettes contain colors that are not in the graphic The following palettes are available in Fireworks Adaptive is a custom palette derived from the actual colors in the document Adaptive palettes most often produce the highest quality image Web Adaptive is an adaptive palette in which colors that are close to websafe colors are converted to the closest websafe color Websafe colors are those that come from the Web 216 palette Web 216 is a palette of the 216 colors common to both Windows and Macintosh computers This palette is often called a websafe or browser safe palette because it produces fairly consistent results in various web browsers on either platform when viewed on 8 bit monitors Exact contains the exact colors used in the image Only images containing 256 or fewer colors may use the Exact palette If the image contains more than 256 colors the palette switches to Adaptive Windows and Macintosh each contain the 256 colors defined by the Windows or Macintosh platform standards respectively Grayscale is a palette of 256 or fewer shades of gray Choosing this palette converts the image to grayscale Black and White is a two color palette consisting only of black and white Uniform is a mathematical palette based on RGB pixel values Custom is a palette that has been modified or loaded from an externa
96. on that same coordinate move with it To resize one or more slices 1 Position the Pointer or Subselection tool over a slice guide ADOBE FIREWORKS CS3 205 User Guide The pointer changes to the guide movement pointer 2 Drag the slice guide to the desired location The slices are resized and all adjacent slices are automatically resized as well To reposition a slice guide to the far edge of the canvas Use the Pointer or Subselection tool to drag the slice guide beyond the edge of the canvas To move adjacent slice guides 1 Shift drag a slice guide across adjacent slices guides 2 Release the slice guide in the desired location All slice guides that you dragged across are moved to this location You can cancel this operation by releasing the Shift key before you release the mouse button All slice guides that were picked up snap back to their original positions Using tools to edit slice objects You can use the Pointer Subselection and Transform tools to reshape or resize a slice You can skew and distort only polygon slices Note Resizing and reshaping slices using these tools can create overlapping slices because the size of adjacent slice objects is not automatically adjusted When slices overlap the topmost slice takes precedence if interactivity is involved To avoid overlapping slices use slice guides to edit slices For more information see Moving slice guides to edit slices on page 204 To edit
97. one of the following to open the Motion Blur dialog box e In the Property inspector click the Add Live Filters button and select Blur gt Motion Blur from the Filters pop up menu e Select Filters gt Blur gt Motion Blur ADOBE FIREWORKS CS3 80 User Guide 3 Drag the Angle dial to set the direction of the blur effect 4 Drag the Distance slider to set the strength of the blur effect Values range from 1 to 100 An increase in distance results in a stronger blur effect 5 Click OK To blur an image using Radial Blur 1 Select the image 2 Do one of the following to open the Radial Blur dialog box e In the Property inspector click the Add Live Filters button and select Blur gt Radial Blur from the Filters pop up menu e Select Filters gt Blur gt Radial Blur 3 Drag the Amount slider to set the strength of the blur effect Values range from 1 to 100 An increase in amount results in a stronger blur effect 4 Drag the Quality slider to set the smoothness of the blur effect Values range from 1 to 100 An increase in quality results in a blur effect with fewer repetitions of the original image 5 Click OK To blur an image using Zoom Blur 1 Select the image 2 Do one of the following to open the Zoom Blur dialog box e In the Property inspector click the Add Live Filters button and select Blur gt Zoom Blur from the Filters pop up menu e Select Filters gt Blur gt Zoom Blur 3 Drag the Amount s
98. or ActionScript you can create your own Fireworks panel by designing and coding it in Flash and exporting it as a SWF movie If dropped into the Command Panels folder on your hard disk the movie will appear as a panel in the Fireworks Window menu Note The exact location of this folder varies from system to system and depends on whether you want the panel to be available just to your user profile or to all users Command Panels folders are located in the Configuration folder in the Fireworks application folder and also in your user specific Fireworks configuration folder For more information see Working with configuration files on page 350 For more information about using Flash SWFs as Fireworks panels see Extending Fireworks 346 Chapter 18 Preferences and Keyboard Shortcuts Fireworks CS3 preference settings let you control the general appearance of the user interface as well as editing and folder aspects In addition Fireworks allows you to customize your keyboard shortcuts This means that you can customize your shortcuts and standardize them among your favorite software programs This chapter covers the following topics e Setting preferences on page 346 e Changing keyboard shortcut sets on page 349 e Working with configuration files on page 350 e About reinstalling Fireworks on page 351 e Viewing package contents Macintosh only on page 352 Setting preferences Fireworks has preferenc
99. preferences you ve selected the second pointer is a rubber stamp a cross hair or a blue circle As you drag the second pointer pixels beneath the first pointer are copied and applied to the area beneath the second To set Rubber Stamp tool options 1 Select the Rubber Stamp tool 2 Select from among the following options in the Property inspector Size determines the size of the stamp Edge determines the softness of the stroke 100 is hard 0 is soft Source Aligned affects the sampling operation When Source Aligned is selected the sampling pointer moves verti cally and horizontally in alignment with the second When Source Aligned is deselected the sample area is fixed regardless of where you move and click the second pointer Use Entire Document samples from all objects on all layers When this option is deselected the Rubber Stamp tool samples from the active object only Opacity determines how much of the background can be seen through the stroke Blend Mode affects how the cloned image affects the background To duplicate a pixel selection do one of the following Drag the pixel selection with the Subselection tool Alt drag Windows or Option drag Macintosh the pixel selection using the Pointer tool Blurring sharpening and smudging pixels The Blur and Sharpen tools affect the focus of pixels The Blur tool lets you emphasize or de emphasize parts of an image by selectively blurring the focus of elements m
100. preview window Sort images within an album e Remove unwanted images and or albums e Apply image intervals how long the image stays on screen in seconds for a specific album or for all albums e Apply slide transitions to images in the album Export the slideshow to a specific folder e Use a default Fireworks album player for your slideshow or find more players on the Fireworks Adobe Exchange site The Create Slideshow output is built so that any Flash designer developer can build a Fireworks Album Player in Flash that uses the generated XML output Building or editing a slideshow The Create Slideshow command allows you to create a Flash based or non Flash slideshow by selecting a folder with images adding slideshow options and then generating a slideshow for use on the web You can edit existing slideshows by adding or deleting images or by adding multiple albums to a single slideshow ADOBE FIREWORKS CS3 251 User Guide If you are a Flash designer or developer you can also build a custom album player in Flash to display the Fireworks Album Creator s XML output For more information see Creating a custom Fireworks album player on page 254 x Al Albums Create Slideshow vt 5 Albums A v AlbumBook Properties Title Folder name Q The Kids images Title The Kids The bab stuff y Description Travels with the kids Player Dreamweaver Style Web Phot
101. response to mouse movement The Find panel lets you search for and replace elements such as text URLs fonts and colors in a document or multiple documents The Create Symbol Script panel automates the creation of JavaScript files for customizable graphic symbols The Align panel contains controls for aligning and distributing objects on the canvas The Auto Shape Properties panel lets you make changes to the properties of an Auto Shape after you insert one into your document Color Palette panel under Others gives you the ability to create and swap color palettes export custom ACT color swatches explore various color schemes and access commonly used controls for choosing colors Image Editing under Others organizes common tools and options used for bitmap editing into one panel Path panel under Others provides quick access to many path related commands Special Characters under Others displays the special characters that can be used in text blocks Symbol Properties manages the customizable properties of graphic symbols Organizing panel groups and panels By default Fireworks panels are docked in groups in the docking area on the right side of the workspace You can undock panel groups add panels to a group undock individual panels rearrange the order of docked panel groups and collapse and close panel groups You can also open and close individual panels To undock or move a panel group Drag the panel gripper on the upper
102. sampled colors to the Swatches panel 2 Select Save Swatches from the Swatches panel Options menu The Export Swatches dialog box opens 3 Select a filename and directory and click Save Clearing and sorting swatches You can clear and sort swatches using the Swatches panel Options menu To clear or sort swatches Select one of the following from the Swatches panel Options menu Clear Swatches clears the entire Swatches panel Sort by Color sorts the swatches by color value Creating colors in the Color Mixer In the Color Mixer you can create colors by dragging sliders or entering values for each component of a color model such as RGB Hexadecimal or CMY The color you create is applied to the active Stroke Color or Fill Color box The Color Mixer also has a color bar displaying the range of colors in the current color model You can click anywhere in the color bar to apply a color You can also click the system color picker button to select a Windows or Macintosh system color 129 ADOBE FIREWORKS CS3 130 User Guide Although CMY is a color model option graphics directly exported from Fireworks are not ideal for printing To AE eourpose exported Fireworks graphics for print you can import them into Adobe Illustrator Adobe Photoshop or Adobe FreeHand which automatically perform CMYK conversion of RGB images when output to digital color separations For more information see the documentation for those programs Mixing
103. see Bitmap selection tool options on page 44 3 Drag to draw a selection marquee which defines the pixel selection To draw additional square or circular marquees hold down Shift as you drag the Marquee or Oval Marquee tool If Live marquee is turned on while you make a series of selections the Live marquee feature only affects the last selection in the series To draw a marquee from a center point deselect any other active marquees and then hold down Alt Windows or Option Macintosh as you draw To select a freeform area of pixels 1 Select the Lasso tool 2 Select an Edge option in the Property inspector For more information see Bitmap selection tool options on page 44 3 Drag the pointer around the pixels you want to select Plotting points to create a marquee selection The Polygon Lasso tool allows you to select specific pixels in a bitmap image by clicking repeatedly around the perimeter of the pixel area you want to select To select a polygonal area of pixels 1 Select the Polygon Lasso tool 2 Select an Edge option in the Property inspector For more information see Bitmap selection tool options on page 44 3 Click to plot points around the perimeter of the object or area to outline the selection Hold down Shift to constrain Polygon Lasso marquee segments to 45 increments 4 Do one of the following to close the polygon e Click the starting point e Double click in the workspace ADOBE
104. selection on a selected bitmap from the intersection of overlapping objects 1 Control click Windows or Command click Macintosh an object s thumbnail to select its alpha channel or opaque area The pointer changes to indicate you are about to select the alpha channel or the opaque area of the object 2 Control Shift Alt click Windows or Command Shift Option click Macintosh another object ADOBE FIREWORKS CS3 49 User Guide A pixel selection is created on the selected bitmap from the intersection of the opaque areas of the two overlapping objects When you position the pointer over the thumbnail and hold down the specified modifier keys the pointer indicates that you are about to create a pixel selection from the intersection of the opaque areas of two overlapping objects Creating an inverse pixel selection Starting with a current pixel selection you can create another pixel selection that selects all the pixels that are not currently selected You can use this method to select and then erase all pixels surrounding the original selection for example To create an inverse pixel selection 1 Make a pixel selection using any bitmap selection tool 2 Choose Select gt Select Inverse All pixels that were not in the original selection are now selected Feathering a pixel selection Feathering creates a see through effect for the selected pixels When using the Feather command you can try out various feather amount
105. set in Dreamweaver Preferences opens the file When images are opened from this location Fireworks does not open the original PNG file To use the Fireworks integration features open images from within the Dreamweaver Document window ADOBE FIREWORKS CS3 299 User Guide Editing Fireworks tables When you open and edit an image slice that is part of a placed Fireworks table Dreamweaver automatically opens the source PNG file for the entire table Before editing Fireworks tables from Dreamweaver you should perform some preliminary tasks For more infor mation see Setting launch and edit options on page 302 Note You may get a Dreamweaver error if you nest another table inside the original Fireworks generated table and then try to edit the table using Roundtrip editing in Dreamweaver For more information see TechNote 19231 on the Adobe website To open and edit a Fireworks table placed in Dreamweaver 1 In Dreamweaver choose Window gt Properties to open the Property inspector if it is not already open 2 Do one of the following e Click inside the table and click the TABLE tag in the status bar to select the entire table The Property inspector identifies the selection as a Fireworks table and displays the name of the known PNG source file for the table Then click Edit in the Property inspector e Click the upper left corner of the table to select it and then click Edit in the Property inspector e Select an image in
106. settings The preview buttons in the Document window show how the exported graphic would appear with the current optimization settings You can optimize the whole document the same way or select individual slices or selected areas of a JPEG and assign different optimization settings for each Using optimization settings You can select from common optimization settings in the Property inspector or the Optimize panel to quickly set a file format and apply several format specific settings When you select an option from the Default export options pop up menu in the Property inspector the rest of the options in the Optimize panel are automatically set for you You can further adjust each option individually if desired If you need more custom optimization control than the preset options offer you can create custom optimization settings in the Optimize panel You can also modify a graphic s color palette using the color table in the Optimize panel vy Optimize GIF WebSnap 128 GIF v Matte Web Adaptive Colors 128 v Loss 0 w Dither 0 No Transparency v EA EA E ES To select a preset optimization Select a preset from the Settings pop up menu in the Property inspector or the Optimize panel GIF Web 216 forces all colors to websafe colors The color palette contains up to 216 colors see Optimizing GIF PNG TIFF BMP and PICT files on page 265 GIF WebSnap 256 converts non websaf
107. size and shape of the Brush Eraser Blur Sharpen Dodge Burn and Smudge tool pointers to accurately reflect what you are about to draw or erase For certain large multi tipped brushes the cross hair pointer is used by default When this option and Precise Cursors are turned off tool icon pointers are displayed Precise cursors replaces tool icon pointers with the cross hair pointer Turn off hide edges automatically disables Hide Edges when the selection changes Show pen preview provides a preview of the next path segment that will be created if you click at that moment with the Pen tool Show solid points shows selected points as hollow and deselected points as solid Mouse highlight Highlights what you would select if you were to click on the object that is currently beneath the mouse Preview drag Shows a preview of the new object location when dragging Show fill handles Allows the onscreen editing of fills Pick distance lets you specify how close to an object the pointer must be before you can select it Pick Distance can be between 1 and 10 pixels Snap distance lets you specify how close the object you are moving must be before it snaps to a grid or guide line Snap Distance works when Snap to Grid or Snap to Guides is turned on Snap Distance can be between 1 and 10 pixels Launch and Edit preferences By setting launch and edit preferences you can control how external applications such as Adobe Flash and Adobe Dire
108. slice or hotspot already covers the image 2 Create a new frame by clicking the New Duplicate Frame button in the Frames panel 3 Place a second image to be used as the target in the new frame in the desired location on the canvas You can place the image anywhere other than beneath the slice you created in step 1 4 Select the image and then select Edit gt Insert gt Slice to attach a slice to the image 5 Select Frame 1 in the Frames panel to return to the frame that has the original image 6 Select the slice hotspot or button that covers the trigger area the original image and place the pointer over the behavior handle The pointer changes to a hand 7 Drag the behavior handle for the trigger slice or hotspot to the target slice you created in step 4 The behavior line extends from the center of the trigger to the upper left corner of the target slice and the Swap Image dialog box opens Swap Image Swap Image From Frame 2 8 From the Swap Image From pop up menu select the frame you created in step 2 and click OK 9 Click the Preview button to preview and test the disjoint rollover Applying multiple rollovers to a slice You can drag more than one behavior handle from a single slice to create multiple swap behaviors For example you can trigger a rollover and a disjoint rollover from the same slice ADOBE FIREWORKS CS3 209 User Guide A slice triggering a rollover behavior and a disjoint
109. slice you inserted in step 1 3 Drag a behavior line from the hotspot to the slice that contains the image you want to swap The Swap Image dialog box opens 4 Select the frame holding the rollover image from the Swap Image From list and click OK 220 Chapter 12 Creating Buttons and Pop up Menus In Fireworks you can create a variety of JavaScript buttons and Cascading Style Sheet CSS or JavaScript pop up menus even if you know nothing about JavaScript and CSS code The Fireworks Button Editor leads you through the button creation process automating many button making tasks The result is a convenient button symbol After you ve created a button symbol you can easily create instances of the symbol to make a navigation bar or nav bar Fireworks also has a Pop up Menu Editor which allows you to quickly and easily create vertical or horizontal pop up menus The Advanced tab of the Pop up Menu Editor gives you creative control over cell spacing and padding text indention cell borders and other properties When you export a button or pop up menu Fireworks automatically generates the CSS code or JavaScript necessary to display it in a web browser In Adobe Dreamweaver you can easily insert CSS code JavaScript and HTML code from Fireworks into your web pages or you can cut and paste the code into any HTML or CSS file This chapter contains the following topics e Creating button symbols on page 220 e Creating navigat
110. specific point in the tonal range 1 Select the image 2 Do one of the following to open the Curves dialog box In the Property inspector click the Plus button beside the Filters label and then select Adjust Color gt Curves from the Filters pop up menu Note If the Property inspector is partially minimized click the Add Filters button instead of the Plus button e Select Filters gt Adjust Color gt Curves Note Applying a filter from the Filters menu is destructive that is it cannot be undone except when Edit gt Undo is an option To maintain the ability to adjust turn off or remove this filter apply it as a Live Filter as described in the first bulleted option in this step For more information see Using Live Filters on page 147 ADOBE FIREWORKS CS3 75 User Guide Channel 3 F A A Preview Input 10 Output 0 Curves dialog box 3 In the Channel pop up menu select whether you want to apply changes to individual color channels or to all colors 4 Clicka point on the grid s diagonal line and drag it to a new position to adjust the curve Each point on the curve has its own Input and Output values When you drag a point the Input and Output values update automatically The curve displays brightness values of 0 to 255 with 0 representing the shadows Curve after dragging a point to adjust You can also adjust highlights midtones and shadows automatically by clicking the
111. structure for your website you can save the graphic in the appropriate folder for the site from here 4 In the Save as Type pop up menu select HTML and Images 5 Select an option from the HTML pop up menu Export HTML File generates the required HTML file and corresponding graphics files which you can later import into Dreamweaver or another HTML editor Copy to Clipboard copies all required HTML including a table if the document is sliced to the Clipboard so that you can later paste it into Dreamweaver or another HTML editor 6 For Slices select None only if the document contains no slices 7 Ifnecessary select Put Images in Subfolder and browse to the appropriate folder Note If you select Copy to Clipboard this step is not required and thus the option is disabled 8 Click Save to close the Export dialog box When you are exporting files Fireworks can use HTML comments to clearly label the beginning and end of code for image maps and other web features created in Fireworks By default HTML comments are not included in the code To include them select Include HTML Comments on the General tab of the HTML Setup dialog box For information on placing exported Fireworks content into Dreamweaver see Working with Dreamweaver on page 292 Creating rollovers with hotspots Using the drag and drop rollover method of creating interactivity you can easily attach a disjoint rollover effect to a hotspot ifthe target area is defined
112. tail and the roundness of the arrow s bend To adjust the flare of the arrowhead of a bent arrow Drag the arrowhead control point of a selected bent arrow To increase or decrease the sharpness of the arrowhead of a bent arrow Drag the tip control point of a selected bent arrow To lengthen or shorten a bent arrow tail Drag the handle length control point of a selected bent arrow To adjust the width of a bent arrow tail Drag the handle width control point of a selected bent arrow To adjust the corner roundness of a bent arrow tail gt Drag the corner radius control point of a selected arrow Adjusting beveled chamfered and rounded rectangle Auto Shapes Beveled chamfered and rounded rectangles have five control points The control point on each corner adjusts all corners together You can also Alt drag Windows or Option drag Macintosh to edit a single corner The remaining control point resizes the rectangle without changing the roundness of the corner Note To edit the corner radius of rectangles drawn with the Rectangle tool use the Rectangle Roundness setting in the Property inspector To adjust the corners of a beveled chamfered or rounded rectangle Auto Shape Drag a corner control point of a selected shape To adjust a single corner of a beveled chamfered or rounded rectangle Auto Shape Alt drag Windows or Option drag Macintosh a corner control point of a selected shape To resiz
113. text Some text might appear slightly different in FreeHand than in Fireworks and some effects not shared by the two applications might be discarded 9 Select the Import as a Single Flattened Bitmap option if you want to preserve the look of the entire Fireworks document When this option is selected the rest of the options in the Fireworks PNG Import Settings dialog box are dimmed Select this option only if editability is not important to you 10 Click OK 11 Click in the FreeHand Document window where you want the Fireworks PNG file to appear Copying and pasting Fireworks graphics into Freehand You can quickly place Fireworks graphics into FreeHand by copying and pasting them When Fireworks graphics are placed into FreeHand some attributes are lost such as Live Filters and textures For more information see Unsupported features on page 316 Note The copy and paste method of placing Fireworks graphics into other applications also works with Illustrator CorelDraw and Photoshop To copy and paste graphics into FreeHand 1 Select the object or objects to copy in Fireworks 2 Select Edit gt Copy or click the Quick Export button and choose Copy from the FreeHand pop up menu 3 Switch to an open document in FreeHand 4 Select Edit gt Paste The Fireworks PNG Import Settings dialog box appears For a detailed description of options see Importing Fireworks graphics into FreeHand on page 314 5 Select the desired op
114. text block to another location on the canvas 2 Release the Spacebar to continue drawing the text block Using auto sizing and fixed width text blocks Fireworks has both auto sizing text blocks and fixed width text blocks An auto sizing text block expands horizon tally as you type If you remove text the auto sizing text block shrinks to accommodate only the remaining text Auto sizing text blocks are created by default when you click on the canvas with the Text tool and start typing Fixed width text blocks allow you to control the width of wrapped text Fixed width text blocks are created by default when you drag to draw a text block using the Text tool When the text pointer is active within a text block a hollow circle or hollow square appears in the upper right corner of the text block The circle indicates an auto sizing text block the square indicates a fixed width text block Double click the corner to change from one kind of text block to the other A B A fixed width text block and an auto sizing text block A Fixed width indicator B Auto sizing indicator To change a text block to fixed width or auto sizing 1 Double click inside the text block 2 Double click the circle or square in the upper right corner of the text block The text block changes to the other type To change a selected text block to fixed width by resizing it Drag a resize handle This automatically changes the text block from auto sizing to fix
115. that contains a subselected object do one of the following Right click Windows or Control click Macintosh anywhere in the group and choose Select gt Superselect from the context menu e Choose Select gt Superselect To select all objects within a selected group do one of the following Right click Windows or Control click Macintosh anywhere on the group and choose Select gt Subselect from the context menu e Choose Select gt Subselect Stacking objects Within a layer Fireworks stacks objects based on the order in which they were created placing the most recently created object on the top of the stack The stacking order of objects determines how they appear when they overlap Layers also affect the stacking order For example suppose a document has two layers named Layer 1 and Layer 2 If Layer 1 is listed below Layer 2 on the Layers panel then everything on Layer 2 appears in front of everything on Layer 1 You can change the order of layers by dragging the layer in the Layers panel to a new position For more infor mation see Organizing layers on page 161 To change the stacking order of a selected object or group within a layer e Select Modify gt Arrange gt Bring to Front or Send to Back to move the object or group to the top or bottom of the stacking order e Select Modify gt Arrange gt Bring Forward or Send Backward to move the object or group up or down one position in the stacking order
116. that differs between frames is output Selecting this option reduces file size Select the Auto Difference option to output only pixels that change between frames Selecting this option reduces file size Optimizing in the workspace Exporting graphics for use on the web is a two step process optimizing then exporting or in some cases simply saving Optimizing graphics ensures they possess the right mix of color compression and quality After you finalize a graphic s optimization settings the graphic is ready for export 261 ADOBE FIREWORKS CS3 262 User Guide You don t have to use the Export Wizard and Image Preview in Fireworks if you re comfortable optimizing and exporting graphics Fireworks has optimization and export features in the workspace that give you greater control over how files are exported The Optimize panel contains the key controls for optimizing For 8 bit file formats it also contains a color table that displays the colors in the current export color palette Note When a slice is selected the Optimize panel displays optimize settings for the selected slice Likewise when the whole document is selected the Optimize panel displays optimize settings for the whole document In other words the active selection determines what is displayed in the Optimize panel e When a slice is selected the Property inspector has a Slice Export Settings pop up menu from which you can select preset or saved optimization
117. the Open Save As and Export Original dialog boxes or as filters in the Filter submenus Presets Presets comprise a wide variety of useful tools preferences effects and images Product presets include brushes swatches color groups symbols custom shapes graphic and layer styles patterns textures actions workspaces and more Preset content can be found throughout the interface Some presets become available only when you select the corresponding tool If you don t want to create an effect or image from scratch just peruse the preset libraries for inspiration Templates Template files can be opened and viewed from Adobe Bridge opened from the Welcome Screen or opened directly from the File menu Depending on the product template files range from letterhead newsletters and websites to DVD menus and video buttons Each template file is professionally constructed and represents a best use example of product features Templates can be a valuable resource when you need to jump start a project Samples Sample files include more complicated designs and are a great way to see new features in action These files demonstrate the range of creative possibilities offered by your program Fonts Several OpenType fonts and font families are included with your Creative Suite product Fonts are copied to your computer during installation Windows startup drive Program Files Common Files Adobe Fonts e Mac OS X startup drive Library Appl
118. the Slices pop up menu ADOBE FIREWORKS CS3 278 User Guide 7 Optional Select Put Images in Subfolder 8 Click Export The files Fireworks exported appear on your hard disk Images and an HTML file are generated in the location you specified in the Export dialog box For more information about the options available in the Export dialog box when HTML and Images is selected as the file type see Exporting Fireworks HTML on page 282 Exporting selected slices You can export selected slices in a Fireworks document Shift click to select multiple slices Note For more information on slicing see Creating and editing slices on page 200 To export selected slices 1 Do one of the following Select File gt Export e To export an individual slice right click Windows or Control click Macintosh the slice and select Export Selected Slice 2 Select a location in which to store the exported files Typically the best location is a folder within your local website 3 Enter a filename You do not need to enter an extension Fireworks does that for you If you are exporting multiple slices Fireworks uses the name you enter as the root name for all exported graphics excluding those you have custom named using the Layers panel or the Property inspector 4 Select Export Slices from the Slices pop up menu 5 To export only the slices you selected before export select Selected Slices Only and ensure that the Include Areas
119. the behavior handle The pointer changes to a hand Slice GIF ADOBE FIREWORKS CS3 208 User Guide Note You can select the slice while in any frame 7 Click the behavior handle and select Simple Rollover from the menu 8 Click the Preview tab and test the simple rollover or press F12 to preview it in a browser Creating a disjoint rollover A disjoint rollover swaps in an image under a web object when the pointer rolls over another web object In response to a pointer rolling over or clicking a trigger image an image appears in a different location on the web page The image that is rolled over is considered the trigger the image that changes is considered the target As with simple rollovers that use just one slice you first have to set up the trigger and target slices and the frame in which the swap image resides Then you can link the trigger to the target slice with a behavior line Note The trigger for a disjoint rollover doesn t have to be a slice Hotspots and buttons also have behavior handles that can be used to create disjoint rollovers For more information on hotspots see Creating hotspots on page 216 For more information about buttons see Creating button symbols on page 220 To attach a disjoint rollover to a selected image 1 Select Edit gt Insert gt Slice or Hotspot to attach a slice or hotspot to the trigger image Note This step is not necessary if the selected object is a button or if a
120. the filter settings in the pop up window 3 Click outside the window or press Enter to close it Applying embossing You can use the Emboss Live Filter to make an image object or text appear inset into or raised from the canvas GON a Oe An object with Inset Emboss and with Raised Emboss To apply an Emboss filter 1 Click the Add Live Filters button in the Property inspector then select an emboss option from the pop up menu Bevel and Emboss gt Inset Emboss Bevel and Emboss gt Raised Emboss 2 Edit the filter settings in the pop up window If you want the original object to appear in the embossed area select Show Object 3 When you finish click outside the window or press Enter to close it Note For backward compatibility Emboss Live Filters on objects in older documents open with the Show Object option deselected Applying shadows and glows Fireworks makes it easy to apply solid shadows drop shadows inner shadows and glows to objects You can specify the angle of the shadow to simulate the angle of the light shining on the object Drop Shadow Inner Shadow and Glow filters ADOBE FIREWORKS CS3 150 User Guide To apply a solid shadow 1 In the Property inspector click the Add Live Filters button point to Shadow and Glow and then click Solid Shadow 2 In the Solid Shadow dialog box adjust the filter settings e Drag the Angle slider to set the direction of the shadow Drag the Distance slide
121. the graphic While you re working in the Symbol Editor only the selected symbol is affected The symbol is a library item Thus if you change the appearance of one of its instances all the other instances change as well To change a selected symbol s graphic attributes 1 Do one of the following to open the Symbol Editor Double click the symbol object Select Modify gt Symbol gt Edit Symbol Click the Edit button in the Animate dialog box N Modify the animation symbol and change any text strokes fills and effects as appropriate w Close the Symbol Editor Editing symbol motion paths When you select an animation symbol it has a unique bounding box and a motion path attached that indicates the direction in which the symbol moves The green dot on the motion path indicates the starting point and the red dot shows the end point The blue points on the path represent frames For example a symbol with five frames would have one green dot three blue dots and one red dot on its path The position of the object on the path indicates the current frame So if the object appears at the third dot Frame 3 is the current frame ADOBE FIREWORKS CS3 242 User Guide You can change the direction of the motion by changing the angle of the path To change movement or direction Drag one of the symbol s animation start or end handles to a new location The green point indicates the starting point the red indicate
122. the table then click Edit in the Property inspector e Control double click Windows or Command double click Macintosh the image you want to edit Right click Windows or Control click Macintosh the image and then choose Edit with Fireworks from the context menu Dreamweaver starts Fireworks if it is not already open The source PNG file for the entire table appears in the Document window For more information on Fireworks source PNG files see Fireworks Help 3 In Fireworks make the desired edits Dreamweaver recognizes and preserves all edits applied to the table in Fireworks 4 When you have finished editing the table click Done in the Document window The HTML and image slice files for the table are exported using the current optimization settings the table placed in Dreamweaver is updated and the PNG source file is saved About Dreamweaver behaviors If a single unsliced Fireworks graphic is inserted into a Dreamweaver document and a Dreamweaver behavior is applied that graphic will have a slice on top of it when it is opened and edited in Fireworks The slice is not visible initially because slices are automatically turned off when you open and edit single unsliced graphics to which Dreamweaver behaviors are applied You can view the slice by turning on its visibility from the Web Layer of the Layers panel When you view properties for a slice in Fireworks that has a Dreamweaver behavior attached the Link text box
123. the terms and conditions herein Unpublished rights reserved under the copyright laws of the United States Adobe Systems Incorporated 345 Park Avenue San Jose CA 95110 2704 USA For U S Government End Users Adobe agrees to comply with all applicable equal opportunity laws including if appropriate the provisions of Executive Order 11246 as amended Section 402 of the Vietnam Era Veterans Readjustment Assistance Act of 1974 38 USC 4212 and Section 503 of the Rehabilitation Act of 1973 as amended and the regulations at 41 CFR Parts 60 1 through 60 60 60 250 and 60 741 The affirmative action clause and regulations contained in the preceding sentence shall be incorporated by reference 90079063 09 06 Contents Chapter 1 Getting Started Installation s cvcopsas eerie ie ioe e Dee ldeteh at rates E E aaa DEE aa 1 AdODE Help jatsiciceisecisceseaatsatiad naticle a a EEEE E E E E UNEL EE EEA ds Sepals yds 2 RESOULCES E EAE E EENE E E E E S 4 What s new in Fireworks CS3 ke eee cee cere rene eee eden ene bene nen eeneaes 8 Chapter 2 Fireworks Basics About working in Fireworks cece eee cence cence ene n ence en eee ee eee nee nenenenes 12 About vector and bitmap graphics ccc cence een en eee e nen eneenenenes 13 Creating a new document i ccec9s seaueaee e e es ahi a ts aes oe DEAS A ees 15 Opening and importing files 60 ccc cece cence enn ence eens nee e nee eeenenes 16 Saving Fireworks Files asiccxcevacess ovewe d
124. to the selected slice using Frame 1 as the Up state and Frame 2 as the Over state After you select this behavior you need to create an image in the second frame under the same slice to create the Over state The Simple Rollover option is actually a behavior group containing the Swap Image and Swap Image Restore behaviors Swap Image replaces the image under the specified slice with the contents of another frame or the contents of an external file Swap Image Restore restores the target object to its default appearance in Frame 1 ADOBE FIREWORKS CS3 210 User Guide Set Nav Bar Image sets a slice to be a part of a Fireworks navigation bar Each slice that is part of the navigation bar must have this behavior The Set Nav Bar Image option is actually a behavior group containing the Nav Bar Over Nav Bar Down and Nav Bar Restore behaviors This behavior is automatically set for you by default when you use the Button Editor to create a button that includes an Include Over While Down state or Show Down Image Upon Load state When you create a two state button a simple rollover behavior is assigned to its slice When you create a three or four state button a Set Nav Bar Image behavior is assigned to its slice For more information on buttons see Creating button symbols on page 220 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 an
125. turns on or turns off pixels with specific color values Because GIFs support index transparency it is the most common form of transparency used on the web Note GIF images are exported without transparency by default in Fireworks Even if the canvas behind an image or object appears transparent in Original view in Fireworks this does not mean that the background for that image will be transparent when you export it as a GIF for use on the web You must select Index Transparency before export You can also use alpha transparency although it is not often used with web graphics because only PNGs support it and most web browsers do not support PNG format Alpha transparency is often used in exported graphics that contain gradient transparency and semi opaque pixels Alpha transparency is also useful for exporting files to Flash or Adobe Director because both applications support this type of transparency Note Setting colors to transparent affects only the exported version of the image not the actual image You can see what the exported image will look like in a preview For information about the document preview buttons see Previewing and comparing optimization settings on page 263 To select a color for transparency 1 Click the Preview 2 Up or 4 Up button at the upper left of the Document window In 2 Up or 4 Up view click a view other than the original 2 Inthe Optimize panel select Index Transparency from the Transparency pop up
126. up window or by selecting None from the Fill Options or Stroke Options pop up menu in the Property inspector To swap fill and stroke colors Click the Swap Colors button in the Tools panel or in the Color Mixer Organizing swatch groups and color models The Swatches panel and Color Mixer combine to form the Colors panel group In the Swatches panel you can view change create and edit swatch groups as well as select stroke and fill colors You can use the Color Mixer to select a color model mix stroke and fill colors by dragging color value sliders or entering color values and select stroke and fill colors directly from the color bar You can also use the Color Palette panel to create and swap color palettes and explore alternate color schemes Applying colors using the Swatches panel The Swatches panel displays all the colors in the current swatch group You can use the Swatches panel to apply stroke and fill colors to selected vector objects or text To apply a color to the stroke or fill of a selected object using the Swatches panel 1 Click the icon next to the Stroke Color or Fill Color box in the Tools panel or Property inspector to make it active 2 Ifthe Swatches panel is not already open select Window gt Swatches 3 Click a swatch to apply the color to the stroke or fill of the selected object The color appears in the active Stroke Color or Fill Color box ADOBE FIREWORKS CS3 128 User Guide Changing swatch gr
127. user interface for your camera software appears 6 Follow the instructions to apply the desired settings The imported image is opened as a new Fireworks document To import an image from a digital camera Macintosh 1 Connect the camera to your computer 2 Install the software that accompanies the camera if you have not already done so 3 In Fireworks select File gt Acquire and then select either Camera Acquire or Camera Select 4 In the Select Camera dialog box select a camera and then click OK 5 In the Select Images dialog box select the images you want to import and then click OK Note The Select Images dialog box only displays file types that are supported by Fireworks 6 Follow the instructions to apply the desired settings The imported image is opened as a new Fireworks document To import an image from a scanner Windows 1 Connect the scanner to your computer 2 Install the software that accompanies the scanner if you have not already done so 3 In Fireworks select File gt Scan and then select either Twain Acquire or Twain Select Note For most TWAIN modules or Photoshop Acquire plug ins additional dialog boxes prompt you to set other options 4 Follow the instructions to apply the desired settings The imported image is opened as a new Fireworks document To import an image from a scanner Macintosh 1 Connect the scanner to your computer 2 Install the software that accompanies the scanner if you hav
128. v Normal x Edge ant Al gpa mF w 1 x 114 v Texture Grain wmo v H i Y 811 T x ADOBE FIREWORKS CS3 User Guide Selecting a tool from a tool group A small triangle in the lower right corner of a tool in the Tools panel indicates that it is part of a tool group For example the Rectangle tool is part of the basic shape tool group which also includes the Rounded Rectangle Ellipse and Polygon basic tools as well as all of the Auto Shape tools which appear below the divider line rm a k 3 7 Path tool P CY Redraw Path tool P il To select an alternative tool from a tool group 1 Click the tool icon and hold down the mouse button A pop up menu appears with tool icons tool names and shortcut keys The currently selected tool has a check mark to the left of the tool name 2 Drag the pointer to highlight the tool you want and release the mouse button The tool appears in the Tools panel and the tool options appear in the Property inspector Using the Property inspector The Property inspector is a context sensitive panel that displays current selection properties current tool options or document properties By default the Property inspector is docked at the bottom of the workspace The Property inspector can be open at half height displaying two rows of properties or at full height displaying four rows You can also fully collapse the Property inspector while leaving it in t
129. variety of options to refine your search to consider case or to find entire words or parts of words To search for and replace words phrases or text strings 1 Select Find Text from the Find pop up menu of the Find panel 2 Enter the text to search for in the Find text box 3 Enter the replacement text in the Change To text box 4 Ifyou want select options to further define the search Whole Word finds the text only in the same form in which it appears in the Find option not as part of any other word Match Case distinguishes between uppercase and lowercase letters during the search Regular Expressions matches parts of words or numbers conditionally during a search Finding and replacing fonts You can also quickly find and replace fonts in your Fireworks documents ADOBE FIREWORKS CS3 333 User Guide To search for and replace fonts in one or more Fireworks documents 1 Select Find Font from the Find pop up menu of the Find panel 2 Select the font and font style to find y You can restrict your search by minimum and maximum point sizes 3 Specify the font font style and point size to use as a replacement in the Change To area Finding and replacing colors You can find all instances of a certain color in your Fireworks documents and then change it to something else To search for and replace colors in Fireworks documents 1 Select Find Color from the Find pop up menu 2 Select an item from the Apply To pop up menu
130. ve previously exported This feature is useful if you want to update only a portion of a document Note Update HTML works differently with Dreamweaver documents than it does with other HTML documents For more information see Working with Dreamweaver on page 292 When updating Fireworks HTML you can choose to replace just the images that changed or overwrite all code and images If you choose to replace only the images that changed any changes you made to the HTML file outside of Fireworks are preserved Note For considerable changes to document layout make your changes in Fireworks and re export the HTML file To update HTML using the Update HTML command 1 Do one of the following Select File gt Update HTML Click the Quick Export button and select Update HTML from the pop up menu 2 Select the file to update in the Locate HTML File dialog box 3 Click Open 4 Ifno Fireworks generated HTML is found click OK to insert new HTML at the end of the document 5 If Fireworks generated HTML is found select one of the following and click OK Replace Images and Their HTML replaces the previous Fireworks HTML Update Images Only overwrites only the images 6 Ifthe Select Images Folder dialog box appears select a folder and click Open Exporting CSS layers Cascading Style Sheets CSS give you added control over how web pages are displayed CSS layers let you create style sheets or templates that define how different element
131. views You can use multiple views to see one document at different magnifications simultaneously Changes you make in one view are automatically reflected in all other views of the same document Generally you ll want to be sure that your document is not maximized in the workspace before creating multiple views This lets you see multiple views of the document at one time To open an additional document view at a different zoom setting 1 Select Window gt Duplicate Window 2 Select a zoom setting for the new window To tile document views Select Window gt Tile Horizontal or Window gt Tile Vertical ADOBE FIREWORKS CS3 34 User Guide To close a document view window Click the window s Close button Controlling document redraw Display modes affect a document s onscreen representation but not its object data or output quality To control document redraw Select View gt Full Display When Full Display is selected Fireworks displays the document in all available colors with full detail When Full Display is deselected Fireworks displays paths as 1 pixel wide with no fill and displays images with an X through them Display and draft modes To display a document as it would appear on a different platform do one of the following In Windows select View gt Macintosh Gamma On the Macintosh select View gt Windows Gamma You can now preview how the document would appear on the other computer platfo
132. will be replaced by the color you ve specified in the To color box Cropping a selected bitmap You can isolate a single bitmap object in a Fireworks document and crop only that bitmap object leaving other objects on the canvas intact To crop a bitmap image without affecting other objects in the document 1 Select a bitmap object by clicking the object on the canvas or by clicking its thumbnail in the Layers panel or draw a selection marquee using a bitmap selection tool 2 Select Edit gt Crop Selected Bitmap ADOBE FIREWORKS CS3 71 User Guide The crop handles appear around the entire selected bitmap or around the selection marquee if you drew one in step 1 3 Adjust the crop handles until the bounding box surrounds the area of the bitmap image that you want to keep Note To cancel a crop selection press Escape 4 Double click inside the bounding box or press Enter to crop the selection Every pixel in the selected bitmap outside the bounding box is removed but other objects in the document remain Adjusting bitmap color and tone Fireworks has color and tone adjustment filters to help you improve and enhance the colors in your bitmap images You can adjust the contrast and brightness the tonal range and the hue and color saturation of your images Applying filters as Live Filters from the Property inspector is nondestructive Live Filters do not permanently alter the pixels you can remove or edit them anytime I
133. you can correct bitmaps that contain a high concentration of pixels in the highlights midtones or shadows Or you can use Auto Levels and let Fireworks adjust the tonal range for you If you want more precise control over a bitmap s tonal range you can use the Curves feature which lets you adjust any color along the tonal range without affecting other colors Evening out highlights midtones and shadows A bitmap with a full tonal range should have an even number of pixels in all areas The Levels feature corrects bitmaps with a high concentration of pixels in the highlights midtones or shadows Highlights corrects an excess of light pixels which makes the image look washed out Midtones corrects an excess of pixels in the midtones which makes the image bland Shadows corrects an excess of dark pixels which hides much of the detail The Levels feature sets the darkest pixels as black and the lightest pixels as white then redistributes the midtones proportionally This produces an image with the sharpest detail in all of its pixels lt lt ie WN DLN S SN BZ You can use the Histogram in the Levels dialog box to view the pixel distribution of a bitmap The Histogram is a graphical representation of the distribution of pixels in the highlights midtones and shadows The Histogram helps you determine the best method of correcting an image s tonal range A high concentration of pixels in the shadows or highlights indi
134. 00 objects Customizing files for export to Photoshop When you export a file to Photoshop you can choose customized settings for exporting objects effects and text To customize settings for export to Photoshop 1 In the Export dialog box with Photoshop PSD selected as the export file type choose Custom from the Settings pop up menu 2 Inthe Objects pop up menu choose one of the following Convert to Photoshop Layers converts individual Fireworks objects to Photoshop layers and Fireworks masks to Photoshop layer masks ADOBE FIREWORKS CS3 326 User Guide Flatten Each Fireworks Layer flattens all objects on each individual Fireworks layer and each Fireworks layer becomes a layer in Photoshop When you choose this option you lose the ability to edit the Fireworks objects in Photoshop You also lose features such as blending modes that are associated with the Fireworks objects 3 In the Effects pop up menu choose one of the following Maintain Editability converts Fireworks Live Filters to their equivalent in Photoshop If the effects do not exist in Photoshop they are discarded Render Effects flattens effects into their objects When you choose this option you preserve the appearance of the effects at expense of the ability to edit them in Photoshop 4 Inthe 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
135. 210 Behaviors panel 209 Dreamweaver 206 Nav Bar Down 210 Nav Bar Over 210 Nav Bar Restore 210 Set Nav Bar Image 210 Set Pop up Menu 210 Set Text of Status Bar 210 Simple Rollover 209 Swap Image 209 Behaviors panel 28 209 beveled edges 149 Beveled Rectangle tool 86 bicubic interpolation scaling method 346 bilinear interpolation scaling method 346 bitmap graphics 14 bitmap masks 164 165 creating 169 using an existing object as 167 169 bitmap mode 12 applying with tools 25 switching to 61 bitmaps adjusting brightness and contrast 76 adjusting color and tone 71 adjusting hue and saturation 77 blurring and sharpening 79 erasing 65 retouching 66 blending applying 181 colors of overlapping objects 179 objects 246 setting blending mode 181 blending colors 135 blending modes 179 Color 180 Darken 179 Difference 180 Erase 180 Hard Mix 180 Hue 180 Invert 180 Lighten 179 Linear Burn 179 Linear Dodge 179 Linear Light 179 Luminosity 180 Multiply 179 Pin Light 180 Saturation 180 Screen 179 Tint 180 Vivid Light 179 Blur filter 79 Blur More filter 79 Blur tool 66 blurring 79 bitmap areas 66 images 67 BMP file format 265 BMP saving 23 bold text 112 Border command 50 boundaries 136 Bridge Home 6 Bridge Adobe 328 brightness 76 Brightness Contrast filter 76 Bring Forward command 59 Bring to Front command 59 Brush tool 64 93 brushes saving settings 140 setting tip 139 stroke options 138 Brush si
136. 27 Options menu in 30 organizing 28 Pages 27 restoring default positions 29 saving custom layouts 30 Shapes 27 Special Characters 28 Styles 27 183 Swatches 28 127 Symbol Properties 28 Tools 25 undocking 28 undocking from panel group 28 URL 27 196 using SWF movies as 345 panning 33 paragraph spacing 117 Paste Inside command 168 pasted images 19 pasting HTML 284 Path panel 107 INDEX 360 paths 103 adding stroke texture 145 bending adjacent segments 99 changing adjacent segments 99 changing shape 99 converting straight to curved 97 copying and pasting 315 creating custom strokes 138 cropping 105 editing strokes 136 pulling 101 pushing 101 resetting default colors 127 selecting a point 98 splitting 104 swapping stroke and fill colors 127 pattern fills adjusting 144 applying 141 moving 144 rotating 144 transforming 144 Pen tool 94 adding points with 99 curved segments 95 deleting points with 99 resuming path 99 straight segments 94 Pencil tool 63 perspective illusion 57 Photoshop applying layer effects 151 applying plug ins 151 customizing files for export 325 exporting to 325 grouped layers 164 import preferences 348 importing files into Adobe Fireworks 322 installing plug ins 151 layer masks 171 patterns 348 plug ins 324 348 textures 348 Photoshop Acquire installation plug ins 20 Photoshop and Adobe Fireworks exporting PSD files from Adobe Fireworks 325 importing PSD files into Adobe
137. 32 bit PNG images Or you can import Fireworks layers slices and interactive elements by inserting Fireworks HTML To import a flattened Fireworks image 1 In Director choose File gt Import 2 Navigate to the desired file and click Import 3 Change options if desired in the Image Options dialog box For information about each option see Using Director 4 Click OK The imported graphic appears in the cast as a bitmap To import layered sliced or interactive Fireworks content 1 In Director choose Insert gt Fireworks gt Images from Fireworks HTML Note The location and name of this menu command may be different depending on your version of Director 2 Locate the Fireworks HTML file you exported for use in Director The Open Fireworks HTML dialog box appears Open Fireworks HTML Look in O Export images E index htm File name index htm Files of type HTML htm Y Cancel Color 32 Bit with Alpha Registration Common Center Point x V Import to Score V Import Rollover Behaviors as Lingo ADOBE FIREWORKS CS3 319 User Guide 3 Change options if desired Color allows you to specify a color depth for the imported graphics If they contain transparency choose 32 bit color Registration allows you to set the registration point for the imported graphics Import Rollover Behaviors as Lingo converts Fireworks behaviors to Lingo code Import to Score places cast members into the Score upon
138. 8 encoding Set Defaults 4 Optional To set this information as the default for all new Fireworks documents click Set Defaults 214 ADOBE FIREWORKS CS3 215 User Guide Note Use caution when selecting None as a menu option for slice auto naming If you select None as the option for any of the first three menus Fireworks exports slice files that overwrite one another resulting in a single exported graphic and a table that displays this graphic in every cell Defining how HTML tables are exported Slicing defines how the HTML table structure appears when a Fireworks document is exported for use on the web When you export a sliced Fireworks document to HTML your document is reassembled using an HTML table Each sliced element from the Fireworks document resides in a table cell Once exported a Fireworks slice translates to a table cell in HTML You can specify how a Fireworks table is reconstructed in a browser Among other options you can choose whether to use spacers or nested tables when exporting to HTML e Spacers are images that help table cells align properly when viewed in a browser e A nested table is a table within a table Nested tables do not use spacers They may load more slowly in browsers but because there are no spacers it is easier to edit their HTML For more information about HTML see Exporting HTML on page 280 To define how Fireworks exports HTML tables 1 Select File gt HTML Setup
139. ADOBE FIREWORKS CS3 USING FIREWORKS ANI Adobe 2007 Adobe Systems Incorporated All rights reserved Adobe Fireworks Using Fireworks If this guide is distributed with software that includes an end user agreement this guide as well as the software described in it is furnished under license and may be used or copied only in accordance with the terms of such license Except as permitted by any such license no part of this guide may be reproduced stored in a retrieval system or trans mitted in any form or by any means electronic mechanical recording or otherwise without the prior written permission of Adobe Systems Incorporated Please note that the content in this guide is protected under copyright law even if it is not distributed with software that includes an end user license agreement The content of this guide is furnished for informational use only is subject to change without notice and should not be construed as a commitment by Adobe Systems Incorpo rated Adobe Systems Incorporated assumes no responsibility or liability for any errors or inaccuracies that may appear in the informational content contained in this guide Please remember that existing artwork or images that you may want to include in your project may be protected under copyright law The unauthorized incorporation of such material into your new work could be a violation of the rights of the copyright owner Please be sure to obtain any permission requi
140. Adobe applications to extend the capabil ities of Fireworks This chapter covers the following topics e Finding and replacing on page 330 e Batch processing on page 334 e Extending Fireworks on page 341 e Flash SWF movies used as Fireworks panels on page 345 Finding and replacing The Find and Replace feature helps you search for and replace elements such as text URLs fonts and colors Find and Replace can search the current document or multiple files Find and Replace works only in Fireworks PNG files or in files containing vector objects such as Adobe FreeHand uncompressed CorelDraw and Adobe Illustrator files ADOBE FIREWORKS CS3 User Guide Search Document A Find Text B C Regular expressions Find panel A Search option B Find option To select the source for the search 1 Open the document 2 Do one of the following to open the Find panel Select Window gt Find Select Edit gt Find Press Control F Windows or Command F Macintosh Note If the files you select are locked or checked in from an Adobe Dreamweaver site you are prompted to unlock them or check them out before proceeding 3 From the Search pop up menu select a source for the search Search Selection finds and replaces elements only among the currently selected objects and text Search Frame finds and replaces elements only in the current frame Search Document finds and replaces elements in the active doc
141. Alt drag Windows or Option drag Macintosh a selection area with the Zoom tool To return to 100 magnification Double click the Zoom tool in the Tools panel To pan around the document 1 Select the Hand tool 2 Drag the hand pointer As you pan beyond the canvas edge the view continues to pan so that you can work with pixels along the canvas edge To fit the document in the current view Double click the Hand tool Using view modes to manage the workspace You use the view mode buttons in the View section of the Tools panel to control the layout of your workspace You can select one of three view modes a Standard Screen mode is the default document window view a Full Screen with Menus mode is a maximized document window view set against a gray background with menus toolbars scroll bars and panels visible 2 Full Screen mode is a maximized document window view set against a black background with no menus toolbars or title bars visible To change view modes do one of the following To change to Full Screen with Menus mode click the Full Screen with Menus Mode button in the Tools panel e To change to Full Screen Mode click the Full Screen Mode button in the Tools panel e To return to Standard Screen mode right click Windows or Control click Macintosh in the document window and select Exit Full Screen Mode or click the Standard Screen Mode button in the Tools panel Displaying multiple document
142. Auto button in the Curves dialog box To delete a point along the curve Drag the point off the grid Note You cannot delete the end points of the curve Correcting the tonal range using tonal eyedroppers You can adjust the highlights shadows and midtones using the Shadow Highlight or Midtone eyedropper in the Levels or Curves dialog box To adjust the tonal balance manually using the tonal eyedroppers 1 Open the Levels or Curves dialog box and select a color channel from the Channel pop up menu ADOBE FIREWORKS CS3 76 User Guide 2 Select the appropriate eyedropper to reset the tonal values in the image 7 Click the lightest pixel in the image with the Highlight eyedropper to reset the highlight value 7 Click a pixel of neutral color in the image with the Midtone eyedropper to reset the midtone value Click the darkest pixel in the image with the Shadow eyedropper to reset the shadow value 3 Click OK Adjusting brightness and contrast The Brightness Contrast feature modifies the contrast or brightness of pixels in an image This affects the highlights shadows and midtones of an image You typically use Brightness Contrast when correcting images that are too dark or too light Original after adjusting brightness To adjust the brightness or contrast 1 Select the image 2 Do one of the following to open the Brightness Contrast dialog box In the Property inspector click the Add Live Filte
143. BE FIREWORKS CS3 260 User Guide Note When you zoom or pan while multiple views are open all views zoom and pan simultaneously 5 Click Export when you have finished changing settings 6 Inthe Export dialog box type a name for the file select a destination set any other options if desired and click Save For more information about the options in the Export dialog box see Exporting from Fireworks on page 276 To set optimization settings using Image Preview 1 Click the Options tab Most of the options available here are similar to those in the Optimize panel For more about these options see Using optimization settings on page 262 2 a Click the Optimize to Size Wizard button to optimize a graphic based on a target file size Enter a file size in kilobytes and click OK The Optimize to Size Wizard attempts to match the requested file size using these methods e Adjusting JPEG quality e Modifying JPEG smoothing Altering the number of colors in 8 bit images e Changing dither settings in 8 bit images Enabling or disabling optimization settings To set exported image dimensions using Image Preview 1 Click the File tab 2 Specify a scale percentage or enter the desired width and height in pixels Select Constrain to scale the width and height proportionally Options File animeton r Scale Yoi fio Ws fizoo pixels H 56 pixels Js To define only a portion of an image for export using Image Pr
144. Fireworks 323 Pick Distance preference 347 PICT file format 265 pie chart 87 Pie tool 87 pixels 14 adjusting tonal range using eyedropper 75 cloning 66 contracting selection border 49 copying 44 cutting 44 expanding selection border 49 feathering 65 moving 44 painting 63 selecting 44 selecting area around a marquee 50 selecting freeform area 45 selecting polygonal area 45 selecting similar colors 46 smoothing a marquee border 50 tonal range 72 playing animations 246 macros 343 saved commands 343 plotting points 94 plug ins 5 324 in Adobe Store 7 PNG file format choosing 265 choosing a color palette 266 transparency 311 point handles 96 displaying 98 Pointer tool 41 44 points adding 99 bending adjacent segments 99 changing adjacent segments 99 converting 97 converting straight to curved 97 deleting 99 moving 98 selecting 98 polygons 85 87 pop up menus 229 advanced properties 234 description 229 designing appearance 232 editing 236 entering menu text 230 231 exporting 237 setting position 235 Precise Cursors preference 347 preferences 346 color defaults 346 default 348 editing options 347 Faster but less accurate sampling options 347 folder options 348 Import 323 import options 348 interpolation options 346 Launch and Edit 304 launch and edit options 347 Launch options 347 location of file 351 restoring defaults 348 setting 346 Undo Steps 346 Preview button 263 Preview Drag prefere
145. For most formats several export methods are available You can export Dreamweaver HTML for example or update existing Dreamweaver HTML Or you can copy Dreamweaver HTML to the Clipboard You can export a Flash SWF file or copy selected objects as vectors You can even use the Quick Export button to start other applications as well as preview Fireworks documents in a preferred browser By streamlining the export process the Quick Export button saves time and improves the design workflow Note The Quick Export button exports graphics and slices using the settings you specify in the Optimize panel Be sure to optimize your graphic before exporting with the Quick Export button For more information on optimization see About optimizing on page 257 To export a Fireworks document or selected graphics using the Quick Export button 1 Click the Quick Export button and select an export option from the pop up menu displayed The appropriate options are automatically set for you in the Export dialog box Make changes to the options if desired 2 Select a location to store the exported files type a filename and click Export To start another application using the Quick Export button Click the Quick Export button and select the Launch option from the application submenu ADOBE FIREWORKS CS3 289 User Guide Customizing the Quick Export pop up menu You can add additional options to the Quick Export pop up menu if you know JavaScript a
146. G JPEG2000 PICT PCX PCD PSD PXR PNG TGA and TIFF Embedded Images are brought into Fireworks as raster images Linked images are preserved as linked bitmaps in Fireworks Clip Masks Fireworks supports the import of clipping masks with paths and compound paths Filled Strokes Filled strokes are imported as a single drawing object Solid Fills Filled paths are imported as a single drawing object Compound Paths Compound paths are imported as a single drawing object Groups The group is preserved and the individual grouped objects come in as drawing objects Graphs Graphs are imported as groups and they lose their special editability as graphs Primitives Illustrator primitives are actually paths so they are not imported as Fireworks primitives Patterns Patterns are imported as individual tiles These tiles are imported as a native pattern in Fireworks and the pattern is assigned to the drawing object Brush Strokes Brush strokes are imported as multiple groups one group per closed path Symbols Symbols are imported as a normal group objects Transparency Fireworks imports object opacity correctly preserving object transparency settings at the original Illustrator values Sub Layers Fireworks imports all sub layers as native Fireworks sub layers About working with GoLive You can use Fireworks and GoLive together to create and edit web pages You can export and copy Fireworks HTML to GoLive the same way you can with
147. HTML type in the HTML Setup dialog box For more information see Fireworks Help ADOBE FIREWORKS CS3 295 User Guide Exporting Fireworks HTML to Dreamweaver Exporting Fireworks files to Dreamweaver is a two step process From Fireworks you export files directly to a Dreamweaver site folder This generates an HTML file and the associated image files in the location you specify You then place the HTML code into Dreamweaver using the Insert Fireworks HTML feature Note Before exporting make sure to choose Dreamweaver as the HTML type in the HTML Setup dialog box For more information see Fireworks Help To export Fireworks HTML Export your document to HTML format For more information see Fireworks Help To insert Fireworks HTML into a Dreamweaver document 1 In Dreamweaver save your document in a defined site 2 Place the insertion point in the document where you want the inserted HTML code to begin 3 Do one of the following e Select Insert gt Image Objects gt Fireworks HTML e Click the Images Image pop up menu in the Common category of the Insert bar and choose Fireworks HTML 4 In the dialog box that appears click Browse to choose the desired Fireworks HTML file 5 Select Delete File After Insertion to move the HTML file to the Recycle Bin Windows or to permanently delete it Macintosh when the operation is complete Use this option if you no longer need the Fireworks HTML file after inserting it This option doe
148. Hide All applies an empty opaque mask to an object which hides the entire object Reveal Selection can be used only with pixel selections It applies a transparent pixel mask using the current pixel selection The other pixels in the bitmap object are hidden To achieve the same effect make a pixel selection then click the Add Mask button Hide Selection can be used only with pixel selections It applies an opaque pixel mask using the current pixel selection The other pixels in the bitmap object are shown To achieve the same effect make a pixel selection then Alt click Windows or Option click Macintosh the Add Mask button To use the Reveal All and Hide All commands to create a mask 1 Select the object you want to mask 2 Do one of the following to create the mask e Select Modify gt Mask gt Reveal All to show the object e Select Modify gt Mask gt Hide All to hide the object 3 Select a bitmap painting tool from the Tools panel such as the Brush Pencil or Paint Bucket 4 Set the desired tool options in the Property inspector If you ve applied a Hide All mask you must select a color other than black ADOBE FIREWORKS CS3 171 User Guide 5 Draw on the empty mask In the areas where you draw the underlying masked object is either hidden or shown depending on the type of mask you applied Note For more information about modifying a bitmap mask s appearance by drawing on it see Modifying a mask s appearan
149. IREWORKS CS3 39 User Guide Fireworks also has slice guides that allow you to slice a document for use on the web Regular image guides are different from slice guides however For information on slice guides see Moving slice guides to edit slices on page 204 To create a horizontal or vertical guide 1 Click and then drag from the corresponding ruler 2 Position the guide on the canvas and release the mouse button Note You can reposition the guide by dragging it again To move a guide to a specific position 1 Double click the guide 2 Enter the new position in the Move Guide dialog box and click OK To show or hide guides Select View gt Guides gt Show Guides To snap objects to guides Select View gt Guides gt Snap to Guides To change guide colors 1 Select View gt Guides gt Edit Guides 2 Select the new guide color from the color box pop up window and click OK To lock or unlock all guides Select View gt Guides gt Lock Guides To remove a guide Drag the guide off the canvas Note In addition to these editing guides the symbol editor also contains 9 slice scaling guides that are used for scaling shapes without distortion For more information see Using 9 slice scaling on page 188 Using the grid The Fireworks grid displays a system of horizontal and vertical lines on the canvas The grid is useful for placing objects precisely In addition you can view edit resize
150. KS CS3 User Guide 108 Chapter 6 Working with Text Fireworks CS3 has many text features typically reserved for sophisticated desktop publishing applications You can create text in a variety of fonts and sizes and adjust kerning spacing color leading baseline shift and more Combining Fireworks text editing features with the wide range of strokes fills filters and styles makes text a lively element of your graphic designs You can also use the Fireworks spell checker to correct misspellings When you create a text object Fireworks automatically saves the object under a name that matches the text content making it easier to locate later If you prefer a different name for that text object you can easily change the automat ically assigned name The capability to edit text anytime even after you apply Live Filters such as drop shadows and bevels means you can easily make changes to text You can also copy objects that include text and change the text for each copy Vertical text transformed text text attached to paths and text converted to paths and images extend the design possibilities You can import text while retaining rich text format attributes Also when you import an Adobe Photoshop document containing text the text remains editable Fireworks handles missing fonts upon import by asking you to select a substitute font or allowing you to import text as a static image This chapter contains the following topics e E
151. L Style to set the style for exported HTML Generic HTML works in any HTML editor However if your document contains behaviors or other interactive content select your specific editor if it appears in the list Interactive elements export differently from Fireworks depending on the selected HTML style To export your document using the XHTML standard select the appropriate XHTML style from the pop up menu For more information about XHTML see Exporting XHTML on page 286 e Select a file extension from the Extension pop up menu or enter a new one e Select Include HTML Comments to include comments regarding where to copy and paste in the HTML This option is recommended if your document contains interactive elements such as buttons behaviors or rollover images HTML comments help you determine which parts of the code to copy and paste e Select Lowercase File Name to make the name of the HTML file and the associated image files lowercase on export Note This will not lowercase the HTML file s extension if an uppercase extension was selected in the Extension pop up menu e Select Use CSS for Popup Menus if you want to use CSS rather than JavaScript for your pop up menu code This will make it easier to understand and maintain the code Also you ll be able to index the menus as well as update the links within the code using Dreamweaver e Select Write CSS to an External File if you want to have the CSS code written to an external
152. L editor from the HTML Style pop up menu on the General tab of the HTML Setup dialog box If your HTML editor is not listed select Generic Note It s important that you select your HTML editor as the HTML style if you do not interactive elements such as buttons and rollovers may not function correctly when imported into your HTML editor ADOBE FIREWORKS CS3 283 User Guide 5 Click OK to return to the Export dialog box 6 Select Export HTML file from the HTML pop up menu Choosing Export HTML generates an HTML file and the associated image files in the location you specify 7 Select Export Slices from the Slices pop up menu if your document contains slices 8 Select Put Images in Subfolder if you want images stored in a separate folder You can select a specific folder or use the Fireworks default which is a folder named images 9 Ifyou are exporting a multi page Fireworks document deselect the Current page only check box to export all of the pages into separate HTML documents 10 Click Export After export you ll see the files Fireworks exported on your hard drive Images and an HTML file are generated in the location you specified in the Export dialog box Copying HTML to the Clipboard A fast way to export Fireworks generated HTML is to copy it to the Clipboard You can copy HTML code in Fireworks in either of two ways You can use the Copy HTML Code command or you can select Copy to Clipboard as an option in the Export dialog
153. ML file To copy code from an exported Fireworks file and paste it into another HTML document 1 Open the Fireworks HTML file you exported in an HTML editor 2 Highlight the necessary code and copy it to the Clipboard 3 Open an existing HTML document or create a new one 4 Paste the code from the Clipboard at the desired location in the new HTML file You do not have to copy the lt HTML gt and lt BODY gt tags because these should 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 ADOBE FIREWORKS CS3 285 User Guide 5 If your Fireworks document contains interactive elements you ll need to copy the JavaScript code as well JavaScript code is surrounded by lt ScRIPT gt tags and is located in the lt HEAD gt section of the document Copy and paste the entire lt SCRIPT gt section unless your destination document already has a lt SCRIPT gt section In this case you should copy and paste only the contents of the lt SCRIPT gt section into the existing lt SCRIPT gt section being careful not to overwrite the contents of the existing section Also ensure there are no duplicate JavaScript functions in the lt SCRIPT gt section after you paste the code Updating exported HTML The Update HTML command allows you to make changes to a Fireworks HTML document you
154. NG file for your Fireworks graphic and click Open Note If you have changed Fireworks launch and edit preferences this dialog box might not appear The file opens in Fireworks and the Document window indicates that you are editing a file from Flash 4 Make changes to the image and click Done when finished Fireworks exports a new graphic file to Flash and if you edited the original PNG file it is also saved Working with FreeHand Because both applications support vectors vector graphics can be easily shared between Fireworks and FreeHand The appearance of objects may differ between applications however because Fireworks and FreeHand do not share all the same features For more information see Working with other vector graphics applications on page 316 The procedures provided in this section apply not only to using Fireworks with FreeHand but also to using Fireworks with other vector graphics applications such as Adobe Illustrator and CorelDraw For more information see Working with other vector graphics applications on page 316 Placing FreeHand graphics in Fireworks You can place FreeHand graphics into Fireworks in a number of ways You can import them copy and paste them or drag them Fireworks CS3 supports FreeHand 7 or later graphics Importing FreeHand graphics into Fireworks Fireworks can import vector graphics that were created in FreeHand You can set the following options when importing a FreeHand graphic
155. NG source file is saved if a source file was selected If you changed the format of the image the Dreamweaver link checker prompts you to update references to the image For example if you changed the format of an image called my_image from GIF to JPEG clicking OK at this prompt changes all references to my_image gif in your site to my_image jpg Changing animation settings If you are opening and optimizing an Animated GIF file you can also edit the animation settings The animation options in the Export Preview dialog box are similar to those available in the Fireworks Frames panel Note You cannot edit individual graphic elements within a Fireworks animation during an optimizing session opened from Dreamweaver To edit the graphic elements in an animation you must open and edit the Fireworks animation For more information see Editing Fireworks files from Dreamweaver on page 297 ADOBE FIREWORKS CS3 302 User Guide To edit a placed animation s settings see Optimizing Fireworks images and animations placed in Dreamweaver on page 300 and Using Export Preview in Fireworks Help Setting launch and edit options To use Roundtrip HTML effectively you should perform some preliminary tasks such as setting Fireworks as your primary image editor in Dreamweaver and specifying launch and edit preferences in Fireworks Note You should also define a local site in Dreamweaver prior to working with Roundtrip HTML For more inf
156. OBE FIREWORKS CS3 240 User Guide 2 Select Modify gt Animation gt Animate selection 3 Enter the desired settings in the dialog box For more information on settings see Editing animation symbols on page 240 Animation controls appear on the object s bounding box and a copy of the symbol is added to the library Editing animation symbols You can manipulate the properties of animation symbols to make your website come alive You can change a variety of properties in a symbol from the animation speed to the opacity and rotation By manipulating these properties you can make a symbol appear to rotate speed up fade in and out or any combination of these A key property for any animation symbol is number of frames This property determines how many steps it takes the symbol to complete its animation When you set the number of frames for a symbol Fireworks automatically adds the required number of frames to the document to complete the action If the symbol requires more frames than currently exist in the animation Fireworks asks if you want to add extra frames Changing animation properties You can change animation properties using either the Animate dialog box or the Property inspector Animation Frames fa Opacity 100 v to 100 v Normal x a l Scaling 100 Rotation o v EA gt Effects w 257 x 366 H 140 380 A Animation symbol properties in the Property inspector
157. OBE FIREWORKS CS3 99 User Guide To change the shape of a path segment Drag a point handle with the Subselection tool Alt drag Windows or Option drag Macintosh to drag one handle at a time To adjust the handle of a corner point 1 s Select the Subselection tool in the Tools panel 2 Select a corner point 3 Alt drag Windows or Option drag Macintosh the point to display its handle and bend the adjacent segment Dragging a corner point handle with the Subselection tool to edit the adjacent path segment Inserting and deleting points on a path You can add points to a path and delete points from a path Adding points to a path gives you control over a specific segment within the path Deleting points from the path reshapes it or simplifies editing To insert a point on a selected path gt Using the Pen tool click anywhere on the path where there is not a point To delete a point from a selected path segment do one of the following e Click a corner point on a selected object with the Pen tool e Double click a curve point on a selected object with the Pen tool e Select a point with the Subselection tool and press Delete or Backspace Continuing an existing path You can use the Pen tool to continue drawing an existing open path To resume drawing an existing open path 1 Select the Pen tool in the Tools panel 2 Click the end point and continue the path The Pen tool pointer changes to indicate that you are
158. On the Sensitivity tab of the Edit Stroke dialog box select a stroke property such as Size Ink Amount or Saturation from the Stroke Property pop up menu 2 From the Affected By options select the degree to which sensitivity data affects the current stroke property 3 Click OK Placing strokes on paths By default an object s brush stroke is centered on a path You have the option of placing the brush stroke completely inside or outside the path This allows you to control the overall size of stroked objects and to create effects such as strokes on the edges of beveled buttons Centered stroke stroke inside and stroke outside You can use the Stroke pop up menu in the Stroke Options window to reorient brush strokes To move a brush stroke inside or outside the selected path 1 Click the Stroke Color box in the Tools panel or the Property inspector to open the color box pop up window 2 Select an option from the Location of Stroke Relative to Path pop up menu Inside Centered or Outside 3 Optionally select the Fill over Stroke option Normally the stroke overlaps the fill Selecting Fill over Stroke draws the fill over the stroke If you select this option for an object with an opaque fill any part of the stroke that falls inside the path is obscured A fill with a degree of transparency may tint or blend with a brush stroke inside a path ADOBE FIREWORKS CS3 140 User Guide Creating stroke styles You can change specific stroke
159. Position button to position the pop up menu relative to the slice that triggers it Enter x and y coordinates Coordinates of 0 0 align the upper left corner of the pop up menu with the upper left corner of the slice or hotspot that triggers it 3 Do one of the following e If you have submenus position them as described in the next procedure e Click Back to modify properties on other tabs Click Done to close the Pop up Menu Editor ADOBE FIREWORKS CS3 236 User Guide To set the position for a pop up submenu using the Pop up Menu Editor 1 With the desired pop up menu open in the Pop up Menu Editor click the Position tab For information on opening an existing pop up menu in the Pop up Menu Editor see Editing pop up menus on page 236 2 Do one of the following to define the submenu position e Click a Submenu Position button to position the submenu relative to the pop up menu item that triggers it Enter x and y coordinates Coordinates of 0 0 align the upper left corner of the pop up submenu with the upper right corner of the menu or menu item that triggers it 3 Do one of the following To make each submenu s position relative to the parent menu item that triggers it deselect the Place in Same Position option for the submenu position e To make each submenu s position relative to the parent pop up menu select Place in Same Position 4 Click Done to close the Pop up Menu Editor or click Back to modify pro
160. Property inspector click the Add Live Filters button and then select Other gt Convert to Alpha from the Filters pop up menu e Select Filters gt Other gt Convert to Alpha Note Applying a filter from the Filters menu is destructive that is it cannot be undone except when Edit gt Undo is an option To maintain the ability to adjust turn off or remove this filter apply it as a Live Filter as described in the first bulleted option in this step For more information see Using Live Filters on page 147 Sharpening an image You can use the Sharpen feature to correct images that are blurry Fireworks has three Sharpen options Sharpen adjusts the focus of a blurred image by increasing the contrast of adjacent pixels Sharpen More increases the contrast of adjacent pixels about three times as much as Sharpen Unsharp Mask sharpens an image by adjusting the contrast of the pixel edges This option offers the most control so it is usually the best option for sharpening an image ADOBE FIREWORKS CS3 82 User Guide Original after sharpening To sharpen an image using a sharpen option 1 Select the image 2 Do one of the following to select a sharpen option In the Property inspector click the Add Live Filters button and then select Sharpen gt Sharpen or Sharpen More from the Filters pop up menu e Select Filters gt Sharpen gt Sharpen or Sharpen More Note Applying a filter from the Filters menu is destruc
161. Put Images in Subfolder if you want images stored in a separate folder You can select a specific folder or use the Fireworks default which is a folder named images 10 Click Export After export you ll see the files Fireworks exported on your hard drive If you chose to export all of the pages a separate HTML file for each page is created The images and HTML files are generated in the location you specified in the Export dialog box Note For more detailed information about exporting from Fireworks see Optimizing and Exporting on page 257 Exporting pages as image files 1 Select File gt Export 2 Choose the location for the export files 3 Do one of the following e Select Images Only from the Export pop up menu and choose whether to export the current page or all pages by selecting or deselecting the Current page only check box The pages are exported to the default image format which is set using the Optimize panel e Select Pages to Files in the Export pop up menu and select Images in the Export As pop up menu All of the pages are exported in the default image format which is set using the Optimize panel e Select Pages to Files in the Export pop up menu and select Fireworks PNG in the Export As pop up menu Each page is exported as a separate file in the PNG format Use this method to create PNG files that are backward compatible with Fireworks 8 ADOBE FIREWORKS CS3 159 User Guide Working with layers Each o
162. Specifying Photoshop file import options The import preference options in Fireworks let you specify how to handle layers and text in imported Photoshop files Depending on the options that you choose you can control the degree of appearance and editability retained in imported files To specify import options for Photoshop files 1 Select Edit gt Preferences Note On Mac OS X choose Fireworks gt Preferences 2 Click the Import tab Windows or choose Import from the pop up menu Macintosh 3 Specify import options ADOBE FIREWORKS CS3 324 User Guide Layers Convert to Fireworks Objects imports each layer in the Photoshop file as a separate object on a single layer in Fireworks Layers Share Layer Between Frames makes the imported layers visible across all frames in the Fireworks file Layers Convert to Frames imports each layer in the Photoshop file as an object on a separate frame in Fireworks This option is useful for importing files that you want to use as animations Text Editable converts text in the Photoshop file to editable Fireworks text This option lets you edit imported text using the Fireworks Text tool and the Property inspector The converted text may vary slightly in appearance from the original Text Maintain Appearance converts text in the Photoshop file to a bitmap object in Fireworks This option maintains the original appearance of the text but does not allow you to edit it using the Fireworks Text too
163. Stamp 66 Scale 55 Sharpen 66 Skew 56 Smudge 66 Subselection 100 173 Text 109 tool group pop up menus 26 Transform 54 Zoom 32 Tools panel 25 transformation tools Distort 57 Scale 55 Skew 56 transforming by dragging 54 gradient fills 144 numerically 57 objects 54 pattern fills 144 text 122 transparency 181 271 adding or removing colors 272 animation 247 converting images to gradient transparency 81 illusion 132 in PNG files 311 selecting a color 271 272 See also opacity transparent areas 271 trimming the canvas 36 tryouts 7 Turn off Hide Edges preference 347 Tween Instances command 246 tweening characteristics 246 defined 246 objects 246 typefaces See fonts U underlined text 112 undocking panels from panel group 28 undoing 40 setting number of undo steps 346 using History panel 343 ungrouping objects 58 uninstalling Adobe Fireworks 352 Union command 104 Unsharp Mask filter 82 Up button state 221 Update HTML command 285 296 updates 7 updating slices 278 URL library 196 adding URLs 197 adding used URLs 198 creating 197 entering absolute or relative URLs 196 URL panel 27 196 URLs assigning to a web object 198 assigning to buttons or instances 226 finding and replacing 333 selecting target options 212 user configuration files 350 351 user folder 350 351 UTF 8 encoding 286 350 v valid files defined 335 vector graphics 14 vector masks 164 converting to bitmap mask 177 creatin
164. Styles panel and restore any deleted default styles you can reset the Styles panel to its default state You can also change the size of the icons displayed in the Styles panel To reset the Styles panel to the default styles Select Reset Styles from the Styles panel Options menu Note Resetting styles to the default removes any custom styles you may have saved To change the size of the style preview icons Select Large Icons from the Styles panel Options menu to switch between large and small preview sizes Applying attributes without creating a style You can copy attributes from one object and apply them to other objects without creating a new style in the Styles panel You can use this method to quickly apply attributes to an object when you are not planning to reapply those attributes to other objects Attributes that can be copied and applied include fills strokes filters and text attributes To copy attributes from one object and apply them to other objects 1 Select the object whose attributes you want to copy 2 Select Edit gt Copy 3 Deselect the original object then select the object or objects to which you want to apply the new attributes 4 Select Edit gt Paste Attributes The selected objects take on the same attributes as the original object Using symbols Fireworks has three types of symbols graphic animation and button Each has unique characteristics for its specific use Instances are representatio
165. Transform and entering new dimensions For more information on resizing and scaling objects see Transforming and distorting selected objects and selections on page 54 Drag a corner point on a rectangle Note Scaling a vector object does not change its stroke width Drawing basic rounded rectangles You can draw rectangles with rounded corners by using the Rounded Rectangle tool or by using the Roundness option in the Property inspector to adjust the roundness of the corners of a selected rectangle The Rounded Rectangle tool draws rectangles as grouped objects To move rounded rectangle points independently you must ungroup the rectangle or use the Subselection tool To draw a rectangle with rounded corners 1 From the Rectangle tool pop up menu select the Rounded Rectangle tool 2 Drag the canvas to draw the rectangle You can adjust the roundness of the corners as you draw by pressing any of the arrow keys or the 1 or 2 number keys repeatedly To round the corners of a selected rectangle In the Property inspector enter a value from 0 to 100 in the Roundness box and press Enter or drag the pop up slider Note If the Property inspector is at half height click the expander arrow in the lower right corner to expand it to full height Drawing basic polygons and stars With the Polygon tool you can draw any equilateral polygon or star from a triangle to a polygon or star with 360 sides ADOBE FIREWORKS CS3 86 U
166. Values range from 0 to 360 You can enter higher values for more than one rotation The default is 0 CW and CCW indicate the direction in which the object rotates CW indicates clockwise and CCW indicates counter clockwise rotation ADOBE FIREWORKS CS3 241 User Guide To change animation symbol properties 1 Select an animation symbol 2 Select Modify gt Animation gt Settings to open the Animate dialog box or Window gt Properties to open the Property inspector if it is not already open 3 Change the desired properties 4 Ifyoure using the Animate dialog box click OK to accept the changed properties Removing animations You can remove animations either by deleting the animation symbol from the library or by removing the animation from the symbol To remove a symbol from the library 1 Inthe Library panel select the animation symbol you want to remove 2 Drag the symbol to the trash can icon in the lower right corner To remove the animation from a selected animation symbol Select Modify gt Animation gt Remove Animation The symbol becomes a graphic symbol and is no longer animated If you later convert the symbol back into an animation symbol the previous animation settings return Editing symbol graphics You can change the graphic your symbol is based on as well as its properties You edit symbol graphics in the Symbol Editor The Symbol Editor lets you use any of the drawing text or color tools to edit
167. 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 You can apply a filter to an individual object within a group by selecting only that object with the Subselection tool For information on selecting a group or objects within a group see Selecting objects within groups on page 58 ADOBE FIREWORKS CS3 152 User Guide Editing Live Filters When you click a Live Filter s info button in the Property inspector Fireworks opens a pop up window with the current settings for the filter which you can edit To edit a Live Filter 1 In the Property inspector click the info button next to the filter you want to edit The corresponding pop up window or dialog box opens 2 Adjust the filter settings Note If a filter is not editable the info button is dimmed For example you cannot edit Auto Levels 3 Click outside the window or press Enter Reordering Live Filters You can rearrange the order of the filters applied to an object Reordering filters changes the sequence in which the filters are applied which can change the combined filter In general filters that change the interior of an object such as the Inner Bevel filter should be applied before filters that change the object s exterior For example you should apply the Inner Bevel filter before you apply the Outer Bevel Glow or Shadow filter To reorder fi
168. a text block as you edit text in the text block but the Text tool does not retain stroke characteristics or Live Filters if you create a new text block For more information see Applying strokes fills and filters to text on page 119 Applying color to all text in selected text blocks You can apply text color to all text in selected text blocks using the Property inspector any Fill Color box or the Eyedropper tool You can also use any of these methods to set the stroke color for the Text tool To set the color of all text in a selected text block do one of the following e Click the Fill Color box in the Property inspector and select a color from the color pop up window or sample a color from anywhere on the screen using the eyedropper pointer while either color pop up window is open ADOBE FIREWORKS CS3 User Guide Y Properties G A Text tool Arial 12 v 1 U 100 v Normal Avlo t 10 winx v G x 0 v o v Smooth Anti Alias v A 100 0 v 7 Auto kern amp A Fill Color box e In the Tools panel click the Fill Color box and select a color from the color pop up window or sample a color from anywhere on the screen using the eyedropper pointer while the Fill Color box pop up window is open In the Tools panel click the icon next to the Fill Color box select the Eyedropper tool and then click to sample a color anywhere in any open document The color of the Fill Color box in the Tool
169. alf height click Edit Filters to display the Add Live Filters button the Delete Live Filters button and the list of applied Live Filters ADOBE FIREWORKS CS3 148 User Guide Note A newly created fill assumes the current color displayed in the Fill Color box in the Tools panel You can customize each Live Filter to get the look you want When you select color correction filters dialog boxes open containing controls to adjust color characteristics such as auto levels brightness and contrast hue and saturation invert curves and color fill When you select Bevel Blur Emboss Glow Shadow or Sharpen filters either a dialog box or a pop up menu opens in which you can adjust the filter settings When you select a blur or sharpen filter it is applied directly to the object Experiment with the settings until you get the look you want If you want to change the filter settings later see Editing Live Filters on page 152 Inner Bevel pop up window A Width of bevel B Button bevel preset C Contrast D Softness E Angle of bevel To apply a Live Filter to selected objects 1 Click the Add Live Filters button in the Property inspector then select a filter from the Add Filters pop up menu The filter is added to the Filters list for the selected object To apply a Live Filter so that it appears to affect only a pixel selection within an image you can cut and paste the selection in place to create a new bitmap image sel
170. all the original pixels which may make the relative size of the pasted image larger or smaller than expected Importing PNG files You can import Fireworks PNG files into the current layer of the active Fireworks document Any hotspot objects and slice objects are placed on the document s Web Layer For more information about slices and web objects see Viewing and displaying slices and slice guides on page 203 For more information about layers see Working with layers on page 159 To import a PNG file into a Fireworks document layer 1 In the Layers panel select the layer into which you want to import the file 2 Select File gt Import to open the Import dialog box 3 Navigate to the file to be imported and click Open 4 On the canvas position the import pointer where you want to place the upper left corner of the image 5 Import the file e Click to import the full size image Drag the import pointer to resize the image as you import Fireworks retains the proportions of the image Importing from a digital camera or scanner You can import images from a digital camera or scanner only if it is TWAIN compliant Windows or uses built in OS X Image Capture capability Macintosh Images imported into Fireworks from a digital camera or scanner open as new documents Note Fireworks cannot import from digital cameras or image scanners unless the appropriate software drivers modules and plug ins have been installed For
171. ames panel set the frame delay For more information see Setting the frame delay on page 242 Animation export formats After you create and optimize an animation it is ready to export Animated GIFs give the best results for clip art and cartoon like graphics For information about exporting animated GIFs see Exporting an animation on page 279 You can export the animation as a Flash SWF file and then import it into Flash Or you can skip the export step and import your Fireworks PNG source file directly into Flash This option gives you the most control over how your animation is imported You can import all layers and frames of your animation if desired and then further edit them within Flash For more information see Working with Flash on page 305 You can also export frames or layers from your animations as multiple files This can be useful when you have many symbols on different layers for the same object For example you can export a banner ad as multiple files if each letter of a company name is animated in a graphic Each letter is separate from the others For more information about exporting layers or frames to multiple files see Exporting frames or layers on page 279 Working with existing animations You can use an existing animated GIF file as part of your Fireworks animation There are two ways of using the file you can import the GIF into an existing Fireworks file or you can open the GIF as a new
172. ames to hotspots If the Property inspector is minimized click the expander arrow in the lower right corner to see all properties Hotspot Shape Rectangle F Link http www myurl com E x ws Alt Goto my url w 98_ x 328 Target _self w Hi 274 Y 401 You assign hotspot properties the same way you assign slice properties For more information on using the Property inspector to assign URLs alt text target frames and custom names see Preparing slices for export on page 211 ADOBE FIREWORKS CS3 218 User Guide Creating image maps After you ve inserted several hotspots on top of a desired graphic you must export the graphic as an image map so it will function in a web browser Exporting an image map generates the graphics and the HTML containing map information for hotspots and corresponding URL links Note Fireworks produces only client side image maps when exporting As an alternative to exporting you can copy your image map to the Clipboard and paste it into Dreamweaver or another HTML editor To export an image map or copy it to the Clipboard 1 Optimize the graphic to prepare it for export For more information see About optimizing on page 257 2 Select File gt Export 3 Ifyou are exporting your image as opposed to copying it to the Clipboard navigate to the folder where you want to place the HTML file and name the file If you have already built a local file
173. an read the Illustrator 7 file format 4 Click the Options button 5 In the Illustrator Export Options dialog box choose one of the following Export Current Frame Only preserves layer names and exports only the current frame Convert Frames to Layers exports each Fireworks frame as a layer 6 Select FreeHand Compatible to export the file for use in FreeHand Choosing FreeHand Compatible omits bitmaps and converts gradient fills to solid fills 7 Click OK 8 Click Save in the Export dialog box Note Upon export Fireworks sets object edges to Hard 9 Switch to an open document in FreeHand 10 Select File gt Open or File gt Import to navigate to the file you exported from Fireworks and click Open Working with other vector graphics applications Fireworks can share vector graphics with other vector graphics applications such as Adobe Illustrator In Fireworks you export and import vector graphics from these applications in the same way that you export and import graphics from FreeHand For more information see Working with FreeHand on page 312 Unsupported features Because Fireworks and other vector graphic editors do not always share the same features the appearance of objects will differ between applications Most other vector graphic editors including FreeHand do not support the following Fireworks features ADOBE FIREWORKS CS3 User Guide e Live Filters e Blending modes Textures pattern fills web dither f
174. ance copy of the symbol from the Library panel to the workspace 3 Do one of the following to make a copy of the button instance e Select the button instance and select Edit gt Clone Alt drag Windows or Option drag Macintosh the button instance 4 Shift drag a button to align it horizontally or vertically For more precise control use the arrow keys to move the instance 5 Repeat steps 3 and 4 to create additional button instances 6 Select each instance and assign it unique text a URL and other properties using the Property inspector ADOBE FIREWORKS CS3 229 User Guide Creating pop up menus Pop up menus are displayed in a browser when the user moves a pointer over or clicks a triggering web object such as a slice or hotspot You can attach URL links to pop up menu items for navigation For example you can use pop up menus to organize several navigation options that are related to a button in a nav bar You can create as many submenu levels as you like in pop up menus Each pop up menu item appears as an HTML or image cell which has an Up state an Over state and text in both states To preview a pop up menu press F12 to preview it in a browser The previews in the Fireworks workspace do not display pop up menus About the Pop up Menu Editor The Pop up Menu Editor is a tabbed dialog box that guides you through the creation of a pop up menu Its many options for controlling the characteristics of a pop up menu are
175. and Editing styles on page 185 Note You cannot rename or delete a standard Fireworks filter Saving Live Filters as commands You can save and reuse a filter by creating a command based on it Using the History panel you can automate all the Live Filters applied to an object by creating a command available from the Commands menu You can use these commands in batch processing For more information see Performing commands with a batch process on page 339 To save filter settings as a command 1 Apply the filters to the object 2 Ifthe History panel is not visible select Window gt History 3 Shift click the range of actions you want to save as a command 4 Do one of the following e Select Save as Command from the History panel Options menu e Click the Save button at the bottom of the History panel ADOBE FIREWORKS CS3 154 User Guide A Save button 5 Enter a command name and click OK to add the command to the Commands menu 155 Chapter 9 Pages Layers Masking and Blending Fireworks CS3 added the capability to create a single PNG file that contains multiple pages Each page contains its own settings for canvas size color image resolution and guides These settings can be set on a per page basis or globally across all pages in the document You can also create a master page for common elements Layers and pages can be used together if you have elements that you want to appear on more than one
176. and change the color of the grid Note The grid does not reside on a layer nor is it exported with a document It is merely a design tool To show and hide the grid Select View gt Grid gt Show Grid To snap objects to the grid Select View gt Grid gt Snap to Grid To change the grid color 1 Select View gt Grid gt Edit Grid ADOBE FIREWORKS CS3 40 User Guide 2 Select the new grid color from the color box pop up window and click OK To change the size of the grid s cells 1 Select View gt Grid gt Edit Grid 2 Enter the appropriate values in the horizontal and vertical spacing text boxes and click OK Using the History panel to undo and repeat multiple actions With the History panel you can view modify and repeat the actions taken to create the document The History panel lists the most recent actions you have performed in Fireworks up to the number specified in the Undo Steps field in the Fireworks Preferences dialog box With the History panel you can do any of the following e Quickly undo and redo recent actions e Select recently performed actions from the History panel and repeat them e Copy selected commands to the Clipboard as the JavaScript text equivalent e Save a group of recently performed actions as a custom command and then select it from the Command menu to reuse as a single command For more information about creating commands using the History panel see Scripting with the
177. and select Animated GIF as the file format in the Optimize panel For more information on optimizing see Optimizing GIF PNG TIFF BMP and PICT files on page 265 6 Right click Windows or Control click Macintosh each slice and select Export Selected Slice from the context menu to export each slice individually In the Export dialog box type a name for each file select the destination and click Export Exporting frames or layers Fireworks can export each layer or frame in a document as a separate image file using the optimization settings specified in the Optimize panel The name of the layer or frame determines the filename of each exported file This export method is sometimes used to export animations To export frames or layers as multiple files 1 Select File gt Export ADOBE FIREWORKS CS3 280 User Guide 2 Type a filename and select a destination folder 3 Inthe Export pop up menu select one of the following Frames to Files exports frames as multiple files Layers to Files exports layers as multiple files Note This exports all layers on the current frame 4 Select Trim Images to automatically crop the exported images to fit the objects on each frame If you want to export frames or layers the same size as the document deselect Trim Images 5 Click Export Exporting an area You can use the Export Area tool to export a portion of a Fireworks document To export a portion of a document 1 Select the Exp
178. ange the target for existing button instances of that symbol that already have unique targets assigned to them This also applies to changes made to a button symbol s URL and alt text To set the target for a button instance in the workspace 1 Select the button instance in the workspace 2 Do one of the following in the Property inspector Select a preset target from the Target pop up menu None or _self loads the web page into the same frame or window as the link _blank loads the web page into a new unnamed browser window _parent loads the web page into the parent frameset or window of the frame that contains the link _top loads the web page into the full browser window removing all frames e Enter a target in the Target text box ADOBE FIREWORKS CS3 228 User Guide Setting the alternate alt text for a button symbol or instance Alternate alt text appears on or near an image placeholder while an image is downloading from the web or in place of an image if it fails to download It also replaces graphics if the user has the browser set to refrain from displaying images Alt text can be a symbol or instance level button property You can set alternate text for a button symbol or instance in the Property inspector Applications that assist the visually impaired audibly read the alternate text for graphics on web pages in a browser For your alternate text use concise meaningful descriptions of graphical elements To set th
179. ansparency pop up menu 3 Click the Add Color to Transparency button and click a pixel in the halo All pixels of the same color are removed in the preview 4 Ifthe halo is still there repeat step 3 until the halo is gone Saving and reusing optimization settings Fireworks remembers the last optimization settings you used after you perform any of the following actions File gt Save e File gt Save As File gt Save As Save as a Copy ADOBE FIREWORKS CS3 276 User Guide e File gt Export Fireworks then applies these settings to new documents Note As in previous versions of Fireworks new slices still get their default optimization settings from the parent document You can also save custom optimization settings for future use in optimization or batch processing The following information is saved in custom preset optimizations e Settings and color table in the Optimize panel e Frame delay settings chosen in the Frames panel for animations only To save optimization settings as a preset 1 Select Save Settings from the Optimize panel Options menu 2 Type a name for the optimization preset and click OK Saved optimization settings appear at the bottom of the Settings pop up menu in the Optimize panel and in the Property inspector They are available in all subsequent documents The preset file is saved in the Export Settings folder in your user specific Fireworks configuration folder For information on the loca
180. ant to modify All behaviors associated with that slice or hotspot are displayed in the Behaviors panel 2 Select the behavior you want to edit ADOBE FIREWORKS CS3 211 User Guide 3 Click the arrow beside the event and select a new event from the pop up menu onMouseOver triggers the behavior when the pointer rolls over the trigger area onMouseOut triggers the behavior when the pointer leaves the trigger area onClick triggers the behavior when the trigger object is clicked onLoad triggers the behavior when the web page is loaded Using external image files for swap image You can use an image outside the current Fireworks document as the source for a swap image Source images can be in GIF animated GIF JPEG or PNG format When you select an external file as the image source Fireworks swaps that file with the target slice when the swap image is triggered in a web browser The file must have the same width and height as the slice it is swapping into If it does not the browser resizes the file to fit within the slice object Resizing the file may reduce its quality especially in the case of an animated GIF To select an external image file as the source for a swap image 1 While in the Swap Image Nav Bar Over or Nav Bar Down dialog box select Image File and click the folder icon Note If you don t see this option in the Swap Image dialog box select More Options and then perform step 1 2 Navigate to the file you want to use
181. anti aliasing Kerning is measured as a percentage You can use the Property inspector or the keyboard to set kerning To disable automatic kerning gt In the Property inspector deselect Auto Kern If the Property inspector is minimized click the expander arrow in the lower right corner to see all properties 114 ADOBE FIREWORKS CS3 115 User Guide To set kerning 1 Do one of the following to select the text you want to kern e Click between two characters with the Text tool Use the Text tool to highlight the characters you want to change Use the Pointer tool to select an entire text block Shift click to select multiple text blocks 2 Do one of the following In the Property inspector drag the Kerning pop up slider or enter a percentage in the text box A Kerning pop up slider B Kerning percentage Zero represents normal kerning Positive values move letters farther apart Negative values move letters closer together e Hold down Control Windows or Command Macintosh while pressing the Left Arrow or Right Arrow keys on the keyboard The Left Arrow key decreases the space between letters by 1 and the Right Arrow key moves letters farther apart by 1 Hold down Shift and Control Windows or Shift and Command Macintosh while pressing the Left Arrow or Right Arrow keys to adjust kerning by 10 increments Setting leading Leading determines the distance between adjacent lines in a paragraph L
182. aped 202 simple 209 Simple Rollover behavior 209 swap image 207 rotating constraining 56 objects 55 relocating axis of rotation 56 Rounded Rectangle tool 87 89 rounded rectangles 85 Rubber Stamp tool 66 rulers 38 S saturation adjusting 71 saving 276 animations 279 images 277 saving documents 22 23 Scale tool 55 scaling graphics 338 interpolation options 346 objects 55 scripting 343 editing scripts 344 Flash SWF files 344 scrolling the canvas 33 See also panning searching 330 See also finding and replacing segments converting 97 selecting adding to a pixel selection 47 48 additional objects 43 alpha area 48 area around a marquee 50 canceling a selection 54 contracting a marquee border 49 deselecting a marquee 47 deselecting an object 43 expanding a marquee border 49 feathering a pixel selection 49 feathering edges 65 floating pixel selection 52 freeform area of pixels 45 grouped objects 58 images 44 inverting a pixel selection 49 overlapping areas of bitmaps 48 pixel areas 45 pixels 44 points 98 polygonal area of pixels 45 similar colors 46 smoothing a marquee border 50 subtracting from a pixel selection 47 48 Selective JPEG compression 273 Enable Selective Quality 273 overlay color 273 preserve button quality 274 preserve text quality 274 Selective Quality button 273 Send Backward command 59 Send to Back command 59 sending documents as e mail attachments 289 Set Nav Bar
183. are added to the batch process Note Valid files are files that have been created named and saved If the latest file version is not saved you are asked to save it and you can then continue the batch process If you don t save the file the entire batch process ends Add All adds all valid files in the currently selected folder to the list of files to batch process Remove removes selected files from the list of files to batch process 3 Select Include Current Open Files to add all currently open files These files do not appear in the list of files to batch process but they are included in the process 4 Click Next then do one or both of the following 335 ADOBE FIREWORKS CS3 336 User Guide To adda task to the batch select it in the Batch Options list and click Add Each task can be added only once For more information on the Scale option see Scaling graphics with a batch process on page 338 For more infor mation on the Rename option see Changing filenames with a batch process on page 339 For more information on adding commands see Performing commands with a batch process on page 339 Batch Process Batch options Include in batch Export ee Scale Find and a E Commands Rename C Replace Replace blanks with Cl Add Prefix C dd Suffix To reorder the list select the task in the Include in Batch list and click the up and down arrow buttons E
184. are open Click the file name on the Start page Opening graphics created in other applications With Fireworks you can open files created in other applications or file formats including Photoshop Adobe FreeHand Adobe Illustrator uncompressed CorelDRAW WBMP EPS JPEG GIF and animated GIF files When you open a file format other than PNG using File gt Open you create a new Fireworks PNG document based on the file you open You can use all of the features of Fireworks to edit the image You can then either select Save As to save your work as a new Fireworks PNG file or as another file format or with some image types you can select Save to save the document in its original format Saving in the document s original format flattens the image to a single layer and eliminates your ability to edit the Fireworks specific features you added to the image Using Fireworks you can save the following file formats directly Fireworks PNG GIF animated GIF JPEG BMP WBMP TIFF SWE AI PSD and PICT Mac only ADOBE FIREWORKS CS3 17 User Guide Note Fireworks saves 16 bit TIFF images at 24 bit color depth Animated GIFs You can bring animated GIF files into Fireworks in two ways e You can import an animated GIF as an animation symbol You can edit and move all the elements of the animation as a single unit and use the Library panel to create new instances of the symbol Note When you import an animated GIF the frame delay setting
185. are some of the blending modes in Fireworks Normal applies no blending mode Dissolve randomly chooses colors between the current and background layer to create the blend effect Multiply multiplies the base color by the blend color resulting in darker colors Screen multiplies the inverse of the blend color by the base color resulting in a bleaching effect Darken selects the darker of the blend color and base color to use as the result color This replaces only pixels that are lighter than the blend color 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 Burn blending with white has no effect Lighten selects the lighter of the blend color and base color to use as the result color This replaces only pixels that are darker than the blend color Linear Dodge inspects each channel of the current and background layers and lightens the background color to reflect the blend color by increasing the brightness The overall effect is to lighten the image The neutral color is black so Linear Dodge blending with black has no effect Vivid Light a contrast increasing blend mode that combines the effects of Color Burn and Color Dodge modes If the blend color is darker than mid gray Vivid Light darkens or burns the image by increasing the contrast Otherwise t
186. ask to an object which you can customize by drawing on it with the bitmap tools Note For details on creating empty opaque or black masks see Masking objects using the Reveal and Hide commands on page 170 To create a bitmap mask using the Layers panel 1 Select the object you want to mask 2 Click the Add Mask button at the bottom of the Layers panel Fireworks applies an empty mask to the selected object The Layers panel displays a mask thumbnail representing the empty mask 3 Optionally if the masked object is a bitmap use one of the marquee or lasso tools to create a pixel selection 4 Select a bitmap painting tool from the Tools panel such as the Brush Pencil Paint Bucket or Gradient tool 5 Set the desired tool options in the Property inspector 6 With the mask still selected draw on the empty mask In the areas where you draw the underlying masked object is hidden ADOBE FIREWORKS CS3 170 User Guide D Bitmap The mask as it appears in the Layers panel Note For more information about modifying a bitmap mask s appearance by drawing on it see Modifying a masks appearance on page 175 Masking objects using the Reveal and Hide commands The Modify gt Mask submenu has several options for applying empty bitmap masks to objects Reveal All applies an empty transparent mask to an object revealing the entire object To achieve the same effect click the Add Mask button in the Layers panel
187. ast 76 Find Edges 80 Gaussian Blur 79 Hue Saturation 77 Invert 78 Motion Blur 79 Photoshop plug ins 150 Radial Blur 80 Sharpen 81 Sharpen More 81 Unsharp Mask 82 Zoom Blur 80 Find and Replace panel 331 332 Find Edges filter 80 Find panel 28 finding and replacing 331 batch processed files 338 colors 333 fonts 332 multiple files 332 non websafe colors 333 selecting source for search 331 text 332 URLs 333 uses 330 Fireworks 327 Fireworks See Adobe Fireworks Fit to Canvas 36 Flash exporting to 305 310 importing Adobe Fireworks PNG to 305 Flash SWF movies 345 Flatten Selection command 62 Flex integration 329 flipping objects 56 floating pixel selections INDEX 357 creating 52 moving 52 font installation 2 fonts finding and replacing 332 handling missing 123 styles 112 113 type sizes 112 113 frame delay animations 242 frame delay default setting 17 frames adding 243 custom viewing 246 deleting 244 disabling layer sharing 245 exporting 279 inserting 243 managing 242 moving objects to another frame 244 multiframe editing 246 names in animation 243 onion skinning 245 reordering 244 setting delay 242 sharing layers for animation 244 turning off onion skinning 246 turning on and off 243 viewing all 246 viewing current and adjacent 246 viewing next 246 Frames panel 27 242 freeform paths 93 FreeHand exporting to 314 placing Adobe Fireworks graphics in 312 Full Screen with Menus mode 33
188. at eek Gage Ab cea ee a a dae ee a ate a 22 The Fireworks work environment 0 0 eee eee eee ee ee ene ee eee n cence nen en ee canes 24 Chapter 3 Selecting and Transforming Objects Selecting objects caivca cece ces eset sien ta ee Se eee ed EEA 41 Selecting pixels sesei eroi e E EE EN nal Se E eee O E EA a 44 Editing selected objects co rean a a a hw cee A ca E a ta a E ees 53 Transforming and distorting selected objects and selections cece eee e eee eee eee 54 Organizing OBJECTS sens E adiee tees Mier EAE os a Sie wines ANRE AAE So yaaa ne saan 58 Chapter 4 Working with Bitmaps Working with bitmaps 4 sc eve tacts titirin eluate EEEIEE daw eae a eee ca Ti eae sae 61 Cr ating bitmap obj cts vc s scceae ss dea oR a eae ied eave TAARN 61 Accessing photo editing tools kee cece cnc nen en ene en ence ene ee teen enenees 63 Drawing painting and editing bitmap objects 60 cece ccc e eee eee e ene e eee eeeee 63 Retouching bitMaps cessu cd aales gigi iad caaeets DEEE els OnE DEE EE EEE e EREE Eia 66 Adjusting bitmap color and tone oo eee cc cence cece eee e een e ence eben seen enenees 71 Blurring and sharpening bitmaps cece cece cence ee eee en ene eect teen een eneee 79 Adding noise toamimage sos irisa rrean nansa Liaise ad bases a Ge gele aaeain ea Rinia 83 Chapter 5 Working with Vector Objects Drawing Vector Objects varaenn ciaa ed das ce AE odes aE so Ode anes a wea 84 Editing paths gt asissc
189. ault browser To open an existing slideshow 1 Select Commands gt Create Slideshow 2 Inthe Create Slideshow window select Albums gt Open an existing AlbumBook 3 Browse to the folder that contains the existing slideshow XML file and click Open Note You can also open an existing slideshow by clicking the Browse button next to Albums ADOBE FIREWORKS CS3 252 User Guide To delete an album 1 Select Commands gt Create Slideshow 2 In the Create Slideshow window select Albums gt Open an existing AlbumBook 3 Browse to the folder that contains the existing slideshow XML file and click Open 4 Select the album in the Albums lists and then click the Remove an album button the minus sign To add additional images to an album 1 Select Commands gt Create Slideshow 2 In the Create Slideshow window create a new album or select Albums gt Open an existing AlbumBook to open an existing album 3 Ifyou are opening an existing album browse to the folder that contains the existing slideshow XML file and click Open 4 Click on the album in the Albums list to select it 5 Click the Add image s button the plus sign next to Images 6 Click the Browse button and select one or multiple images to add to the album then click Done The new images are added at the end of the album image list To change the order of images in an album 1 Select Commands gt Create Slideshow 2 In the Create Slideshow window cr
190. be Fireworks tables 299 launching and optimizing Adobe Fireworks images 300 Optimize Image in Adobe Fireworks command 300 updating Adobe Fireworks HTML 296 drop shadows 150 duplicating selected objects 53 E edges beveled 149 showing and hiding 43 Edit Gradient dialog box 143 Edit Stroke dialog box 138 editing actions in the History panel 345 animation symbols 240 behaviors 210 bitmap objects 63 gradient fills 142 images 63 Live Filters 152 pages 156 paths 100 pixels 44 pop up menus 236 selected objects 53 single layer 162 solid fills 141 styles 185 editing paths 107 effects editing 152 finding and replacing 333 glow 150 Live Filters 147 plug ins 151 removing 152 setting defaults 153 INDEX 356 ellipse 84 e mail 289 embossing 149 EPS files opening in Adobe Fireworks 17 Eraser tool 65 erasing bitmaps 65 Expand command 49 Expand Stroke command 106 expanding layers 161 strokes 106 Export Area tool 280 Export Preview 258 comparing optimization settings 259 optimizing 258 panning area 259 previewing 258 previewing optimization 258 zooming 259 exporting 276 Adobe Fireworks files to Dreamweaver 321 an area 280 animated GIFs 248 animations 247 279 batch process settings 337 CSS layers 285 customizing files for Photoshop 325 default location for 276 frames as multiple files 279 hotspots 217 HTML 280 images 277 layers as multiple files 279 pages as image files 158 pages to
191. between the navigation pane and the reading pane press Ctrl Tab and Shift Ctrl Tab e To move through links within a pane press Tab or Shift Tab To activate a selected link press Enter To make text bigger press Ctrl equal e To make text smaller press Ctrl hyphen How to choose the right Help documents A variety of resources are available for learning Fireworks including Fireworks Help PDF versions of the Fireworks documentation components and several web based information sources e Fireworks Help called Using Fireworks intended for all users gives comprehensive information about all Fireworks features You can access it at any time in Fireworks help Help gt Using Fireworks The manual is also available in PDF format on the Adobe website at www adobe com go fireworks_documentation Extending Fireworks which describes the Fireworks framework and the application programming interface API is intended for advanced users who want to build extensions or customize the Fireworks interface You can control every Fireworks command or setting using special JavaScript commands that Fireworks can interpret The manual is available both in help and on the Adobe website as a downloadable PDF Resources Adobe Video Workshop Adobe Creative Suite 3 Video Workshop enables you to learn about your product There are over 200 training videos for Adobe Creative Suite 3 covering a wide range of subjects for print web and video profess
192. bject in a document resides on a layer You can either create layers before you draw or add layers as needed The canvas is below all layers and is not itself a layer For information on working with the canvas see Changing the canvas on page 34 We You can view the stacking order of layers sub layers and objects in the Layers panel This is the order in which they appear in the document Fireworks stacks layers based on the order in which you created them placing the most recently created layer on the top of the stack The stacking order determines how objects on one layer overlap objects on another You can rearrange the order of layers and of objects within layers and you can create sub layers and move objects onto them The Layers panel displays the current state of all layers in the current frame or page of a document To view other frames or pages you can use the Frames or Pages panel or select an option from the Frame pop up menu at the bottom of the Layers panel or the Pages pop up menu at the bottom of the document window For more infor mation see Working with frames on page 242 and Working with pages on page 155 The name of the active layer is highlighted in the Layers panel You can expand a layer to view a list of all the objects on it By default the objects are displayed in thumbnails Masks are also shown in the Layers panel Selecting the mask thumbnail allows you to edit the mask You can also create
193. bout button states A button can have up to four different states Each state represents the button s appearance in response to a mouse event The Up state is the default or at rest appearance of the button The Over state is the way the button appears when the pointer is moved over it This state alerts the user that clicking the mouse is likely to result in an action The Down state represents the button after it is clicked Often a concave image of the button is used to signify that it has been pressed This button state typically represents the current web page on multibutton navigation bars The Over While Down state is the appearance when the user moves the pointer over a button that is in the Down state This button state typically shows that the pointer is over the button for the current web page on multibutton navigation bars With the Button Editor you can create all of these different button states as well as an area for triggering the button action Using the Button Editor The Button Editor is where you create and edit a JavaScript button symbol in Fireworks The tabs along the top of the Button Editor correspond to the four button states and the active area The tips on each option in the Button Editor help you make design decisions for all four button states Creating a simple two state button With the Button Editor you can create custom buttons by drawing shapes importing graphic images or dragging objects from the D
194. bsti tutes for graphics that fail to download In some newer versions of browsers the text also appears next to the pointer as a tool tip Entering brief meaningful alternate text has become increasingly important in web design A growing number of visually impaired people are using screen reading applications which read alternate text in a computer generated voice as the pointer passes over graphics on a web page To specify alt text for a selected slice or hotspot gt In the Property inspector type the text in the Alt Text box Assigning a target A target is an alternate web page frame or web browser window in which the linked document opens You can specify a target for a selected slice in the Property inspector If the Property inspector is minimized click the expander arrow to see all properties To specify a target for a selected slice or hotspot in the Property inspector Type the name of the HTML frame in the Target text box or select a reserved target from the Target pop up menu _blank loads the linked documents in a new unnamed browser window _parent loads the linked document in the parent frameset or window of the frame that contains the link If the frame containing the link is not nested then the linked document loads into the full browser window _self loads the linked document in the same frame or window as the link This target is implied so you usually need not specify it _top loads the linked document in th
195. cally opens the placed Fireworks image whether or not a source PNG file exists Updates are made to the placed image only Ask When Launching lets you specify each time whether or not to open the source PNG file When you edit or optimize a placed image Fireworks displays a message prompting you to make a launch and edit decision You can also specify global launch and edit preferences from this prompt Using the File Management button The File Management button it located at the top of the Document window next to the Quick Export button offers easy access to file transport commands You can use the File Management button if your document resides in a Dreamweaver site folder and if the site has access to a remote server Fireworks recognizes your folder as a site if you have used the Manage Site dialog box in Dreamweaver to define the target folder or a folder that contains the target folder as the local root folder for a site The File Management button displays the following menu commands Get copies the remote version of the file to the local site overwriting the local file with the remote copy Check Out checks the file out overwriting the local file with the remote copy Check Out is enabled in Fireworks only if the Enable File Check In and Check Out option is enabled in Dreamweaver for the site in which the document resides Put copies the local version of the file to the remote site overwriting the remote file with the local copy
196. cates that you could improve the image by applying the Levels or Curves feature The horizontal axis represents color values from darkest 0 to brightest 255 Read the horizontal axis from left to right the darker pixels are on the left the midtone pixels are in the center and the brighter pixels are on the right The vertical axis represents the number of pixels at each brightness level Typically you should adjust the highlights and shadows first Adjusting the midtones second lets you improve their brightness value without affecting the highlights and shadows ADOBE FIREWORKS CS3 73 User Guide To adjust highlights midtones and shadows 1 Select the bitmap image 2 Do one of the following to open the Levels dialog box In the Property inspector click the Add Live Filters button and then select Adjust Color gt Levels from the Filters pop up menu e Select Filters gt Adjust Color gt Levels Note Applying a filter from the Filters menu is destructive that is it cannot be undone except when Edit gt Undo is an option To maintain the ability to adjust turn off or remove this filter apply it as a Live Filter as described in the first bulleted option in this step For more information see Using Live Filters on page 147 Channel RGB v Input Levels 0 1 zziz Preview E H ay 7 Output Levels lo 255 A Levels dialog box To view your changes in the workspace select Preview in th
197. ce on page 175 To use Reveal Selection and Hide Selection commands to create a mask 1 Select the Magic Wand or any marquee or lasso tool from the Tools panel 2 Select pixels in a bitmap 55 Original image pixels selected with the Magic Wand 3 Do one of the following to create the mask e Select Modify gt Mask gt Reveal Selection to show the area defined by the pixel selection e Select Modify gt Mask gt Hide Selection to hide the area defined by the pixel selection The results of Reveal Selection and Hide Selection A bitmap mask is applied using the pixel selection You can further edit the mask to reveal or hide the remaining pixels of the masked object using the bitmap tools in the Tools panel For more information about modifying a bitmap mask s appearance by drawing on it see Modifying a mask s appearance on page 175 About importing and exporting Photoshop layer masks In Photoshop you can mask images using layer masks or grouped layers Fireworks lets you successfully import images that employ layer masks without losing the ability to edit them Layer masks are imported as bitmap masks ADOBE FIREWORKS CS3 172 User Guide Fireworks masks can also be exported to Photoshop They are converted into Photoshop layer masks If the masked objects include text and you want to maintain text editability in Photoshop you must select Maintain Editability over Appearance when exporting Note If te
198. ce do one of the following e Enter the URL in the Link text box in the Property inspector or select a page from the drop down list This list contains all of the pages in the current document e Select a URL from the URL panel Setting the target for a button The target is the window or frame in which the destination web page appears when a button instance is clicked If you dont enter a target in the Property inspector the web page appears in the same frame or window as the link that called it The target can be a symbol or instance level button property You can set the target for a symbol so that all instances of the symbol have the same target option To set the target for a button symbol in the Button Editor 1 Do one of the following to open the button in the Button Editor e Double click a button instance in the workspace In the Library panel double click the button preview or the symbol icon beside the button symbol 2 Do one of the following in the Property inspector e Select a preset target from the Target pop up menu None or _self loads the web page into the same frame or window as the link _blank loads the web page into a new unnamed browser window _parent loads the web page into the parent frameset or window of the frame that contains the link _top loads the web page into the full browser window removing all frames Enter a target in the Target text box Note Changing the target for a button symbol won t ch
199. ch you can later open for editing in an HTML editor ADOBE FIREWORKS CS3 281 User Guide Export each page in a Fireworks file to a separate HTML file e Copy HTML code to the Clipboard in Fireworks and then paste that code directly into an existing HTML document Export an HTML file open itin an HTML editor manually copy sections of code from the file and paste that code into another HTML document e Use the Update HTML command to make changes to an HTML file you ve previously created Note Adobe Dreamweaver shares a tight integration with Fireworks Fireworks handles the export of HTML to Dream weaver differently than it handles export to other HTML editors If you are exporting Fireworks HTML to Dreamweaver see Working with Dreamweaver on page 292 By default Fireworks specifies UTF 8 encoding when you export HTML which ensures that the characters in the HTML file will be displayed correctly for all languages You can also export HTML as Cascading Style Sheet CSS layers and XHTML To define how Fireworks exports HTML you use the HTML Setup dialog box These settings can be document specific or used as your default settings for all HTML that Fireworks exports About HTML HTML code is automatically generated by Fireworks when you export copy or update HTML You do not need to understand it to use it After it is generated there is no need to change it to make it work as long as you do not rename or move files
200. changes the pixel dimensions 5 Do one of the following To maintain the same ratio between the document s horizontal and vertical dimensions select Constrain Propor tions e Deselect Constrain Proportions to resize width and height independently 6 Select Resample Image to add or remove pixels when resizing the image to approximate the same appearance at a different size ADOBE FIREWORKS CS3 36 User Guide 7 Select Current Page Only to apply the canvas size change to the current page If this box is unchecked the canvas size change applies to all pages in the active document as well as any new pages that are created 8 Click OK About resampling Fireworks resamples images differently than most image editing applications do Fireworks contains pixel based bitmap image objects and path based vector objects e When a bitmap object is resampled pixels are added to or removed from the image to make it larger or smaller e When a vector object is resampled little quality loss occurs because the path is redrawn mathematically at a larger or smaller size Because the attributes of vector objects in Fireworks are visible as pixels some strokes or fills may appear slightly different after resampling because the pixels that compose the stroke or fill must be redrawn Note Guides hotspot objects and slice objects are resized when the document image size is changed Resizing bitmap objects always presents a unique problem d
201. click OK 7 Click Export in the Export dialog box To paste HTML copied from Fireworks into an HTML document 1 In your HTML editor open an existing HTML document or create a new one Save the document to the same location in which you exported your images Note Saving the HTML file to the same location as the exported images is not necessary if you use Dreamweaver As long as you export the images from Fireworks to a Dreamweaver site and save the HTML file to a location somewhere within that site Dreamweaver automatically resolves the paths to the associated images 2 View the HTML code and place the insertion point in the desired location between the lt BODY gt tags Note HTML code copied from Fireworks does not include the opening or closing lt HTML gt and lt BODY gt tags 3 Paste the HTML code Refer to the help system within your specific HTML editor for instructions on pasting contents from the Clipboard When pasting code into HTML editors it is important to keep images and HTML files in the correct location or links could be broken If possible when you copy to the Clipboard make sure images are exported to the final location where they will reside on the website Fireworks uses document relative URLs so if the HTML or images are moved the URL links are broken Copying and pasting HTML from an exported Fireworks file You can open exported Fireworks HTML in an HTML editor and copy and paste sections of code into another HT
202. click on an object beneath the pointer on the canvas select the Mouse Highlight option in the Editing tab of the Preferences dialog box For more about preferences see Setting preferences on page 346 To select objects by dragging 1 Drag the Pointer tool to include one or more objects in the selection area vr Using the Subselection tool You use the Subselection tool to select move or modify points on a vector path or an object that is part of a group To move or modify objects with the Subselection tool 1 Select the Subselection tool 2 Make a selection Selection handles appear 3 Do one of the following e To modify an object drag one of its points or selection handles To move the entire object drag anywhere in the object except a point or selection handle Using the Select Behind tool When working with graphics that contain multiple objects you can use the Select Behind tool to select an object that is hidden or obscured by other objects To select an object that is behind other objects Click the Select Behind tool repeatedly over the stacked objects progressing through the objects top to bottom in stacking order until you select the object you want Note You also can select a hard to reach object by clicking it in the Layers panel when the layers are expanded Selection information in the Property inspector Whenever you select an object the Property inspector identifies the selection Th
203. colors in the Color Mixer You can use the Color Mixer to view the values of the active color and edit color values to create new colors Colors Mixer Swatches 2 x om By default the Color Mixer identifies RGB colors as hexadecimal displaying hexadecimal color values for red R green G and blue B color components Hexadecimal RGB values are calculated based on a range of values from 00 to FE Color model Mode of color expression RGB Values of Red Green and Blue where each component has a value from 0 to 255 0 0 0 is black and 255 255 255 is white Hexadecimal RGB values of Red Green and Blue where each component has a hexadecimal value from 00 to FF 00 00 00 is black and FF FF FF is white HSB Values of Hue Saturation and Brightness where Hue has a value from 0 to 360 degrees and Saturation and Brightness have a value from 0 to 100 CMY Values of Cyan Magenta and Yellow where each component has a value from 0 to 255 0 0 0 is white and 255 255 255 is black Grayscale A percentage of black The single Black K component has a value from 0 to 100 where 0 is white 100 is black and values in between are shades of gray You can select alternative color models from the Color Mixer Options menu The current color s component values change with each new color model To display the Color Mixer Select Window gt Color Mixer To apply a color from the color bar to a s
204. ctor launch and edit graphics in Fireworks In most cases Fireworks attempts to locate the source PNG for a graphic on its own When it can t locate the source PNG Fireworks uses the launch and edit preferences that you set to determine how it will handle locating the source PNG file ADOBE FIREWORKS CS3 348 User Guide Note Flash is an exception When launching and editing graphics in Flash Fireworks always uses the preferences you set in the Launch and Edit section of the Preferences dialog box When editing from external application determines whether the original Fireworks PNG file opens when you use Fireworks to edit images from within other applications When optimizing from external application determines whether the original Fireworks PNG file opens when you optimize a graphic Note This setting does not apply to Director which always automatically opens and optimizes a graphic without asking for a source PNG even if you set this preference differently in Fireworks For more information on working with Fireworks graphics within Flash see Working with Flash on page 305 For more information on working with Fireworks graphics in Director see Working with Director on page 317 Note Adobe Dreamweaver handles launch and edit settings differently Dreamweaver always opens the source PNG even if you set launch and edit preferences differently in Fireworks If no Design Note exists or if the path to the source PNG is
205. ctor or the Layers panel you can give slices unique names Fireworks uses the name you specify to name the files that are generated from slicing upon export If you don enter a slice name in the Property inspector or the Layers panel Fireworks automatically names slices for you upon export You can change the auto naming convention that Fireworks uses through the HTML Setup dialog box Fireworks exports a sliced Fireworks document as an HTML file and a series of graphic files You can define properties for the exported HTML file using the HTML Setup dialog box Assigning URLs A URL or Uniform Resource Locator is the address of a specific page or file on the Internet When you assign a URL to a slice users can navigate to that address by clicking the area defined by the slice in their web browser If your file contains a number of pages that you will be exporting you open the Link pop up menu and select one of the pages for the URL After the pages are exported this link will automatically take the user to the specified page To assign a URL to a selected slice gt Enter a URL in the Link text box of the Property inspector If you intend to reuse URLs you can create a URL library in the URL panel and then store URLs in the URL library For more information see Working with URLs on page 196 Entering alternate text Alternate or alt text appears on the image placeholder while the image is downloading from the web it also su
206. d Include Over While Down state Nav Bar Down specifies a Down state for the currently selected slice when it is part of a navigation bar and optionally specifies a Preload images state Nav Bar Restore restores all the other slices in the navigation bar to their Up state Set Pop up Menu attaches a pop up menu to a slice or hotspot When you apply a pop up menu behavior you can use the Pop up Menu Editor For more information see Creating pop up menus on page 229 Set Text of Status Bar lets you define text for display in the status bar at the bottom of most browser windows Attaching behaviors Using the Behaviors panel you can attach a behavior to a slice You can also attach more than one behavior To attach a behavior to a selected slice using the Behaviors panel 1 Click the Add Behavior button the Plus button in the Behaviors panel A Add Behavior button B Remove Behavior button 2 Select a behavior from the Add Behavior button For an explanation of each behavior see Using the Behaviors panel to add interactivity to slices on page 209 Editing behaviors The Behaviors panel also gives you the ability to edit existing behaviors You can specify the type of mouse event such as onClick that triggers the behavior Note You cannot change the event for Simple Rollover and Set Nav Bar Image To change the mouse event that activates the behavior 1 Select the trigger slice or hotspot containing the behavior you w
207. d Transforming Objects on page 41 This chapter contains the following topics e Working with bitmaps on page 61 e Creating bitmap objects on page 61 e Accessing photo editing tools on page 63 e Drawing painting and editing bitmap objects on page 63 e Retouching bitmaps on page 66 e Adjusting bitmap color and tone on page 71 e Blurring and sharpening bitmaps on page 79 e Adding noise to an image on page 83 Working with bitmaps The Bitmap section of the Tools panel contains bitmap selection and editing tools To edit the pixels of a bitmap in your document you can select a tool from the Bitmap section Unlike in previous versions of Fireworks you do not need to deliberately switch between bitmap mode and vector mode but you can still work with bitmaps vector objects and text Switching to the appropriate mode is as simple as selecting a vector or bitmap tool from the Tools panel Creating bitmap objects You can create bitmap graphics by using the Fireworks bitmap drawing and painting tools by cutting or copying and pasting pixel selections or by converting a vector image into a bitmap object Another way to create a bitmap object is to insert an empty bitmap image in your document and then draw paint or fill it 61 ADOBE FIREWORKS CS3 62 User Guide When you create a new bitmap object it is added to the current layer In the Layers panel with layers expanded you ca
208. d images appear gradually while they are downloading They display at a low resolution first and then transition to full resolution by the time the download is complete Note This option is available only for GIF and PNG file formats You can get similar results with a JPEG by making it progressive For more information see Optimizing JPEGs on page 272 To make a GIF or non Fireworks PNG interlaced Select Interlaced from the Optimize panel Options menu Optimizing JPEGs Using the Optimize panel you can optimize JPEGs by setting compression and smoothing options JPEGs are always saved and exported in 24 bit color so you can t optimize a JPEG by editing its color palette The color table is empty when a JPEG image is selected As you experiment with different optimization settings you can use the 2 Up and 4 Up buttons to test and compare a JPEG s appearance and estimated file size For more information on using the document preview buttons see Previewing and comparing optimization settings on page 263 Note In Fireworks CS3 JPEGs can be saved directly from within the Save As dialog box This behavior differs from that in previous versions of Fireworks For more information see Saving documents in other formats on page 23 ADOBE FIREWORKS CS3 273 User Guide Adjusting JPEG quality JPEG is a lossy format which means that some image data is discarded when it is compressed reducing the quality of the fina
209. d in a format called the application program package This is a feature from Apple that allows applications to be installed in a self contained package The application package is where the Fireworks application file is stored along with all default configuration files that come with Fireworks Package contents are hidden by default After you open the package you ll notice a number of files and folders To show or hide the contents of the Fireworks application program package 1 Navigate to the location on your hard disk where you installed Fireworks 2 Control click the Fireworks CS3 icon and select Show Package Contents from the context menu A new window opens displaying the package contents Index Numerics 24 bit color 267 32 bit color 267 A absolute URLs entering 196 accessibility of Help 3 ACT file format swatches 128 ACT file exporting 133 activation of software 1 Add Filters pop up menu 147 Add Noise filter 83 Add Preview Icons preference 347 adding frames 243 pages 156 styles 184 adjusting hue or saturation 77 tonal range using eyedropper 75 Adobe Bridge 328 Adobe Bridge Home 6 Adobe Design Center 6 Adobe Fireworks system requirements 1 Adobe Flex Builder 329 Adobe GoLive 288 Adobe Help 2 Adobe Video Workshop 4 Adobe XMP 328 Align panel 28 aligning objects 59 alpha channel of an object selecting 48 alpha converting images to 81 alt alternate text 212 assigning to buttons or instances
210. d objects independently of the mask using the move handle 1 Select the mask on the canvas using the Pointer tool 2 Drag the move handle to a new location The objects move without affecting the position of the mask Note If there is more than one masked object all masked objects move together To move masked objects independently of each other Click the object with the Subselection tool to select it then drag the object This is the only way to select and move an individual masked object without moving other masked objects Modifying a mask s appearance By modifying a mask s shape and color you can change the visibility of masked objects You change the shape ofa bitmap mask by drawing on it with the bitmap tools You change the shape of a vector mask by moving the mask object s points If a mask is applied using its grayscale appearance you can modify its colors to affect the opacity of the underlying masked objects Using midtone colors on a grayscale mask gives masked objects a translucent appearance Use lighter colors to display the masked objects and darker colors to hide masked objects and show the background You can also alter a mask by adding mask objects to it or using the transformation tools To modify a selected mask s shape do one of the following Draw on a bitmap mask with any of the bitmap drawing tools e Move the points of a vector mask object with the Subselection tool ADOBE FIREWORKS CS3
211. d of 0 sharpens all pixels in the image 6 Click OK ADOBE FIREWORKS CS3 83 User Guide Adding noise to an image When viewed at high magnification levels most images obtained from digital cameras and scanners do not have perfectly uniform colors Instead the colors you see consist of pixels of many different colors In image editing noise refers to these random color variations in the pixels that make up an image Sometimes such as when you are pasting part of one image into another the difference in the amount of random color variation in the two images can stand out preventing the images from blending together smoothly In such a case you can add noise to one or both images to create the illusion that both images come from the same source You can also add noise to an image for artistic reasons for instance to simulate an old photograph or static on a television screen Original photograph after adding noise To add noise to an image 1 Select the image 2 Do one of the following to open the Add Noise dialog box In the Property inspector click the Add Live Filters button and select Noise gt Add Noise from the Filters pop up menu e Select Filters gt Noise gt Add Noise Note Applying a filter from the Filters menu is destructive that is it cannot be undone except when Edit gt Undo is an option To maintain the ability to adjust turn off or remove this filter apply it as a Live Filter as descr
212. d optimization settings Creating hotspots After you identify areas on a source graphic that would make good navigation points you create the hotspots and then assign URL links pop up menus status bar messages and alt text to them There are two ways to create hotspots e You can draw the hotspot around a target area in the graphic using the Rectangle Circle or Polygon odd shaped Hotspot tools e You can select an object and insert the hotspot over it A hotspot need not always be a rectangle or a circle You can also create polygon hotspots composed of many points This can be a good approach when working with intricate images To create a rectangular or circular hotspot 1 Select the Rectangle Hotspot or Circle Hotspot tool from the Web section of the Tools panel Web mY 10 Rectangle Hotspot tool J Circle Hotspot tool J U Polygon Hotspot tool J 216 ADOBE FIREWORKS CS3 217 User Guide 2 Drag the hotspot tool to draw a hotspot over an area of the graphic Hold down Alt Windows or Option Macintosh to draw from a center point Note You can adjust the position of a hotspot as you drag to draw it While holding down the mouse button simply press and hold down the Spacebar then drag the hotspot to another location on the canvas Release the Spacebar to continue drawing the hotspot To create an odd shaped hotspot 1 Select the Polygon Hotspot tool 2 Click to place vector points much as you wou
213. d select Rename Panel Group from the Options menu 2 Enter the new name To return panels to their default positions for your screen resolution do one of the following e Select Window gt Workspace Layouts gt 1024 x 768 e Select Window gt Workspace Layouts gt 1280 x 1024 To open a panel Select the panel name from the Window menu iy check mark next to a panel name in the Window menu indicates that the panel is open To close a panel do one of the following e Select the panel name from the Window menu e Click the Close button in the panel title bar when the panel is undocked To hide all panels and the Property inspector Select Window gt Hide Panels To view hidden panels select Window gt Hide Panels again Note Panels that are hidden when you select Hide Panels remain hidden when you deselect this command To show or hide panels docked to the application window Windows only do one of the following Drag the vertical bar to the left of the docked panel area to resize the panel area e Click the small arrow that separates the docked panel area from the rest of the application window A Click to show or hide docked panel area ADOBE FIREWORKS CS3 30 User Guide Using the panel group or panel Options menu Each panel group and panel has an Options menu listing a range of choices specific to the active panel or panel group An Options menu also appears in the Property inspector except in Window
214. darken parts of an image respectively This is similar to the darkroom technique of increasing or decreasing light exposure as the photograph is developed To lighten or darken parts of an image 1 Select the Dodge tool to lighten parts of an image or the Burn tool to darken parts of an image 2 Set the brush options in the Property inspector Size sets the size of the brush tip Shape sets a round or square brush tip shape Edge sets the softness of the brush tip 3 Set the exposure in the Property inspector The exposure ranges from 0 to 100 For a lessened effect specify a lower percentage value for a stronger effect specify a higher value 4 Set the range in the Property inspector Shadows changes mainly the dark portions of the image Highlights changes mainly the light portions of the image Midtones changes mainly the middle range per channel in the image 5 Drag over the part of the image you want to lighten or darken Hold down Alt Windows or Option Macintosh as you drag the tool to temporarily switch from the Dodge tool to the Burn tool or from the Burn tool to the Dodge tool Removing red eye from photos In some photographs the subjects pupils are an unnatural shade of red You can use the Red eye Removal tool to correct this red eye effect The Red eye Removal tool quickly paints red areas of a photograph only replacing reddish colors with grays and blacks ADOBE FIREWORKS CS3 69 User Guide KT
215. de To search for all non websafe colors and replace them with websafe colors Select Find Non Web216 from the Find pop up menu of the Find panel Note Find Non Web216 does not find or replace pixels within image objects Batch processing Batch processing is a convenient way to automatically convert a group of graphic files These are the batch processing options e Convert a selection of files to another format e Convert a selection of files to the same format with different optimization settings Scale exported files Find and replace text colors URLs fonts and non Web216 colors Rename groups of files by any combination of adding a prefix adding a suffix replacing a substring and replacing blanks Perform commands on a selection of files To batch process files 1 Select File gt Batch Process and select the files to process You can select files from different folders and you can also include all currently open documents in the batch As you re working through the wizard you can use the Back button if you need to make any changes to your file selection You also have the option of not selecting any files at all while using the wizard if you only want to save the batch process script for later use ne Preview Look in CQ Images pico jpg E6 pico2 jpa My Recent E pico3 ipg Documents z pic04 ipg f picos ipg Ei E pic06 jpg Desktop E pic07 ipg E pic08 jpg E picos jpg E pic10 j
216. defaults to 0 07 seconds If necessary use the Frames panel to restore the original timing e You can open an animated GIF as you would open a normal GIF file Each element of the GIF is placed as a separate image in its own Fireworks frame You can convert the graphic to an animation symbol in Fireworks EPS files Fireworks opens most EPS files such as Photoshop EPS files as flattened bitmap images in which all objects are combined on a single layer Some EPS files exported from Illustrator however retain their vector information When you open or import most EPS files the EPS File Options dialog box opens Image Size determines the image dimensions and the units in which the image is rendered You can select from pixels percent inches and centimeters Resolution indicates the pixels per unit for the resolution Constrain Proportions opens the file in the same proportions as the original Anti aliased smoothes jagged edges in the opened EPS file When you open or import Illustrator EPS files that contain vector information the Vector File Options dialog box opens This is the same dialog box that appears when you open or import FreeHand files PSD files Fireworks CS3 can open PSD files created in Photoshop and preserve all or most of the PSD features including hierarchical layers layer effects and commonly used blend modes WBMP files Fireworks can open WBMP files which are 1 bit monochrome files optimized for mobile compu
217. delete a custom command that you created do one of the following In Fireworks select Commands gt Manage Saved Commands Then select the command and click Delete e On your hard disk delete the JSF file for the command from the Commands folder in your user specific Fireworks configuration folder For information on locating this folder see About user configuration files on page 351 To rename or delete a command that shipped with Fireworks or that you downloaded from the Adobe Exchange e Select Command gt Manage Extensions e Select Help gt Manage Extensions The Extension Manager opens For information about how to manage extensions see Extension Manager Help Editing or customizing a command script Command scripts are saved as JavaScript If you know JavaScript you can open and edit commands in any text editor such as Notepad Windows or TextEdit Macintosh ADOBE FIREWORKS CS3 345 User Guide To edit a command using JavaScript 1 From your desktop navigate to the appropriate Commands or Command Panels folder on your hard disk Note The exact location of these folders varies from system to system and depends on whether you want the command or panel to be available just to your user profile or to all users Commands and Command Panels folders are located in the Configuration folder in the Fireworks application folder and also in your user specific Fireworks configuration folder For more information see Work
218. der Styling and absolute positioning are also maintained The best part is there s no work necessary on your part because Fireworks exports the necessary Flex code MXML for you Now you can easily create a Flex application layout in Fireworks leveraging Flex common library assets as MXML for loading into Flex Builder Work with Illustrator files Open Illustrator files in Fireworks while preserving hierarchical layers patterns linked images text attributes transparency and more Fireworks also contains export options for exporting to Adobe Illustrator 8 0 For more information see About working with Illustrator on page 326 For more information on the new features see the Fireworks page on the Adobe website at www adobe com products fireworks ADOBE FIREWORKS CS3 11 User Guide Adobe Bridge Simplify file handling in Fireworks and within Adobe Creative Suite with Adobe Bridge the next generation file browser Efficiently browse tag search and process your images Using Bridge and Fireworks together means you can take advantage of XMP metadata in your files Adobe XMP Extensible Metadata Platform is a technology that assists the user in adding file information to files saved in PNG GIF JPEG Photoshop and TIFF formats and facil itates the exchange of metadata between Adobe software and other systems that support the XMP metadata standard For more information see About Adobe Bridge on page 328 12 C
219. dialog box and click Save Note If you entered a name for the image placeholder from the Property inspector in Dreamweaver that name is used as the default filename in Fireworks For more information on saving Fireworks PNG files see Fireworks Help 7 Specify a name for the exported image file or files in the Export dialog box These are the image files that are displayed in Dreamweaver 8 Specify a location for the exported image file or files The location you choose should be within your Dream weaver site folder For more information on exporting see Fireworks Help 9 Click Save When you return to Dreamweaver the image placeholder you originally selected is replaced with the new Fireworks image or table you created a index gif Desktop index htm DER 3048107 IKiisec Placing Fireworks HTML code in Dreamweaver There are several ways to place Fireworks generated HTML code into Dreamweaver You can export HTML or you can copy Fireworks HTML code to the Clipboard You can also open an exported Fireworks HTML file in Dream weaver and copy and paste selected sections of code You can easily update code you ve exported to Dreamweaver using the Update HTML command in Fireworks You can even export HTML as a Dreamweaver library item For more information on exporting HTML see Fireworks Help Note Before exporting copying or updating Fireworks HTML for use in Dreamweaver make sure to choose Dream weaver as the
220. document ADOBE FIREWORKS CS3 296 User Guide Copying code from an exported Fireworks file and pasting it into Dreamweaver You can open an exported Fireworks HTML file in Dreamweaver and then manually copy and paste only the desired sections into another Dreamweaver document Note Before exporting from Fireworks make sure to choose Dreamweaver as the HTML type in the HTML Setup dialog box For more information see Fireworks Help To copy code from an exported Fireworks file and paste it into Dreamweaver Export a Fireworks HTML file and then copy and paste the code into an existing Dreamweaver document For more information see Fireworks Help Updating Fireworks HTML exported to Dreamweaver The Update HTML command in Fireworks allows you to make changes to an HTML document you ve previously exported to Dreamweaver Note While Update HTML is a useful feature for updating HTML you ve previously exported to Dreamweaver Roundtrip HTML provides even more benefits For more information see Editing Fireworks files from Dreamweaver on page 297 With the Update HTML command you can edit a source PNG image in Fireworks and then automatically update any exported HTML code and image files placed in a Dreamweaver document This command lets you update Dreamweaver files even when Dreamweaver is not running Note Before updating HTML make sure to choose Dreamweaver as the HTML type in the HTML Setup dialog box For more information
221. draw speed of the Image Preview deselect Preview To stop the redraw of the preview area when changing settings press Escape To export using Image Preview 1 Select File gt Image Preview to open the Image Preview e To edit optimization settings click the Options tab For information about the options available on this tab see the following procedures To edit the size and area of the exported image click the File tab and change the desired settings For information about the options available on this tab see the following procedures e To edit animation settings for the image click the Animation tab and change the desired settings For information about the options available on this tab see the following procedures 2 a Use the Zoom button at the bottom of the dialog box to zoom in or out in the preview Click this button to activate the Zoom magnification tool and then click in the preview to magnify the preview Alt click Windows or Option click Macintosh the button in the preview to zoom out 3 Do one of the following to pan the preview area L fetic the Pointer button at the bottom of the dialog box and drag in the preview e Hold down the Spacebar when the Zoom pointer is active and drag in the preview 4 Click a split view button to divide the preview area into two or four previews to compare settings Cl B E Each preview window can display a preview of the graphic with different export settings 259 ADO
222. dvertent selection and editing Locking an individual object prevents that object from being selected or edited Locking a layer prevents all objects on that layer from being selected or edited The Single Layer Editing feature protects objects on all but the active layer and sub layers from unwanted selection or changes You can also use the Layers panel to control the visibility of objects and layers on the canvas When an object or layer is hidden in the Layers panel it does not appear on the canvas so it cannot be inadvertently changed or selected Note Hidden layers and objects are not included when you export your document Objects on the Web Layer can always be exported however whether they are hidden or not For more information about exporting see Exporting from Fireworks on page 276 To lock an object gt Click the square in the column immediately to the left of the object name A padlock icon indicates that the object is locked To lock a layer Click the square in the column immediately to the left of the layer name A padlock icon indicates that the layer is locked To lock multiple layers gt 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 To turn on or off Single Layer Editing Select Single Layer Editing from the Layers panel Options menu A check mark indicates that Single Layer Editing is
223. e Update HTML Opening and moving toolbars Windows only Fireworks for Windows includes two toolbars containing common Fireworks commands To show or hide a toolbar Select Window gt Toolbars and select a toolbar To undock a toolbar gt Drag the toolbar away from its docked location Note If a toolbar is undocked you can click the close button at the upper right of the title bar to close it To dock a toolbar Drag the toolbar onto a docking area at the top bottom left or right of the application window until the placement preview rectangle appears Navigating and viewing documents You can control your document s magnification its number of views and its display mode In addition you can easily pan the view of a document which is helpful if you zoom in and can no longer see the entire canvas Using document tabs Windows When your document is maximized you can easily choose among multiple open documents using the document tabs that appear at the top of the document window Each open document displays its filename on a tab that appears above the view buttons Natalie png Noah png Kelly png Dale png Original E Preview T 2Up EH 4up a o To select a different document when the current document is maximized Click the document tab for the document you want to view ADOBE FIREWORKS CS3 32 User Guide Zooming and panning Fireworks lets you zoom in or out at a preset or user defined ma
224. e act extension To save a custom color palette 1 Select Save Palette from the Optimize panel Options menu 2 Type a name for the palette and select a destination folder 3 Click Save You can load the saved palette file into the Swatches panel or Optimize panel for use when exporting other documents Adjusting compression You can compress GIF files to make them even smaller than usual by changing their loss setting Higher loss settings can yield smaller files but lower image quality A loss setting between 5 and 15 typically yields the best results Original GIF loss value of 30 loss value of 100 ADOBE FIREWORKS CS3 271 User Guide To change a GIF s compression Enter a Loss setting in the Optimize panel Making areas transparent You can set transparent areas for GIFs and 8 bit PNGs so that in a web browser the background of the web page is visible through those areas In Fireworks a gray and white checkerboard on document previews denotes trans parent areas Optimized image preview in Fireworks image exported with transparency and placed on a web page with a colored background Note 32 bit PNGs automatically contain transparency though you wont see a transparency option for 32 bit PNGs in the Optimize panel You should use index transparency when exporting GIF images that contain transparent areas With index trans parency you set specific colors to be transparent upon export Index transparency
225. e New selection will be enabled in the Operation section of the Save Selection dialog box Ifa previously saved selection is selected in the Selection box then all of the following options will be enabled in the Operation section e Replace selection replaces the active selection in the active document with the one specified in the Selection box e Add to selection adds the active selection to the one specified in the Document and Selection boxes e Subtract from selection subtracts the active selection from the one specified in the Document and Selection boxes Intersect with selection intersects the active selection with the one specified in the Document and Selection boxes 6 Select an option in the Operation section and then click OK Repeat this process for each of the marquee selections that you want to save Restoring marquee selections You can restore a marquee selection that you have previously named and saved To restore a marquee selection 1 Choose Select gt Restore Bitmap Selection to open the Restore Selection dialog box 2 The Document box displays the name of the active document in which a marquee selection has been saved You can either leave that name as is or select another one from the pop up menu if you would rather restore a marquee selection from another open document 3 The Selection box displays the name of the selection that will be restored If you want to restore a different select
226. e a beveled chamfered or rounded rectangle Auto Shape without affecting the corners gt Drag the drag to resize control point To convert the corners of a rectangle to a different type Alt click Windows or Option click Macintosh any corner control point To convert a single corner to a different type gt Shift Alt click Windows or Shift Option click Macintosh any corner control point ADOBE FIREWORKS CS3 90 User Guide Adjusting connector line Auto Shapes Connector lines have five control points There are control points for placing the start and end points for adjusting the position of the cross bar the line that connects the start and end line segments and for adjusting the roundness of the corners To move the start or end point of a connector line Drag the control point at the start or end of the connector line To reposition the cross bar of a connector line Drag the horizontal position control point To adjust all corners of a selected connector line Drag a corner control point To adjust a single corner of a selected connector line Alt drag Windows or Option drag Macintosh a corner control point Adjusting doughnut Auto Shapes Doughnut Auto Shapes initially have three control points There are control points for adjusting the inner perimeter for setting the inner perimeter to zero and for dividing the shape into slices to resemble a pie chart You can add as many sections as you wa
227. e a mask using the Paste Inside command 1 Select the object or objects to use as the paste inside contents 2 Position the object or objects so that they overlap the object into which you want to paste the contents Note Stacking order is not important as long as the objects you want to use as the paste inside contents remain selected These objects can be above or below the mask object in the Layers panel 3 Select Edit gt Cut to move the objects to the Clipboard 4 Select the object into which you want to paste the contents This object will be used as the mask or clipping path 5 Select Edit gt Paste Inside The objects you pasted appear to be inside or clipped by the mask object ADOBE FIREWORKS CS3 169 User Guide Using text as a mask Text masks are a type of vector mask You apply text masks just as you apply masks using existing objects you simply use text as the mask object The usual way to apply a text mask is to use its path outline but you can apply a text mask using its grayscale appearance as well A text mask applied using its path outline For more information see Creating a mask from an existing object on page 166 For more information about the different ways masks can be applied see Changing the way masks are applied on page 176 Masking objects using the Layers panel The quickest way to add an empty transparent bitmap mask is through the Layers panel The Layers panel adds a white m
228. e alt text for a button symbol in the Button Editor 1 Do one of the following to open the button in the Button Editor Double click a button instance in the workspace In the Library panel double click the button preview or the symbol icon beside the button symbol 2 In the Property inspector enter the text that you wish to appear as alt text in a browser Note Changing the alt text for a button symbol won t change the alt text for existing button instances of that symbol that already have unique alt text assigned to them This also applies to changes made to a button symbol s target and URL To set the alt text for a button instance in the workspace 1 Select the button instance in the workspace 2 Enter the description in the Alt Text box in the Property inspector Creating navigation bars A navigation bar or nav bar is a group of buttons that provide links to different areas of a website It generally remains consistent throughout the site providing a constant method of navigation no matter where the user is within the site The nav bar looks the same from web page to web page but in some cases the links may be specific to the function of each page In Fireworks you make a nav bar by creating a button symbol in the Button Editor and then placing instances of that symbol in the workspace To create a basic nav bar 1 Create a button symbol For more information see Creating button symbols on page 220 2 Drag an inst
229. e colors to their closest websafe color The color palette contains up to a maximum of 256 colors GIF WebSnap 128 converts non websafe colors to their closest websafe color The color palette contains up to 128 colors ADOBE FIREWORKS CS3 263 User Guide GIF Adaptive 256 isa color palette that contains only the actual colors used in the graphic The color palette contains up to a maximum of 256 colors JPEG Better Quality sets quality to 80 and smoothing to 0 resulting in a high quality but larger graphic JPEG Smaller File sets quality to 60 and smoothing to 2 resulting in a graphic less than half the size of a Better Quality JPEG but with reduced quality Animated GIF Websnap 128 sets the file format to Animated GIF and converts non websafe colors to their closest websafe color The color palette contains up to 128 colors For more information about file types see Choosing a file type on page 265 To specify custom optimization settings 1 In the Optimize panel select an option from the Export File Format pop up menu 2 Set format specific options such as color depth dither and quality 3 Select other optimization settings from the Optimize panel Options menu as necessary For more information about specific optimization controls see the appropriate sections in Optimizing in the workspace on page 261 4 You can name and save custom optimization settings Names of saved settings are displayed in the preset
230. e dialog box As you make changes the image updates y automatically 3 Inthe Channel pop up menu select whether you want to apply changes to individual color channels Red Blue or Green or to all color channels RGB 4 Drag the Input Levels sliders under the Histogram to adjust the highlights midtones and shadows The right slider adjusts the highlights using values from 255 to 0 The center slider adjusts the midtones using values from 10 to 0 e The left slider adjusts the shadows using values from 0 to 255 As you move the sliders the values are automatically entered in the Input Levels boxes Note The shadow value cannot be higher than the highlight value the highlight value cannot be lower than the shadow value and the midtones must fall between the shadow and highlight settings 5 Drag the Output Levels sliders to adjust the contrast values in the image e The right slider adjusts the highlights using values from 255 to 0 The left slider adjusts the shadows using values from 0 to 255 As you move the sliders the values are automatically entered in the Output Levels boxes Adjusting tonal ranges automatically You can use Auto Levels to have Fireworks make tonal range adjustments for you ADOBE FIREWORKS CS3 74 User Guide To adjust highlights midtones and shadows automatically 1 Select the image 2 Do one of the following to select Auto Levels In the Property inspector click the Add Live Filters but
231. e files processed the specific files that could not be opened if any and other information You can find this log file at Documents and Settings username Application Data Adobe Fireworks 9 FireworksBatchLog txt Windows Users username Library Application Support Adobe Fireworks 9 FireworksBatchLog txt Macintosh Changing optimization settings with a batch process You can change file optimization settings using the Export option in the Batch Process dialog box Batch Process Batch Options Include in Batch Scale Find and Replace Rename lt Remove E Commands Export Settings GIF webSnap 128 Use Settings from Each File GIF Web 216 GIF WebSnap 256 GIF WebSnap 128 GIF Adaptive 256 JPEG Better Quality JPEG Smaller File Animated GIF Websnap 128 To set export settings for a batch process 1 Select Export from the Batch Options list and click Add 2 From the Settings pop up menu select from the following options and click OK e Select Use Settings from Each File to keep each file s previous export settings during the batch process For example when you batch process a folder of GIFs and JPEGs the resulting files remain GIFs and JPEGs and Fireworks uses the original palette and compression settings when exporting each file e Select Custom or click Edit to change settings in the Export Preview dialog box Select a preset export setting such as GIF Web216 or JPEG Better Quality All files
232. e full browser window thereby removing all frames ADOBE FIREWORKS CS3 213 User Guide Export settings You can optimize a slice by selecting an option from the Export Settings pop up menu in the Property inspector or Optimize panel You can select from common export settings to quickly set a file format and apply several format specific settings For more information on using and customizing these settings see Using optimization settings on page 262 Naming slices Slicing cuts an image into pieces Fireworks exports each piece on each frame as a separate file so each file must have a name Fireworks automatically names each slice file upon export You can accept the default naming convention change the convention or enter a custom name for each slice Custom naming slice files You can assign names to slices so that you can easily identify slice files in your website file structure For example if you have a button on a navigation bar that returns to the home page you could name the slice Home To enter a custom slice name do one of the following e Select the slice on the canvas enter a name in the Object Name box in the Property inspector and press Enter Double click the name of the slice in the Web Layer enter a new name and press Enter Do not add a file extension to the base name Fireworks automatically adds file extensions to slice files upon export Auto naming slice files If you do not enter a slice name
233. e new to optimizing and exporting web graphics Using the Export Wizard you can easily export graphics without understanding the details of optimizing and exporting The Export Wizard takes you step by step through the optimization and export process Answer questions about the file destination and intended use and the Export Wizard suggests file type and optimization settings If you prefer to optimize to a target file size the Export Wizard optimizes the exported file to fit within the size constraint you set Once you are more comfortable with optimizing and exporting you ll want to use the Optimize panel and the preview buttons in the Document window to optimize graphics They are more convenient than the Export Wizard and offer more optimization control for users who are familiar with the optimization process After you optimize graphics in this manner you must perform an additional step to export or in some cases save the graphics For more information on exporting see Optimizing in the workspace on page 261 or Exporting from Fireworks on page 276 For more information on saving see Saving documents in other formats on page 23 To export a document using the Export Wizard 1 Select File gt Export Wizard 2 Answer any questions that appear and click Continue in each panel Fireworks makes recommendations about file formats x Select Target Export File Size in the first panel to optimize to a maximum file size
234. e not already done so 3 In Fireworks select File gt Acquire and then select either Twain Acquire or Twain Select Note For most T WAIN modules or Photoshop Acquire plug ins additional dialog boxes prompt you to set other options ADOBE FIREWORKS CS3 22 User Guide 4 Follow the instructions to apply the desired settings The imported image is opened as a new Fireworks document Saving Fireworks files When you create a new document or open an existing Fireworks PNG file the document s filename has the extension png Files of other types such as PSD and HTML also open as PNG files allowing you to use the Fireworks PNG document as your source file or working file However many files retain their original filename extensions and optimization settings when opened in Fireworks For more information see Saving documents in other formats on page 23 The location to which Fireworks defaults when you save a document is determined by the following in this order e The current file location The current export save location which is defined anytime you browse from the default location in a Save Save As Save a Copy or Export dialog box e The default location where new documents or images are saved on your operating system Saving Fireworks PNG files When you create a new document or open an existing Fireworks PNG file the document s filename has the extension png The file displayed in the Fireworks document window is
235. e of the following e Click the Add a New Shortcut button to add a secondary shortcut to the shortcut list e Click Change to replace the selected shortcut Deleting custom shortcuts and custom shortcut sets You can delete any custom shortcut or any custom shortcut set To delete a custom shortcut set 1 Select Edit gt Keyboard Shortcuts to open the Keyboard Shortcuts dialog box 2 Click the Delete Set button trash can icon 3 Select the shortcut set you want to delete from the Delete Set dialog box 4 Click the Delete button To delete a custom shortcut 1 Select the command in the Commands list 2 Select the custom shortcut from the Shortcuts list 3 Click the Delete a Selected Shortcut button Creating a reference sheet for the current shortcut set A reference sheet is a record of the current shortcut set stored in HTML table format You can view the reference sheet in a web browser or print it Note Reference sheets exported from Fireworks are UTF 8 encoded To create a reference sheet 1 Select Edit gt Keyboard Shortcuts to open the Keyboard Shortcuts dialog box 2 Click the Export Set as HTML button beside the Current Set text box The Save As Windows or Save Macintosh dialog box is displayed 3 Enter the name for the reference sheet and select the appropriate location for the file 4 Click Save Working with configuration files To accommodate multiuser systems Fireworks supports user specif
236. e points and you can adjust the inner and outer angles of the points Add Shadow adds a shadow beneath the selected object based on the dimensions of that object The shadow is actually an Auto Shape and like all Auto Shapes contains control points that you can use to manipulate its appearance For example you can Shift drag the Direction control point to constrain its movement to a 45 degree angle Clicking the Direction control point resets the shadow to the original shape Note The Add Shadow command will automatically send the new shadow shape back by one level Unless you apply this command to only one object at the top of the current layer the shadow may appear above the selected object To draw an Auto Shape by using the Tools panel 1 Inthe Vector section of the Tools panel select an Auto Shape tool from the pop up menu 2 Do one of the following Drag the canvas to draw the shape Click on the canvas to place the shape at its default size To create the Add Shadow Auto Shape 1 Select an object on the canvas 2 Select Commands gt Creative gt Add Shadow A shadow is added to the selected object 3 If you want to make changes to the shadow you can do any of the following Drag the Direction control point to constrain its movement on a 45 degree angle e Click the Direction control point to reset the shadow its size will be identical to the original shape ADOBE FIREWORKS CS3 88 User Guide e Control Command
237. e selection indicator the small blue square at the right of the frame delay time to the new frame Sharing layers across frames Layers divide a Fireworks document into discrete planes like separate tracing paper overlays With animations you can use layers to organize objects that are part of the scenery or backdrop for the animation This gives you the convenience of being able to edit objects on one layer so that they don t affect the rest of your animation For more information see Working with layers on page 159 If you want objects to appear throughout an animation you can place them on a layer and then use the Layers panel to share the layer across frames When a layer is shared across frames all objects on that layer are visible in every frame You can edit objects on shared layers from any frame those edits are reflected in all other frames al 100 Normal Oo amp amp Web Layer o e f S red square es ps Animation Symbol Rectangle In this example the red square layer is shared across frames To share a layer across frames 1 Click the layer to select it 2 Select Share Across Frames Note All the contents in a shared layer appear in every frame To disable the sharing of a layer across frames 1 Click the shared layer to select it 2 Deselect Share Across Frames 3 Select one of the following options for how to copy objects to frames e Leave the contents of the shar
238. e settings that control the general appearance of the user interface as well as options related to specific features such as default colors tool options folder locations and file conversions To set preferences 1 Select Edit gt Preferences Windows or Fireworks gt Preferences Macintosh 2 Select the preferences group you wish to modify General Editing Launch and Edit Folders or Import 3 Make your changes and click OK General preferences The following options are on the General preferences tab Undo Steps sets undo redo steps to a number between 0 and 1009 This setting applies to both the Edit gt Undo command and the History panel A large number of undos can increase the amount of memory Fireworks requires You must restart Fireworks for the change in this setting to take effect Color Defaults sets the default colors for brush strokes fills and highlight paths The Stroke and Fill options do not automatically change the colors displayed in the color boxes of the Tools panel they allow you to change the default colors that are specified by the Set Default Stroke Fill Colors button in the Tools panel Interpolation sets one of four different scaling methods that Fireworks uses to interpolate pixels when images are scaled e Bicubic interpolation gives the sharpest and highest quality most of the time and is the default scaling method e Bilinear interpolation gives sharper results than Soft interpolation but not as sha
239. e the pointer directly over the path The pointer changes to the redraw path pointer 4 Drag to redraw or extend a path segment The portion of the path to be redrawn is highlighted in red 5 Release the mouse button Changing a path s appearance by varying pressure and speed You can change the appearance of a path using the Path Scrubber tools Using varying pressure or speed you can change a path s stroke properties These properties include stroke size angle ink amount scatter hue lightness and saturation You can specify which of these properties is affected by the Path Scrubber tools using the Sensitivity tab of the Edit Stroke dialog box You can also specify how much pressure and speed affects these properties For details on setting options in the Edit Stroke dialog box see Working with strokes on page 136 Cutting paths into multiple objects The Knife tool allows you to slice a path into two or more paths S To cut a selected path 1 Select the Knife tool in the Tools panel Note Using the eraser on Wacom pens automatically selects the Knife tool 2 Do one of the following Drag the pointer across the path Click on the path 3 Deselect the path Editing with path operations You can use path operations in the Modify menu to create new shapes by combining or altering existing paths For some path operations the stacking order of selected path objects defines how the operation works For information on ar
240. e the pop up menu or continue building it e Click Next to move to the Appearance tab or select another tab to continue building the pop up menu e Click Done to close the Pop up Menu Editor In the workspace the hotspot or slice on which you built the pop up menu displays a blue behavior line attached to an outline of the top level of the pop up menu Note To view a pop up menu press F12 to preview it in a browser The previews in the Fireworks workspace do not display pop up menus To move an entry in the pop up menu 1 With the desired pop up menu displayed in the Pop up Menu Editor click the Content tab 2 Drag the menu item to a new location in the list ADOBE FIREWORKS CS3 232 User Guide 3 Click Done Designing the appearance of a pop up menu After you create a basic menu and optional submenus you can format the text apply graphic styles to the Over and Up states and select vertical or horizontal orientation in the Appearance tab of the Pop up Menu Editor Pop up Menu Editor Content Appearance Advanced Position Cells HTML O Image Vertical Menu Font Arial Helvetica sans serif vv Size 12 v BI Up State Over State Tent FP Cell e Tent North America Ep veel America Cancel lt Back Next gt To set the orientation of a pop up menu 1 With the desired pop up menu open in the Pop up Menu Editor click the Appearance tab For information on opening an existing pop up
241. e upper left area of the Property inspector contains the following information about the selection A description of the item being inspected A text box to enter a name for that item ADOBE FIREWORKS CS3 43 User Guide Note The name appears in the title bar of the document whenever you select this item For slices and buttons the name is the filename when exported The number of objects when more than one object is selected Note If the status bar is turned on Windows only selected objects are also identified in the status bar at the bottom of the document window Y Properties any 9 Path amp E Solid a M 5 iv 1 Pixel Hard v a 100 v Normal x Edge Anti Alias Vv Edge 0 K Effects w 985 x 188 Texture Grain vijo M Texture Grain yl o v x Inner Bevel JM 2 The Property inspector also displays information and settings for the object type selected For example when you select a vector path the Property inspector displays vector path properties such as stroke width and color Modifying a selection After you select a single object you can add objects to the selection and deselect objects that are selected Using a single command you can select or deselect everything on every layer in a document You can also hide the selection path so that you can edit a selected object while viewing it as it will appear on the web or in print To add to a selectio
242. eading can be measured in pixels or as a percentage of the distance in points separating the lines baseline to baseline You can use the Property inspector or the keyboard to set leading Leading options in the Property inspector To set the leading of selected text in the Property inspector 1 In the Property inspector drag the Leading pop up slider or enter a value in the text box The default is 100 2 To change the leading unit type select or px pixels from the Leading Units pop up menu To set the leading of selected text using the keyboard Hold down Control Windows or Command Macintosh while pressing the Up Arrow or Down Arrow keys The Up Arrow key increases the space between lines and the Down Arrow key moves lines closer together Hold down Shift and Control Windows or Shift and Command Macintosh while pressing the Up Arrow or Down Arrow keys to adjust leading by increments of 10 ADOBE FIREWORKS CS3 116 User Guide Setting text orientation A text block can be oriented horizontally or vertically By default text is oriented horizontally on est quod contemnas hoc csMamelssiqdci tudendi genus Mirum est ut ootinoxaioluaon nimus agitatione motuque nnouritcmittiotge orporis excitetut tdumui viuduii am undique silvae et solitudo eeemuqtuatd rtt psumque illud silentium quod smn sueneu v aa enationi datur magna tnde etd dsemtm ogitationis incitamenta sunt aisa uieoinaie qs tgctqt lagon u g io u iet
243. eate a new album or select Albums gt Open an existing AlbumBook to open an existing album 3 Ifyou are opening an existing album browse to the folder that contains the existing slideshow XML file and click Open 4 Click on the album in the Albums list to select it 5 Select individual images and click on the up or down arrow buttons at the top of the image list to move the images up or down within the list Slideshow properties The following the properties can be used to customize your slideshows Click on each property panel on the right side of the Create Slideshow window to open the panel and change the properties AlbumBook Properties panel AlbumBook properties apply to an AlbumBook which can contain multiple albums Title Title of the AlbumBook Description Description of the AlbumBook Player The type of slideshow player that displays the images by default the choices are Player_Black Player_White DW PhotoAlbum Simple Sliver Silver or Flex Blue Info icon next to Player When this icon is enabled you can click it to see additional information about the player including what album and AlbumBook properties the selected player type will support ADOBE FIREWORKS CS3 253 User Guide Auto Start Slideshow Starts the slideshow automatically when the player opens Allow clicking images Allows the viewer to click and open the image in a new browser window This allows the viewer of the slideshow to save images vi
244. ect it and then apply the Live Filter 2 Ifa pop up window or dialog box opens enter the settings for the filter and then do one of the following If the Live Filter has a dialog box click OK e If the Live Filter has a pop up window press Enter or click anywhere in the workspace 3 Repeat steps 1 and 2 to apply more Live Filters Note The order in which Live Filters are applied affects the overall filter You can drag Live Filters to rearrange their stacking order For more information see Reordering Live Filters on page 152 To enable or disable a Live Filter applied to an object Click the box next to the filter in the Filters list in the Property inspector To enable or disable all Live Filters applied to an object gt Click the Add Live Filters button in the Property inspector then select Options gt All On or Options gt All Off from the pop up menu For information on permanently removing Live Filters see Removing Live Filters on page 152 ADOBE FIREWORKS CS3 149 User Guide Applying beveled edges Applying a beveled edge to an object gives it a raised look You can create an inner bevel or an outer bevel A rectangle with Inner Bevel and with Outer Bevel To apply a beveled edge to a selected object 1 Click the Add Live Filters button in the Property inspector then select a bevel option from the pop up menu Bevel and Emboss gt Inner Bevel Bevel and Emboss gt Outer Bevel 2 Edit
245. ected item in the document window ADOBE FIREWORKS CS3 38 User Guide Using rulers guides and the grid You can use rulers and guides to lay out objects as precisely as possible and to help you draw You can place guides in the document and snap objects to those guides or turn on the Fireworks grid and snap objects to the grid AA dish_1088 jpg 100 Fs 2 Original Preview 2 Up 4p ig Op JPEG Document 4 r A a 41 b amp 630 x 468 100 Ui Using rulers Rulers help you to measure organize and plan the layout of your work Because Fireworks images are intended for the web where graphics are measured in pixels the rulers in Fireworks always measure in pixels regardless of the unit of measurement you used when creating the document To show and hide rulers Select View gt Rulers Vertical and horizontal rulers appear along the margins of the document window Using guides Guides are lines that you drag onto the document canvas from the rulers They serve as drawing aids to help you place and align objects You can use guides to mark important parts of your document such as the margins the document center point and areas where you want to work precisely To help you align objects Fireworks lets you snap objects to guides You can lock guides to prevent them from being accidentally moved Note Guides do not reside on a layer nor are they exported with a document They are merely design tools ADOBE F
246. ects as the currently selected one Duplicated objects retain the opacity and blending mode of the objects from which they were copied You can make changes to the duplicated objects without affecting the originals To add a layer do one of the following e Click the New Duplicate Layer button E e Select Edit gt Insert gt Layer e Select New Layer or New Sub Layer from the Layers panel Options menu and click OK To delete a layer do one of the following Drag the layer to the trash can icon in the Layers panel e Select the layer and click the trash can icon in the Layers panel e Select the layer and choose Delete Layer from the Layers panel Options menu To duplicate a layer do one of the following Drag a layer to the New Duplicate Layer button e Select a layer and select Duplicate Layer from the Layers panel Options menu Then select the number of duplicate layers to insert and where to place them in the stacking order At the Top places the new layer or layers at the top of the Layers panel The Web Layer is always the top layer so selecting At the Top places the duplicate layer below the Web Layer Before Current Layer places the new layer or layers above the selected layer After Current Layer places the new layer or layers below the selected layer At the Bottom places the new layer or layers at the bottom of the Layers panel Alt drag Windows or Option drag Macintosh the layer to the desired location To d
247. ects in Flash To copy and paste or drag and drop graphics from Fireworks into a Flash document 1 In Fireworks select the object or objects to copy 2 Select Edit gt Copy or click the Quick Export button and choose Copy from the Flash pop up menu 3 In Flash create a new document and choose Edit gt Paste or drag the file directly from Fireworks to Flash The Import Fireworks Document dialog box appears Import Fireworks Document C Import as a single flattened bitmap Into Current frame as movie clip Objects Import as bitmaps to maintain appearance O Keep all paths editable Text Import as bitmaps to maintain appearance O Keep all text editable Cancel 4 Select an option from Into pop up menu Current frame as movie clip The contents being pasted are imported as a movie clip which is placed in the active frame and layer in the Flash file The layer hierarchy and frames within the PNG file are preserved New layer The pasted content is imported as new layer Frames are imported into the timeline as separate frames 5 Select the way youd like vector objects imported Import as bitmaps to maintain appearance preserves the editability of vector objects unless they have special fills strokes or effects that Flash does not support To preserve the appearance of such objects Flash converts them to non editable bitmap images Import as editable paths preserves the editability of all vector objects I
248. ed layer in the current frame only Copy the contents of the shared layer to all frames Viewing objects in a specific frame You can easily view objects in a specific frame using the Frame pop up menu in the Layers panel To view objects in a specific frame Select the desired frame from the Frame pop up menu at the bottom of the Layers panel fq 100 v Normal 8 amp webLayer gt Have amp Animation Symbol Frame 2 R Frame 3 Frame 4 Rectangle Frame 5 All objects in the selected frame are listed in the Layers panel and displayed on the canvas Using onion skinning ADOBE FIREWORKS CS3 User Guide Onion skinning lets you view the contents of frames preceding and following the currently selected frame You can smoothly animate objects without having to flip back and forth through them The term onion skinning comes from a traditional animation technique of using thin translucent tracing paper to view animated sequences When onion skinning is turned on objects in frames before or after the current frame are dimmed so that you can distinguish them from objects in the current frame By default Multi Frame Editing is enabled which means you can select and edit dimmed objects in other frames without leaving the current frame You can use the Select Behind tool to select objects in frames in sequential order To adjust the number of frames visible be
249. ed width ADOBE FIREWORKS CS3 112 User Guide Formatting text Within a text block you can vary all aspects of text including size font spacing leading and baseline shift When you edit text Fireworks redraws its stroke fill and filter attributes accordingly You can change a text block s attributes using the Property inspector If the Property inspector is minimized click the expander arrow in the lower right corner to see all text properties Y Properties iz Text Arial v 12 lv m yjo M 100 vim s Z effects w 62 X 1 o v 0 S f V Smooth Anti Alias w f 19 S onja o E Auto kem a Property inspector when a text block is selected U G 100 Normal v Fwrewores thi eo Ill You can also use the Text Editor and the commands in the Text menu to edit text but the Property inspector offers the quickest way to change text attributes and provides more detailed editing control than the other two options For more information about the Text Editor see Using the Text Editor on page 125 Note Changes you make during a text editing session constitute only one Undo Choosing Edit gt Undo while editing text will undo every text edit you ve made from the time you double clicked the text block to edit its contents To edit text 1 Select the text you want to change e Click a text block wit
250. educes the size of the image while still maintaining reasonable quality To help preserve fine edges between two colors Select Sharpen JPEG Edges from the Optimize panel Options menu Use Sharpen JPEG Edges when exporting or saving JPEGs with text or fine detail to preserve the sharpness of these areas Choosing Sharpen JPEG Edges increases file size Using progressive JPEGs Progressive JPEGs such as interlaced GIFs and PNGs are displayed at a low resolution initially and then increase in quality as they download To export or save a progressive JPEG Select Progressive JPEG from the Optimize panel Options menu Note Some older bitmap editing applications cannot open progressive JPEGs Matching a target background color Anti aliasing makes an object appear smoother by blending the color of an object into the background on which it is placed For example if the object is black and the page on which it rests is white anti aliasing adds several shades of gray to the pixels surrounding the object s border to make a smoother transition between the black and white ADOBE FIREWORKS CS3 275 User Guide By setting the Matte option in the Optimize panel you can anti alias objects that lie directly above the canvas to the Matte color This is useful when exporting or saving graphics for placement on web pages with colored backgrounds To match a target background color gt In the Optimize panel select a color from the Matte p
251. een Adobe applications For example users can save metadata from one file as a template and then import the metadata into other files The user can do the following to save metadata as a template or XMP file in order to import the metadata into other files 1 Choose File gt File Info 2 Do one of the following To save metadata as a template click the triangle icon at the top of the dialog box and choose Save Metadata Template Enter a template name and click Save To save metadata to an XMP file click Save in the Advanced pane of the dialog box Type a file name choose a location for the file and click Save About Adobe Bridge Adobe Bridge is a cross platform application included with Adobe Creative Suite 3 components that helps you locate organize and browse the assets you need 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 From Adobe Bridge you can e Manage image footage and audio files Preview search sort and process files in Bridge without opening individual applications You can also edit metadata for files and use Bridge to place files into your documents projects or compositions e Manage your photos Generate a web gallery from a group of images import and edit photos from your digital camera card group related photos in stacks and open or import camera raw files and edit thei
252. een cells and the Up Arrow and Down Arrow keys to scroll through the list vertically 6 Repeat steps 4 and 5 until you have added all menu items 7 Optionally to delete a menu item highlight it and click the Delete Menu button 8 Do one of the following e Click Next to move to the Appearance tab or select another tab to continue building the pop up menu e Create submenu entries for the pop up menu For information see Creating submenus within a pop up menu on page 231 e Click Done to complete the pop up menu by closing the Pop up Menu Editor In the workspace the hotspot or slice on which you built the pop up menu displays a blue behavior line attached to an outline of the top level of the pop up menu Note To view a pop up menu you must press F12 to preview it in a browser The previews in the Fireworks workspace do not display pop up menus ADOBE FIREWORKS CS3 231 User Guide Creating submenus within a pop up menu Using the Indent Menu and Outdent Menu buttons on the Content tab of the Pop up Menu Editor you can create submenus pop up menus that appear when the user moves the pointer over or clicks another pop up menu item You can create as many levels of submenus as you want To create a pop up submenu 1 Open the Content tab of the Pop up Menu Editor and create menu items Create the menu items that you wish to use for the submenu as well placing them directly under the menu item for which they will be a subme
253. egative values to create subscript characters Applying strokes fills and filters to text You can apply strokes fills and filters to text in a selected text block as you would to any other object You can apply any style in the Styles panel to text even if it is not a text style You can also create a new style by saving text attributes After you create text it remains editable in Fireworks Strokes fills filters and styles are updated automatically as you edit the text P F Text with stroke fill filter and style applied You can apply solid text color to highlighted text in a text block However stroke attributes and non solid fill attributes such as gradient fills are applied to all text in a selected text block not just to the highlighted text For more information about strokes and fills see Applying Color Strokes and Fills on page 126 For more infor mation about using styles see Using styles on page 183 For information about Live Filters see Applying Live Filters on page 147 The Text tool does not retain stroke or Live Filter settings when you create a new text block However you can save stroke fill and Live Filters attributes that you apply to text for reuse as a style in the Styles panel Saving text attributes as a style saves only the attributes not the text itself To save text attributes as a style 1 Create a text object and apply the attributes you want 2 Select the text object
254. el About absolute and relative URLs When you enter a URL in the URL panel you can enter an absolute or relative URL Ifyou are linking to a web page that is beyond your own website you must use an absolute URL e If you are linking to a web page within your website you can use an absolute URL or a relative URL Absolute URLs are complete URLs that include the server protocol which is usually http for web pages For example http www adobe com support fireworks is the absolute URL for the Fireworks Support web page Absolute URLs remain accurate regardless of the location of the source document but they do not link correctly if the target document is moved Relative URLs are relative to the folder containing the source document These examples show the navigation syntax of relative URLs e file htm links to a file located in the same folder as the source document file htm links to a file located in the folder two levels above the folder containing the source document Each represents one level e htmldocs file htm links to a file located in a folder named htmldocs which is in the folder containing the source document ADOBE FIREWORKS CS3 197 User Guide Relative URLs are usually the simplest ones to use for links to files that will always remain in the same folder as the current document Working with pages If your Fireworks document contains a number of pages you can automatically create links between the
255. elected vector object 1 Click the icon next to the Stroke Color or Fill Color box in the Color Mixer 2 Move the pointer over the color bar The pointer becomes the eyedropper pointer 3 Click to pick a color The color is applied to the selected object and becomes the active stroke or fill color ADOBE FIREWORKS CS3 131 User Guide To pick a color from the Color Mixer 1 Deselect all objects before mixing a color to prevent unwanted object editing as you mix colors 2 Click either the Stroke Color or Fill Color box to make it the destination for the new color 3 Select a color model from the Color Mixer Options menu 4 Do any of the following to specify color component values Enter values in the color component text boxes e Use the pop up sliders e Pick a color from the color bar You can add this color to the Swatches panel to reuse For more information see Customizing the Swatches panel on page 128 To cycle the color bar through the color models Shift click the color bar at the bottom of the Color Mixer Note The options in the Color Mixer do not change Creating colors using the system color pickers You can create colors using the Windows System or the Macintosh System dialog boxes instead of using the Color Mixer and Swatches panel To pick a color from the system color picker 1 Click any color box 2 Select Windows OS or Mac OS from any color pop up window Options menu The system color swatche
256. election tool to select it Selected corner points appear as solid blue squares 3 Drag the point or use the arrow keys to move the point to a new location Adjusting the shape of a curved path segment You can change the shape of a vector object by dragging its point handles with the Subselection tool The point handles determine the degree of curvature between fixed points These curves are known as Bezier curves To edit the Bezier curve of a path segment 1 Select the path with the Pointer or Subselection tool 2 Click a curve point with the Subselection tool to select it A selected curve point appears as a solid blue square The point handles extend from the point 3 Drag the handles to a new location To constrain handle movement to 45 angles press Shift while dragging The blue path preview shows where the new path will be drawn if you release the mouse button A Point handle B Selected point C Subselection pointer D Path preview E Path For example if you drag the left point handle downward the right point handle goes up Alt drag a handle to move it independently ADOBE FIREWORKS CS3 97 User Guide Converting path segments to straight or curved Straight path segments are intersected by corner points Curved path segments contain curve points VN You can convert a straight segment to a curved segment and vice versa by converting its point UNV To convert a corner point to a curve point 1 Select the Pe
257. ements of a flowchart or organizational chart Using control points you can edit the end points for the first and third sections of the connector line as well as the location of the second section which connects the first and last sections Doughnut draws object groups that appear as filled rings Using control points you can adjust the inner perimeter or split the shape into pieces L Shape draws object groups that appear as right angled corner shapes Using control points you can edit the length and width of the horizontal and vertical sections as well as the curvature of the corner Pie draws object groups that appear as pie charts Using control points you can split the shape into pieces Rounded Rectangle draws object groups that appear as rectangles with rounded corners Using control points you can edit the roundness of all corners together or change the roundness of individual corners Smart Polygon draws object groups that appear as equilateral polygons with 3 to 25 sides Using control points you can resize and rotate add or remove segments increase or decrease the number of sides or add an inner polygon to the shape Spiral draws object groups that appear as open spirals Using control points you can edit the number of spiral rotations and you can determine whether the spiral is open or closed Star draws object groups that appear as stars with any number of points from 3 to 25 Using control points you can add or remov
258. en Instances 3 Enter the number of tween steps to be inserted between the original pair in the Tween Instances dialog box 4 To distribute the tweened objects to separate frames select Distribute to Frames and click OK If you choose not to distribute the objects to separate frames you can do it later by selecting all instances and clicking the Distribute to Frames button in the Frames panel Note In most cases using animation symbols is preferable to tweening For more information see Working with animation symbols on page 239 Previewing an animation You can preview an animation while you are working on it to check its progress You can also preview an animation after optimization to see how it will look in a web browser To preview an animation in the workspace Use the frame controls that appear at the bottom of the Document window Frame controls Keep the following in mind when previewing animations ADOBE FIREWORKS CS3 247 User Guide e To set how long each frame appears in the Document window enter frame delay settings in the Frames panel Frames excluded from the export do not appear in the preview e Previewing the animation in the Original view displays the full resolution source graphic not the optimized preview used for the exported file To preview an animation in Preview view 1 Click the Preview button at the upper left of the Document window 2 Use the frame controls Note Previewing animations
259. eneath the Web Layer in the Layers panel where visibility can be turned on or off for a selected slice You can also control slice visibility through the Tools panel Hiding a slice object does not prevent the slice from being exported in the HTML To hide and show particular slices and hotspots 1 Click the eye icon next to the individual web objects in the Layers panel 2 Click in the Eye column to turn visibility back on The eye icon reappears when web objects are visible again To hide or show all hotspots slices and guides do one of the following e Click the appropriate Hide Show Slices button in the Web tools section of the Tools panel e Click the eye icon next to the Web Layer in the Layers panel To hide or show slice guides in any document view Select View gt Slice Guides Changing slice and slice guide color If the colors used in a document are similar to the slice color it can be difficult to see slices against the objects in the document For ease of viewing you can assign a new color to selected slices Assigning unique colors to individual slices also helps you organize them You can alter slice guide color as well Note When you preview your document deselected slices are visible as a white overlay ADOBE FIREWORKS CS3 204 User Guide To change the color of a selected slice object In the Property inspector select a new color from the color box To change the color of slice guides 1 Select Vi
260. ents that conform to the contour of the object to which you apply them Additionally you can change various attributes of a fill such as color edge texture and transparency You can select from a number of preset gradient and pattern fills or you can create your own Note A newly created fill assumes the current color displayed in the Fill Color box in the Tools panel Solid w E z Edge Anti Alias Texture Grain wox iv Use the Fill options in the Property inspector or the Fill Options pop up window to edit fill attributes Applying a pattern fill You can fill a path object with a bitmap graphic known as a pattern fill Fireworks ships with more than a dozen pattern fills including Berber Leaves and Wood To apply a pattern fill to a selected object 1 Do one of the following e Select Pattern from the Fill Options pop up menu in the Property inspector e Click the Fill Color box in the Tools panel click Fill Options and select Pattern from the Fill Options pop up menu 2 Select a pattern from the Pattern Name pop up menu The pattern fill appears in the selected object and becomes the active fill color ADOBE FIREWORKS CS3 142 User Guide Adding a custom pattern You can set a bitmap file as a new pattern fill You can use files with these formats as patterns PNG GIF JPEG BMP TIFF and PICT Macintosh only When a pattern fill is a 32 bit transparent image the transparency affects t
261. er A The Blur tool decreases the focus of selected areas in an image The Smudge tool picks up color and pushes it in the direction that you drag in an image The Sharpen tool sharpens areas in an image The Dodge tool lightens parts of an image The Burn tool darkens parts of an image The Red eye Removal tool reduces the appearance of red eye in photos The Replace Color tool paints over one color with another color EA N A e E e Cloning pixels The Rubber Stamp tool clones an area of a bitmap image so that you can stamp it elsewhere in the image Cloning pixels is useful when you want to fix a scratched photograph or remove dust from an image you can copy a pixel area of a photo and replace the scratch or dust spot with the cloned area To clone portions of a bitmap image 1 Select the Rubber Stamp tool 2 Click an area to designate it as the source or the area you want to clone The sampling pointer becomes a cross hair pointer Note To designate a different area of pixels to clone you can Alt click Windows or Option click Macintosh another area of pixels to designate it as the source ADOBE FIREWORKS CS3 67 User Guide 3 Move to a different part of the image and drag the pointer You will see two pointers The first one the source of the cloning is in the shape of a cross hair For more infor mation see Editing preferences on page 347 Depending upon the brush
262. er in addition to the other advantages discussed in this chapter You can change animation symbol properties at any time using the Animate dialog box or the Property inspector You can also edit symbol artwork in the Symbol Editor The Symbol Editor lets you edit your symbol without affecting the rest of the document You can also change a symbol s motion by moving its motion path Because animation symbols are automatically placed in the library you can reuse them to create other animations Creating animation symbols After you create an animation symbol you can set properties that determine the number of frames in the animation and the type of action such as scaling or rotation By default a new animation symbol has five frames each with a delay time of 0 07 seconds To create an animation symbol 1 Select Edit gt Insert gt New Symbol 2 Inthe Symbol Properties dialog box enter a name for the new symbol 3 Select Animation and click OK 4 In the Symbol Editor use the drawing or text tools to create a new object You can draw either vector or bitmap objects 5 Close the Symbol Editor window Fireworks places the symbol in the library and a copy in the center of the document You can add new frames to the symbol using the Frames slider in the Property inspector Select Window gt Properties to open the Property inspector if it s not already open To convert an object to an animation symbol 1 Select the object AD
263. er you create and optimize an animation it is ready to export You can export an animation as an Animated GIF as a Flash SWF file or as multiple files If your document contains more than one animation you can insert slices on top of each animation to export each using different animation settings such as looping and frame delay For information about exporting to multiple files see Exporting frames or layers on page 279 For information about exporting animations as Flash SWF files see Working with Flash on page 305 To export an animation as an animated GIF 1 Select Edit gt Deselect to deselect all slices and objects and select Animated GIF as the file format in the Optimize panel For more information on optimizing see Optimizing GIF PNG TIFF BMP and PICT files on page 265 2 Select File gt Export 3 In the Export dialog box type a name for the file and select the destination 4 Click Export To export multiple animations with different animation settings as animated GIFs 1 Shift click the animations to select them all 2 Select Edit gt Insert gt Slice A message box appears asking if you want to insert one slice or multiple slices 3 Click Multiple 4 Select each slice individually and use the Frames panel to set different animation settings for each For more infor mation about animation settings see Creating Animations on page 238 5 Select all the slices you would like to animate
264. eric in the HTML Setup dialog box For more information see Fireworks Help To update Fireworks HTML exported to HomeSite Use the Update HTML command in Fireworks For more information see Fireworks Help Editing Fireworks images in HomeSite You can use launch and edit integration to edit images in a HomeSite document HomeSite automatically starts Fireworks letting you make the desired edits to the image When you exit Fireworks the updates you made are automatically applied to the placed image in HomeSite Together the two applications provide a streamlined workflow for editing web graphics in HTML pages To open and edit Fireworks images placed in HomeSite 1 In HomeSite save your document 2 Do one of the following e Right click the image file on one of the Files tabs in the Resources window ADOBE FIREWORKS CS3 322 User Guide e Right click the image on the Thumbnails tab of the Results window e Right click the associated img tag in the HTML code on the Edit tab of the Document window 3 Select Edit in Fireworks from the pop up menu HomeSite starts Fireworks if it is not already open 4 If prompted specify whether to locate a Fireworks source file for the placed image For more information on Fireworks source PNG files see Fireworks Help 5 In Fireworks edit the image The Document window indicates that you are editing a Fireworks image from another application 6 When you are finished making edits click D
265. ersion 285 Roundtrip 298 Setup 287 updating Adobe Fireworks HTML placed in Dreamweaver 296 working with editors 327 HTML opening tables 18 hue adjusting 71 77 Hue Saturation filter 77 l icon images See thumbnails Illustrator exporting to 314 importing files into Adobe Fireworks 326 Image Editing panel 28 63 image maps 216 creating 216 exporting 218 images exporting 277 Image Editing panel 63 painting 63 saving 277 selecting 44 selecting pixels 44 images as fills See Paste Inside command import text 122 ASCII text 123 Photoshop files 123 323 INDEX 358 RTF files 123 importing from digital camera 20 Photoshop files 323 Photoshop import preferences 348 PNG files 20 styles 185 symbols 195 indenting text 117 Info panel 28 inserting Adobe Fireworks HTML into Dreamweaver 295 Adobe Fireworks images into Dreamweaver 292 Inset Path command 106 installing Photoshop plug ins 151 instance level properties 225 instances defined 186 editing 193 placing in document 187 tweening 246 integration with other applications 291 interactive button properties 226 interactivity 13 interlacing graphics 272 interpolation scaling 346 Intersect command 105 Invert filter 78 italic text 112 J JPEG files choosing JPEG format 265 editing selected areas 274 optimization settings 272 progressive 274 Selective JPEG compression 273 Sharpen JPEG Edges command 274 JPEG saving 23 K kern
266. es 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 are either lost or converted to their Flash equivalents which may not look the same 7 Select the way youd like text imported Import as bitmaps to maintain appearance preserves the editability of text unless it has special fills strokes or effects that Flash does not support To preserve the appearance of such text Flash converts it to a non editable bitmap image 306 ADOBE FIREWORKS CS3 307 User Guide Keep all text editable preserves the editability of all text If text objects contain special fills strokes or effects that Flash does not support those properties are either lost or converted to their Flash equivalents which may not look the same 8 Click OK The Fireworks PNG file is imported into Flash using the import options you chose Note The selections in the Import Fireworks Document dialog box are saved and used as default settings the next time you import a PNG file Copying and pasting Fireworks graphics into Flash A quick way to place Fireworks graphics into Flash is to copy and paste or drag and drop them Note To copy graphics into versions of Flash earlier than Flash 8 you must choose Edit gt Copy Path Outlines Note You may have to ungroup the objects using Modify gt Ungroup so that they will be editable as separate vector obj
267. es 350 customizing for all users 351 for all users 351 location of 351 master 350 351 configuring Adobe Fireworks 346 Connector Line tool 87 Constrain Proportions option 17 constraining rotation 56 context menus 37 Contract command 49 contracting paths 106 contrast 76 Convert to Symbol dialog box 186 converting paths 104 copying all selected objects on a layer 161 bitmaps 53 frames 243 HTML 283 object attributes 186 objects 53 pixels 44 copying and pasting Adobe Fireworks HTML 283 symbol instances 195 copying and pasting objects from other applications 19 corner points 94 Create Symbol Script panel 28 creating master pages 157 rich graphic symbols 190 slideshows 250 Crop command 105 cropping canvas 37 documents 37 CSS layers exporting 285 curve points 95 curve segments editing 96 custom shortcut sets See keyboard shortcuts INDEX 355 cutting paths 103 D darkening bitmap areas 66 images 68 default preferences 348 Delete Objects While Cropping preference 347 Delete Paths When Converting to Marquee preference 347 deleting frames 244 layers 160 Live Filters 152 masks 178 pages 156 points 99 points on curves 75 selected objects 54 styles 185 swatches 129 Deselect command 47 deselecting all objects 43 Design Center 6 Design Notes for Dreamweaver and Adobe Fireworks integration 303 Director cast members 319 exporting to 317 placing Adobe Fireworks files in 317 disjo
268. es file The first time Fireworks is launched after the preferences file has been deleted a new preferences file is created restoring Fireworks to its original configuration To restore default preferences 1 Quit Fireworks ADOBE FIREWORKS CS3 349 User Guide 2 Locate the Fireworks CS3 Preferences file on your hard disk and delete it The exact location of this file varies from system to system For more information see Location of the Fireworks preferences file on page 351 3 Restart Fireworks Changing keyboard shortcut sets Fireworks lets you use keyboard shortcuts to select menu commands select tools from the Tools panel and speed up miscellaneous tasks that do not exist as menu commands Using shortcuts increases your productivity by allowing you to perform simple actions quickly If you are accustomed to using shortcuts from other applications such as Adobe FreeHand Adobe Illustrator Photoshop or products that use a different standard you can switch to the shortcut set you prefer To change the current shortcut set 1 Select Edit gt Keyboard Shortcuts Windows or Fireworks gt Keyboard Shortcuts Macintosh to open the Keyboard Shortcuts dialog box 2 Select the shortcut set you prefer from the Current Set pop up menu and click OK Creating custom and secondary shortcuts You can create your own custom keyboard shortcuts and you can create secondary shortcuts if you need to have several different ways to
269. es on the style s characteristics Fireworks has many predefined styles You can add change and remove styles The Fireworks DVD and the Adobe website have many more predefined styles that you can import into Fireworks You can also export styles and share them with other Fireworks users or import styles from other Fireworks documents Note You cannot apply styles to bitmap objects Applying a style You can use the Styles panel to create store and apply styles to objects or text ADOBE FIREWORKS CS3 User Guide w Assets 3 Styles WOME AEE Styles panel When you apply a style to an object you can later update the style without affecting the original object Fireworks does not keep track of which style you applied to an object If you delete a custom style you cannot recover it however any object currently using the style retains its attributes If you delete a style supplied in Fireworks you can recover it and all other deleted styles using the Reset Styles command in the Styles panel Options menu However resetting styles also deletes your custom styles To apply a style to a selected object or text block 1 Select Window gt Styles to open the Styles panel 2 Click a style in the Styles panel Creating and deleting styles You can create a style based on the attributes of a selected object The style is displayed in the Styles panel You can also delete styles from the Styles panel The
270. escribe its shape Vector graphics are resolution independent which means you can move resize reshape or change the color of a vector graphic as well as display it on output devices of varying resolutions without changing the quality of its appearance About bitmap graphics Bitmap graphics are composed of dots called pixels arranged in a grid Your computer screen is a large grid of pixels In a bitmap version of the leaf the image is determined by the location and color value of each pixel in the grid Each pixel is assigned a color When viewed at the correct resolution the dots fit together like tiles in a mosaic to form the image When you edit a bitmap graphic you modify pixels rather than lines and curves These bitmap graphics are resolution dependent which means that the data describing the image is fixed to a grid ofa particular size Enlarging a bitmap graphic redistributes the pixels in the grid often making the edges of the image appear ragged Displaying a bitmap graphic on an output device with a lower resolution than the image itself can also degrade the image s quality ADOBE FIREWORKS CS3 15 User Guide Creating a new document When you select File gt New to create a new document in Fireworks you create a Portable Network Graphic or PNG document PNG is the native file format for Fireworks After you create graphics in Fireworks you can export or save them in other familiar web graphic formats such as JPEG
271. essibility features Adobe Help content is accessible to people with disabilities such as mobility impairments blindness and low vision In product Help provides keyboard shortcuts for toolbar controls and navigation and it supports standard accessibility features including the following e Text size can be changed with standard context menu commands e Links are underlined for easy recognition Iflink text doesn t match the title of the destination the title is referenced in the Title attribute of the Anchor tag For example the Previous and Next links include the titles of the previous and next topics e Content supports high contrast mode e Graphics without captions include alternate text e Each frame has a title to indicate its purpose ADOBE FIREWORKS CS3 4 User Guide e Standard HTML tags define content structure for screen reading or text to speech tools Style sheets control formatting so there are no embedded fonts Windows keyboard shortcuts for toolbar controls Each control in the toolbar for in product Help has a keyboard equivalent Back button Alt left arrow Forward button Alt right arrow Print Ctrl P About button Ctrl I Browse menu Alt down arrow or Alt up arrow to view Help for another program Search box Windows Ctrl S to place cursor in Search box Windows keyboard shortcuts for navigation To navigate in Adobe Help Viewer and view topics use the following keyboard combinations e To move
272. esulting path creates the illusion of a path with no fill and a stroke that takes on the same attributes as the original object s fill Note Expanding the stroke of a path that intersects itself can produce interesting results If the original path contains a fill the intersecting portions of the path will not contain a fill after the stroke is expanded To expand a selected object s stroke 1 Select Modify gt Alter Path gt Expand Stroke to open the Expand Stroke dialog box 2 Set the width of the resulting closed path 3 Specify a corner type miter round or beveled 4 Ifyou chose miter set the miter limit the point at which a miter corner automatically becomes a beveled corner The miter limit is the ratio of miter corner length to stroke width 5 Select an end cap option butt square or round Then click OK A closed path in the shape of the original and with the same stroke and fill attributes replaces the original path Contracting or expanding a path You can contract or expand the path of a selected object by a specific number of pixels To expand or contract a selected path 1 Select Modify gt Alter Path gt Inset Path to open the Inset Path dialog box 2 Select a direction to contract or expand the path Inside contracts the path Outside expands the path 3 Set the width between the original path and the contracting or expanding path ADOBE FIREWORKS CS3 107 User Guide 4 Specify a corner type miter ro
273. eview 1 Click the File tab 2 Select the Export Area option and do one of the following to specify the export area Drag the dotted border that appears around the preview until it encloses the desired export area Drag inside the preview to move hidden areas into view ADOBE FIREWORKS CS3 User Guide Enter pixel coordinates for the boundaries of the export area Options File animation W 1200 pixels J H 546 pixels To set animation settings using Image Preview 1 2 Click the Animation tab Use the following techniques to preview animation frames To display a single frame select the desired frame in the list on the left side of the dialog box or use the frame controls in the lower right area of the dialog box To play the animation click the Play Stop control in the lower right area of the dialog box Make edits to the animation To specify the frame disposal method select the desired frame in the list and select an option from the pop up menu indicated by the trash can icon To set the frame delay select the desired frame in the list and enter the delay time in hundredths of a second in the Frame Delay field Options File Animation g i 7 100 sec To set the animation to play repeatedly click the Looping button and select the desired number of repetitions from the pop up menu Select the Auto Crop option to crop each frame as a rectangular area so that only the image area
274. ew gt Guides gt Edit Guides 2 Select a new color from the Slice Color section of the Guides dialog box and click OK Editing slices In Fireworks you can work with a slice layout as if it were a table in a word processing application When you drag a slice guide to resize a slice Fireworks automatically resizes all adjacent rectangular slices as well In addition you can use the Property inspector to resize and transform slices as you would vector and bitmap objects Moving slice guides to edit slices Slice guides define the perimeter and position of slices Slice guides extending beyond slice objects define how the rest of the document is sliced upon export You can change the shape of a rectangular slice object by dragging the slice guides that surround it Nonrectangular slice objects cannot be resized by moving slice guides Resizing a slice object by dragging its slice guides Note If you drag slice guides that surround a Fireworks button in the Document window Fireworks resizes the slice that defines the active area for that button However you cannot delete the active area for a Fireworks button by dragging the slice guides that surround it If multiple slice objects are aligned along a single slice guide you can drag that slice guide to resize all the slice objects simultaneously Resizing multiple slice objects by dragging a single guide In addition if you drag one guide along a given coordinate all other guides
275. ew them in new tab or view the full sized version of the image First Album Select which album in the AlbumBook is loaded when the player starts Album Properties panel The following properties apply only to the individual selected album Title Title of Album in Slideshow This title can contain whitespace for example My Journey Folder name Name of the generated folder for the current album If you intend to upload the slideshow to a web server it is recommended that 1 You do not include special characters or any spaces in the name and 2 You do not use uppercase letters Description Description of the current album Thumbnail Thumbnail image preview option for the current album When selected a pop up menu allows you to choose an image to use for the thumbnail preview in the slideshow Background Background image selection for the current album Select this option if you would like to have a custom background image for the slide show Pop up menus allow you to select the image to use and select how it should be scaled Captions panel Use these options to customize the captions in your slideshows Apply to all albums Apply the selected caption options to all albums in the AlbumBook This is selected by default No change No change is made to the existing captions Clear all captions Clears all captions for all images in the current album when the slideshow is generated Use filenames Use actual name of the file a
276. f objects have special fills strokes or effects that Flash does not support those properties are either lost or converted to their Flash equivalents which may not look the same ADOBE FIREWORKS CS3 User Guide 6 Select the way youd like text imported Import as bitmaps to maintain appearance preserves the editability of text unless it has special fills strokes or effects that Flash does not support To preserve the appearance of such text Flash converts it to a non editable bitmap image Keep all text editable preserves the editability of all text If text objects contain special fills strokes or effects that Flash does not support those properties are either lost or converted to their Flash equivalents which may not look the same 7 Click OK The pasted content is imported into Flash using the import options you chose Note The selections in the Import Fireworks Document dialog box are saved and used as default settings the next time you copy and paste or drag and drop a PNG file into Flash About the Flash library structure Fireworks objects are imported into a Fireworks Objects Folder in the Flash library The structure within this folder is as follows File 1 folder Named with the Fireworks file name e Page 1 folder Named with the page name if more than one page Page 1 Named with the page name Frame 1 folder Named with the frame name if more than one frame Frame 1 Named with the
277. f you prefer to apply filters in an irreversible permanent way you can select them from the Filters menu However Adobe recommends that you use filters as Live Filters whenever possible You can apply filters from the Filters menu to pixel selections but not Live Filters You can however define an area of a bitmap and create a separate bitmap from it and then apply a Live Filter to it If you apply a filter to a selected vector object using the Filters menu Fireworks converts the selection to a bitmap To apply a Live Filter to an area defined by a bitmap selection marquee 1 Select a bitmap selection tool and draw a selection marquee 2 Select Edit gt Cut 3 Select Edit gt Paste Fireworks pastes the selection exactly where the pixels were originally located but the selection is now a separate bitmap object 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 ADOBE FIREWORKS CS3 72 User Guide Fireworks applies the Live Filter only to the new bitmap object simulating the application of a filter to a pixel selection Note Although Live Filters are more flexible large numbers of Live Filters in a document can slow down Fireworks performance For more information see Controlling document redraw on page 34 Adjusting tonal range You can use the Levels and Curves features to adjust a bitmap s tonal range With Levels
278. figuration folder For information on the location of this folder see About user configuration files on page 351 To save steps as a command 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 command Control click Windows or Command click Macintosh to select noncontiguous steps 2 Click the Save Steps as Command button at the bottom of the History panel 3 Enter a name for the command and click OK The command appears on the Commands menu ADOBE FIREWORKS CS3 343 User Guide To undo or redo steps using the History panel 1 Drag the Undo Marker up the panel until you reach the last step you want to undo or redo 2 Click along the Undo Marker track on the left of the History panel Note Undone steps remain in the History panel highlighted in gray To change the number of steps the History panel remembers 1 Select Edit gt Preferences Windows or Fireworks gt Preferences Macintosh 2 Change Undo Steps to the number of steps you want the History panel to record Note Additional steps require more computer memory To clear all steps from the History panel Select Clear History from the History panel Options menu This frees memory and disk space Note Clearing actions from the History panel removes your ability to undo edits Playing commands You can execute recorded commands or a selection of actions in the History panel at any time
279. file When you import an animated GIF Fireworks converts it to an animation symbol and places it in the currently selected frame If the animation has more frames than the current movie does you can choose to automatically add more frames ADOBE FIREWORKS CS3 249 User Guide Imported GIFs lose their original frame delay settings and assume the frame delay of the current document Because the imported file is an animation symbol you can apply additional motion to it For example you can import an animation of a man walking in place and then apply direction and motion properties to have the man walk across the screen When you open an animated GIF in Fireworks a new file is created and each frame in the GIF is placed in a separate frame Although the GIF is not an animation symbol it does retain all the frame delay settings from the original file After the file is imported you need to set its file format to Animated GIF to export the motion from Fireworks To import an animated GIF 1 Select File gt Import 2 Locate the file and click Open 3 Click Yes to add additional frames to your animation If you click Cancel only the first frame of the animated GIF is displayed Although the whole document is imported you must add additional frames to view it To open an animated GIF Select File gt Open and locate the GIF file Using multiple files as one animation Fireworks can create an animation based on a group of image fi
280. filters and plug ins using the Live Filters window 1 Select any vector object bitmap object or text block on the canvas and click the Add Effects button in the Property inspector Note The Add Effects button is available only when an object is selected on the canvas 2 Select Options gt Locate Plug ins from the pop up menu that appears ADOBE FIREWORKS CS3 325 User Guide 3 Navigate to the folder where the Photoshop or other filters and plug ins are installed and click Select Windows or Choose Macintosh If a message appears asking if you want to restart Fireworks click OK 4 Restart Fireworks to load the filters and plug ins Note Alternately you can install plug ins directly into the Fireworks Plug ins folder Placing Fireworks graphics in Photoshop Fireworks provides extensive support for exporting files in Photoshop PSD format Export settings let you control which elements in the file remain editable when you reopen it in Photoshop A Fireworks image exported into Photoshop maintains the same editability when reopened in Fireworks as other Photoshop graphics Export options for editability appearance and file size let you determine the best possible export procedure for your particular graphic Photoshop users can work with their graphic in Fireworks and then continue editing in Photoshop To export a file in Photoshop format 1 Select File gt Export or click the Quick Export button and choose Other gt Export to
281. fore and after the current frame 1 In the Frames panel click the Onion Skinning button 2 Select a display option 245 ADOBE FIREWORKS CS3 246 User Guide No Onion Skinning turns off onion skinning and displays only the contents of the current frame Show Next Frame displays the contents of the current frame and the next frame Before and After displays the contents of the current and adjacent frames Show All Frames displays the contents of all frames Custom sets a custom number of frames and controls the opacity of onion skinning Multi Frame Editing lets you select and edit all visible objects Deselect this option to select and edit only objects in the current frame Tweening Tweening is a traditional animation term that describes the process in which a lead animator draws only the keyframes frames containing major changes while assistants draw the frames in between In Fireworks tweening blends two or more instances of the same symbol creating interim instances with interpo lated attributes Tweening is a manual process useful for more sophisticated movement of an object across the canvas and for objects whose Live Filters change in each frame of the animation For example you can tween an object so that it seems to move along a linear path To tween instances 1 Select two or more instances of the same graphic symbol on the canvas Do not select instances of different symbols 2 Select Modify gt Symbol gt Twe
282. forming objects numerically on page 57 Rotating objects When rotated an object pivots on its center point You rotate an object by selecting a preset angle or by placing the pointer outside an object s transform handles to display the rotation pointer before you drag ADOBE FIREWORKS CS3 56 User Guide Note You can also rotate the document canvas For more information see Rotating the canvas on page 36 To rotate a selected object 90 or 180 Select Modify gt Transform and select a Rotate command from the submenu To rotate a selected object by dragging 1 Select any transformation tool 2 Move the pointer outside the object until the rotation pointer appears 3 Drag to rotate the object y constrain rotation to 15 increments relative to the horizon Shift drag the pointer 4 Double click inside the window or press Enter to apply your changes To relocate the axis of rotation gt Drag the center point away from the center To reset the axis of rotation to the center of the selection do one of the following e Double click the center point e Press Escape to deselect the object then select it again Flipping objects You can flip an object across its vertical or horizontal axis without moving its relative position on the canvas To flip a selected object Select Modify gt Transform gt Flip Horizontal or Flip Vertical Skewing objects Skewing an object transform
283. frame name Symbol 1 in Frame 1 Named based on the symbol name Symbol 2 in Frame 1 Shared Layers folder Shared layers across frames in Page 1 Shared Layer folder Named with the name of the shared layer Shared Layer symbol e Page 2 folder Page 2 Symbol 1 in Page 2 For a page with no frames e MasterPage folder MasterPage Symbol 1 in MasterPage Shared Layers folder Shared layers across pages Shared Layer folder Named with the name of the shared layer Shared Layer symbol About importing symbols that have 9 slice scaling When you import a Fireworks symbol that is using 9 slice scaling the four slice guides are imported and preserved in Flash 9 slice scaling is preserved for graphic rich graphic and button symbols but not animations since it is not supported for animations in Fireworks The imported symbols are saved as symbols in the Flash library 308 ADOBE FIREWORKS CS3 309 User Guide About importing rich graphic symbols When importing rich graphic symbols such as Flex components into Flash there are a few restrictions e Soft edits that have been applied to the symbol are lost The master copy of the symbol is imported e Rich graphic symbols are stored as a PNG file and a JSF file Only the PNG file is imported If the symbol is made up of a number of paths the paths are combined into one symbol If you need to
284. g click the corresponding button Inserting special characters You can insert special characters into your text directly from within Fireworks rather than having to copy and paste those characters from another source To insert special characters 1 After creating a text block click the location inside the text block where you want to insert a special character 2 Select Window gt Special Characters 3 In the Special Characters panel select the character you want to insert Applying text color Text color is controlled by the Fill Color box By default text is black and has no stroke You can change the color of all text in a selected text block or of highlighted text in a text block The Text tool retains the current text color from text block to text block The Text tool retains the current text color independently of the fill color of other tools When you use another tool after using the Text tool the fill and stroke settings revert to the most recent settings from before the Text tool was used Likewise when you return to the Text tool the fill color reverts to the most recent Text tool setting and the stroke is reset to None Fireworks retains the current Text tool color as you switch from document to document or close and reopen Fireworks You can add a stroke and Live Filters to all text in a selected text block but not to highlighted text in a text block Fireworks updates stroke characteristics and Live Filters applied to
285. g 166 using an existing object as 167 169 vector mode 12 drawing in 84 switching to 61 vector objects reshaping 100 Video Workshop 4 view modes 33 viewing rich graphic symbols 190 w WAP graphics 17 See also WBMP files WBMP files 17 exporting to 265 opening from Adobe Fireworks 17 saving 23 INDEX 364 Web Layer 163 web safe colors 133 websafe colors 270 When Editing From External Application preference 348 When Optimizing From External Application preference 348 Windows system colors as a swatch group 128 work environment 24 workflow in Adobe Fireworks 12 X XHTML 286 Z Zoom Blur filter 80 Zoom tool 32 zooming 31 into a specific area 32 using preset increments 32
286. g Fireworks graphics in Flash You can place Fireworks graphics into Flash in a number of ways Importing or copying and pasting a Fireworks PNG file offers you the most control over how graphics and animations are imported into Flash Although you have more control when importing or copying and pasting Fireworks PNG files you can also import JPEG GIF PNG and SWF files that have been exported from Fireworks Note When Fireworks graphics are imported or copied and pasted into Flash some attributes are lost such as Live Filters and textures You cannot import or copy and paste a contour gradient effect from Fireworks into a Flash document In addition Flash supports only solid fills gradient fills and basic strokes Importing Fireworks PNG files into Flash You can import Fireworks PNG source files directly into Flash without having to export to any other graphics format All Fireworks vectors bitmaps animations and multi state button graphics can be imported into Flash Note Fireworks button behaviors and other types of interactivity are not imported into Flash because Fireworks behaviors are enabled by JavaScript that is external to the file format Flash uses internal ActionScript code When you import a Fireworks PNG file into Flash you can choose from a variety of import options If your PNG file contains multiple pages you can import all of the pages into new Flash frames or scenes or select a specific page to import into the cu
287. g objects on page 58 5 Do one of the following to paste the mask e Select Edit gt Paste as Mask e Select Modify gt Mask gt Paste as Mask A mask applied to an image with a black canvas Masking objects using the Paste Inside command If you are a FreeHand user you may be familiar with the Paste Inside method of creating masks Paste Inside creates either a vector mask or a bitmap mask depending on the type of mask object you use The Paste Inside command creates a mask by filling a closed path or bitmap object with other objects vector graphics text or bitmap images The path itself is sometimes referred to as a clipping path and the items it contains are called contents or paste insides Contents extending beyond the clipping path are hidden The Paste Inside command in Fireworks produces a similar effect to the Paste as Mask command with a couple of differences e With Paste Inside the object you cut and paste is the object to be masked Compare this with Paste as Mask where the object you cut and paste is the mask object e With vector masks Paste Inside shows the fill and stroke of the mask object itself A vector mask object s fill and stroke are not visible by default with Paste as Mask You can turn a vector mask s fill and stroke on or off however using the Property inspector For more information see Changing the way masks are applied on page 176 ADOBE FIREWORKS CS3 168 User Guide To creat
288. ge Drawing bitmap objects You can use the Pencil tool to draw 1 pixel lines either freehand lines or constrained straight lines much as you use a real pencil with or without a ruler to draw hard edged lines You can also zoom in on a bitmap and use the Pencil tool to edit individual pixels To draw an object with the Pencil tool 1 Select the Pencil tool 2 Set tool options in the Property inspector Anti aliased smoothes the edges of the lines you draw Auto Erase uses the fill color when the Pencil tool is clicked over the stroke color Preserve Transparency restricts the Pencil tool to drawing only in existing pixels not in transparent areas of a graphic 3 Drag to draw Shift drag to constrain the path to a horizontal vertical or diagonal line ADOBE FIREWORKS CS3 64 User Guide Painting bitmap objects You can use the Brush tool to paint a brush stroke using the color in the Stroke Color box or you can use the Paint Bucket tool to change the color of selected pixels to the color in the Fill Color box With the Gradient tool you can fill bitmap or vector objects with a combination of colors in adjustable patterns To paint an object with the Brush tool 1 Select the Brush tool 2 Set the stroke attributes in the Property inspector 3 Drag to paint For more information about setting Brush tool options see Working with strokes on page 136 To change the color of pixels to the color in the Fill Color bo
289. ge 147 2 In the Property inspector click the Add Live Filters button then select Options gt Save As Style The New Style dialog box opens 3 Type a name for the style and click OK The custom Live Filter name is added to the Add Filters pop up menu and a style icon representing the Live Filter is added to the Styles panel To create a custom Live Filter using the Styles panel 1 Apply Live Filter settings to selected objects For more information see Applying Live Filters on page 147 2 Select New Style from the Styles panel Options menu The New Style dialog box opens 3 Deselect all properties except the Filter property enter a name and click OK The custom Live Filter name is added to the Add Filters pop up menu and a style icon representing the Live Filter is added to the Styles panel Note If you select any additional properties in the Add New Style dialog box the style will no longer be an item on the Add Filters pop up menu in the Property inspector although it will remain on the Styles panel as a typical style To apply a custom Live Filter to selected objects do one of the following In the Property inspector click the Add Live Filters button then select the custom Live Filter e Click the icon for the custom Live Filter in the Styles panel You can rename or delete a custom Live Filter as you would any other style in the Styles panel For more information see Creating and deleting styles on page 184
290. gnification percentage J Original BD Preview 12 Up E4 Up Web a 8 e Colors 2 amp ATA S m ea View v SOOR 660x440 100 A B A Hand tool B Zoom tool C Zoom pop up menu To zoom in using preset increments do one of the following e Select the Zoom tool and click to specify the new center point inside the document window Each click magnifies the image to the next preset magnification Select a zoom setting from the Set Magnification pop up menu at the bottom of the document window Select Zoom In or a preset magnification from the View menu To zoom out using preset increments do one of the following Select the Zoom tool and Alt click Windows or Option click Macintosh inside the document window Each click reduces the view to the next preset percentage e Select a zoom setting from the Set Magnification pop up menu at the bottom of the document window Select Zoom Out or a preset magnification from the View menu To zoom in on a specific area without being constrained by preset zoom increments 1 Select the Zoom tool 2 Drag over the part of the image that you want to magnify The size of the zoom selection box determines the precise magnification percentage which is displayed in the Set Magnification text box ADOBE FIREWORKS CS3 33 User Guide Note You cannot enter a magnification percentage in the Set Magnification text box To zoom out based on a specific area
291. gray levels for coloring monochrome images and tinting color images Luminosity combines the luminance of the blend color with the hue and saturation of the base color Invert inverts the base color Tint adds gray to the base color Erase removes all base color pixels including those in the background image For general information about blending modes in particular Photoshop blending modes see the following website www pegtop net delphi articles blendmodes Blending mode examples Here are examples of some of the blending modes in Fireworks For additional examples see the following website www pegtop net delphi articles blendmodes Original image Normal Multiply he Screen Darken Lighten ADOBE FIREWORKS CS3 181 User Guide Difference Saturation 3 pA Hue Color Luminosity Invert Tint Erase Adjusting opacity and applying blends You can use the Property inspector or the Layers panel to adjust the opacity of selected objects and to apply blending modes An Opacity setting of 100 renders an object completely opaque A setting of 0 zero renders an object completely transparent You can also specify a blending mode and opacity before you draw an object To specify a blending mode and opacity before you draw an object With the desired tool selected in the Tools panel set blend and opacity options in the Property inspector before you draw the object Note Blend and
292. h other Fireworks users Third party extensions are stored in subfolders depending upon the type of extension in the Configuration folder in the Fireworks application folder on your hard disk Commands that you create and save using the History panel are stored in your user s Commands folder For infor mation on the location of this folder see About user configuration files on page 351 To open the Extension Manager from within Fireworks do one of the following e Select Commands gt Manage Extensions e Select Help gt Manage Extensions For more information about using the Extension Manager see Extension Manager Help To visit the Adobe Fireworks Exchange do one of the following From within Fireworks select Help gt Fireworks Exchange From a web browser go to the Fireworks Exchange at www adobe com go fireworks_exchange Scripting with the History panel The History panel records a list of the steps you have performed while working in Fireworks Each step is stored on a separate line of the History panel starting with the most recent By default the panel remembers 20 steps However you can change this value at any time Creating commands You can save groups of steps in the History panel as a command that you can reuse You can execute saved commands in any Fireworks document They are not document specific Saved commands are stored as JSF files in the Commands folder in your user specific Fireworks con
293. h the Pointer or Subselection tool to select the entire block To select multiple blocks simul taneously hold down Shift as you select each block e Double click a text block with the Pointer or Subselection tool and highlight a range of text e Click inside a text block with the Text tool and highlight a range of text 2 Make your changes For information about changing text attributes see Choosing a font size and text style on page 112 Inserting special characters on page 113 Setting kerning on page 114 Setting leading on page 115 Setting text orien tation on page 116 Setting text alignment on page 116 and Indenting text on page 117 3 Do one of the following to apply your changes e Click outside the text block Select another tool in the Tools panel e Press Escape Choosing a font size and text style You use the Property inspector to change the font size and style attributes of the text in a text block To change the font size and style of selected text using the Property inspector 1 To change the font select a font from the Font pop up menu ADOBE FIREWORKS CS3 113 User Guide Note The fonts that were used most recently appear at the top of the Font pop up menu Arial vie vl B7 U 2 To change the font size drag the Font Size pop up slider or enter a value in the text box Font size is measured in points 3 To apply bold italic or underline formattin
294. hape Area tool 2 Drag across the paths to redraw them To change the size of the reshape area pointer do one of the following e While holding down the mouse button press the Right Arrow key or 2 to increase the width of the pointer e While holding down the mouse button press the Left Arrow key or 1 to decrease the width of the pointer To set the size of the pointer and set the length of the path segment that it affects deselect all objects in the document and then enter a value from 1 to 500 in the Size text box of the Property inspector The value indicates the size of the pointer in pixels To set the strength of the inner circle of the reshape area pointer Enter a value from 1 to 100 in the Strength text box of the Property inspector The value indicates the percentage of the pointer s potential strength The higher the percentage the greater the strength Redrawing paths You can use the Redraw Path tool to redraw or extend a segment of a selected path while retaining the path s stroke fill and effect characteristics To redraw or extend a segment of a selected path 1 From the Pen tool pop up menu select the Redraw Path tool ADOBE FIREWORKS CS3 User Guide 2 If desired change the precision level of the Redraw Path tool by selecting a number from the pop up menu in the Precision box of the Property inspector The higher the number you select the greater the number of points that appear on the path 3 Mov
295. hapter 2 Fireworks Basics Fireworks CS3 is a software program for designing professional on screen graphics Its innovative solutions tackle the major problems facing graphic designers and webmasters Using the wide range of tools in Fireworks you can create and edit both vector and bitmap graphics within a single file The advent of Fireworks freed web designers from having to jump back and forth among as many as a dozen task specific applications Its nondestructive Live Filters eliminate the frustration of having to re create web graphics from scratch after any simple edit Fireworks generates JavaScript making rollovers easy to create Efficient optimi zation features shrink the size of web graphic files without sacrificing quality If you are new to Fireworks it would be helpful for you to understand general Fireworks concepts such as opening importing and saving files finding your way around the Fireworks environment and working within a file After you create a new file or open an existing file the Fireworks work environment is available to you This chapter contains the following topics e About working in Fireworks on page 12 e About vector and bitmap graphics on page 13 e Creating a new document on page 15 e Opening and importing files on page 16 e Saving Fireworks files on page 22 e The Fireworks work environment on page 24 About working in Fireworks Fireworks is a versatile program
296. have the full functionality of the symbol in Flash you need to replace it with the Flash version of the symbol About preserving Photoshop layer effects Fireworks supports the Photoshop layer effects listed below This list describes how each effect is imported into Flash Photoshop Live effect DropShadow Mapping is as follows size maps to blurX blurY distance maps to distance color maps to color angle maps to 180 Photoshop Effect angle Photoshop Live effect InnerShadow Mapping is as follows size maps to blurX blurY distance maps to distance color maps to color angle maps to 180 Photoshop Effect angle Photoshop Live effect Outer Glow Mapping is as follows Opacity maps to strength color maps to color size maps to blurX blurY Photoshop Live effect Inner Glow Mapping is as follows Opacity maps to strength color maps to color size maps to blurX blurY Objects with any other Photoshop layer effects are rasterized About preserving visibility and locking Objects and layers that are hidden in the PNG fie are imported and remain hidden in Flash However non visible parts of a rich graphic symbol are not imported for example button over or down states If a layer is locked or hidden all objects and sub layers within the layer inherit this setting and retain it when they are imported into Flash However if you import a single page into a new layer in Flash one layer is created for the entire
297. haviors shared between Fireworks and Dreamweaver The Property inspector in Dreamweaver helps you identify Fireworks generated images table slices and tables in a document Although Fireworks supports most types of Dreamweaver edits radical changes made to a table s structure in Dreamweaver can create irreconcilable differences between the two applications If you make radical changes to a table layout in Dreamweaver and then attempt to launch and edit the table in Fireworks a message appears warning you that changes you make in Fireworks will overwrite any edits previously made to the table in Dreamweaver If you want to make considerable changes to a table layout use the Dreamweaver launch and edit feature to edit the table in Fireworks Editing Fireworks images You can start Fireworks to edit individual images placed in a Dreamweaver document Note Before editing Fireworks graphics from Dreamweaver you should perform some preliminary tasks For more infor mation see Setting launch and edit options on page 302 To open and edit a Fireworks image placed in Dreamweaver 1 In Dreamweaver choose Window gt Properties to open the Property inspector if it is not already open 2 Do one of the following e Select the desired image The Property inspector identifies the selection as a Fireworks image and displays the name of the known PNG source file for the image Then click Edit in the Property inspector e Control double click
298. he actual colors in the image could be lower than the maximum number of colors you select The number at the bottom of the color table indicates the actual number of colors visible in the image If no number is visible you ll see a Rebuild button which indicates you should rebuild the color palette For more information see Viewing colors in a palette on page 268 To select a color depth beyond 256 colors Select a 24 or 32 bit file format from the Export File Format pop up menu in the Optimize panel Note Higher color depths create larger files and are typically not ideal for web graphics Use only 24 or 32 bit color depths when exporting or saving photographic images with continuous tones or complex gradient blends of colors For high color depth graphics on the web use JPEG files For more information see Optimizing JPEGs on page 272 Removing unused colors Removing unused colors from an image before exporting or saving makes its file size smaller Note This option is available only for GIFs and other 8 bit graphic file formats To remove unused colors Select Remove Unused Colors from the Optimize panel Options menu To include all colors in the palette including colors that are not present in the exported or saved image Deselect Remove Unused Colors Dithering to approximate lost colors Dithering approximates colors not in the current palette by alternating similarly colored pixels From a distance the c
299. he fill when used in Fireworks If an image is not 32 bit it becomes opaque When you add a new pattern its name appears in the Pattern Name pop up menu of the Fill Options pop up window To create a new pattern from an external file 1 With vector object properties displayed in the Property inspector select Pattern from the Fill Options pop up menu 2 Click the Fill Color box and select Other from the Pattern Name pop up menu 3 Navigate to the bitmap file you want to use as the new pattern and click Open The new pattern is added to the Pattern Name list in alphabetical order Applying a gradient fill Fill categories other than None Solid Pattern and Web Dither are gradient fills These fills blend colors to create various effects Ha Objects with various gradient fills To apply a gradient fill to a selected object Select a gradient from the Fill Options pop up menu in the Property inspector The fill appears in the selected object and becomes the active fill Editing a gradient fill You can edit the current gradient fill by clicking any Fill Color box and then using the Edit Gradient pop up window ADOBE FIREWORKS CS3 143 User Guide Preview Fill Options Edit Gradient pop up window To open the Edit Gradient pop up window 1 Select an object that has a gradient fill or select a gradient fill from the Fill Options pop up menu in the Property inspector 2 Click the Fill Color box i
300. he folder must be named Library the case is important because Dreamweaver is case sensitive Note Dreamweaver does not recognize the exported file as a library item unless it is saved into the Library folder 3 Inthe Export dialog box type a filename 4 If your image contains slices choose slicing options For more information see Fireworks Help 5 Select Put Images in Subfolder to choose a separate folder for saving images 6 Click Save Editing Fireworks files from Dreamweaver Roundtrip HTML is a powerful feature that tightly integrates Fireworks and Dreamweaver It allows you to make changes in one application and have those changes seamlessly reflected in the other With Roundtrip HTML you use launch and edit integration to edit Fireworks generated images and tables placed in a Dreamweaver document Dreamweaver automatically opens the Fireworks source PNG file for the placed image or table letting you make desired edits in Fireworks The updates you make in Fireworks are applied to the placed image or table when you return to Dreamweaver Note Before working with Roundtrip HTML you should perform some preliminary tasks For more information see Setting launch and edit options on page 302 ADOBE FIREWORKS CS3 298 User Guide About Roundtrip HTML Fireworks recognizes and preserves most types of edits made to a document in Dreamweaver including changed links edited image maps edited text and HTML in HTML slices and be
301. he image is lightened or dodged by decreasing the contrast Linear Light differs from Vivid Light in that Linear light is a combination of Linear Burn and Linear Dodge and adjusts brightness rather than contrast If the blend layer color is darker than mid gray Linear Light darkens the image by decreasing the brightness If the blend layer color is lighter than mid gray the result is a brighter image due to increased brightness ADOBE FIREWORKS CS3 180 User Guide Pin Light replaces the color depending on the blend color If the blend color is lighter than 50 gray pixels darker than the blend color are replaced and pixels lighter than the blend color do not change If the blend color is darker than 50 gray pixels lighter than the blend color are replaced and pixels darker than the blend color do not change Hard Mix reduces the colors in an image to just eight pure colors Difference subtracts the blend color from the base color or the base color from the blend color The color with less brightness is subtracted from the color with more brightness Hue combines the hue value of the blend color with the luminance and saturation of the base color to create the result color Saturation combines the saturation of the blend color with the luminance and hue of the base color to create the result color Color combines the hue and saturation of the blend color with the luminance of the base color to create the result color preserving the
302. he inner polygon of a selected smart polygon gt Click the reset inner polygon control point Adjusting spiral Auto Shapes Spirals have two control points There are control points for adjusting the number of turns in the spiral and for making the spiral open or closed ADOBE FIREWORKS CS3 92 User Guide To adjust the number of turns in a selected spiral Drag the spirals control point To open or close a selected spiral Click the open close spiral control point Adjusting star Auto Shapes Stars initially have five control points There are control points for adding or removing points for adjusting the inner and outer angles of the points and for adjusting the roundness of the peaks and valleys To change the number of sides on a selected star Drag the Points control point To adjust the valleys of a selected star Drag the valley control point To adjust the points of a selected star Drag the peak control point To adjust the roundness of a selected star s peaks or valleys Drag a Roundness control point Adding Auto Shapes to drawings The Assets panel contains a Shapes tab where you can find additional Auto Shapes These Auto Shapes are generally more complex than those that appear in the Tools panel Instead of drawing these Auto Shapes directly on the canvas you place these Auto Shapes into your drawing by dragging them from the Assets panel to the canvas To create an Auto Shape using the Assets
303. he path 1 Using the Subselection tool select the text on a path object The path points are now subselected and ready to be edited 2 Drag the points to reshape the path Note You can also use the Bezier Pen tool to edit the path The text will automatically flow correctly around the path as points are edited ADOBE FIREWORKS CS3 121 User Guide Changing text orientation and direction on a path The order in which you draw a path establishes the direction of the text attached to it For example if you draw a path from right to left the attached text appears backward and upside down tuejnounbey Text attached to a path drawn right to left You can change the orientation or reverse the direction of the text attached to a path You can also change the starting point of text on a path To change the orientation of text on a selected path Select Text gt Orientation and select an orientation Text rotated around a path Text oriented vertically on a path jagunculan Text skewed vertically around a path aQunculg Text skewed horizontally around a path To reverse the direction of text on a selected path Select Text gt Reverse Direction To move the starting point of text attached to a path 1 Select the text on a path object 2 Inthe Property inspector enter a value in the Text Offset text box Then press Enter Note If the Property inspector is minimized click the expander arrow in the lower right co
304. he underlying objects Highlighted The button s colors lighten WA STO Inset The bevel appears to sink into the underlying objects The bevel appears to sink into the underlying objects and the colors lighten 5 Repeat steps 1 through 4 for the remaining button states giving each state a different button preset filter Converting Fireworks rollovers into buttons You can create buttons from rollovers that you created in previous versions of Fireworks The components convert to a button and the new button is placed in the library For more information about rollovers see Making slices interactive on page 205 To convert a Fireworks rollover into a button 1 Delete the slice or hotspot covering the rollover images 2 Select Show All Frames from the Onion Skinning pop up menu in the Frames panel 3 Select all the objects to be included in the button Use the Select Behind tool to select objects that are hidden behind others For more information see Using the Select Behind tool on page 42 4 Select Modify gt Symbol gt Convert to Symbol The Symbol Properties dialog box opens 5 Enter a name for the symbol in the Name text box 6 Select the Button symbol type 7 Click OK The new button is added to the library You can also convert four frame animations to buttons Simply select all four objects and each is placed on its own button state Inserting buttons into a document You can
305. he workspace Note Most procedures in Using Fireworks assume that the Property inspector is displayed at full height To undock the Property inspector Drag the gripper at the upper left corner to another part of the workspace To dock the Property inspector at the bottom of the workspace Windows only gt Drag the side bar on the Property inspector to the bottom of the screen To expand a half height Property inspector to full height revealing additional options do one of the following e Click the expander arrow in the lower right corner of the Property inspector e Click the icon in the upper right of the Property inspector and select Full Height from the Property inspector Options menu Note In Windows the Options menu is available only when the Property inspector is docked To reduce the Property inspector to half height do one of the following e Click the expander arrow in the lower right corner of the Property inspector e Select Half Height from the Property inspector Options menu Note In Windows the Options menu is available only when the Property inspector is docked 26 ADOBE FIREWORKS CS3 27 User Guide To collapse the Property inspector when it is docked do one of the following Click the expander arrow or the title of the Property inspector e Select Collapse Panel Group from the docked Property inspector Options menu For more information about specific Property inspector options see the a
306. hen change the Tolerance setting in the Property inspector before using the command You can also select the Live marquee box so that you can change the Tolerance setting while using the Magic Wand tool ADOBE FIREWORKS CS3 47 User Guide Removing a selection marquee You can remove a selection marquee without affecting the document To remove a marquee do one of the following Draw another marquee e Click outside the current selection with a marquee or lasso tool e Press Escape e Choose Select gt Deselect Adjusting selection marquees After selecting pixels with a marquee or lasso tool you can edit or move the marquee border without affecting the pixels beneath it You can manually add pixels to or delete pixels from a marquee border using modifier keys In addition you can expand or contract the marquee border by a specified amount select an additional area of pixels around the existing marquee or smooth the border of the marquee Moving or adjusting a marquee You can move a marquee to place it over a different area of pixels or reposition a marquee as you draw it by pressing the Spacebar while drawing To move the marquee do one of the following Drag the marquee with a marquee or lasso tool or the Magic Wand tool e Use the arrow keys to nudge the marquee in 1 pixel increments e Press Shift and use the arrow keys to move the marquee in 10 pixel increments To reposition a selection with the Spacebar 1 Beg
307. her bitmap object 1 Make a selection by drawing the marquee 2 Inthe Layers panel select a different bitmap object on the same layer or an object on a different layer The marquee is transferred to that object Note Fireworks treats masks and masked objects as separate objects For more information on masks see Masking images on page 164 ADOBE FIREWORKS CS3 51 User Guide Saving marquee selections You can save the size shape and location of a selection to reapply later You can also save multiple marquee selec tions To save a marquee selection 1 Choose Select gt Save Bitmap Selection to open the Save Selection dialog box 2 The Document box displays the name of the active document in which your marquee selection will be saved You can either leave that name as is or select another one from the pop up menu if you would rather save your marquee selection to another open document 3 The Selection box displays the name of the active selection in the active document If this is a new selection the word New appears by default You can leave that as is or if you want to replace a previously saved selection with the new selection select another saved selection from the pop up menu 4 The Name box which displays the word Default is only enabled if the Selection box displays the word New If this is the case select the word Default and type a name for your new selection 5 Ifthe Selection box displays the word New th
308. her useful software In addition the Adobe Store at www adobe com go store provides access to thousands of plug ins from third party developers helping you to automate tasks customize workflows create specialized professional effects and more Adobe Labs Adobe Labs provides you with the opportunity to experience and evaluate new and emerging innovations technol ogies and products from Adobe At Adobe Labs you have access to resources such as these e Prerelease software and technologies e Code samples and best practices to help accelerate your learning curve Early versions of product and technical documentation e Forums wiki based content and other collaborative resources to help you interact with like minded developers Adobe Labs fosters a collaborative software development process This environment allows customers to become productive with new products and technologies faster and the Adobe development teams to respond and react to early feedback in order to shape the software in a way that meets the needs and expectations of the community Visit Adobe Labs at www adobe com go labs ADOBE FIREWORKS CS3 8 User Guide User communities Features forums blogs and other avenues for users to share technologies tools and information ask questions and find out how others are getting the most out of their software User to user forums are available in English French German and Japanese blogs are posted in a wide range of
309. ialog box Batch Replace Find Text Find Change to C Whole word C Match case oO Regular expressions These options apply to object files such as Fireworks and FreeHand but not image only files such as GIF or JPEG OK Cancel Batch Replace affects only the following file formats Fireworks PNG Illustrator FreeHand and CorelDraw Batch Replace does not affect GIFs and JPEGs To select attributes to find and replace during a batch process 1 Select Find and Replace from the Batch Options list and click Add 2 Click Edit ADOBE FIREWORKS CS3 339 User Guide 3 Select the type of attribute to find and replace from the Find pop up menu text font color URL or Non Web216 4 Enter or select the specific element to find in the Find box 5 Enter or select the specific element to replace in the Change To box 6 Click OK to store Find and Replace settings 7 Click Next to continue the batch process For information on completing the batch process see Batch processing on page 334 For more information about Find and Replace options see Finding and replacing on page 330 Changing filenames with a batch process You can change the names of files being processed using the Rename option in the Batch Process dialog box To set naming options for batch processed files 1 Select Rename from the Batch Options list and click Add 2 Specify Rename options at the bottom of the Batch Process d
310. ialog box Replace with lets you replace characters in each filename with a different characters that you specify or you can delete characters from each filename For example if you have files named Temp_123 jpg Temp_124 jpg and Temp_125 jpg you might replace Temp_12 with Birthday thus changing the filenames to Birthday3 jpg Birthday4 jpg and Birthday5 jpg Replace blanks with lets you replace existing blanks in the filename with a character or characters you specify or you can delete all blanks from each filename For example files named Pic nic jpg and Slap stick jpg might be changed to Picnic jpg and Slapstick jpg or Pic nic jpg and Slap stick jpg Add Prefix lets you enter text to add to the beginning of the filename For example if you enter night_ then the file Sunrise gif is renamed night_Sunrise gif when it is batch processed Add Suffix lets you enter text to add to the end of the filename before the file extension For example if you enter day then the file Sunset gif is renamed Sunset_day gif when it is batch processed Note For each changed filename you can do any combination of Replace Replace blanks Add Prefix and Add Suffix For example you could replace Temp with Party remove all blanks and add a prefix and a suffix all at the same time 3 Click Next to continue the batch process For information on completing the batch process see Batch processing on page 334 Perfor
311. ibed in the first bulleted option in this step For more information see Using Live Filters on page 147 3 Drag the Amount slider to set the amount of noise Values range from 1 to 400 An increase in amount results in an image with more randomly placed pixels 4 Select the Color check box to apply color noise Leave the check box unchecked to apply monochrome noise only 5 Click OK ba Chapter 5 Working with Vector Objects A vector object is a computer graphic whose shape is defined by a path The shape of a vector path is determined by points that are plotted along the path A vector object s stroke color follows the path Its fill occupies the area inside the path The stroke and fill typically determine how the graphic looks when published in print or on the web Fireworks CS3 has many tools for drawing and editing vector objects using a variety of techniques With the basic shape tools you can quickly draw straight lines circles and ellipses squares and rectangles stars and any equilateral polygon with 3 to 360 sides You can draw freeform vector paths with the Vector Path and Pen tools Using the Pen tool you can draw complex shapes with smooth curves and straight lines by plotting points one by one Fireworks offers several methods for editing the vector objects you have drawn You can change an object s shape by moving adding or deleting points You can use point handles to change the shape of adjacent path segments
312. ibrary panel and URLs are stored in the URL panel By default all three panels are organized in the Assets panel group The Styles panel contains a set of predefined Fireworks styles to select from In addition if you have created a combi nation of strokes fills filters and text attributes and want to reuse it you can save the attributes as a style Rather than rebuilding attributes each time you can simply save them in the Styles panel and then apply that combination of attributes to other objects Fireworks has three types of symbols graphic animation and button Each has unique characteristics for its specific use You can create new symbols as well as duplicate import and edit symbols using the Library panel For infor mation on specific features built into the animation and button symbols see Creating Animations on page 238 and Creating Buttons and Pop up Menus on page 220 A URL or Uniform Resource Locator is an address of a specific page or file on the Internet If you are using the same URL many times you can add it to the URL panel You can organize and group your URLs in URL libraries This chapter contains the following topics e Using styles on page 183 e Using symbols on page 186 e Working with URLs on page 196 Using styles You can save and reapply a set of predefined fill stroke filter and text attributes by creating a style When you apply a style to an object that object tak
313. ic configuration files This lets you customize features in Fireworks such as styles keyboard shortcuts commands and so forth without affecting the configu ration of Fireworks for other users Fireworks creates a different set of configuration files for each user Fireworks also installs master configuration files in the Fireworks application folder Master configuration files contain the default settings for Fireworks and affect all users Some configuration files such as Fireworks plug ins are located only in the Fireworks application folder On some systems only system administrators have access to the master configuration files in the Fireworks appli cation folder ADOBE FIREWORKS CS3 351 User Guide Note Windows systems often hide certain files and folders by default Ensure that your Folder View options are set to display all files and folders On some systems you may also need to click Show Files once you get to a folder in order to see its contents For information about viewing all files and folders see Windows Help About user configuration files Fireworks user configuration files are stored in the Adobe Fireworks 9 folder in your user specific Application Data folder Windows or Application Support folder Macintosh The location of this folder varies depending on what operating system you use and on whether your system is a multiuser system or a single user system For information on locating this folder see your operati
314. ication Support Adobe Fonts For information about installing fonts see the Read Me html file on the installation DVD DVD content The installation or content DVD included with your product contains additional resources for use with your software The Goodies folder contains product specific files such as templates images presets actions plug ins and effects along with subfolders for Fonts and Stock Photography The Documentation folder contains a PDF version of the Help technical information and other documents such as specimen sheets reference guides and specialized feature information Adobe Exchange For more free content visit www adobe com go exchange an online community where users download and share thousands of free actions extensions plug ins and other content for use with Adobe products Bridge Home Bridge Home a new destination in Adobe Bridge CS3 provides up to date information on all your Adobe Creative Suite 3 software in one convenient location Start Adobe Bridge then click the Bridge Home icon at the top of the favorites panel to access the latest tips news and resources for your Creative Suite tools Note Bridge Home may not be available in all languages Adobe Design Center Adobe Design Center offers articles inspiration and instruction from industry experts top designers and Adobe publishing partners New content is added monthly You can find hundreds of tutorials for design products and learn
315. ick Windows or Control click Macintosh and choose Optimize in Fireworks from the pop up menu N If prompted specify whether to open a Fireworks source file for the placed image ADOBE FIREWORKS CS3 301 User Guide A dialog box opens Although the title bar doesn t display this name this is actually the Fireworks Export Preview dialog box W Optimize picO1 jpg Options File Animation JPEG Preview Saved Settings Quality 80 0 Millions si z sl Format JPEG 49 26K 7 sec 56kbps EEG Eatin Natty 4 Quality 80 Smoothing No Smoothing M Progressive V Sharpen Color Edges R 003 G 004 B 008 030408 Remove Unused Colors Te HQ oo w BIB E slal 3 Make the desired edits in the Export Preview dialog box e To edit optimization settings click the Options tab e To edit the size and area of the exported image click the File tab and change the desired settings If you change image dimensions in Fireworks you ll also need to reset the size of the image in the Property inspector when you return to Dreamweaver e To edit animation settings for the image click the Animation tab and change the desired settings For more information about the options available on these tabs see Fireworks Help 4 When you have finished editing the image click Update The image is exported using the new optimization settings the GIF or JPEG placed in Dreamweaver is updated and the P
316. ile varies depending on your operating system e In Windows preferences are in your user specific Fireworks configuration folder For more information about locating this folder see About user configuration files on page 351 e On the Macintosh preferences are in the Library Preferences folder in your user folder For information about locating your Macintosh user folder see Apple Help Note On the Macintosh most Fireworks user specific configuration files are stored in a different folder your user specific Application Support folder The Fireworks 9 Preferences file is an exception About reinstalling Fireworks When you uninstall or reinstall Fireworks your user specific configuration files are left untouched on most systems If you want to reinstall Fireworks using the default settings you must manually delete your user specific configu ration files before reinstalling the application ADOBE FIREWORKS CS3 352 User Guide Note Your user specific configuration files are located in your user specific Application Data Windows or Application Support Macintosh folder For information on locating this folder see About user configuration files on page 351 You will be asked during the uninstall process if you want to remove preferences and user specific configuration files Doing so will remove these files for all users on the system Viewing package contents Macintosh only On the Macintosh Fireworks is installe
317. ills and gradient fills e Slice objects and image maps e Many text formatting options e Guides grids and canvas color e Bitmap images e Some strokes Working with Director You can combine the power of Fireworks and Director Fireworks lets you export graphics and interactive content into Director The export process preserves the behaviors and slices of the graphic You can safely export sliced images with rollovers and even layered images This lets Director users take advantage of the optimization and graphic design tools of Fireworks without compromising quality Note The Director HTML style does not support pop up menu code Placing Fireworks files in Director Director can import flattened images from Fireworks such as JPEG and GIF images It can also import 32 bit PNG images with transparency For sliced interactive and animated content Director can import Fireworks HTML For information on exporting flattened Fireworks images such as JPEG and GIF images see Fireworks Help Exporting graphics with transparency In Director transparency can be achieved by importing 32 bit PNG images You can export 32 bit PNG graphics with transparency from Fireworks To export a 32 bit PNG image with transparency 1 In Fireworks choose Window gt Optimize change the export file format to PNG 32 and set Matte to transparent 2 Select File gt Export 3 Select Images Only from the Save as Type pop up menu Name the file then clic
318. import 4 Click Open The graphics and code from the Fireworks HTML file are imported Note If you are importing a Fireworks animation drag keyframes in Director to offset the timing of each imported layer as necessary Editing Director cast members in Fireworks Using launch and edit integration you can make changes to Director cast members by starting Fireworks to edit them from inside Director You can also start Fireworks from inside Director to optimize cast members To start Fireworks to edit a Director cast member 1 In Director right click Windows or Control click Macintosh the graphic in the Cast window 2 Select Launch External Editor from the pop up menu Note If Fireworks does not start as your external image editor in Director choose File gt Preferences gt Editors and set Fireworks as the external editor for bitmap graphic file types The file opens in Fireworks and the Document window indicates that you are editing a file from Director Al image1 png 100 DER A Original Preview 2Up E 4 Up Editing from Director 215x125 100 3 Make changes to the image and click Done when finished Fireworks exports the new graphic to Director Optimizing cast members in Director You can start Fireworks from Director to preview optimization changes for selected cast members To start Fireworks to preview optimization settings for a Director cast member 1 In Director select the cast member in the Ca
319. in the Property inspector might display javascript Deleting this text is harmless You can type over it to enter a URL if desired and the behavior will still be intact when you return to Dreamweaver When you work with Roundtrip HTML from Dreamweaver Fireworks supports server side file formats such as CEM and PHP ADOBE FIREWORKS CS3 300 User Guide Dreamweaver supports all behaviors applied in Fireworks including those required for rollovers and buttons The following Dreamweaver behaviors are supported by Fireworks during a launch and edit session e Simple Rollover Swap Image Swap Image Restore e Set Text of Status Bar e Set Nav Bar Image e Pop up Menu Note Fireworks does not support nonnative behaviors including server side behaviors Note Dreamweaver library items do not support pop up menus Optimizing Fireworks images and animations placed in Dreamweaver You can start Fireworks from Dreamweaver to make quick export changes such as re sampling or changing the file type to placed Fireworks images and animations Fireworks lets you make changes to optimization settings animation settings and the size and area of the exported image To change optimization settings for a Fireworks image placed in Dreamweaver 1 In Dreamweaver select the desired image and do one of the following Select Commands gt Optimize Image in Fireworks Click the Optimize in Fireworks button in the Property inspector Right cl
320. in dragging to draw the selection 2 Without releasing the mouse button hold down the Spacebar 3 Drag the marquee to another location on the canvas 4 While still holding down the mouse button release the Spacebar 5 Continue dragging to draw the selection Adding or subtracting pixels After drawing a selection marquee with any bitmap selection tool you can add to the selection with the same tool or another bitmap selection tool To add to an existing pixel selection 1 Select any bitmap selection tool 2 Hold down Shift and draw additional selection marquees 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 ADOBE FIREWORKS CS3 48 User Guide To subtract pixels from a selection Hold down Alt Windows or Option Macintosh and use a bitmap selection tool to select the pixel area to be punched out Creating a marquee from intersecting marquees You can select pixels in an existing marquee by drawing a marquee that overlaps the original To select a pixel area defined by the intersection of two marquees 1 Hold down Alt Shift Windows or Option Shift Macintosh while creating a new marquee selection that overlaps the original marquee 2 Release the mouse button Only the pixels in the intersection area of the two marquees are selected Using thumbnails and modifier keys to modify pixel selections With a bitmap selected y
321. in place of any images that fail to download In some browsers it may also appear as a tool tip when the pointer passes over the image This is also an aid for vision impaired web users e Select Multiple Nav Bar HTML Pages when exporting a navigation bar that links several pages together When this option is chosen Fireworks exports additional pages for each button in the navigation bar e UTF 8 Encoding is turned on by default in Fireworks which allows your exported document to display characters from multiple character sets If you want to turn off this option clear the UTF 8 Encoding box For more infor mation about UTF 8 encoding see Exporting files with and without UTF 8 encoding on page 286 5 Click Set Defaults to save these settings as your global default settings 6 Click OK Using the Quick Export button Lae The Quick Export button located in the upper right corner of the Document window offers easy access to common options for exporting Fireworks files to other applications Using the Quick Export button you can export to a variety of formats including Dreamweaver and GoLive All the export options available through the Quick Export button are also available elsewhere in Fireworks such as the Export dialog box and the Edit menu The Quick Export button provides a shortcut to the most common export options For more information on exporting to each format see Using Fireworks with Other Applications on page 291
322. in which a Photoshop plug in is applied as a Live Filter whoever opens it can view the filter only on a computer in which the plug in is installed Built in Fireworks filters however are saved with the Fireworks file To install Photoshop plug ins 1 In the Property inspector click the Add Filters button then select Options gt Locate Plugins 2 Navigate to the folder where the Photoshop plug ins are installed and click OK 3 Restart Fireworks to load the plug ins Note If you move the plug ins to a different folder repeat the above steps or select File gt Preferences and click the Folders tab to change the path to the plug ins Then restart Fireworks To apply a Photoshop plug in to a selected object as a Live Filter In the Property inspector click the Add Live Filters button then select a filter from the Options submenu Applying Photoshop layer effects You can also apply some Photoshop layer effects using the Add Filters pop up menu in the Property inspector If you import a PSD file you can also edit layer effects that already exist in the file To apply Photoshop layer effects 1 In the Property inspector click the Add Filters button then select Photoshop Live Effects 2 Select one of the effects in the left hand pane and then edit the settings in the right hand pane You can select multiple effects at once 3 Click OK to apply the layer effects About applying filters to grouped objects When you apply a filter to
323. ing 114 keyboard shortcuts 349 changing current set 349 custom shortcut sets 349 deleting custom shortcut sets 350 reference sheet for current set 350 secondary shortcuts 349 UTF 8 encoded reference sheets 350 keyboard shortcuts in Help 3 Knife tool 103 L Launch and Edit preferences 304 Launch options 347 layer effects Photoshop 151 layers activating 159 adding and removing 160 disabling sharing across frames 245 duplicating 160 expanding or collapsing 161 exporting 279 locking 162 moving 161 naming 161 organizing 161 removing from master pages 157 sharing 163 sharing across frames for animation 244 viewing 161 Layers panel 27 159 naming slices 213 viewing slices 203 leading 115 letter spacing See kerning Levels feature for adjusting tonal range 72 Library panel 186 inserting button symbols 223 lightening bitmap areas 66 images 68 line spacing 115 See also leading lines 84 See also strokes linking to master pages 157 Live Filters applying 153 applying to objects 148 creating 152 editing 152 enabling or disabling 148 Fill Color 182 in buttons 222 Photoshop plug ins 150 removing 152 renaming 153 reordering 152 LiveDocs 2 locked files 289 304 locking layers 162 L shape tool 87 M macros 343 marquees 44 adjusting 47 contracting 49 deleting 52 deselecting 47 expanding 49 moving 47 removing 47 saving and restoring 51 selecting area around 50 selecting pixels by inte
324. ing a fill You can easily remove fill attributes from selected objects To remove the fill from a selected object do one of the following e Select None from the Fill Options pop up menu in the Property inspector or from the Fill Options pop up menu in the Fill Options pop up window Click any Fill Color box and click the Transparent button This option removes only solid fills Adding texture to strokes and fills You can add three dimensional effects to both strokes and fills by adding texture Fireworks provides several textures or you can use external textures Adding texture to a stroke Textures modify the brightness of the stroke but not the hue and give strokes a less mechanical more organic look as if you were applying paint to a textured surface Textures are more effective when used with wide strokes You can add a texture to any stroke Fireworks ships with several textures to select from such as Chiffon Oilslick and Sandpaper Use the Stroke options in the Property inspector or the Stroke Options pop up window to add a texture to a brush stroke To add texture to the stroke of a selected object 1 Do one of the following to open the Stroke Texture pop up menu Click the Stroke Texture pop up menu in the Property inspector Click the Stroke Color box in the Tools panel click Stroke Options and click the Texture pop up menu 2 Do one of the following ADOBE FIREWORKS CS3 146 User Guide e Select a text
325. ing fonts the Missing Fonts dialog box includes the font you chose Checking spelling You can use the Check Spelling command in the Text menu to check spelling for specific text blocks or all text in a document To spell check text 1 Select one or more text blocks If no text blocks are selected Fireworks checks spelling in the entire document 2 Select Text gt Check Spelling 3 Ifyou have not checked spelling before in Fireworks you see a dialog box asking you to select a dictionary Click OK to close the dialog box Select a language from the Dictionary list and click OK If you don t select a language Fireworks prompts you to select a language dictionary every time you spell check a document Note The Adobe tlx option is always selected at the top of the Dictionary list For more information about this option see Customizing spell checking on page 124 4 The Check Spelling dialog box opens For each word found select the appropriate option Add to Personal adds the unrecognized word to your personal dictionary Ignore skips the current instance of the unrecognized word Ignore All skips all instances of the unrecognized word during the current spell check session The next time you spell check Fireworks once again identifies the word as unrecognized Change replaces the current instance of the unrecognized word with text that you type in the Change To box or with the selection in the Suggestions list Change All
326. ing too many polygon slices can increase web browser processing time To create a rectangular slice or polygon slice from a vector object or path 1 Select a vector path 2 Select Edit gt Insert gt Insert Rectangular Slice or Insert Polygon Slice depending on the shape you want ADOBE FIREWORKS CS3 203 User Guide Viewing and displaying slices and slice guides You can control the visibility of slices and other web objects in your document using the Layers panel and the Tools panel When you turn slice visibility off for the whole document slice guides are hidden too Using the Property inspector you can organize slices by assigning a unique color to each slice object You can also change the color of slice guides through the View menu Viewing slices in the Layers panel The Web Layer displays all the web objects in the document so that you can select and view each one To view and select a slice in the Layers panel 1 Select Window gt Layers to open the Layers panel 2 Expand the Web Layer by clicking the Plus button Windows or triangle Macintosh The Web Layer displays the full list of web objects currently in your document 3 Click a slice name to select it The slice is highlighted in the Web Layer and is selected on the canvas Showing and hiding slices Hiding a slice renders the slice invisible in the Fireworks PNG file You can turn off all or some web objects Because slices are web objects they are listed b
327. ing with configuration files on page 350 2 Open the desired script file in a text editor and modify the JavaScript code 3 Save and close the script To edit selected actions from the History panel using JavaScript 1 In Fireworks select a range of steps in the History panel Click the Copy Steps to Clipboard button at the bottom of the History panel Create a new document in a text editing application Modify the steps as desired 2 3 4 Paste the steps into the new text document 5 6 Save and close the script 7 Copy the script to the Commands folder on your hard disk Note The exact location of this folder varies from system to system and depends on whether you want the command to be available just to your user profile or to all users Commands folders are located in the Configuration folder in the Fireworks application folder and also in your user specific Fireworks configuration folder For more information see Working with configuration files on page 350 Commands saved directly into the Commands folder as well as those saved in the History panel appear in the Commands menu as soon as you save them so restarting Fireworks is not necessary However commands saved in the Command Panels folder will be available in the Window menu only after you restart Fireworks Flash SWF movies used as Fireworks panels Some panels in Fireworks such as the Align panel are actually Flash SWF movies If you know JavaScript
328. insert instances of button symbols into a document from the Library panel ADOBE FIREWORKS CS3 224 User Guide To place instances of a button symbol in a document 1 Open the Library panel 2 Drag the button symbol to the document To place additional instances of a button symbol in a document do one of the following e Select an instance and then select Edit gt Clone to place another instance directly in front of the selected instance The new instance becomes the selected object Cloning button instances is convenient when you create an aligned nav bar because you can move the clones in one direction with the arrow keys while maintaining alignment with the other position coordinate e Drag another button instance from the Library panel to the document Alt drag Windows or Option drag Macintosh an instance on the canvas to create another button instance Copy an instance and then paste additional instances Importing button symbols Button symbols in the Library panel are document specific If you have an open document with symbols in the Library panel and then create a new document the Library panel in the new document will be empty However there are several ways to import button symbols into a document s Library panel either from a library or from another Fireworks document To import button symbols into a document s Library panel do one of the following Drag and drop a button instance from another Fireworks d
329. instance properties can be modified in the Property inspector without affecting the symbol or other instances Blending mode ADOBE FIREWORKS CS3 194 User Guide e Opacity e Filters e Width and height e xand y coordinates Note Button instances have additional properties that can be edited without affecting the symbol For more information about editing button instances see Editing button symbols on page 224 To edit instance properties without affecting the symbol or breaking the symbol link 1 Select the instance 2 Modify instance properties in the Property inspector Importing and exporting symbols The Library panel stores animation graphic and button symbols that you create in the current document It also stores symbols that you import into the current document The Library panel is specific to the current document but you can use the symbols from one library in more than one Fireworks document by importing and exporting cutting and pasting or dragging and dropping You can import symbols from other libraries including libraries containing symbols prepared in Fireworks and libraries containing symbols that you or someone else previously exported Conversely if you have created symbols that you would like to reuse or share you can export your own symbol libraries When you export a symbol library it is exported as a PNG file Importing symbols Fireworks has symbol libraries in the Common Library panel from
330. int rollovers 208 applying to a slice 208 attaching to hotspots 218 creating 208 display modes switching 34 Distort tool 57 distorting objects 57 dithering 267 with websafe colors 132 docking panels 28 in panel group 29 document tabs 31 documents creating new 15 default mode 84 multiple views 33 opening 16 recent 16 saving 22 switching 31 tiling views 33 Dodge tool 66 Doughnut tool 87 Down button state 221 downloads updates plug ins and tryouts 7 downsampling 36 drag and drop behaviors blue line 207 definition 207 deleting 208 209 dragging and dropping 18 drawing 87 arrows 86 bending adjacent segments 99 beveled rectangles 86 chamfer rectangles 87 changing adjacent segments 99 connector lines 87 converting straight paths to curved 97 distorting objects 57 doughnuts 87 ellipses 84 lines 84 L shapes 87 pie charts 87 polygons 85 87 rectangles 84 rounded rectangles 85 87 selecting a point 98 spirals 87 splitting paths 104 stars 85 drawing area See canvas Dreamweaver behaviors 206 299 editing Adobe Fireworks images in 297 exporting to 288 296 files 292 libraries 296 making Adobe Fireworks the default image editor 302 placeholders 292 Dreamweaver and Adobe Fireworks integration Design Notes 303 editing Adobe Fireworks animations 301 external editor preference 303 Launch and Edit preferences 304 launching and editing Adobe Fireworks images 298 launching and editing Ado
331. ion select it from the pop up menu 4 Ifyou want to invert the restored selection select the Invert box 5 Ifthere is no active marquee selection in the current document then New selection will be enabled in the Operation section of the Restore Selection dialog box If there is an active marquee selection in the current document then all of the following options will be enabled in the Operation section e Replace selection replaces the active selection in the active document with the one specified in the Selection box Add to selection adds the active selection to the one specified in the Document and Selection boxes ADOBE FIREWORKS CS3 52 User Guide e Subtract from selection subtracts the active selection from the one specified in the Document and Selection boxes e Intersect with selection intersects the active selection with the one specified in the Document and Selection boxes 6 Select an option in the Operation section and then click OK Repeat this process for each of the marquee selections that you want to restore Deleting marquee selections You can delete a marquee selection that you have previously named and saved Note This feature is enabled only if an open document contains at least one saved selection To delete a marquee selection 1 Choose Select gt Delete Bitmap Selection to open the Delete Selection dialog box 2 The Document box displays the name of the active document contai
332. ion bars on page 228 e Creating pop up menus on page 229 Creating button symbols Buttons are navigation elements for a web page Buttons created in the Button Editor have the following character istics e You can make almost any graphic or text object into a button e You can create a button from scratch convert an existing object into a button or import already created buttons e A button is a special type of symbol You can drag instances of it from the symbol library into your document This allows you to change the graphical appearance of a single button and automatically update the appearance of all button instances in a nav bar For more information on symbols see Using symbols on page 186 e You can edit the text URL and target for one button instance without affecting other instances of the same button and without breaking the symbol instance relationship A button instance is encapsulated When you drag the button instance in the document Fireworks moves all the components and states associated with it so there is no need for multiframe editing e A button is easy to edit Double click the instance on the canvas and you can change it in the Button Editor or the Property inspector e Like other symbols buttons have a registration point The registration point is a center point that helps you align text and the different button states while in the Button Editor ADOBE FIREWORKS CS3 221 User Guide A
333. ion to perform on the current selection Scale Resize or Rotate 3 Select Constrain Proportions to maintain horizontal and vertical proportions when scaling or resizing a selection 4 Select Scale Attributes to transform the fill stroke and effects of the object along with the object itself 5 Deselect Scale Attributes to transform the path only 6 Type numeric values to transform the selection then click OK Viewing transformation information in the Info panel The Info panel lets you view numerical transformation information for the currently selected object The infor mation updates as you edit the object e For scaling and free transformations the Info panel shows the width W and height H of the original object before transformation and the percentage of increase or decrease in width and height during the transformation e For skewing and distorting the Info panel shows the skew angle in one degree increments and the X and Y pointer coordinates during the transformation To view transformation information as you transform a selection Select Window gt Info ADOBE FIREWORKS CS3 58 User Guide Organizing objects When working with multiple objects in a single document you can use several techniques to organize the document e You can group individual objects to treat them as one or protect each object s relationship to the others in the group e You can arrange objects behind or in front of other objects The way
334. ionals You can use the Video Workshop to learn about any Creative Suite 3 product you re interested in Many videos show you how to use products together ADOBE FIREWORKS CS3 5 User Guide When you start the Video Workshop you choose exactly the products and topics you want to learn You can see details about each video to help focus your learning path Community of presenters With this release we invited the Adobe community to share their expertise and insights Adobe and Lynda com present tutorials tips and tricks from leading designers and developers such as Michael Ninness Katrin Eismann and Chris Georgenes You can see and hear Adobe experts such as Lynn Grillo Greg Rewis and Russell Brown In all over 30 product experts share their knowledge Tutorials and source files The Video Workshop includes training for novices and experienced users You ll also find videos on new features and key techniques Each video covers a single subject and typically runs about 3 5 minutes Most videos come with an illustrated tutorial and source files so you can print out detailed steps and try the tutorial on your own Using Adobe Video Workshop You can access Adobe Video Workshop using the DVD included with your Creative Suite 3 product It s also available online at www adobe com go learn_videotutorials Adobe will regularly add new videos to the online Video Workshop so check in to see what s new Fireworks CS3 videos Adobe Video Wo
335. ip shape Tolerance determines the range of colors to replace 0 replaces only the To color 255 replaces all colors similar to the To color Strength determines how much of the Change color is replaced Colorize replaces the Change color with the To color Deselect Colorize to tint the Change color with the To color leaving some of the Change color intact 6 Drag the tool over the color you want to replace To replace one color with another by selecting a color on the image 1 Select the Replace Color tool from its pop up menu 2 Inthe From box in the Property inspector click Image 3 Click the To color box in the Property inspector to select the color probe then select a color from the pop up menu 4 Set the other stroke attributes in the Property inspector Size sets the size of the brush tip Shape sets a round or square brush tip shape Tolerance determines the range of colors to replace 0 replaces only the To color 255 replaces all colors similar to the To color Strength determines how much of the Change color is replaced Colorize replaces the From color with the To color Deselect Colorize to tint the From color with the To color leaving some of the From color intact 5 Using the tool click down on a section of the bitmap image that contains the color you want to replace Without lifting the tool continue to brush across the image with it The color that you clicked down on when you initiated the brushing action
336. iple attributes In this case the color is websafe is locked and has been edited If you edit the document the color table may no longer show all the colors in the document When this occurs you should rebuild the color table A Rebuild button appears at the bottom of the Optimize panel when you need to rebuild the color table To rebuild the color table to reflect edits in the document Click Rebuild at the bottom of the Optimize panel When the table is rebuilt the Rebuild button disappears and the actual number of colors used in the image is displayed in its place To select a color Click the color in the Optimize panel color table To select multiple colors Control click Windows or Command click Macintosh the colors ADOBE FIREWORKS CS3 269 User Guide To select a range of colors 1 Click a color 2 Hold Shift and click the last color in the range you want to select To preview all the pixels in the document that contain a specific color 1 Click the Preview button at the upper left of the Document window 2 Click and hold on a swatch in the Optimize panel color table The pixels that contain the selected swatch temporarily change to another highlight color until you release the mouse button Note When previewing pixels in the document using the 2 Up or 4 Up view select a view other than the Original view Locking colors in a palette You can lock individual colors so that you cannot rem
337. iption Target frame overrides any target frame that exists as a symbol level property e Additional behaviors assigned to an instance using the Behaviors panel The Show Down State on Load option in the Property inspector for instances in a nav bar Note You need not select the Show Down State on Load option for every button instance in a nav bar The Document Specific section of the HTML Setup dialog box contains an option called Export Multiple Files When you select this option and then export a nav bar Fireworks CS3 exports each HTML page with the corresponding buttons Down state For more information see Setting HTML export options on page 287 Properties L Button Text Link E Home io v Alt w 50 xX 41 al 100 v Normal x Target x H Y s2 Show down state on load A To edit instance level properties of a single button symbol instance 1 Select the button instance in the work area 2 Set the properties in the Property inspector 225 ADOBE FIREWORKS CS3 226 User Guide Setting interactive button properties With Fireworks you can control the interactive elements of a button including the active area URL target and alternative alt image description Modifying the active area of a button symbol The active area of a button symbol triggers interactivity when a user moves the pointer over it or clicks it in a web browser The active area of a button is a symb
338. irectly above the topmost object in the topmost layer Ifthe Web Layer or an object on the Web Layer is selected the pasted object is placed in front of or stacked above all other objects on the bottommost layer Note The Web Layer is a special layer that contains all web objects It always remains at the top of the Layers panel For more information about layers see Pages Layers Masking and Blending on page 155 Resampling pasted objects When you paste a bitmap with a resolution that differs from that of the destination Fireworks document Fireworks asks whether you want the bitmap to be resampled Resampling adds pixels to or subtracts pixels from a resized bitmap to match the appearance of the original bitmap as closely as possible Resampling a bitmap to a higher resolution typically causes little loss of quality Resampling to a lower resolution however always causes data loss and usually a drop in quality To resample a bitmap object by pasting 1 Copy the bitmap to the Clipboard in Fireworks or another program ADOBE FIREWORKS CS3 20 User Guide 2 Select Edit gt Paste in Fireworks If the bitmap image on the Clipboard has a different resolution than the current document does you see a dialog box asking whether or not to resample 3 Select one of the following Resample maintains the original width and height of the pasted bitmap adding or subtracting pixels as necessary Don t Resample maintains
339. istribute the widths or heights of three or more selected objects Select Modify gt Align gt Distribute Widths or Modify gt Align gt Distribute Heights About arranging objects among layers The Layers panel offers another dimension of organizational control You can move selected objects from one layer to another by dragging the object thumbnail or the blue selection indicator in the Layers panel to another layer For more information see Organizing layers on page 161 Chapter 4 Working with Bitmaps Bitmaps are graphics composed of small colored squares called pixels which combine like the tiles of a mosaic to create an image Examples of bitmap graphics include photographs scanned images and graphics created from paint programs They are sometimes referred to as raster images Fireworks CS3 combines the functionality of photo editing vector drawing and painting applications You can create bitmap images by drawing and painting with bitmap tools by converting vector objects to bitmap images or by opening or importing images Fireworks has a powerful set of Live Filters for tone and color adjustment as well as a number of ways to retouch your bitmap images including cropping feathering and duplicating or cloning images In addition Fireworks has a set of image retouching tools Blur Sharpen Dodge Burn and Smudge For information on methods for selecting and transforming images and pixel areas see Selecting an
340. k Save Exporting layered and sliced content to Director By exporting Fireworks slices to Director you can export sliced and interactive content such as buttons and rollover images By exporting layers to Director you can export layered Fireworks content such as animations To export Fireworks files to Director 1 In Fireworks choose File gt Export Note Alternatively you can click the Quick Export button and choose Source as Layers or Source as Slices from the Director pop up menu Select Source as Layers if you are exporting an animation and Source as Slices if you are exporting interactive content such as buttons 2 In the Export dialog box type a filename and choose a destination folder 317 ADOBE FIREWORKS CS3 318 User Guide 3 Select Director from the Save As pop up menu 4 Select an option from the Source pop up menu Fireworks Layers exports each layer in the document Select this option if you are exporting layered content or an animation Fireworks Slices exports the slices in the document Select this option if you are exporting sliced or interactive content such as rollover images and buttons 5 Select Trim Images to automatically crop the exported images to fit the objects on each frame 6 Select Put Images in Subfolder to choose a folder for images 7 Click Save Importing Fireworks files into Director In Director you can import flattened images that you have exported from Fireworks such as JPEG GIF and
341. k an alignment button in the Property inspector Indenting text You can indent the first line of a paragraph using the Property inspector Indention is measured in pixels Paragraph indent option in the Property inspector If the Property inspector is minimized click the expander arrow in the lower right corner to see all properties To indent the first line of selected paragraphs gt In the Property inspector drag the Paragraph Indent pop up slider or enter a value in the text box Setting paragraph spacing You can specify the amount of spacing you want before and after paragraphs using the Property inspector Paragraph spacing is measured in pixels Paragraph spacing options in the Property inspector If the Property inspector is minimized click the expander arrow in the lower right corner to see all properties To set the space that precedes selected paragraphs In the Property inspector drag the Space Preceding Paragraph pop up slider or enter a value in the text box To set the space after selected paragraphs In the Property inspector drag the Space After Paragraph pop up slider or enter a value in the text box ADOBE FIREWORKS CS3 118 User Guide Smoothing text edges To smooth out a text edge you anti alias it This makes the edges of the text blend into the background so that the text is cleaner and more readable when it is large Original text after smoothing You use the Property inspector to set an
342. l The original font data is stored in the PNG file so that if the file is on a system that does have the fonts you can choose to use those fonts or maintain appearance Use Flat Composite Image imports the Photoshop file as a flattened image without layers 4 Click OK Using Photoshop filters and plug ins Fireworks lets you use many Photoshop and other third party filters and plug ins You can use plug ins in either the Live Filters window or the Filters menu Note Plug ins and filters for Photoshop 5 5 and earlier versions are supported Photoshop 6 or later plug ins and filters are not compatible with Fireworks CS3 For more information on the Live Filters window and the Filters menu see Fireworks Help To use Photoshop and other third party filters and plug ins using the Preferences dialog box 1 Select Edit gt Preferences Note On Mac OS X choose Fireworks gt Preferences 2 Click the Folders tab Windows or choose Folders from the pop up menu Macintosh 3 Select the Photoshop Plug ins option The Select a Folder Windows or Choose a Folder Macintosh dialog box opens Note If the dialog box doesn t automatically open click Browse 4 Navigate to the folder where the Photoshop or other filters and plug ins are installed and click Select Windows or Choose Macintosh 5 Click OK to close the Preferences dialog box 6 Restart Fireworks to load the filters and plug ins To use Photoshop and other third party
343. l by dragging and dropping or copying and pasting do one of the following Drag a symbol instance from the document containing the symbol into the destination document e Copy a symbol instance in the document containing the symbol then paste it into the destination document The symbol is imported into the Library panel of the destination document and retains a relationship to the symbol in the original document For more information see Updating exported symbols and instances in multiple documents on page 195 Exporting symbols If you have created or imported symbols in a Fireworks document and want to save them to reuse in other documents or share with others you can use the Library panel Options menu to export them in a PNG file You can then import the symbols by navigating to the PNG file that contains the symbols using the Edit gt Libraries submenu For more information see Importing symbols on page 194 To export symbols 1 Select Export Symbols from the Library panel Options menu 2 Select the symbols to export and click Export 3 Navigate to a folder type a name for the symbol file and click Save Fireworks saves the symbols in a single PNG file Updating exported symbols and instances in multiple documents Imported symbols maintain their link to their original symbol document You can edit the original symbol document and then update the target documents to reflect the edits To update all exported symbol
344. l file However image data can sometimes be discarded with little or no noticeable difference in quality Original image quality setting of 50 quality setting of 20 To control how much quality is lost when compressing a JPEG file Adjust the quality with the Quality slider pop up menu in the Optimize panel A high percentage setting maintains image quality but compresses less producing larger files A low percentage setting yields a small file but produces a lower quality image Selectively compressing areas of a JPEG Selective JPEG compression lets you compress different areas of a JPEG at different levels Areas of particular interest in an image can be compressed at a higher quality level Areas of lesser significance such as backgrounds can be compressed at a lower quality level reducing the overall size of the image while retaining the quality of the more important areas 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 To compress selected areas of a JPEG 1 In Original view select an area of the graphic for compression using one of the Marquee tools 2 Select Modify gt Selective JPEG gt Save Selection as JPEG Mask 3 Select JPEG from the Export File Format pop up menu in the Optimize panel if it s not already selected 4 Click the Edit Selective Quality Options button in the Optimize panel The Se
345. l palette ACT file or a GIF file Adjusting the color palette during optimization affects the colors in the image You can optimize and customize color palettes using the color table in the Optimize panel To select a color palette Select an option from the Indexed Palette pop up menu in the Optimize panel To import a custom palette 1 Do one of the following e Select Load Palette from the Optimize panel Options menu e Select Custom from the Optimize panel Indexed Palette pop up menu 2 Navigate to an ACT or GIF palette file and click Open The colors from the ACT or GIF file are added to the color table in the Optimize panel Note Windows users must select GIF Files from the Files of Type pop up menu to see files with a gif extension in the Open dialog box Setting the color depth Color depth is the number of colors in the graphic You can make your files smaller by reducing the number of colors they use Reducing color depth discards some colors in the image beginning with those used least Pixels containing discarded colors convert to the closest color remaining in the palette This can reduce the quality of the image Note The color depth option is available only for GIFs and other 8 bit graphic file formats ADOBE FIREWORKS CS3 267 User Guide To select a color depth Select an option from the Colors pop up menu in the Optimize panel or type a value in the text box You can select from 2 to 256 colors Note T
346. l selection or select any vector or web tool the floating selection becomes part of the current bitmap object ADOBE FIREWORKS CS3 53 User Guide Inserting a new bitmap by cutting or copying You can insert a new bitmap based on a pixel selection into the current layer of a document by cutting or copying the selected pixels To insert a new bitmap by cutting and pasting a pixel selection 1 Select an area of pixels using a pixel selection tool 2 Select Edit gt Insert gt Bitmap via Cut A new bitmap object based on the pixel selection is created in the current layer and the selected pixels are removed from the original bitmap object In the Layers panel a thumbnail of the new bitmap appears in the current layer above the object from which it was cut To insert a new bitmap by copying and pasting a pixel selection 1 Select an area of pixels using a pixel selection tool 2 Select Edit gt Insert gt Bitmap via Copy A new bitmap object based on the pixel selection is created in the current layer and the selected pixels remain in the original bitmap object In the Layers panel a thumbnail of the new bitmap appears in the current layer above the object from which it was copied Editing selected objects Fireworks gives you a number of ways to edit selected objects you can move objects on the canvas or from appli cation to application you can replicate objects with the Clone and Duplicate commands or you can remove objects
347. lar area of an image m The Marquee tool selects a rectangular area of pixels in an image The Oval Marquee tool selects an elliptical area of pixels in an image P The Lasso tool selects a freeform area of pixels in an image H The Polygon Lasso tool selects a straight edged freeform area of pixels in an image q The Magic Wand tool selects an area of similarly colored pixels in an image The pixel selection tools draw selection marquees that define the area of selected pixels After you draw the selection marquee you can manipulate it by moving it adding to it or basing another selection on it You can edit the pixels inside the selection apply filters to the pixels or erase pixels without affecting the pixels beyond the selection You can also create a floating selection of pixels that you can edit move cut or copy Bitmap selection tool options When you select the Marquee Oval Marquee Lasso Polygon Lasso or Magic Wand tool the Property inspector displays the options for that tool Selecting the Live marquee box allows you to change Edge settings and the amount of feather if Feather is specified as the Edge setting for your bitmap selection while youre using the Marquee Oval Marquee Lasso Polygon Lasso and Magic Wand tool The Property inspector also displays three Edge options for these tools Hard creates a marquee selection with a defined edge Anti alias prevents jagged edges in the
348. lating pages The Frames panel displays the frames in the current file and includes options for creating animations The History panel lists commands you have recently used so that you can quickly undo and redo them In addition you can select multiple actions and then save and reuse them as commands For more information see Using the History panel to undo and repeat multiple actions on page 40 The Auto Shapes panel contains Auto Shapes that are not displayed in the Tools panel The Styles panel lets you store and reuse combinations of object characteristics or select a stock style The Library panel contains graphic symbols button symbols and animation symbols You can easily drag instances of these symbols from the Library panel to your document You can make global changes to all instances by modifying only the symbol For more information see Using Styles Symbols and URLs on page 183 The URL panel lets you create libraries containing frequently used URLs ADOBE FIREWORKS CS3 28 User Guide The Color Mixer panel lets you create new colors to add to the current document s color palette or to apply to selected objects The Swatches panel manages the current document s color palette The Info panel provides information about the dimensions of selected objects and the exact coordinates of the pointer as you move it across the canvas The Behaviors panel manages behaviors which determine what hotspots and slices do in
349. layer to Fireworks or share your player with other users When publishing and packaging a Fireworks album player note the following e Publish both the SWF and the HTML file with either htm or html extension The HTML file is optional e Change the extension of the SWF to something other than swf Note On Macintosh simply renaming the SWF file in Finder may not work unless you have set the show file exten sions option You may have to rename it using the file s properties dialog under Name e Extension e Create an XML file in the same folder as the SWF file that has the following format ADOBE FIREWORKS CS3 255 User Guide lt xml version 1 0 encoding utf 8 gt lt FWACPlayer gt lt Player name Player Black Flash preview player_black jpg launch index html gt lt File src player_black fap dst player_black swf gt lt File src player_black html dst index html gt lt Info src player_black info gt lt Player gt lt Player name Player White Flash preview player_white jpg launch index html gt lt File src player_white fap dst player_white swf gt lt File src player_white html dst index html gt lt Info src player_white info gt lt Player gt lt FWACPlayer gt e If you have multiple versions of the same basic player you can list them in the XML as shown above e For each Player node list the source and destina
350. laying options for web dither fills 4 Click the Transparent option The color boxes on the right side of the pop up window change to reflect your selection and the object on the canvas becomes semi opaque or translucent 5 Click outside the pop up window to close it 6 Export the object as a GIF or PNG file with Index Transparency or Alpha Channel Transparency set For more information on exporting files with transparency see Making areas transparent on page 271 ADOBE FIREWORKS CS3 133 User Guide When you view the graphic in a web browser the web page background shows through every other pixel of the trans parent web dither fill creating the appearance of transparency Note Not all browsers support PNG files Color management using the Color Palette panel The Color Palette panel gives you the ability to create and swap color palettes export custom ACT color swatches explore various color schemes and access commonly used controls for choosing colors The palette contains three tabs Selector Mixers and Blender percent gt 0 509F16 il Yellow Black Nearest WebSafe s6 F 38 F eso000 iE To open the Color Palette panel Select Window gt Others gt Color Palette To find the nearest web safe color for any color value 1 Click the fill color box on the Selector tab of the Color Palette panel to make it active 2 Use the eyedropper pointer to click anywhere inside any Firework
351. ld draw straight line segments with the Pen tool Whether the path is open or closed the fill defines the hotspot area To create a hotspot by tracing one or more selected objects 1 Select Edit gt Insert gt Hotspot If you selected more than one object a message appears asking whether you want to create a single rectangular hotspot covering all objects or multiple hotspots one for each object 2 Click Single or Multiple The Web Layer displays the new hotspot or hotspots Editing hotspots Hotspots are web objects and like many other objects they can be edited using the Pointer Subselection and Transform tools For more information on using these tools to edit a web object see Using tools to edit slice objects on page 205 You can change a hotspot s position and size numerically using the Property inspector or the Info panel For more information about changing an object s dimensions numerically see Transforming objects numerically on page 57 For more information about changing an objects position numerically see Editing selected objects on page 53 You can also change a hotspot s shape using the Property inspector To convert a selected hotspot to a rectangle circle or polygon hotspot In the Property inspector select Rectangle Circle or Polygon from the Hotspot Shape pop up menu Preparing hotspots for export You can use the Property inspector to assign URLs alternate text targets and custom n
352. lders and start Fireworks to create desired graphics in the dimen sions specified by the Dreamweaver placeholder images Once in Fireworks you can change the image dimensions if desired Placing Fireworks images in Dreamweaver files There are several ways to place Fireworks graphics into a Dreamweaver document You can place a finished Fireworks graphic using the Files panel or the Insert menu in Dreamweaver or you can create a new Fireworks document from a Dreamweaver image placeholder You can insert any graphic file format supported by Fireworks and Dreamweaver directly into a Dreamweaver document using the Dreamweaver Files panel or Insert menu You must export the images from Fireworks first For more information on exporting images see Fireworks Help To insert a Fireworks image into a Dreamweaver document using the Files panel 1 Export your image from Fireworks to the local site folder as defined in Dreamweaver 2 Open the Dreamweaver document and make sure you are in Design view 3 Drag the image from the Files panel into the Dreamweaver document To insert a Fireworks image into a Dreamweaver document using the Insert menu 1 Place the insertion point where you want the image to appear in the Dreamweaver Document window 2 Do one of the following Select Insert gt Image Click the Images Image button in the Common category of the Insert bar 3 Navigate to the image you exported from Fireworks and click Open If the
353. lection using the Marquee tool Lasso tool or Magic Wand tool For more information see Selecting pixels on page 44 2 Do one of the following Select Edit gt Cut then Edit gt Paste Select Edit gt Copy then Edit gt Paste Select Edit gt Insert gt Bitmap via Copy to copy the current selection into a new bitmap Select Edit gt Insert gt Bitmap via Cut to cut the current selection for placement into a new bitmap The selection appears in the Layers panel as an object on the current layer Note You can also Right click Windows or Control click Macintosh a pixel marquee selection and select a cut or copy option from the context menu For more information about the Bitmap via Cut and Bitmap via Copy options see Inserting a new bitmap by cutting or copying on page 53 To convert selected vector objects to a bitmap image do one of the following e Select Modify gt Flatten Selection e Select Flatten Selection from the Layers panel Options menu A vector to bitmap conversion is irreversible except when Edit gt Undo or undoing actions in the History panel is still an option Bitmap images cannot be converted to vector objects ADOBE FIREWORKS CS3 63 User Guide Accessing photo editing tools To make it easy for you to get started editing photos as quickly as possible Fireworks has assembled the most commonly used tools for photo editing all in one place The Image Editing panel contains the fo
354. lective JPEG Settings dialog box opens 5 Select Enable Selective Quality and enter a value in the text box Entering a low value compresses the Selective JPEG area more than the rest of the image Entering a high value compresses the Selective JPEG area less than the rest of the image 6 Change the Overlay Color for the Selective JPEG area if desired This does not affect the output ADOBE FIREWORKS CS3 274 User Guide 7 Select Preserve Text Quality All text items will automatically be exported at a higher level regardless of the Selective Quality value 8 Select Preserve Button Quality All button symbols will automatically be exported at a higher level 9 Click OK To modify the selective JPEG compression area 1 Select Modify gt Selective JPEG gt Restore JPEG Mask as Selection The selection is highlighted 2 Use the Marquee tool or another selection tool to make changes to the size of the area 3 Select Modify gt Selective JPEG gt Save Selection as JPEG Mask 4 Change selective quality settings in the Optimize panel if desired Note To undo a selection select Modify gt Selective JPEG gt Remove JPEG Mask Blurring or sharpening detail You can set Smoothing in the Optimize panel to help decrease the file size of JPEGs Smoothing blurs hard edges which do not compress well in JPEGs Higher numbers produce more blurring in the exported or saved JPEG typically creating smaller files A smoothing setting of about 3 r
355. les For example you can create a banner ad based on several existing graphics by opening each graphic and placing it in a separate frame in the same document To open multiple files as an animation 1 Select File gt Open 2 Shift click to select multiple files 3 Select Open as Animation and click OK Fireworks opens the files in a new single document placing each file in a separate frame in the order in which you selected it 250 Chapter 14 Creating Slideshows Create Slideshow is a built in Flash command that gives you the ability to generate Flash or HTML SPRY based slideshows by simply selecting a folder with images and adding slideshow options This chapter contains the following topics e The Create Slideshow command on page 250 e Building or editing a slideshow on page 250 e Slideshow properties on page 252 e Creating a custom Fireworks album player on page 254 The Create Slideshow command Use the Create Slideshow command to carry out the following tasks Export full sized and thumbnail images at the same time e Automatically generate an XML file with multiple albums or export an XML file without a slideshow by specifying a directory of images Export full sized and thumbnail images without creating a slideshow e Edit an existing slideshow s properties and add multiple albums to a slideshow e Add additional images to an existing album e View and rotate images in the Create Slideshow
356. lider to set the strength of the blur effect Values range from 1 to 100 An increase in amount results in a stronger blur effect 4 Drag the Quality slider to set the smoothness of the blur effect Values range from 1 to 100 An increase in quality results in a blur effect with fewer repetitions of the original image 5 Click OK Changing a bitmap into a line drawing The Find Edges filter changes your bitmaps to look like line drawings by identifying the color transitions in the images and changing them to lines ADOBE FIREWORKS CS3 81 User Guide Original after applying Find Edges To apply the Find Edges filter to a selected area do one of the following In the Property inspector click the Add Live Filters button and then select Other gt Find Edges from the Filters pop up menu e Select Filters gt Other gt Find Edges Note Applying a filter from the Filters menu is destructive that is it cannot be undone except when Edit gt Undo is an option To maintain the ability to adjust turn off or remove this filter apply it as a Live Filter as described in the first bulleted option in this step For more information see Using Live Filters on page 147 Converting an image to a transparency You can use the Convert to Alpha filter to convert an object or text into a transparency based upon the transparency of the image To apply the Convert to Alpha filter to a selected area do one of the following In the
357. llowing Drag the pixel selection using the Subselection tool e Alt drag Windows or Option drag Macintosh the object using the Pointer tool To clone a selection Select Edit gt Clone The clone of the selection is stacked precisely in front of the original and becomes the selected object Note To move a selected clone away from the original with pixel by pixel precision use the arrow keys or Shift arrow keys This is a convenient way to maintain a specific distance between clones or maintain the vertical or horizontal alignment of the clones To delete selected objects do one of the following e Press Delete or Backspace e Select Edit gt Clear e Select Edit gt Cut Right click Windows or Control click Macintosh the object and select Edit gt Cut from the context menu To cancel or deselect a selection do one of the following e Choose Select gt Deselect e Click anywhere in the image outside of the selected area if you are using the Marquee Oval Marquee or Lasso tool e Press Escape Transforming and distorting selected objects and selections You can transform a selected object or group or a pixel selection using the Scale Skew and Distort tools and menu commands E Scale enlarges or reduces an object e Skew slants an object along a specified axis Distort moves the sides or corners of an object in the direction you drag a selection handle while the tool 57 es ee l is ac
358. llowing tools Red eye Removal Crop Rotate Blur Sharpen Dodge and Burn The Image Editing panel also contains Transform Tools Scale Skew Distort Free Rotate e Transform Commands Numeric Transform Rotate options Flip Horizontal Flip Vertical Remove Transforma tions e Adjust Color Auto Levels Brightness Contrast Curves Hue Saturation Invert Levels Convert to Grayscale Convert to Sepia Tone Filters Blur Blur More Sharpen Sharpen More Unsharp Mask Add Noise Convert to Alpha Find Edges e View Options Show Hide Rulers Show Hide Grid Snap Dontt Snap to Grid Edit Grid Show Hide Guides Snap Don t Snap to Guides Lock Unlock Guides Edit Guides The tools contained in the Image Editing panel are the same tools you ll find in other places in Fireworks such as in the toolbox and on the Modify gt Transform menu The Image Editing panel which you can open by selecting Window gt Image Editing simply presents some of the most commonly used tools all in one panel for your conve nience For detailed information on how to use these tools and options please see Retouching bitmaps on page 66 Adjusting bitmap color and tone on page 71 Blurring and sharpening bitmaps on page 79 and Adding noise to an image on page 83 Drawing painting and editing bitmap objects The Bitmap section of the Tools panel contains tools for selecting drawing painting and editing pixels in a bitmap ima
359. low the wizard as it guides you through the settings for exporting your HTML and images When prompted specify a desired folder as the destination for the exported images This must be the location where your HTML file will reside Note If you plan to paste the HTML code into Dreamweaver it does not matter where you export the images as long as they reside in the same Dreamweaver site as the HTML file into which you will paste your code The wizard exports the images to the specified destination and copies the HTML code to the Clipboard ADOBE FIREWORKS CS3 284 User Guide To copy Fireworks HTML using the Export dialog box 1 Select File gt Export Note Optionally if you are exporting to Dreamweaver click the Quick Export button and select Copy HTML to Clipboard from the Dreamweaver submenu 2 In the Export dialog box specify a folder as the destination for the exported images This must be the same location where your HTML file will reside Note If you plan to paste the HTML code into Dreamweaver it does not matter where you export the images as long as they reside in the same Dreamweaver site as the HTML file into which you will paste your code 3 Select HTML and Images from the Export pop up menu 4 Select Copy to Clipboard from the HTML pop up menu 5 If your document contains slices select Export Slices from the Slices pop up menu 6 Click the Options button select your HTML editor from the HTML Setup dialog box and
360. lters applied to a selected object Drag a filter to the desired position in the list in the Property inspector Note Filters at the top of the list are applied before the filters at the bottom Removing Live Filters You can easily remove individual filters or all filters from an object To remove a single filter applied to a selected object Select the filter you want to remove from the Filters list in the Property inspector then click the Delete Live Filters button To remove all filters from a selected object gt In the Property inspector click the Add Live Filters button then select None from the pop up menu Creating custom Live Filters You can save a particular combination of settings for Live Filters by creating a custom Live Filter All custom Live Filters appear in the Add Filters pop up menu in the Property inspector and in the Styles panel Custom Live Filters are actually styles with all property options deselected except for the Filter option e You can create a custom Live Filter using the Property inspector or Styles panel e You can apply a custom Live Filter to selected objects from the Add Filters pop up menu or the Styles panel e You can rename or delete a custom Live Filter using the Styles panel ADOBE FIREWORKS CS3 153 User Guide To create a custom Live Filter using the Property inspector 1 Apply Live Filter settings to selected objects For more information see Applying Live Filters on pa
361. ly the 8 bit file types such as GIF PNG 8 TIFF 8 BMP 8 and PICT 8 offer a significant amount of optimization control Note JPEG files are an exception For more on JPEG optimization controls see Optimizing JPEGs on page 272 Fireworks optimization settings are similar for all 8 bit graphic file formats For web file formats such as GIF and PNG you can also specify the amount of compression you want on the graphic You can optimize 8 bit file types by adjusting their color palettes Fewer colors in the palette means fewer colors in the image resulting in a smaller file size The drawback to reducing colors is that it can also diminish image quality As you experiment with different optimization settings you can use the 2 Up and 4 Up buttons to test and compare a graphic s appearance and estimated file size For more information on using the document preview buttons see Previewing and comparing optimization settings on page 263 Note All file types mentioned above except PICT which is only supported on the Macintosh version of Fireworks can be saved in their original formats in Fireworks CS3 from within the Save As dialog box This behavior differs from that in previous versions of Fireworks For more information see Saving documents in other formats on page 23 ADOBE FIREWORKS CS3 266 User Guide Choosing a color palette GIFs and other 8 bit image formats contain a color palette A color palette is a list
362. matically allowClick whether or not to allow users to click the images clickAction which action to take when an image is clicked open it in new window new tab or let the player decide Album node title title of this particular album description description for the album path name of folder that contains the images for this album thumbnails are exported in the thumbs folder inside path hasThumb has thumbnail thumbSrc album thumbnail image hasBg has background image bgSre album background image bgScale scaling method for album background interval slideshow interval in seconds for this album useTransition use transition when switching between images transType slideshow transition for this album transTime transition time firstImage zero based index of first image to display dispSequence order in which to display images sequential or random Slide node src name of image file for this slide caption caption associated with this slide width width of slide height height of slide thumbWidth width of slide thumbnail thumbHeight height of slide thumbnail ee Chapter 15 Optimizing and Exporting The ultimate goal in web graphic design is to create great looking images that download as fast as possible To do that you must select a file format with the best compression for your image while maintaining as much quality as possible This balancing act is optimization finding the right mix of color co
363. mber This is the property name that appears in the Symbol Properties panel 12 In the Value field type in a default value for the property This will be the default value when an instance of the symbol is first placed into a document 13 Add additional elements as needed 14 Click Save to save the selected options and create a JavaScript file 15 Select Reload from the Common Library panel Options menu to reload the new symbol After the JavaScript file has been created you can create a new instance of the symbol by dragging it to the canvas and then you can update its attributes by changing them in the Symbol Properties panel v Symbol Properties S Hame Value fillColor OOffff E textChars 3 s Editing symbol properties using the Symbol Properties panel Note After creating the JavaScript file errors will be generated by the Symbol Properties panel if you remove or rename an object within the symbol that is referenced by the script To save an existing symbol as a rich symbol 1 Select a symbol in the Library panel 2 Select Save to Common Library from the Library panel Options menu 3 Create a JavaScript file to control the symbol properties Creating editable symbol parameters using JavaScript When a symbol is saved as a rich symbol a PNG file is saved by default in the lt user settings gt Application Data Adobe Fireworks 9 Common Library Custom Symbols folder Windows or lt user name gt Ap
364. menu 4 Select a percentage of opacity for the fill color and press Enter Adjusting hue and saturation You can use the Hue Saturation feature to adjust the shade of a color its hue the intensity of a color its saturation or the lightness of a color in an image Original after adjusting the saturation To adjust the hue or saturation 1 Select the image 2 Do one of the following to open the Hue Saturation dialog box In the Property inspector click the Add Live Filters button and then select Adjust Color gt Hue Saturation from the Filters pop up menu e Select Filters gt Adjust Color gt Hue Saturation Note Applying a filter from the Filters menu is destructive that is it cannot be undone except when Edit gt Undo is an option To maintain the ability to adjust turn off or remove this filter apply it as a Live Filter as described in the first bulleted option in this step For more information see Using Live Filters on page 147 3 Drag the Hue slider to adjust the color of the image Values range from 180 to 180 4 Drag the Saturation slider to adjust the purity of the colors Values range from 100 to 100 5 Drag the Lightness slider to adjust the lightness of the colors Values range from 100 to 100 6 Click OK ADOBE FIREWORKS CS3 78 User Guide To change an RGB image to a two tone image or to add color to a grayscale image Select Colorize in the Hue Saturation dialog box Note Whe
365. menu that you can preview in a browser Creating a basic pop up menu The Content tab of the Pop up Menu Editor is where you determine the basic structure and content of the pop up menu The current or default settings for the options on the other Pop up Menu Editor tabs are applied to the menu when you create it To create a simple pop up menu 1 Select a hotspot or slice that will be the trigger area for the pop up menu 2 Do one of the following to open the Pop up Menu Editor e Select Modify gt Pop up Menu gt Add Pop up Menu e Click the behavior handle in the middle of the slice and select Add Pop up Menu 3 Click the Content tab if it is not already visible 4 Click the Add Menu button to add an empty menu item You can add delete and edit cells at any time 5 Double click each cell and enter or select the appropriate information Text specifies the text for the menu item Link determines the URL of the menu item You can enter a custom link or select one from the Link pop up menu if any are available If you ve entered URLs for other web objects in the document those URLs appear in the Link pop up menu Target designates the target for the URL You can enter a custom target or select a preset one from the Target pop up menu Entering content on the last line in the window adds an empty line below it To navigate from an active cell to another cell and continue entering information press the Tab key to move betw
366. menu at the bottom of the panel The canvas color is made transparent in the preview 3 Elro select a different color click the Select Transparency Color button The pointer changes to an eyedropper 4 Do one of the following to select the color to make transparent e Click a color swatch in the Optimize panel color table ADOBE FIREWORKS CS3 272 User Guide e Click a color in the document To add or remove transparent colors 1 Click the Preview 2 Up or 4 Up button at the upper left of the Document window In 2 Up or 4 Up view click a view other than the original Note You can add or remove transparent colors in Original view but wont be able to see your results until you display a preview 2 Inthe Optimize panel click the Add Color to Transparency or Remove Color from Transparency button 3 Do one of the following to select a color to add or remove from transparency e Click a color swatch in the Optimize panel color table e Click a color in the preview To make an image background transparent 1 Click the Preview 2 Up or 4 Up button at the upper left of the Document window In 2 Up or 4 Up view click a view other than the original 2 Select GIF as the file format in the Optimize panel and select Index Transparency from the Transparency pop up menu The canvas color is made transparent in the preview and the graphic is ready for export Interlacing Downloading gradually When viewed in a web browser interlace
367. ming commands with a batch process You can perform JavaScript commands on files using the Commands option in the Batch Process dialog box To set command options for batch processed files 1 Click the Plus button Windows or the triangle Macintosh beside the Commands option in the Batch Options list to view the available commands 2 Select a command and click Add to add it to the Include in Batch list Note These commands cannot be edited 3 Click Next to continue the batch process ADOBE FIREWORKS CS3 340 User Guide For information on completing the batch process see Batch processing on page 334 For more information on creating commands see Scripting with the History panel on page 342 Note Some commands do not work during a batch process Select commands that work within the document without requiring any object to be selected Specifying the batch process output location After you select all batch options in the Batch Process dialog box you must select options for saving your files You can save backup copies of the original files from a batch process Backup copies of files are placed in an Original Files subfolder in the same folder as each original file Batch Process Saving Files Batch Output Same Location as Original File Custom Location Backups Overwrite Existing Backups O Incremental Backups Cancel To back up batch processed files 1 Select a location for the batch output
368. mmand in Flash to import graphics and animations that were exported from Fireworks To import Fireworks graphics and animations into Flash 1 Create a new document in Flash Note If you are importing a Fireworks graphic into an existing Flash file create a new layer in Flash 2 Select File gt Import and locate the graphic or animation file 3 Click Open to import the file ADOBE FIREWORKS CS3 312 User Guide Using Fireworks to edit graphics imported into Flash With launch and edit integration you can use Fireworks to make changes to a graphic that you previously imported into Flash You can edit any imported graphic this way even if the graphic wasn t exported from Fireworks Note Fireworks native PNG files imported into Flash are an exception unless you imported the PNG file as a flattened bitmap image If the graphic was exported from Fireworks and you saved the original PNG file along with the exported graphic file you can open the original PNG file in Fireworks from inside Flash to make your changes When you return to Flash both the PNG file and the graphic in Flash are updated 1 In Flash right click Windows or Control click Macintosh the graphic file in the Library panel 2 Select Edit with Fireworks from the pop up menu Note If Edit with Fireworks does not appear in the pop up menu choose Edit With and locate your Fireworks application 3 Click Yes in the Find Source box if you want to locate the original P
369. mmands menu in Fireworks You can even create a SWF movie and use it as a Fireworks panel accessible from the Window menu The Align panel in Fireworks is an example of a Flash movie imported as a panel SWF movies that are used as commands are stored in the Commands folder on your hard disk and SWF movies that are used as panels are stored in the Command Panels folder Note The exact location of these folders varies from system to system and depends on whether you want the command or panel to be available just to your user profile or to all users Commands and Command Panels folders are located in the Configuration folder in the Fireworks application folder and also in your user specific Fireworks configuration folder For more information see Working with configuration files on page 350 For more detailed instructions about creating commands or panels from Flash SWF movies see Extending Fireworks Managing commands You can rename or delete any commands that appear in the Commands menu You can rename or delete any commands that you create using the Manage Saved Commands option in Fireworks You must use the Extension Manager for other commands and extensions that were installed with Fireworks or that you downloaded and installed from the Adobe Exchange website To rename a custom command that you created 1 Select Commands gt Manage Saved Commands 2 Select the command 3 Click Rename enter a new name and click OK To
370. mpression and quality Exporting graphics from Fireworks is a two step process First you prepare a document or individual sliced graphics for export by selecting optimization settings and comparing previews to determine an acceptable balance between quality and file size e Second you export or in some cases save the document or individual sliced graphics using export settings suitable for their destination on the web or elsewhere If you are new to optimizing and exporting web graphics you can use the Export Wizard The wizard guides you through the export process and suggests settings It also displays the Image Preview where you can optimize a document as part of the export process If you are comfortable with the tasks of optimizing and exporting graphics you ll want to use the other tools available in Fireworks for optimizing and exporting For optimizing you use the Optimize panel and the preview buttons in the Document window They offer you greater control over the optimization process For exporting you use the Export dialog box or the Quick Export button In some cases you can simply save the graphic without exporting For more information see Saving documents in other formats on page 23 The Quick Export button makes exporting graphics for use in other applications easy by automatically setting the appropriate options in the Export dialog box for you If you use Fireworks with other applications the Quick Export bu
371. n Hold down Shift while clicking additional objects with the Pointer Subselection or Select Behind tool To deselect an object while leaving other objects selected Hold down Shift while clicking the selected object To select everything on every layer in the document Choose Select gt Select All Note Select All does not select hidden objects To deselect all selected objects Choose Select gt Deselect Note You must deselect the Single Layer Editing preference to select all visible objects on all layers in a document When you select the Single Layer Editing preference only objects on the current layer are selected For more infor mation see Organizing layers on page 161 To hide the path selection feedback of a selected object Select View gt Hide Edges Note You can use the Layers panel or the Property inspector to identify the selected object when the outline and points are hidden To hide selected objects Select View gt Hide Selection Note Hidden objects are not exported This does not apply to slice and hotspot web objects on the Web Layer ADOBE FIREWORKS CS3 44 User Guide To show all objects Select View gt Show All Note To hide objects whether they are selected or not you can click or drag along the Eye column in the Layers panel Selecting pixels You can edit pixels over an entire canvas or select one of the selection tools to constrain your editing to a particu
372. n Blur applies a weighted average of blur to each pixel to produce a hazy effect Motion Blur creates the appearance that the image is moving Radial Blur creates the appearance that the image is spinning Zoom Blur creates the appearance that the image is moving toward or away from the viewer Note Applying filters from the Filters menu is destructive that is it cannot be undone except when Edit gt Undo is an option To maintain the ability to adjust turn off or remove a filter apply it as a Live Filter as described in the first bulleted option in each of the following procedures For more information see Using Live Filters on page 147 To blur an image 1 Select the image 2 Do one of the following In the Property inspector click the Add Live Filters button and then select Blur gt Blur or Blur More from the Filters pop up menu e Select Filters gt Blur gt Blur or Blur More To blur an image using Gaussian Blur 1 Select the image 2 Do one of the following to open the Gaussian Blur dialog box In the Property inspector click the Add Live Filters button and then select Blur gt Gaussian Blur from the Filters pop up menu e Select Filters gt Blur gt Gaussian Blur 3 Drag the Blur Radius slider to set the strength of the blur effect Values range from 0 1 to 250 An increase in radius results in a stronger blur effect 4 Click OK To blur an image using Motion Blur 1 Select the image 2 Do
373. n Dreamweaver 1 In Dreamweaver save the desired HTML document to a location inside your Dreamweaver site folder 2 Position the insertion point in the desired position in your document and do one of the following Select Insert gt Image Objects gt Image Placeholder Click the Images Image pop up menu in the Common category of the Insert bar and choose Image Placeholder The Image Placeholder dialog box appears Image Placeholder Name OK Width 32 Height 32 Calor I Alternate Text 3 Enter the name dimensions color and alternate text for the image placeholder and click OK An image placeholder is inserted into the Dreamweaver document imagel 159 x 31 4 Do one of the following Select the image placeholder and click Create in the Property inspector Control double click Windows or Command double click Macintosh the image placeholder Right click Windows or Control click Macintosh and choose Create Image in Fireworks ADOBE FIREWORKS CS3 294 User Guide Fireworks is opened with an empty canvas that is exactly the same size as the placeholder image The Document window indicates that you are editing an image from Dreamweaver Ai image1 100 DER p Original Preview 2 Up E 4 Up Editing from Dreamweaver 159x31 100 5 Create an image in Fireworks and click Done when you are finished 6 Specify a name and location for the source PNG file in the Save As
374. n a bitmap object is used as a mask either the brightness of its pixels or its trans parency affects the visibility of other objects Masking objects using the Paste as Mask command Using the Paste as Mask command you can create masks by masking an object or group of objects with another object Paste as Mask creates either a vector mask or a bitmap mask When you use a vector object as the mask Paste as Mask creates a vector mask that crops or clips masked objects using the path outline of the vector object When you use a bitmap image as the mask Paste as Mask creates a bitmap mask that affects the visibility of masked objects using the grayscale color values of the bitmap object To create a mask with the Paste as Mask command 1 Select the object you want to use as the mask Shift click to select multiple objects Note If you use multiple objects as the mask Fireworks always creates a vector mask even if both objects are bitmaps 2 Position the selection so that it overlaps the object or group of objects to be masked The object or objects you want to use as the mask can be either in front of or behind the objects or group to be masked 3 Select Edit gt Cut to cut the object or objects you want to use as the mask 4 Select the object or group you want to mask ADOBE FIREWORKS CS3 167 User Guide If you are masking multiple objects the objects must be grouped For more information about grouping objects see Groupin
375. n dele TREE ERa 258 Optimizing in the workspace ok iano a E A DAE a ene e ene n bea 261 Exporting from Fireworks acsik ecities auld daa eate eee acted E dacuis aaleeuieics DE 276 Sending a Fireworks document as an e mail attachment occ eee eee eens 289 Using the File Management button 6 cece cence nen cnet eee en ee eneneee 289 Chapter 16 Using Fireworks with Other Applications Working with Dreamweaver oe cence cent e een n ene teen ene n ene nenenes 292 Working With Flash lt cssSscsecebeteiacbeagieoiedi ad secetaded a ata pe PEATAS 305 Working with FreeHand actccks cece deieeus nha nies a a Sedu ghecdubeb bedseceetas 4 312 Working with Director ccccccceheseietesgids Ribena M eee be de aa sine ceadan See Ng ees eaeius 317 Working with HomeSite ssc ci s ces ceeicea eee ices davis ben ee dence code daie yaaa E 320 Working with Photoshop cerieisa ove coos eens de vie tated och ae hanya ean as 322 About working with Illustrator 6 ecccecece nner e nen ence eee n ence eeeenens 326 About working with GoLive oo ec cece enn ene n teen a n en eeeeee 327 About working with HTML editors 2 0 cece cece cern ence eee e nen eneneenene 327 About extending Fireworks a nseerr rirerire te ova dane Yoek eee awe Does be beat obe dine 328 AboutAdObeXMP aee sec tule ye ecGs Soon ns eee RSE E EARS Ee cin Od Hee VARS 328 About Adobe Bridge scsudescis unde cbs deans sates g Pe dave d dae ee bade EEA EEN 328 Flex integration for rich Internet application la
376. n of the Tools panel The Colors section of the Tools panel contains controls for activating the Stroke Color and Fill Color boxes which in turn determine whether the strokes or fills of selected objects are affected by color choices Also the Colors section has controls for quickly resetting colors to the default setting the stroke and fill color settings to None and swapping fill and stroke colors To make the Stroke Color or Fill Color box active gt In the Tools panel click the icon next to the Stroke Color or Fill Color box The active color box area appears as a depressed button in the Tools panel 126 ADOBE FIREWORKS CS3 127 User Guide Note The Paint Bucket tool fills pixel selections and vector objects with the color shown in the Fill Color box in the Tools panel Fill Options Color boxes in the Tools panel and the color pop up window To reset colors to the default Click the Default Colors button in the Tools panel or in the Color Mixer To remove the stroke and fill from selected objects using the No Stroke or Fill button 1 Click the No Stroke or Fill button in the Colors section of the Tools panel The active characteristic changes to a stroke or fill of None 2 To set the inactive characteristic to None as well click the No Stroke or Fill button again Note You can also set the fill or stroke of selected objects to None by clicking the Transparent button in any Fill Color or Stroke Color box pop
377. n see a thumbnail and name for each bitmap object under the layer on which it resides Although some bitmap applications consider each bitmap object a layer Fireworks organizes bitmap objects vector objects and text as separate objects that reside on layers For more information see Working with layers on page 159 To create a new bitmap object 1 Select the Brush or Pencil tool from the Bitmap section of the Tools panel 2 Paint or draw with the Brush or Pencil tool to create bitmap objects on the canvas A new bitmap object is added to the current layer in the Layers panel For more information on using the Pencil or Brush tools see Drawing painting and editing bitmap objects on page 63 You can create a new empty bitmap and then draw or paint pixels in the empty bitmap To create an empty bitmap object do one of the following Click the New Bitmap Image button in the Layers panel e Select Edit gt Insert gt Empty Bitmap e Draw a selection marquee starting in a blank area of the canvas and fill it For more information see Creating pixel selection marquees on page 45 An empty bitmap is added to the current layer in the Layers panel If the empty bitmap is deselected before any pixels have been drawn imported or otherwise placed on it the empty bitmap object automatically disappears from the Layers panel and the document To cut or copy pixels and paste them as a new bitmap object 1 Make a pixel se
378. n the Property inspector or Tools panel to open the pop up window The Edit Gradient pop up window opens with the current gradient in the color ramp and preview To add a new color or opacity swatch to the gradient do one of the following e To add a color swatch click the area below the gradient color ramp e To add an opacity swatch click the area above the gradient color ramp To remove a color or opacity swatch from the gradient Drag the swatch away from the Edit Gradient pop up window To set or change the color of a color swatch 1 Click the color swatch 2 Select a color from the pop up window To set or change the transparency of an opacity swatch 1 Click the opacity swatch 2 Do one of the following Drag the slider to the percentage of transparency where 0 is completely transparent and 100 is completely opaque e Enter a numeric value from 0 to 100 to set the opacity value Note The transparency checkerboard shows through the gradient in transparent areas 3 When you have finished editing the gradient press Enter or click outside the Edit Gradient pop up window The gradient fill appears in any selected objects and becomes the active fill To adjust the transition between colors in the fill Drag color swatches left or right Creating fills with the Gradient tool The Gradient tool is in the same tool group as the Paint Bucket tool This tool works much as the Paint Bucket tool does but it fills an object
379. n the fill using the Gradient tool To rotate the fill Drag the lines connecting the handles To adjust the fill width and skew Drag a square handle Setting hard edged anti aliased or feathered fill edges In Fireworks you can make the edge of a fill a regular hard line or soften the edge by anti aliasing or feathering it By default edges are anti aliased Anti aliasing smoothes jagged edges that may occur on rounded objects such as ellipses and circles by subtly blending the edge into the background Feathering however produces a noticeable blending on either side of the edge This softens the edge creating an effect similar to a glow To change the edge of a selected object 1 Do one of the following to display the Edge pop up menu e Click the Edge pop up menu in the Property inspector e Click the Fill Color box in the Tools panel click Fill Options and click the Edge pop up menu ADOBE FIREWORKS CS3 145 User Guide 2 Select an edge option Hard Edge Anti Alias or Feather 3 Fora feathered edge also select the number of pixels on each side of the edge that are to be feathered The default is 10 You can select from 0 to 100 The higher the level the more feathering occurs About saving a custom gradient fill To save the current gradient settings as a custom gradient for use across many documents you must create a style For more information see Creating and deleting styles on page 184 Remov
380. n the glow Drag the Softness slider to set the sharpness of the glow Drag the Offset slider to specify the distance of the glow from the object 3 When you finish click outside the window or press Enter to close it Applying filters and Photoshop plug ins as Live Filters You can apply all the built in filters and plug ins in the Add Filters pop up menu as Live Filters using the Property inspector Applying them as Live Filters ensures that you can edit or remove them from an object anytime Note The menu known as the Xtras menu in some previous versions of Fireworks is called the Filters menu in Fireworks 8 and later Fireworks Xtra extensions are now known as filters ADOBE FIREWORKS CS3 151 User Guide Plug ins from the Filters menu When you install an Adobe Photoshop plug in in Fireworks it is added to the Filters menu and to the Property inspector You should use the Filters menu to apply filters and Photoshop plug ins only when you are certain that you will not want to edit or remove the filter You can remove a filter only if the Undo command is available Installing Photoshop plug ins You can use the Property inspector to apply some Photoshop plug ins as Live Filters Not all Photoshop plug ins can be used as Live Filters You can also import Photoshop plug ins by pointing to a plug ins folder using the Preferences dialog box For more information see Folders preferences on page 348 When you share a Fireworks file
381. n tool in the Tools panel 2 Click a corner point on a selected path and drag away from it The handles extend curving the adjacent segments Note To edit the point s handles select the Subselection tool or press Control Windows or Command Mac while the Pen tool is active To convert a curve point to a corner point 1 Select the Pen tool in the Tools panel 2 Clicka curve point on a selected path h ADOBE FIREWORKS CS3 98 User Guide The handles retract and the adjacent segments straighten Selecting points The Subselection tool allows you to select multiple points Before selecting a point with the Subselection tool you must select the path using the Pointer or Subselection tool or by clicking its thumbnail in the Layers panel To select specific points on a selected path 1 e Select the Subselection tool 2 Do one of the following e Click a point or hold down Shift and click multiple points one by one Drag around the points to be selected To display a curve point s handles gt Click the point with the Subselection tool If either point nearest the clicked point is a curve point the near handle is also displayed Moving points and point handles You can change an object s shape by dragging its points and point handles with the Subselection tool To move a point gt Drag it with the Subselection tool in the Tools panel Fireworks redraws the path to reflect the points new position AD
382. n two ways Using an existing object to mask other objects This technique is similar to applying a vector mask Creating what s known as an empty mask Empty masks start out as either totally transparent or totally opaque A transparent or white mask shows the masked object in its entirety and an opaque or black mask hides the masked object completely You can use the bitmap tools to draw on or modify the mask object revealing or hiding the underlying masked objects When you create a bitmap mask the Property inspector displays information about how the mask is applied If you select a bitmap tool when a bitmap mask is selected the Property inspector displays the mask s properties and options for the selected tool simplifying the mask editing process ADOBE FIREWORKS CS3 166 User Guide 2 WB 10 v soft Rounded hd Bi 100 v Edge 100 liv Preserve transparency Texture Grain vio iv Mask Alpha channel O Grayscale wo Brush tool Bitmap mask properties in the Property inspector when a bitmap tool is selected By default most bitmap masks are applied using their grayscale appearance but you can also apply them using their alpha channel For more information see Changing the way masks are applied on page 176 Creating a mask from an existing object You can create a mask from an existing object When used as a mask a vector object s path outline can be used to clip or crop other objects Whe
383. n you select Colorize the value range of the Hue and Saturation sliders changes Hue changes to 0 to 360 Saturation changes to 0 to 100 Inverting an image s color values You can use Invert to change each color in an image to its inverse on the color wheel For example applying the filter to a red object R 255 G 0 B 0 changes the color to light blue R 0 G 255 B 255 A monochrome image after inverting A color image after inverting To invert colors 1 Select the image 2 Do one of the following In the Property inspector click the Add Live Filters button and then select Adjust Color gt Invert from the Filters pop up menu e Select Filters gt Adjust Color gt Invert Note Applying a filter from the Filters menu is destructive that is it cannot be undone except when Edit gt Undo is an option To maintain the ability to adjust turn off or remove this filter apply it as a Live Filter as described in the first bulleted option in this step For more information see Using Live Filters on page 147 ADOBE FIREWORKS CS3 79 User Guide Blurring and sharpening bitmaps Fireworks has a set of blurring and sharpening options that you can apply as Live Filters or as irreversible permanent filters Blurring an image Blurring softens the look of a bitmap image Fireworks has six blurring options Blur softens the focus of selected pixels Blur More blurs about three times as much as Blur Gaussia
384. nce 347 previewing documents in a browser 288 optimization settings 263 264 pixels containing specific color 269 strokes 138 with Export Preview 258 previewing documents on different platforms 34 progressive JPEGs 274 properties viewing in Property inspector 26 Property inspector 26 43 collapsing 27 docking 26 expanding 26 masking with 176 reducing 26 selection information 42 undocking 26 working with text in 109 PSD files 17 opening from Adobe Fireworks 17 Punch command 105 INDEX 361 Q Quick Export button 31 288 Quick Export pop up menu 289 R Radial Blur filter 80 raster images 61 read me file 2 rectangles 84 rounded corners 89 Red eye Removal tool 66 69 redoing using History panel 343 Redraw Path tool 102 redrawing paths 102 reducing points 105 registration of software 1 reinstalling Adobe Fireworks 352 relative URLs entering 196 removing effects 152 master page layers 157 parts of a path 105 renaming symbols 188 repeating actions 40 Replace color tool 66 69 70 replacing elements 330 replaying animations 246 resampling 19 bitmap objects 36 described 36 downsampling 36 resampling up 36 speed 347 vector objects 36 reshaping vector objects 102 Reveal All command 170 Reveal Selection command 170 RGB color model 130 rich graphic symbols 190 creating 190 viewing 190 rollovers 13 active area 226 converting to buttons 223 creating 220 defined 206 navigation bars 228 odd sh
385. ncedseagigesebtedss tas ances besa densedeneadaligasen tebe seolegedeanes 100 Chapter 6 Working with Text Entering text ais sephivesicedacens tees vaca Ba Rees Balen cee ee ha Denes Eea 109 FOrimattingitext 2x cetca ves fons See aged EE ay hed eae ata a ete cheer NER DESEA 112 Applying strokes fills and filters to text 2 eee cece cece cnet e eee e nee nn eee enees 119 Attaching text to aipath gossodet ea geen eek vine eee ahd deme et cies 120 Transforming text e a ehe deen cena sae EE ees eee eet oceans eee aed wes 121 Converting text to paths sesiacievices eae cece a a b abies olde veloute donb i 122 Importing text gcse 4 ocala lace cee ao ted tnd etd Mice es Whe ee aes 122 Checking spelling 2acessugereid shea AT A dete Ae EE Nee Ohne 124 Using the Text Editor cc necmide drink veces auics EEE EEN EREI Beene Aaa eens 125 Chapter 7 Applying Color Strokes and Fills Using the Colors section of the Tools panel eee cece eee e cnet eee ee en eeenee 126 Organizing swatch groups and color models 1 kee eee cece ence teen nen eee en ences 127 Using color boxes and color pop up WINdGOWS eee ec eect eee cnet eee eneeeneee 135 Working withstrokes Serrote eee a on eel E e a aes ce acd pica pasha iia 136 Working with fills ssc dis face ed das Aa a a AR cule aie gan debe dist aine gan Shad cectes 140 Applying gradient and pattern fills 0 cece ec eee ence eee e ene en ene e eens 141 Adding texture to stroke
386. nd XML To add options to the Quick Export pop up menu 1 Create your own JSF files and drop them into the Quick Export Menu folder on your hard disk Note The exact location of this folder varies depending on your operating system The Quick Export Menu folder is located in the English subfolder of the Fireworks application folder on Windows systems On Macintosh systems this folder is located in the Contents Resources English lproj folder in the Fireworks application package For more infor mation about application packages see Viewing package contents Macintosh only on page 352 2 Edit the Quick Export Menu xml file by including references to the new JSF files The next time you start Fireworks the new options you created are added to the Quick Export pop up menu For more information see Extending Fireworks Sending a Fireworks document as an e mail attachment You can easily send documents as e mail attachments from within Fireworks You can send a Fireworks PNG a compressed JPEG or a document using other file formats and optimization settings available in the Optimize panel To send a document as an e mail attachment using your default e mail client 1 Select File gt Send to E mail 2 Select one of the following options Fireworks PNG attaches the current PNG document to a new e mail message JPG Compressed attaches the current document to a new e mail message using the JPEG Better Quality optimi zation setting
387. ned on this button so that the corners will not be distorted when the button size is changed c Optional Lock the guides by checking the Lock 9 slice scaling guides check box to keep them from being moved accidentally 3 When you have finished placing the 9 slice scaling guides click Done in the symbol or button editor 4 Resize the symbol as needed by using the scale tool The button is scaled without distorting the shape of the corners ADOBE FIREWORKS CS3 190 User Guide Creating and using rich graphic symbols Rich symbols are a type of graphic symbol that can be intelligently scaled and given specific attributes using a JavaS cript JSF file These attributes can then be controlled by using the Symbol Properties panel Window gt Symbol Properties Rich symbols can be used to create a user interface or website design quickly by just dragging symbols on to the document and editing the parameters associated with them from the Symbol Properties panel To view or use a rich symbol 1 Select Common Library from the Window menu to open the Common Library panel 2 To use a symbol drag and drop the symbol from the Common Library panel to the Fireworks canvas A pre designed library of rich symbols has been included in Fireworks CS3 These may easily be customized to accommodate the look and feel of a particular website or user interface As with all symbols an instance of the rich symbol type can be edited by using the Pro
388. nel and set format specific options 2 Select File gt Export 3 Select a location to export the image file to For web graphics the best location is typically a folder within your local website 4 Enter a filename You do not need to enter a file extension Fireworks does that for you upon export using the file type you specified in your optimization settings For more information on optimizing see About optimizing on page 257 5 Select Images Only from the Export pop up menu 6 Click Export Exporting a sliced document By default when you export a sliced Fireworks document an HTML file and associated images are exported The exported HTML file can be viewed in a web browser or imported into other applications for further editing Note You can get Fireworks HTML into other applications using any of several techniques For more about HTML and the other ways to export Fireworks HTML see Exporting HTML on page 280 Before export be sure you have the appropriate HTML style selected in the HTML Setup dialog box For more infor mation see Setting HTML export options on page 287 To export a sliced Fireworks document Select File gt Export Navigate to the desired folder on your hard drive Select HTML and Images from the Export pop up menu 2 3 4 Type a filename in the File Name Windows or Save As Macintosh box 5 Select Export HTML File from the HTML pop up menu 6 Select Export Slices from
389. ng as rich graphic symbols 191 swapping 188 tweening 246 using 9 slice scaling 188 system color picker 131 system requirements 1 T text adjusting character width 118 alignment 116 attributes saving 119 checking spelling 124 color 113 direction of 116 entering 109 finding and replacing 332 formatting 112 indenting 117 orientation 116 overview 109 paragraph spacing 117 slices 201 Text Editor 125 text blocks auto sizing 111 fixed width 111 moving 111 naming 110 resizing 111 text paths attaching text to path 120 INDEX 363 changing shape of path 120 converting text to path 122 detaching from path 120 editing text attached to a path 120 moving starting point of text 121 placing text on a path 121 text styles bold 113 effects 119 fills 119 italic 113 strokes 119 underline 113 Text tool 109 texture adding to fills 146 adding to strokes 145 thumbnails in Layers panel 159 selecting masks with 173 TIFF file format choosing 265 TIFF saving 23 tonal range 72 adjusting with Curves 74 adjusting with Levels 72 tone adjusting 71 toolbars docking 31 showing and hiding 31 undocking 31 unlocking 31 tools Blur 66 Brush 64 Burn 66 changing options 25 changing stroke color 137 Colors section in Tools panel 126 Distort 57 Dodge 66 Eraser 65 Eyedropper 64 Lasso 44 Magic Wand 44 Marquee 44 Oval Marquee 44 Pencil 63 Pointer 41 44 Polygon Lasso 44 Red eye Removal 66 69 Replace Color 66 69 70 Rubber
390. ng import To import vector graphics from a FreeHand file 1 In Fireworks choose File gt Import to navigate to the desired FreeHand file and click Open The Vector File Options dialog box appears Vector File Options Seale 100 Width 516 Pixels Height 157 Pixels Resolution 72 Pixelsiinch Anti Alias V Paths Text Smooth File Conversion Open a page Page 1 Remember layers Fi Include Invisible Layers Fi Include Background Layers Render as images V Groups over 20 objects V Blends over 30 steps V Tiled fills over 30 objects 2 Select the desired options 3 Click OK Copying and pasting or dragging FreeHand graphics into Fireworks You can quickly place FreeHand graphics into Fireworks by copying and pasting or dragging them into your document To copy and paste a selected FreeHand graphic into Fireworks 1 In FreeHand choose Edit gt Copy ADOBE FIREWORKS CS3 314 User Guide 2 Create a new document in Fireworks or open an existing one 3 Select Edit gt Paste To drag a FreeHand graphic into Fireworks gt Drag the graphic from FreeHand into an open document in Fireworks In Windows if your FreeHand and Fireworks applications are maximized drag the FreeHand graphic to the y Fireworks button in the taskbar Hold it there for a few seconds and the Fireworks document window will be displayed Drag the cursor onto the canvas and release
391. ng on When a mask is selected the Property inspector lets you change the way the mask is applied If the Property inspector is minimized click the expander arrow to see all properties Vector masks are applied using their path outline by default The outline of the path or text is used as the mask Optionally you can show the mask s fill and stroke This produces the same result as using Paste Inside to create masks For more information see Creating a mask from an existing object on page 166 A vector mask applied using its path outline with Show Fill and Stroke enabled By applying a bitmap mask using its alpha channel you can create a mask that looks similar to a vector mask applied using its path outline When you apply a mask using its alpha channel the transparency of the mask object affects the visibility of the object being masked ADOBE FIREWORKS CS3 177 User Guide Lr AT A bitmap mask applied using its alpha channel Both vector and bitmap masks can be applied using their grayscale appearance Bitmap masks are applied using their grayscale appearance by default When a mask is applied using its grayscale appearance the lightness of its pixels determines how much of the masked object is displayed Light pixels display the masked object Darker pixels in the mask knock out the image and show the background Applying masks using their grayscale appearance creates inter esting effects if the mask object contains
392. ng system documentation Note The names of some system folders may vary on localized and customized systems About master configuration files that affect all users Master configuration files that affect all users are located in the Fireworks application folder which is the location on your hard disk where you installed Fireworks Note Many configuration files are stored in subfolders within the Fireworks application folder Their location varies depending on your operating system Also Macintosh users should be familiar with the package concept from Apple For more information see Viewing package contents Macintosh only on page 352 Whether you re on a multiuser or a single user system Fireworks changes your user specific configuration files and not the master configuration files in the Fireworks application folder when you save most settings This is because many users dont have access to all files if they are on multiuser systems Users with administrator level access can customize features for all users by modifying the master configuration files in the Fireworks application folder To save a master configuration setting for all users Save or drag a copy of the file into the appropriate location in the Fireworks application folder Location of the Fireworks preferences file Fireworks preferences are stored in a file named Fireworks 9 Preferences txt Windows or Fireworks 9 Preferences Macintosh The location of this f
393. ng with Director on page 317 The export method of getting Fireworks HTML into other applications is ideal if you are working in a team environment Exporting an HTML file divides the workflow into segments so that one person can perform a task in one application and another can take over at a later time using another application You can set up global HTML export preferences using the HTML Setup dialog box For more information see Setting HTML export options on page 287 Note Dreamweaver shares a tight integration with Fireworks Fireworks handles the export of HTML Dreamweaver differently than that of other HTML editors If you are exporting Fireworks HTML to Dreamweaver follow these instruc tions but for additional application specific notes also see Working with Dreamweaver on page 292 To export Fireworks HTML 1 Do one of the following to open the Export dialog box e Select File gt Export e Click the Quick Export button at the upper right corner of the Document window then select an export option from the destination application s pop up menu Fireworks automatically fills in the text boxes of the Export dialog box with the appropriate settings for the selected application Note Non Adobe applications are found in the Quick Export gt Other submenu 2 Navigate to the desired site folder on your hard drive 3 Select HTML and Images from the Export pop up menu 4 Click the Options button and select your HTM
394. nged Cropping a path You can crop a path using the shape of another path The front or topmost path defines the shape of the cropped area Q To crop a selected path 1 Select the path object that defines the area to be cropped 2 Select Modify gt Arrange gt Bring to Front 3 Hold down Shift and add to the selection the path object to be cropped 4 Select Modify gt Combine Paths gt Crop The resulting path object retains the stroke and fill attributes of the object that is placed farthest back Simplifying a path You can remove points from a path while maintaining its overall shape The Simplify command removes redundant points on your path by an amount you specify ADOBE FIREWORKS CS3 106 User Guide You might want to use Simplify if you have a straight line that contains more than two points for example Only two points are necessary to produce a straight line Or perhaps your path contains points that lie exactly on top of one another Simplify removes points that are unnecessary to reproduce the path you ve drawn To simplify a selected path 1 Select Modify gt Alter Path gt Simplify The Simplify dialog box appears 2 Enter a simplification amount and click OK As you increase the amount of simplification you increase the degree to which Fireworks can alter the path to reduce the number of points on that path Expanding a stroke You can convert the stroke of a selected path into a closed path The r
395. ning a marquee selection You can either leave that name as is or select another one from the pop up menu if you want to delete a marquee selection from a different document 3 The Selection box displays the name of the active selection in the active document You can leave that as is or if you want to delete a different selection from the document that appears in the Document box select another selection from the pop up menu 4 To delete the selection that appears in the Selection box click OK To close the dialog box without deleting any selections click Cancel Creating and moving a floating pixel selection When you drag a marquee to a new location the marquee itself moves If you want to move edit cut or copy a selection of pixels you must first make the pixels a floating selection To create a floating pixel selection 1 Make a pixel selection with a bitmap selection tool 2 Do one of the following Hold down Control Windows or Command Macintosh and drag the selection using any tool from the Bitmap section of the Tools panel e Select the Pointer tool and drag the selection To move a floating selection do one of the following e Drag the floating selection with the Pointer tool or any bitmap selection tool e Ifa non selection bitmap tool is active hold down Control Windows or Command Macintosh and drag the floating selection e Use the arrow keys or Shiftt arrow keys When you deselect the floating pixe
396. nnt oheutr e pniaia dontap sto 8S cu to uin s s ir mui u oj qm n ns u t e e Horizontal and vertical orientation Text can also flow right to left or left to right alucnugak daguncula Text flowing right to left and left to right In Fireworks you set horizontal and vertical orientation as well as the direction of text flow in the Property inspector These settings apply to entire text blocks only To set the orientation of a selected text block 1 Click the Text Orientation button in the Property inspector 2 Select an orientation option from the pop up menu Horizontal Left to Right is the default setting for text in Fireworks for most languages It orients text horizontally and displays characters from left to right Horizontal Right to Left orients text horizontally and displays characters from right to left It is useful for displaying text in languages where text flows from right to left such as Hebrew or Arabic Vertical Left to Right orients text vertically If you apply this to lines of text separated by hard or soft returns each line of text is displayed as a column The columns flow from left to right Vertical Right to Left orients text vertically Multiple lines of text separated by returns are displayed as columns that flow from right to left This option is useful for displaying text in languages such as Japanese in which text flows from right to left in columns Note Vertical text characters always flo
397. ns of a Fireworks symbol When the symbol object the original is edited the instances copies automatically change to reflect the modifications to the symbol Symbols are useful whenever you want to reuse a graphic element You can place instances in multiple Fireworks documents and retain the association with the symbol Symbols are helpful for creating buttons and animating objects across multiple frames For more information about the additional features built into animation and button features see Creating animation symbols on page 239 and Creating button symbols on page 220 Creating a symbol You can create symbols using the Edit gt Insert submenu You can create a symbol from any object text block or group and then organize them in the Library tab of the Assets panel To place instances in a document you simply drag them from the Library tab onto the canvas After creating an instance of the symbol in the current document it resides in the Library tab of the Assets panel and can be edited from there To create a new symbol from a selected object 1 Select the object and select Modify gt Symbol gt Convert to Symbol 2 Type a name for the symbol in the Name text box of the Convert to Symbol dialog box ADOBE FIREWORKS CS3 187 User Guide 3 Select a symbol type Graphic Animation or Button 4 Ifyou want to use 9 slice scaling guides to scale the symbol select the Enable 9 slice scaling guides check box For m
398. nt This chapter contains the following topics e Working with pages on page 155 e Working with layers on page 159 e Masking images on page 164 e Blending and transparency on page 179 Working with pages A Fireworks CS3 document PNG file can contain one or more pages You can either create all of the pages before you start to draw or you can add pages as needed If you do not create any new pages all of the elements of your file reside on a single page Page 1 You can view the pages in your file in the Pages panel Pages are added in the order in which they are created The name of the active page is highlighted in the Pages panel and shown in the pages pop up menu in the active document bar below the active document The objects on each page are displayed in a thumbnail next to the page name in the Pages panel Each page has an independent hierarchy including the Web layer and general layers which can be shared across different pages You can also create a master page to hold common elements The objects and layer hierarchy on the master page are inherited by all other pages ADOBE FIREWORKS CS3 156 User Guide Adding and removing pages Using the Pages panel you can add new pages delete unwanted pages and duplicate existing pages When you create a new page a blank page is inserted at the end of the list of pages The new page becomes the active page and is highlighted in the Pages panel When you
399. nt using control points For each new section Fireworks adds a control point for resizing or splitting the new section To add sections to a selected doughnut Alt drag Windows or Option drag Macintosh an add divide sector control point on the outer perimeter of the shape To remove a section from a selected doughnut Drag the add divide sector control point on the outer perimeter of the shape to define the portion of the shape that you want to remain on the canvas To resize the inner radius of a selected doughnut Drag the inner radius control point To set the inner radius of a selected doughnut to zero Click the reset radius control point Adjusting pie Auto Shapes Pie Auto Shapes initially have three control points There are control points for dividing the shape into slices adjusting slice size and for resetting the pie to one slice You can add as many sections as you want using control points For each new section Fireworks adds a control point for resizing or splitting the new section To add sections to a selected pie Alt drag Windows or Option drag Macintosh a drag to segment control point on the outer perimeter of the shape ADOBE FIREWORKS CS3 91 User Guide To resize a slice of a selected pie Drag a drag to segment control point on the outer perimeter of the shape To reset the a selected pie to one slice Click the Reset control point Adjusting L shaped Auto Shapes L shapes have f
400. ntering text on page 109 e Formatting text on page 112 Applying strokes fills and filters to text on page 119 e Attaching text to a path on page 120 Transforming text on page 121 e Converting text to paths on page 122 e Importing text on page 122 e Checking spelling on page 124 e Using the Text Editor on page 125 Entering text You can enter format and edit text in your graphics using the Text tool and the options in the Property inspector Text tool Note If the Property inspector is minimized click the expander arrow in the lower right corner to see all text properties 109 ADOBE FIREWORKS CS3 User Guide 110 w Properties ix A Text tool Arial v 2 M E BI U 100 noma v avlo v m vix v 3 Sazz E o v 0 v Smooth Anti Alias v 100 o Auto kern The Property inspector when the Text tool is selected Naming a text object As you add text to your Fireworks document that text object is automatically saved under a name that matches the text you ve typed You can change the assigned name to a different name if you prefer To change the name of a text object 1 Select the text object The existing name of that text object is displayed both in the Text box of the Properties inspector and in the Layers panel object thumbnail 2 Do one of the following e Select the name in the Text box of the
401. ntrol point alters only the associated visual property Most Auto Shape control points have tool tips that describe how they affect the Auto Shape Move the pointer over a control point to see a tool tip that describes the property governed by that control point Auto Shape tools create shapes in preset orientations For example the Arrow tool draws arrows horizontally You can transform Auto Shapes to change their orientation For more information see Transforming and distorting selected objects and selections on page 54 Although each Auto Shape tool in the Tools panel uses the same easy drawing method the editable attributes for each Auto Shape are different Arrow draws object groups that appear as simple arrows of any proportions Using control points you can adjust the arrowhead flare the tail length and width and the tip length Beveled Rectangle draws object groups that appear as rectangles with beveled corners Using control points you can edit the amount of bevel for all corners together or change the bevel of individual corners ADOBE FIREWORKS CS3 87 User Guide Chamfer Rectangle draws object groups that appear as rectangles with chamfers corners that are rounded to the inside of the rectangle You can edit the chamfer radius of all corners together or change the chamfer radius of individual corners Connector Line draws object groups that appear as three segment connector lines such as those used to connect the el
402. nu For more information see Creating a basic pop up menu on page 230 2 Click to highlight a pop up menu item that you wish to make a submenu item 3 Click the Indent Menu button to designate the item as a submenu item under the item directly above it on the menu item list 4 To add the next item to the submenu highlight it and click Indent Menu All items that are contiguously indented at the same level constitute a single pop up submenu 5 Optionally highlight a menu or submenu item and click Add Menu to insert a new item just below the highlighted item 6 Do one of the following e Click Next to move to the next tab or select another tab to continue building the pop up menu e Click Done to close the Pop up Menu Editor To create a pop up submenu within a pop up submenu 1 Highlight a submenu item in the Content tab of the Pop up Menu Editor For more information see the previous procedure 2 Click the Indent Menu button to indent it again so that it is indented from the submenu item directly above it You can continue indenting to create as many levels of nested submenus as you want To move a menu item into a higher ranking submenu or into the main pop up menu 1 Highlight the menu item in the Content tab of the Pop up Menu Editor 2 a Click the Outdent Menu button For more information about positioning submenus see Positioning pop up menus and submenus on page 235 3 Do one of the following to complet
403. nu Editor click the Content tab 2 Drag the menu item to a new location in the list 3 Click Done About exporting pop up menus Fireworks generates all the CSS code or JavaScript depending on which option you select necessary to view pop up menus in web browsers If you choose to use CSS code for your pop up menus a Fireworks document containing pop up menus is exported to HTML using CSS code You can also choose to have the CSS code written to an external css file and export that file along with an mm_css_menu js file to the same location as the HTML file If you do not choose to use CSS code for your pop up menus then JavaScript will be used In this case a Fireworks document containing pop up menus is exported to HTML and a JavaScript file called mm_menu js is exported to the same location as the HTML file When you upload your files you should upload mm_css_menu js or mm_menu js for JavaScript to the same directory location as the web page containing the pop up menu If you want to post the file to a different location you must update the hyperlink referencing mm_css_menu js and the css file or mm_menu js in the Fireworks HTML code to reflect the custom location For every document containing CSS pop up menus that you export as HTML and images from Fireworks a unique css file is exported For example lets say fred png and frida png both contained pop up menus and you exported them both to the same folder using CSS code f
404. o Album Flash oes V Auto start slideshow Bl _jAllow clicking images Open image in new windo Images Lt JIALY Firstattum Tne Kids F File name Caption a a 1 bfavs_em_10 2 bfays_em_12 13 bfavs_em_13 4 bfavs_em_16 5 bfavs_em_18 Album Properties 6 bfavs_em_21 Captions 7 buff_n_river Fitore 8 buff_on_road one Slideshow Properties 9 cont_divide le a 7 10 crater_em_22 gael 11 crater_n80_24 12 dadsfav_1 13 dadsfav_2 14 dadsfav_3 15 dadsfav_4 16 dadsfav_5 17 dadsfav_6 18 dadsfav_7 Create 19 dadsfav_8 E 20 dadsfav 9 E canain To create a slideshow 1 Select Commands gt Create Slideshow 2 Click the Add an album button the plus sign next to Albums 3 Choose the image files to include in the slideshow Then click OK 4 Fill in the AlbumBook Properties and the Album Properties for the slideshow For more information about these properties see AlbumBook Properties panel on page 252 5 Select each of the panels on the right to configure the slideshow properties For more information about the available slideshow properties see Slideshow properties on page 252 6 Choose the location for the completed slideshow in the Export Options panel 7 After configuring all of the slideshow settings click Create 8 When the slideshow has finished processing you can select the Launch slideshow in browser check box and click Close to display the slideshow in your def
405. o change the properties for each corner individually 4 To apply the changes press Tab or Enter The selected Auto Shape is updated with the changes you made to its properties If you want to make further changes you can also adjust the Auto Shape on the canvas by using its control points and the corresponding values in the Auto Shape Properties panel will be updated dynamically 5 Ifyou want to insert another Auto Shape you can select one from the Insert New Auto Shape pop up menu at the bottom of the panel The new shape appears in the upper left corner of the document Adjusting arrow Auto Shapes Arrows have five control points There are control points for adjusting the flare of the arrowhead the length of the arrow tail the length of the arrowhead tip and the width of the arrow tail To adjust the flare of an arrowhead gt Drag the flare control point of a selected arrow To increase or decrease the sharpness of an arrowhead Drag the tip control point of a selected arrow To lengthen or shorten an arrow tail Drag the body length control point of a selected arrow ADOBE FIREWORKS CS3 89 User Guide To adjust the width of an arrow tail Drag the body width control point of a selected arrow Adjusting bent arrow Auto Shapes Bent arrows have five control points There are control points for adjusting the flare of the arrowhead the length of the arrowhead tip the length of the arrow tail the width of the arrow
406. o now apply Photoshop layer effects directly to any object within Fireworks by selecting Photoshop Live Effects from the Live Filters tool in the Property inspector Photoshop blend modes Fireworks CS3 includes seven commonly used Photoshop blending modes dissolve linear burn linear dodge vivid light linear light pin light and hard mix Retain hierarchical layers when Fireworks CS3 now supports a hierarchical layer structure allowing you to opening PSD files preserve layer and sublayer information when importing files from Photoshop For more information see Working with Photoshop on page 322 Import Fireworks files into Adobe Flash Now you can move content from Fireworks CS3 to Flash CS3 Professional quickly by copying and pasting or by directly importing a Fireworks PNG file Important structure is maintained including multiple pages shared layers hierarchical layers frames 9 slice scaling settings and many effects Prototyping in Fireworks and developing in Flash has never been easier For more information see Working with Flash on page 305 Flex integration for RIA layouts As designers continue to push the technology envelope better tools and integration become more important than ever Fireworks CS3 can help in the development of next generation rich internet applications referred to as RIAs by making it possible to export common library assets as known components for use in Adobe Flex Buil
407. o you add or remove pixels to resize the image or do you change the number of pixels per inch or centimeter You can alter the size of a bitmap image by adjusting the resolution or by resampling the image When adjusting the resolution you change the size of the pixels in the image so that more or fewer pixels fit in a given space Adjusting the resolution without resampling does not result in data loss Resampling up or adding pixels to make the image larger may result in quality loss because the pixels being added do not always correspond to the original image Downsampling or removing pixels to make the image smaller always causes quality loss because pixels are discarded to resize the image Data loss in the image is another side effect of downsampling Rotating the canvas Rotating the canvas is helpful when an image is imported upside down or sideways You can rotate the canvas 180 90 clockwise or 90 counterclockwise When you rotate the canvas all objects in the document rotate To rotate the canvas do one of the following e Select Modify gt Canvas gt Rotate 180 e Select Modify gt Canvas gt Rotate 90 CW e Select Modify gt Canvas gt Rotate 90 CCW Trimming or fitting the canvas If your document contains extra space around the contents of the canvas you can trim the canvas You can also modify the canvas by expanding it to fit objects that extend beyond its boundary ADOBE FIREWORKS CS3 37 User
408. o your Dreamweaver file You cannot edit a library item directly in the Dreamweaver document you can edit only the master library item Then you can have Dreamweaver update every copy of that item as it is placed throughout your website Dream weaver library items are much like Fireworks symbols changes to the master library LBI document are reflected in all library instances across your site ADOBE FIREWORKS CS3 297 User Guide Note Dreamweaver library items do not support pop up menus To export a Fireworks document as a Dreamweaver library item 1 Select File gt Export 2 Select Dreamweaver Library from the Save as Type pop up menu Save in O sitel 79 2 erem E index_r2_c3_f2 gif index_r2_c7_f2 gif index_r3_c3 gif index D index_r2_c3_f3 gif index_r2_c7_f3 gif index_r4_c3 gif index index_r2_c5 gif index_r2_c9 gif E index_r4_c8 jpq index a index_r2_c5_f2 gif index_r2_c9_f2 gif index_r4_c11 gif index index_r2_c5_f3 gif index_r2_c9_F3 iF index_r5_c3 gif index_t ka a a a index_r2_c7 gif index_r2_c10 gif index_r5_c4 qiF index lle File name index lbi 7 Save as type Dreamweaver Library lbi v Cancel Slices v ithout S Put Images in Subfolder Select the Library folder in your Dreamweaver site as the location in which to place the files If this folder does not exist use the Select Folder dialog box to create or locate the folder T
409. objects on page 58 Selecting objects Before you can do anything with any object on the canvas you must select it This applies to a vector object path or points a text block word or letter a slice or hotspot an instance or a bitmap object You can use any of the following to select objects The Layers panel displays each object You can click an object in the Layers panel to it select when the panel is open and layers are expanded For more information see Pages Layers Masking and Blending on page 155 k The Pointer tool selects objects when you click the objects or drag a selection area around them R The Subselection tool selects an individual object in a group or the points of a vector object a The Select Behind tool selects an object that is behind another object ce The Export Area tool selects an area to be exported as a separate file For information about selecting specific areas of pixels in a bitmap image see Selecting pixels on page 44 Using the Pointer tool The Pointer tool selects objects when you click them or when you drag a selection area around all or part of the objects To select an object by clicking do one of the following e Move the Pointer tool over the object s path or bounding box and click e Click the object s stroke or fill ADOBE FIREWORKS CS3 42 User Guide e Select the object in the Layers panel To preview what you would select if you were to
410. objects are arranged is called the stacking order e You can align selected objects to an area of the canvas or to a vertical or horizontal axis Grouping objects You can group individual selected objects and then manipulate them as if they were a single object For example after drawing the petals of a flower as individual objects you can group them to select and move the entire flower as a single object You can edit groups without ungrouping them You can select an individual object in a group for editing without ungrouping the objects You can also ungroup the objects at any time To group two or more selected objects Select Modify gt Group To ungroup selected objects Select Modify gt Ungroup Selecting objects within groups To work with individual objects within a group you can either ungroup the objects or use the Subselection tool to select individual objects while leaving the group intact Subselection tool Modifying the attributes of a subselected object changes only the subselected object not the entire group Moving a subselected object to another layer removes the object from the group Subselecting an object within a group To select an object that is part of a group Select the Subselection tool and click the object or drag a selection area around it To add objects to or remove them from the selection hold down Shift as you click or drag ADOBE FIREWORKS CS3 59 User Guide To select the group
411. ocument into the document Cut and paste a button instance from another Fireworks document into the document Import button symbols from a Fireworks PNG file Export button symbols from another Fireworks document to a PNG library file and then import button symbols from the PNG library file into the document e Select Edit gt Libraries and import button symbols into the document s Library panel from the button libraries on the submenu These libraries contain a wide variety of premade button symbols prepared by Adobe You import and export button symbols just as you import and export animation and graphic symbols For more information see Importing symbols on page 194 and Exporting symbols on page 195 Editing button symbols Fireworks button symbols are a special kind of symbol They have two kinds of properties some properties change in all instances when you edit an instance of the symbol and other properties affect only the current instance Fireworks button symbols let you take advantage of the convenience of symbols yet allow you to edit certain properties of a button instance such as text without affecting other instances Editing symbol level properties You edit button symbols in the Button Editor The instance properties that you can modify are those that are typically consistent among buttons in a nav bar e Modifications to graphical appearance such as stroke color and type fill color and type path shape
412. ocument window The Button Editor then takes you through the steps to control the button s behavior To create an Up state 1 Select Edit gt Insert gt New Button to open the Button Editor The Button Editor opens to the Up state tab 2 Import or create the Up state graphic Drag and drop or import the graphic that will appear as the button s Up state into the work area of the Button Editor e Use the drawing tools to create a graphic or use the Text tool to create a button from text e Set the 9 slice scaling guides to keep the button shape from being distorted when it is resized For more infor mation see Using 9 slice scaling on page 188 e Click Import a Button and select a ready made editable button from the Button Import library If you select this option you won t have to worry about creating the remaining states for your button Each of the button s states will be automatically filled with the appropriate graphics and text 3 If desired select the Text tool and create text for the button To create an Over state 1 With the Button Editor open click the Over tab 2 Do one of the following to create the button s Over state ADOBE FIREWORKS CS3 User Guide e Click Copy Up Graphic to paste a copy of the Up state button into the Over window and then edit it to change its appearance or text e Drag and drop import or draw a graphic Creating a three or four state button When creating a button
413. ol By default the software creates a Custom Symbols folder You can save your new symbol here or create another folder at the same level as the Custom Symbols folder Note Rich symbols must be saved in a folder within the Common Library After being saved the symbol is removed from the canvas and appears in the Common Library 6 Open the Create Symbol Script panel by selecting Create Symbol Script from the Commands menu ADOBE FIREWORKS CS3 191 User Guide 7 Click the browse button in the upper right corner of the panel and browse to the symbol PNG file This is saved in the lt user settings gt Application Data Adobe Fireworks 9 Common Library Custom Symbols Windows or lt user name gt Application Support Adobe Fireworks9 Common Library Custom Symbols Macintosh directory by default 8 Click the plus button to add an element name 9 Add the name of the element that you want to customize For example type label into the Element Name field if you want to customize the text field named label 10 Inthe Attribute field select the name of the attribute you want to customize For example to customize the text in the label select the textChars attribute or to customize the fill color of an object select the fillColor attribute Note For more information about these attribute options see Extending Fireworks 11 Inthe Property Name field type the name of the customizable property for example Label or Nu
414. ol level property and is unique to button symbols When a button symbol is created Fireworks automatically creates a special slice large enough to enclose all the states of a button You can edit a button slice only in the Active Area tab of the Button Editor Each button can have only one slice If you draw a slice using a slice tool in the active area the previous slice is replaced by the newly drawn slice You can draw hotspot objects in the Active Area tab but you can edit those hotspots only in the Button Editor Note Web objects that define a button symbols active area appear in the document when slices and hotspots are not hidden but a button s web objects are not listed in the Layers panel and cannot be edited in the workspace To edit a slice or hotspot in a button symbol s active area 1 Do one of the following to open the button symbol in the Button Editor Double click a button instance in the workspace In the Library panel double click the button preview or the symbol icon beside the button symbol Click the Active Area tab w N Do one of the following Use the Pointer tool to move or reshape the slice or move a slice guide Use any of the slice or hotspot tools to draw a new active area Setting the URL for a button symbol or instance A URL or Uniform Resource Locator is a link to another web page website or anchor on the same web page The URL can be a symbol or instance level button property You can at
415. ol that appears somewhat distorted Fireworks CS3 introduces a dynamic new feature called 9 slice scaling which allows you to intelligently scale vector or bitmap symbols By positioning a set of guides over your artwork you can define exactly how each part of a symbol is scaled Any of nine different regions can be specified to scale only horizontally scale only vertically scale both horizontally and vertically or to not scale at all The feature which is on by default can also be set to scale just three regions When combined with the new Auto Shape library 9 slice scaling makes it faster than ever before to prototype websites and applications Scaling without distortion New 9 slice scaling tool Enable the 9 slice scaling feature to scale vector and bitmap symbols up or down without distorting their geometry The symbol can be scaled using 3 or 9 regions based on the shape of the symbol For more information see Using 9 slice scaling on page 188 ADOBE FIREWORKS CS3 9 User Guide Add multiple pages to a single document In a never ending effort to improve web design workflows Fireworks CS3 makes it easy to build complex multi page web prototypes using a single PNG file Each page contains its own settings for canvas document size color image resolution and guides These settings can be set on a per page basis or globally across all pages in the document Taking the multi page concept one step further Fire
416. olor to the Swatches panel 1 Select the Eyedropper tool from the Tools panel 2 Select the number of pixels to sample from the Sample pop up menu in the Property inspector 1 pixel 3x3 Average or 5x5 Average 3 Click anywhere inside any open Fireworks Document window to sample a color ADOBE FIREWORKS CS3 User Guide 4 Move the tip of the eyedropper pointer to the open space after the last swatch in the Swatches panel The eyedropper pointer becomes the paint bucket pointer 5 Click to add the swatch When you select Snap to Web Safe in the Options menu of the color pop up window any non websafe color you pick up with the eyedropper pointer is changed to the nearest websafe color To replace a swatch with another color 1 Select the Eyedropper tool from the Tools panel 2 Select the number of pixels to sample from the Sample pop up menu in the Property inspector 1 pixel 3x3 Average or 5x5 Average 3 Click anywhere inside any Fireworks Document window to sample a color 4 Hold down Shift and place the pointer over a swatch in the Swatches panel The pointer becomes the paint bucket pointer 5 Click the swatch to replace it with the new color To delete a swatch from the Swatches panel 1 Hold down Control Windows or Command Macintosh and place the pointer over a swatch The pointer becomes the scissors pointer 2 Click the swatch to delete it from the Swatches panel To save a selection of sampled colors 1 Add
417. olors blend to create the appearance of the missing color Dithering is especially helpful when exporting images with complex blends or gradients or when exporting photographic images to an 8 bit graphic file format such as GIF Dithering can greatly increase file size Note The dithering option is available only for GIFs other 8 bit graphic file formats and WBMPs To dither a graphic Enter a percentage value in the Dither text box of the Optimize panel ADOBE FIREWORKS CS3 268 User Guide Viewing colors in a palette The color table in the Optimize panel displays colors in the current preview when you are working in 8 bit color or less and lets you modify an image s palette The color table updates automatically when you are in Preview mode It appears empty if you are optimizing more than one slice at a time or if you are not optimizing in an 8 bit format such as GIF w Optimize vi GIF v Matte 3 x Adaptive Colors 128 v Loss 0 w Dither 99 No Transparency Sort None v 128 colors Fat Eat Eat Various small symbols appear on some color swatches indicating certain characteristics of individual colors as follows Symbol Meaning EJ The color has been edited affecting only the exported document This does not change the color in the source document Ld The color is locked a The color is transparent The color is websafe had The color has mult
418. on locating this folder see Working with configuration files on page 350 To create a new URL library 1 Select New URL Library from the URL panel Options menu 2 Enter the library name in the text box and click OK The new library name appears in the Library pop up menu in the URL panel To add a new URL to a URL library 1 Select a library from the Library pop up menu 2 Enter a URL in the Link text box 3 Click the Plus button The Plus button adds the current URL to the library You can further organize your URLs by adding only those that are in use in your document ADOBE FIREWORKS CS3 198 User Guide To simultaneously add a URL to the library while assigning it to a web object 1 Select the object 2 Do one of the following to enter the URL e Select Add URL from the URL panel Options menu enter an absolute or relative URL and click OK e Enter a URL in the Link text box Click the Plus button The URL appears in the URL preview pane See Assigning URLs on page 212 and Setting the URL for a button symbol or instance on page 226 To add used URLs to a URL library 1 Select a library from the Library pop up menu 2 Select Add Used URLs to Library from the URL panel Options menu To delete a selected URL from the URL preview panel Click the Delete URL from Library button at the bottom of the URL panel To delete all unused URLs from the library 1 Select Clear Unused URLs from the
419. oncepts central to slicing and gives procedures for using slices to incorporate interactivity into your web pages Using the drag and drop rollover method of attaching interactivity to slices you can quickly create rollover and swap image effects in the workspace You can view the assigned behaviors in the Behaviors panel and create more complex interactions using this panel You can also incorporate interactivity into your web pages with hotspots Hotspots are used to create an image map which is HTML code that defines a hot region in an HTML document These regions do not necessarily link anywhere they could just trigger a behavior or define alternate text Hotspots can also receive mouse events allowing JavaScript behaviors to be acted on in slices This chapter contains the following topics e Creating and editing slices on page 200 e Making slices interactive on page 205 e Preparing slices for export on page 211 e Working with hotspots and image maps on page 216 Creating and editing slices Slicing cuts up a Fireworks document into smaller pieces and exports each piece as a separate file Upon export Fireworks also creates an HTML file containing table code to reassemble the graphic in a browser Slicing cuts a document into multiple pieces which are exported as separate files Slicing an image has at least three major advantages Optimizing One challenge of web graphic design is ensuring that image
420. one in the Document window The updated image is exported back to HomeSite and the PNG source file is saved if a source file was selected Working with Photoshop Fireworks provides excellent support for importing native Photoshop PSD files with options for retaining many aspects of the imported files including layers masks and editable text As a result you can bring Photoshop images into Fireworks for further editing and web optimization without losing the ability to export the images back into Photoshop Placing Photoshop graphics in Fireworks You can drag individual Photoshop graphics into Fireworks or you can import an entire Photoshop file Dragging individual Photoshop graphics into Fireworks You can place Photoshop graphics into Fireworks by dragging them into your document To drag a Photoshop graphic into Fireworks Drag the graphic from Photoshop into an open document in Fireworks Each graphic you drag becomes a new bitmap object Text is also imported as a bitmap object and becomes uneditable as text For more information see About importing text from Photoshop on page 323 Importing Photoshop files into Fireworks When you import or open a Photoshop file in Fireworks the Photoshop file is imported into a PNG file using the import preferences that you have specified In addition to preserving layers and text as specified by the import options Fireworks preserves and converts the following Photoshop features
421. op up menu Match it as closely as possible to the target background color on which the graphic will be placed Note Anti aliasing is applied only to soft edged objects that lie directly on top of the canvas Removing halos When you make the canvas color transparent on an image that was previously anti aliased the pixels from the anti aliasing remain Then when you export or in some cases save the graphic and place it on a web page with a different background color the perimeter pixels of the anti aliased object may be apparent on the web page s background These form a halo which is especially noticeable on a dark background You can easily prevent halos in native Fireworks PNG files and in imported Photoshop files For other file types such as GIF however you must remove the halo manually To prevent halos in native Fireworks PNG files and imported Photoshop files do one of the following e Set the Canvas Color in the Property inspector or the Matte Color in the Optimize panel to the color of the target web page background e With the object you want to export selected select Hard from the Edge pop up menu in the Property inspector To remove a halo manually from a GIF or other graphic file 1 With the file open in Fireworks click the Preview 2 Up or 4 Up button at the upper left of the Document window In 2 Up or 4 Up view click a view other than the original 2 Inthe Optimize panel select Index Transparency from the Tr
422. opacity options are not available for all tools To set a blending mode and opacity level for existing objects 1 With two objects overlapping select the top object 2 Select a blending option from the Blend Mode pop up menu in the Property inspector or the Layers panel 3 Select a setting from the Opacity pop up slider or type a value in the text box To set a default blending mode and opacity level to be applied to objects as you draw them 1 Choose Select gt Deselect to avoid inadvertently applying a blending mode and opacity 2 With a vector or bitmap drawing tool selected select a blending mode and opacity level in the Property inspector The blending mode and opacity level you select are used as the default for any objects you subsequently draw with that tool ADOBE FIREWORKS CS3 182 User Guide About the Color Fill Live Filter Fireworks also offers a Live Filter that allows you to adjust the color of an object by altering the object s opacity and blend mode This Live Filter called Color Fill produces the same effect as overlapping an object with one that has a different opacity and blend mode For more details on using the Color Fill Live Filter see Using Live Filters on page 147 183 Chapter 10 Using Styles Symbols and URLs Fireworks provides three panels in which you can store and reuse styles symbols and URLs Styles are stored in the Styles panel symbols for the current document are stored in the L
423. optimi zation settings in the Settings pop up menu in the Optimize panel and the Property inspector when slices buttons or the canvas are selected For more information see Saving and reusing optimization settings on page 275 To modify the color palette If the Optimize panel isn t already open select Window gt Optimize to view and edit a document s color palette For more information see Optimizing GIF PNG TIFF BMP and PICT files on page 265 To optimize individual slices 1 Click a slice to select it Shift click to select more than one slice 2 Optimize the selected slices using the Optimize panel Previewing and comparing optimization settings The document preview buttons display the graphic as it would appear in a web browser based on optimization settings You can preview rollover and navigation behaviors as well as animation A Untitled 1 png 100 Ce 2 Original Preview T 2 Up FA4 uUp it gt The Original button and the document preview buttons The document preview buttons display a document s total size estimated download time and file format The estimated download time is the average amount of time it would take to download all the document s slices and frames on a 56K modem The 2 Up and 4 Up views display additional information that varies depending on the file type selected You can use the Optimize panel to optimize a document while viewing a preview as if you were in Original view
424. or mation see Using Dreamweaver Designating Fireworks as the primary external image editor for Dreamweaver Dreamweaver provides preferences for automatically starting specific applications to edit specific file types To use the Fireworks launch and edit features make sure that Fireworks is set as the primary editor for GIF JPEG and PNG files in Dreamweaver Although you can use earlier versions of Fireworks as external image editors these versions offer limited launch and edit capabilities When you work with Roundtrip HTML Fireworks MX and Fireworks 4 do not fully support edits made to cell properties in Dreamweaver tables nor does it support behaviors applied in Dreamweaver Fireworks 3 does not fully support opening and editing placed tables and slices within tables while Fireworks 2 does not support opening and editing source PNG files for placed images Note Since Fireworks is the default external image editor in Dreamweaver setting this preference is only necessary if youre having trouble starting Fireworks CS3 from within Dreamweaver To set Fireworks as the primary external image editor for Dreamweaver 1 In Dreamweaver choose Edit gt Preferences and then choose File Types Editors 2 Inthe Extensions list select a web image file extension gif jpg or png ADOBE FIREWORKS CS3 303 User Guide 3 In the Editors list if Fireworks appears in the list select it If Fireworks is not in the list click the Plus but
425. or click the Options button in the Export dialog box 2 Click the Table tab 3 Select a spacing option from the Space With pop up menu Nested Tables No Spacers creates a nested table with no spacers Single Table No Spacers creates a single table with no spacers This option can cause tables to be displayed incor rectly in some cases 1 Pixel Transparent Spacer uses a 1 pixel by 1 pixel transparent GIF as a spacer that is resized as needed in the HTML This generates a 1 pixel high row across the top of the table and a 1 pixel wide column down the right side 4 Select a cell color for HTML slices To give cells the same background color as the document canvas select Use Canvas Color e To select a different color deselect Use Canvas Color and select a color from the color pop up window Note If you select a color from the color pop up window it applies only to HTML slices image slices continue to use the canvas color 5 Select what to place in empty cells from the Contents pop up menu None causes empty cells to remain blank Spacer Image places a small transparent image called spacer gif in empty cells Non breaking Space places an HTML space tag in empty cells The cell appears hollow Note Empty cells occur only if you deselect Include Areas Without Slices in the Export dialog box during export 6 Click OK For more information about specifying HTML export options see Setting HTML export options on page 287 N
426. or the pop up menus The result would bea single mm_css_menu js file and two css files one named fred css and another named frida css When you include submenus Fireworks generates an image file called arrows gif This image is the tiny arrow that appears next to a menu entry that tells users a submenu exists No matter how many submenus a document contains Fireworks always uses the same arrows gif file For more information about exporting HTML see Exporting HTML on page 280 Chapter 13 Creating Animations Animated graphics add an exciting sophisticated look to your website In Fireworks you can create animated graphics with banner ads logos and cartoons that move For example you can make your company mascot dance across a page while the logo fades in and out One way to create animations in Fireworks is by creating symbols and changing their properties over time to produce the illusion of motion A symbol is like an actor whose movements you choreograph The action of each symbol is stored in a frame When you play all the frames together in a sequence you get animation You can apply different settings to the symbol to gradually change the content of successive frames You can make a symbol appear to move across the canvas fade in or out get bigger or smaller or rotate Because you can have multiple symbols in a single file you can create a complex animation in which different types of action occur all at once The Op
427. ore information on the 9 slice scaling feature see Using 9 slice scaling on page 188 5 Toadd the symbol to the Common Library panel so that it can be used in multiple documents select the Save to Common Library check box 6 Click OK to save the symbol The symbol appears in the Library tab of the Assets panel and in the Common Library panel if that option was chosen The selected object becomes an instance of the symbol and the Property inspector displays symbol options To create a symbol from scratch 1 Do one of the following e Select Edit gt Insert gt New Symbol e Select New Symbol from the Library panel Options menu 2 Select a symbol type Graphic Animation or Button 3 Ifyou want to use 9 slice scaling guides to scale the symbol select the Enable 9 slice scaling guides check box Then click OK Depending on which symbol type you select the Symbol Editor or Button Editor opens 4 Create the symbol using the tools in the Tools panel then close the editor For more information see Creating button symbols on page 220 To swap a symbol on page 188 and Creating animation symbols on page 239 Placing instances You can place instances of a symbol in the current document To place an instance Drag a symbol from the Library panel to the current document An instance of a symbol on the canvas Editing symbols You can modify a symbol in the Symbol Editor which automatically updates all
428. organized in four tabs Content has options for determining the basic menu structure as well as the text URL link and target for each menu item Appearance contains options that determine the appearance of each menu cell s Up state and Over state as well as the menu s vertical and horizontal orientation Advanced contains options that determine the cell dimensions padding and spacing the cell border width and color menu delay and text indention Position contains options that determine the menu and submenu placement The Menu setting places the pop up menu relative to the slice Preset positions include bottom lower right top and upper right of a slice The Submenu setting places the pop up submenu to the right or lower right of the parent menu or below it Pop up Menu Editor Content Appearance Advanced Position Text Link Target North America United States http www macromedia com http ttwwwmacromediacom Latin South America http ttwwwmacromediacom Europe http www macromedia com Africa http ffwww macromedia com Middle East http ffwww macromedia com AsiatPacific http ffwww macromedia com OoOo ADOBE FIREWORKS CS3 230 User Guide Depending on the design of the pop up menu you may not use all the tabs or options in the Pop up Menu Editor You can edit settings in any tab anytime but you must add at least one menu item in the Content tab to create a
429. orking on will be changed to the format in which you save it To export a document to another format 1 Select a file format in the Optimize panel 2 Select File gt Export to export the document For more information about exporting files see Optimizing and Exporting on page 257 ADOBE FIREWORKS CS3 24 User Guide The Fireworks work environment When you open a document in Fireworks for the first time Fireworks activates the work environment including the Tools panel Property inspector menus and other panels The Tools panel on the left of the screen contains labeled categories including bitmap vector and web tool groups The Property inspector appears along the bottom of the document by default and initially displays document properties It then changes to display properties for a newly selected tool or currently selected object as you work in the document The panels are initially docked in groups along the right side of the screen The document window appears in the center of the program FW Adobe Fireworks Untitled 1 png Page 1 98 0 x File Edt View Select Modify Text Commands Filters Window Help 1E P Optimize and Align Pages and Layers and Frames 15 Pages Layers Frames History Paget M Document Canvas C Canvas Size Image Size Fit Canvas Untitled 1 6 GIF Adaptive 256 z amp F gt Auto Shape Properties Using the Start page
430. orks allows you to export XHTML Note Fireworks can also import XHTML For more information see Creating Fireworks PNG files from HTML files on page 17 For more information on XHTML visit the World Wide Web Consortium W3C XHTML specification at www w3 org To export XHTML from Fireworks 1 Select File gt HTML Setup select an XHTML style from the HTML Style pop up menu on the General tab and click OK 2 Export your document using any of the methods available for exporting or copying HTML For more information about the various ways you can export and copy HTML from Fireworks see Exporting HTML on page 280 Note Fireworks uses UTF 8 encoding when exporting to XHTML For more information about UTF 8 encoding see Exporting files with and without UTF 8 encoding on page 286 Exporting files with and without UTF 8 encoding Historically web browsers were not able to display different character sets in a single HTML document For example Chinese text and English text could not be displayed on the same page because web browsers weren t capable of displaying different character sets in a single document UTE 8 which stands for Universal Character Set Transformation Format 8 is a text encoding method that allows web browsers to display different character sets on the same HTML page Fireworks allows you to export HTML with UTE 8 encoding Note Fireworks can also import documents that use UTF 8 encoding For more info
431. orks to edit the image You can then select Save As to save your work as a new Fireworks PNG file or you can select a different format in which to save your file For most file types you can select Save to save the document in its original format 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 will no longer be available in the bitmap file see About vector and bitmap graphics on page 13 If you need to revise the image edit the source PNG file and then export it again tt You can save to the following file formats directly Fireworks PNG GIF animated GIF JPEG BMP WBMP TIFF SWF AI PSD and PICT Macintosh only Fireworks saves 16 bit TIFF images at 24 bit color depth Files of other types such as PSD and HTML open as PNG files allowing you to use the Fireworks PNG document as your source file Any edits you perform are applied to the PNG file and not the original To save in an existing GIF JPEG TIFF BMP or other file format listed above 1 Select File gt Save 2 Ifyou made modifications to the document that aren t editable in the file s original format a notification appears in the Save dialog box Non editable modifications include adding new objects masks and Live Filters as well as adjusting opacity applying blend modes and saving pixel selections Note If you don t select the Save as a Copy option the file format of the document you are w
432. ort Area tool from the Tools panel 2 Drag a marquee defining the portion of the document to export Note You can adjust the position of the marquee as you drag While holding down the mouse button press and hold down the Spacebar then drag the marquee to another location on the canvas Release the Spacebar to continue drawing the marquee When you release the mouse button the export area remains selected 3 Resize the export area if necessary e Shift drag a handle to resize the export area marquee proportionally Alt drag Windows or Option drag Macintosh a handle to resize the marquee from the center e Alt Shift drag Windows or Option Shift drag Macintosh a handle to constrain the proportions and resize from the center 4 Double click inside the export area marquee to go to Image Preview 5 Adjust settings in the Image Preview and click Export 6 In the Export dialog box type a filename and select a destination folder 7 Inthe Export pop up menu select Images Only 8 Click Export Note To cancel without exporting double click outside the export area marquee press Escape or select another tool Exporting HTML Unless you specify otherwise when you export a sliced Fireworks document what you re actually exporting is an HTML file and its images Fireworks generates pure HTML that can be read by most web browsers and HTML editors There are a variety of ways to export Fireworks HTML Export an HTML file whi
433. ort the palette as a bitmap file or click the Export as color table icon to export the palette as an ACT file ADOBE FIREWORKS CS3 135 User Guide To create a color gradation series using the Blender tab 1 Select the Blender tab in the Color Palette panel 28 From Mi To E 2 Use the fill color boxes at the bottom of the panel to select beginning and ending colors for the series 3 Use the Steps pop up slider to select the number of steps in the series After you have created the gradation series you can apply any of the colors within your document You can also place your mouse pointer over any color swatch to see the hexidecimal value of the color Using color boxes and color pop up windows Throughout Fireworks you will find color boxes from the Colors section of the Tools panel to the Property inspector to the Color Mixer Each displays the current color assigned to the associated object property Selecting colors from a color pop up window When you click any color box a color pop up window similar to the Swatches panel opens You can choose to display the same swatches in a color pop up window as those that are displayed in the Swatches panel or you can display different swatches To select a color for a color box 1 Click the color box The color pop up window opens 2 Do one of the following e Click a swatch to apply it to the color box e Click the eyedropper pointer on a color any
434. osh users should pay special attention to the format Fireworks uses to store the program and its default configuration files For more information see Viewing package contents Macintosh only on page 352 Adobe Help Adobe Help resources Documentation for your Adobe software is available in a variety of formats In product and LiveDocs Help In product Help provides access to all documentation and instructional content available at the time the product ships It is available through the Help menu in your Adobe product LiveDocs Help includes all the content from in product Help plus updates and links to additional instructional content available on the web For some products LiveDocs also lets you add comments Find LiveDocs Help for your product in the Adobe Help Resource Center at www adobe com go documentation ADOBE FIREWORKS CS3 3 User Guide Most versions of in product and LiveDocs Help let you search across the Help of multiple products Topics also contain links to relevant content on the web or to topics in the Help of another product Think of Help both in the product and on the web as a hub for accessing additional content and communities of users The most complete and up to date version of Help is always on the web Adobe PDF documentation The in product Help is also available as a Portable Document Format PDF file that is optimized for printing Other documents such as white papers may also be provided as PDFs
435. ote You can specify unique table export settings for sliced objects for each document Or you can use the Set Defaults button on the Document Specific tab of the HTML Setup dialog box to apply defaults for all new documents ADOBE FIREWORKS CS3 User Guide Working with hotspots and image maps Web designers can use hotspots to make small parts of a larger graphic interactive linking areas of web graphics to a URL You can create an image map in Fireworks by exporting HTML from a document that contains hotspots Click on your download area An image map with hotspots Hotspots and image maps are often less resource intensive than sliced graphics Slicing can be more resource intensive to web browsers because of the additional HTML code they must download and the processing power required to reassemble sliced graphics Note It is possible to create a sliced image map Exporting a sliced image map typically generates many graphic files For more information about slicing see Creating slice objects on page 201 Hotspots are ideal when you want areas of an image to link to other web pages but you don t need those areas to highlight or produce rollover effects in response to mouse movement or actions Hotspots and image maps are also ideal when the graphic onto which you ve placed your hotspots would be best exported as a single graphic file in other words the entire graphic would best be exported using the same file format an
436. ottom of the Frames panel To add frames to a specific place in the sequence 1 Select Add Frames from the Frames panel Options menu 2 Enter the number of frames to add 3 Select where to insert the frames before the current frame after it or at the beginning or end Then click OK To make a copy of a frame Drag an existing frame to the New Duplicate Frame button at the bottom of the Frames panel ADOBE FIREWORKS CS3 244 User Guide To copy a selected frame and place it in a sequence 1 Select Duplicate Frame from the Frames panel Options menu 2 Enter the number of duplicates to create for the selected frame select where the duplicate frames are to be inserted and click OK Duplicating a frame is useful when you want objects to reappear in another part of the animation To reorder frames Drag the frames one by one to a new location in the list To delete the selected frame do one of the following Click the Delete Frame button in the Frames panel Drag the frame to the Delete Frame button e Select Delete Frame from the Frames panel Options menu Moving selected objects in the Frames panel You can use the Frames panel to move objects to a different frame Objects that appear in only a single frame appear to vanish as the animation plays You can move objects to make them appear or disappear at different points in the movie To move a selected object to a different frame In the Frames panel drag th
437. ou can create a pixel selection on that bitmap using the opacity of any object or mask in the Layers panel For more information about the Layers panel see Working with layers on page 159 To create or replace a pixel selection on a selected bitmap using the opacity of an object 1 In the Layers panel position the pointer over the thumbnail of the object you want to use to create the pixel selection 2 Hold down Alt Windows or Command Macintosh ti The pointer changes to indicate you are about to select the alpha channel or the opaque area of the object 3 Click the thumbnail A new pixel selection is created on the selected bitmap To add to the current pixel selection fe Alt Shift click Windows or Command Shift click Macintosh the thumbnail of an object in the Layers panel to add the shape of its opaque area to the current pixel selection When you position the pointer over the thumbnail and hold down the specified modifier keys the pointer indicates that you are about to add to the pixel selection To subtract from the current pixel selection sE Control Alt click Windows or Command Option click Macintosh the thumbnail of an object in the Layers panel to subtract the shape of its opaque area from the current pixel selection When you position the pointer over the thumbnail and hold down the specified modifier keys the pointer y indicates that you are about to subtract from the pixel selection To create a pixel
438. oups You can easily switch to another swatch group or create your own The Swatches panel Options menu contains the following swatch groups Color Cubes Continuous Tone Macintosh System Windows System and Grayscale You can import custom swatches from color palette files saved as ACT or GIF files To select a swatch group Select a swatch group from the Swatches panel Options menu Note Selecting Color Cubes returns you to the default swatch group To select a custom swatch group 1 Select Replace Swatches from the Swatches panel Options menu 2 Navigate to the folder and select a swatch file 3 Click Open The color swatches in the swatch file replace the previous swatches Note For information on creating a custom swatch group see Customizing the Swatches panel on page 128 and Saving palettes on page 270 To add swatches from an external color palette to the current swatches 1 Select Add Swatches from the Swatches panel Options menu 2 Navigate to the desired folder and select a color palette file Note Fireworks can add new swatches from palettes exported as ACT or GIF files 3 Click OK Fireworks adds the new swatches at the end of the current swatches Customizing the Swatches panel You can add delete replace and sort color swatches or entire swatch groups using the Swatches panel Note Selecting Edit gt Undo does not undo swatch additions or deletions Colors Swatches panel To add a c
439. our control points There are control points for adjusting the length and width of each section of the L shape and for adjusting the roundness of the L shape s bend To change the length or width of a selected L shape s section Drag one of the two length width control points To adjust the roundness of the corners of a selected L shape Drag the corner radius control point Adjusting smart polygon Auto Shapes Smart Polygons initially appear as pentagons with four control points There are control points for resizing and rotating adding or removing polygon segments increasing or decreasing the number of polygon sides and adding an inner polygon to the shape to create a ring To resize or rotate a selected smart polygon do one of the following Drag the scale rotate control point e Alt drag Windows or Option drag Macintosh the scale rotate control point to rotate only To add or remove sections from a selected smart polygon Drag the sections control point To change the number of sides on a selected smart polygon gt Drag the sides control point To split a selected smart polygon into segments Alt drag Windows or Option drag Macintosh the sides control point To resize the inner polygon of a smart polygon do one of the following If the polygon has an inner polygon drag the inner polygon control point If the polygon has no inner polygon drag the reset inner polygon control point To reset t
440. out working with GoLive on page 327 e About working with HTML editors on page 327 e About extending Fireworks on page 328 e About Adobe XMP on page 328 e About Adobe Bridge on page 328 e Flex integration for rich Internet application layouts MXML export on page 329 ha ADOBE FIREWORKS CS3 292 User Guide Working with Dreamweaver Unique integration features make it easy to work on files interchangeably in Dreamweaver and Fireworks Dream weaver and Fireworks recognize and share many of the same file edits including changes to links image maps table slices and more Together the two applications provide a streamlined workflow for editing optimizing and placing web graphics files in HTML pages If you want to modify Fireworks images and tables placed in a Dreamweaver document you can start Fireworks from the Property inspector in Dreamweaver to make edits and then return to the updated document in Dreamweaver If you want to make quick optimization edits to images and animations you can open the Fireworks Export Preview dialog box from the Dreamweaver Property inspector and enter updated settings In either case updates are made to the placed files in Dreamweaver as well as to the source Fireworks files if those source files were opened To further streamline the web design workflow you can create image placeholders in Dreamweaver for future Fireworks images You can later select those placeho
441. ove or change them when changing palettes or when reducing the number of colors in a palette If you switch to another palette after colors have been locked locked colors are added to the new palette To lock a selected color do one of the following Click the Lock button at the bottom of the Optimize panel e Right click Windows or Control click Macintosh the color swatch and select Lock Color from the context menu To unlock a color 1 Select a locked color in the Optimize panel color table 2 Click the Lock button in the Optimize panel or right click Windows or Control click Macintosh the color swatch and select Lock Color To unlock all colors Select Unlock All Colors from the Optimize panel Options menu Editing colors in a palette You can change a color in the current palette by editing it in the Optimize panel color table Editing a color replaces all instances of that color in the image to be exported or to be saved as a bitmap Editing does not replace the color in the original image unless you are working with a bitmap and save the image as such in this case you should also save the image as a PNG file to retain an editable version of the original image To edit a color 1 Do one of the following to open the system color picker e Select a color and click the Edit Color button at the bottom of the Optimize panel e Double click a color in the color table 2 Change the color using the system color picke
442. ow rates create brush strokes that flow over time as with an airbrush 2 To overlap brush strokes for dense strokes select Build up 3 To set the stroke texture change the Texture option The higher the number the more apparent the texture becomes 4 To set texture on the edges enter a number in the Edge Texture text box and select an edge effect from the Edge Effect pop up menu 5 Set the number of tips you want the brush stroke to have For multiple tips enter a Tip Spacing value and select the color variation method You can select Random Uniform Complementary Hue or Shadow ADOBE FIREWORKS CS3 139 User Guide 6 To select a dotted or dashed line select an option from the Dash pop up menu 7 Toset the lengths of dashes and spaces for a dotted line use the three sets of On and Off text input boxes to control the first second and third dashes respectively 8 Click Apply to apply the settings to selected strokes then click OK To modify the brush tip 1 On the Shape tab of the Edit Stroke dialog box select Square for a square tip or deselect it for a round tip 2 Enter values for the brush tip size edge softness tip aspect and tip angle 3 Click Apply then click OK Fireworks has stroke settings for fine tuning the stroke attributes controlled by speed and pressure when you use a Wacom pressure sensitive tablet and pen You can select the stroke attribute to control with the pen To set stroke sensitivity 1
443. p Borders Show Borders Border width Shadow B Border Color Highlight Middle East Cancel lt Back Next gt To set advanced cell properties for the current pop up menu 1 With the desired pop up menu open in the Pop up Menu Editor click the Advanced tab For information on opening an existing pop up menu in the Pop up Menu Editor see Editing pop up menus on page 236 2 Select a width or height constraint from the Automatic Pixels pop up menu Automatic forces the cell height to conform to the text size set in the Appearance tab of the Pop up Menu Editor and the cell width to conform to the menu item that contains the longest text Pixels allows you to enter specific measurements in pixels in the Cell Width and Cell Height text boxes 3 Enter a value in the Cell Padding text box to determine the distance between pop up menu text and the edge of the cell 4 Enter a value in the Cell Spacing text box to set the amount of space between menu cells 5 Enter a value in the Text Indent text box to set the amount of indention for pop up menu text 6 Enter a value in the Menu Delay text box to set the amount of time in milliseconds that the menu remains visible after the pointer is moved away from it 7 Set pop up border properties Show Borders allows you to show or hide pop up menu borders If this option is not selected the following options are disabled Border Width sets the width of the pop up menu border Bo
444. p layer in each document The Web Layer contains web objects such as slices and hotspots used for assigning interactivity to exported Fireworks documents For more information on web objects see Slices Rollovers and Hotspots on page 200 You cannot unshare delete duplicate move or rename the Web Layer You also cannot merge objects that reside on the Web Layer It is always shared across all pages and frames and web objects are visible on every page or frame To rename a slice or hotspot in the Web Layer 1 Double click the slice or hotspot in the Layers panel ADOBE FIREWORKS CS3 164 User Guide 2 Type the new name and then click outside the window or press Enter Note When you rename a slice that name is used when the slice is exported About importing Photoshop grouped layers Photoshop files that contain layers are imported with each layer placed as a separate object on a single Fireworks layer Grouped layers are imported as individual layers as if the layers were ungrouped in Photoshop before being imported into Fireworks The clipping effect on Photoshop grouped layers is lost on import Masking images As the name suggests masks hide or show parts of an object or image You can use several masking techniques to achieve many kinds of creative effects with objects You can create a mask that acts as a cookie cutter cropping or clipping underlying objects or images Or you can create a mask that gives the effec
445. page 5 Click Save to complete the export ti Chapter 17 Automating Repetitive Tasks Web designers often spend lots of time doing repetitive tasks such as optimizing images or converting images to fit within certain constraints Part of the power of Fireworks CS3 is its capability to automate and simplify many tedious drawing editing and file conversion tasks To speed up your editing process you can use Find and Replace to search for and replace elements within a file or elements from multiple files You can find and replace elements such as URLs fonts color text and commands created in the History panel You can use the Batch Process feature to convert entire groups of image files into other formats or to change their color palettes Batch Process can apply custom optimization settings to groups of files You can also resize a group of files making Batch Process an ideal tool for creating thumbnails Using the History panel you can create commands that are shortcuts for commonly used features or create a script that can perform a complex series of steps Fireworks can understand and execute JavaScript so advanced users can automate very complex tasks by writing JavaScript commands and then executing them in Fireworks You can control nearly every Fireworks command or setting through JavaScript using special JavaScript commands that Fireworks can interpret The Extension Manager lets you import install and delete extensions in
446. page Layers can apply to a single page or can be shared across multiple pages Once shared the layers are displayed in yellow to differentiate from unshared Layers Only the top most parent layer can be shared across pages Layers divide a Fireworks document into discrete planes as though the components of the illustration were drawn on separate tracing paper overlays A document can be made up of many layers and each layer can contain many sub layers or objects In Fireworks the Layers panel lists layers and the objects contained in each layer Fireworks layers are similar to layer sets in Adobe Photoshop Photoshop layers are similar to individual Fireworks objects Masking gives you creative control over layers and objects You can apply masks and blending modes from the Layers panel You can also create masks using options on the Select and Modify menus You can use a vector object or a bitmap object to block out part of the underlying image For example if you want to block out part of a photograph so that it appears to have an elliptical frame around it you can paste an elliptical shape as a mask on top of the photo graph All areas outside the ellipse disappear as if cropped showing only the part of the picture inside the ellipse Blending techniques give you another level of creative control You can create unique effects by blending the colors in overlapping objects Fireworks has several blending modes to help you achieve the look you wa
447. page and all objects are displayed visibility and locking attributes are not preserved in this case About exporting Fireworks graphics to other formats for use in Flash You can export Fireworks graphics as JPEG GIF PNG and Adobe Illustrator 7 AI files and then import them into Flash ADOBE FIREWORKS CS3 310 User Guide For information on exporting JPEG and GIF files see Fireworks Help For information on exporting to PNG format see Exporting PNG files with transparency on page 311 For information on importing any of these formats into Flash see Importing exported Fireworks graphics and animations into Flash on page 311 Note Although PNG is the native file format for Fireworks PNG graphic files exported from Fireworks are different from source PNG files you save in Fireworks Exported PNG files are not different from GIFs or JPEGs they only contain image data and don t contain any additional information such as slicing layers interactivity Live Filters or other editable content For more information on PNG source files see Fireworks Help Exporting Fireworks graphics and animations as SWF files Fireworks graphics and animations can be exported as Flash SWF files You can make several choices about how objects are exported Some formatting is lost unless you choose Maintain Appearance in the Flash SWF Export Options dialog box Stroke size and stroke color are maintained The following formatting is lost during e
448. pages by using the URLs for each page The pop up menu in the Link field in either the Property inspector or the URL panel contains a list of URLs for each page in your document Just select one of these page URLs to create a link to that page If you would like your default page URLs to have an extension other than htm use the following procedure VE With your document open select File gt Export 2 Select HTML and images in the Export pop up menu 3 Click the Options button 4 On the General tab select the desired file extension from the Extension pop up menu and click OK 5 Click Cancel in the Export dialog The file extension for the URLs in the Links pop up menu is changed to the new extension Assigning a URL to a web object To assign a URL to a web object 1 Enter the URL in the Link text box 2 Click the Plus button to add the URL 3 Select a web object 4 Select the URL from the URL preview pane Creating a URL library You can group URLs in libraries This keeps related URLs together making them easier to access You can save URLs in the default URL library URLs htm or in new URL libraries that you create You can also import an existing HTML document s URLs and then create a library of them URLs htm and any new libraries you create are stored in the URL Libraries folder in the Adobe Fireworks folder in your user specific Application Data Windows or Application Support Macintosh folder For information
449. panel 1 Select Window gt Auto Shapes to display the Shapes tab if it is not already visible 2 Drag a Auto Shape preview from the Assets panel to the canvas 3 If desired edit the Auto Shape by dragging any of its control points Adding new Auto Shapes to Fireworks You can add new Auto Shapes to Fireworks using the Fireworks Exchange website Some new Auto Shapes will appear in the Shapes tab in the Assets panel and others will appear in the Tools menu grouped with the other Auto Shapes You can also add new Auto Shapes to Fireworks by writing the JavaScript code for the Auto Shapes yourself For more information see Extending Fireworks To add new Auto Shapes to Fireworks 1 Select Window gt Auto Shapes to display the Shapes panel if it s not already visible 2 From the Shapes panel s Options menu select Get More Auto Shapes Fireworks connects to the web and navigates to the Fireworks Exchange website 3 Follow the onscreen instructions to select new Auto Shapes and add them to Fireworks ADOBE FIREWORKS CS3 93 User Guide Drawing freeform paths You can draw freeform vector paths with the Vector Path tool much as you draw using a felt tip marker or crayon The Vector Path tool is located in the Pen tool pop up menu You can change the stroke and fill attributes of paths drawn with the Vector Path tool See Applying Color Strokes and Fills on page 126 Using the Vector Path tool The Vector Path tool
450. pe vector objects directly instead of manipulating points You can push or pull any part of a path regardless of where the points are located Fireworks automatically adds moves or deletes points along the path as you change the vector object s shape A o a Freeform tool pulling a path segment A Specified length Ct oe Freeform tool pushing a path segment ADOBE FIREWORKS CS3 101 User Guide As you move the pointer over a selected path it changes to the push or pull pointer depending on its location relative to the selected path Pointer Meaning leo The Freeform tool is in use The Freeform tool is in use and the pull pointer is in position to pull the selected path The Freeform tool is in use and the pull pointer is pulling the selected path The Freeform tool is in use and the push pointer is active The Reshape Area tool is in use and the reshape area pointer is active The area from the inner circle to the outer circle represents reduced strength QOZ When the pointer is directly over the path you can pull the path When the pointer is not directly over the path you can push the path You can change the size of the push or pull pointer Note The Freeform tool also responds to pressure from a Wacom or other compatible tablet To pull a selected path 1 a Select the Freeform tool in the Tools panel 2 Move the pointer directly over the selected path XN The poin
451. perform an action A custom shortcut set is always based on a preinstalled set Note In Fireworks shortcuts to tools cannot include modifier keys Control Shift and Alt Windows or Command Shift Option and Control Macintosh Tool shortcuts consist of a single letter or number key To create a custom or secondary shortcut for a menu command tool or miscellaneous action 1 Select Edit gt Keyboard Shortcuts to open the Keyboard Shortcuts dialog box 2 Click the Duplicate Set button 3 Enter a name for the custom set in the Duplicate Set dialog box and click OK The name of the new custom menu appears in the Current Set text box 4 Select the appropriate shortcut category from the Commands list Menu Commands creates a custom shortcut for any command accessed through the menu bar Tools creates a custom shortcut for any tool on the Tools panel Miscellaneous creates a custom shortcut for a range of predefined actions Once selected all possible shortcuts in the particular category appear in the Commands scroll list 5 Select the command whose shortcut you want to modify from the Commands list If a shortcut exists it is displayed in the Shortcuts list 6 Click in the Press Key text box and press the desired keys for the new shortcut on the keyboard If the key combination you select is already used by another shortcut a warning message appears below the Press Key text box ADOBE FIREWORKS CS3 350 User Guide 7 Do on
452. perties on other tabs To set the position for a pop up menu by dragging it 1 Ifnecessary do one of the following to display the Web Layer Click the Show Slices and Hotspots button in the Tools panel Click the Eye column in the Layers panel 2 Select the web object that is the trigger for the pop up menu w Drag the pop up menu outline to another location in the workspace Editing pop up menus In the Pop up Menu Editor you can edit or update the contents of a pop up menu rearrange the menu items or change other properties on any of the four tabs To edit a pop up menu in the Pop up Menu Editor 1 If necessary do one of the following to display the Web Layer Click the Show Slices and Hotspots button in the Tools panel Click the Eye column in the Layers panel 2 Select the slice to which the pop up menu is attached 3 Double click the pop up menu s blue outline in the workspace The Pop up Menu Editor opens with your pop up menu entries displayed 4 Make the desired modifications on any of the four tabs and click Done To change a pop up menu entry 1 With the desired pop up menu displayed in the Pop up Menu Editor click the Content tab 2 Double click the Text Link or Target text boxes and edit the menu text 3 Click outside the entry list to apply the change 4 Click Done ADOBE FIREWORKS CS3 237 User Guide To move an entry in the pop up menu 1 With the desired pop up menu displayed in the Pop up Me
453. perty inspector which has no effect on other instances of the symbol You can also change the symbol properties using the Symbol Properties panel To edit the symbol itself you can double click the symbol instance and edit the symbol in the Symbol Editor These edits affect the current symbol and all other instances of the symbol Note For most types of edits modifying an instance affects the symbol and all other instances There are some excep tions however For more information see Editing instances on page 193 To create a rich graphic symbol 1 Create an object with attributes that may need to be customized This symbol could have the bullet color and the bullet number as customizable options 2 When creating the object customize the names of the features that you want to be editable by typing a name into the Layers panel For example an editable text field could be named label This name will be used in the JavaScript file Note When naming features do not include any spaces in the name This will cause a JavaScript error So for example number label cannot be used as a name but number_label can 3 Select the objects and select Modify gt Symbol gt Convert to Symbol 4 Type a name for the symbol in the Name text box of the Convert to Symbol dialog box 5 Select Graphic as the symbol type and select Save to Common Library Then click OK The software prompts you for a location to save your new symb
454. pg My Documents r My Computer File name My Network Files of type All readable files Include current open files ADOBE FIREWORKS CS3 User Guide Batch Process fr i thumbnails be iDisk a pe DSC_0981 jpg network mening 0sc_0982 p9 mic a Dsc_0983 jpg Bi silver DsC_13 a DSC_0985 jpg Bae PAN T Dsc_0987 jpg IB Desktop C evels jpg DSC_0988 jpg me T psc_0989 j gt MACROMEDIA T DSC_1323JPG ee 3353 lps Kind Document amp Photography T DSC_1324JPG e07 Size 56 KB N co Jpg Created 5 17 05 T DSC_1325JPG SFE 5 Accounts E Ee t3_DSC_0998 jpg Modified 5 17 05 a Projects a i DSC_1000 jpg me Bat Dsc_1001 jpg Groves Ha are Ax Applications S DSC_1004 jpg o t E D5C 1439JPG E opo o ENRE a DSC_1008 jpg ij Movies aerate DSC_1010 jpg Q Music e E Dsc 101 PS z J DSC_1013 jpg P Pictures DSC_1454JPG BAB C1016 ing thumbnails my an x EEE DSC_0997 jpg C Next Dsc dd Add All C Include Current Open Files New Folder Cancel Open Note If the files you select are locked or checked in from a Dreamweaver site you are prompted to unlock them or check them out before proceeding 2 Click one of the following in the Batch Windows or Batch Process Macintosh dialog box Add adds selected files and folders to the list of files to batch process If a folder is selected all valid readable files in the folder
455. phics in the Preview 2 Up or 4 Up views in the workspace You can slice an image into smaller parts and then optimize each part in the format that best suits the content For added optimization flexibility you can use selective JPEG compression to focus the most important part of a JPEG while reducing the quality of the background After you optimize your graphics the next step is to export them for use on the web From your Fireworks source PNG document you can export files of a number of types including JPEG GIF animated GIF and HTML tables containing sliced images in multiple file types For more information see Optimizing and Exporting on page 257 About vector and bitmap graphics Computers display graphics in either vector or bitmap format Understanding the difference between the two formats helps you understand Fireworks which contains both vector and bitmap tools and is capable of opening or importing both formats ADOBE FIREWORKS CS3 14 User Guide About vector graphics Vector graphics render images using lines and curves called vectors that include color and position information For example the image of a leaf may be defined by a series of points that describe the outline of the leaf The color of the leaf is determined by the color of its outline the stroke and the color of the area enclosed by the outline the fill When you edit a vector graphic you modify the properties of the lines and curves that d
456. plication Support Adobe Fireworks9 Common Library Custom Symbols Macintosh To create a rich symbol a JavaScript file must be created and saved with a JSF extension in the same location and with the same name as the symbol For example mybutton graphic png would have a JavaScript file named mybutton jsf ADOBE FIREWORKS CS3 User Guide The Create Symbol Script panel allows non programmers to assign some simple symbol attributes and create the JavaScript file automatically To open this panel select Create Symbol Script from the Commands menu The JavaScript file Two functions in the JavaScript file must be defined in order to add editable parameters to the symbol e function setDefaultValues defines the parameters that can be edited and the default values of these parameters e function applyCurrentValues applies the values entered through the Symbol Properties panel to the graphic symbol The following is a sample JSF file for creating a custom symbol function setDefaultValues var currValues new Array to build symbol properties currValues push name Selected value true type Boolean Widget elem customData currentValues currValues function applyCurrentValues var currValues Widget elem customData currentValues Get symbol object name var Check Widget GetObjectByName Check Check visible curr Values 0 value switch Widget opCode case 1 setDefaultValues
457. port Options panel Use these options to set up the export of the images Export images Select this option to export the full sized and thumbnail images with the specified settings Deselect this option to export only the XML file Generate XML Select this option to generate the slideshow xml file for the images and directories selected for the slideshow Deselect this option to export only the images Export path Location where the slideshow and associated files will be exported or generated Width and Height Width and height of the exported full sized images Images are scaled to fit within the specified size while keeping their original aspect ratios Export thumbnails Select this option to export the thumbnails along with the full sized images Width and Height Width and height of the exported thumbnail images Image Quality Determine the output quality of the exported full sized and thumbnail images A setting of 100 indicates the best possible quality Enlarge images to fit If the original image is smaller than the specified width and height this option will enlarge it to match the export size Creating a custom Fireworks album player If you want to create your own player you can create a custom player to work with the Create Slideshow command In addition the source files of the default slideshow players are included with the software so that you can modify or skin the players Follow the steps below to add your custom p
458. ppropriate sections throughout Using Fireworks or Fireworks Help Y Properties J Pectangetool B s A MMs a erer E B oa a Edge Anti Alias w Edge 0 v w X Texture Grain v 0 w Texture Grain v 0 v H Y nspa A Using panels Panels are floating controls that help you edit aspects of a selected object or elements of the document Panels let you work on frames layers symbols color swatches and more Each panel is draggable so you can group panels together in custom arrangements Some panels may be grouped together by default while others are not The following panels may contain other panels e Assets e Colors e Page Layers Frames and History e Optimize and Align Most of the panels are not typically grouped with other panels by default but you can group them if you want When you group panels together all panel group names appear in the panel group title bar You can however assign any name you like to panel groups The Optimize panel lets you manage the settings that control a file s size and file type and work with the color palette of the file or slice to be exported The Layers panel organizes a document s structure and contains options for creating deleting and manipulating layers The Common Library panel displays the contents of the Common Library folder which contains symbols The Pages panel displays the pages in the current file and contains options for manipu
459. ption is enabled in Dreamweaver for the site in which the document lives Undo Check Out undoes Check Out of the local file and checks it in overwriting the local file with the remote copy Undo Check Out is enabled in Fireworks only if the Enable File Check In and Check Out option is enabled in Dreamweaver for the site in which the document lives Note File Management commands are enabled in Fireworks only if your document lives in a Dreamweaver site folder with a remote server defined Fireworks File Management commands can be used only for files that live in sites that use the Local Network and FTP transport methods Files in sites that uses FTP or third party transport methods such as SourceSafe WebDAV and RDS cannot be transported to and from the remote server from within Fireworks For more information about the File Management menu see Working with Dreamweaver on page 292 Chapter 16 Using Fireworks with Other Applications Whether youre creating web content or multimedia content Fireworks is an essential component of any designer s toolbox Fireworks works well with other applications offering a variety of integration features that streamline the design process You can export Fireworks graphics to many applications including other Adobe products When used with other Adobe applications Fireworks offers powerful integration features Fireworks can be opened to edit selected graphics from inside many Adobe applications s
460. r The new color replaces every instance of the replaced color in the preview area ADOBE FIREWORKS CS3 270 User Guide Note Right click Windows or Control click Macintosh a color in the palette to display a shortcut menu of edit options for the color Using websafe colors Websafe colors are colors that are common to both Macintosh and Windows platforms These colors are not dithered when viewed in a web browser on a computer display set to 256 colors Fireworks has several methods of applying and using websafe colors To force all colors to be websafe colors Select Web 216 from the Indexed Palette pop up menu in the Optimize panel To create an adaptive palette that favors websafe colors Select Web Adaptive from the Indexed Palette pop up menu in the Optimize panel Non websafe colors that are close to websafe colors are converted to the closest websafe color To force a color to its closest websafe equivalent 1 Select a color in the Optimize panel color table 2 Click the Snap to Web Safe button If you save a Fireworks PNG changing colors to websafe in the Optimize panel affects only the exported version of the image not the actual image Saving palettes You can save custom palettes as external palette files You can use saved palettes with other Fireworks documents or in other applications that support external palette files such as Adobe FreeHand Adobe Flash and Adobe Photoshop Saved palette files have th
461. r more information see Creating Slideshows on page 250 Hierarchical layers In Fireworks CS3 the structure of layers in a document can be as simple or as complex as required and all hierar chical layers are preserved When creating a new file all items are organized at the same level in a non hierarchical manner You can create new sub layers as needed and move items into them or move elements from one layer to another at any time You can also create multiple sub layers and group them Use layers for greater design flexibility Hierarchical layers Use the Layers panel to create and organize layers as you need them For more information see Working with layers on page 159 ADOBE FIREWORKS CS3 10 User Guide Work with Photoshop files With Fireworks CS3 you can directly import native files from Photoshop Achieving a whole new level of function ality Adobe is redefining the concept of what integration should be Fireworks design comps and images can now be saved as native Photoshop files and opened in either Photoshop or Fireworks CS3 with layer information preserved Improved Photoshop compatibility Photoshop layer effects Photoshop provides a variety of effects such as shadows glows bevels over lays and strokes that let the user change the appearance of a layer s contents Fireworks CS3 now preserves these editable Photoshop layer effects when importing or opening a PSD file You can als
462. r settings without starting Photoshop You can also search leading stock libraries and download royalty free images by way of Adobe Stock Photos e Work with Adobe Version Cue managed assets e Perform automated tasks such as batch commands e Synchronize color settings across color managed Creative Suite components Start a real time web conference to share your desktop and review documents ADOBE FIREWORKS CS3 329 User Guide Flex integration for rich Internet application layouts MXML export As designers continue to push the technology envelope better tools and integration become more important than ever Fireworks can help in the development of next generation rich Internet applications referred to as RIAs by making it possible to export common library assets as known components for use in Adobe Flex Builder The best part is there s no work necessary on your part because Fireworks exports the necessary Flex code MXML for you with styling and absolute positioning maintained Now you can easily create a Flex application layout in Fireworks leveraging Flex common library assets and export it as MXML for loading into Flex Builder To export MXML data 1 Choose File gt Export 2 Choose MXML and Images in the Export pop up menu 3 Select the Put images in subfolder option if you want to save the images in a separate folder from the MXML code 4 Select the Current page only option to export only the currently selected
463. r the animation symbol You can set the degree and direction of movement scaling opacity fading in or out and angle and direction of rotation For more information see Editing animation symbols on page 240 238 ADOBE FIREWORKS CS3 239 User Guide Note Degree and direction of movement options are found only in the Animate dialog box 3 Use the Frame Delay controls in the Frames panel to set the speed of the animated motion For more information see Setting the frame delay on page 242 4 Optimize the document as an animated GIF For more information see Optimizing an animation on page 248 5 Export the document as an Animated GIF or SWE or save it as a Fireworks PNG and import it into Flash for further editing For more information see Animation export formats on page 248 Working with animation symbols Animation symbols perform the action in your Fireworks file like actors in a movie For example in an animation of three geese flying across the sky each goose is a cast member An animation symbol can be any object you create or import and you can have many symbols in one file Each symbol has its own properties and animates independently So you can create symbols that move across the screen while others fade or shrink You do not need to use symbols for every aspect of your animation However using symbols and instances for graphics that appear in multiple frames keeps your animation file size small
464. r to set the distance of the shadow from the object e Select the Solid Color check box to apply solid color to the shadow e Select the color box to open the color pop up window and set the shadow color e If you don t want to see a preview of the solid shadow clear the Preview check box 3 When you finish click OK To apply a drop shadow or inner shadow 1 Click the Add Live Filters button in the Property inspector then select a shadow option from the pop up menu e Shadow and Glow gt Drop Shadow Shadow and Glow gt Inner Shadow 2 Edit the filter settings in the pop up window Drag the Distance slider to set the distance of the shadow from the object e Select the color box to open the color pop up window and set the shadow color e Drag the Opacity slider to set the percentage of transparency in the shadow Drag the Softness slider to set the sharpness of the shadow Drag the Angle dial to set the direction of the shadow e Select Knock Out to hide the object and display the shadow only 3 When you finish click outside the window or press Enter to close it To apply a glow 1 Click the Add Filters button in the Property inspector then select Shadow and Glow gt Glow 2 Edit the filter settings in the pop up window e Click the color box to open the color pop up window and set the glow color Drag the Width slider to set the width of the glow e Drag the Opacity slider to set the percentage of transparency i
465. rag to draw the object Note A newly created stroke assumes the color currently displayed in the Stroke Color box To remove all stroke attributes from a selected object do one of the following e Select None from the Stroke Category pop up menu in the Property inspector or the Stroke Options pop up window Click the Stroke Color box in either the Tools panel or the Property inspector and click the Transparent button ADOBE FIREWORKS CS3 138 User Guide Creating custom strokes You can use the Edit Stroke dialog box to change specific stroke characteristics Edit Stroke Options Shape Sensitivity Ink amount POWE lv Spacing Flow rate fo M Build up Texture 0 lv Edge texture 0 v Edge effect None Tips Tip spacing Variation Dash The Edit Stroke dialog box has three tabs Options Shape and Sensitivity The stroke preview at the bottom of each tab shows the current brush with the current settings The current pressure and speed sensitivity settings are reflected in the preview by a stroke that tapers or fades or otherwise changes from left to right To open the Edit Stroke dialog box 1 Select Stroke Options from the Stroke Category pop up menu in the Property inspector 2 Click Advanced The Edit Stroke dialog box opens To set general brush stroke options 1 On the Options tab of the Edit Stroke dialog box set the ink amount spacing and flow rate Higher fl
466. ranging the stacking order of selected objects see Stacking objects on page 59 Note Using a path operation removes all pressure and speed information from the affected paths Combining path objects You can combine path objects into a single path object You can connect the end points of two open paths to create a single closed path or you can join multiple paths to create a composite path 103 ADOBE FIREWORKS CS3 User Guide To create one continuous path from two open paths 1 Select the Subselection tool in the Tools panel 2 Select two end points on two open paths 3 Select Modify gt Combine Paths gt Join To create a composite path 1 Select two or more open or closed paths 2 Select Modify gt Combine Paths gt Join To break apart a composite path 1 Select the composite path 2 Select Modify gt Combine Paths gt Split To combine selected closed paths as one path enclosing the entire area of the original paths Select Modify gt Combine Paths gt Union The resulting path assumes the stroke and fill attributes of the object that is placed farthest back Converting a path to a marquee selection You can convert a vector shape to a bitmap selection and then use the bitmap tools to edit the new bitmap To convert a path to a marquee selection 1 Select a path 2 Select Modify gt Convert Path to Marquee 3 Inthe Convert Path to Marquee dialog box select an Edge setting for the marquee selec
467. rder Color Shadow and Highlight allow you to modify the color of pop up menu borders Note Many of these options are disabled if the Image Cell type is selected on the Appearance tab ADOBE FIREWORKS CS3 235 User Guide 8 Do one of the following to complete the pop up menu or continue building it Click Next to move to the Position tab or select another tab to continue building the pop up menu e Click Done to close the Pop up Menu Editor In the workspace the hotspot or slice on which you built the pop up menu displays a blue behavior line attached to an outline of the top level of the pop up menu Note To view a pop up menu press F12 to preview it in a browser The previews in the Fireworks workspace do not display pop up menus Positioning pop up menus and submenus The Position tab of the Pop up Menu Editor lets you specify a pop up menu s position You can also position a top level pop up menu by dragging its outline in the workspace when the Web Layer is visible Pop up Menu Editor Content Appearance Advanced Position Menu position z x 0 0 Submenu position To set the position for a pop up menu using the Pop up Menu Editor 1 With the desired pop up menu open in the Pop up Menu Editor click the Position tab For information on opening an existing pop up menu in the Pop up Menu Editor see Editing pop up menus on page 236 2 Do one of the following to define the menu position e Click a
468. red from the copyright owner Any references to company names in sample templates are for demonstration purposes only and are not intended to refer to any actual organization Adobe the Adobe logo Adobe Bridge Director Dreamweaver Flash Flex Builder FreeHand GoLive HomeSite Illustrator Photoshop and XMP are either registered trade marks or trademarks of Adobe Systems Incorporated in the United States and or other countries Apple and Macintosh are trademarks of Apple Inc registered in the United States and other countries Microsoft and Windows are either registered trademarks or trademarks of Microsoft Corporation in the United States and or other countries All other trademarks are the property of their respective owners Adobe Systems Incorporated 345 Park Avenue San Jose California 95110 USA Notice to U S Government End Users The Software and Documentation are Commercial Items as that term is defined at 48 C F R 2 101 consisting of Commercial Computer Software and Commercial Computer Software Documentation as such terms are used in 48 C ER 12 212 or 48 C F R 227 7202 as applicable Consistent with 48 C E R 12 212 or 48 C ER 227 7202 1 through 227 7202 4 as applicable the Commercial Computer Software and Commercial Computer Software Documentation are being licensed to U S Government end users a only as Commercial Items and b with only those rights as are granted to all other end users pursuant to
469. replaces all instances of the unrecognized word in the same manner Delete removes a duplicate word when one is found When it finishes checking the spelling in a document Fireworks closes the Check Spelling dialog box and displays a message indicating that the spell check is complete Customizing spell checking You can customize the way Fireworks spell checks documents using the Spelling Setup dialog box From here you can specify one or more language dictionaries for Fireworks to use during spell checking as well as edit the words in your personal dictionary You can also specify which items you want Fireworks to spell check including Internet and file addresses To customize spell checking in Fireworks 1 Do one of the following e Select Text gt Spelling Setup e Click the Setup button in the Check Spelling dialog box ADOBE FIREWORKS CS3 125 User Guide 2 Select the desired options in the Spelling Setup dialog box e Select one or more language dictionaries Note The Macromedia tlx option is always selected at the top of the dictionary list This is the file that contains your custom spelling dictionary Browse for a custom dictionary by clicking the folder icon beside the Personal Dictionary Path text box Edit the custom dictionary by clicking the Edit Personal Dictionary button and adding deleting or modifying words in the list e Select the types of words you want to include in the spell check 3 Click OK
470. review pop up menu at the bottom of the preview window To switch the Original view to an optimized view from 2 Up or 4 Up view 1 Select the view containing the original 2 Select Image Preview from the Preview pop up menu To hide or show the slice overlay Select View gt Slice Overlay Note This command is useful when you are in either the Preview 2 Up preview or 4 Up preview ADOBE FIREWORKS CS3 265 User Guide Choosing a file type You should base your choice of file format upon the design and use of your graphic A graphic s appearance can vary from one format to another especially when different types of compression are used In addition only certain graphic file types are accepted by most web browsers Still other file types are ideal for print publishing or use in multimedia applications The following file types are available GIF or Graphics Interchange Format is a popular web graphic format GIFs contain a maximum of 256 colors GIFs can also contain a transparent area and multiple frames for animation Images with areas of solid color compress best when exported as GIFs A GIF is usually ideal for cartoons logos graphics with transparent areas and animations JPEG was developed by the Joint Photographic Experts Group specifically for photographic or high color images JPEG supports millions of colors 24 bit The JPEG format is best for scanned photographs images using textures images with gradient color
471. reworks HTML to the Clipboard for use in HomeSite A fast way to place Fireworks generated HTML in HomeSite is to copy it to the Clipboard from Fireworks and then paste it directly into a HomeSite document When you copy Fireworks HTML to the Clipboard the required images are exported to a location you specify Note Before copying to the Clipboard make sure to set the HTML type to Generic in the HTML Setup dialog box For more information see Fireworks Help To copy Fireworks HTML for use in HomeSite Copy HTML to the Clipboard in Fireworks and then paste it into an new HomeSite document For more infor mation see Fireworks Help Copying code from an exported Fireworks file and pasting it into HomeSite You can open an exported Fireworks HTML file in HomeSite and then manually copy and paste only the desired sections into another HomeSite document Note Before exporting make sure to set the HTML type to Generic in the HTML Setup dialog box For more infor mation see Fireworks Help To copy code from an exported Fireworks file and paste it into HomeSite Export a Fireworks HTML file and then copy and paste the desired code into an existing HomeSite document For more information see Fireworks Help Updating Fireworks HTML exported to HomeSite The Update HTML command allows you to make changes to a Fireworks HTML document you ve previously exported to HomeSite Note Before updating HTML make sure to set the HTML type to Gen
472. rkshop covers a wide range of subjects for Adobe Fireworks CS3 including e Using the Pages panel e Rapid prototyping with rich symbols e Understanding layers and layout e Generating symbol property scripts Videos also show you how to use Fireworks CS3 with other Adobe products for example Importing Photoshop files e Understanding the Fireworks and Flash workflow e Understanding the Photoshop Illustrator and Fireworks workflow Extras You have access to a wide variety of resources that will help you make the most of your Adobe software Some of these resources are installed on your computer during the setup process additional helpful samples and documents are included on the installation or content DVD Unique extras are also offered online by the Adobe Exchange community at www adobe com go exchange Installed resources During software installation a number of resources are placed in your application folder To view those files navigate to the specific application folder on your computer Windows startup drive Program files Adobe Adobe Fireworks CS3 e Mac OS startup drive Applications Adobe Fireworks CS3 Depending on your Adobe product the application folder may contain the following ADOBE FIREWORKS CS3 6 User Guide Plug ins Plug in modules are small software programs that extend or add features to your software Once installed plug in modules appear as options in the Import or Export menu as file formats in
473. rm For example if you are working on the Windows platform you can use this command to preview how a document would appear on the Macintosh platform Changing the canvas When you first create a new Fireworks document you must specify document characteristics You can modify the size and color of the canvas and change the image s resolution anytime using the Modify menu or the Property inspector As you work with the document you can also rotate the canvas and trim unwanted parts Changing canvas size color and resolution Fireworks makes it easy to change to the canvas size canvas color and image resolution To change the canvas size 1 Do one of the following e Select Modify gt Canvas gt Canvas Size e Choose Select gt Deselect click the Pointer tool to display the document properties in the Property inspector then click the Canvas Size button 2 Enter the new dimensions in the Width and Height text boxes 3 Click an Anchor button to specify which sides of the canvas Fireworks will add to or delete from and click OK Note By default the center anchor is selected indicating that changes to the size of the canvas are made on all sides ADOBE FIREWORKS CS3 35 User Guide To change the canvas color from the Modify menu 1 Select Modify gt Canvas gt Canvas Color 2 Select White Transparent or Custom If you select Custom click a color in the Swatches pop up window To select the canvas color from the Propert
474. rmation see Creating Fireworks PNG files from HTML files on page 17 In Fireworks UTF 8 encoding is turned on by default so that any HTML document you export can display characters from multiple character sets You can turn off UTF 8 encoding if you prefer To export documents without UTF 8 encoding 1 Select File gt HTML Setup 2 On the Document Specific tab clear the UTF 8 encoding box and click OK ADOBE FIREWORKS CS3 287 User Guide Note For more information on HTML setup options see Setting HTML export options on page 287 3 Export your document using any of the methods available for exporting or copying HTML For information about the various ways you can export and copy HTML from Fireworks see Exporting HTML on page 280 Setting HTML export options The HTML Setup dialog box allows you to define how Fireworks exports HTML These settings can be document specific or can be used as your default setting for all HTML exports Changes made in the Document Specific tab affect the current document only but you can use these settings as defaults for new documents if you click the Set Defaults button before closing the HTML Setup dialog box General and Table settings are global preferences and affect all new documents To define how Fireworks exports HTML 1 Select File gt HTML Setup or click the Options button in the Export dialog box 2 Inthe General tab select from the following options e Select an HTM
475. rner to see all properties Transforming text You can transform text blocks in the same ways you can transform other objects You can scale rotate skew and flip text to create unique text effects ADOBE FIREWORKS CS3 122 User Guide You can still edit the transformed text although severe transformations may make the text difficult to read When a text block transformation causes text to be resized or scaled the resulting font size appears in the Property inspector when the text is selected Converting text to paths You can convert text to paths and then edit the shapes of the letters as you would any vector object All vector editing tools are available after you convert text to paths However you can no longer edit it as text To convert selected text to paths Select Text gt Convert to Paths Text converted to paths retains all of its visual attributes but you can edit it only as paths You can edit the converted text as a group or edit the converted characters individually PRIP To edit converted text character paths individually do one of the following e Select the converted text with the Subselection tool e Select the converted text and select Modify gt Ungroup You can edit the individual converted character paths using the vector editing tools For more information on editing paths see Editing paths on page 100 You can create a composite path from a text object that was created by converting text
476. rollover behavior Note You can also add multiple behaviors using the Behaviors panel For more information see Using the Behaviors panel to add interactivity to slices on page 209 To apply more than one rollover to a selected slice 1 Drag a behavior handle from the selected slice to the edge of the same slice or onto another slice Dragging the handle to the upper left edge of the same slice creates a swap image and dragging it to another slice creates a disjoint rollover 2 Select the frame of the swap image and click OK 3 Create more rollovers by repeating steps 1 and 2 as many times as desired Removing a drag and drop rollover You can easily remove a drag and drop rollover from a slice hotspot or button To remove a drag and drop rollover from a selected web object or button 1 Click on the blue behavior line you want to remove 2 Click OK to remove the swap image behavior Using the Behaviors panel to add interactivity to slices In addition to rollovers you can attach other types of interactivity to slices using the Behaviors panel You can create custom interactions by editing existing behaviors Note Although you can create simple disjoint and complex rollovers with the Behaviors panel the drag and drop rollover method is recommended For more information see Adding simple interactivity to slices on page 206 The following behaviors are available in Fireworks Simple Rollover adds a rollover behavior
477. rp as Bicubic e Soft interpolation which was used in Fireworks 1 gives a soft blur and eliminates sharp details This method is useful when others produce unwanted artifacts ADOBE FIREWORKS CS3 347 User Guide e Nearest Neighbor interpolation results in jagged edges and sharp contrasts with no blurring The effect is similar to zooming in or out on an image with the Zoom tool Faster but less accurate resampling is deselected by default It allows you to control the speed of resampling within Fireworks Launch options The Show start page option controls whether the Fireworks startup page displays when you open the application If this option is deselected the application opens directly into the workspace Saving files Add Preview Icons Macintosh only allows you to display or hide thumbnails of Fireworks PNG files on your hard disk Deselecting this option displays the traditional Fireworks icon used for Fireworks PNG files This option takes effect after you save the file Editing preferences The editing preferences control pointer appearance and visual cues for working with bitmap objects Delete objects when cropping permanently deletes pixels or objects that are outside the bounding box of a selection when you select Edit gt Crop Document or Modify gt Canvas gt Canvas Size Delete paths when converting to marquee permanently deletes the path after it has been converted to a marquee Brush size painting cursors sets the
478. rrent frame You can import the entire contents of a page including frames layers and objects as a Flash movie clip or you can import all content onto a single new layer With vector and text objects you can maintain their editability completely or you can forgo all editability and choose to import the Fireworks PNG file as a single flattened bitmap image To import a Fireworks PNG into Flash 1 Save the desired document in Fireworks For information on saving files see Fireworks Help 2 Switch to an open document in Flash 3 Optional Click the keyframe and layer onto which you want to import the Fireworks content 4 Select File gt Import 5 Navigate to and select the desired PNG file from the Import dialog box and click OK ADOBE FIREWORKS CS3 User Guide The Import Fireworks Document dialog box appears Import Fireworks Document C Import as a single flattened bitmap Import All Pages Into New frames as movie clips Objects Import as bitmaps to maintain appearance O Keep all paths editable Text Import as bitmaps to maintain appearance O Keep all text editable f Cancel Do one of the following a Select the Import as a Single Flattened Bitmap option if you want to import the file as a single bitmap image and lose all editability If the PNG has multiple pages only the first page is imported Note If this option is selected none of the other options in the dialog box are available
479. rs button and then select Adjust Color gt Brightness Contrast from the Filters pop up menu e Select Filters gt Adjust Color gt Brightness Contrast Note Applying a filter from the Filters menu is destructive that is it cannot be undone except when Edit gt Undo is an option To maintain the ability to adjust turn off or remove this filter apply it as a Live Filter as described in the first bulleted option in this step For more information see Using Live Filters on page 147 3 Drag the Brightness and Contrast sliders to adjust the settings Values range from 100 to 100 4 Click OK Changing object colors You can use the Color Fill Live Filter to change the color of objects quickly either by replacing the pixels entirely with a given color or by blending a color into an existing object When you blend colors the color is added on top of the object Blending a color into an existing object is much like using Hue Saturation however blending lets you apply a specific color from a color swatch panel quickly ADOBE FIREWORKS CS3 77 User Guide To add a Color Fill Live Filter to a selected object 1 In the Property inspector click the Add Live Filters button and then select Adjust Color gt Color Fill from the Filters pop up menu 2 Select a blending mode The default mode is Normal For information about each blending mode see About blending modes on page 179 3 Select a fill color from the color box pop up
480. rsecting 48 smoothing 50 transferring to another object 50 masks 164 adding objects to a masked selection 178 bitmap 165 creating empty 170 deleting 178 disabling 178 enabling 178 grouping objects to form a mask 172 modifying 175 moving with masked objects 174 replacing 178 text as a mask 169 using an existing object as 167 169 vector 164 master pages changing to normal page 157 creating 157 linking to 157 removing layers 157 merging paths 99 103 INDEX 359 midtones 72 mirroring See flipping objects mobile phone graphics 17 mobile phone graphics See WBMP files modes entering bitmap 12 entering vector 12 vector 84 Motion Blur filter 79 mouse events 210 Mouse Highlight preference 347 MXML export 329 N nav navigation bars creating 228 Down state 210 Over state 210 Restore behavior 210 navigating a document 31 navigation shortcuts 3 nearest neighbor interpolation scaling method 347 nested tables 215 new document matching Clipboard size 15 new features 8 Numeric Transform command 57 o object oriented graphics 14 objects converting to animation 239 creating bitmaps 62 distorting 57 grouping 58 merging 162 moving selected 53 removing an effect 152 selecting 41 selecting alpha channel 48 skewing 56 slanting 56 stacking 59 ungrouping 58 objects locating pasted 19 onion skinning Button Editor 220 custom viewing 246 defined 245 multiframe editing 246 turning off 246
481. s Gaussian Blur and Unsharp Mask were once available only as irreversible plug ins or filters In addition to these you can add third party plug ins to be used in Fireworks as Live Filters If you prefer you can use these filters in the traditional manner using the Filters menu For more information see Adjusting bitmap color and tone on page 71 This chapter contains the following topics Applying Live Filters on page 147 e Editing Live Filters on page 152 Applying Live Filters You can apply one or more Live Filters to selected objects using the Property inspector Each time you add a new Live Filter to the object it is added to the list in the Add Filters pop up menu in the Property inspector You can turn each Live Filter on or off None Options b Adjust Color gt Inner Bevel Blur gt Inset Emboss Noise gt Outer Bevel b Other gt Raised Emboss E Shadow and Glow Sharpen gfo Photoshop Live Effects Filters Filters pop up menu in the Property inspector When you select objects eligible for Live Filters the location of the Live Filters options differs slightly depending on whether the Property inspector is at full height or half height e When the Property inspector is maximized to full height use the Add Live Filters button the Delete Live Filters button and the list of applied Live Filters displayed in the Property inspector When the Property inspector is at h
482. s preserving any custom kerning or spacing you entered in Fireworks Editability as text is lost 7 Set the quality of JPEG images using the JPEG Quality pop up slider 8 Select the frames to be exported and the frame rate in seconds 9 Click OK 10 Click Save in the Export dialog box For information on importing an exported SWF file into Flash see Importing exported Fireworks graphics and animations into Flash on page 311 Exporting PNG files with transparency The PNG format supports transparency with 32 bit color images You can import Fireworks PNG source files directly into Flash You can also create transparency with an 8 bit PNG file With an 8 bit PNG file you get excellent transparency results and better file compression than with the GIF file format You can export Fireworks 8 bit PNG graphics with transparency for insertion into Flash To export an 8 bit PNG file with transparency 1 In Fireworks choose Window gt Optimize to open the Optimize panel if it isn t already open 2 Select PNG 8 as the Export file format and Alpha Transparency from the Transparency pop up menu 3 Select File gt Export 4 Select Images Only from the Save as Type pop up menu Name the file then click Save For information on importing exported PNG files into Flash see Importing exported Fireworks graphics and animations into Flash on page 311 Importing exported Fireworks graphics and animations into Flash You use the Import co
483. s such as headers and links should appear With CSS you can control the style and layout of multiple web pages at once CSS layers can overlap and be stacked on top of one another In Fireworks normal HTML output does not overlap To export a graphic in CSS layers 1 Select File gt Export 2 In the Export dialog box type a filename and select a destination folder 3 Select CSS Layers from the Export pop up menu 4 Inthe Source pop up menu select one of the following Fireworks Layers exports all layers as CSS layers ADOBE FIREWORKS CS3 286 User Guide Fireworks Frames exports all frames as CSS layers Fireworks Slices exports the slices in the document as CSS layers 5 Select Trim Images to automatically crop the exported images and layers to fit the objects 6 Select Put Images in Subfolder to choose a folder for images 7 Click Export Exporting XHTML In the not too distant future XHTML is expected to replace HTML as the standard for displaying web content Not only is XHTML backward compatible meaning that most current web browsers can view it but it can also be read by any device that displays XML content such as PDAs mobile phones and other handheld devices XHTML is a combination of HTML the current standard for formatting and displaying web pages and XML Exten sible Markup Language XHTML contains the elements of HTML while adhering to the more strict syntax rules of XML To support this standard Firew
484. s Document window to sample a color The color appears in the active fill color box and the nearest web safe color is displayed below it On the Selector tab you can also convert colors between color models such as RGB and CMYK and select the mode for displaying colors such as by byte or percentage ADOBE FIREWORKS CS3 134 User Guide To create and swap color palettes for your document 1 Select the Mixers tab in the Color Palette panel ma HaAAH DOD A im SESSeee i a D amp Di 2 Use the four fill color boxes at the bottom of the panel to set the four base colors for your document A palette is automatically created 3 Ifneeded use the HSB color wheel in the lower right corner of the panel to modify the hue saturation or brightness of your palette Each change is automatically applied to the entire palette 4 Ifyou would like to try out two different palettes in your document click Palette2 on the left side of the panel and pick out the base colors for your second palette 5 After creating your palettes click on the two Replace color icons in the lower left section of the panel to switch back and forth between the two palettes Note The swap palette function replaces fills strokes and gradients in vector elements but not in bitmap elements or graphic symbols To export a palette 1 Select the palette you want to export either Palette 1 or Palette 2 2 Click the Export as bitmap icon to exp
485. s and fills 6 0 cece cece cence nen n eee e nen e nen eeneee 145 Chapter 8 Using Live Filters Applying Live sFilters 2 202 lasek ages fad cuteta aia S vistivera dl gvinie ede td aslivaucl a a celebs api 147 Editing bive Filt rs cassie Basi ichande usecase a ob dates edule a a a a a i a og apes d 152 Chapter 9 Pages Layers Masking and Blending Working withipages r ereraa eseina E E e EEEE OE EEEa ie e a 155 Working with layers lt cscsesscaceseus ninaa e A EE E A EGA RE aE 159 Masking images saia tirerai aa iaa aa e a Aa a EET EEE 164 Blending and transparency ssessssssseseseersssesrererrerersseresrerrsreresrereeee 179 Chapter 10 Using Styles Symbols and URLs USING styles anren inna aaa ise Cas aa Ue Vee the Cee ated e ee aie E a D 183 USING symbols satorra o E a E dev EAR EOAR Oa dy RTE oes See wen ee eeoa eS 186 Working With URLS cs0c sca5 s ena eid oak ees cesses eeiulee ee a a ode i a al a 196 Chapter 11 Slices Rollovers and Hotspots Creating and editing slices 6k cece cece ce cen nnn eee n teen eee n eben en eneeee 200 Making slices interactiVe 6 e cence een n nen e a a a Ee 205 Preparing slices for CxpOrt 6 cence cece e eee n cnet ene beeen eee eeen enone 211 Working with hotspots and image MapS eke cece cece eee e ence ene e ee en ene 216 Chapter 12 Creating Buttons and Pop up Menus Creating button symbols 3 5 cosets Shoe oe ba oe Va Se ee ee ae Oe AS OAS OR a ae 220 Creating navigation
486. s and instances 1 In the original document double click an instance or select an instance and select Modify gt Symbol gt Edit Symbol to open the appropriate symbol editor 2 Modify the symbol and close the editor 3 Save the file 4 In the document into which the symbol was imported select the symbol in the Library panel 195 ADOBE FIREWORKS CS3 196 User Guide 5 Select Update from the Library panel Options menu Note To update all imported symbols select all the symbols in the Library panel and select Update Working with URLs Assigning a URL to a web object creates a link to a file such as a web page You can assign URLs to hotspots buttons and slice objects When you intend to use the same URLs several times you can create a URL library in the URL panel and store the URLs in the library You use the URL panel to add edit and organize your URLs For example if your website contains several navigation buttons to return to your home page you can add the URL for your home page to the URL panel Then you assign this URL to each navigation button by selecting it in the URL library You can use the Find and Replace feature to change a URL across multiple documents see Finding and replacing on page 330 URL libraries are available for all Fireworks documents and are saved between sessions v Assets Styles URL Library Shapes l iT URLs htm vi Al _ g http www macromedia com URL pan
487. s and view the results before deselecting the pixels You can also feather a selection by setting a feather amount in the Property inspector before or during your use of a bitmap selection tool For more infor mation see Bitmap selection tool options on page 44 To feather a pixel selection 1 Choose Select gt Feather 2 Enter a Feather amount in the Feather dialog box The selection marquee changes size to reflect the feather amount 3 If necessary change the number in the Feather dialog box to adjust the feather amount 4 Click OK To view the appearance of the feathered selection without the surrounding pixels select Select gt Select Inverse and y then press Delete You can then use the History panel or Edit gt Undo to try again Expanding or contracting a marquee After you draw a marquee to select pixels you can expand or contract its border To expand the border of a marquee 1 After drawing the marquee select Select gt Expand Marquee 2 Enter the number of pixels by which you want to expand the border of the marquee and click OK To contract the border of a marquee 1 After drawing the marquee select Select gt Contract Marquee 2 Enter the number of pixels by which you want to contract the border of the marquee and click OK ADOBE FIREWORKS CS3 50 User Guide Selecting an area around an existing marquee You can create an additional marquee to frame an existing marquee at a specified width This lets
488. s are displayed in the pop up window 3 Select a color from the system color picker The color becomes the new stroke or fill color For information on adding a color to the Swatches panel from the color picker see Customizing the Swatches panel on page 128 Viewing color values In addition to the Color Mixer and color pop up window you can use the Info panel to identify color values To view the color value of any part of your document using the Info panel 1 Click the Eyedropper tool in the Tools panel 2 Select Window gt Info to display the Info panel 3 Move the pointer over the object containing the color you want to view Windows only To view the color value of the active stroke or fill color do one of the following e Select Window gt Color Mixer for RGB or other color system values e Click a color box to open the color pop up window and view the hexadecimal value at the top of the window e Place the pointer over a color box and read the tool tip Windows only ADOBE FIREWORKS CS3 132 User Guide Note By default the color s RGB values appear in the Info panel and the Color Mixer and its hexadecimal value appears in the color pop up window as well as the color box tool tip in Windows However you can change the color model displayed in the Color Mixer or the Info panel anytime To display color information for another color model Select another color model from the Info panel Options menu or the
489. s download quickly without sacrificing quality Slicing enables you to optimize each individual slice using the most appropriate file format and compression settings For more information see Optimizing and Exporting on page 257 Interactivity You can use slices to create areas that respond to mouse events For information on attaching inter activity to slices see Making slices interactive on page 205 ADOBE FIREWORKS CS3 201 User Guide Updating parts ofa web page Slicing allows you to easily update parts of a web page that change frequently For example your company s web page might have an employee of the month section that changes monthly Slicing enables you to quickly change just the employee s name and photo without replacing the entire page Creating slice objects You can create a slice object by drawing it with the Slice tool or by inserting a slice based on a selected object The lines extending from the slice object are slice guides which determine the boundaries of the separate image files into which the document is split on export These guides are red by default pr la h a b d r h d To insert a rectangular slice based on a selected object 1 Select Edit gt Insert gt Slice The slice is a rectangle whose area includes the outermost edges of the selected object 2 If more than one object is selected select how to apply slices Single creates a single slice object that covers all
490. s it by slanting it along the horizontal or vertical axis or both axes To skew a selected object 1 Do one of the following to display the transform handles Select the Skew tool Select Modify gt Transform gt Skew N Drag a handle to skew the object w Double click inside the window or press Enter to remove the transform handles ADOBE FIREWORKS CS3 57 User Guide To achieve the illusion of perspective Drag a corner point Distorting objects You change the size and proportions of an object by dragging a selection handle with the Distort tool To distort a selected object 1 Do one of the following to display the transform handles Select the Distort tool e Select Modify gt Transform gt Distort 2 Draga handle to distort the object 3 Double click inside the window or press Enter to apply your changes Transforming objects numerically Instead of dragging an object to scale resize or rotate it you can transform it by entering specific values To resize selected objects using the Property inspector or Info panel gt Enter new width W or height H measurements Note If the W and H boxes aren t visible in the Property inspector click the expander arrow to see all properties To scale or rotate selected objects using Numeric Transform 1 Select Modify gt Transform gt Numeric Transform The Numeric Transform dialog box opens 2 From the pop up menu select the type of transformat
491. s not affect the source PNG file associated with the HTML file Note If the HTML file is on a network drive it is permanently deleted not moved to the Recycle Bin Windows 6 Click OK to insert the HTML code along with its associated images slices and JavaScript into the Dreamweaver document Copying Fireworks HTML code to the Clipboard for use in Dreamweaver A fast way to place Fireworks generated HTML code in Dreamweaver is to copy it to the Clipboard from Fireworks and paste it directly into a Dreamweaver document All HTML and JavaScript code associated with the Fireworks document is copied into the Dreamweaver document images are exported to a location you specify and Dream weaver updates the HTML with document relative links to those images Note Before copying to the Clipboard make sure to choose Dreamweaver as the HTML type in the HTML Setup dialog box For more information see Fireworks Help To copy Fireworks HTML to the Clipboard for use in Dreamweaver do one of the following e Copy the HTML to the Clipboard in Fireworks and then paste it into a Dreamweaver document e Click the Quick Export button and choose Copy HTML Code and then paste it into a Dreamweaver document For more information see Fireworks Help Note This method works only with Dreamweaver and not with other HTML editors Only Dreamweaver updates the links to the Fireworks images as document relative when you paste the HTML code into the Dreamweaver
492. s panel changes to reflect the color you sample with either the eyedropper pointer or the Eyedropper tool and the color of the selected text also changes Applying color to highlighted text in a text block You can change the text color of highlighted text in a text block using the Property inspector or any Fill Color box You cannot use the Eyedropper tool to edit the color of highlighted text Note If you attempt to apply a stroke to highlighted text in a text block the entire text block is automatically selected To apply text color only to highlighted text in a text block do one of the following e Click the Fill Color box in the Property inspector and select a color from the color pop up window or sample a color from anywhere on the screen using the eyedropper pointer while the Fill Color box pop up window is open e Click the Fill Color box in the Tools panel and select a color from the color pop up window or sample a color from anywhere on the screen using the eyedropper pointer while the Fill Color box pop up window is open Setting kerning Kerning increases or decreases the spacing between certain pairs of letters to improve their appearance Most fonts include information that automatically reduces the amount of space between certain letter pairs such as TA or Va Fireworks auto kerning uses a font s kerning information when displaying text but you may want to turn it off at smaller point sizes or when the text has no
493. s that enhance its capabilities With the Extension Manager you can install and manage extensions that augment the functionality of Fireworks Or you can write custom JavaScript code and use it as a custom command in Fireworks You can also use Adobe Flash SWF movies as custom commands in Fireworks You can paste color values directly from Flash actionscript into Fireworks color boxes In addition the Fireworks History panel provides an easy to use interface that allows you to create custom commands from a series of recorded tasks After you install an extension or create a custom command Fireworks places it in the Commands menu ADOBE FIREWORKS CS3 342 User Guide Note If stored as a SWF file in the Command Panels folder on your hard disk commands are available as panels in the Window menu For more information see About scripting with Flash SWF files on page 344 Using the Adobe Extension Manager An extension is a command script command panel library filter pattern texture or Auto Shape that can be added to Fireworks to enhance its capabilities Fireworks ships with the Adobe Extension Manager which allows you to easily install manage and delete extensions Upon installation Fireworks includes a collection of default extensions in the Commands menu You can also use the Extension Manager to bundle your own extensions and send them to the Adobe Exchange for Fireworks Through the Exchange you can share your extensions wit
494. s the caption for each image in the current album with or without its extension Insert text Use the specified text as the caption for every image in the current album Apply Button Click to apply the specified caption properties No change will be made until this button is clicked Filters panel Use these options to apply one of the included filters to modify your slideshow images You can only apply filters to a new album Apply to all albums Apply the specified filter s to all albums in the AlbumBook or just to the selected album Choose Filter Select a filter to apply The included filters are Auto Level Blur Convert to Grayscale Convert to Sepia Tone Invert and Sharpen Delete button Delete the selected filter Move Filter up button Move the selected filter up in the list Move Filter down button Move the selected filter down in the list ADOBE FIREWORKS CS3 254 User Guide Slideshow Properties panel Use these options to customize the currently selected slideshow Apply to all albums Apply the specified options to all albums in the AlbumBook or only to the currently selected album Interval Number of seconds between each image Use Transition Select this option to use a specified transition effect between images in the slideshow First image Select the image number of the first image that the player displays in the slideshow Display sequence Choose whether to display images in order or randomly Ex
495. s the ending point Shift drag to constrain the direction of movement to 45 increments Working with frames You build animations by creating a number of frames You can see the contents of each frame using the Frames panel The Frames panel is where you create and organize frames You can name the frames reorganize them manually set the timing of the animation and move objects from one frame to another Frames History Frame 1 Frame 3 Frame 4 Frame 5 3 G2 Forever Each frame also has a number of associated properties By setting the frame delay or hiding a frame you can make your animation look the way you want during the building and editing process Setting the frame delay The frame delay determines how long the current frame is displayed It is specified in hundredths of a second For example a setting of 50 displays the frame for half a second and a setting of 300 displays it for three seconds To set the frame delay value 1 Select one or more frames e To select a contiguous range of frames Shift click the first and last frame names To select a noncontiguous range of frames hold down Control Windows or Command Macintosh and click each frame name 2 Do one of the following e Select Properties from the Frames panel Options menu e Double click the frame delay column The Frame Properties pop up window appears ADOBE FIREWORKS CS3 243 User Guide 3 Enter a value for the frame delay
496. s when the Property inspector is undocked Add Frames Frame Duplicate Frame ae Delete Frame Distribute to Frames wv Auto Crop v Auto Difference Properties Help Group Frames with Rename Panel Group N Close Panel Group Q Forever oH To select an option from a panel group or panel Options menu 1 Click the Options menu icon in the upper right corner of the panel group or panel to open the menu 2 Select a menu item Saving panel layouts You can save the layout of panels by using the Commands menu Then the next time you open Fireworks the panels are arranged in the same position in the workspace To save a workspace layout 1 Select Window gt Workspace Layouts gt Save Current 2 Name the workspace layout and click OK To open a saved workspace layout Select Window gt Workspace Layouts and select a workspace layout from the submenu ADOBE FIREWORKS CS3 31 User Guide About the Quick Export button The Quick Export button lets you export your Fireworks files to a number of programs including Dreamweaver Flash Photoshop Illustrator Adobe Director Adobe GoLive and FreeHand In addition you can preview your files in the browser of your choice For more information see Using the Quick Export button on page 288 Tal Dreamweaver Flash Photoshop Illustrator Director FreeHand GoLive Frontpage Flex rvyvyvvvv vv Preview in Browser gt Copy HTML Cod
497. see Fireworks Help To update Fireworks HTML placed in Dreamweaver 1 Make changes to the desired PNG document in Fireworks 2 Select File gt Update HTML or click the Quick Export button and choose Update HTML from the Dreamweaver pop up menu 3 Navigate to the Dreamweaver file containing the HTML you want to update and click Open 4 Navigate to the folder destination where you want to place the updated image files and click Open Fireworks updates the HTML and JavaScript code in the Dreamweaver document Fireworks also exports updated images associated with the HTML and places the images in the specified destination folder If Fireworks cannot find matching HTML code to update it gives you the option of inserting new HTML code into the Dreamweaver document Fireworks places the JavaScript section of the new code at the beginning of the document and places the HTML table or link to the image at the end Exporting Fireworks files to Dreamweaver libraries Dreamweaver library items simplify the process of editing and updating frequently used website components such as company logos or other graphics that appear on every page of a site A library item is a portion of an HTML file located in a folder named Library in your site root folder Library items appear as a category in the Dreamweaver Assets panel You can drag a library item a file with the extension lbi from the Assets panel to any page in your website to insert the library item int
498. select the Image option as the cell type which sets pop up menus to use graphical backgrounds in their cells To add a custom cell style to the Pop up Menu Editor 1 Apply any combination of stroke fill texture and Live Filters to an object and save it as a style using the Styles panel For more information see Creating and deleting styles on page 184 2 Select the new style in the Styles panel and then select Export Style from the Styles panel Options menu 3 Navigate to the Nav Menu folder on your hard disk rename the style file if you wish and click Save Note The exact location of the Nav Menu folder varies depending on your operating system For more information see Working with configuration files on page 350 When you return to the Appearance tab of the Pop up Menu Editor and select the Image Cell background option the new style is available along with the preset styles for the Up and Over states of the pop up menu cells ADOBE FIREWORKS CS3 234 User Guide Setting advanced pop up menu properties The Advanced tab of the Pop up Menu Editor offers additional settings to control cell size padding and spacing text indention menu disappearance delay and border width color shadow and highlight Pop up Menu Editor Content Appearance Advanced Position Cell width 111 Automatic v Cell Height Automatic v Cell Padding 3 Tent Indent 0 Cell Spacing lo Menu Delay 1000 ms Pop u
499. selected objects Multiple creates a slice object for each selected object To draw a rectangular slice object 1 Select the Slice tool 2 Drag to draw the slice object The slice object appears on the Web Layer and the slice guides appear in the document Note You can adjust the position of a slice as you drag to draw it While holding down the mouse button simply press and hold down the Spacebar then drag the slice to another location on the canvas Release the Spacebar to continue drawing the slice Creating HTML slices An HTML slice designates an area where ordinary HTML text appears in the browser An HTML slice does not export an image it exports HTML text that appears in the table cell defined by the slice B F h a ees z T m d F m HTML slices are useful if you want to quickly update text that appears on your website without having to create new graphics ADOBE FIREWORKS CS3 202 User Guide To create an HTML slice 1 Draw a slice object and leave it selected 2 Inthe Property inspector select HTML from the Type pop up menu 3 Click Edit 4 Type text in the Edit HTML Slice window and format the text if desired by adding HTML text formatting tags Note Alternatively you can add HTML text formatting tags to the HTML after it has been exported using a text editor or HTML editor such as Adobe Dreamweaver 5 Click OK to apply your changes and close the Edit HTML Slice window The te
500. ser Guide To draw a polygon 1 In the Vector section of the Tools panel select the Polygon tool which is one of the basic shape drawing tools 2 Inthe Property inspector do one of the following to specify the number of sides for the polygon Use the Sides pop up slider to select 3 to 25 sides Enter a number from 3 to 360 in the Sides text box 3 Drag to draw the polygon To constrain a polygon s orientation to increments of 45 hold down Shift as you draw The Polygon tool always draws from a center point To draw a star 1 Select the Polygon tool 2 In the Property inspector select Star from the Shape pop up menu 3 In the Sides text box enter the number of points for the star 4 Inthe Angle text box select Automatic or enter a value Values closer to 0 result in long thin points values closer to 100 result in short stubby points 5 Drag the canvas to draw the star To constrain a star s orientation to increments of 45 hold down Shift as you drag The Polygon tool always draws from a center point Drawing Auto Shapes Auto Shapes are intelligent vector object groups that adhere to specialized rules to simplify the creation and editing of common visual elements Auto Shape tools draw object groups Unlike other object groups selected Auto Shapes have diamond shaped control points in addition to the object group handles Each control point is associated with a particular visual property of the shape Dragging a co
501. shop file containing text When opening Photoshop files that contain text Fireworks checks if you have the necessary fonts on your system If you don t Fireworks asks if you want to replace the fonts or maintain their appearance For more information see Fireworks Help If the text in your Photoshop file has effects applied to it that Fireworks supports the effects are still applied when brought into Fireworks However because Fireworks and Photoshop apply effects differently the effects may appear different in each application When Photoshop 6 or 7 files that contain text are opened or imported in Fireworks with the Maintain Appearance option selected a cached image of the text is displayed so its appearance remains the same as it was in Photoshop Once you edit the text the cached image is replaced with actual text that may differ in appearance from the original text The original font data is stored in the PNG file so that if the file is on a system that does have the fonts you can choose to use those fonts or maintain appearance Note Fireworks cannot export text in Photoshop 6 or 7 format If you edit a document containing Photoshop 6 or 7 text and then export the document back to Photoshop the file is exported in Photoshop 5 5 format However if you don t make any change to the text the file is exported in Photoshop 6 format For more about exporting Photoshop files see Placing Fireworks graphics in Photoshop on page 325
502. sing the Paste Inside command on an existing mask won t show the mask object s stroke and fill unless the original mask was applied using its stroke and fill Replacing disabling and deleting masks You can replace a mask with a new mask object You can also disable or delete a mask Disabling a mask temporarily hides it Deleting a mask permanently removes it To replace a mask 1 Select Edit gt Cut to cut the selected object or objects you want to use as the mask 2 Select the thumbnail of the masked object in the Layers panel and select Edit gt Paste as Mask 3 Click Replace when asked whether to replace the existing mask or add to it The existing mask object is replaced with the new one To disable or enable a selected mask do one of the following e Select Disable Mask or Enable Mask from the Layers panel Options menu e Select Modify gt Mask gt Disable Mask or Modify gt Mask gt Enable Mask A red X appears on the mask thumbnail when it is disabled Clicking the X enables the mask To delete a selected mask 1 Do one of the following to delete the mask Select Delete Mask from the Layers panel Options menu Select Modify gt Mask gt Delete Mask Drag the mask thumbnail to the trash can icon in the Layers panel 2 Choose whether you want to apply or discard the effect of the mask on the masked objects before deleting the mask Apply keeps the changes you have made to the object but the mask is no longer edi
503. so that the next vector object you draw has the new stroke attributes or you can apply stroke attributes to an object or path after you draw it The current stroke color appears in the Stroke Color box in the Tools panel the Property inspector and the Color Mixer You can change the stroke color of a drawing tool or selected object from any of these three panels The pencil icon indicates the Stroke Color box in the Tools panel the Property inspector and the Color Mixer To change stroke attributes of selected objects do one of the following e Select from among the stroke attributes in the Stroke Category pop up menu in the Property inspector e Select Stroke Options from the Stroke Category pop up menu to see more options Select from among the stroke attributes in the Stroke Options pop up window ADOBE FIREWORKS CS3 137 User Guide Pencil v E gt Pixel Soft v w 4 ee Texture Grain v o v CenteredonPath Fi Fill over stroke Use the options in the Property inspector or the Stroke Options pop up window to change the stroke applied to an object To change the stroke color of a drawing tool 1 Press Control D Windows or Command D Macintosh to deselect all objects 2 Select a drawing tool in the Tools panel 3 Click the Stroke Color box in the Tools panel or Property inspector to open the color pop up window 4 Select a color for the stroke from the set of swatches 5 D
504. specific instructions about installation settings and options consult your camera or scanner documentation for the TWAIN module or Photoshop Acquire plug in On the Macintosh Fireworks automatically looks for the Photoshop Acquire plug ins in the Plug ins folder within the Fireworks application folder If you do not want to put the plug ins there you must point Fireworks to an alter native location Note The exact location of the Plug ins folder varies depending on your operating system For more information see Working with configuration files on page 350 To direct Fireworks to Photoshop Acquire plug ins 1 In Fireworks select Edit gt Preferences Note On Mac OS X select Fireworks gt Preferences 2 Click the Folders tab ADOBE FIREWORKS CS3 21 User Guide 3 Select Photoshop Plug Ins 4 Click Browse if the Select the Photoshop Plug ins Folder Windows or Choose a Folder Macintosh dialog box doesn t automatically open 5 Navigate to the folder containing the Photoshop plug ins To import an image from a digital camera Windows 1 Connect the camera to your computer 2 Install the software that accompanies the camera if you have not already done so 3 In Fireworks select File gt Scan and then select either Twain Acquire or Twain Select 4 In the Select Source dialog box select a source and then click OK 5 In the Select Images dialog box select the images you want to import and then click OK The
505. spector select the round or square eraser shape Drag the Edge slider to set the softness of the eraser s edge 2 3 4 Drag the Size slider to set the size of the eraser 5 Drag the Eraser Opacity slider to set the degree of opacity 6 Drag the Eraser tool over the pixels you want to erase Feathering pixel selections Feathering blurs the edges of a pixel selection and helps the selected area blend with the surrounding pixels Feath ering is useful when you copy a selection and paste it onto another background ADOBE FIREWORKS CS3 66 User Guide To feather the edges of a pixel selection as you make a pixel selection 1 Select a bitmap selection tool from the Tools panel 2 Select Feather from the Edge pop up menu in the Property inspector 3 Drag the slider to set the number of pixels you want to blur along the edge of the selection 4 Make a selection To feather the edges of a pixel selection from the menu bar 1 Choose Select gt Feather 2 Type a value in the Feather Selection dialog box to set the feather radius and click OK The radius value determines the number of pixels that are feathered on each side of the selection border Retouching bitmaps Fireworks provides a wide range of tools to help you retouch your images You can alter an image s size reduce or sharpen its focus or copy and stamp a part of it to another area The Rubber Stamp tool lets you copy or clone one area of an image to anoth
506. st window and click Optimize in Fireworks on the Bitmap tab of the Property inspector ADOBE FIREWORKS CS3 320 User Guide 2 In Fireworks change the optimization settings as desired 3 Click Update when finished Click Done if the MIX Editing dialog box appears The image is updated in Director using the new settings Working with HomeSite You can use Fireworks and HomeSite together to create and edit web pages Exporting and opening Fireworks HTML in HomeSite is simple and inserting Fireworks graphics into HomeSite documents is just as easy But even more important Fireworks and HomeSite share a powerful integration that allows you to start Fireworks from HomeSite to edit web graphics Placing Fireworks images in HomeSite You can insert Fireworks generated GIF or JPEG images into a HomeSite document You must export the images from Fireworks first For information on exporting GIF and JPEG images see Fireworks Help To insert a Fireworks image into a HomeSite document 1 In HomeSite save your document Note HomeSite creates relative paths to images but it cannot do so unless your document is saved 2 Inthe Resources window locate and select the Fireworks image you exported 3 Do one of the following to insert the Fireworks image in your HomeSite document Drag the file from the Resources window to the desired location within the HTML code on the Edit tab of the Document window e On the Edit tab of the Document window
507. sures that any user sharing the site can locate the source PNG when starting Fireworks from within Dreamweaver Specifying launch and edit preferences for Fireworks source files The Fireworks launch and edit preferences let you specify how to handle source PNG files when opening Fireworks files from another application Dreamweaver recognizes the Fireworks launch and edit preferences only in certain cases in which you open and optimize a Fireworks image Specifically you must be opening and optimizing an image that is not part of a Fireworks table and that does not contain a correct Design Note path to a source PNG file In all other cases including all launch and edit cases of Fireworks images Dreamweaver automatically opens the source PNG file prompting you to locate the source file if it cannot be found ADOBE FIREWORKS CS3 304 User Guide To specify launch and edit preferences for Fireworks 1 In Fireworks choose Edit gt Preferences Note On Mac OS X choose Fireworks gt Preferences 2 Click the Launch and Edit tab Windows or choose Launch and Edit from the pop up menu Macintosh 3 Specify the options to use when editing or optimizing Fireworks images placed in an external application Always Use Source PNG automatically opens the Fireworks PNG file that is defined in the Design Note as the source for the placed image Updates are made to both the source PNG and its corresponding placed image Never Use Source PNG automati
508. t command 104 stacking objects 59 Standard Screen mode 33 Star tool 87 stars 85 87 Start page 24 straight segments editing 95 Stroke Color box 136 strokes 136 adding texture 145 changing centering 139 changing color of drawing tools 137 choosing 136 creating custom 138 drawing fill over 139 edges of 136 editing 136 finding and replacing 333 reorienting 139 resetting default color 127 saving settings 140 setting sensitivity 139 swapping stroke and fill colors 127 textures 136 styles adding 184 applying 184 basing on existing styles 185 defined 183 deleting 185 editing 185 enlarging preview icons 186 exporting 185 importing 185 new 184 resetting to defaults 186 Styles panel 27 183 Subselection tool auto joining paths with 100 selecting masks with 173 swap color palettes 134 Swap Image behavior 209 swap image rollovers creating disjoint rollovers 208 with single slice 207 swap image external images for 211 swatch group choosing custom 128 Swatches panel 28 127 appending swatches 128 deleting a color 129 replacing a color 129 saving custom 129 Windows system colors 128 swatches choosing custom 128 SWF movies 345 symbol library 186 Symbol Properties panel 28 symbols breaking a link 193 creating 186 defined 186 deleting 188 duplicating 188 editing 187 193 editing graphics 241 exporting 195 importing 195 modifying 187 placing instances 187 placing instances in document 187 rich graphic 190 savi
509. t of a foggy window revealing or hiding portions of the objects beneath it This type of mask uses grayscale to make selected objects less visible or more so Or you can create a mask that uses its own transparency to affect visibility You can create a mask using the Layers panel or the Edit Select or Modify menus After you create a mask you can adjust the position of the masked selection on the canvas or modify the appearance of a mask by editing the mask object You can also apply transformations to the mask as a whole or to the components of a mask individually About masks You can create a mask object from either a vector object a vector mask or a bitmap object a bitmap mask You can also use multiple objects or grouped objects to create a mask About vector masks If you have used other vector illustration applications such as Adobe FreeHand you may be familiar with vector masks which are sometimes called clipping paths or paste insides The vector mask object crops or clips the under lying objects to the shape of its path creating a cookie cutter effect A vector mask applied using its path outline When you create a vector mask a mask thumbnail with a pen icon appears in the Layers panel to indicate you ve created a vector mask A vector mask thumbnail in the Layers panel ADOBE FIREWORKS CS3 165 User Guide When a vector mask is selected the Property inspector displays information about how the mask is applied The
510. t to the Fill Color box in the Tools panel to make it the active attribute Note Do not click the color box itself If you do the eyedropper pointer that appears is not the Eyedropper tool For infor mation on the color box eyedropper pointer see Sampling colors from a color pop up window on page 136 ADOBE FIREWORKS CS3 65 User Guide 2 Open a Fireworks document or any file that Fireworks can open For more information see Slices Rollovers and Hotspots on page 200 3 Select the Eyedropper tool from the Colors section of the Tools panel Set the Color Averaging Sample setting in the Property inspector 1 pixel creates a stroke or fill color from a single pixel 3x3 pixels creates a stroke or fill color from the average of color values in a 3 by 3 pixel area 5x5 pixels creates a stroke or fill color from the average of color values in a 5 by 5 pixel area 4 Click the Eyedropper tool anywhere in the document The sampled color appears in all Stroke Color or Fill Color boxes throughout Fireworks Erasing bitmap objects You can use the Eraser tool to remove pixels By default the Eraser tool pointer represents the size of the current eraser but you can change the size and appearance of the pointer in the Preferences dialog box For more infor mation see Editing preferences on page 347 Eraser tool To erase pixels in a selected bitmap object or pixel selection Select the Eraser tool In the Property in
511. table If the object being masked is a vector object the mask and vector object are converted into a single bitmap image Discard gets rid of the changes you have made and restores the object to its original form Cancel stops the delete operation and leaves the mask intact ADOBE FIREWORKS CS3 179 User Guide Blending and transparency Compositing is the process of varying the transparency or color interaction of two or more overlapping objects In Fireworks blending modes allow you to create composite images Blending modes also add a dimension of control to the opacity of objects and images About blending modes When you select a blending mode Fireworks applies it to the selected objects in their entirety Objects in a single document or on a single layer can have blending modes that differ from those of other objects in the document or on the layer When objects with different blending modes are grouped the group s blending mode overrides individual blending modes Ungrouping the objects restores each object s individual blending mode Note Layer blending modes will not work within symbol documents A blending mode contains these elements Blend color is the color to which the blending mode is applied Opacity is the degree of transparency to which the blending mode is applied Base color is the color of pixels underneath the blend color Result color is the result of the blending mode s effect on the base color Here
512. tach a URL to a selected button instance in the Property inspector or in the URL panel You can attach a URL to a symbol so that the same URL appears in the Link text box in the Property inspector for each instance This is helpful when entering absolute URLs within a site you need only complete the last part of the URL in each instance s Link text box in the Property inspector to link the button instances Note For information on absolute versus relative URLs see About absolute and relative URLs on page 196 To set the URL for a button symbol in the Button Editor 1 Do one of the following to open the button in the Button Editor e Double click a button instance in the workspace In the Library panel double click the button preview or the symbol icon beside the button symbol Click the Active Area tab in the Button Editor Select the Active Area slice or hotspot bh W N Do one of the following Enter the URL in the Link text box in the Property inspector or select a page from the pop up menu This list contains all of the pages in the current document ADOBE FIREWORKS CS3 227 User Guide e Select a URL from the URL panel Note Changing the URL for a button symbol won t change the URL for existing button instances of that symbol that already have unique URLs assigned to them This also applies to changes made to a button symbol target and alt text To set the URL for a selected button instance in the workspa
513. tach to slices By attaching multiple behaviors to a single slice you can create interesting effects You can also select from a variety of mouse events that trigger interactive behaviors Behaviors in Fireworks are compatible with Dreamweaver behaviors When you export a Fireworks rollover to Dreamweaver you can edit Fireworks behaviors using the Dreamweaver Behaviors panel Adding simple interactivity to slices The drag and drop rollover method is a fast and efficient way to create rollover and swap image effects Specifically the drag and drop rollover method allows you to determine what happens to a slice when the pointer passes over it The end result is commonly referred to as a rollover image Rollover images are graphics that change appearance in a web browser when you move the pointer over them When a slice is selected a round circle with cross hairs appears in the center of the slice This is called a behavior handle A Slice name B Behavior handle C Selection handle By dragging the behavior handle from a triggering slice and dropping it onto a target slice you can easily create rollover and swap image effects The trigger and target can be the same slice Hotspots also have behavior handles for incorporating rollover effects For more information see Creating hotspots on page 216 About rollovers Rollovers all work the same way One graphic triggers the display of another when the pointer rolls over it
514. ter Illustrator 7 or later e Microsoft Office 97 or later e Microsoft Internet Explorer 3 or later e Netscape Navigator 3 or later e CorelDRAW 7 or later To drag an image or text into Fireworks From the other application drag the object or text into Fireworks ADOBE FIREWORKS CS3 19 User Guide Pasting into Fireworks Pasting an object copied from another application into Fireworks places the object in the center of the active document You can copy and paste an object or text in any of these formats from the Clipboard e FreeHand 7 or later Illustrator e PNG e PICT Macintosh DIB Windows e BMP Windows e ASCII text e EPS WBMP gt TXT e RTF To paste into Fireworks 1 In the other application copy the object or text that you wish to paste 2 In Fireworks paste the object or text into your document Location of pasted objects When you paste an object into Fireworks the placement of the pasted object depends on what is selected e Ifat least one object on a single layer is selected the pasted object is placed in front of or stacked directly above the selected object on the same layer Ifthe layer itself is selected and either no objects or all objects are selected the pasted object is placed in front of or stacked directly above the topmost object on the same layer If two or more objects on more than one layer are selected the pasted object is placed in front of or stacked d
515. ter changes to the pull pointer 3 Drag the path To push a selected path 1 Select the Freeform tool in the Tools panel Re The pointer changes to the push or pull pointer 2 Point slightly away from the path 3 Drag toward the path to push it Nudge the selected path to reshape it To change the size of the push pointer do one of the following e While holding down the mouse button press the Right Arrow key or 2 to increase the width of the pointer e While holding down the mouse button press the Left Arrow key or 1 to decrease the width of the pointer To set the size of the pointer and set the length of the path segment that it affects deselect all objects in the document and then enter a value from 1 to 500 in the Size text box of the Property inspector The value indicates the size of the pointer in pixels ADOBE FIREWORKS CS3 102 User Guide Distorting paths You can use the Reshape Area tool to pull the area of all selected paths within the outer circle of the reshape area pointer The pointer s inner circle is the boundary of the tool at full strength The area between the inner and outer circle reshapes paths at less than full strength The pointer s outer circle determines the gravitational pull of the pointer You can set its strength Note The Reshape Area tool also responds to pressure from a Wacom or other compatible tablet To distort selected paths 1 From the Freeform tool pop up menu select the Res
516. the Pages panel select a page that you have already created and choose Set As Master Page from the Options menu A Master Page cannot have shared layers so when you make a page into a Master Page any shared layers are removed from it and changed to ordinary non shared layers To link pages to the master page After a master page is created any additional pages that are created inherit the master page settings such as canvas color and size Pages that already exist do not inherit these settings unless they are linked to the master page In addition if the master page settings are later changed none of the other pages will inherit these changes unless they are linked to the master page Do one of the following to permanently link a page to the master page e Select the page in the Pages panel and choose Link to Master Page from the Options menu e Click in the column to the left of the page thumbnail in the Pages panel A link icon displays to show that the page is linked to the master page Note If you change a setting such as canvas color on a page that has been linked to the master page the setting overrides the master page setting and the link to the master page is automatically broken To remove master page layers When you upgrade an ordinary page to a master page the master page layer hierarchy is automatically added at the bottom of layers hierarchy in other existing pages To remove these Master Page layers e Select
517. the Remove Master Page Layer option from the Layers panel Options menu If you later want to add the master page layers back into the page select Add Master Page Layer from the Layers panel Options menu To change a master page back into a normal page Select the master page in the Pages panel and then choose Reset Master Page from the Options menu Exporting pages to HTML You can export all of your pages at once as multiple HTML files If you would like to preview your pages before exporting them select Edit gt Preview in browser gt Preview all pages in browser To export your pages to HTML 1 Select File gt Export ADOBE FIREWORKS CS3 158 User Guide Note If you use the Quick Export button to export the file only the currently selected page is exported 2 Choose the location for the export files 3 Select HTML and Images from the Export pop up menu 4 Click the Options button and select your HTML editor from the HTML Style pop up menu on the General tab of the HTML Setup dialog box If your HTML editor is not listed select Generic 5 Click OK to return to the Export dialog box 6 Select Export HTML file from the HTML pop up menu Choosing Export HTML generates an HTML file and the associated image files in the location you specify 7 Select Export Slices from the Slices pop up menu if your document contains slices 8 Ifyou want to export all of the pages in the file deselect the Current page only check box 9 Select
518. the name of a custom font Note Be careful when selecting a font If users who will view your web page don t have the font you select installed on their system a replacement font will be displayed in their web browser 4 Optionally click a text style button to apply a bold or italic style 5 Click a justification button to align text to the left or right or center it 6 Select a text color from the Text Color box To set the appearance of the menu cells 1 With the desired pop up menu open in the Pop up Menu Editor click the Appearance tab For information on opening an existing pop up menu in the Pop up Menu Editor see Editing pop up menus on page 236 2 Select the text and cell colors for each state 3 If Image is selected as the cell type select a graphical style for each state 4 Do one of the following e Click Next to move to the Advanced tab or select another tab to continue building the pop up menu e Click Done to close the Pop up Menu Editor In the workspace the hotspot or slice on which you built the pop up menu displays a blue behavior line attached to an outline of the top level of the pop up menu Note To view a pop up menu press F12 to preview it in a browser The previews in the Fireworks workspace do not display pop up menus Adding pop up menu styles You can add custom cell styles to the Pop up Menu Editor Custom cell styles are available along with the preset choices on the Appearance tab when you
519. the shape of a selected slice do one of the following e Select the Pointer or Subselection tool and drag the slice s corner points to modify its shape e Use a transformation tool to perform the desired transformation For more information on using the transformation tools see Transforming and distorting selected objects and selections on page 54 Note Transforming a rectangular slice may change its shape position or dimensions but the slice itself remains rectangular About using the Property inspector or Info panel to edit slice objects You can also change a slice object s position and size numerically using the Property inspector For more infor mation about changing an objects dimensions numerically see Transforming objects numerically on page 57 For more information about changing an object s position numerically see Editing selected objects on page 53 Making slices interactive The basic building blocks for creating interactivity in Fireworks are slice objects Fireworks offers two ways to make slices interactive e The drag and drop rollover method is the easiest way to make a slice interactive By merely dragging a slice s behavior handle and dropping it onto a target slice you can quickly create simple interactivity ADOBE FIREWORKS CS3 206 User Guide e The Behaviors panel allows you to create more complex interactivity The Behaviors panel contains a variety of interactive behaviors you can at
520. ti aliasing If the Property inspector is minimized click the expander arrow in the lower right corner to see all properties Anti aliasing applies to all characters in a given text block No Anti Alias disables text smoothing Crisp Anti Alias creates a sharp transition between the edges of the text and the background Strong Anti Alias creates a very abrupt transition between the edges of the text and the background preserving the shapes of the text characters and enhancing detailed areas of the characters Smooth Anti Alias creates a soft transition between the edges of the text and the background System Anti Alias uses the text smoothing method provided by Windows XP or Mac OS X Custom Anti Alias provides the following expert level controls over anti aliasing Oversampling determines the amount of detail used for creating the transition between the text edges and the background Sharpness determines the smoothness of the transition between the text edges and the background Strength determines how much the text edges blend into the background To apply an anti aliased edge to selected text gt In the Property inspector select one of options from the Anti Aliasing pop up menu Note When you open vector files such as Adobe FreeHand files in Fireworks text is anti aliased You can edit this attribute using the Property inspector For more information see Opening graphics created in other applications on page 16 Adjusting
521. timize panel lets you set optimization and export settings to control how your file is created Fireworks can export animations as animated GIF or Adobe Flash SWF files You can also import Fireworks animations directly into Flash for further editing This chapter contains the following topics e Building animation on page 238 e Working with animation symbols on page 239 e Working with frames on page 242 e Tweening on page 246 e Previewing an animation on page 246 e Exporting your animation on page 247 e Working with existing animations on page 248 e Using multiple files as one animation on page 249 Building animation In Fireworks you can create animation by assigning properties to objects called animation symbols The animation of a symbol is broken down into frames which contain the images and objects that make up each step of the animation You can have more than one symbol in an animation and each symbol can have a different action Different symbols can contain differing numbers of frames The animation ends when all the action of all the symbols is complete To build an animation using animation symbols in Fireworks 1 Create an animation symbol either by creating a symbol from scratch or by converting an existing object into a symbol For more information see Creating animation symbols on page 239 2 Use the Property inspector or the Animate dialog box to enter settings fo
522. ting devices This format is for use on Wireless Application Protocol WAP pages You can open a WBMP file directly using File gt Open or import a WBMP file using File gt Import Creating Fireworks PNG files from HTML files Fireworks can open and import HTML content created in other applications When you open or import an HTML file Fireworks reconstructs the layout and behaviors defined by the HTML code allowing you to re create web pages that contain sliced graphics JavaScript buttons and other types of interactivity This allows you to salvage inherited websites even if you don t have the source PNG files With this feature you can quickly open or import a web page to update graphics change document layout or alter navigational links buttons and other interactive elements all without having to rebuild the page from scratch or modify its scripting Because Fireworks exports HTML content in the form of an HTML table it also determines the document layout for imported HTML based on HTML tables An HTML file must contain at least one table for Fireworks to be able to reconstruct it For more about HTML see Exporting HTML on page 280 ADOBE FIREWORKS CS3 18 User Guide You can get HTML content into Fireworks in several ways You can open all the HTML tables in an HTML file e You can open the first HTML table that Fireworks encounters in an HTML file e You can import the first HTML table that Fireworks encounters into an
523. tion file names inside File node e Ifyou decide to provide additional information for the player add the Info node with the src attribute containing the name of the file The info file should contain HTML text If the file contains simple non HTML text line feeds carriage returns and tabs will be removed before displaying the text e Create edit the MXI file such that the renamed SWF and HTML get placed in Configura tions Commands Create Slideshow players folder Note Make sure both the SWF and HTML file have the same name in order for the Launch in Browser option to work at the end of a process The generated XML file has the following structure lt AlbumBook gt lt Album gt lt Slide gt lt Slide gt lt Slide gt lt Album gt lt Album gt lt Slide gt lt Slide gt lt Slide gt lt Album gt lt AlbumBook gt Node definitions AlbumBook node ver version of the Create Slideshow command that generated the XML file title main title of the slideshow description description for the entire slideshow firstAlbum zero based index of the first album to be displayed width width of slideshow height height of slideshow ADOBE FIREWORKS CS3 256 User Guide showThumbnails whether or not to show thumbnails or whether or not thumbnails were exported thumbWidth width of thumbnail thumbHeight height of thumbnail autoStart starts the slideshow auto
524. tion of this folder see About user configuration files on page 351 To share saved optimization settings with another Fireworks user Copy the saved optimization preset file from the Export Settings folder to the same folder on another computer Note The location of the Export Settings folder varies depending on your operating system For more information see the previous procedure To delete a custom preset optimization 1 Inthe Optimize panel Saved Settings pop up menu select the optimization setting you want to delete 2 Select Delete Settings from the Optimize panel Options menu You cannot delete a Fireworks preset optimization setting Exporting from Fireworks Exporting from Fireworks is a two step process First you must prepare your graphic or document for export by optimizing it After your graphic or document has been optimized you can export it or save it depending on its originating file type For more information on optimizing see About optimizing on page 257 For more infor mation on saving see Saving documents in other formats on page 23 You can export Fireworks graphics in a number of ways You can export or in some cases save a document as a single image in GIF JPEG or another graphic file format Or you can export the entire document as an HTML file and associated image files Or you can choose to export selected slices only You can also export only a specified area of your document In
525. tion that you are about to create 4 Ifyou chose Feather in the Edge setting specify the value you want to use for the amount of feather 5 Toconvert the selected path to a marquee click OK Note Converting a path to a marquee deletes the selected path If you would rather not delete paths when you convert them to marquee selections you can change the default setting Select Edit gt Preferences gt Editing and then clear the setting for Delete paths when converting to marquee Creating an object from the intersection of other objects Using the Intersect command you can create an object from the intersection of two or more objects 104 ADOBE FIREWORKS CS3 105 User Guide To create a closed path that encloses the area common to all selected closed paths Select Modify gt Combine Paths gt Intersect The resulting path assumes the stroke and fill attributes of the object that is placed farthest back Removing portions of a path object You can remove portions of a selected path object as defined by the overlapping portions of another selected path object arranged in front of it OW To remove portions of a path object 1 Select the path object that defines the area to be removed 2 Select Modify gt Arrange gt Bring to Front 3 Hold down Shift and add to the selection the path object from which the portions are to be removed 4 Select Modify gt Combine Paths gt Punch Stroke and fill attributes remain uncha
526. tions and click OK Copying and pasting Fireworks paths into FreeHand You can use the Copy Path Outlines command to copy selected Fireworks paths to FreeHand Using the Copy Path Outlines command is useful if you want to copy only paths and not the content within them ADOBE FIREWORKS CS3 316 User Guide Note Use the Copy Path Outlines command with FreeHand 10 and earlier versions With FreeHand MX use Edit gt Copy to get full object appearance and improved editability For more information see Copying and pasting Fireworks graphics into Freehand on page 315 To copy selected Fireworks paths 1 Select Edit gt Copy Path Outlines or click the Quick Export button and choose Copy Path Outlines from the FreeHand pop up menu 2 Switch to an open document in FreeHand 3 Select Edit gt Paste to paste the paths Exporting Fireworks graphics to FreeHand You can export Fireworks graphics in a FreeHand compatible format and import the graphics into FreeHand To export a vector graphic to FreeHand 1 In Fireworks choose File gt Export or click the Quick Export button and choose Export to FreeHand from the FreeHand pop up menu 2 In the Export dialog box type a filename and choose a destination folder 3 Select Illustrator 7 from the Save As pop up menu Note Illustrator 7 is the graphics file format you use when exporting from Fireworks to any other vector graphics appli cation including FreeHand Most vector applications c
527. tips and techniques through videos HTML tutorials and sample book chapters New ideas are the heart of Think Tank Dialog Box and Gallery ADOBE FIREWORKS CS3 7 User Guide e Think Tank articles describe how designers engage with technology and what their experiences mean for design design tools and society e In Dialog Box experts share new ideas in motion graphics and digital design e The Gallery showcases how artists communicate design in motion Visit Adobe Design Center at www adobe com designcenter Adobe Developer Center Adobe Developer Center provides samples tutorials articles and community resources for developers who build rich Internet applications websites mobile content and other projects using Adobe products The Developer Center also contains resources for developers who develop plug ins for Adobe products In addition to sample code and tutorials you ll find RSS feeds online seminars SDKs scripting guides and other technical resources Visit Adobe Developer Center at www adobe com go developer Customer support Visit the Adobe Support website at www adobe com support to find troubleshooting information for your product and to learn about free and paid technical support options Follow the Training link for access to Adobe Press books a variety of training resources Adobe software certification programs and more Downloads Visit www adobe com go downloads to find free updates tryouts and ot
528. tive This is helpful in creating a 3D look When you select any transformation tool or Transform menu command Fireworks displays transform handles around selected objects ADOBE FIREWORKS CS3 55 User Guide To transform selected objects using the transform handles 1 Select a transformation tool As you move the pointer on or near the selection handles the pointer changes to indicate the current transformation 2 Do one of the following to transform the objects e Place the pointer near a corner point and then drag to rotate e Drag a transform handle to transform according to the active transformation tool 3 Double click inside the window or press Enter to apply your changes Resizing scaling objects Scaling an object enlarges or reduces it horizontally vertically or in both directions To scale a selected object 1 Do one of the following to display the transform handles Select the Scale tool e Select Modify gt Transform gt Scale 2 Drag the transform handles e To scale the object both horizontally and vertically drag a corner handle Proportions are constrained if you press the Shift key as you scale e To scale the object horizontally or vertically drag a side handle e To scale the object from the center press Alt while dragging any handle Note You can also resize selected objects by entering dimensions in the Property inspector For more information see Trans
529. tive that is it cannot be undone except when Edit gt Undo is an option To maintain the ability to adjust turn off or remove this filter apply it as a Live Filter as described in the first bulleted option in this step For more information see Using Live Filters on page 147 To sharpen an image using Unsharp Mask 1 Select the image 2 Do one of the following to open the Unsharp Mask dialog box In the Property inspector click the Add Live Filters button and then select Sharpen gt Unsharp Mask from the Filters pop up menu e Select Filters gt Sharpen gt Unsharp Mask Note Applying a filter from the Filters menu is destructive that is it cannot be undone except when Edit gt Undo is an option To maintain the ability to adjust turn off or remove this filter apply it as a Live Filter as described in the first bulleted option in this step For more information see Using Live Filters on page 147 3 Drag the Sharpen Amount slider to select the amount of sharpening effect from 1 to 500 4 Drag the Pixel Radius slider to select a radius from 0 1 to 250 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 pixels of a higher contrast in the image A decrease in threshold includes pixels of lower contrast A threshol
530. to break the link between the instance and the symbol This permanently breaks the relationship between the two however and any future edits you make to the symbol won t be reflected in the former instance Button symbols have several convenient features that allow you to retain the symbol instance relationship for a group of buttons while assigning unique button text and URLs to each instance For more information see Editing button symbols on page 224 Editing rich symbols If you are editing a rich symbol that has JavaScript behavior associated with it you cannot edit the JavaScript properties using the Symbol Editor In order to change these symbol properties the values need to be changed using the Symbol Properties panel If you want to add customizable properties to the Symbol Properties panel you must edit the JavaScript file associated with the symbol Breaking symbol links You can modify an instance without affecting the symbol or other instances by first breaking the link between it and the symbol To release an instance from a symbol 1 Select the instance 2 Select Modify gt Symbol gt Break Apart The selected instance becomes a group The symbol in the Library panel is no longer associated with that group After separation from the symbol a former button instance loses its button symbol characteristics and a former animation instance loses its animation symbol characteristics Editing instance properties These
531. to determine how the colors found are applied Fills amp Strokes finds and replaces both fill and stroke colors All Properties finds and replaces fill stroke and effect colors Fills finds and replaces a fill color except within pattern fills Strokes finds and replaces stroke colors only Effects finds and replaces effect colors only Finding and replacing URLs In addition to words typefaces and colors Fireworks allows you to find and replace URLs assigned to interactive elements in your documents To search for and replace URLs assigned to web objects 1 Select Find URL from the Find pop up menu of the Find panel 2 Enter the URL to search for in the Find text box 3 Enter the replacement URL in the Change To text box 4 Ifyou want select options to further define the search Whole Word finds the text only in the same form in which it appears in the Find option not as part of any other word Match Case distinguishes between uppercase and lowercase letters during the search Regular Expressions matches parts of words or numbers conditionally during a search Finding and replacing non websafe colors A non websafe color is a color not included in the Web216 color palette A color is websafe if it dependably appears to be the same color on both Macintosh and Windows platforms For more information about websafe colors see Optimizing GIF PNG TIFF BMP and PICT files on page 265 ADOBE FIREWORKS CS3 334 User Gui
532. to paths To create a composite path from a path group that was created by converting text to paths 1 Select the path group 2 Select Modify gt Ungroup 3 Select Modify gt Combine Paths gt Join Importing text You can copy text from a source document and paste into the current Fireworks document or you can drag it from the source to the current document You can also open or import an entire text file in Fireworks Fireworks can import RTF rich text format and ASCII plain text formats To open or import a text file 1 Select File gt Open or File gt Import 2 Navigate to the folder containing the file 3 Select the file and click OK ADOBE FIREWORKS CS3 123 User Guide Photoshop text You can open or import a Photoshop file containing text You can also copy text from a Photoshop file and paste into the current Fireworks document or drag it from the Photoshop file to the current document For more information see Opening graphics created in other applications on page 16 RTF files When importing RTF text Fireworks maintains these attributes e Font size and style bold italic underline Alignment left right center justified e Leading Baseline shift e Range kerning e Horizontal scale e Color of the first character All other RTF information is ignored In Fireworks you cannot import RTF text by copying and pasting or dragging and dropping ASCII text You can import ASCII te
533. ton locate the Fireworks application on your hard disk and click Open Preferences Category File Types Editors General Accessibility Code Coloring Code Format Code Hine External Code Editor Code Rewriting ate CSS Styles Reload Modified Files Prompt v Open in Code View js asa css cs config inc txt as asc ast Fonts Save on Launch Prompt v Highlighting 3 Invisible Elements Layers El El 4 a z Layout View Extensions Editors New Document Panels png Fireworks Primary Preview in Browser a Quick Tag Editor IPQ Ipe peg Site fla Status Bar way Validator aiff aif aife mp3 mnn mnan OK Cancel Help 4 Click Make Primary 5 Repeat steps 2 through 4 to set Fireworks as the primary editor for other web image file types About Design Notes and source files Whenever you export a Fireworks file from a saved source PNG file to a Dreamweaver site Fireworks writes a Design Note that contains information about the file For example when you export a Fireworks table Fireworks writes a Design Note for each exported image These Design Notes contain references to the source PNG file that spawned the exported files When you open and edit a Fireworks image from within Dreamweaver Dreamweaver uses the Design Note to locate a source PNG for that file For best results always save your Fireworks source PNG file and exported files in a Dream weaver site This en
534. ton and then select Adjust Color gt Auto Levels from the Filters pop up menu e Select Filters gt Adjust Color gt Auto Levels Note Applying a filter from the Filters menu is destructive that is it cannot be undone except when Edit gt Undo is an option To maintain the ability to adjust turn off or remove this filter apply it as a Live Filter as described in the first bulleted option in this step For more information see Using Live Filters on page 147 You can also adjust highlights midtones and shadows automatically by clicking the Auto button in the Levels or Curves dialog box Correcting colors using Curves The Curves feature is similar to the Levels feature but it provides more precise control over the tonal range Whereas Levels uses highlights shadows and midtones to correct the tonal range Curves lets you adjust any color along the tonal range instead of only three variables without affecting other colors For example you can use Curves to correct for a color cast caused by lighting conditions The grid in the Curves dialog box illustrates two brightness values The horizontal axis represents the original brightness of the pixels shown in the Input box The vertical axis represents the new brightness values shown in the Output box When you first open the Curves dialog box the diagonal line indicates that no changes have been made so the input and output values are the same for all pixels To adjust a
535. transitions and any images that require more than 256 colors PNG or Portable Network Graphic is a versatile web graphic format However not all web browsers can view PNG graphics A PNG can support up to 32 bit color can contain transparency or an alpha channel and can be progressive PNG is the native file format for Fireworks However Fireworks PNG files contain additional appli cation specific information that is not stored in an exported PNG file or in files created in other applications WBMP or Wireless Bitmap is a graphic format created for mobile computing devices such as cell phones and PDAs This format is used on Wireless Application Protocol WAP pages WBMP is a 1 bit format so only two colors are visible black and white TIFF or Tagged Image File Format is a graphic format used for storing bitmap images TIFFs are most commonly used in print publishing Many multimedia applications also accept imported TIFF graphics BMP the Microsoft Windows graphic file format is acommon file format used to display bitmap images BMPs are used primarily on the Windows operating system Many applications can import BMP images PICT developed by Apple Computer is a graphic file format commonly used on Macintosh operating systems Most Mac applications are capable of importing PICT images Optimizing GIF PNG TIFF BMP and PICT files Each graphic file format in Fireworks has a set of optimization options For the most part on
536. tton can simplify your design workflow This chapter covers the following topics e About optimizing on page 257 e Using the Export Wizard on page 258 e Optimizing in the workspace on page 261 e Exporting from Fireworks on page 276 e Sending a Fireworks document as an e mail attachment on page 289 e Using the File Management button on page 289 About optimizing Optimizing graphics in Fireworks involves doing the following e Choosing the best file format Each file format has a different method of compressing color information Choosing the appropriate format for certain types of graphics can greatly reduce file size e Setting format specific options Each graphic file format has a unique set of options You can use options such as color depth to reduce file size Some graphic formats such as GIF and JPEG also have options for controlling image compression ADOBE FIREWORKS CS3 258 User Guide e Adjusting the colors in the graphic for 8 bit file formats only You can limit colors by confining the image to a specific set of colors called a color palette Then you trim unused colors from the color palette Fewer colors in the palette means fewer colors in the image which results in a smaller file size for paletted image file types You should experiment with all optimization controls to find the best balance of quality and size Using the Export Wizard You can use the Export Wizard if you ar
537. uch as Adobe Dream weaver Adobe Flash HomeSite Adobe FreeHand and Adobe Director e Fireworks behaviors are preserved when they are exported to Dreamweaver and Director allowing you to export interactive elements such as buttons and rollovers Dreamweaver and Fireworks share a tight integration known as Roundtrip HTML Roundtrip HTML allows you to make changes in one application and have those changes seamlessly reflected in the other Dreamweaver and Fireworks share a file management feature that allows users to check files into and out of a Dreamweaver website e Flash and Fireworks also share a tight integration You can import Fireworks PNG source files directly into Flash without having to export to any other graphics format Flash offers a variety of options that allow you to control how Fireworks objects and layers are imported Fireworks also simplifies the task of working with applications such as Adobe Photoshop and Adobe GoLive For example you can easily import and export Photoshop graphics as fully editable files or create and edit HTML using Fireworks and GoLive This chapter covers the following topics e Working with Dreamweaver on page 292 e Working with Flash on page 305 e Working with FreeHand on page 312 e Working with Director on page 317 e Working with HomeSite on page 320 e Working with Photoshop on page 322 About working with Illustrator on page 326 e Ab
538. uch as a photographer controls depth of field The Sharpen tool can be useful for repairing scanning problems or out of focus photographs The Smudge tool lets you gently blend colors as when creating a reflection of an image To blur or sharpen an image 1 Select the Blur or Sharpen tool 2 Set brush options in the Property inspector Size sets the size of the brush tip Edge specifies the softness of the brush tip Shape sets a round or square brush tip shape Intensity sets the amount of blurring or sharpening 3 Drag the tool over the pixels to be sharpened or blurred g down Alt Windows or Option Macintosh to change from one tool behavior to the other ADOBE FIREWORKS CS3 68 User Guide To smudge colors in an image 1 Select the Smudge tool 2 Set the tool options in the Property inspector Size specifies the size of the brush tip Shape sets a round or square brush tip shape Edge specifies the softness of the brush tip Pressure sets the intensity of the stroke Smudge Color allows you to smudge using a specified color at the beginning of each stroke If this option is deselected the tool uses the color under the tool pointer Use Entire Document smudges using color data from all objects on all layers If this option is deselected the Smudge tool uses colors from the active object only 3 Drag the tool over the pixels to be smudged Lightening and darkening pixels You use the Dodge or Burn tool to lighten or
539. ument Search Files finds and replaces elements across multiple files If this option is not already selected in the Search pop up menu selecting it opens a dialog box in which you can select which files to search If Search Files is already selected in the Search pop up menu you have the option to select which files to search after you begin the search operation by clicking Find Replace or Replace All 4 From the Find pop up menu select an attribute to search for The options in the panel change according to your selection 5 Set the options for the selected Find attribute 6 Select a find and replace operation Find locates the next instance of the element Found elements appear selected in the document Replace changes a found element with the contents of the Change To option Replace All finds and replaces every occurrence of a found element throughout the search range Note Replacing objects in multiple files automatically saves those files you cannot reverse the change using Edit gt Undo For more information see Finding and replacing during a batch process on page 338 331 ADOBE FIREWORKS CS3 332 User Guide Setting options for finding and replacing in multiple files When finding and replacing among multiple files you can determine how Fireworks handles multiple open files after the search To save close and back up each file after it is searched 1 Select Replace Options from the Find panel Options menu
540. und or beveled 5 Ifyou chose miter set the miter limit the point at which a miter corner automatically becomes a beveled corner The miter limit is the ratio of miter corner length to stroke width 6 Click OK A smaller or larger path object with the same stroke and fill attributes replaces the original path object Editing paths using the Path panel The path panel provides quick access to a number of path related commands You can use the tools on this panel to speed up path editing tasks To open the Path panel Select Window gt Others gt Path The Path panel contains the tools shown below i w Path Path Combine BOO OMD Alter 3 9 I ds Point Edit hoaa por Select eee J00 ot Icon Function Join paths Split paths Union paths Intersect paths Punch paths Divide paths Crop paths Simplify paths GiesiSlieigia a Expand paths Icon Function Inset paths 4 i Invert paths a 5 Open close paths g Extrude paths ay Blend paths Point tools h Straighten m Smooth A Round to whole positions JA Round to half positions Move points p E Scale points 5D Rotate points WV Mirror points P Fillet points 2 Select entire contour re Select all points Deselect all points Incrementally grow or shrink the selection ee e De ADOBE FIREWOR
541. uplicate an object Alt drag Windows or Option drag Macintosh the object to the desired location ADOBE FIREWORKS CS3 161 User Guide Viewing layers The Layers panel displays objects and layers in a hierarchical structure If a document contains many objects and layers the Layers panel can become cluttered and difficult to navigate Collapsing the display of layers helps eliminate clutter When you need to view or select specific objects on a layer you can expand that layer You can also expand or collapse all layers at once To expand or collapse a layer Click the triangle to the left of the layer name in the Layers panel To expand or collapse all layers Alt click Windows or Option click Macintosh the triangle to the left of the layer name in the Layers panel Organizing layers You can organize layers and objects in a document by naming them and rearranging them in the Layers panel Objects can be moved within a layer or between layers Moving layers and objects in the Layers panel changes the order in which objects appear on the canvas Objects at the top of a layer appear above other objects in that layer on the canvas Objects on the topmost layer appear in front of objects on lower layers Note The Layers panel auto scrolls when you drag a layer or object up or down beyond the bounds of the viewable area To name a layer or object 1 Double click a layer or object in the Layers panel 2 Type anew name for the
542. ure from the pop up menu e Select Other from the pop up menu and navigate to a texture file to use an external texture Note You can apply textures from files with these formats PNG GIF JPEG BMP TIFF and PICT Macintosh only 3 Enter a percentage from 0 to 100 to control the depth of the texture Increasing the percentage increases the texture intensity Adding texture to a fill Textures modify the brightness of a fill but not the hue and give fills a less mechanical more organic look You can add a texture to any fill Fireworks ships with several textures from which to select such as Chiffon Oilslick and Sandpaper You can also use bitmap files as textures This allows you to create almost any type of custom texture To add texture to the fill of a selected object 1 Do one of the following to open the Fill Texture pop up menu e Click the Fill Texture pop up menu in the Property inspector e Click the Fill Color box in the Tools panel click Fill Options and click the Texture pop up menu 2 Do one of the following e Select a texture from the pop up menu e Select Other from the pop up menu and navigate to a texture file to use an external texture 3 Enter a percentage from 0 to 100 to control the depth of the texture Increasing the percentage increases the texture intensity 4 Select Transparent to introduce a level of transparency to the fill The Texture percentage also controls the degree of transparency Adding
543. uttons ADOBE FIREWORKS CS3 13 User Guide You can also use the Fireworks tools to edit imported graphics You can import and edit files in JPEG GIF PNG PSD and many other file formats After you import a graphic image you can adjust its color and tone as well as crop retouch and mask it Interactive graphics Slices and hotspots are web objects that specify interactive areas in a web graphic Slices cut an image into different sections to which you can apply rollover behaviors animation and Uniform Resource Locator URL links In addition you can export the sections using different settings On a web page each slice appears in a table cell Hotspots let you assign URL links and behaviors to all or part of a graphic For more information see Slices Rollovers and Hotspots on page 200 Slices and hotspots have drag and drop rollover handles that let you quickly assign swap image and rollover behaviors to graphics directly in the workspace The Button Editor and Pop up Menu Editor are convenient Fireworks features that help you build special interactive graphics for navigating websites About optimizing and exporting graphics Fireworks has powerful optimization features to help you find the balance between file size and acceptable visual quality as you prepare to export graphics You can optimize web graphics in Fireworks to minimize their file size so that they load quickly into websites while comparing the quality of the gra
544. ve point handles These handles are visible only on curve points however To draw an object with curved segments 1 Select the Pen tool in the Tools panel 2 Click to place the first corner point 3 Move to the location of the next point then click and drag to produce a curve point Each time you click and drag Fireworks extends the line segment to the new point 4 Continue plotting points If you click and drag a new point you produce a curve point if you just click you produce a corner point You can temporarily switch to the Subselection tool to change the location of points and the shape of curves as you draw Press Control Windows or Command Macintosh while dragging a point or point handle with the Pen tool 5 Do one of the following to end the path either open or closed Double click the last point to end the path as an open path Select another tool to end the path as an open path When you select certain tools and then return to the Pen tool Fireworks resumes drawing the object at your next click e To close a path click the first point you plotted The beginning and end points of a closed path are the same Adjusting the shape of a straight path segment You can lengthen shorten or change the position of a straight path segment by moving its points To change a straight path segment 1 Select the path with the Pointer or Subselection tool ADOBE FIREWORKS CS3 96 User Guide 2 Click a point with the Subs
545. viewing all frames 246 viewing current and adjacent frames 246 viewing next frame 246 opacity adjusting 181 271 See also transparency opening animated GIFs 17 248 documents 16 graphics created in other applications 16 multiple document views 33 multiple files as animations 249 PSD files 17 recent files 16 WBMP files 17 optimization settings changing in a batch process 337 comparing two or four settings 264 deleting preset settings 276 JPEG 272 preset 213 262 reusing 263 275 saving 263 275 sharing with another user 276 Optimize Image in Adobe Fireworks command 300 Optimize panel 27 Optimize to Size wizard 260 optimizing 258 Adobe Fireworks images from Dreamweaver 300 animations 248 basics 257 using Export Wizard 258 optimizing graphics 13 Options menu in panels 30 outlines 136 See also strokes Over button state 221 Over While Down button state 221 overlapping slices 205 P package contents viewing 352 pages adding and removing 156 creating links between 197 duplicating 156 editing 156 exporting as image files 158 exporting to HTML 157 master 157 moving between 156 Pages panel 27 panels 27 Align 28 Auto Shapes Properties 28 Behaviors 28 209 Create Symbol Script 28 docking 28 docking in panel group 29 Find 28 Find and Replace 331 332 Frames 27 242 hiding 29 History 27 40 Image Editing 28 Info 28 Layer 159 Layers 27 Library 186 moving 28 opening custom layouts 30 Optimize
546. w from top to bottom Choosing one of the Vertical orientation options affects only the order of text columns not the order of text characters Setting text alignment Alignment determines the position of a paragraph of text relative to the edges of its text block In horizontal alignment text is aligned relative to the left and right edges of a text block In vertical alignment text is aligned relative to the top and bottom edges of a text block For more information on setting horizontal or vertical text orientation see Setting text orientation on page 116 You can align horizontal text to the left or right edges of the text block center it or fully justify it so that text aligns to both the left and right edges By default horizontal text is left aligned ADOBE FIREWORKS CS3 117 User Guide Vertical text can be aligned to the top or bottom of a text block centered within the text block or fully justified between both the top and bottom edges To achieve a stretched filter or to fit text into a specific space you can set the alignment to stretch the text horizon tally for horizontally oriented text or vertically for vertically oriented text fagunculam Horizontal text stretched to fill a text block The alignment controls appear in the Property inspector when text is highlighted or a text block is selected Text alignment options in the Property inspector To set text alignment 1 Select the text 2 Clic
547. where on the screen to apply it to the color box e Click the Transparent button in the pop up window to make the stroke or fill transparent To display the current Swatches panel swatch group in the color pop up window Select Swatches Panel from the color pop up window Options menu ADOBE FIREWORKS CS3 136 User Guide To display a different swatch group in the color pop up window Select a swatch group from the color pop up window Options menu Selecting a swatch group here does not affect the Swatches panel Sampling colors from a color pop up window When a color pop up window is open the pointer becomes a special eyedropper that can take up colors from almost anywhere on the screen This is known as sampling To sample a color from anywhere on the screen for the current color box 1 Click any color box The color pop up window opens and the pointer changes to an eyedropper 2 Click anywhere in the Fireworks workspace to select a color for the color box The color is applied to the characteristic or feature associated with the color box and the color pop up window closes y to select a websafe color Working with strokes Using the Property inspector the Stroke Options pop up menu and the Edit Stroke dialog box you can have full control of every brush nuance including ink amount tip size and shape texture edge effect and aspect Applying strokes You can change the stroke attributes of the Pen and Brush tools
548. which you can import prepared animation symbols graphic symbols and button symbols as well as navigation bars and multi symbol themes Using these symbols you can quickly create a sophisticated web page containing advanced navigation elements without having to spend time creating original symbols To import one or more prepared symbols from a Fireworks symbol library 1 Open a Fireworks document 2 Select a folder in the Common Library panel These folders contain various pre created symbols such as anima tions and bullets In addition you can import symbols from previously exported library PNG files located on your hard disk on a CD or on a network For more information about exporting symbols see Exporting symbols on page 195 To import symbols from another file into the current document 1 Do one of the following e Select Import Symbols from the Library panel Options menu e Select Edit gt Libraries gt Other 2 Navigate to the folder containing the file select the file and click Open 3 Select the symbols to import and click Import ADOBE FIREWORKS CS3 User Guide The imported symbols appear in the Library panel v Assets Styles URL Library Shapes Graphic 2 button 1 Graphic E logo 1 Graphic E logo 2 Graphic You can also import and export individual symbols into and out of the Library panels of multiple documents by dragging and dropping or copying and pasting instances To import a symbo
549. with a gradient instead of a solid color Like the Paint Bucket tool it retains the properties of the last used element ADOBE FIREWORKS CS3 144 User Guide To use the Gradient tool 1 Click the Paint Bucket tool in the Tools panel and select the Gradient tool from the pop up menu 2 Select from the following attributes in the Property inspector Fill Options is a pop up menu from which you can select a gradient type Fill Color box when clicked displays the Edit Gradient pop up window from which you can set a variety of color and transparency options Edge determines if the gradient has a hard anti aliased or feathered fill edge If you select a feathered edge you can specify the amount of the feathering Texture gives you many options to select from including Grain Metal Hatch Mesh or Sandpaper 3 Click and drag the pointer to establish a starting point of the gradient as well as the direction and length of the gradient area Transforming and distorting fills You can move rotate skew and change the width of an object s pattern or gradient fill When you use the Pointer or Gradient tools to select an object with a pattern or gradient fill a set of handles appears on or near the object You can drag these handles to adjust the object s fill gt Use the fill handles to interactively adjust a pattern or gradient fill To move the fill within an object gt Drag the round handle or click in a new location i
550. works layers can apply to a single page or be shared across pages Once shared the layers are shaded yellow to differentiate them from unshared layers For rapid prototyping you can create workflows with hyperlinks and hotspot behaviors on multiple pages You can also preview all of your pages in a browser or export them all at once as multiple HTML pages Prototype without complexity New Pages panel A new Pages panel gives easy access to all of the pages in your PNG file Apply layers across pages Layers can apply to a single page or can be shared across multiple pages Once shared the layers are displayed in yellow to differentiate from unshared Layers Use a master page for common An optional master page can be used to hold elements that are common to all elements pages For more information see Working with pages on page 155 Create Flash based slideshows Automatically create an image slideshow The Create Slideshow command allows you to create a Flash slideshow without knowing how to use Flash You simply select a folder with images add slideshow options such as slide transitions select a Fireworks album player a Flash template for the final output and automatically batch process the required thumbnail and full size images that are optimized for the web Create a Flash slideshow without learning Flash Create Slideshow feature Choose Create Slideshow from the Commands menu to launch the new tool Fo
551. x 1 le Select the Paint Bucket tool 2 Select a color in the Fill Color box 3 Set the tolerance value in the Property inspector Note The tolerance determines how similar in color pixels must be to be filled A low tolerance value fills pixels with color values similar to the pixel you click A high tolerance fills pixels with a broader range of color values 4 Click the image All pixels within the tolerance range change to the fill color To 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 from the pop up menu 3 Set the fill attributes in the Property inspector 4 Click the pixel selection to apply the fill The Paint Bucket and Gradient tools can also fill selected vector objects For more information about creating applying and editing gradient fills see Working with fills on page 140 Sampling a color to use as a stroke or fill color With the Eyedropper tool you can sample color from an image to designate a new stroke or fill color You can sample the color of a single pixel an average of color values within a 3 by 3 pixel area or an average of color values within a 5 by 5 pixel area To sample a stroke or fill color 1 Ifthe correct attribute is not already active do one of the following e Click the stroke icon next to the Stroke Color box in the Tools panel to make it the active attribute e Click the fill icon nex
552. xport to SWF format e Blend mode e Layers e Masks applied before export e Slice objects image maps and behaviors e Pattern fills e Contour gradients To export a Fireworks graphic or animation as a SWF file 1 Select File gt Export or click the Quick Export button and choose Export SWF from the Flash pop up menu 2 Inthe Export dialog box type a filename and choose a destination folder 3 Select Flash SWF from the Save As pop up menu 4 Click the Options button The Flash SWF Export Options dialog box appears x Objects Maintain paths Maintain appearance Text Maintain editability Convert to paths JPEG quality 100 Frames All C From fi to 1 Frame rate fis per second For best editability in Flash choose Maintain Paths and Maintain Editability To prefer appearance over editability and file size choose Maintain Appearance and Convert to Paths cme ADOBE FIREWORKS CS3 311 User Guide 5 Inthe Objects section choose one of the following Maintain Paths allows you to maintain path editability Effects and formatting are lost Maintain Appearance converts vector objects to bitmap objects as needed and preserves the appearance of applied strokes and fills Editability is lost 6 In the Text section choose one of the following Maintain Editability allows you to maintain text editability Effects and formatting are lost Convert to Paths converts text to path
553. xt and HTML tags you entered appear in your Fireworks PNG file on the body of the slice as raw HTML code Note HTML text slices may vary in appearance when viewed in different browsers and on different operating systems because font size and type can be set in the browser Creating nonrectangular slices Rectangular slices may not be sufficient when youre trying to attach interactivity to a nonrectangular image If you plan to attach a rollover behavior to a slice for example and your slice objects overlap or have irregular shapes then a rectangular slice may swap unwanted background graphics along with the swap image Fireworks solves this problem by allowing you to draw slices in any polygonal shape using the Polygon Slice tool RAGE RESULT You can also insert a slice on top of a vector path to create irregular slice shapes To draw a polygon slice object 1 Select the Polygon Slice tool 2 Click to place the vector points of the polygon The Polygon Slice tool draws only straight line segments 3 When drawing a polygon slice object around objects with soft edges be sure to include the entire object to avoid creating unwanted hard edges in the slice graphic 4 To stop using the Polygon Slice tool select another tool from the Tools panel You do not have to click the first point again to close the polygon Note Be careful not to overuse polygon slices because they require more JavaScript code than similar rectangular slices Us
554. xt is used as the mask object it is converted to a bitmap and is no longer editable as text after it is imported into Photoshop Grouping objects to form a mask You can group two or more objects to create a mask The topmost object becomes the mask object You can group objects as either bitmap masks or vector masks The stacking order determines the type of mask applied If the top object is a vector object the result is a vector mask If the top object is a bitmap object the result is a bitmap mask Note For more information about vector and bitmap masks see About masks on page 164 To group objects to form a mask 1 Shift click two or more overlapping objects You can select objects from different layers 2 Select Modify gt Mask gt Group as Mask ADOBE FIREWORKS CS3 173 User Guide Editing masks You can modify masks in many ways By modifying a mask s position shape and color you can change the visibility of masked objects You can also change a mask s type and the way it is applied In addition masks can be replaced disabled or deleted The results of editing a mask are immediately visible even if the mask object itself is not visible on the canvas The mask thumbnail in the Layers panel displays the edits you make to the mask Masked objects can also be modified You can rearrange masked objects without moving the mask You can also add additional masked objects to an existing mask group
555. xt using any of the import methods Imported ASCII text is set to the current default font 12 pixels high and to the current fill color Handling missing fonts If you open a document in Fireworks that contains fonts not installed on your computer Fireworks asks if you want to replace the fonts or maintain their appearance This is useful if you share files with users on other computers that may not have the same fonts installed Choosing Maintain Appearance replaces the text with a bitmap image that represents the appearance of the text in its original font You can still edit the text but when you do so Fireworks replaces the bitmap image with a font that s installed on your system This can cause the appearance of the text to change You can select fonts to replace the missing fonts After you replace fonts the document opens and you can edit and save the text When the document is reopened on a computer that contains the original fonts Fireworks remembers and uses the original fonts To select a replacement font 1 Open a document with missing fonts The Missing Fonts dialog box opens 2 Select a missing font from the Change Missing Font list 3 Do one of the following Select a replacement font from the To list Select to display the text in the default system font To leave the missing font as is click No Change ADOBE FIREWORKS CS3 124 User Guide 4 Click OK The next time you open a document with the same miss
556. y inspector 1 Choose Select gt Deselect click the Pointer tool to display the document properties in the Property inspector then click the Canvas color box 2 Picka color from the Swatches pop up window or click the eyedropper on a color anywhere onscreen To select a transparent canvas click the None button in the Swatches pop up window To resize a document and all of its contents 1 Do one of the following e Choose Select gt Deselect click the Pointer tool to display the document properties in the Property inspector then click the Image Size button in the Property inspector e Select Modify gt Canvas gt Image Size The Image Size dialog box opens I m Pixel dimensions o 400 Pixels x 4 t 450 Pixels 7 m Print size oe 5 556 finches gt Je t 6 25 finches 7 Resolution 72 Pixels nch x IV Constrain proportions IV Resample image Bicubic ge IV Current Page Only cme 2 In the Pixel Dimensions text boxes enter new horizontal and vertical dimensions You can change the units of measure If Resample Image is deselected you can change the resolution or print size but not pixel dimensions 3 In the Print Size text boxes enter horizontal and vertical dimensions for the printed image 4 In the Resolution text box enter a new resolution for the image You can select between pixels inch and pixels cm as the units or select Resample Image Changing the resolution also
557. y into Dreamweaver CS3 Fireworks CS3 is an integral part of Adobe Creative Suite 3 Web Premium and Web Standard which empower creative professionals and developers to experience an uninterrupted flow of energy and ideas from initial concept to polished final execution across print video web and mobile devices The end to end integration is the core of what makes Creative Suite uniquely powerful creative professionals and developers remain focused on their vision and achieve the highest quality results in less time This chapter covers the following topics e Installation on page 1 e Adobe Help on page 2 e Resources on page 4 e What s new in Fireworks CS3 on page 8 Installation Requirements To review complete system requirements and recommendations for your Adobe software see the Read Me html file on your installation DVD Install the software 1 Close any other Adobe programs open on your computer 2 Insert the installation disc into your DVD drive and follow the on screen instructions Note For more information see the Read Me html file on the installation DVD Activate the software If you have a single user retail license for your Adobe software you will be asked to activate your software this is a simple anonymous process that you must complete within 30 days of starting the software For more information on product activation see the Read Me file on your installation DVD or visit the
558. y panel Options menu 3 Click Delete The symbol and all its instances are deleted To swap a symbol 1 Select a symbol that has already been placed on the canvas 2 Right click and select Swap Symbol 3 In the Swap Symbol dialog box select another existing symbol instance 4 Click OK Using 9 slice scaling The 9 slice scaling feature introduced in Fireworks CS3 allows you to scale vector and bitmap symbols up or down without distorting their geometry The symbol can be scaled using 3 or 9 regions depending on the shape of the symbol 188 ADOBE FIREWORKS CS3 189 User Guide The following figure shows how images are scaled using the 9 slice scaling feature No Scale Horizontal Scale Vertical Scale Horizontal and Vertical Scale The 9 slice scaling guides are enabled in the Symbol Editor and Button Editor for all symbols by default To scale a symbol using 9 slice scaling 1 Double click the symbol or button to open the Symbol Editor or Button Editor 2 Edit the 9 slice scaling guides as follows a Enable or disable the guides by selecting or deselecting the Enable 9 slice scaling guides check box b Move the guides and place them appropriately on the button or symbol Make sure that the parts of the symbol that you don t want to be distorted when scaling for example the corners are outside the guides as represented by the yellow areas in the graphic above The 9 slice scaling guides are positio
559. you create special graphics effects such as feathering the edges of a pixel selection To select an area around an existing marquee 1 After drawing a marquee select Select gt Border Marquee 2 Enter the width of the marquee that you want to place around the existing marquee and click OK Smoothing the border of a marquee You can eliminate excess pixels along the edges of a pixel selection This is useful if excess pixels appear along the border of a pixel selection or marquee after you use the Magic Wand tool A pixel selection before and after smoothing To smooth the border of a marquee 1 Choose Select gt Smooth Marquee 2 Enter a sample radius to specify the desired degree of smoothing and click OK Converting a marquee to a path Using Fireworks you can convert a bitmap selection to a vector object by drawing a marquee around the part of the bitmap that you want to convert This process is useful if you want to start creating an animation by tracing a selection from a bitmap for example To convert a marquee to a path After drawing a marquee select Select gt Convert Marquee to Path The document s current stroke and fill attributes are applied to the new path Transferring a marquee selection You can transfer a marquee selection from one bitmap to another bitmap object on the same layer or one on a different layer You can also transfer the marquee selection to a mask To transfer a marquee selection to anot
560. you may want to add a Down state and an Over While Down state in addition to the Up and Over states These states give web page users additional visual cues You can create a nav bar using two state or three state buttons but only a button with all four states qualifies as a real nav bar button in Fireworks Fireworks has several Nav Bar behaviors that make buttons act as though they are related to each other For example you can create nav bar buttons that act like the push buttons on an old car radio when the user clicks a button it remains down until another button is clicked Although four state buttons are not mandatory in a nav bar using them allows you to take advantage of the built in Nav Bar behaviors in Fireworks For details about creating the Up and Over states for a button see Creating a simple two state button on page 221 To create a Down state 1 With a two state button open in the Button Editor click the Down tab 2 Do one of the following to create the button s Down state e Click Copy Over Graphic to paste a copy of the Over state button into the Down window and then edit it to change its appearance Drag and drop import or draw a graphic Note When you insert or create a graphic for the Down state the Include Nav Bar Down State option is automatically chosen This button state is for buttons that are part of navigation bars To create an Over While Down state 1 With a three state button open in the
561. your source file or working file Using a Fireworks PNG file as your source file has the following advantages e The source PNG file is always editable You can go back and make additional changes even after you export the file for use on the web e You can slice complex graphics into pieces in the PNG file and export them as multiple files with different file formats and various optimization settings To save a new Fireworks document 1 Select File gt Save As The Save As dialog box opens 2 Browse to the desired location and type the filename You do not need to enter an extension Fireworks does that for you 3 Click Save To save an existing document Select File gt Save To save a Fireworks CS3 PNG file for use in a previous version of Fireworks 1 Select File gt Export 2 Browse to the location where you want to save the file 3 Ifthe Fireworks CS3 file has more than one page select Pages to Files in the Export pop up menu ADOBE FIREWORKS CS3 23 User Guide 4 Select either Images or Fireworks PNG in the Export As pop up menu If you select Images each page will be saved in the default file format This file format can be set using the Optimize panel All objects on the top level layers will be saved in the export but any items on sub layers will not be exported Saving documents in other formats When you use File gt Open to open a file of a format other than PNG you can use all of the features of Firew
562. youts MXML export 0 eee eee eee 329 Chapter 17 Automating Repetitive Tasks Findingandireplacing ierre terana sab iaee bedinea EAE ane A LERE eRe 330 Bat h processing erea a A E e a EE RE a EAA E DEERE NA 334 Extending Fireworks soararn e Ea Ea etal A E DAA wee ea EEA EREE Ea 341 Flash SWF movies used as Fireworks panels eee cece cece cece eee e teen eee e en eneneee 345 Chapter 18 Preferences and Keyboard Shortcuts Setting preferences ascii accede kd a a aa aa jaaitiatadaiess cag eget Oa E 346 Changing keyboard shortcut sets 0 eee eee cere renee ene n cent nee neeeeaee 349 Working with configuration files 6 0 cece ccc ccc cen n ene e ene n teen eeeenenee 350 About reinstalling Fireworks 1 0 cece ccc een cece nner eee n ence ene n ene n en E e 351 Viewing package contents Macintosh only 02 eee eee cece e cence eter e tence een enees 352 Chapter 1 Getting Started Adobe Fireworks CS3 a unique hybrid vector and bitmap tool delivers the most efficient design environment for rapidly prototyping websites and user interfaces and creating and optimizing images for the web Fireworks CS3 offers the flexibility to edit both vector and bitmap images a common library of prebuilt assets and time saving integration with Adobe Photoshop CS3 Adobe Illustrator CS3 Adobe Dreamweaver CS3 and Adobe Flash CS3 Professional software Rapidly prototype your web project and then leverage your work directl
563. ze Painting Cursors preference 347 Burn tool 66 Button Editor 221 creating symbols in 187 editing symbols in 193 button states Down 221 222 Over 221 Over While Down 221 222 Up 221 button symbols editing 224 inserting in a document 223 buttons active area 226 Button Editor 220 creating 220 defined 221 Live Filters 222 navigation bars 228 overview 220 setting a target 227 c canvas 34 modifying characteristics 34 modifying resolution 35 rotating 36 trimming 36 cell border properties 234 cellular phone graphics See WBMP files center point and axis of rotation 56 Chamfer Rectangle tool 87 character spacing See kerning Check Spelling command 124 cloning bitmap areas 66 images 66 objects 54 CMY color model 130 INDEX 354 collapsing layers 161 color adjusting 71 applying from Swatches panel 127 changing 64 changing stroke 137 choosing color depth 266 choosing swatch group 128 choosing using Eyedropper tool 136 color models 130 creating in Color Mixer 131 creating with system color picker 131 deleting from Swatches panel 129 dithering with websafe 132 fills 76 finding and replacing 333 finding and replacing non websafe 333 gradient fills 142 inverting values 78 picking from color bar 130 pop up window 135 removing unused 267 replacing a swatch 129 resetting default 127 sampling 64 136 saving custom swatches 129 setting preferences 346 viewing color values 131 color bar 127

Adobe Fireworks CS3 User's Manual

Contents

Download Pdf Manuals

Related Search

Related Contents