What to expect and not to expect from FXG in Fireworks CS5

Fireworks CS5 support of FXG includes the following graphical elements:

Fireworks CS5 to FXG 2.0 Direct Mapping Support:

• Filter Mappings: Blur, Blur More , Inner Shadow and Drop Shadow;
• Blend Mode Mappings: Normal, Layer, Multiply, Screen, Lighten, Darken, Difference, Add, Subtract, Invert, Alpha, Erase, Overlay, Hardlight, Colordodge, Exclusion, Hue, Saturation, Color, Luminosity, Colorburn and Softlight;
• Gradient Mappings: Linear and Radial gradients; Mask Mappings: Alpha and Clipping masks;

(see a Fireworkszone.com article for more details on this)

Some weak points in the developer workflow that a product like FXG/Catalyst could help:

• Image/asset optimization of static design to ensure
  
  • fidelity of vector assets is maintained
  • optimization of bitmap assets is ideal
  • portable and round-trippable file type
  • AND: created objects can be referenced directly in MXML

FXG thus far addresses only the second point to satisfaction.

Regarding point one, vector data is frequently lost. A previous example in this blog is a scenario where textures are employed in a FW png, and the png is exported for external use. The resultant FXG loses the textures entirely when they should be reproduced from pattern data in Fireworks and incorporated into FXG.

Moving to point three, portability and round-tripping are decent. Lacking is a return from Flash back to FW, which has been pledged as an advance for CS6, but for that you have to wait.

Finally, point four addresses the ability to build an FXG and then reference the baked-in assets from Flash Builder, using AS3 and MXML. This in my opinion is the great missed opportunity of FXG. The markup created in FXG gives none of the naming and referencing functionality you would expect.

Put plainly, I can take an entire multi-page FW CS5 file from design, ensure the layers are correctly named and organized, and then export it into a data-rich FXG, a format loaded with individual vector and bitmap data. Disappointingly, once I move that into Flash Builder there is no built-in means to explicitly reference the assets and manipulate them in AS3 or MXML. To do that, you have to open the FXG up and hand-edit it.

Here are some details from Adobe's own Adobe Flex 4 document entitled "Using FXG."

To convert this example to MXML graphics:

• Remove the tag. This example does not contain any elements.

• Remove the block.

• Move the two Illustrator-specific namespaces to the application’s root tag:

  xmlns:ai="http://ns.adobe.com/ai/2008"
  xmlns:d="http://ns.adobe.com/fxg/2008/dt"

• Remove the FXG-specific namespace:

  "http://ns.adobe.com/fxg/2008"

• Add the “s:” prefix to all elements.

• Because the “d” and “ai” namespace definitions are intact, you do not have to remove the attributes specific to these namespaces. The attributes type and userLabel, for example, appear on the tag from the original FXG file. To further simplify this example, though, you could remove them because Flex ignores anything in those namespaces.

  For example, this:

  Becomes this:

A startling omission? Yes, rather. That is a substantial defeciency of this format IMO and one that will hopefully (certainly) be addressed in the future.