The Code Behind Our User Drawing Example

We create programmatically a Sprite, spBoard, that serves as the actual graphing board for the user. We create a Shape, shDrawing, in which the user's drawing resides. shDrawing is a child of spBoard. The rest of the code lies in an appropriate choice of listeners, most of which are added to spBoard. We want drawing to start when the user presses the mouse button over spBoard; we want drawing to stop when the user releases the button or moves the mouse outside of spBoard. The choice of listeners shown below accomplishes what we want.

/*
We are creating a Sprite, spBoard, that will serve as a board for the user to draw on. We add spBoard as a child of this, that is, the MainTimeline and position spBoard within the main movie.
*/

var spBoard:Sprite=new Sprite();

this.addChild(spBoard);

spBoard.x=280;

spBoard.y=30;

/*
shDrawing is a Shape, a child of spBoard, that will contain the user's drawing. We don't want the user to draw in spBoard directly as we want to be able to clear a drawing without erasing the background in spBoard.
*/

var shDrawing:Shape=new Shape();

spBoard.addChild(shDrawing);

/*
We set variables that will determine the thickness and the color of the line for the user drawing as well as a Boolean variable which will remember if drawing should and should not proceed.
*/

var doDraw:Boolean=false;

var lineSize:Number=7;

var currentColor:Number;

/*
The dynamic text field, sizeBox, displays the current thickness of the line.
*/

sizeBox.text=String(lineSize);

//We draw a background of spBoard and add a shadow filter.

spBoard.graphics.lineStyle(1,0x000000);

spBoard.graphics.beginFill(0xFFFFFF);

spBoard.graphics.drawRect(0,0,250,250);

spBoard.graphics.endFill();

spBoard.filters = [ new DropShadowFilter() ];

/*
We attach the appropriate listeners to spBoard. The listeners will cause drawing to take place only after the user pressed the mouse button and moves the mouse over spBoard.
*/

spBoard.addEventListener(MouseEvent.ROLL_OUT,boardOut);

spBoard.addEventListener(MouseEvent.MOUSE_MOVE,boardMove);

spBoard.addEventListener(MouseEvent.MOUSE_DOWN,boardDown);

spBoard.addEventListener(MouseEvent.MOUSE_UP,boardUp);

 

function boardOut(e:MouseEvent):void {

doDraw=false;

}

 

function boardDown(e:MouseEvent):void {

doDraw=true;

/*

We use selectedColor property of our ColorPicker component

to determine the color of the line.

*/

currentColor=cpColor.selectedColor;

shDrawing.graphics.lineStyle(lineSize,currentColor);

/*

Since shDrawing is a child of spBoard position at (0,0) of spBoard,

the mouse coordinates woth respect to spBoard or shDrawing are the same.

*/

shDrawing.graphics.moveTo(shDrawing.mouseX,shDrawing.mouseY);

}

 

function boardUp(e:MouseEvent):void {

doDraw=false;

}

 

function boardMove(e:MouseEvent):void {

var curX:Number=shDrawing.mouseX;

var curY:Number=shDrawing.mouseY;

/*

We check if doDraw is true and if the mouse is over spBoard

before drawing. Note that the coordinate check is necessary.

Since shDrawing is a child of spBoard, if shDrawing extends beyond

spBoard, spBoard is enlarged and ROLL_OUT event does not happen.

*/

if(doDraw && checkCoords(curX,curY)){

shDrawing.graphics.lineTo(curX,curY);

e.updateAfterEvent();

}

}

 

function checkCoords(a:Number,b:Number):Boolean {

 

if(a>=250-lineSize/2 || a<=lineSize/2 || b>=250-lineSize/2 || b<=lineSize/2){

return false;

}

else {

return true;

}

 

}

/*
We attach self-explanatory listeners to our three buttons: ERASE button and the two arrow buttons that change the thickness of the line.
*/

btnErase.addEventListener(MouseEvent.CLICK, eraseClicked);

 

function eraseClicked(e:MouseEvent):void {

shDrawing.graphics.clear();

}

 

btnUp.addEventListener(MouseEvent.CLICK, upClicked);

 

function upClicked(e:MouseEvent):void {

if(lineSize<20){

lineSize+=1;

} else {

lineSize=20;

}

sizeBox.text=String(lineSize);

}

 

btnDown.addEventListener(MouseEvent.CLICK, downClicked);

 

function downClicked(e:MouseEvent):void {

if(lineSize>1){

lineSize+=-1;

} else {

lineSize=1;

}

sizeBox.text=String(lineSize);

}

 

Download

Download the well-commented fla file for the swf displayed above.

Back to Basic Tutorials              Back to Flash and Math Home

We welcome your comments, suggestions, and contributions. Click the Contact Us link below and email one of us.

Adobe®, Flash®, ActionScript®, Flex® are registered trademarks of Adobe Systems Incorporated.