Auto-generate Flex CSS embed code in Flash

When doing UI Development in Flex using Flash 8 image assets, I found myself doing a lot more typing, copy/pasting, and flipping back and forth between Flash and the Flex IDE to generate the CSS code for customized component skins than I care to.

I decided to write a few quick and dirty JSFL files to speed up the process, and here is what I have so far: (download sample files)

NOTE: this is a work in progress, the files have not been tested anywhere but my MacBookPro, and I make no claims that these files will even work for you. (Caveat emptor)

• 1. Place the (3) .jsfl files into your Flash Commands folder (mine was at: "/Users/bwills/Library/Application Support/Macromedia/Flash 8/en/Configuration/Commands"). Placing the files there will have them show up in your Flash Commands menu. If you prefer, you can place them wherever you want and then call them using the "Commands > Run Command..." menu option instead.
  


• 2. Open the Example.fla file, and pull up the Library (command-L)
  


• 3. Select (command-click) the 4 button states defined by the movieclips in the library. NOTE: when creating your own elements, the JSFL script keys off of the text following the last underscore ("_") to determine the embed type so name your symbols accordingly.
  
  
  


• 
  4. From the Command menu select "Set Linkage and Generate Flex CSS": (the other 2 menu items will do one or the other if that is all you need)
  


• 
  
  


• 5. You will be prompted to enter the Flex "styleName" you want the items to be associated with:
  


• 
  


• 6. Click "OK". Flash will loop thru the selected menu items, turn on the "Export for Actionscript" option, generate the linkage identifier based on the item name...
  


• 
  


• ...and then output the proper embed CSS to use in Flex to the trace window.
  


• 
  


• 7. Simply copy/paste into your Flex CSS file and you should be good to go.
  

As I said above, this is a very early "work in progress". I welcome any comments or suggestions on how to improve it. I am thinking about creating library folders for each styleName, so it would be possible to select the entire library and have it output the complete CSS code all at once.

Hopefully when Flash CS3 and perhaps Flex 3 are released, the designer to developer workflow will be refined and this code will be irrelevant, but until then I hope it helps. -b