AS3: Drawing Vectors

his tutorial will teach you the basics on how to draw simple vector shapes in ActionScript 3.0. This is done through the various methods of the Graphics Class for creating lines, fills, and primitive shapes. This tutorial is a beginner topic that doesn't require any special AS3 knowledge other the very basics of the language.
By the end of this tutorial you should be able to draw shapes and display on the screen shapes similar to the ones shown in the Flash movie below.

This is a tutorial on how to draw vectors using AS3. To learn how to do the same thing using previous version of ActionScript you should review our other tutorial on the ActionScript Drawing API.

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.
• beingFill() - 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.

There are some advanced gradient drawing methods which are not explored in this tutorial. Other methods for drawing simple shapes will be discussed later in the tutorial.

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();

You can learn more about AS3 Variables by reviewing our tutorial on this topic.

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);

You can learn more about the AS3 Display List by reviewing our tutorial on this topic.

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 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.

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:

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 two 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);

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);

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);
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.

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);
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();