Main Content

You are here:

Drawing by Mouse

Welcome once again to Foundation Flash's tutorials. In today's tutorial, I will be teaching you how to allow someone to draw on the stage with their mouse. This is what it willl look like:

You should see that if you press and drag your mouse, it draws on the stage. So, let's analyse what we need to do for this to work. First of all we will need an empty Movie Clip to store our line in. So let's learn a brand new function; createEmptyMovieClip(). This function basically creates an empty Movie Clip on the stage. It takes in two parameters: Instance name and Depth. We want it to create this Movie Clip immediately. So select the first frame of your animation, and press F9 to open up the actions panel. inside, type the following:

_root.createEmptyMovieClip("line", _root.getNextHighestDepth());

What we have done is to create an empty Movie Clip called "line" in the root timeline, and give it the next highest depth. Now, we want to ask ourselves: "What will this line look like?" For that we will need the lineStyle function. This takes in many parameters but only needs 3. This is its syntax:

MovieClip.lineStyle(thickness, rgb, alpha, pixel hinting, noscale, capsStyle, jointStyle, miterlimit)

See all the parameters? Luckily, you only need the first three. So under that createEmptyMovieClip function, type:

line.lineStyle(5, 0x000000, 100);
var drawing = false;

So we are giving our line Movie Clip a thickness of 5, a colour with the hexidecimal code of 000000(black), and an alpha of 100. Now then, we need to tell it to draw. So we need to tell it when to draw, and for that we need a variable. So we only want it to draw when the mouse is down. To handle this we add a variable "drawing", and set it to false (so we aren't drawing). Next type this:

this.onMouseDown = function(){
        drawing = true;
}
this.onMouseUp = function(){
        drawing = false;
}

So when the mouse is up, drawing will be false, but when pressed, it will become true. Now for the final part. Making it draw. Type the following:

this.onEnterFrame= function(){
        if(drawing == false){
                this.line.moveTo(_xmouse,_ymouse)
        }
        if(drawing){
                this.line.lineTo(_xmouse,_ymouse)
        }
}

I'll explain that. It is constantly checking if drawing is false. If it is, then we use the moveTo function to move the line to the mouse (but not to draw with it). Without this code, the next part would move the line from (0,0) to your mouse, making a big line across the stage. The moveTo function takes in two parameters, x position and y position, pretty simple. Next, we ask if drawing is true if it is, then the line will start drawing, and following the mouse. The lineTo function is basically the same as the moveTo function, and takes in the same parameters, except that it is actually drawing when it moves. Well, that's all for today's tutorial, I hope you have learned something from reading this, bye,

Leon.

Comments