Tutorial 1: Drawing App in AS3

Ok, so I fancied sharing a tutorial with you guys. I completely wrote the code myself today out of sheer boredom (messing around, as well). So without further ado:

Ok, what we will be covering:

* Drawing a line by click and drag (with extra effects for people who want to step it up a notch)

* Changing the colour of the line you're drawing

* Adding a "rubber" (either a white line or a complete erase)

I'd say this tutorial is intermediate, so not terribly difficult. We will start by creating some variables (code will be bold and in italics):

var startDraw:Boolean = false;

var drawWidth:Number = 20;

The first variable here defines when we're drawing (as it's false, we're not). The second defines how wide the line we draw will be.

Next, we need to add some event listeners! To draw this line, we will need 3. One for when the left mouse button is pressed DOWN, another for when it's RELEASED and a final one to check it all over. Add this underneath the previous code:

stage.addEventListener(MouseEvent.MOUSE_DOWN, startDrawing);

stage.addEventListener(MouseEvent.MOUSE_UP, stopDrawing);

stage.addEventListener(Event.ENTER_FRAME, checkDraw);

Yum. As this first part isn't involving any extra effects, attaching all event listeners to the stage is fine. Ok, now we will define the first function:

function startDrawing(e:MouseEvent):void{

graphics.moveTo(mouseX, mouseY);

startDraw = true;

}

Great! here, we set where the line graphics will... well... move to! We obviously want it to follow the mouse, so we defined the X and Y to both follow the mouse. Also, we make sure startDraw is true, for the checkDraw function. Next:

function stopDrawing(e:MouseEvent):void{

startDraw = false;

}

Now test it! You'll be glad to know NOTHING HAPPENS YET BECAUSE WE HAVEN'T DONE THE CHECKDRAW FUNCTION. If you actually checked... you're dopey. Anyway, this one's pretty self explanitory - just changes the startDraw boolean back to false. Now, the sexy function we've all been waiting for:

function checkDraw(e:Event):void{

if(startDraw == true){

graphics.lineStyle(drawWidth, 0x000000);

graphics.lineTo(mouseX, mouseY);

}

}

Ok, this is the good bit! To begin with, we've made it so the code only works if startDraw is true (that's where the past functions come into play). The actual code is pretty simple. the lineStyle is how your line looks, feels... LIVES (lulz). The first variable contained within the brackets is the lineWidth we defined at the beginning, the second variable is our line colour! I've simply set it to black so there's no confusion. The next bit is simply where our line goes to, which is going to be the mouse again - so mouseX, mouseY!

Ok, now it should all work. Hit ctrl + enter to export yo' SWF. If something's not working, copy and paste this final code in:

var startDraw:Boolean = false;

var drawWidth:Number = 20;

stage.addEventListener(MouseEvent.MOUSE_DOWN, startDrawing);

stage.addEventListener(MouseEvent.MOUSE_UP, stopDrawing);

stage.addEventListener(Event.ENTER_FRAME, checkDraw);

function startDrawing(e:MouseEvent):void{

graphics.moveTo(mouseX, mouseY);

startDraw = true;

}

function stopDrawing(e:MouseEvent):void{

startDraw = false;

}

function checkDraw(e:Event):void{

if(startDraw == true){

graphics.lineStyle(drawWidth, 0x000000);

graphics.lineTo(mouseX, mouseY);

}

}

Und voila! You've got a sexy-ass (but I admit, simple) drawing app! You can change the width of the line by changing the drawWidth variable to to a lower number. If you have any problems, post a comment!

Until next time (I'll do the rubber then), bah bye!