Monday, November 22, 2010

Drawing shapes using AS3: Part 7

In today's tutorial we're going to learn about the 6th parameter of beginGradientFill() - Spread Method.

Spread method is only used when the gradient picture is smaller than its visual container, for example, if we have a 100x100 square on stage with a gradient, which has box size 50x50 in its Matrix object. Spread method is basically the way you want the picture to display in this situation.

There are 3 possible string values for this parameter - SpreadMethod.PAD, SpreadMethod.REFLECT and SpreadMethod.REPEAT. Below is an example of using the REPEAT method in your 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 spreadMethod:String = SpreadMethod.REPEAT;

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);
gradRect.graphics.drawRect(0, 0, 100, 100);

Here you can see how do all these method actually work:


As you can see, PAD keeps only one gradient sample visible. REPEAT, obviously, repeats the gradient when needed. REFLECT is the same as REPEAT, with the only exception being the fact, that each second gradient sample is a mirrored version of itself.

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 8

No comments:

Post a Comment