User Guide

194 Chapter 6: Creating Interaction with ActionScript
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 lets you create drawing tools for users and 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 example,
myClip.lineTo()) or to a level (_level0.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 the 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 about the methods of the Color class, see the Color class entry in
ActionScript Dictionary Help.<<confirm correct book name -bh>>For more information, see
MovieClip.beginFill(), MovieClip.beginGradientFill(), MovieClip.clear(),
MovieClip.curveTo(), MovieClip.endFill(), MovieClip.lineTo(),
MovieClip.lineStyle(), and MovieClip.moveTo() in ActionScript Language Reference Help.
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.
3. Select Window > Development Panels > Actions to open the Actions panel, if it is not already
visible.
4. In the Actions panel, enter the following code:
this.createEmptyMovieClip("canvas_mc", 999);
var isDrawing:Boolean = false;
//
clear_btn.onRelease = function() {
canvas_mc.clear();
};
//
var mouseListener:Object = new Object();
mouseListener.onMouseDown = function() {
canvas_mc.lineStyle(5, 0xFF0000, 100);
canvas_mc.moveTo(_xmouse, _ymouse);
isDrawing = true;
};
mouseListener.onMouseMove = function() {
if (isDrawing) {
canvas_mc.lineTo(_xmouse, _ymouse);
updateAfterEvent();
}
};