Sunday, November 21, 2010

Drawing shapes using AS3: Part 6

Today, we will learn how to create a rectangle with gradient fill.

Making gradients is pretty complex, but not deadly. First of all, we create a shape object.

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

We will need to use a matrix object to manipulate gradients. Basically, it's the transformation of our gradient box. A gradient box is an invisible rectangle that determines where and how the gradient is displayed. The Matrix object has a built in method called createGradientBox which creates this box. This makes it pretty straight-forward. We'll need to specify 5 things when using that method - box width and height, rotation and the offset coordinate values.

createGradientBox(boxWidth, boxHeight, boxRotation, tx, ty);

Later, we will use the flash drawing API method called beginGradientFill(); which has 8 parameters. In this tutorial, we will only discuss the first five. Here they are:

beginGradientFill(type, colors, alphas, ratios, matrix);

The type parameter is a string value which defines the type of our gradient. It can be linear or radial. In this tutorial we will be discussing linear fill type.

Colors, alphas and ratios are arrays. Their length must be the same, because they all describe the colors used in the gradient.

Matrix is a reference to our matrix object.

Now, we know the basics but we haven't written much code yet. We have created our Shape, but now we need to do the 2 things stated above - create a matrix object and use the beginGradientFill method. To do that, we need to define parameters. Now our job is to first create those parameters and then apply them. So, let's start:

var type:String = GradientType.LINEAR;
var colors:Array = [0xFF0000,0x0000FF];
var alphas:Array = [1,1];
var ratios:Array = [0,255];

As you can see, I've set a linear fill type for my gradient box. It has 2 colors - red and blue, both are fully visible. Now, you might be wondering, what are the ratios? The ratios are the position of the purest sample of the color (perhaps I can say, the epicenter of the color), 255 being 100% (right), 0 - 0% (left), 128 - approximately 50% (center) and so on. In our example, both epicenters are located on the far left and the far right.

Now, those are the necessary parameters for beginGradientFill. Now we need to do the same thing for our Matrix object.

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

As I said before, the box we're talking about is an imaginary rectangle that tells the gradient how to display. So basically, if we want to transform our gradient (turn, narrow, set an offset, etc) - we do it to this box.

Now that we have the parameters ready - it's time to create a Matrix object.

var matrix:Matrix = new Matrix();
matrix.createGradientBox(boxWidth, boxHeight, boxRotation, tx, ty);

As you can see, we just apply the already existing parameters to this object.

gradRect.graphics.beginGradientFill(type, colors, alphas, ratios, matrix);
gradRect.graphics.drawRect(0, 0, 100, 100);

And we're done. The full code:

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 boxWidth:Number = 100;
var boxHeight:Number = 100;
var boxRotation:Number = Math.PI / 2; // 90
var tx:Number = 0;
var ty:Number = 20;

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



It should be noted that the maximum number of total colors allowed in a single gradient fill is 15.

In the next tutorials, we will learn about such things like radial gradient fills and the rest parameters of beginGradientFill(); method.

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 7
Drawing shapes using AS3: Part 8

No comments:

Post a Comment