« Nice Product Configurator - Design Your Own Chuck Taylors |
Main
| Converse Shoe Configurator - Studio Found »
May 17, 2005
Announcing Flex Style Explorer
Macromedia Consulting is happy to share our initial version of the Flex Style Explorer.
This application grew out of our experience working with other visual designers and user-experience professionals who were tasked with creating visual designs for Flex applications, and were often asking for some tool to help them in that pursuit.
Our purpose in creating the Flex Style Explorer was the following:
- Create a catalog of the available style controls for flex components
- Allow for easy real-time manipulation of the component’s style in order to see the effect of the various controls.
- Provide the CSS associated with each style control.
Some Caveats
Use this at your own risk. This is by no means an official Macromedia product and is not supported. You know, the whole "the views expressed here do not represent the views of the parent company". Same goes here. We haven’t had the opportunity to do much testing so you’re bound to find bugs.
While we've tried to catalog every possible style, there are some we've knowingly left out. For example, there's the ability to specify the size, weight, underline, font-family where text appears in components. Rather than include that for every component, we've included a view for Text Formatting, and noted that any component that has text can be formatted.
We welcome any comments, ideas, or complaints on the Flex Style Explorer. If you feel that there are any components that are missing, please let us know. Keep in mind that it's a style App, therefore it focuses on visible components, so don't go telling me that Tile, Grid, and Canvas are missing.
Also, we would be very interested in ideas for future enhancements. Some of the ideas that we’re hoping to include in future versions are...
- A selection of predefined themes or examples from which to compare CSS and the ability to bring these into edit mode
- The ability to have a global custom color palette for the user to select from across components.
To launch the Flex Style Explorer, click here.
You can download the Flex Style Explorer here
Posted by Peter Baird at May 17, 2005 9:10 PM
Wowsers, that's great! Does anyone know of an equivalent for Flash MX V2 components?
Posted by: Tony at June 21, 2005 1:42 AM
This is pretty freaking cool. Makes me wish that I had time to learn Flex! Nice job, guys.
Posted by: Steve Ray at June 28, 2005 1:35 PM
Guys,
Are you providing source-code of this application?
If yes, then please add "View Source" in context menu of this application....
-abdul
Posted by: Abdul Qabiz at July 1, 2005 2:50 PM
This helps so much... I also agree with Abdul, having the source would be oh so very helpful.
Posted by: Mark at July 18, 2005 11:59 AM
A couple of people have asked for the source code for the Style Explorer, and I'm reluctant to do so for one simple reasons (although there are others): the *source code* for the Style Explorer isn't really an example of best practices. It works, sure, but I don't claim to be an expert developer (I'm on the UX team), but as a representative of Macromedia Consulting, I'm reluctant to put anything out there that isn't an example of best practices. But, feel free to ask any question in particular on how something was done, and we'll be sure to share. Basically, the entire app comes down to the setStyle() function, over and over again.
Posted by: Peter Baird at July 29, 2005 8:27 AM
Hi how did you made the black Panels have that glosy look? I am talking about the main panels the gray ones of the application.
Omar
Posted by: Omar at August 8, 2005 7:36 AM
This is great, but it has one big problem. The color pallet is really limited for designers. Is there a possibility of using a more advanced color picker such as
http://store.jumpeye.com/cpicker/...
This is really the only thing stopping our design team from using this great resource. Also, it seems that you cannot manually enter a color, via hex code, or the object simply turns black.
Thanks,
Mike
Posted by: Mike L at September 14, 2005 10:45 AM
Regarding Mike L's comments, our design team is having the same problem with the manual hex codes entered turning black.
Does this carry over when the mxml app is run, or will the colors actually appear according to hex codes entered?
Thanks,
Kris
Posted by: Kris H at September 19, 2005 2:23 PM
Yes, the non-websafe hex values turning black in gradients is a known bug (note, this only happens in gradients, such as fillColors, and headerColors). And, no, that won't carry through on the mxml files. You can use whatever hex value you want. So, when time affords we're working on fixing that bug.
Posted by: Peter Baird at September 19, 2005 4:14 PM
Thanks for the info about the bug.
Our team is moving forward with specs for our engineers. I will let you know how well the info from the Style Explorer works.
Thanks,
Kris
Posted by: Kris H at September 22, 2005 9:33 AM
thanks for the info about the bug
Posted by: melk moon at November 22, 2005 2:40 PM
Thank you for your sample
Posted by: serrato 1 at December 2, 2005 10:34 AM
That's very handy, thanks!
One thing though, the style of the three main Panels of the
application are different than anything you can create with the
current styles... Are we getting a glimpse of the future here? ;-)
Posted by: melk moon at December 4, 2005 10:50 AM
This is great, but it has one big problem. The color pallet is really limited for designers. Is there a possibility of using a more advanced color picker such as
http://store.jumpeye.com/cpicker/...
This is really the only thing stopping our design team from using this great resource. Also, it seems that you cannot manually enter a color, via hex code, or the object simply turns black.
Posted by: Kate at January 19, 2006 11:46 PM
Going back to Peter's post, the glossy look on the panels is really neat and is exactly what I am looking forward. Would you be able to post how that is done? I played with the alpha attributes to no success.
Thanks.
Posted by: Kevin at January 23, 2006 6:38 AM
"Yes, the non-websafe hex values turning black in gradients is a known bug"
This is killing me! Please tell me there is a fix?
Posted by: todd at February 3, 2006 12:43 PM
(A month later) ... sorry for the delay in response. As to the question about the fix non-websafe colors ... this bug has been fixed in Flex 2.0, so a theoritcal Flex 2.0 Style Explorer would have such an item fixed ... keeps your eyes posted to this blog. I will say no more.
Posted by: Peter Baird at March 6, 2006 12:59 PM
I know it is a very simple component but did you forget the label component? I notice the text does not update on the left side of the interface.
Posted by: Rich at March 20, 2006 5:23 PM
No, I didn't forget the Label component, I just figured all the styles that you could assign to a label component were covered in "Text Formatting" (although not everything in text formatting applies). Was there's something in particular you were looking for? I'm not so I understand what you're referring to in your last sentence.
Posted by: Peter Baird at March 20, 2006 5:45 PM
hi, the sample application is really gooood. Can i have source code of this. I had started learning Flex 1 week back . So looking on things on forum and stuff.I came across this . It rally struck my eye . Can you mail me the source code of this application. Thank you
Posted by: Rajesh at May 12, 2006 7:58 AM
That's very handy, thanks!
Posted by: SX at July 17, 2006 12:11 AM
Enjoyed browsing through the site
Posted by: katalog at September 28, 2006 5:04 AM
Hello!
Just a great package guys! I wanted to let you know I came across a minor issue where if you choose a theme color in the button bar section of the buttons panel, it generates CSS that will flag an error in FlexBuilder 2 at compile time.
Ex:
ButtonBar {
themeColor: #00ccff;
buttonStyleName="myButtonBar";
}
Instead of:
ButtonBar {
themeColor: #00ccff;
buttonStyleName: "myButtonBar";
}
Nothing major but new users may get confused by the recommendations FB2 gives (mouseover fix suggestions doesn't specify it's the equal sign but instead recommends a left parenthesis)if they didn't know the difference. Keep on with the great work!
Chris
Posted by: Chris Seahorn at December 15, 2006 10:54 AM
This is an old post I know - but can anyone tell me where the page has been moved to, for the Flex Style Explorer?
Posted by: Aarkid 3D at January 29, 2007 4:14 PM
This is great!!, while recently I am learning about CSS (...I know!, ...I know! I am late behind...! ;)). You guys provide me with this ease....!!
anyone from located in Indonesia..?!!
Posted by: andregiant at April 19, 2007 6:38 PM
How can i run this example? I downloaded the Flex2StyleExplorer.zip but i dont`t know step by step how can i do this. =( Please talk can i do in IDE FlexBuilder.
Posted by: Romulo at July 25, 2008 12:42 PM
Posted by: Peter Baird at July 25, 2008 12:51 PM
Hi Peter.
I wrote about an alternative implementation to the Flex3StyleExplorer that is based on best practices. You might want to take a look here:
http://www.awholenewweb.com/?p=51
There is a small sample with viewSource enabled as well.
Posted by: Amichai Lesser at April 26, 2009 3:57 PM
Post a comment