Drawing Vectors

Introduction

Vectors in AS3 are created by using the Graphics Class. Unlike the majority of other
classes, there is no need to create an instance of this class before you use it because
an instance of it is already instantiated as a property of any display objects that is
a Shape, Sprite, and MovieClip.
Using the Graphics Class it is possible to use a pen-like drawing mechanism to move a
pointer from one point to the next to draw lines. You can use this method to fill the area
surrounded by the lines you create, or alternatively use the shape specific methods to
draw objects such as rectangles and circles.
The basic graphics methods for drawing vectors are:

 lineStyle() - Specificies the look of any line stroke we make.

 moveTo() - Moves the drawing pointer to the specific point.
 lineTo() - Draws a line to the specified point.
 curveTo() - Draws a curve to the specific point.
 beginFill() - Starts color filling the area between the lines.
 endFill() - Ends of the fill of the area between the lines.
 clear() - Clears all vectors inside a graphics object.

Drawing a Straight Line

Before we draw any graphic we must create an instance to host this graphic. We have
to create a Shape, a Sprite, or a MovieClip instance to host our graphic. The Shape
Class is the least memory intensive, so you should always use it if you do not need to
have any of the functionalities of a Sprite or a MovieClip.
var my_shape:Shape = new Shape();
We will instantly add this object to the Display List so that everything we put on it will
instantly be visible on the stage. This is done by using the addChild() method:
var my_shape:Shape = new Shape();
addChild(my_shape);
The first step in the actual process for drawing a line is by setting the properties of the
line stroke. By default no stroke is set, so any line you draw would not be visible. Setting
this properties of the line stroke is done by using the .lineStyle() method. This method

1
has a number of optional properties including the thickness of the stroke, the color of
the stroke, and the transparency of the stroke. In this example we are going to use a
1px red stroke that is fully opaque. This is done in the following manner.

var my_shape:Shape = new Shape();

addChild(my_shape);

my_shape.graphics.lineStyle(1, 0xFF0000, 1);

Remember that the Graphics methods are applied through the graphics property and
not directly through the Shape instance.
Our stroke style is now ready. We can go ahead and start drawing our line before, but
before we do that. We can specificy a starting point for our line. By default a line would
start from the previous point at which the pointer was placed, because we did not move
our pointer to any place, then starting point would be 0, 0. We do not want to start from
there, so we are going to move our pen to another point using the .moveTo() method.
This method requires providing an x and y coordinates to which the pointer will be
moved to. We are going to move our pointer to the point 50, 50 on our stage. We can do
this this way:
var my_shape:Shape = new Shape();
addChild(my_shape);

my_shape.graphics.lineStyle(1, 0xFF0000, 1);

my_shape.graphics.moveTo(50, 50);
We now have a starting point for our line, we can start drawing by using
the lineTo() method. Using this method we just need to specify the point at which the
line should end. We can specify 100, 50 as the point to which our line should extend to:
var my_shape:Shape = new Shape();
addChild(my_shape);

my_shape.graphics.lineStyle(1, 0xFF0000, 1);

my_shape.graphics.moveTo(50, 50);
my_shape.graphics.lineTo(100, 50);

You can test your movie now (Control>Test) to see your very first line drawn in red and
extending from the point 50, 50 to the point 100, 50. Here is a visualization of what you
have done.

2
We can continue drawing our lines one by one by targeting the next point to create any
shape we wish. The code below will result in a square, it should be easy to understand:
var my_shape:Shape = new Shape();
addChild(my_shape);

my_shape.graphics.lineStyle(1, 0xFF0000, 1);

my_shape.graphics.moveTo(50, 50);
my_shape.graphics.lineTo(100, 50);
my_shape.graphics.lineTo(100, 100);
my_shape.graphics.lineTo(50, 100);
my_shape.graphics.lineTo(50, 50);
You can test your movie to see a small square. Here is an illustration of how we drew it:

3
To draw another object or line without having to connect it to your last line you can use
the moveTo() method again to move your pointer to where you want your new object to
start and then continue using the lineTo() method.

Drawing a Curve

Drawing a curve requires an additional step for providing a control point that determines
the shape of the curve. So in addition to the end point of your curve, you must specificy
this control that is located between your beginning and end point. This is done by using
the curveTo() method where x1 and y1 are the coordinates of the control point
while x2 and y2 are the coordinates of your end point:
my_shape.graphics.curveTo(x1, y1, x2, y2);

4
If we want to create a simple eye-like ova shape using two curved lined we could do
that by using the code below. It is worth noting that using curveTo() requires the same
pre-requisites as lineTo(), namely instantiating a Shape object and setting
the lineStyle():
var my_shape:Shape = new Shape();
addChild(my_shape);

my_shape.graphics.lineStyle(1, 0xFF0000, 1);

my_shape.graphics.moveTo(0, 50);
my_shape.graphics.curveTo(25, 0, 50, 50);
my_shape.graphics.curveTo(25, 100, 0, 50);

5
Creating Filled Shapes

Any shape created using the lineTo() and curveTo() methods could be filled with a color
to close the area between the lines. To do this we simply use the beginFill() method to
assign the fill color. It is used in following format:
my_shape.graphics.beginFill(color_code, transparency);
This method should be used before drawing any shape you wish to fill. For example, if
we were to use our earlier square example we can use this method in the following
manner:
var my_shape:Shape = new Shape();
addChild(my_shape);

my_shape.graphics.lineStyle(1, 0xFF0000, 1);

my_shape.graphics.beginFill(0x000000,1);
my_shape.graphics.moveTo(50, 50);
my_shape.graphics.lineTo(100, 50);
my_shape.graphics.lineTo(100, 100);
my_shape.graphics.lineTo(50, 100);

6
my_shape.graphics.lineTo(50, 50);
It is also good practice to indicate when you fill is supposed to finish using
the endFill() method to prevent any unexpected results:
var my_shape:Shape = new Shape();
addChild(my_shape);

my_shape.graphics.lineStyle(1, 0xFF0000, 1);

my_shape.graphics.beginFill(0x000000,1);
my_shape.graphics.moveTo(50, 50);
my_shape.graphics.lineTo(100, 50);
my_shape.graphics.lineTo(100, 100);
my_shape.graphics.lineTo(50, 100);
my_shape.graphics.lineTo(50, 50);
my_shape.graphics.endFill();
It is possible to use a fill without applying a lineStyle if you do not wish to have an
outline to your object.
Test your movie now to see that your square is now filled in a black color!

Removing Shapes

If for some reason you want to remove all the vectors lines you have drawn in any
object you can do that by using the clear(). This method is not capable of making any
selective deletion and will remove all the vector lines and fills you have placed inside the
target object. For example, you can delete the filled square we made earlier by calling
the clear() method directly this way:
var my_shape:Shape = new Shape();
addChild(my_shape);

my_shape.graphics.lineStyle(1, 0xFF0000, 1);

my_shape.graphics.beginFill(0x000000,1);
my_shape.graphics.moveTo(50, 50);
my_shape.graphics.lineTo(100, 50);
my_shape.graphics.lineTo(100, 100);
my_shape.graphics.lineTo(50, 100);
my_shape.graphics.lineTo(50, 50);
my_shape.graphics.endFill();
my_shape.graphics.clear();
You should be able to draw and fill simple shapes using the Graphics now. West will go
through a couple of methods next that enable you to draw specific shapes easily.

7
Drawing Rectangles and Circles

In addition to the basic methods for drawing lines and curves, AS3 provides a number of
methods for drawing actual shapes such as rectangles and circles easily. The ones
which we will go through are drawRect(), drawCircle(), and drawRoundRect():
 drawRect() allows you to draw a rectangle. This method is used in the following format:
drawRect(x, y, width, height);
So if we wanted to draw an actual rectangle placed at point (50, 50) and which has a
width of 300px and a height of 100px, we can do it this way:
var my_shape:Shape = new Shape();
addChild(my_shape);

my_shape.graphics.lineStyle(1, 0xFF0000, 1);

my_shape.graphics.beginFill(0x000000,1);
my_shape.graphics.drawRect(50, 50, 300, 100);
my_shape.graphics.endFill();

 drawCircle() allows you to draw a cricle. This method is used in the following format:
drawCircle(x, y, radius);
So if we wanted to draw an actual cricle placed at point (150, 150) and which has a
radius of 25px, we can do it this way:
var my_shape:Shape = new Shape();
addChild(my_shape);

my_shape.graphics.lineStyle(1, 0xFF0000, 1);

my_shape.graphics.beginFill(0x000000,1);
my_shape.graphics.drawCircle(150, 150, 25);

8
my_shape.graphics.endFill();

 drawRoundRect() allows you to draw a rectangle with rounded corners. This method is
used in the following format:
drawRoundRect(x, y, width, height, ellipse_width,
ellipse_height);
The last ellipse height attribute is optional. So if you want to create a rectangle with
rounded corners placed at point (50,50) with a width of 300px and a height of 100px and
an ellipse width and height of 25, we can do it this way:
var my_shape:Shape = new Shape();
addChild(my_shape);

my_shape.graphics.lineStyle(1, 0xFF0000, 1);

my_shape.graphics.beginFill(0x000000,1);
my_shape.graphics.drawRoundRect(50, 50, 300, 100, 25);
my_shape.graphics.endFill();