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.
The Algorithmist 
Hello.
I have got a couple of questions to author:
1. I need to find a closest point on the spline – same like AdvancedCubicBezier + BezierUtils.closestPointToBezier does. Is there any spline implamentation for AdvancedCubicBezier and if yes is there any easy way to get it from SVG?
2. Are there any plans to make something like fxgUtil – (geometry, math, splines port from degrafa) for FXG ?
Thx for great spline lib!
Andrew.
Andrew – no spline equivalent for closest point – would have to use some sort of divide-and-conquer algorithm for the segments that comprise the spline. Possible degenerate cases like a spline that approximates a circle and your candidate point is in the center. No plans for an fxgUtil at this time. Interesting idea, though. That whole making a living and paying the bills thing always gets in the way 🙂