At the moment I am faced with the task of converting a large library of existing Flex 3 skins to Flex 4 skins. As we know, Flex 4 Spark components are very different from their halo ancestors (in a good way). Not surprisingly, the process for creating skins for spark components is also very different.
Back in the day, we could use one of several Adobe products to create the artwork. There were templates available for Illustrator, Fireworks, Photoshop, and Flash. In the world of Flash Builder and Spark components, there is but one game in town, Flash Catalyst. It seems that gone are the days of the Flex Skinning Template workflow (circa CS3).
You can still create your artwork in (some of) your favorite Adobe products and then import them into Catalyst. Currently Illustrator and Photoshop are the only first-class citizens in the Catalyst world, you can import their source files directly. So if you had gone this route and used the Flex Skinning Templates within Illustrator or Photoshop, then lucky you!
As it happens, we weren’t so lucky. We were lured in by the “stateful” graphical skins that Flash’s version of the skinning templates created. As opposed to the named-layer approach of Fireworks, Photoshop, and Illustrator, Flex Skinning Templates in flash consisted of MovieClips that used named-keyframes to distinguish states. The bad news is that Catalyst does not import Flash source files directly. At least not yet, but we can certainly request that feature.
What we can do is export a selection as a .FXG file. (For you Fireworks fans out there, this is your only option as well.) The next issue is the FXG file that Flash creates is more or less stateless. Sure it will create a definition for any symbols or shapes within the selection, but there doesn’t seem to be any way of describing frames in terms of states. Additionally, if you have hundreds or thousands of symbols, like we do, you are surely going to want to automate this process, especially if you have to go state-by-state and export each keyframe on your “states” layer, for each symbol.
Another problem is, if you look at the Extending Flash CS5 (JSFL) documentation, there seems to be something missing! Apparently exportFXG is not an option. Yikes! Does this mean that we have to manually export FXG within the Flash IDE? Well, we had better request that feature, too!
Update: Out of pure wishful thinking I decided I would just see what happened if I pretended ‘exportFXG’ was already a part of JSFL. Based on the signature of ‘exportPNG’, i tried the following lines:
var success = fl.getDocumentDOM().exportFXG("file:///C:/mySymbol.fxg");
fl.trace("success:"+success); // output: success:true
It worked! Fantastic! I’m not sure if exportFXG is considered still in “beta” and therefore intentionally excluded from the docs, or if it was just an oversight. But at least it gives us something to experiment with.
So now I have a complicated but working JSFL script that iterates through a Flash document’s library, looking for any MovieClips with linkage (our criteria). For each of these symbols, it checks for a layer named “states”. If one is found, the script navigates to each keyframe on this layer and performs an export (there is a little more to it but that’s the basic idea). If the symbol does not have a “states” layer, it simply exports frame 1. The script also prompts the user in the beginning to select one of three export types; FXG, PNG, or SWF. It has a few more options but basically the magic ensues.
Then the next step is getting them into Catalyst. Currently it appears that this has to be done manually. As far as I know, there is no scripting/extending solution available for Catalyst. But we can certainly make a request for this feature.
I’m still hoping there might be some way, besides having Catalyst scripting, that will make this next step less painful. Maybe some Illustrator scripting magic might be an option. We’ll just have to wait and see what we can cobble together.
Feel free to promote any of the ideas mentioned here at the Adobe Labs Ideas website:
Import a Flash Professional .fla file format into Flash Catalyst
- Flash Catalyst Forums
- Adobe Labs Ideas
JS for Catalyst (Scripting, Extending, like JSFL)
- Flash Catalyst Forums
- Adobe labs Ideas
Add Export FXG support to JSFL
- Flash Professional Forums
- Adobe Labs Ideas
- ddb
10 Feb 2011
