Easy Full-Screen Gradients in Flash – AS3
February 13, 2009 • Actionscript / Flash • 5 Comments

Here’s a handy class that takes an array of hex values and creates a full screen radial or linear gradient that automatically scales to the width and height of the screen.

Implementation is simple.

// create an array of string hex values
var colors:Array = ['0xFFFFFF', '0xF57E04', '0xC64D18', '0xA95354'];
 
// constrains width to height, convenient for radial gradients
// to keep them circular, default is true
var constrain:Boolean = true;
 
// valid types are FullScreenGradient.RADIAL
// or FullScreenGradient.LINEAR, default is RADIAL
var type:String = FullScreenGradient.RADIAL;
 
var grad:FullScreenGradient =
--> new FullScreenGradient(colors, type, constrain);
addChild(grad);

You can use the tool below to drop in color values using the pickers to preview your gradient and check for ‘banding’ which seems to be a weird phenomenon that occurs on linear gradients when Flash attempts to interpolate between color values that are too far apart.

Enjoy.

Download the Class File