## Tuesday, June 24, 2008

The examples for gradient fills are either squares, or rectangles with the gradient going from left to right:

So, how do you make a horizontal rectangle, with a vertical linear gradient? Everything I've tried (i.e. rotating it 90 degrees) gives me a solid colour. Here is one failure example (270 degree rotation, then translated back the height).

`s.graphics.beginGradientFill(GradientType.LINEAR,    [0x666666,0x666666],[0.9,0.1],[0,255],    new Matrix(0,-1,1,0,height,0));s.graphics.drawRect(x,y,width,height);`

(I'm actually giving up and will instead make this 9 pixel high gradient (a fancy drop shadow effect) by drawing 9 lines! But, please, somebody must have some sample code they can share?)

Unknown said...

Hey Darren,
I think I've got a solution for you. All that you were missing is that third property inside of the matrix that specifies rotation by radians. I hope it's not so late that you've created that gradient line by line.

var shape1:Shape = new Shape();
var matrix:Matrix = new Matrix();
var colors:Array = [ 0xffffff, 0x000000];
var alphas:Array = [ 1.0, 1.0];
var ratios:Array = [ 0, 255];
shape1.graphics.lineStyle(2,0xa1b0b6);
shape1.graphics.drawRect( 0.0, 0.0, 163, 24);
shape1.graphics.endFill();

Bruno Amorim said...

Thanks to you, Darren and thanks to Piston Honda too for help me to resolve this problem!

Greetings.

Anonymous said...

Make sure you set your: