flex panel header glassy

Right Click on the file explorer and click view source.

or directly go to this link

http://examples.adobe.com/flex2/consulting/styleexplorer/srcview/index.html

Download the source code and click the css folder in it.

it has a glassPanel style which use a SWF to render that style.

.glassPanel {
    backgroundSize: "100%";
    backgroundImage: Embed(source="/assets/header.swf#glassHeader");
    paddingTop: 7;
    paddingLeft: 10;
}

use the same where ever you want to apply :)

Not good, sorry...I have already done this with no success !
I have applied this style to the panel but it does not change anything
If I do apply this style to the borderstyle, then the panel changes and display the glassy effect on WHOLE panel instead of the header.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Style source="styles.css">
</mx:Style>
	<mx:Panel x="135" y="198" width="250" height="200" layout="absolute" styleName="glassPanel">
	</mx:Panel>
 
</mx:Application>

Select allOpen in new window

look at panelView.mxml you will see this:

<mx:VBox height="100%" width="405" styleName="glassPods" paddingLeft="10" paddingRight="10"  >
       
        <head:GlassHeaders headerTitle="STYLE CONTROLS"/>

Then open the GlassHeaders.mxml

you will see:

<?xml version="1.0" encoding="utf-8"?>
<mx:Box xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="*"
        styleName="glassPanel" width="100%" >
<mx:Script>
    <![CDATA[
        [Bindable]
        public var headerTitle:String;
    ]]>
</mx:Script>
    <mx:Label text="{headerTitle}" styleName="glassLabels" />
</mx:Box>

continung (I pressed submit too fast......): it is not a panel actually, but a mix of vbox+ custom hbox+image(swf). I'll simplify and send you the example code

Great.. witing for final solution...

Here it goes. You need to downlod the source from the flex explorer and use the assets folder for this example to work. The glassy header effect is actually a movieclip inside header.swf.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
	<mx:Style>
		.glassPods {
		    borderStyle: applicationControlBar;
		    fillColors: #FFFFFF, #FFFFFF;
		    fillAlphas: 0, 0.25;
		    highlightAlphas: 0, 0;
		    backgroundColor: #ffffff;
		    backgroundAlpha: .2;
		    borderThickness: 0;
		    dropShadowEnabled: true;
		    cornerRadius: 8;
		    paddingRight: 0;
		    paddingLeft: 0;
		    paddingTop: 0;
		    paddingBottom: 0;
		    horizontalScrollBarStyleName: fseVerticalScrollBar;
		    verticalScrollBarStyleName: fseVerticalScrollBar;
		}
		.glassPanel {
		    backgroundSize: "100%";
		    backgroundImage: Embed(source="/assets/header.swf#glassHeader");
		    paddingTop: 7;
		    paddingLeft: 10;
		}
		.glassLabels {
		    color: #FFFFFF;
		    fontSize: 12;
		    fontWeight: bold;
		    paddingLeft: 0;
		    paddingTop: 0;
		    fontFamily: Myriad;
		}
 
 
	</mx:Style>
	 <mx:VBox height="100%" width="405" styleName="glassPods" paddingLeft="10" paddingRight="10"  >
        
        <mx:Box xmlns:mx="http://www.adobe.com/2006/mxml" 
        	styleName="glassPanel" width="100%" >
 
    		<mx:Label text="My Title" styleName="glassLabels" />
		</mx:Box>
	 </mx:VBox>
	
	
</mx:Application>

Select allOpen in new window