• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Hour 24. Drawing with ActionScript > Task: Allowing the User to Draw

Task: Allowing the User to Draw

You can use the moveTo and lineTo commands to allow the user to draw on the stage. All you need to do is track the mouse and draw lines from the previous location of the mouse to the current location.

Start a new movie.

Create a simple shape and convert it to a movie clip by choosing Insert, Convert To Movie Clip. Move this movie clip off the stage.

Attach a script to this movie clip. The script starts with a load handler that sets the line style:

onClipEvent (load) {
    // set line style
    _root.lineStyle(0, 0x000000, 100);

When the user presses the mouse button down at any point in the movie, drawing should begin. A variable draw will be set to true. The current location of the mouse will be stored in startX and startY. The drawing point will be moved to this location with moveTo.

onClipEvent(mouseDown) {
    // ok to draw
    draw = true;

    // find start location and move there
    startX = _root._xmouse;
    startY = _root._ymouse;

When the user lifts up on the mouse button, the draw variable will be set to false so that no more drawing takes place.

onClipEvent(mouseUp) {
    // don't draw anymore
    draw = false;

The drawing is done by the enterFrame handler. It draws only when the draw variable is true.

The new location of the mouse is placed in newX and newY. If this is different from startX and startY, the mouse has moved. In that case, a line is drawn between the two points. The values of newX and newY are placed in startX and startY for the next time.

onClipEvent (enterFrame) {
    if (draw) {

        // get current location
        newX = _root._xmouse;
        newY = _root._ymouse;

        // see if location has changed
        if ((newX != startX) or (newY != startY)) {

            // draw line to new location

            // reset location for new time
            startX = newX;
            startY = newY;



Not a subscriber?

Start A Free Trial

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint