PreviousNext

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 allows you to create drawing tools for users and to 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 instance, myClip.lineTo()) or to a 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 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; then select Window > Development Panels > Actions to open the Actions panel if it's not already visible.
  3. In the Actions panel, enter the following code: 
    _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_btn.onRelease = function() {
    _root.clear();
};
  4. Select 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.
PreviousNext