Drawing lines in Actionscript 3 – part 4

This is part 4 of the drawing application where you will create a canvas for your line drawings. The canvas is a separate area to hold the drawings instead of directly on the stage. There are two ways of adding the canvas, you can use Actionscript 3 code or you can convert a primitive shape into a movie clip. I will start off with the latter.


Drawing application part 4

Step 1

On the timeline insert a new layer into the highest position. Select the Rectangle tool and drag a rectangle shape onto the stage. You can use any colour you wish then convert the shape into a movie clip (F8).And give your shape the instance name: canvas


Step2

Open up the Actions panel (F9) and make the following changes. Note that I have not included all the code from the previous tutorial.

canvas.addEventListener(MouseEvent.MOUSE_DOWN, MouseDown);

function MouseDown(event:MouseEvent):void {
    canvas.addEventListener(MouseEvent.MOUSE_MOVE, MouseMove);
}

function MouseUp(event:MouseEvent):void {
    canvas.removeEventListener(MouseEvent.MOUSE_MOVE, MouseMove);
}

Step 3

Test your movie Ctrl + Enter.



The alternative way of adding a canvas to the drawing application is to create a rectangle shape using the drawing API. The code will look like below.

var canvas:Sprite = new Sprite();
canvas.graphics.beginFill(0x333333);
canvas.graphics.drawRect(4,3,390.95,246)
canvas.graphics.endFill();
addChild(canvas);