Flash 5: Drawingboard
         written by ilyas usal a.k.a. pom

OK, now let's see what we have to do : basically, we want to draw a line between the point where the mouse was and where it is now. In order to do so, all we have to do is store the position of the mouse in temporary variables.

Building the Drawing Board

[ You can draw! ]

The Function that Will do the Job for Us
The code in the controller has to change again. We will define the drawing function when the clip loads, and then call the function onClipEvent (enterFrame).

Save your work. You can draw all right, but you can't stop it. We'll see how to fix that later.

i++ ;
/*This is a counter used in the attachMovie function. It is used for the name of the clips which will be named line5, line52..., and for the level where they will be attached (5, 52...)*/


this.attachMovie("mcLine","line"+i,i);
/*The same as before, except we load in level number i under the name line1, line2...*/

var mc = this["line"+i] ;
/* Here's where we target the clip we've just created. You can access movies you've duplicated or attached with this square bracket notation. The var in front of mc makes it local, that is to say it doesn't exist outside of the function*/

x_start = x_end;
y_start = y_end;
/*The starting point of the line is the ending point of the last line*/

x_end = _xmouse;
y_end = _ymouse;
/*The ending point of the line is the position of the mouse*/

mc._x = x_start ;
mc._y = y_start ;
mc._xscale = x_end - x_start ;
mc._yscale = y_end - y_start ;
/*We set the line to its starting point, and we rescale*/

All we have to do now is check if the user is pressing his mouse or not. This can be done with the onClipEvent handlers very easily, just by adding these few lines between the load and the enterFrame (be careful, the onClipEvent (enterFrame) changes as well):

We put a marker to 1 when the mouse was pressed and to 0 otherwise. The x_end = _xmouse ; is necessary. Remove it, and you'll have a nice tool to make polygons, but not a drawing board. One last thing: if you want to make it smoother, increase the fps. Not too much though...

One last thing: you can make a button that will erase what you have just drawn. Put this code to it:

I have also provided the Flash source files used for creating the animations in this tutorial. Click the Download Now link below:

 Download Files

 
That's it for the Flash 5 version. I hope liked it, and if there any problem, post in the new Tutorials forum!

pom 0]


Previous Page

Discuss in the Forums  

 

 




SUPPORTERS:

kirupa.com's fast and reliable hosting provided by Media Temple.