AS3: LinearGradientUtil Class

Once again, I found myself needing a utility class that would let me stop writing the same code block over and over again. And so, the LinearGradientUtil class was born.

Previously, I’d have something like the following in a view class:

/**
 * Draws the gradient background for 
 * this component on initialize and resize.
 */	
private function _createGradientBackground():void
{
   var fillType:String      = GradientType.LINEAR;
   var colors:Array         = [ 0xe9e9e9, 0xc7c7c7 ];
   var alphas:Array         = [ 1, 1 ];
   var ratios:Array         = [ 0, 255 ];
   var matrix:Matrix        = new Matrix();
       matrix.createGradientBox( width, 34, Math.PI/2, 0, 0 );
   var spreadMethod:String 	= SpreadMethod.PAD;
   var g:Graphics           = this.graphics;
       g.clear();
       g.beginGradientFill( fillType, colors, alphas, ratios, matrix, spreadMethod );
       g.drawRect( 0, 0, width, height );
       g.endFill();
}

This would be called after INITIALIZE and RESIZE events. Writing those lines over and over again prompted me to devise a more elegant solution:

package labs.otuome.fl.graphics
{
	import flash.display.GradientType;
	import flash.display.Graphics;
	import flash.display.SpreadMethod;
	import flash.display.Sprite;
	import flash.geom.Matrix;
 
	/**
	 * Util class to create linear gradient fills.
	 * @author Hasan Otuome
	 */
	public class LinearGradientUtil
	{
		///////////////////////////////////////////////////////////////////////////////////////////////
		// PRIVATE PROPERTIES
		///////////////////////////////////////////////////////////////////////////////////////////////
 
		///////////////////////////////////////////////////////////////////////////////////////////////
		// PUBLIC PROPERTIES
		///////////////////////////////////////////////////////////////////////////////////////////////
		public static const HORIZONTAL:String 		= 'horizontalLinearGradient';
		public static const VERTICAL:String 		= 'verticalLinearGradient';
		///////////////////////////////////////////////////////////////////////////////////////////////
		// PUBLIC METHODS
		///////////////////////////////////////////////////////////////////////////////////////////////
		/**
		 * Draws the linear gradient to the .graphics 
		 * property of the specified component. Defaults 
		 * to a Web 2.0 style gray gradient.
		 * 
		 * @param target The display object to apply the gradient to.
		 * @param size For a vertical gradient this is the 
		 * height of the gradient. For a horizontal gradient, 
		 * this is the width of the gradient. 
		 * @param primaryColor The top or left-most color depending on orientation.
		 * @param secondaryColor The bottom or right-most color depending on orientation.
		 * @param primaryAlpha The top or left-most color depending on orientation.
		 * @param secondaryAlpha The bottom or right-most alpha depending on orientation.
		 * @param primaryRatio The ratio of the top or left-most color depending on orientation.
		 * @param secondaryRatio The ratio of the bottom or right-most color depending on orientation.
		 * @param orientation either horizontal or vertical. defaults to vertical.
		 * @param invert Toggle that switches what the method considers primary and secondary.
		 */		
		public static function createGradientBackground( target:Sprite, 
						size:uint=34, 
						cornerRadius:uint=0, 
						primaryColor:uint=0xe9e9e9, 
						secondaryColor:uint=0xc7c7c7, 
						primaryAlpha:uint=1, 
						secondaryAlpha:uint=1, 
						primaryRatio:uint=0, 
						secondaryRatio:uint=255, 
						orientation:String=LinearGradientUtil.HORIZONTAL, 
						invert:Boolean=false ):void
		{
			var fillType:String;
			var colors:Array;
			var alphas:Array;
			var ratios:Array;
			var matrix:Matrix;
			var spreadMethod:String;
			var g:Graphics;
 
			fillType 			= GradientType.LINEAR;
			colors 				= _createColorsArray( primaryColor, secondaryColor, invert );
			alphas 				= _createAlphasArray( primaryAlpha, secondaryAlpha, invert );
			ratios 				= _createRatiosArray( primaryRatio, secondaryRatio, invert );
			matrix 				= new Matrix();
 
			switch (orientation)
			{
				case LinearGradientUtil.HORIZONTAL:
					matrix.createGradientBox( size, target.height, Math.PI/2, 0, 0 );
					break;
				case LinearGradientUtil.VERTICAL:
					matrix.createGradientBox( target.width, size, Math.PI/2, 0, 0 );
					break;
			}
 
			spreadMethod 		= SpreadMethod.PAD;
 
			g 					= target.graphics;
			g.clear();
			g.beginGradientFill( fillType, colors, alphas, ratios, matrix, spreadMethod );
 
			if (cornerRadius > 0)
			{
				g.drawRoundRect( 0, 0, target.width, target.height, cornerRadius );
			}
			else
			{
				g.drawRect( 0, 0, target.width, target.height );
			}
 
			g.endFill();
		}
		///////////////////////////////////////////////////////////////////////////////////////////////
		// OVERRIDES
		///////////////////////////////////////////////////////////////////////////////////////////////
 
		///////////////////////////////////////////////////////////////////////////////////////////////
		// PRIVATE METHODS
		///////////////////////////////////////////////////////////////////////////////////////////////
		/**
		 * Creates the colors array required by the main method. 
		 * @param colorOne
		 * @param colorTwo
		 * @param inverted
		 * @return The gradient colors array.
		 */		
		private static function _createColorsArray( colorOne:uint, 
						colorTwo:uint, 
						inverted:Boolean=false ):Array
		{
			var colors:Array;
			if (!inverted)
			{
				colors = [ colorOne, colorTwo ]; 
			}
			else
			{
				colors = [ colorTwo, colorOne ]; 
			}
			return colors;
		}
		/**
		 * Creates the alphas array required by the main method. 
		 * @param colorOneAlpha
		 * @param colorTwoAlpha
		 * @param inverted
		 * @return The gradient alphas array.
		 */		
		private static function _createAlphasArray( colorOneAlpha:uint, 
						colorTwoAlpha:uint, 
						inverted:Boolean=false ):Array
		{
			var alphas:Array;
			if (!inverted)
			{
				alphas = [ colorOneAlpha, colorTwoAlpha ]; 
			}
			else
			{
				alphas = [ colorTwoAlpha, colorOneAlpha ]; 
			}
			return alphas;
		}
		/**
		 * Creates the ratios array required by the main method. 
		 * @param colorOneRatio
		 * @param colorTwoRatio
		 * @param inverted
		 * @return The gradient ratios array.
		 */		
		private static function _createRatiosArray( colorOneRatio:uint, 
						colorTwoRatio:uint, 
						inverted:Boolean=false ):Array
		{
			var ratios:Array;
			if (!inverted)
			{
				ratios = [ colorOneRatio, colorTwoRatio ]; 
			}
			else
			{
				ratios = [ colorTwoRatio, colorOneRatio ]; 
			}
			return ratios;
		}
	}
}

Now, I can just issue the command like so:

/**
 * Draws the gradient background for 
 * this component on initialize and resize.
 */	
private function _createGradientBackground():void
{
//	LinearGradientUtil.createGradientBackground( this, this.height, getStyle('cornerRadius'), 0xfdfeff, 0xe9e9e9 ); // changing color scheme
//	LinearGradientUtil.createGradientBackground( this ); // using the default color scheme
}

Less code + rich functionality = happy developer!!