Skinning Flex Apps with Adobe CS3 is very "hacky"

I have been working designing Flex-based applications for the past year or so, and in that time I have come to the conclusion that skinning Flex apps is simply too difficult for all but the most technical of designers.

To change the default appearance of Flex, there are 3 ways:

  1. You can “style” the interface with CSS – with this method you can make superficial color and font changes.
  2. You can “skin” the app using you own graphics; this allows you to make cool and unique
    interface like Slide Rocket
  3. You can “programatically” create a UI (this is incredibly hard, time-consuming and impractical for almost all projects.)

So approach 2, or “skinning”, is the way to go on most real-world Flex projects. One of the major drivers for Flex was that most dev shops stayed away from Flash because of its timeline based UI and its proprietary binary file format (which meant you could not diff 2 files). Why then, is skinning Flex applications still highly dependant upon Flash “Symbols”? You need to create these symbols in Flash or Illustrator, and then map these Flash symbols to your MXML controls via CSS. Got that? What a mess!

Even though Adobe says that CS3 has integrated Flex Builder with Fireworks, Flash and Illustrator, the integration is just laughable. In my experience, trying to use these “features” makes the workflow more difficult and confusing because information is lost between the modules. My favorite integration feature is in Fireworks. You can create a basic Flex layout and choose your colors and fonts, and the new “feature” in CS3 is a link that launches the Flex Style Explorer that has existed for years… and then, get this, you tweak the Style Explorer to try to match the work you did in Fireworks! Lovely!

If you want to see how hard it can be is just to skin one button, check out this tutorial on making a “highly” customized skin.

There is a pretty easy method to making a cool, somewhat customized skin for a Flex app, go get this Illustrator-based skin template , use Illustrator CS3 to modify the colors of the skin, save the new vector artwork as a swf file, and then load the mxml file into Flex builder to see the skin in action. For more information about this technique, you can read the tutorial at Adobe. In my experience this is the easiest way to make a custom flex skin.

Luckily Adobe realizes skinning Flex apps is too hard for most designers and is working on Thermo, their next generation IDE for RIA interface building, but its very annoying when they market all of this as an integrated solution.