Wednesday, April 20, 2011

Flex 4+ Gradient Backgrounds for CSS and ActionScript 3.0

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