You can use methods of the MovieClip object to draw lines and fills on the Stage as the movie plays. This allows you to create drawing tools for users and to draw shapes in the movie 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 movie 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()
, MovieClip.beginGradientFill()
, MovieClip.clear()
, MovieClip.curveTo()
, MovieClip.endFill()
, MovieClip.lineTo()
, MovieClip.lineStyle()
, and MovieClip.moveTo()
.
To see an interactive demonstration of a drawing tool, click and drag with the mouse to draw a line. Click the Clear Screen button to erase what you've drawn.
simpledraw.swf, width=400, height=280
To create a simple line drawing tool:
onMouseDown
. Enter _root in the Object text box.lineStyle
. Enter _root in the Objects text box. Then enter 5,0xFF0000,100 in the Parameters text box. This sets the line style to a 5-pixel thickness, red (0xFF0000), and fully opaque (an alpha of 100).
moveTo
. Enter _root in the Object text box. Then enter the following code in the Parameters text box:_root._xmouse, _root._ymouse
set variable
and name the variable isDrawing
. Then select the Expression check box for Value and enter true in the Value text box.Your code should now look like the following:
_root.onMouseDown = function() { _root.lineStyle(5, 0xFF0000, 100); _root.moveTo(_root._xmouse, _root._ymouse); isDrawing = true; };
onMouseDown
function and, in the Actions panel, click the Objects category, click Movie, MovieClip, and Events, and then double-click onMouseMove
. Enter _root in the Object text box.if
. In the Conditions text box enter isDrawing == true.lineTo
. Enter _root in the Objects text field. Then enter the following code in the Parameters text box:_root._xmouse, _root._ymouse
updateAfterEvent
. This action will cause the screen to update independently of the movie's frame rate.onMouseMove
function and, in the Actions panel, click the Objects category, click Movie, MovieClip, and Events, and then double-click onMouseUp
. Enter _root
in the Object text box.set variable
and name the variable isDrawing
. Then select the Expression option for Value and enter false in the Value text box.clear_screen
.onRelease
. Enter clear_screen in the Objects text field.clear
. Enter _root
in the Object text box.Your code should now look like the following:
_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_screen.onRelease = function() { _root.clear(); };