Here we will take advantage of the Drawing API of Flash MX to build the board. We will use two very helpful functions in this tutorial:

• moveTo ()
• lineTo ()
• clear ()

Dynamic Events
They are one of the most important improvements of Flash MX. They allow us to:

• change the way an object behaves on the fly
• control everything from the main timeline

Basically, you can define a function that will determine the behavior of an object, corresponding to a given event. When an object reacts like this to an event, we say that it listens to this event, or that it is a listener.

Note that any object can listen any event. How can we apply this here ?
Let's see which events are likely to happen:

• When you press the mouse, if it's moving, we want to draw

• When the mouse is not pressed, even though it's moving, we don't want to draw

We want that when the mouse button is released, the drawing stops. This is a dynamic event, because the same event (motion of the mouse) can lead to 2 opposite behavior : Drawing or nothing.

Building the board

With the new DrawAPI feature, you don't need anything on the scene to make this work. You will do everything with ActionScript. Start a new movie. In the first frame, enter the code:

Increase the fps a bit and save your work. You should now have a functionning drawing board. Fast, isn't it ? Let's have a look at the code :

_root.createEmptyMovieClip("line",1);
You create an empty movie clip in _root., that you call line on _level1. We need this movie clip because the functions I mentionned are in fact movie clip methods, which means that they apply to movie clips.

_root.onMouseDown = function(){
This is the first dynamic event : when the mouse is pressed. You can notice that _root. listens to this event. It could as well have been a movie clip, or any object.

line.moveTo(_xmouse,_ymouse);
moveTo moves the current drawing position to the coordinates entered as parameters. Here, we bring the drawing position to the current position of the mouse when the mouse is pressed, so that the line starts from the right position. Note that this function applies to line as a movie clip method.

line.lineStyle(2,0x000000,100);
lineStyle specifies a line style that Flash uses when you call to the lineTo and curveTo methods (Flash Help). This means that the parameters you enter will define the style of the line : 2 is the thickness ("0" corresponds to the "hairline" thickness), 0x000000 is the color of the line, in hexadecimal (here it's black), 100 is the alpha.

this.onMouseMove = function(){
Second dynamic event. this. refers to the _root. here. When the mouse moves...

line.lineTo(_xmouse,_ymouse);
... draw a line from the current drawing point to the current position of the mouse. The current drawing position will of course become this last position. Note again that it applies to line as a movie clip method.

updateAfterEvent();
This simply updates the display.

_root.onMouseUp = function(){
this.onMouseMove = null;
}
This is pretty straightforward : When the mouse is up, and moving, nothing happens (notice the key word null). You have tu put null here, or you will keep drawing even though the mouse is not pressed. In other words, if your dynamic event is "do nothing", you have to reset the event, or destroy it, but I heard that this last option is not recommended.

One last thing
To handle the erase button, nothing simpler : put a button on your scene (or a movie clip behaving like a button - check the buttonClip tutorial) and give it the instance name buttonErase. Now add these lines of code at the end of the former code: