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 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:

  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.
  4. This sets the line style to a 5-pixel thickness, red (0xFF0000), and fully opaque (an alpha of 100).

  5. 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:
  6. _root._xmouse, _root._ymouse
    
  7. 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.
  8. Your code should now look like the following:

    _root.onMouseDown = function() {
        _root.lineStyle(5, 0xFF0000, 100);
        _root.moveTo(_root._xmouse, _root._ymouse);
        isDrawing = true;
    };
    
  9. 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.
  10. In the Actions panel, click the Actions category, click Conditions/Loops, and then double-click if. In the Conditions text box enter isDrawing == true.
  11. 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:
  12. _root._xmouse, _root._ymouse
    
  13. 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.
  14. 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.
  15. 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.
  16. 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.
  17. 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.
  18. 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.
  19. 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();
    };
    
  20. 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.