Optimized FXG vs Runtime FXG (aka MXML Graphics)

Flex 4 offers you some new tools to draw graphic primitives like lines, curves, ellipses and rectangles. These new classes are all found in the spark.primitives.* package. They all subclass GraphicElement rather than UIComponent (like all of the other Flex components), therefore, they are more lightweight.

However, there are actually two different ways to include graphics in a Flex 4 application. You can include graphics in your application or skins using “optimized FXG” or MXML Graphics. Optimized FXG refers to the use of .fxg files as mxml components. These .fxg files can be exported from Fireworks, Flash Catalyst (when this product is available to the public), Illustrator and Photoshop. For example, here is a simple png that I created in Fireworks:

If you use are using Fireworks CS4, you can use the menu option Command -> Export to FXG.

This will produce an FXG file like: Star.fxg

Then, in your Flex application, you can simple use this as a custom component.

<s:Application xmlns:fx=”http://ns.adobe.com/mxml/2009&#8243;
xmlns:s=”library://ns.adobe.com/flex/spark” >

<g:Star id=”fxg_star” x=”10″ y=”10″ xmlns:g=”*” />

</s:Application>

There are some limitations to using optimized FXG, however. While, you can scale, resize and move it, you cannot change any attribute of the graphic. For example, if you wanted to change the colors in the LinearGradient of this star, you would not be able to. The base class that wraps .fxg is spark.core.SpriteVisualElement.

If you want to create graphics where you can change attributes at runtime, then, you will want to use MXML Graphics. Here are the mxml tags that you would use to create the same star:

<s:Graphic y=”20″ horizontalCenter=”0″>
<s:Path winding=”evenOdd” data=”M 50 13 L 65 33 L 90 39 L 74 58 L 75 82 L 50 74 L 24 82 L 25 58 L 9 39 L 34 33 L 50 13 Z ” blendMode=”normal” alpha=”1″>
<s:fill>
<s:RadialGradient x = “56” y = “52” scaleX = “81” scaleY = “81” rotation = “0”>
<s:GradientEntry id=”gradientColor1″ color=”#666666″ ratio=”0″ alpha=”1″/>
<s:GradientEntry id=”gradientColor2″ color=”#339999″ ratio=”1″ alpha=”1″/>
</s:RadialGradient>
</s:fill>
<s:stroke>
<s:SolidColorStroke color=”#ffff33″ weight=”2″/>
</s:stroke>
</s:Path>
</s:Graphic>

Now, that this is defined in an application, you can edit any of the colors of the fill or stroke or the data for the Path at runtime.

In this sample, you can change the gradient colors of the star at runtime using the ColorPickers.

Sample Application: MXMLGraphic_Star.swf

Sample Code: MXMLGraphic_Star.mxml