ActionScript 3 Drawing Basics

I wasn’t quite sure how to go about drawing a rounded corner rectangle, but a quick search revealed a number of ways to do this. One method involves developing a movie clip method called drawRectangle, detailing the calculations necessary to draw the circle programatically with ActionScript. Another method involves using the flash.display.Shape classes available with Flash CS3 and with the Flex 3 SDK. Another example can be found in the ActionScript 3.0 Cookbook. For more in-depth information about the classes, consult the Adobe Flex 3 Language Reference

Rounded Corner Rectangle

So the easy part is creating the rounded corner rectangle.

package {
	import flash.display.*;
	
	public class RoundedRectangle extends Sprite {
		public function RoundedRectangle () {
			var rect:Sprite = new Sprite();

			var rectX:Number = 20;
			var rectY:Number = 20;
			var rectW:Number = 360;
			var rectH:Number = 240;
			var cornerDiameter:Number = 24;
			var rectEllipseW:Number = 120;
			var rectEllipseH:Number = 240;
			var fillColor:uint = 0xFFFFFF;
			var alpha:Number = 1;
			rect.graphics.beginFill(fillColor, alpha);  
			rect.graphics.drawRoundRect(rectX, rectY, rectW, rectH, cornerDiameter);
			rect.graphics.endFill();
			
			addChild(rect);
		}
	}
}

I used variables to clarify the required parameters. To simplify this code, remove the variables and use literal values for the class method parameters.

package {
	import flash.display.*;
	
	public class RoundedRectangle extends Sprite {
		public function RoundedRectangle () {
			var rect:Sprite = new Sprite();

			rect.graphics.beginFill(0xFFFFFF, 1);  
			rect.graphics.drawRoundRect(20, 20, 360, 240, 24);
			rect.graphics.endFill();
			
			addChild(rect);
		}
	}
}

Gradient Fill

Gradient fills are little more complex because they require some knowledge of the transformation matrix. Luka Maras offers an in-depth tutorial on creating gradient fills. However, the method used in the Adobe Flex 3 Language Reference uses the matrix.createGradiantBox method, which has this signature:

public function createGradientBox(width:Number, height:Number, rotation:Number = 0, tx:Number = 0, ty:Number = 0):void

So the code for a rounded rectangle with a gradient fill from grey to white at 90 degrees goes something like this:

package {
	import flash.display.*;
	import flash.events.*;
	import flash.geom.*
	
	public class RoundRectGradFill extends Sprite {
		public function RoundRectGradFill () {
			var viewImage:Sprite = new Sprite();

			var fillType:String = GradientType.LINEAR;
			var colors:Array = [0xFFFFFF, 0x999999];
			var alphas:Array = [1, 1];
			var ratios:Array = [0, 255];
			var matrix:Matrix = new Matrix();
			var gradWidth:Number = 360;
			var gradHeight:Number = 240;
			var gradRotation:Number = 90 / 180 * Math.PI; // rotation expressed in radians
			var gradOffsetX:Number = 0;
			var gradOffsetY:Number = 0;
			
			matrix.createGradientBox(gradWidth, gradHeight, gradRotation, gradOffsetX, gradOffsetY);
			var spreadMethod:String = SpreadMethod.PAD;
			viewImage.graphics.beginGradientFill(fillType, colors, alphas, ratios, matrix, spreadMethod);  
			viewImage.graphics.drawRoundRect(0, 0, 360, 240, 36);
			viewImage.graphics.endFill();
			
			addChild(viewImage);
		}
	}
}
About these ads

About this entry