Several people have asked how the glossy panels on the Flex Style Explorer were done, and while I’ve attempted to explain it in the comments, I thought I’d go a step further and include source code for such a design, rather than attempting to explain it again in words.
So, included is an mxml file showing a styled panel with the appropriate asset for the reflection.
Click here to download the mxml and asset
This issue has come up with a few clients, which is, how do you round the corners on a container. Of course, by default, the container itself is invisible, but in these instances the client has given a box, an hbox, or a vbox a different background color in order to use it as a graphical element, as in the example below. Many have found, with some frustration, that if you simply set cornerRadius to a value other than 0, the corners are still squared off.
The reason this is happening is that cornerRadius is actually a property of the container border, and by default containers have no border. In order to use the cornerRadius property on a container, you need to set the borderStyle to solid. Note in the example below how changing the borderStyle automatically reflects the cornerRadius property on the container. Want the cornerRadius, but you don’t want a border? simply set the borderThickness to zero, and as long as the borderStyle is set to solid, the corners will still be rounded. Similarly, applying a drop shadow to the container also requires the borderStyle be set to “solid”. Hope that helps.
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.