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.

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

  1. I’ve been watching the Style Exporter and I’m glad people are providing good feedback and enhancements are already out.

    I really, really wonder when I’ll get to do any Flex for my clients. Sigh. 🙂

  2. Ramin Shafai says:

    How do we do tiled backgrounds? (I’ve seen several questions regarding this on Flex forum, but no answers, can you please respond to this question). Thanks

  3. Peter Baird says:

    Currently there is no property to allow for tiling backgrounds on a container. I suppose however you could use a canvas to superimpose two containers, where the bottom one has an image tiled inside, although this requires that the width and height of the container be an exact multiple of the width and height of the image that is being tiled. Remember though that flex is a 1.5 product and some of these features may find there way into future releases (although I have no specific knowledge related to item).

  4. Hello, tiling isn’t really such a problem as you can create a .SWF file with a little ActionScript that takes care of that. However, how do you get FLEX to scale a loaded SWF file in the same way that works in HTML. Meaning scale the “Stage” without scaling the content.
    There gotta be a way. Any clues?

  5. egnar says:

    Very nice release. Fully appreciated.

    One thing is missing though (and for which i’m still looking for answer desperately) and that background images in cell of the Tree and other list objects. How can that be done. a simple graphic when the design demands more than just a solid or gradient color.

    Does any one know how that can be achieved, please share…