Drawing Board: Draw in Flash 5

by ilyas usal a.k.a. pom   | filed under Flash and ActionScript

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).

//Thanks to Supra and Thoriphes for the original code onClipEvent (load) { function draw () { i++ ; this.attachMovie("mcLine","line"+i,i); var mc = this["line"+i] ; x_start = x_end ; y_start = y_end ; x_end = _xmouse ; y_end = _ymouse ; mc._x = x_start ; mc._y = y_start ; mc._xscale = x_end - x_start ; mc._yscale = y_end - y_start ; } } onClipEvent (enterFrame) { draw () ; }

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):

onClipEvent(mouseUp){ pressing = 0; } onClipEvent (enterFrame) { if (pressing) draw () ; }

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:

on (press) { for (clips in _root.controller) { removeMovieClip (_root.controller[clips]); } }

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

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

pom

Discuss in the Forums

Just a final word before we wrap up. What you've seen here is freshly baked content without added preservatives, artificial intelligence, ads, and algorithm-driven doodads. A huge thank you to all of you who buy kirupa's books, became a paid subscriber, watch the videos, and/or interact on the forums.

Your support keeps this site going! 😇