MACROMEDIA FLASH MX 2004 - ACTIONSCRIPT - Page 107

Creating interactivity and visual effects 107
Creating a simple line drawing tool
You can use methods of the MovieClip class to draw lines and fills on the Stage as the SWF file
plays. This allows you to create drawing tools for users and to draw shapes in the SWF file in
response to events. The drawing methods are
beginFill(), beginGradientFill(), clear(),
curveTo(), endFill(), lineTo(), lineStyle(), and moveTo(). You can apply these methods
to any movie clip instance (for instance,
myClip.lineTo()) or to a level (_root.curveTo()).
The
lineTo() and curveTo() methods let you draw lines and curves, respectively. You specify a
line color, thickness, and alpha setting for a line or curve with the
lineStyle() method. The
moveTo() drawing method sets the current drawing position to x and y Stage coordinates
you specify.
The
beginFill() and beginGradientFill() methods fill a closed path with a solid or gradient
fill, respectively, and
endFill() applies the fill specified in the last call to beginFill() or
beginGradientFill(). The clear() method erases what’s been drawn in the specified movie
clip object.
For more information, see
MovieClip.beginFill() on page 489,
MovieClip.beginGradientFill() on page 490, MovieClip.clear() on page 493,
MovieClip.curveTo() on page 496, MovieClip.endFill() on page 499,
MovieClip.lineTo() on page 511, MovieClip.lineStyle() on page 510, and
MovieClip.moveTo() on page 516.
To create a simple line drawing tool:
1 In a new document, create a button on the Stage, and enter clear_btn as the instance name in
the Property inspector.
2 Select Frame 1 in the Timeline; then select Window > Development Panels > Actions to open
the Actions panel if it’s not already visible.
3 In the Actions panel, enter the following code:
_root.onMouseDown = function() {
_root.lineStyle(5, 0xFF0000, 100);
_root.moveTo(_root._xmouse, _root._ymouse);
isDrawing = true;
};
_root.onMouseMove = function() {
if (isDrawing == true) {
_root.lineTo(_root._xmouse, _root._ymouse);
updateAfterEvent();
}
};
_root.onMouseUp = function() {
isDrawing = false;
};
clear_btn.onRelease = function() {
_root.clear();
};
4 Select Control > Test Movie to test the movie. Click and drag your mouse to draw a line on the
Stage. Click the button to erase what you’ve drawn.