Re: [flexcoders] Flex Style Explorer

Tue, 31 May 2005 12:54:56 -0700

Hi Peter,

Do you know the application color of the Flex Style Explorer?

Dave

On 5/31/05, Peter Baird <[EMAIL PROTECTED]> wrote:
I'm in the process of doing a write up on the MC Blog with an updated version of the Flex Style Explorer, and was planning on answering some of these questions. (We're working on getting the comments working too)

I'll answer this one here.  Dave is pretty much right on.  Basically here's how those panels were created:

  • Headerless Panel (headerHeight="0")
  • backgroundColor = #FFFFFF;  (yup, it's white, but...)
  • backgroundAlpha = 20; (this lets the nice backgroundGradient show through)
  • panelBorderStyle = roundCorners;
  • Setting all margins to zero allows me to place an image in the top and make it look like a header
  • I first place a container with a backgroundImage with my custom image (a swf created in Flash Authoring which also has some transparency to it)...
  • ...then insert a Label tag with my header title.

Simple as that.  The reason we did that was for two reasons:

  1. It looks cooler
  2. As a subtle reminder to flex designers that, while CSS for style is powerful, designs don't have to be limited to it, and can use some imagery.


Okay, so for the actual MXML, here it is:

<mx:Panel height="100%"        panelBorderStyle="roundCorners"        headerHeight="0"        backgroundColor="#FFFFFF"
        backgroundAlpha="20"        marginRight="0"
        marginLeft="0"
        marginTop="0"
        marginBottom="0">            <mx:Box width="100%"
                    backgroundImage="@Embed('assets/myHeader.swf')"
                    backgroundSize="100%"
                    marginTop="7"      
                    marginLeft="10">                       <mx:Label
                            text="Style Controls"
                            color="#FFFFFF"
                            fontSize="10"
                            fontWeight="bold"
                            marginLeft="5" />              </mx:Box>              <mx:Box width="100%"
                        marginLeft="10"
                        marginRight="10"
                        marginBottom="10"
                        height="100%">
                </mx:Box>
</mx:Panel>



On 5/31/05 2:48 PM, "dave buhler" <[EMAIL PROTECTED]> wrote:

Stace,

I think the panels in the flex style explorer use an image for the header. I could be wrong, but the reflection seems to swoop which you can't do within the Flex styles.

And I think the color is #777777.

Dave

On 5/31/05, Stacy Young <[EMAIL PROTECTED]> wrote:
Hi All,

Curious to know if anyone knows the customizations used for the parent panels in the Flex Style Explorer? (the outer, dark panels)

Thx!

Stace

Yahoo! Groups Links


Yahoo! Groups Links
Yahoo! Groups Links


Yahoo! Groups Links

Reply via email to