Creating and exporting Fireworks graphics as FXG files for Flash Catalyst

Many designers use Adobe Fireworks to create wireframes, page mockups, and prototypes. It's easy to create designs and graphics in Fireworks and use them in Flash Catalyst. Using Fireworks, you can create custom components and even more complex interactive prototypes by exporting to the files to the FXG graphics format.

In this article you'll learn some best practices for using Fireworks and Flash Catalyst together. You'll explore:

• How to organize your Fireworks files so that graphics and objects are easily found and used in Flash Catalyst
• How to create designs in Fireworks that can be exported as editable objects for Flash Catalyst
• Which objects, properties, and operations are supported by both tools

By structuring your Fireworks file properly and understanding how your designs will be translated to the FXG format, you can work more quickly and efficiently in Flash Catalyst.

Both Fireworks and Flash Catalyst have a similar system for structuring documents. In Fireworks, pages are typically used to create the discrete pages (or screens) of a website or application. States are used to create different states or appearances for interface components such as as rollovers and buttons (such as up, over down, over while down, disabled). Layers and sublayers are used to keep objects and elements of the design organized and in the proper order.

In Flash Catalyst, you use the Pages/States panel to create discrete pages (or screens) as well as to create different states for interface components (such as buttons). Layers and sublayers are also used to keep objects and elements of the design organized and in the proper order.

There are a few differences in the way pages, states, and layers are handled between Fireworks and Flash Catalyst:

• Layers may be shared among all or selected pages in Fireworks, but all of the layers in a Flash Catalyst project appear on all of the pages/states in that project.
• States are unique to a page in Fireworks, but each page and state from a Fireworks file will import into Flash Catalyst as its own, separate page/state.

The naming system for pages/states and layers in Flash Catalyst reflects the structure of the original Fireworks document as described in the table below:

Remember that every layer from every page and every state in the Fireworks file will appear in the Layers panel in Flash Catalyst for every page/state in the Flash Catalyst Project. This can be confusing if you are accustomed to seeing layers on a page-by-page basis in Fireworks. However, if you name all of your pages, states, and layers meaningfully in the Fireworks file, you'll find it is much easier to understand the structure of the Flash Catalyst project and find the assets you are looking for.

Layers that were not on a particular page in the original Fireworks document will appear in the Layers panel in Flash Catalyst for all pages/states in the project, but the visibility of those layers is turned off on the pages/states that correspond to the pages in Fireworks that did not have those layers. For example, a simple two page Fireworks file (with only one state per page) is exported to FXG as a two page/state Flash Catalyst project with two top-level layers ("Page1 Layers" and "Page2 Layers"); in Page/State1 in Flash Catalyst the visibility of the objects on the "Page2 Layers" is turned off and vice versa.

The layer hierarchy of sublayers is preserved from Fireworks to Flash Catalyst. Layers that are nested in the Fireworks document will have the same structure when the FXG file is imported. Remember that when you have a Fireworks file with multiple pages and/or states that Flash Catalyst will create a top-level layer for each each page/state, so the layer hierarchy will be one level deeper in Flash Catalyst (see Figure 1).

Layers that are shared to pages and/or shared to states in the Fireworks document will also appear in each of the corresponding pages/states in Flash Catalyst. Layers shared to pages in Fireworks have a global visibility setting; they are either visible on all pages or they are not visible on all pages. Layers that are shared to states in Fireworks have state-by-state visibility settings; a shared layer may be visible on some but not all states to which it was shared. The page and state visibility settings for shared layers is preserved in Flash Catalyst.

Finally, the canvas size of the first page in the Fireworks document defines the artboard size of the project in Flash Catalyst. In Flash Catalyst CS5, every page/state had the same artboard size, but in Flash Catalyst CS5.5 artboards may be independent sizes across pages/states. This means it may be necessary to resize some artboards if the original Fireworks document had different page sizes.

Structuring the Fireworks document properly and naming every page, state, and layer meaningfully will make it much easier to find objects and apply behaviors in Flash Catalyst.

Fireworks is a hybrid vector and bitmap tool. It can export designs to the FXG file format which contains both types of graphics—along with text objects. The paths (also called vectors) and text objects remain editable within Flash Catalyst. However, there are several object attributes and properties available in Fireworks that are not currently supported in Flash Catalyst. For this reason, you may find it necessary to modify, simplify, or even flatten some elements of your design before exporting the FXG files from Fireworks.

Working with paths (vectors)

Paths (vector objects) retain their shapes (nodes, segments, and Bezier curves) accurately when exported as FXG files. However, all paths are imported with the following properties regardless of their original path styles in Fireworks:

• Strokes are centered on paths
• Strokes do not have end caps
• Strokes have round joints
• All fills are anti-aliased (hard and feathered fills are not supported in Flash Catalyst).

Below is a table summarizing the path (vector) properties available in Fireworks and their support in Flash Catalyst:

Paths with unsupported properties will either be simplified (the unsupported property will be translated to a supported property, such as stroke alignment) or they will be flattened into a bitmap graphic when exported to FXG. Textures are ignored during export; objects with textures applied to stroke and/or fill are not automatically flattened during export and you must flatten them into bitmaps before exporting to FXG in order to preserve their textured appearance.

If you find that the paths imported into Flash Catalyst do not look the same or have lost properties during export, check to see if any of the design's properties are not fully supported. It may be necessary to either edit the path in Flash Catalyst to restore the properties or to flatten the object into a bitmap before exporting the design to a FXG file from Fireworks.

The table below lists the most common path properties that need to be handled carefully:

Understanding supported text properties

Text in the Fireworks document remains editable in Flash Catalyst as long as it was not flattened into a bitmap or converted to paths prior to export. There are many text properties in Fireworks. The most common properties are supported in the export process to FXG files and are also supported by Flash Catalyst.

The table below summarizes the text object properties available in Fireworks and how they are supported by Flash Catalyst:

As with vector objects, unsupported properties are either simplified or ignored during the export process to FXG files, but text objects are very rarely flattened to bitmap graphics when exported. Text will export and remain editable with only the supported properties rather than be automatically flattened. If you need a text object to retain its appearance and it uses properties that are not supported by Flash Catalyst, then you should flatten the text into a bitmap graphic prior to exporting to a FXG file.

One important difference between Fireworks and Flash Catalyst is the behavior of point and area text objects. In Fireworks, a point text object will continue to grow in length horizontally until you press the Enter/Return key and force the line to wrap; an area text object has a pre-defined width and the text will automatically wrap when it reaches that width, but an area text object has no fixed height.

In Flash Catalyst a point text object behaves the same way as it does in Fireworks, but an area text object has both a fixed width and a fixed height in Flash Catalyst. If you export an area text object from Fireworks then change the amount of text in that object in Flash Catalyst, extra text may flow out of view below the lower limit of the fixed height area. If this happens, you can either change the height of the area text object or change the text object to the Fit Height type in Flash Catalyst (see Figure 2). The fit height text object in Flash Catalyst behaves like the area text object does in Fireworks.

Exporting bitmap graphics

Bitmaps are perhaps the easiest objects to export to FXG files from Fireworks. The page optimization settings are irrelevant when exporting to the FXG file format because vectors and text will remain editable, and all bitmaps are exported as 32-bit PNG files (24 bit color depth plus 8 bit alpha channel for transparency support).

Fireworks ignores any slices that might normally be used to identify foreground or background images for HTML or CSS export. (In fact, Fireworks ignores all slices and hotspots in the Web Layer when exporting to FXG files.) You cannot use slices in Fireworks to indicate that anything under the slice should be exported as a bitmap graphic. If you need to export an element of the design as a bitmap, you must flatten it before exporting the design to the FXG file format.

Understanding grouped objects

Grouped objects that you create in Fireworks are retained as groups when exporting to FXG files, and the group name will appear in the Layers panel in Flash Catalyst. One key difference is that Flash Catalyst allows you to "look inside" the group from the Layers panel with a behavior similar to opening a sublayer. (Click the small arrow to the left of the group name to open the group and view the list of the objects within the group). In Fireworks, you have to ungroup a set of objects in order to see the objects inside a group (see Figure 3).

Using symbols

When you work with Fireworks, you can create two types of symbols: component symbols and standard symbols. Component symbols, (previously called rich symbols) are found in the Common Library and have editable properties. Standard symbols (graphic, animation, and button symbols) are easily created within a document then used in other documents using the export and import symbols function in the Document Library or by saving the symbol to the Common Library.

All symbols are essentially groups of vector, text, and/or bitmap elements that may be used repeatedly throughout a document. Component symbols have properties on a per instance basis, while standard symbols have the same properties for all instances (enabling you to edit one standard symbol to update all of the other instances).

When symbols are exported as FXG files, Fireworks automatically breaks them apart, separating the symbol into its individual design elements, and then the elements are exported as an optimized vector graphic for Flash Catalyst. All of the elements are bundled together into a single graphic in Flash Catalyst, but if you use the "break apart graphic" feature in Flash Catalyst, you can disassemble the graphic into the individual design elements. This is important, because symbols with multiple states, such as buttons, are exported as optimized vector graphics—you will not see all of the states for the button until you use the "break apart graphic" function.

If you are using Fireworks to create button symbols that have multiple states, you must complete two important steps to ensure that you export the correct pieces in Flash Catalyst so that you can assemble the button there:

1. There are four states in a button symbol in Fireworks: Up, Over, Down, and Over While Down. There are also four button states in Flash Catalyst, but the fourth state is Disabled (rather than Over While Down.) When creating the button states in Fireworks, remember to put the disabled state graphics in the fourth (Over While Down) button state (see Figure 4).

2. Fireworks exports a separate instance of the button label text object in each state of the button rather than a single text object that is shared by all pages/states of the button. If you want the text label on each button state to have a unique appearance, you will need to edit the label on each button state in Flash Catalyst. Unfortunately, when you assign a text object exported from Fireworks as the button label while creating the button component in Flash Catalyst, the original appearance and style of the text label is lost and must be recreated. You may find it easier to export buttons without text labels from Fireworks and then add the labels to the buttons from within Flash Catalyst.

To create a multi-state button in Flash Catalyst from a button symbol exported from Fireworks, follow these steps:

1. Design the necessary button states for the button symbol in Fireworks. If desired, you can choose to omit or even delete the text label on the button and add it back once you import the files to Flash Catalyst.
2. Export the button symbol to the FXG file format.
3. Open the FXG file with Flash Catalyst.
4. Locate the button graphic and select it.
5. Convert the graphic to a Button Component.
6. Enter edit-in-place for the button (by double-clicking the component or selecting the button and choose to edit a state from the HUD).
7. Select the button graphic and choose Optimize Artwork > Break Apart Graphic from the HUD. Notice that four layers named for the button states in Fireworks appear in the Layers panel.
8. It may be quite nested, but if you drill down into the layers you will find at the bottom-level of each sublayer the graphics for each state of the button; notice that the graphics for each state have visibility switched off for all layers except the "Up" layer.
9. Manually adjust the visibility of the button graphics on each sublayer to match the corresponding state (such as turning off the visibility of the up layer and turning on the visibility of the over layer for the Over button page/state in Flash Catalyst).
10. If you exported the button without text labels, create a text object in Flash Catalyst in the Up state of the button and specify it as the button label for the component. If you exported the text label from Fireworks, select the text object in the Up state of the button in Flash Catalyst, specify it as the button label for the component, re-create the appearance of the text label, then delete the redundant text objects exported from Fireworks on the other button states in Flash Catalyst.

If you export component symbols from the Common Library, all text labels are reverted to their default values for that symbol when exported to FXG files. For example, if the default text is "Button" (black, Arial, 12 pt) and you change the button label in the Symbol Properties panel to "Send Now" (red, Tahoma, 14 pt) and then export the document to the FXG format, when you open the FXG file in Flash Catalyst the button will have the default text label "Button" (black, Arial, 12 pt), not the red "Send Now" label that you specified. Text objects in all component symbols and standard button symbols are reverted to their symbol defaults when exported to FXG files, because symbols are exported as their base, or default, appearance. If you want to preserve the modified symbol appearance, break apart the symbol, group the components, and assign a meaningful name to the group before exporting to a FXG file.

Fireworks also enables you to create graphic and animated symbols. Graphic symbols are exported as optimized vector graphics; if you need access to all of the individual pieces within a graphic symbol, you can use the break apart graphic feature. Animation symbols are also exported as optimized vector graphics, but since the animation symbol has multiple states in Fireworks, there will be multiple pages/states when you open the file in Flash Catalyst. Only the first page/state in Flash Catalyst will have the graphics from the animation symbol. Unfortunately, the remaining pages/states in Flash Catalyst may be blank or empty, because all of the states of the animation are included within the optimized vector graphic, not individually placed on the different pages/states.

If you rotate a symbol in Fireworks, it will be exported as an optimized vector graphic in a group, and the rotation will be preserved. If you scale a symbol in Fireworks (by resizing an instance of a symbol smaller or larger than the original), it will also be exported as an optimized vector graphic in a group, but the scaling changes are not preserved. If you ungroup the scaled symbol in Flash Catalyst, it may unexpectedly change size, but then you can now scale it correctly within Flash Catalyst. It appears that scaling factors are not yet properly preserved as a transformation property in the FXG file, so it is best to leave the symbols unscaled in Fireworks and adjust their size after you open the FXG file in Flash Catalyst.

Other transformation properties, such as skew and distort, are not supported in the FXG format, so symbols that are skewed or distorted in Fireworks will import into Flash Catalyst as the default symbol size and shape. If you need the object to appear skewed or distorted, flatten the symbol into a bitmap before exporting it to a FXG file.

Exporting compound shapes

Compound shapes (and composite paths) are converted to paths (nodes, segments, and Bezier curves) when exported. Compound shapes are automatically combined into composite paths, and all composite paths are exported with their supported fill and stroke properties (see the list above to check the supported path properties).

Editing autoshapes

Autoshapes have special editable properties in Fireworks that make it possible to create complex shapes and objects. Autoshapes are converted to paths and exported with the supported fill and stroke properties. The special editable properties of the autoshape are not preserved in Flash Catalyst. Always verify that the autoshape has the shape and properties of the path you want before exporting the design to a FXG file from Fireworks.

Creating masks for use in Flash Catalyst

Flash Catalyst supports the use of alpha and clipping masks, even though the masks cannot be modified from within Flash Catalyst. You can create masks in Fireworks that will export successfully to the FXG file. Supported mask types are rendered correctly in Flash Catalyst.

In Fireworks, you can apply masks to both bitmap and vector objects. To get the best results for masked bitmaps, it is recommended that you flatten the masked bitmap before exporting to the assets to a FXG file. Although Fireworks will export some types of masked bitmaps to the FXG file, the results are not always accurate, especially when there are filters and effects applied to the bitmap. If you export a masked bitmap and notice that the filters and effects are doubled (for example, the drop shadow is twice as dark) or the mask is not rendered correctly (because the opacity is incorrect), return to Fireworks and flatten the masked bitmap then export it to the FXG file again.

When you apply masks to paths in Fireworks, two types of mask are supported for the FXG export:

1. You can mask a path with another path (vector) object. All vector masks are exported with a hard edge and with no fill and stroke shown. If the vector mask is created using the Show fill and stroke or the Grayscale appearance options, then the export will revert to a hard edge without displaying a stroke or fill (see Figure 5).

2. You can mask a path with a bitmap set to alpha channel. The exported FXG file will render with alpha transparency based on the bitmap mask. If the bitmap mask is set to grayscale, then the exported path will be masked by the shape of the bitmap, but it will not include the alpha transparency effects (see Figure 6).

When you open a FXG file with masks in Flash Catalyst, the object with a mask is in a group. You can use the Direct Select tool in Flash Catalyst to select the masked path object and adjust its position relative to the mask—if you need to adjust the portion of the path object that is visible through the mask. And then you can move the entire masked object group with the Select tool.

Understanding how blend modes are supported in Flash Catalyst

The table below summarizes the blend modes in Fireworks and how they map to the blend modes available in Flash Catalyst:

If you apply a blend mode to an object in Fireworks that is not supported by Flash Catalyst, that object is flattened and exported as a bitmap during the process of exporting the FXG file in order to preserve the appearance of the original graphic. Note that the Additive blend mode in Fireworks does not map to the Add blend mode in Flash Catalyst; although the appearances of the two blend modes are very similar, they are not mathematically identical and may produce slightly different results.

Identifying support for filters

The table below summarizes the live filters in Fireworks and how they map to the filters supported by Flash Catalyst:

If you apply a live filter to an object in Fireworks that is not supported by Flash Catalyst, that object is flattened and exported as a bitmap during the export process to the FXG file in order to preserve the appearance of the original graphic. Note that although Fireworks offers Bevel, Glow, and Inner Glow effects, those effects are not yet mapped to and supported by the corresponding filters in Flash Catalyst.

Applying transitions

In Fireworks, you often draw the different states of an interface element as separate objects on different states, layers, or even pages in the Fireworks document. It is easy for us to understand that the object we see in one place is just a different state of an interface element from another place. However, Flash Catalyst does not make a connection between two separate objects, and it treats all objects as separate and independent instances.

For example, if you design a collapsible module that is open on one page, state, or layer in Fireworks and closed on another, Flash Catalyst interprets these two versions as separate objects. If you want to add interactivity in Flash Catalyst to show how that collapsible module would open and close, there is no way to tell Flash Catalyst that the two objects are actually two states of the same object and that the states should transition from one to the other and vice versa.

If you need to create objects that will have transitions applied in Flash Catalyst, you should create the most complex version of that object in Fireworks to ensure that you'll have all of the components of the design when the FXG file is imported. After you open the FXG file in Flash Catalyst, you'll need to modify that object on another page/state before applying transitions in the timeline. You only need to draw one instance in Fireworks of objects that will have transitions in Flash Catalyst, because Flash Catalyst only understands how to apply transitions when it understands that different forms or states of an object on different pages/states belong to the same object.

Creating graphics for custom components

When creating custom component skins in Fireworks, there are a few tips and tricks you can use to make it easier to find the different parts as you are assembling the custom component in Flash Catalyst. First, become familiar with the standard part names of components in Flash Catalyst, and then name the objects and groups in Fireworks with the names that correspond to those parts. This stategy makes it much easier to identify the parts when you are creating components and assigning behaviors and transitions.

Flash Catalyst stores optimized graphics, bitmaps, and components in the Assets panel. Bitmaps and symbols in Fireworks become bitmaps and optimized graphics, respectively, in the FXG file. You can access these objects in the Assets panel in Flash Catalyst. Remember, components are created in Flash Catalyst from graphic assets, so no objects exported from Fireworks will ever appear as a component in the Assets panel. If you want an object or group in the Fireworks document to appear as an optimized graphic in the Assets panel, convert it to a graphic symbol before exporting it to the FXG file.

Exporting layers and states

Use layers (instead of states) for the different states of buttons when you are not using a button symbol in Fireworks. Button symbols are exported to FXG files as optimized vector graphics with all of the states bundled into the optimized group, because the states of a button symbol are embedded into the symbol in Fireworks. However, when states are used outside of a button symbol, each state in Fireworks will be exported as a separate page/state in Flash Catalyst. As a result, you will get extra pages/states that often need to be deleted after the custom button component is created.

Using groups to organize sets of assets

Use groups to help keep track of the different parts of a custom component. Groups in Fireworks will be exported as groups in the FXG file. You can examine the contents of a group in Flash Catalyst by opening it in the Layers panel.

For example, a custom scrollbar component in Flash Catalyst includes a track, thumb, up button, and down button. In Fireworks, each of these parts might be drawn with multiple graphic objects. Select all of the graphics that comprise the thumb, group them, and name the group: thumb. Repeat this grouping process for each part of the custom component. Once all of the parts have their own group, select all of the groups for the scrollbar component and group them, then name this final, top-level group: scrollbar. When you open the exported FXG file in Flash Catalyst, it will be easy to locate and select the scrollbar group, convert it into a custom component, and assign each of the part groups to component parts as you assemble it.

When you export your Fireworks designs to the FXG format, the Export dialog box provides three options. After choosing the option to export as FXG and Images, choose from one of the follow options to export the file (see Figure 7):

• Current page
• All pages
• Selected objects on the current page.

Use the Pages menu to export only the pages or objects you need for a Flash Catalyst project. If you have already exported an entire document from Fireworks and need to modify only one or a few objects, you can export the objects individually from Fireworks and re-import them into Flash Catalyst, rather than re-importing the entire project.

If you choose the export option to only export the selected objects in the current page and then open the FXG file in Flash Catalyst, you'll see a single group named Selection that contains the selected objects from the Fireworks file. You can ungroup this set of objects if you need to manipulate the exported objects independently. You can also choose to retain and rename the group. If you retain the group, use the Direct Selection tool to select individual objects within the group.

Preparing bitmap graphics

If you use many bitmap objects in your design and you know you'll want to be able to export them independently when they are updated (rather than exporting the entire Fireworks file as a FXG file), place copies of the bitmaps on their own page with one bitmap per layer, and then use the Export Layers as Files option and export the objects as bitmap images (such as PNG32.) Copy the exported, optimized bitmaps into the folder containing images for the Flash Catalyst project. Be sure you use the same filenames for the images and overwrite or replace the previous versions of the images. When you open that project in Flash Catalyst, the new bitmaps will be available for use.

If you need to quickly get a bitmap created in Fireworks and use it in Flash Catalyst, you can bypass the Export as FXG process and simply use copy (from Fireworks) and paste (into Flash Catalyst project). Pasting a bitmap into Flash Catalyst also adds a copy of the image in the Asset panel. This ensures that even if you delete the pasted copy from the art board, a version of the bitmap file will still be available as an asset that you can reuse later.

Hopefully this article has demystifyied some of the concepts regarding exporting FXG files from Fireworks and how to share graphic elements between Fireworks and Flash Catalyst. The best way to see how this works is to create some tests and sample projects to see how the graphics you export in Fireworks appear when you open the FXG files in Flash Catalyst.

To research further, visit the following online resources:

• Flash Catalyst Developer Center
• Flash Catalyst Help and Support
• Exporting Pages and Objects as FXG Files
• Fireworks CS5 to Flash Catalyst CS5 Fidelity Checklist
• FXG 2.0 Support in Fireworks - What to Expect
• Introduction to the FXG Graphics Format
• FlashCats: Flash Catalyst Tips n' Tricks
• Fireworks CS5: FXG Files to Catalyst