Adobe Fireworks CS5 : Exporting to Flash Catalyst

You can convert static artwork created in Adobe Fireworks into interactive designs, and then publish a finished project as a SWF file ready for distribution.

Flash Catalyst lets you work efficiently with developers who use Adobe Flash Builder™ 4 to create RIAs. Designers use Flash Catalyst to create the functional user experience and then hand off the project file to developers who use Flash Builder to add functionality and integration with servers and services.

Fireworks and Flash Catalyst

Fireworks is optimized to create screen graphics. As such, it’s the ideal application for creation of Flash Platform assets. Fireworks CS5 supports the latest FXG format (2.0). You can use Fireworks to design assets (individual graphics or multipage design mockups) for the Flash platform, export them as FXG, then move them into Flash tools like Flash Catalyst, all the while maintaining your design fidelity.

Exporting pages

Fireworks pages translate directly to Flash Catalyst pages. As a designer, you can build your mockup for a rich media application within Fireworks, and then export the file as an FXG document to open in Flash Catalyst or pass it on to the developer.

You will export a web banner from Fireworks as an FXG document.

1.	Open the fc_banner.fw.png.
2.	Open the Pages panel and click on the individual pages. Each one has some different elements while common elements have been added to the master page.
3.	Select the Shop in Meridien page and then open the Layers panel.
4.	Expand the content layer. There are two sublayers: next feature and teaser.
5.	Choose File > Export.
6.	Name the file fc_banner.
7.	Choose the FXG folder in the Lesson13 folder as the location for saving the file and associated assets. Note When exporting a file as FXG And Images, you can choose to export the current selection, the current page, or all pages in the file.
8.	Make sure that FXG And Images is selected from the Export drop-down list.
9.	Select All Pages from the Pages drop-down list.
10.	Click the Export button. The file exports to the chosen folder.

Viewing files in Flash Catalyst

Next you will check out the fidelity between the Fireworks document and the FXG export by opening the exported file in Flash Catalyst.

Editing the FXG file in Flash Catalyst

Next you will make some changes to the file in Flash Catalyst.

1.	Select the page called page_2__Bike_in_Meridien.
2.	Double-click on the paragraph of text below the photo. Flash Catalyst switches to text-editing mode so you can make changes, adding or removing the existing characters. Fireworks Effects supported by FXG 2.0 FXG 2.0 also supports many of Fireworks native effects and filters, retaining their editability, including: Opacity Solid color fill Canvas color: Mapped into Flash Catalyst as a Rectangle that has the same color and is the size of the project; it is placed on the locked Background layer Gradients fills: Linear and Radial Blending Modes: Normal, Multiply, Screen, Lighten, Darken, Difference, Add, Subtract, Invert, Alpha, Erase, Overlay, Hardlight, Color Dodge, Exclusion, Hue, Saturation, Color, Luminosity, Color Burn, and Soft Light Live Filters: Blur, Blur More, Inner Shadow and Drop Shadow Vector objects, right down to their opacity, are preserved as vectors with editable attributes.
3.	Select the Pointer tool in Flash Catalyst and click once on the gray rectangle underneath the text. Note that the rectangle is translucent.
4.	In the Properties panel, change the opacity from 90 to 60. The selected rectangle becomes more transparent.
5.	Select page_2_Shop_in_Meridien and then open the Layers panel.
6.	Expand the content layer. The layer structure from the Fireworks file has been maintained, right down to the sublayers.
7.	You can close the file without saving it.

Fireworks and Illustrator

Another advantage of the new FXG export in Fireworks is that Adobe Illustrator also supports this format. If you have ever tried saving a Fireworks file as an Illustrator file, you’ve no doubt been frustrated with the poor version support for this option. Fireworks only saves AI files at the version 8 level. This means that very few of Fireworks’ more advanced features are preserved. But now you can export your Fireworks design as FXG And Images for further editing in Illustrator. FXG-supported vector fill effects are retained as vectors, so your screen-based design could easily be converted into a high-resolution CMYK file for printing, or simply opened in Illustrator for further editing.