Anatomy of a Whiteboard

1 Star2 Stars3 Stars4 Stars5 Stars (5 votes, average: 4.60 out of 5)
Loading ... Loading ...

If you’re new to SWiSH Max2 and Flash you may not realize it’s possible to dynamically draw objects (lines and shapes) through scripting. Drawing on  the screen opens up new and exciting possibilities for user iteraction with your Flash movies.  This example emulates a whiteboard. If you press the left mouse button and drag the mouse, within the region below, you can draw arbitrary lines.

The source draw.swi file is contained in this .zip file –  draw.zip. The zip file also contains drawrandom.swi, a simple extension that draws with a random color each time a the left mouse button is pressed.

For the sake of simplicity, in draw.swi I have kept the color (red, 0xFF0000) and line width (5) constant. These values can easily be modified by editing the script.

The script uses a mouse listener object to monitor the mouse movements. Although mouse listeners are not described in the SWiSH Max2 documentation, most Flash ActionScript 2 will work within SWiSH Max2.

The draw movieclip contains the Mouse Listener declaration as well as all of the drawing code. That script is shown below:

onSelfEvent (load) {
    // define the mouse listener object
    var mouseListener:Object = new Object();

    // define variables to save previous x,y position and drawing status
    var X0 = 0;
    var Y0 = 0;
    var IsDrawing = false;

    mouseListener.onMouseUp = function () {
        // mouse button has been released, stop drawing.
        IsDrawing = false;
        trace("End Drawing");
    }

    mouseListener.onMouseDown = function () {
        // user has pressed mouse button, note initial position and
        // set to drawing mode
        X0 = _xmouse;
        Y0 = _ymouse;
        IsDrawing = true;    // show that we are now drawing.
        _parent.instructions._visible = false;    // hide the instructions
        trace("IsDrawing");
    }

    mouseListener.onMouseMove = function() {
        // mouse has moved.
        if (IsDrawing) {
            // we are in drawing mode so draw a line
            lineStyle(5, 0xFF0000, 100); // width 5, color red, alpha 100%
            moveTo(X0, Y0); // move to initial x,y co-ordinates
            lineTo(_xmouse, _ymouse);    // draw a line to current position
            X0 = _xmouse;    // save this current position for future draw events
            Y0 = _ymouse;
        }
    }

    Mouse.addListener(mouseListener);    // add this listener script.
}

All of the script resides within the onSelfEvent (load) function for the draw movieclip. This code creates the mouse listener object, defines some variables that are used for the drawing process (X0, Y0 and IsDrawing) and then defines the functions that are to be executed during MouseUp, MouseDown and MouseMove events.

The onMouseUp event simply signifies the end of drawing. When this happens the variable IsDrawing is set to false.

The onMouseDown event signifies the drawing start. The current mouse position is saved in X0, Y0 and IsDrawing is set to true. The text instructions (named ‘instructions’) has its visibility set to false to hide the instructions once drawing commences.

The onMouseMove event is called each time a mouse movement is detected. If not in drawing mode (IsDrawing is false) the function simply returns. Otherwise, lineStyle() is used to set the line width (5), color (0xFF0000 – Red) and alpha (100% – solid), the drawing position is moved to X0,Y0 using moveTo() and a line is then drawn to the current mouse position using  lineTo(). The current mouse position is then saved to X0, Y0 for future drawing operations.

The Mouse.addListener(mouseListener) instruction adds the three functions defined above to the Mouse listener list causing them to be executed on those specific mouse events.

The other objects in the movie are as follows:

  • Shape is simply a static rectangle sized according to the movie to act as a visible boundary.
  • instructions are the text instructions. These instructions are hidden by the onMouseDown function and are re-displayed by the Events function which is called when the Button_clear button is pressed.
  • Button_clear is a button from the supplied components. It is configured to call the Events function in the main movie when it is pressed. Note that the button must be named “Button_clear” in the Outline Panel for the Event script to work.

The script for the Events  function is shown below:

function Events(n,v) {
    if ("Button_clear" == n) {
        draw.clear();
        instructions._visible = true;    // show the instructions
    }
}

This function resides at the level of the main movie. When called, the n parameter contains the name of the calling object, in this case it should always be “Button_clear” as no other object is configured to call the Events function.

If the function was called by Button_clear, the current drawing is cleared via the command draw.clear();

The instructions are also made visible again via the command:
instructions._visible = true;

The source draw.swi file is contained in this .zip file draw.zip. The zip file also contains drawrandom.swi, a simple extension that draws with a random color each time a the left mouse button is pressed. The line width is set according to the distance traveled since the last mouse move. The larger the distance, the thinner the line. The drawrandom.swf is below:

Have fun!

Tags: , , , , ,

One Response to “Anatomy of a Whiteboard”

  1. Richard says:

    Oh that’s cool, Jon, especially the 2nd one. I am an instant artist!


Switch to our mobile site