| After you've painstakingly planned, designed, and created your graphics, you need to export the images. There are a number of ways to export Fireworks graphics. You can export a document as a single image in JPEG, GIF, or another graphic file format. You can also export the entire document as an HTML file and associated image files. You can also integrate your Fireworks graphics with Flash and Director. Web Graphics After you have created your Web graphic, you need to export it to a Web-friendly format such as JPEG or GIF. Up to this point, we've explored the strengths and weaknesses of each file format. We've also covered the optimization process. All that's left is to export the image. Fireworks provides three ways of exporting a Web graphic: the Export command, the Export Area tool, and the Export Wizard. The Export command exports all the objects on the canvas and excludes objects in the work area. Use the Export command (File, Export) to launch the Export dialog box (Figure 27.13). Figure 27.13. The Export dialog box provides options for exporting your document. 
Name the file and be sure that Images Only is selected in the Save As Type drop-down menu. You'll notice that there are several types to choose from, depending on how the exported image is to be used. For the Web, use Images Only. Click the Save button and you're finished. After you've optimized your image as a GIF or JPEG, that file format will be automatically selected during the export process. If you want to export only a selected portion of an object or the canvas, use the Export Area tool. Drag the tool to define the area for export (Figure 27.14). Press the Return/Enter key to launch the Export Preview dialog box (Figure 27.15). If you've already optimized your image, these controls will look familiar. The Export Preview dialog box enables you to select the export file type and adjust the optimization settings, as well as preview the effect of the optimization settings. Figure 27.14. Use the Export Area tool to define a specific area for export. 
Figure 27.15. The Export Preview dialog box provides the same controls as the Optimize panel and the Preview buttons . 
Using the Export Wizard is the easiest way to configure the optimization of your graphic for export. To access it, select File,Export Wizard. You are prompted to answer a series of questions (Figure 27.16). When you're finished, you are presented with a GIF or JPEG (if you chose the Web or Dreamweaver as your output preference), or TIFF (if you chose an image editing or desktop publishing application). Figure 27.16. The Export Wizard offers a simple, but limited, method of viewing export options. 
After you exit the wizard, you find yourself in the Export Preview dialog box, where you can once again select GIF or JPEG if you are exporting for the Web. If you've read this far, you already know what file format you're going to use, so you can skip the Export Wizard altogether. Web Pages Fireworks generates HTML that can be read by most Web browsers and HTML editors. There are some issues, however, in taking your Fireworks page design and exporting it straight to HTML. First, HTML is a text-based framework where objects are positioned relative to each other. Fireworks is an object-oriented program where all elements are precisely sized and positioned in pixels relative to the top-left corner of the canvas. Fireworks elements are constrained to a specific canvas size . HTML is designed to flow to fill a browser window of varying sizes. In addition, the two major browsers (Internet Explorer and Netscape Navigator) still don't render elements exactly the same. They're getting better about this, but there are still differences that can affect your design. There are several ways to export Fireworks HTML: -
Export an HTML file, which you can later modify in an HTML editor. -
Copy HTML code to the Fireworks Clipboard, and then paste that code directly into an existing HTML document. -
Export an HTML file, open it in an HTML editor, manually copy sections of code from the file, and paste that code into another HTML document. -
Use the Update HTML command to make changes to an HTML file you've previously created. To define how HTML is exported in Fireworks, use the HTML Setup dialog box (Figure 27.17). These settings can be document specific or used as your default settings for all HTML that Fireworks exports. Figure 27.17. Adjust the HTML export settings, using the HTML Setup dialog box. 
To export an entire page design, your best bet is to use the Slice tool to divide your design in regions (Figure 27.18). Figure 27.18. Divide your page design into slices for export. 
After the page is sliced up, export the page, using the Export command (File, Export). The Export dialog box is launched. Rename the HTML file if necessary and adjust any of the settings to fit your file hierarchy (Figure 27.19). Figure 27.19. The Export dialog box. 
Click the Save button and all the HTML code necessary to reassemble sliced images, as well as the sliced images themselves , are created. Fireworks HTML contains links to the exported images and sets the Web page background color to the canvas color . You can then modify the page, using an HTML editor of your choice. Integrating with Dreamweaver Dreamweaver and Fireworks are two peas in a pod when it comes to integration. Both programs recognize and share many of the same file commands, including changes to links, rollovers, and table slices. Used together, the two programs provide a streamlined workflow for editing, optimizing, and placing Web graphics files in HTML pages. The first step in creating an integrated work environment is to define a local site in Dreamweaver and to make sure Design Notes are enabled. Design Notes contain information about the graphic files that Fireworks exports. When you launch and edit a Fireworks image from Dreamweaver, Dreamweaver uses this information to locate the source PNG. For example, you created a graphic called candyapple.png. You then exported that graphic as a JPEG image and placed it in your Dreamweaver document. Your source file is candyapple.png. Setting Fireworks as the external image editor for Dreamweaver lets you effortlessly go between Dreamweaver and Fireworks if you need to edit an image after it is placed in Dreamweaver. Simply select the image and click the Fireworks icon (Figure 27.20) in the Property inspector to launch Fireworks. Edit the image, save it, and the changes are automatically applied to the Dreamweaver file. Figure 27.20. Use the Fireworks icon in the Dreamweaver Property inspector to launch Fireworks for image editing. 
If planning is not your strong suit, you can build your page in Dreamweaver and add image placeholders if your graphics are not ready. An image placeholder is a graphic you use in your Dreamweaver document until final artwork is ready to be added to the page. You can set the placeholder's size, color, and text label. After the image placeholder is used in Dreamweaver, you can design the graphic at some later point in Fireworks. After the graphic is created, save it as a PNG and export it as a Web-ready graphic file (GIF or JPEG). When you return to Dreamweaver, the replacement image is updated in the document. Integrating with Flash Although Flash has robust drawing capabilities, you may want to create your complex graphics in Fireworks and export them to Flash. There are two ways to accomplish this. First, you can copy vector objects from Fireworks and paste them into Flash. Select the objects you want to copy and then use the Copy command (Edit, Copy). In Flash, create a new document and then Paste (Edit, Paste). The Fireworks objects are pasted as a group . Ungroup the objects (Modify, Ungroup) ”or better yet, use (Modify, Break Apart, which works more consistently ”to separate the elements so they can be modified if necessary. To send an animation to Flash, click the Quick Export button located at the top right of the document window. Select Macromedia Flash and Export to SWF. (Figure 27.21) Enter a file name, click Save, and you're finished. Figure 27.21. Use the Quick Export button to easily send your animation to Flash. 
Integrating with Director Because Fireworks enables designers to create and export 32-bit PNG file formats, Fireworks is a popular image and vector artwork design tool for Director developers. Director, which is not covered in this book, is a Macromedia application that enables developers to create interactive content that integrates long video streams, photo-quality images, audio, animation, 3D models, text, and Macromedia Flash content. This content is often used on CDs, DVDs, kiosks , and even the Web. Exported layers and slices from Fireworks can be used in Director as individual cast members or as composite user interfaces that can be imported as an entire entity onto the stage. Director developers can also use Fireworks to design and script rollovers and navigation interfaces. Developers can use Fireworks to create cast libraries from a single Fireworks document by using layers in Fireworks and exporting the Fireworks layers to Director MX. Any Fireworks MX document that contains layers can be exported as Director HTML with the Source pop-up menu in the Export dialog box set to Fireworks Layers. The 32-bit PNG format supports full Alpha transparency, and transparency in a Fireworks document is retained in the Director movie. If different graphic elements are arranged in separate layers and the developer does not want to generate separate files for each layer, exporting the entire document as a single file, using the PNG32 setting in the Optimize panel, flattens all the layers. Fireworks can also be used to create a navigational interface. Developers can design the elements in Fireworks, draw slices, add behaviors to the slices, and export the slices to Director MX. Any Fireworks MX document that contains slices can be exported as Director HTML with the Source pop-up menu in the Export dialog box set to Fireworks Slices. This setting enables the images as defined by the slices to be imported into the Director movie, along with the behaviors such as Simple Rollovers, Swap Image, Disjoint Rollovers, and Set Navbar Image behaviors. When exporting an animated GIF from Fireworks for use in Director, you need to disable Auto Crop and Auto Difference in the Animation tab of the Export Preview. For some reason, Director does not correctly display animated GIFs if those settings are enabled. | 