Main Content

You are here:

Drawing by Mouse in AS3

Hello and welcome. I'm not sure if you remember, but a while back we did a tutorial on drawing by mouse in AS2, which we will be redoing in AS3 today. This is what we will be remaking, you just draw with the mouse as you would in Paint or whatever:

Well, first things first. The standard stuff, which should be second nature to you by now. Our class will be called Artist, so save the .as as Artist.as, set the document class of the .fla to Artist and save it in the same folder.

To the code! First comes the libraries of information we want to include:

package{
        import flash.display.Sprite;
        import flash.events.MouseEvent;

That is quite simple - a sprite is a Movie Clip without a timeline if you can remember - and the MouseEvent library, which, believe it or not, deals with mouse events. The next lines give us our class.They also give us our constructor function:

public class Artist extends Sprite{
        //Are we drawing or not?
        private var drawing:Boolean;
 
        public function Artist(){

Now come the stuff we define at the beginning - the linestyle (thin and black) and the event listeners that will tell us what the mouse is doing:

graphics.lineStyle(1,0x000000);
                drawing = false;//to start with
                stage.addEventListener(MouseEvent.MOUSE_DOWN, startDrawing);
                stage.addEventListener(MouseEvent.MOUSE_MOVE, draw);
                stage.addEventListener(MouseEvent.MOUSE_UP, stopDrawing);
        }

You will notice there that we are adding the listeners to the main stage, not to anything in particular so that they are universal on the stage. The three functions - startDrawing, draw and stopDrawing - now must be defined. We start with the startDrawing function:

     public function startDrawing(event:MouseEvent):void{
                //move to the correct starting position for drawing
                graphics.moveTo( mouseX, mouseY);
                drawing = true;
        }

So that tells us "when we click the mouse button, move the graphic to the mouse position and start us drawing". In case you were interested, "event:MouseEvent" is a standard for mouse events - you have to have it, but also can use it sometimes for various things. The moveTo function moves the starting point for any future lines to the point where, in this case, the mouse is. Next is what we do when we draw:

     public function draw(event:MouseEvent){
                if(drawing){
                        graphics.lineTo(mouseX,mouseY);
                }
        }

That is a pretty simple function - as this is called every time the mouse is moved, the if statement asks whether we are drawing or not.The third line is the point of this function. The lineTo function is very similar to the moveTo function, except that it draws a lines when it moves. Last but not least comes the stop drawing function - the most simple of all of them (plus a few } at the end):

     public function stopDrawing(event:MouseEvent){
                drawing = false;
        }
}
}

Well there you go. Now you know how to referenced the mouse position, use MouseEvents and use the lineTo and moveTo functions. Well done! Please watch out for the next tutorials!

Harry.

Comments