Monday, November 05, 2007

Using Illustrator Symbols in Flex

The most useful thing I took away from Adobe Refresh last week wasn't something new. In fact it's been there for months and I hadn't discovered it. In a nutshell; Illustrator objects (or groups of objects) can be turned into symbols. Exporting your Illustrator file to an .swf format makes those symbols available within your Flex application. For example, if we create an up state for a play button, create a symbol called play_btn_up and export our Illustrator file as assets.swf. Then we can style our play button using css :

.playBtn{
upSkin:Embed("assets.swf#play_btn_up");
overSkin:Embed("assets.swf#play_btn_over");
downSkin:Embed("assets.swf#play_btn_down");
}

Creating the Symbols within Illustrator is as simple as opening the Symbols panel and dragging our object onto the panel. You'll probably want to rename the symbol to something simple. But otherwise the job is done. This is ideal for us as our designers have been developing all our Flex comps in Illustrator. Until seeing this we'd been importing the relevant objects into Flash and exporting from there. Oddly enough publishing from Flash is much more work than exporting from Illustrator (because you need to setup your Library items if you want to use them as Symbols).

2 comments:

Matt said...

Great and interesting post! When you say "create a symbol" do you mean in Illustrator or Flex. I am trying to build an admin tool in Flex that will allow a user to upload an AI file and then allow them to select symbols to be treated dynamically by end users.

My plan was as follows:

* Admin user uploads AI

* This AI is converted to SWF, either by using Illustrator scripting through an instance of Illustrator on the server, or from Flex natively. (Not sure about this part)

* Flex loads the new "assets.swf" and reads all the assets, allowing a user to select particular symbols for dynamic treatment

Does this seem possible using your methodology?

Thanks!

Best,
Matt Walsh

geekglue said...

Thanks for the comment Matt. I was talking about creating the symbol in Illustrator. Interesting idea. Really couldn't comment on how feasible it is. I can't say I've see anything similar but in theory it should be possible.