The Flex 2 Style Explorer (beta) is now available for use. It being a beta, built with a beta product, there are the usual caveats. Being Flex 2, of course, to use this you’ll need the Flash Player 8.5 to run it. Also, as Flex 2 is beta, there are some interesting behaviors you’ll notice in terms of the way some things might look. And finally, as this is built on Beta 1 of Flex 2.0 some things may, and most likely WILL change in later versions. Once the next Beta comes out, I’ll update it to beta 2, and re-submit.
Working through CSS in Flex 2, You’ll notice some new and interesting things that are important for all designers and developers to understand. The most important thing is that the new Aeon components are built by layering transparent pieces. So, for example each buttons is made up of three peices, as shown in the image below):
- Border: this is the same as before
- FillColors: These fill colors also now have fill alphas, so by default the buttons is partially transparent with the colors beneath it showing through.
- HilightAlphas: There’s a highlight on the top half of each button, which is basically a white fill with customizable levels of transparency.
This allows for some very interesting effects, and a lot more customization with just a little code.
BUT, it does also mean that designers of Flex 2.0 apps can no longer simply hand an image to a developer and expect them to be able to recreate it, since the colors that appear on the screen cannot be expressed and interpreted strictly by their color, but must include alpha values for two layers.
That means designers will have to either hand off the CSS for a chosen component as “the spec” for that component, or will have to at the very least have an understanding of how that component is created and hand off specs that include fill-colors, fill-alphas, and highlight-alphas.
Please let us know if you find anything buggy, or “not quite right”. Enjoy.
[UPDATE] For those that haven’t seen it, as Flex 2.0 is now released, a release version is now available, and can be loaded from the follow up post at http://examples.adobe.com/flex2/consulting/styleexplorer/Flex2StyleExplorer.html