Tuesday, June 24, 2008

AS3 vertical gradient fills

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).

new Matrix(0,-1,1,0,height,0));

(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?)


PistonHonda 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();
matrix.createGradientBox(163, 24, (Math.PI/180)*90, 0, 00);
var colors:Array = [ 0xffffff, 0x000000];
var alphas:Array = [ 1.0, 1.0];
var ratios:Array = [ 0, 255];
shape1.graphics.beginGradientFill(GradientType.LINEAR,colors, alphas, ratios, matrix);
shape1.graphics.drawRect( 0.0, 0.0, 163, 24);

Bruno Amorim said...

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


Anonymous said...

Make sure you set your:


And within your matrix set rotation to:
matrix.createGradientBox( 4000, 200, (Math.PI / 180) * 90 , 0, 0 );