How to create a vertical gradient in flex

Question

How to create vertical gradient in flex.

What i currently have is a horizontal color gradient. And its working fine. But I am unable to figure out how should I make it vertical (which ofcourse is the requirement)

I use styleName = "chatWindowLeftGradient"

<mx:VBox id="chatTabBarVBox" height="100%" styleName="chatWindowLeftGradient">

</mx:VBox> 

And the style sheet looks like this:

<mx:Style>
        .chatWindowLeftGradient{                        
            backgroundImage: ClassReference("custom.GradientBackground");
            backgroundSize: "100%";
            fillColors: #6db263, #a4d9a1;
            fillAlphas: 1, 1;                           
        }

    </mx:Style>

This give a gradient from top to bottom. How i can make from left to right??

Regards Zeeshan

Answer 1

You can do it with a programmatic skin.

1. Create a new class that inherits from Border.

2. Override updateDisplayList with something like this:

   super.updateDisplayList(w,h);
   var g:Graphics = this.graphics;

   g.clear();

   var m:Matrix = new Matrix(); m.createGradientBox(w,h); g.lineStyle(0,0,0); g.beginGradientFill(GradientType.LINEAR,[color1,color2], [alpha1,alpha2], [0,0xFF],m); g.drawRect(0,0,w,h); g.endFill();

3. Reference this class as your skin using the ClassReference in the style section.

Answer 2

This won't just plug into your css, but a vertical gradient in Flex 4 mxml looks like this:

<s:Rect right="0" top="0" width="170" bottom="0">
    <s:fill>
        <mx:LinearGradient rotation="90">
            <mx:entries>
                <mx:GradientEntry color="#64574A"/>
                <mx:GradientEntry color="#FFFFCC"/>
            </mx:entries>
        </mx:LinearGradient>
    </s:fill>
</s:Rect>

Have you tried adding a rotation="90" to your style?