Creating FXG Dynamically in Actionscript

This demo derived from one of many conversations at 360|Flex.  Suppose an artist provides an FXG file, probably exported from another graphic package, for use in a Flex component or item renderer.  This particular example focuses on the latter scenario.  Suppose the FXG is to be re-used one or more times inside the item renderer, which is itself written completely in Actionscript.  I often get called in to write low-level components/renderers in Flex apps. entirely in AS, so this is a common scenario from my personal experience.

The FXG is in a file, and we want to code something like new ArtistGeneratedGraphicThingy() and add that to the display list in the renderer.  Fortunately, it’s pretty easy as the FXG is wrapped in a SpriteVisualElement.  The contrived example is a list of student names with a score in the 0-100 range.  A number of stars is placed by the student name based on the score (say one star for every 20 points up to 100, so five stars maximum).  The actual score is displayed on hover and rendered in red when selected.

The latter conditions delve into how to implement state changes inside an item renderer entirely in Actionscript (as it’s always useful to know what’s going on under the hood).  A screenshot of the rendered List component is shown below.

The output was created with the MXML,

<s:List id=”sampleList” height=”150″ itemRenderer=”renderers.StarRenderer” dataProvider=”{testData}” />

No styling or skinning is applied to the Spark List, so feel free to modify the demo to suit your visual taste.  The FXG for the star graphic is in the drawings folder, gradientStar.fxg .  To create the graphic dynamically in AS, just

import drawings.gradientStar;

then instantiate via something like

__star1 = new gradientStar() as SpriteVisualElement;

The item renderer (100% AS) is StarRenderer, in the renderers folder.  It keeps things simple by instantiating all five stars and controlling visibility based on actual data.  I like simple 🙂

I hoped to add some dynamic drawing to the item renderer, but time is short so I must pick that up at a later time.  Still have to blog on Tron Clock V2!

View Source is available, so check it out and modify to make it cooler and better.  Hope you get something out of the demo.

View demo.

View source.