Sunday, 14 November 2010

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


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();;,3,390.95,246);


  COPYRIGHT © 2014 · ILIKE2FLASH · Theme by Ourblogtemplates

Back to TOP