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 that 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.

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 > 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();
        }
    };
    mouseListener.onMouseUp = function() {
        isDrawing = false;
    };
    Mouse.addListener(mouseListener);
    
  5. Select Control > Test Movie to test the document.
  6. Drag your pointer to draw a line on the Stage.
  7. Click the button to erase what you've drawn.