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 `onMouseDown`. Enter _root in the Object text box.
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 `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).
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 `moveTo`. Enter _root in the Object text box. Then enter the following code in the Parameters text box:
    _root._xmouse, _root._ymouse
5 | In the Actions toolbox, click Actions, Variable, and then double-click `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;
    };
6 | Select the last line of the `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.
7 | In the Actions panel, click the Actions category, click Conditions/Loops, and then double-click `if`. In the Conditions text box enter isDrawing == true.
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 `lineTo`. Enter _root in the Objects text field. Then enter the following code in the Parameters text box:
    _root._xmouse, _root._ymouse
9 | In the Actions panel, click the Actions category, then click Movie Clip Control and then double-click `updateAfterEvent`. This action will cause the screen to update independently of the movie's frame rate.
10 | To stop the line from being drawn, select the last line of the `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.
11 | In the Actions panel, click the Actions category, Variables, and then double-click `set variable` and name the variable `isDrawing`. Then select the Expression option for Value and enter false in the Value text box.
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 `clear_screen`.
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 `onRelease`. Enter clear_screen in the Objects text field.
14 | In the Actions toolbox, click the Objects category, then click Movie, MovieClip, Drawing Methods and then double-click `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();
    };
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.