Official Design and Development Resource of ThornyRabbit

Drawing shapes with AS3

Posted on 30. Mar, 2009 by thornyeternity in ActionScript 3 Snippets

Draw Rectangle:

var container:Sprite = new Sprite();

addChild(container);

var boxShape:Shape = new Shape();

boxShape.graphics.beginFill(galleryBackgroundColor);

boxShape.graphics.lineStyle(0, galleryBackgroundColor);

boxShape.graphics.drawRect(0 , imageHeight , stage.stageWidth , 200); //left top right bottom

boxShape.graphics.endFill();

container.addChild(boxShape);

——-

Rounded Rect:

bgShape.graphics.drawRoundRect(0 , 0 , stage.stageWidth , stage.stageHeight , 25); //left top right bottom radius

——

Line Properties:

borderShape.graphics.lineStyle(imageBorderThickness, imageBorderColor , 1 , true , “none” , “square” , “miter”);

true = pixelHinting

none = scaleMode (none, normal, vertical, horizontal)

square = cap (none, round, square)

join = miter (bevel, miter, round)

——-

Gradient Fill:

var fillType:String = GradientType.LINEAR;//GradientType.LINEAR or GradientType.RADIAL

var colors:Array = [previewBgColor, previewBgColor2];

var alphas:Array = [1, 1 ];

var ratios:Array = [0, 255];//0 = left, 255 = right

var matr:Matrix = new Matrix();

matr.createGradientBox(stage.stageWidth, (stage.stageHeight/2), 90, 50, 0);

//width:Number, height:Number, rotation:Number = 0, tx:Number = 0, ty:Number = 0 where tx is first color start point and ty is second color start point

//rotation should use PI as 90 is not 90 rotation, but I don’t get it so whatever looks okay

var spreadMethod:String = SpreadMethod.PAD;//SpreadMethod.PAD, SpreadMethod.REFLECT, or SpreadMethod.REPEAT

previewBgShape.graphics.beginGradientFill(fillType, colors, alphas, ratios, matr, spreadMethod);

previewBgShape.graphics.drawRect(0 , 0 , stage.stageWidth , stage.stageHeight);

previewBgShape.graphics.endFill();

—–

Re-usable function to draw rectangles with or whithout rounded corners:

NOTE: set width/height and radius to the same value to use this function to create a circle

private function createInterface():void{

var header:Sprite = new Sprite();

addChild(header);

var headerShape = new Shape();

genericRectShape(headerShape, 0×000066 , 0 , 0 , stage.stageWidth , 30 , 0);

header.addChild(headerShape);

}//createInterface

private function genericRectShape(whichObj:Shape, whatColor:uint , xpos:Number, ypos:Number, shapeWidth:Number , shapeHeight:Number , cornerRadius:Number):void{

whichObj.graphics.beginFill(whatColor);

whichObj.graphics.drawRoundRect(xpos , ypos , shapeWidth , shapeHeight , cornerRadius);

whichObj.graphics.endFill();

}//genericRectShape

Tags: ActionScript 3, draw, Flash, gradient, lines, matrix, rectangle, shape