Tutorials
Books
Videos
Forums
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:
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 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.
[ You can draw: click anywhere and drag your cursor! ]
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.
|
There it is, that's all you need to do this drawing board with Flash MX. If you have any question regarding this tutorial, I'll be glad to answer them on the brand new Tutorial Forum.
pom
![0]](http://www.ezboard.com/intl/aenglish/images/emoticons/alien.gif)
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 my books, became a paid subscriber, watch my videos, and/or interact with me on the forums.
Your support keeps this site going! 😇
:: Copyright KIRUPA 2026 //--
