Easy Full-Screen Gradients in Flash – AS3
February 13, 2009 • Actionscript / Flash • 9 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

9 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

  • COLIN JACKSON
    March 24, 2010 at 4:59 am

    have tried to implement your class. However, I get this error:

    5001: The name of package ‘com.quietless.display.drawing’ does not reflect the location of this file. Please change the package definition’s name inside this file, or move the file. /Applications/ColdFusion9/wwwroot/colin/FullScreenGradient.as

  • COLIN JACKSON
    March 24, 2010 at 6:01 am

    Got it to a point, now I’m getting this:

    1084: Syntax error: expecting identifier before bitwiseand.

  • STEPHEN BRAITSCH
    March 24, 2010 at 10:11 am

    Sounds like a few of you guys are getting syntax errors due to character entities injected by your text editor. If that is the case be sure to replace anything like “–&g;” to “:” as Daniel noted above.

  • ESKEL
    April 6, 2010 at 8:16 pm

    STEPHEN BRAITSCH: Thank you so much for this class, it helped me a lot.
    SIDEDOOR: And thanks for the alpha modification as well, that was actually what I needed.

Respond to Easy Full-Screen Gradients in Flash – AS3