Drawing gradient backgrounds in ActionScript 3 and Flex 3

Posted by Ian Serlin | Tweet This | Filed under Actionscript 3, Adobe Flex, problem solution

Flex 4 provides an awesome new declarative way to easily create display gradients, but Flex 3 did not. There are many times a simple gradient can go a long way in terms of improving the user’s perception of your user interface whether its to add a bit of depth in the background or clearly delineate between actions and content.

Problem

You want to easily draw gradients in your AS3 or MXML UI components.

Solution

A while back I wrote this tiny graphics utility class to draw gradients because there was no way in hell I was going to embed images all over my application.

GraphicUtils.as

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

package utils {
	import flash.display.GradientType;
	import flash.display.Graphics;
	import flash.display.SpreadMethod;
	import flash.geom.Matrix;
 
	import mx.utils.GraphicsUtil;
 
	public class GraphicsUtil extends mx.utils.GraphicsUtil
	{
		public static function drawGradientBackground( graphics:Graphics, colors:Array, width:Number, height:Number, fillType:String, cornerRadius:uint ):void {
			graphics.clear();
			var alphas:Array = [1, 1];
			var ratios:Array = [0x11, 0xFF];
			var matrix:Matrix = new Matrix();
			matrix.createGradientBox( width, height, Math.PI / 2, 0, 0);
			var spreadMethod:String = SpreadMethod.PAD;
			graphics.beginGradientFill(fillType, colors, alphas, ratios, matrix, spreadMethod);  
			graphics.drawRoundRect( 0, 0, width, height, cornerRadius, cornerRadius );
		}
 
		public static function drawLinearGradientBackground( graphics:Graphics, colors:Array, width:Number, height:Number, cornerRadius:uint ):void {
			drawGradientBackground( graphics, colors, width, height, GradientType.LINEAR, cornerRadius );
		}
 
		public static function drawRadialGradientBackground( graphics:Graphics, colors:Array, width:Number, height:Number, cornerRadius:uint ):void {
			drawGradientBackground( graphics, colors, width, height, GradientType.RADIAL, cornerRadius );
		}
	}
}

It’s pretty straightforward, just override the updateDisplayList function in the component you want to draw the gradient in and pass in the component’s graphics property and your gradient parameters like so:

1
2
3
4
5

override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
     super.updateDisplayList( unscaledWidth, unscaledHeight );
     // draw a gradient background in the video screen
     GraphicsUtil.drawLinearGradientBackground( this.graphics, [0x101010,0x000000], unscaledWidth, unscaledHeight, this.getStyle("cornerRadius") );
}

It draws linear gradients from top to bottom or radial gradients but could easily be extended to support more gradient types if needed. By the way, I wonder why Adobe chose to make the default linear gradient direction left-to-right in Flex 4… yeah, because they want you to know how cool the rotation property is.

If you’ve got your own kick ass gradient drawing utilities or you turned my GraphicUtils class into something kick ass let me know in the comments!

Tagged : , , ,

Comments (0)

Leave a Reply