Hi, I have decided to post and create this blog to share knowledge surrounding my discoveries regarding new Flex 4 development.
My colleague and I were struggling with GRADIENT Backgrounds for CSS integration with Flex 4.
I searched countless forums and went throught countless examples of skinning etc, etc.
To create a Gradient function you could use something like this:
public function setGradientFill (p_Color:String):void {
switch(p_Color)
{
case "Pink":
grad1 = new GradientEntry(0xCC6699);
grad2= new GradientEntry(0x666666);
break;
case "Blue":
grad1 = new GradientEntry(0x019fc2);
grad2 = new GradientEntry(0x003366);
break;
case "Green":
grad1 = new GradientEntry(0x00CC00);
grad2 = new GradientEntry(0x666666);
break;
case "Black":
grad1 = new GradientEntry(0x000000);
grad2 = new GradientEntry(0x666666);
break;
}
//
grad1.ratio = 0.15;
grad1.alpha=1;
grad2.ratio = 0.95;
grad2.alpha=0.3;
linearGrad = new LinearGradient();
linearGrad.entries = [grad1, grad2];
linearGrad.rotation = 90;
UI.myBtn.skin as ButtonSkin).buttonContainer.backgroundFill = linearGrad;
}
To set it in the MXML FOR CSS:
Use getStyle with you variable name.
<s:backgroundFill>
<s:LinearGradient rotation="90" id="GradFillGreen">
<s:GradientEntry color="{getStyle('gradColor1')}" ratio="0.15" alpha="1"/>
<s:GradientEntry color="{getStyle('gradColor2')}" ratio="0.95" alpha="0.3"/>
</s:LinearGradient>
</s:backgroundFill>
In CSS:
Use those variable and apply.
._Assets s|BorderContainer
{
color: #FFFFFF;
fontFamily: Tahoma;
fontSize: 12;
fontStyle: normal;
fontWeight: bold;
gradColor1: #019FC2;
gradColor2: #666666;
}
These are only parts of a greater whole but these bits should be enough to explain of how the CSS implementation works.
;)
Cheers,
Ryan
