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:

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

fireworks

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

9 responses

  1. Cool! What is the runtime performance trade-off between the two methods?

    Thanks.

    -James

    1. James – Based on some of our performance tests, optimized FXG is about 12 times faster than using MXML Graphics although results sometimes vary. For memory consumption, we’ve seen a savings about about 50%. So, if you are not changing any attributes on your graphic, optimized FXG is the way to go! Thanks for bringing this up.

  2. Oh this is great! I have the program and didn’t even know I could do this! thanks for the information!

  3. Hi !
    We currently are looking for perfomance improvements (mostly during render phase) in our Flex 4 application and we tried to use FXG components (hand written) into our skins instead of MXML graphics (which are Spark primitives).
    But we were not able to see any speed improvement (memory not tested).
    Can you give me a notifiable example to compare our implementation ? Maybe we did it the wrong way…
    Thanks

  4. Another question for you. Can I start with optimized graphics and then move to mxml graphics later?

    Thanks!

  5. Producing code from illustrator CS5 the format is still using the old format xmlns=”http://ns.adobe.com/fxg/2008″ and missing the “s:” tags. Your example is simple in nature, however try to take more complex examples and you’ll see it will add tons of Group object, which will turn your optimized graphic into an MXMLG. Adding the graphic also increased my application’s swf container size, just like embedding an asset. Just posted a solution, you can load the FXG during runtime, see example: http://elromdesign.com/blog/2010/06/17/loading-fxg-graphic-at-runtime/

  6. I get this error message on FB4:
    Open quote is expected for attribute “id” associated with an element type “g:Star”.

  7. I encountered an issue with scaling FXG assets. For example, you have a small FXG asset (ie. rect) with a 1px line width for the outline. When dynamically resized up, that line width is now 20px wide. My workaround for this was to export large FXG assets and have them scale down, which maintained the 1px line width throughout resizing.

    The question now: Do the initial dimensions of an FXG affect performance during resize?

    1. @ash – FXGs also implement scale nine grids to help prevent this issue. The syntax is written the same as when using scale nine in mxml. EG: scaleGridLeft=”5″ There are a few limitation on FXG scale grids, such as the fxg cannot contain groups.

      Further reading: http://www.adobe.com/devnet/flex/articles/mobile-skinning-part1.html

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: