Flex 2 Style Explorer (beta) available

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.

flex2StyleExplorer.gif


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):

aeonLayers.jpg

  • 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.

    Click Here to run the Flex 2 Style Explorer

    [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

14 Responses to Flex 2 Style Explorer (beta) available

  1. phil says:

    Thats awesome. Will the final version have the ability to save and load your changes?

  2. Tony Pujals says:

    Very nice! Will you please make the source code available with the download? Thanks!

  3. Peter Baird says:

    First on saving and loading changes, great idea, but probably out of scope for now.

    As for source code, look for Flex 2 Style Explorer Beta 2 soon, and that will include “view source” integration.

  4. sato-shi says:

    Thats really good! I’m waiting for release Beta2 including view source. Thank you.

  5. Robert Thompson says:

    Can someone tell me if there is a “Work in Progress” on a FLEX 2.0 or Flash Pro 8.x or 9 Rich Text Editor?

    I’m using one now, but they keep changing the licensing and I’m uncomfortable with it for the long term.

    Also, might Adobe/Macromedia consider a way to render both their version of html and normal html that can be used in a regular page (there are just many times this needs to be done).

  6. Peter Baird says:

    Sorry for the confusion, but “Work in Progress” is the blog of Adobe Consulting, and while most of our work is in Flex, we are not directly affiliated with the product team, and would not be in a position to answer future looking product related questions. I can say that there is a RichTextEditor component available with flex 2.0, as shown in the documentation here: http://livedocs.macromedia.com/labs/1/flex/langref/mx/controls/RichTextEditor.html

  7. elvez says:

    Dang, I’m to late or… to early any chance of this coming out for the Beta 2? Or should I download the source and try to fix it? It looks great tho. I’ll check back.
    -p

  8. Peter Baird says:

    Yes indeed it has been updated to Beta 2, please read the more recent post at http://weblogs.macromedia.com/mc/archives/2006/03/flex_2_style_ex_1.cfm#more

  9. danny says:

    is the download link broken? I keep getting a 404 error

  10. Peter Baird says:

    Nope, it should work. I just tried myself and it works for me. However, I should also note that there are a TON of changes between this version of the style explorer, and the code that it produces, from the release version of the Style Explorer, which should be coming over VERY shortly here. It’s really not worth downloading this version. And, don’t worry, when the release version of Flex Builder comes out, the Style Explorer will be very easy to find.

  11. SX says:

    Very nice! Will you please make the source code available with the download? Thanks!

  12. Brian Maurice-Snider says:

    Doesn’t seem to work in Safari / Camino (Firefox) on OS X 10.4.8….

  13. motrin says:

    I got the some problem with download, only 404 error.
    Help plz.

  14. Peter Baird says:

    Again, this post refers to a version of the style explorer that works with Flex Beta 1… we are now at Flex 2.0.1 release, so this post is obsolete. If you’re looking for the latest Flex style explorer, refer to latest post on the style explorer, or go directly to http://examples.adobe.com/flex2/consulting/styleexplorer/Flex2StyleExplorer.html. If you’d like to download, right-click and “view source” to download the Style Explorer and the source along with it.