Tools and process for designing a Spark skin

Question

I come from the web development background where the process of skinning a website normally looks like this:

1. Designer creates a design in Photoshop
2. The design is transferred into HTML + CSS using the following heuristics:
   • Where possible, use the CSS toolbox to create borders, background colors and the like
   • In case of more complicated shapes (e.g. gradients, rounded corners etc.), use raster sprites

Now, I'm working on skinning an app done in Adobe Flex and I'm wondering what the best approach should be. ActionScript's vector graphics capabilities are a lot more extensive than "vector graphics" (borders, background colors) done in CSS, so perhaps creating a design in Photoshop isn't the best idea.

Should I ask my designer to create the design in Illustrator instead, hoping that it will be possible to transfer most of the advanced shapes (like button gradients, rounded corners etc.) into a Spark skin "natively" as vector graphics as opposed to embedding those as bitmaps?

Answer 1

If you call button gradients, rounded corners, etc. advanced shapes then indeed I would go for the Illustrator approach. These are all shapes that translate easily and cheaply into vector graphics/code. For this kind of graphics, vectors are usually much better for memory and performance.
Illustrator can export directly to FXG. Just make sure to tell your designer to anchor his drawings in the top left corner when he does the export so you don't have to deal with offsets.

If however your graphics become more complex (a drawing, or maybe some complex symbol) you're better of embedding it as a bimap graphic.

As a last note: Adobe previously had a product called Catalyst that was supposed to address the designer/developer workflow for Flex apps, but they discontinued it.