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 =
--&gt; 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

5 Responses to Easy Full-Screen Gradients in Flash – AS3

SIDEDOOR

April 11, 2009 at 10:41 pm

Hey bro,

Great class, extremely handy…once again helping me greatly!

I added the ability to set the gradient-colors’ alpha-values while instantiating the object, ie:

…other code…
// create array of alphas //
var alphas:Array = [.2, .3, .4, 1];
// instantiate object, including the alphas array //
var grad:FullScreenGradient = new FullScreenGradient(colors, type, constrain, alphas);

and within your FullScreenGradient class, removed the current method of setting the gradient alphas on line 96 and changed your constructor to this:

public function FullScreenGradient($colors:Array, $type:String = RADIAL, $constrain:Boolean = true, $alphas:Array = null){
this.colors = $colors;
this.type = $type;
if ($alphas){
this.alphas = $alphas;
}
else
{
for (var i:int = 0; i < _colors.length; i++)
{
_alphas.push(1);
}
}
_constrain = $constrain;
if (_type) listenForStageAvailability();
}

…not sure if that would be of help to anyone else but me though, lol

Thanks so much man!
jf
SIDEDOOR

April 11, 2009 at 10:43 pm

Oh, yeah, forgot to mention: also added to the FullScreenGradient class, the setter function:

public function set alphas($alphas:Array):void {
_alphas = $alphas;
}
DANIEL

November 16, 2009 at 7:24 pm

Hi,
thx vm for the code,
what is “–&gt”? (i get error “expecting identifier before bitwiseand”)

thx
DANIEL

November 16, 2009 at 8:48 pm

got it….
“–&g;” should be replaced with “:”

I need some sleep
JEETENDRA

January 19, 2010 at 8:07 am

Hi DANIEL,
it will be
var grad:FullScreenGradient = new FullScreenGradient(colors, type, constrain);
please check

jeetendra