Exporting Fireworks Images


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.

Note

After you export an image, Fireworks saves the optimization settings for the image within the PNG file. Then, when you go to export the image again, Fireworks automatically recalls those settings so you don't have to reconfigure them.


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 (see Figure 5.13).

Figure 5.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 can choose from several types, depending on how the exported image is to be used. For the web, use Images Only. Press the Save button and you're finished.

After you've optimized your image as a GIF or JPEG, that file format is selected automatically 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 (see Figure 5.14).

Figure 5.14. Use the Export Area tool to define a specific area for export.


Press the Return/Enter key to launch the Image Preview dialog box (see Figure 5.15).

Figure 5.15. The Image Preview dialog box provides the same controls as the Optimize panel and the Preview buttons.


If you've already optimized your image, these controls will look familiar. The Image 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.

Using the Export Wizard gives you a way to have Fireworks determine the best 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 (see Figure 5.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 5.16. The Export Wizard offers a simple, but limited, method of viewing export options.


After you exit the wizard, you find yourself in the Image 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 browser windows 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 differences that can affect your design still exist.

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, open the HTML Setup dialog box (see Figure 5.17) by choosing File, HTML Setup or clicking the Options button in the Export dialog box. These settings can be document specific or used as your default settings for all HTML that Fireworks exports.

Figure 5.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 (see Figure 5.18).

Figure 5.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 (see Figure 5.19).

Figure 5.19. The Export dialog box.


Press 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, suppose you created a graphic called 2002hondashadow.png. You then exported a JPEG image from that PNG document and placed the exported JPEG in your Dreamweaver document. Your source file is 2002hondashadow.png.

In Dreamweaver, select the JPEG image for which you want to edit the original PNG and click the Fireworks icon (see Figure 5.20) in the Property inspector to launch Fireworks. Edit the image, press the Done button, and the changes are automatically applied to the Dreamweaver file.

Figure 5.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. Choose Insert, Image, Image Placeholder to insert it into the HTML document. 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. Then after the graphic is created, save it as a PNG for future editing and export it from the PNG to a web-ready graphic file format (GIF or JPEG). When you return to Dreamweaver, select the placeholder and in the Property inspector choose the source file to replace the placeholder by using the Src field to browse to the appropriate file. The replacement image now appears in the document.

Note

If your image file is located on another server, you can also type the URL to the image in the Src field, rather than browsing to it. Be aware, however, that for remotely hosted images Dreamweaver maintains an image placeholder and does not display images within the page during design.


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 directly 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) and then manipulate as usual in Flash.

You can also import your Fireworks PNG document directly into Flash. For elaborate designs you want to use in Flash, this is often the easiest way to proceed. When you begin importing, a dialog box appears giving you the option to import as an image or to retain vector artwork and text. All frames in your document are retained as keyframes in the Flash document.

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 (see Figure 5.21). Enter a filename, click Save, and you're finished. Then you can import that SWF file with the animation from Fireworks directly into Flash.

Figure 5.21. Use the Quick Export button to send your animation to Flash easily.


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 in 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 entire entities 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. Any Fireworks 8 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 for Director projects. Developers can design the elements in Fireworks, draw slices, add behaviors to the slices, and export the slices to Director. Any Fireworks 8 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 Image Preview. For some reason, Director does not correctly display animated GIFs if those settings are enabled.



Special Edition Using Macromedia Studio 8
Special Edition Using Macromedia Studio 8
ISBN: 0789733854
EAN: 2147483647
Year: 2003
Pages: 337

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net