Creating Interaction with ActionScript > Creating complex interactivity > Creating a simple line drawing tool |
![]() |
Creating a simple line drawing tool
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 beginFill
, beginGradientFill
, clear
, curveTo
, endFill
, lineTo
, lineStyle
, and moveTo
in the ActionScript Dictionary.
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:
1 |
Select frame 1 in the Timeline; then choose Window > Actions to open the Actions panel if it's not already visible. |
2 |
In the Actions toolbox, click the Objects category, then click Movie, MovieClip, and Events, and then double-click |
3 |
To set the line drawing style, in the Actions toolbox, click the Objects category, then click Movie, MovieClip, and Drawing Methods and then double-click |
This sets the line style to a 5-pixel thickness, red (0xFF0000), and fully opaque (an alpha of 100). |
|
4 |
To change the current drawing position, in the Actions panel, click the Objects category, then click Movie, MovieClip, and Drawing Methods and then double-click |
_root._xmouse, _root._ymouse |
|
5 |
In the Actions toolbox, click Actions, Variable, and then double-click |
Your code should now look like the following: |
|
_root.onMouseDown = function() { _root.lineStyle(5, 0xFF0000, 100); _root.moveTo(_root._xmouse, _root._ymouse); isDrawing = true; }; |
|
6 |
Select the last line of the |
7 |
In the Actions panel, click the Actions category, click Conditions/Loops, and then double-click |
8 |
To draw a line from the current drawing position to the current mouse position, in the Actions panel, click the Objects category, then click Movie, MovieClip, and Drawing Methods and then double-click |
_root._xmouse, _root._ymouse |
|
9 |
In the Actions panel, click the Actions category, then click Movie Clip Control and then double-click |
10 |
To stop the line from being drawn, select the last line of the |
11 |
In the Actions panel, click the Actions category, Variables, and then double-click |
12 |
To create a button that will clear the screen of lines drawn by the user, add a button to the Stage and name it |
13 |
Select frame 1 in the Timeline and, in the Actions toolbox, click the Objects category, then click Movie, Button, Events, and then double-click |
14 |
In the Actions toolbox, click the Objects category, then click Movie, MovieClip, Drawing Methods and then double-click |
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(); }; |
|
15 |
Choose 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. |
![]() |