Return to Snippet

Revision: 7008
at July 1, 2008 12:17 by chrisaiv

Initial Code
Import Classes
import flash.display.*;
import flash.geom.*;

Define Variables
//Type of Gradient we will be using
var fType:String = GradientType.LINEAR;
//Colors of our gradient in the form of an array
var colors:Array = [ 0xF1F1F1, 0x666666 ];
//Store the Alpha Values in the form of an array
var alphas:Array = [ 1, 1 ];
//Array of color distribution ratios.  
//The value defines percentage of the width where the color is sampled at 100%
var ratios:Array = [ 0, 255 ];
//Create a Matrix instance and assign the Gradient Box
var matr:Matrix = new Matrix();
    matr.createGradientBox( 200, 20, 0, 0, 0 );
//SpreadMethod will define how the gradient is spread. Note!!! Flash uses CONSTANTS to represent String literals
var sprMethod:String = SpreadMethod.PAD;
//Start the Gradietn and pass our variables to it
var sprite:Sprite = new Sprite();
//Save typing + increase performance through local reference to a Graphics object
var g:Graphics =;
    g.beginGradientFill( fType, colors, alphas, ratios, matr, sprMethod );
    g.drawRect( 0, 0, 400, 200 );

addChild( sprite );

Initial URL

Initial Description
So I've always found gradients to be confusing until I found this great tutorial online.

Initial Title
AS3: Creating a Gradient Rectangle

Initial Tags

Initial Language
ActionScript 3