FXG paths to Flex components convertor
While working on a project yesterday I needed to convert several vectors (hundreds of them) into reusable Flex 4 visual elements that I could then use in my skins, so lets say if I have vectors of chess pieces that I would like to use in my Skin as follows …
Since I needed these in several skin files I did not want to deal with clunky Path elements which would’ve looked something like this..
So I created a quick AIR application …. that that converts the elements into AS3 classes that extend from spark.primitives.Path and look something like this …
This way all my path data sits in one place I can use this library of visual elements in a reusable way across several applications and changing something would be really easy. Also, unlike the generated code from Flash Catalyst (Thermo) all my components are not inside Groups which are fairly heavy components.
Watch this quick video of a detailed demo of how to use the tool …
If you think this is something useful for you to ….
Download and Install
Since I did this in very little time the code is quick and dirty but it works and is available under the Apache 2.0 License on Google Code so feel free to to modify for your own needs.
View Source at Google Code
An after thought was that this should probably not be called FXG to Component since the generated classes do not inherit from UIComponent but instead from Path which is a GraphicElement. Anyways, who cares as long as it does what its supposed to do.
Please do let me know if you find this useful.
May 8th, 2009
Hi Mrinal, this is an interesting approach but note if your vector never changes at runtime it would be better to take advantage of FXG at compile time in Flex.
In the latest Flex 4 builds, it still sees .fxg files as custom components but it now treats .fxg files as static vector assets and compiles them into SWF graphics primitives instead of ActionScript Byte Code. This results in an enormous reduction in memory and startup time because the player does not need to create all of those object instances in ActionScript to do the drawing.
May 8th, 2009
Hi Pete,
Thanks, I did not realize that you can use a .fxg file (lets say KING.fxg) and then refer to it as a component in mxml ..
That is very cool !
Although, that does not give me what I wanted … since that vector can no longer have parameters .. like fill, stoke etc that I would like to change .. in some cases even control from my controller (component whose skin has this asset)
That said, I think it will be a valuable feature addition to the generator to able to break down a huge FXG with several paths into a .fxg for each path … should be easy to do.
What do you think?
Mrinal
May 8th, 2009
Very cool idea Mrinal! I like it. As Pete said, if you’ve got an FXG file that won’t change it’s probably better to treat it as a static asset. I’m hoping to do some test on that when I get back from vacation.
I’m not sure how breaking down an FXG file into smaller parts would work but it’s an interesting idea. If you do the testing let us know.
=Ryan
ryan@adobe.com
August 7th, 2009
Hey Mrinal,
great idea. But i´ve noticed a little Bug. I have a Path with a huge amount of data und in the generated .as the data string goes over multiple lines. The compiler doesn´t like that. I´ve found a solution for that from Doug McCune: http://dougmccune.com/blog/2007/05/15/multi-line-strings-in-actionscript-3/
Maybe that should be wrapped around the data string. Works in my case.
Greets Jan
August 18th, 2009
Hi Jan,
That seems like a good idea … I will try and change that whenever I have some time. If you wish I would be glad to make you a committer on the google code project and you can make the change your self.
Thanks,
Mrinal
September 2nd, 2009
Hi Mrinal, how are you?
Hope that you are well
Very cool generator, just what I was looking for. Any developments on some of the ideas that have been mentioned above?
Maybe I should first check the google code page to look for any updates so that I don’t look like a dummy, but would be very interesting to see some of the above achieved.
Very nice work though, VERY COOL STUFF!!
Thanks
June 18th, 2010
I noticed that the generator only generates the first path/group of a layer, discarding the other paths/groups on that same layer.
also my paths have an x/y coord, which i need to carefully place/align them (any idea on how to handle that?)
the FXG file (when its done) will contain 500+ groups
the next step (i have no idea how) i need to use the FXG path to overlay a map in google maps..
my flex knowledge is limited, any suggestions are welcome
cheers
arjan