flex panel header glassy

if you look at:
http://examples.adobe.com/flex2/consulting/styleexplorer/Flex2StyleExplorer.html

The panels have some nice "GLASSY" effects on the top !
How can I reach this effect ?
I downloaded the source code but cannot extract the right snippet to get this effect on my panel !
yarekAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Siva Prasanna KumarPrincipal Solutions ArchitectCommented:
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 :)


0
yarekAuthor Commented:
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>

Open in new window

0
julianopolitoCommented:
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>

0
INTRODUCING: WatchGuard's New MFA Solution

WatchGuard is proud to announce the launch of AuthPoint, a powerful, yet simple, Cloud-based MFA service designed to eliminate the vulnerabilities that put your data, systems, and users at risk.

julianopolitoCommented:
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
0
yarekAuthor Commented:
Great.. witing for final solution...
0
julianopolitoCommented:
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>

Open in new window

0
julianopolitoCommented:
So look above and you will see: VBox is the "Panel". The header portion of this custom panel is actually the Box that uses the "glassPanel" style (the one containing the header swf) and the label.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Apache Flex

From novice to tech pro — start learning today.