Adobe® Flash®
Catalyst™ is a new professional interaction design tool for rapidly
creating interactive content without writing code. You can create
interactive portfolios, product guides, site navigation, interfaces for
rich Internet applications (RIAs), and more.
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.
|
FXG 2.0 is an
XML-based graphics interchange file format for the Flash platform. FXG
contains high-level graphical and text primitives that can be used to
create, group, transform, and visually modify basic vector and bitmap
shapes. The FXG rendering model follows very closely the Flash Player 10
rendering model and exposes all graphics capabilities of the Flash
platform, as well as offering expandable support to accommodate future
capabilities of the Flash Player.
|
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.
1. | Launch Flash Catalyst.
Note
This exercise requires Flash
Catalyst. If you do not own Flash Catalyst, you may skip this section,
or download the 30-day, fully functional trial version of Flash Catalyst
from Adobe at www.adobe.com/downloads.
|
2. | When the Flash Catalyst welcome screen appears, choose From FXG File, or select File > New Project From Design File.
|
3. | Browse for the fc_banner.fxg file.
|
4. | Open
the file. The entire design opens, looking identical to the original
Fireworks document. Each page has been exported as a Flash Catalyst
Page/State.
Note
Depending on the complexity of your design, Flash Catalyst may take noticeable time to analyze the file and object structure.
|
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.
|
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.
|
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.
