The document discusses the basics of using the drawing API in ActionScript, including: 1) Important terms like anchor points, control points, coordinate space, fills, gradients, points, curves, strokes, scales, translates; 2) Examples of how to draw straight lines, curves, and shapes using methods like moveTo, lineTo, curveTo, drawRect, drawCircle; 3) Creating gradient lines and fills using types like RADIAL gradients, colors, alphas, ratios, and matrix transformations.

1. Basics of using the drawing API

2. • The drawing API is the name for the functionality built into ActionScript that allows you to create vector
graphics—lines, curves, shapes, fills, and gradients—and display them on the screen using ActionScript.
• The following reference list contains important terms that you will encounter in this chapter:
– Anchor point: One of the two end points of a quadratic Bézier curve.
– Control point: The point that defines the direction and amount of curve of a quadratic Bézier
curve. The curved line never reaches the control point; however, the line curves as though being
drawn toward the control point.
– Coordinate space: The graph of coordinates contained in a display object, on which its child
elements are positioned.
– Fill: The solid inner portion of a shape that has a line filled in with color, or all of a shape that has no
outline.
– Gradient: A color that consists of a gradual transition from one color to one or more other colors
(as opposed to a solid color).
– Point: A single location in a coordinate space. In the 2-d coordinate system used in ActionScript, a
point is defined by its location along the x axis and the y axis (the point’s coordinates).
– Quadratic Bézier curve: A type of curve defined by a particular mathematical formula. In this type
of curve, the shape of the curve is calculated based on the positions of the anchor points (the end
points of the curve) and a control point that defines the amount and direction of the curve.
– Scale: The size of an object relative to its original size. When used as a verb, to scale an object
means to change its size by stretching or shrinking the object.
– Stroke: The outline portion of a shape that has a line filled in with color, or the lines of an un-filled
shape.
– Translate: To change a point’s coordinates from one coordinate space to another.
– X axis: The horizontal axis in the 2-d coordinate system used in ActionScript.
– Y axis: The vertical axis in the 2-d coordinate system used in ActionScript.

3. Drawing straight lines
var triangleHeight:uint = 100;
var triangle:Shape = new Shape();
// red triangle, starting at point 0, 0
triangle.graphics.beginFill(0xFF0000);
triangle.graphics.moveTo(triangleHeight/2, 0);
triangle.graphics.lineTo(triangleHeight, triangleHeight);
triangle.graphics.lineTo(0, triangleHeight);
triangle.graphics.lineTo(triangleHeight/2, 0);
// green triangle, starting at point 200, 0
triangle.graphics.beginFill(0x00FF00);
triangle.graphics.moveTo(200 + triangleHeight/2, 0);
triangle.graphics.lineTo(200 + triangleHeight, triangleHeight);
triangle.graphics.lineTo(200, triangleHeight);
triangle.graphics.lineTo(200 + triangleHeight/2, 0);
this.addChild(triangle);

4. Drawing curves
var size:uint = 100;
var roundObject:Shape = new Shape();
// red circular shape
roundObject.graphics.beginFill(0xFF0000);
roundObject.graphics.moveTo(size / 2, 0);
roundObject.graphics.curveTo(size, 0, size, size / 2);
roundObject.graphics.curveTo(size, size, size / 2, size);
roundObject.graphics.curveTo(0, size, 0, size / 2);
roundObject.graphics.curveTo(0, 0, size / 2, 0);
// green circular shape
roundObject.graphics.beginFill(0x00FF00);
roundObject.graphics.moveTo(200 + size / 2, 0);
roundObject.graphics.curveTo(200 + size, 0, 200 + size, size / 2);
roundObject.graphics.curveTo(200 + size, size, 200 + size / 2, size);
roundObject.graphics.curveTo(200, size, 200, size / 2);
roundObject.graphics.curveTo(200, 0, 200 + size / 2, 0);
this.addChild(roundObject);

5. Drawing shapes using built-in methods
var squareSize:uint = 100;
var square:Shape = new Shape();
square.graphics.beginFill(0xFF0000, 0.5);
square.graphics.drawRect(0, 0, squareSize,
squareSize);
square.graphics.beginFill(0x00FF00, 0.5);
square.graphics.drawRect(200, 0, squareSize,
squareSize);
square.graphics.beginFill(0x0000FF, 0.5);
square.graphics.drawRect(400, 0, squareSize,
squareSize);
square.graphics.endFill();
this.addChild(square);

6. Drawing shapes using built-in methods
var mySprite:Sprite = new Sprite();
mySprite.graphics.beginFill(0xFFCC00);
mySprite.graphics.drawCircle(30, 30, 30);
var label:TextField = new TextField();
label.width = 200;
label.text = "They call me mellow yellow...";
label.x = 20;
label.y = 20;
mySprite.addChild(label);
this.addChild(mySprite);

7. Creating gradient lines and fills
import flash.display.Shape;
import flash.display.GradientType;
import flash.geom.Matrix;
var type:String = GradientType.RADIAL;
var colors:Array = [0x00FF00, 0x000088];
var alphas:Array = [1, 1];
var ratios:Array = [0, 255];
var spreadMethod:String = SpreadMethod.PAD;
var interp:String = InterpolationMethod.LINEAR_RGB;
var focalPtRatio:Number = 0;
var matrix:Matrix = new Matrix();
var boxWidth:Number = 50;
var boxHeight:Number = 100;
var boxRotation:Number = Math.PI/2; // 90°
var tx:Number = 25;
var ty:Number = 0;
matrix.createGradientBox(boxWidth, boxHeight, boxRotation, tx, ty);
var square:Shape = new Shape;
square.graphics.beginGradientFill(type, colors,alphas,ratios, matrix, spreadMethod, interp,
focalPtRatio);
square.graphics.drawRect(0, 0, 100, 100);
addChild(square);

8. var myShape:Shape = new Shape();
var gradientBoxMatrix:Matrix = new Matrix();
gradientBoxMatrix.createGradientBox(100, 40,
0, 0, 0);
myShape.graphics.beginGradientFill(GradientT
ype.LINEAR, [0xFF0000,
0x00FF00, 0x0000FF], [1, 1, 1], [0, 128, 255],
gradientBoxMatrix);
myShape.graphics.drawRect(0, 0, 50, 40);
myShape.graphics.drawRect(0, 50, 100, 40);
myShape.graphics.drawRect(0, 100, 150, 40);
myShape.graphics.endFill();
this.addChild(myShape);