Tuesday, November 23, 2010

Drawing shapes using AS3: Part 8

Today we will learn about radial gradients and 2 more parameters of the beginGradientFill() method.

The 7th parameter of beginGradientFill is called interpolationMethod. This only has 2 values - InterpolationMethod.RGB and InterpolationMethod.LINEAR_RGB. The difference in the colors can be seen here:



Here is the code I used, as you can see, I just add a new variable and apply it to the function:

var gradRect:Shape = new Shape();
addChild(gradRect);

var type:String = GradientType.LINEAR;
var colors:Array = [0xFF0000,0x0000FF];
var alphas:Array = [1,1];
var ratios:Array = [0,255];
var spreadMethod:String = SpreadMethod.REPEAT;
var interpolationMethod:String = InterpolationMethod.RGB;

var boxWidth:Number = 50;
var boxHeight:Number = 50;
var boxRotation:Number = Math.PI / 2; // 90
var tx:Number = 0;
var ty:Number = 0;

var matrix:Matrix = new Matrix();
matrix.createGradientBox(boxWidth, boxHeight, boxRotation, tx, ty);
gradRect.graphics.beginGradientFill(type, colors, alphas, ratios, matrix, spreadMethod, interpolationMethod);
gradRect.graphics.drawRect(0, 0, 100, 100);

The 8th and the last parameter of beginGradientFill is called focalPointRatio. This is only see in radial gradients, so let's create one. You can just change the type value to GradientType.RADIAL. If you have all the other values set like in the code example above, you'll get this picture:



In the next example I change boxWidth and boxHeight to 100 and my spreadMethod to SpreadMethod.PAD. I also add a new parameter focalPointRatio and set it to 1. I also set the matrix rotation to 0. Here's the code that I have:

var gradRect:Shape = new Shape();
addChild(gradRect);

var type:String = GradientType.RADIAL;
var colors:Array = [0xFF0000,0x0000FF];
var alphas:Array = [1,1];
var ratios:Array = [0,255];
var spreadMethod:String = SpreadMethod.PAD;
var interpolationMethod:String = InterpolationMethod.RGB;
var focalPointRatio:Number = 1;

var boxWidth:Number = 100;
var boxHeight:Number = 100;
var boxRotation:Number = 0;
var tx:Number = 0;
var ty:Number = 0;

var matrix:Matrix = new Matrix();
matrix.createGradientBox(boxWidth, boxHeight, boxRotation, tx, ty);
gradRect.graphics.beginGradientFill(type, colors, alphas, ratios, matrix, spreadMethod, interpolationMethod, focalPointRatio);
gradRect.graphics.drawRect(0, 0, 100, 100);

And the results:



Now, you can see that the gradient now looks kind of like a red spotlight on a blue wall. That's because the focal point is set to 1 - which is the edge of the circle. If you set this parameter to 0, the focal point will be in the center of the gradient. If the value equals -1, the focal point will be at the opposite edge of the circle.



You can get very interesting results after playing around with the settings.

Thanks for reading!

Related:

Drawing shapes using AS3: Part 1
Drawing shapes using AS3: Part 2
Drawing shapes using AS3: Part 3
Drawing shapes using AS3: Part 4
Drawing shapes using AS3: Part 5
Drawing shapes using AS3: Part 6
Drawing shapes using AS3: Part 7

No comments:

Post a Comment