27
Mar
09

Easy tweaking of Flex component skins

We run a dark grey theme for our Print application. This has required quite a lot of tweaking to get it right and despite using the css way of configuring and skinning all components, Adobe did not have dark palettes in mind when they designed the Halo theme.

printuiexample

E.g.: to get the selected and rollover color right for lists, we had to extend and hack the Activator class because default color handling mixes the theme color with white to get the different shades needed. Which look quite odd in a dark theme.

Often there’s moaning about skinning (at least from me) as it requires cumbersome workarounds. But today I had a very pleasant surprise. The close button for TitleWindow needed to be light instead of black to show up. Documentation shows that a new skin is required. D’oh! That’s usually a trip to Illustrator to draw the needed skin from scratch, but the documentation referred to assets.swf:

The close button up skin. The default value is the “CloseButtonUp” symbol in the Assets.swf file.

Maybe a shortcut? Some quick digging later and I found the assets.swf here “C:\[program files folder]\Adobe\Flex Builder 3\sdks\3.2.0\frameworks\projects\haloclassic\assets”.  And not just the swf, but also the full assets.fla. It contains all the assets used for the default Halo theme, beautifully organized in the library. Clear structure, unambiguous names.

assetslibrary

That meant that creating a new closeButton skin was a matter of copying library items from assets.fla into my own fla, tinting a couple of x-es and exporting.

Thanks Adobe!

Advertisements

4 Responses to “Easy tweaking of Flex component skins”


  1. March 27, 2009 at 4:53 pm

    Out of curiosity, have you played with the new skinning model in Flex/Gumbo? It should make your life much, much, easier. But the more people validating that, the better, so we’d love to hear your feedback.

    Ely Greenfield
    Flex SDK.

    • March 27, 2009 at 5:11 pm

      I’d love to play around with Flex 4/Gumbo – from what I’ve read you are giving us exactly what we need. But right now we’re so swamped in project work that exploring is an impossibility. Most of all I’m looking forward to the new text composition components. We have a pretty complexy engine that will benefit enormously from the new level of control and precision

  2. 3 Sebuz
    April 8, 2009 at 12:11 pm

    Just curious, what did you use to list the content of assets.fla (the image above)? I’m just looking for a way to see what icons are available in that file and what they look like.

    Thanks,

    • April 8, 2009 at 1:19 pm

      I opened the asset.fla in Flash CS4 and snapped an image of the library window, nothing fancy. The library is carefully nested by Adobe, so finding the right resource is a breeze


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


%d bloggers like this: