Updated: Flex Style Explorer (Background Images & Halo Themes)

The Flex Style Explorer has been public now for several weeks, and we’ve already gotten a lot of great feedback. Some of those suggestions have been implemented in this update (with many more to follow).

This release adds support for the backgroundImage property for an application. Both the online and the downloadable versions include a couple of sample background images, and the downloadable version includes support for trying out your own background image. This release also includes the use of the “haloSilver�, “haloOrange�, and “haloBlue� themes for themeColor. Beyond that, some bugs have been fixed.

With the release of the Flex Style Explorer, there were a lot of questions circulating. I’ll try to answer a few of them here, but please post comments and questions and we’ll try and address them (we’ve got the comments working now, along with the move to the new server for the MC Blog).

1. How was the style of the three main panels in the Style Explorer achieved? No, it’s not CSS, and that was intentional for two reasons. First, it looks cooler. Second, as a subtle reminder to designers that, while styling with CSS is pretty powerful, designers do not need to feel limited to just what is available with out-of-the-box CSS. As for how it was done, it’s basically a headerless panel (headerHeight=0) with a 50% backgroundAlpha, and then where the header would be is a container with a custom background image (yup, we just created a swf in Flash Authoring) and the appropriate text in the container. Simple, huh!

2. How are we updating styles on the fly? I’ve seen some pretty interesting code out there speculating on how this was done. But the truth is, it’s much simpler, and yet more tedious. We’re just basically using the setStyle() function. So, something like this (though not exactly)

We know there are many other questions (and recommendations), so please add them to the comments, and we’ll try to address them when we’re not busy saving the world one flex-client at a time.

To run the updated Flex Style Explorer, click here.

To download the updated Flex Style Explorer, click here.