Flash AS3 Tutorials Center | Interesting Flash Animation Tutorials | Valuing Flash Animation Tutorials | Flash ActionScript and Animation Home

AS3 Beginner Tutorials | AS3 Basic Lessons | AS3 Valuing Courses | AS3 Components Tutorials | AS3 and PHP Interaction Tutorials
AS3 Practical Tutorials | AS3 Animation Techniques | AS3 Transition Effects Tutorials | AS3 Download Upload Files | AS3 Particle Systems
Communication Between Flash Movies with AS3 | AS3 and JavaScript interaction | AS3 Matrix Transformation | AS3 Physics Simulation Tutorials

Flash ActionScript 3 Drawing with Graphics Class

The Flash AS3 Graphics class contains a set of methods that can use to draw or create lines and shapes easily. In brief the Graphics Class can be considered as a pen and a shape creator.

When using Flash AS3 Graphics Class as a pen, it simply move the pen to a starting point, and then move the pen to any location, thus drawing a line or shape. This is exactly the same as we draw a line or shape on a paper.

When using Flash AS3 Graphics Class as a shape creator, it simply define the location and size of the shape (square, rectangle, round corner rectangle, circle, etc...) and then create the shape. This is similar to stamping a shape on a paper.

Drawing Straight Lines with Graphics Class with a Pen

as3 drawing line

Drawing straight lines with AS3 is very easy. It basically involves the following steps:

1. Create a new instance so that we can use the graphics. The display objects that support drawing include Sprite and Shape objects.

var drawingPen:Sprite = new Sprite();

2. Add the new instance on the stage so that we can see it.

addChild(drawingPen);

Now the drawing pen is ready.

as3 drawing

3. Next we need to define the style of line that we are going to draw. In reality, we have to select a suitable pen and the ink. But in flash drawing, we need to define the following:

- size of line

- color of line

- alpha level of line (0 = fully transparency, 1 = no transparent)

drawingPen.graphics.lineStyle(3, 0x0000FF, 1);

This can be explained as below:

as3 drawing

In this example:

- size of line is 3 pixels

- color of line is blue

- alpha level of line is 1

4. The pen is now ready. It can start to draw. To start drawing, we need to move the pen to a starting point. This is exactly the same as we draw something on a paper.

drawingPen.graphics.moveTo(100, 100);

In this example, we move the pen to the (100, 100) location point.

5. Draw a line from the starting point to any location on the stage.

drawingPen.graphics.lineTo(300, 100);

In this example, we draw a line to the (300, 100) location. The situation is same as the diagram below:

as3 drawing

A line has been drawn on the stage with Flash AS3 Graphics class.

The completed AS3 codes are:

//Create a new instance so that we can use the graphics
var drawingPen:Sprite = new Sprite();

//Add the new instance on the stage so that we can see it.
addChild(drawingPen);

//define the style of line that we are going to draw
drawingPen.graphics.lineStyle(3, 0x0000FF, 1);

// move the pen to a starting point
drawingPen.graphics.moveTo(100, 100);

// Draw a line from the starting point to any location on the stage
drawingPen.graphics.lineTo(300, 100);

As you can see, this is very easy to draw a line with Flash AS3 Graphics class. Of course we can continue the drawing by connecting the lines to form a shape.

Drawing Shapes with Graphics Class with a Pen

Let's continue with the above example.

1. Draw another line to (300, 200)

drawingPen.graphics.lineTo(300, 200);

The situation now is:

as3 drawing

2. Draw another line again to (100, 200)

drawingPen.graphics.lineTo(100, 200);

The situation now is:

as3 drawing

3. Finally, draw another line back to the starting point.

drawingPen.graphics.lineTo(100, 100);

A shape (rectangle) is then drawn with the pen as shown below:

as3 drawing

The completed AS3 codes are:

//Create a new instance so that we can use the graphics
var drawingPen:Sprite = new Sprite();

//Add the new instance on the stage so that we can see it.
addChild(drawingPen);

//define the style of line that we are going to draw
drawingPen.graphics.lineStyle(3, 0x0000FF, 1);

// move the pen to a starting point
drawingPen.graphics.moveTo(100, 100);

// Draw a line from the starting point to any location on the stage
drawingPen.graphics.lineTo(300, 100);

// Draw another line
drawingPen.graphics.lineTo(300, 200);

// Draw another line
drawingPen.graphics.lineTo(100, 200);

// Draw another line back to starting point
// A rectangle shape is drawn
drawingPen.graphics.lineTo(100, 100);

Actually more interesting shapes can be drawn by using this method.

Fill Shapes with Color

The shapes that we drawn are sometimes quite boring. We always like to fill them with different color. Let's see how to fill closed shapes with color.

The Flash AS3 Graphics class comes with the beginFill() methods that allow us to fill the drawn shapes with closed end with color easily.

1. Begin filling a closed shape with color.

The beginFill() method should be inserted before the pen moving to the starting point.

drawingPen.graphics.beginFill(0xFF0000,0.5);

The parameters of beginFill() method are filled color and alpha:

as3 drawing

2. Finished filling a closed shape with color.

After finished filling a closed shape, this is better to end the process with the endFill() method of Graphics Class.

drawingPen.graphics.endFill();

The results of the filling color is:

as3 drawing

The completed AS3 codes are:

//Create a new instance so that we can use the graphics
var drawingPen:Sprite = new Sprite();

//Add the new instance on the stage so that we can see it.
addChild(drawingPen);

//define the style of line that we are going to draw
drawingPen.graphics.lineStyle(3, 0x0000FF, 1);

// Begin filling the shape with color
// Red color
// Alpha 0.5
drawingPen.graphics.beginFill(0xFF0000,0.5);

// move the pen to a starting point
drawingPen.graphics.moveTo(100, 100);

// Draw a line from the starting point to any location on the stage
drawingPen.graphics.lineTo(300, 100);

// Draw another line
drawingPen.graphics.lineTo(300, 200);

// Draw another line
drawingPen.graphics.lineTo(100, 200);

// Draw another line back to starting point
// A rectangle shape is drawn
drawingPen.graphics.lineTo(100, 100);

// Finished filling the shape with color
drawingPen.graphics.endFill();

Now we know how to draw straight lines with Flash Graphics Class. In the next section, we discussw to draw curve lines with AS3 Graphics Class.

Drawing Curve Lines with Graphics Class with a Pen

as3 drawing curve line

The procedures of drawing a curve line is same as drawing a straight line. However the result sometimes is not easy to expect as a straight line. It needs trial and error to get a satisfactory result. Let's see how to draw a curve line.

1. Create a new instance so that we can use the graphics. The display objects that support drawing include Sprite and Shape objects.

var drawingPen:Sprite = new Sprite();

2. Add the new instance on the stage so that we can see it.

addChild(drawingPen);

Now the drawing pen is ready.

as3 drawing


3. Same as drawing a straight line, we need to define the style of line that we are going to draw.

drawingPen.graphics.lineStyle(3, 0x0000FF, 1);

4. The pen is now ready. It can start to draw. To start drawing, we need to move the pen to a starting point.

drawingPen.graphics.moveTo(100, 100);

In this example, we also move the pen to the (100, 100) location point.

5. Draw a curve line from the starting point to any location on the stage.

To draw a curve line, we need the destination location point as well as a control point. The control point will affect the behaviour of the curve point. This can be explained in the diagram below:

as3 drawing curve line

Now, draw a curve line from starting point (100, 100) to the destination point (300,100) with the control point setting at (200, 100).

drawingPen.graphics.curveTo(200, 10, 300, 100);

The curveTo() method can be explained as:

as3 drawing curve line

A curve line has been drawn on the stage.

as3 drawing curve line

The completed AS3 codes are:

//Create a new instance so that we can use the graphics
var drawingPen:Sprite = new Sprite();

//Add the new instance on the stage so that we can see it.
addChild(drawingPen);

//define the style of line that we are going to draw
drawingPen.graphics.lineStyle(3, 0x0000FF, 1);

// move the pen to a starting point
drawingPen.graphics.moveTo(100, 100);

// Draw a curve line
// Destination location: 300, 100
// Control Point: (200, 10)
drawingPen.graphics.curveTo(200, 10, 300, 100);

By changing the control point, we can get different curve lines.

Drawing Shape with Curve Lines with a Pen

Of course we can also draw a closed shape by drawing more lines. Let's continue with the above example by drawing another curve line to draw a shape.

1. Draw another curve line back to the starting point. This time, thee control point is setting at (200, 190)

drawingPen.graphics.curveTo(200, 190, 100, 100);

The result is shown as below:

as3 drawing curve line

The completed AS3 codes are:

//Create a new instance so that we can use the graphics
var drawingPen:Sprite = new Sprite();

//Add the new instance on the stage so that we can see it.
addChild(drawingPen);

//define the style of line that we are going to draw
drawingPen.graphics.lineStyle(3, 0x0000FF, 1);

// move the pen to a starting point
drawingPen.graphics.moveTo(100, 100);

// Draw a curve line
// Destination location: 300, 100
// Control Point: (200, 10)
drawingPen.graphics.curveTo(200, 10, 300, 100);

// Draw another curve line back to the starting point
// Destination location: 100, 100
// Control Point: (200, 190)
drawingPen.graphics.curveTo(200, 190, 100, 100);

Same as before, the shape drawn with the curve lines can also be filled with color.

Fill Shapes with Color

The AS3 codes of filling color of the closed shape draw with curve lines are same as the straight lines:

//Create a new instance so that we can use the graphics
var drawingPen:Sprite = new Sprite();

//Add the new instance on the stage so that we can see it.
addChild(drawingPen);

//define the style of line that we are going to draw
drawingPen.graphics.lineStyle(3, 0x0000FF, 1);

// Begin filling the shape with color
// Red color
// Alpha 0.5
drawingPen.graphics.beginFill(0xFF0000,0.5);

// move the pen to a starting point
drawingPen.graphics.moveTo(100, 100);

// Draw a curve line
// Destination location: 300, 100
// Control Point: (200, 10)
drawingPen.graphics.curveTo(200, 10, 300, 100);

// Draw another curve line back to the starting point
// Destination location: 100, 100
// Control Point: (200, 190)
drawingPen.graphics.curveTo(200, 190, 100, 100);

// Finished filling the shape with color
drawingPen.graphics.endFill();

The result is shown in the following diagram. It is like a mouth.

as3 drawing curve line

By combining straight line and curve lines, interesting shapes can be created.

Drawing Shapes with Graphics Class with a Stamp

When using Flash AS3 Graphics Class as a shape creator, it simply define the location and size of the shape (square, rectangle, round corner rectangle, circle, etc...) and then create the shape. This is similar to stamping a shape on a paper.

There are some simple "ready made shapes" shapes that can be created with Flash graphics Class, for example:

Draw a rectangle with graphics.drawRect() method

Draw a circle with graphics.drawCircle() method

Draw a round corner rectangle with graphics.drawRoundRect method

Draw an ellipse with graphics.drawEllipse() method

Let's see how to draw some shapes.

Draw Rectangle with graphics.drawRect() method

The procedures of drawing "ready made shapes" are basically the same as drawing lines with a pen.

1. Create a new instance so that we can use the graphics. The display objects that support drawing include Sprite and Shape objects.

var drawingShape:Sprite = new Sprite();

2. Add the new instance on the stage so that we can see it.

addChild(drawingShape);

Now the stamp of drawing Shape is ready.

as3 draw shapes

3. Same as drawing lines with a pen, we also need to define the style of line that we are going to stamp or draw the shape.

drawingShape.graphics.lineStyle(3, 0x0000FF, 1);

4. Let's fill a red color with the shape. Begin filling a closed shape with color.

drawingShape.graphics.beginFill(0xFF0000,0.5);

5. Draw a rectangle by specifying the location and size

drawingShape.graphics.drawRect(100, 100, 300, 200);

The syntax of drawRect() method can be illustrated below:

as3 draw rectangle

6. As before, finished filling a closed shape with color.

drawingShape.graphics.endFill();

The rectangle is created:

as3 draw rectangle

The other shapes can be created in the same way.

Remarks:

This Flash ActionScript tutorial shows how to draw lines and shapes with graphics class.