Help with a whiteboard!

[jerm8352]

Hello, I am making a whiteboard math app.  The program has a whiteboard in the middle and the top and bottom of the program have a bar that will have various buttons and text fields for displaying the question, entering an answer, help, and the person's score.  I have pretty much everything working how I want it except that the "pen" for the whiteboard writes all over the top and bottom bars, buttons, text fields, etc.  How do I stop this?  The top and botttom bars are movie clips named "top" and "bottom" if that helps.

Here is the code:

import flash.display.MovieClip;

import flash.events.MouseEvent;

var lines:MovieClip;

var isMoving:Boolean = false;

var linesColor:Number = 0x000000;

var linesSize:uint = 1;

var equations:Array = new Array;

var equationsAnswers:Array = new Array;

var score:uint = 0;

var questionsAsked:uint = 0;

var answer:String = new String;

equations = ["x + 7 = 13", "x - 8 = 23"];

equationsAnswers = ["6", "31"];

lines = new MovieClip();

stage.addEventListener(MouseEvent.MOUSE_DOWN, startLines);

stage.addEventListener(MouseEvent.MOUSE_MOVE, drawLines);

stage.addEventListener(MouseEvent.MOUSE_UP, stopLines);

checkbtn.addEventListener(MouseEvent.CLICK, newquestion);

stage.addChild(lines);

function startLines(e:MouseEvent) : void {

    isMoving = true;

    lines.graphics.lineStyle(linesSize, linesColor, 1.0);

    lines.graphics.moveTo(mouseX, mouseY);

}

function drawLines(e:MouseEvent):void {

    if (isMoving){

        lines.graphics.lineTo(mouseX, mouseY);

    }

}

function stopLines(e:MouseEvent):void {

    isMoving = false;

}

function newquestion(e:MouseEvent):void {

    answer = inputAnswer.text;

    if (answer == equationsAnswers[questionsAsked]){

        score ++;

    }

    questionsAsked++;

    scoreshow.text = score + ":" + questionsAsked;

    question.text = equations[questionsAsked];

    inputAnswer.text = "";

}

question.text = equations[questionsAsked];

Any help would be very appreciated!

[esdebon]

Ypu can create a MovieClip to get inside the "lines" an the use a mask to show only the "drawable" area

var drawable:MovieClip=new MovieClip();

drawable.addChild(lines);

drawable.mask=maskWhiteboard

(maskWhiteboard is other Movie Clip)

[jerm8352]

Thank you for the reply.  maskWhiteboard is which  other movie clip?  I'm a little confused

[esdebon]

maskWhiteboard is a movieclip that you create with the size and shape of the area where you can draw, excluding your buttons

[jerm8352]

Thank you again.  However, when I do this, it won't draw anywhere.  I put a new movie clip on the stage with an instance name of whiteboardMask.  Then, I put the code, changing it to whiteboardMask instead of maskWhiteboard.  Now, when I test it, it will not draw anywhere.

import flash.display.MovieClip;

import flash.events.MouseEvent;

var lines:MovieClip;

var isMoving:Boolean = false;

var linesColor:Number = 0x000000;

var linesSize:uint = 1;

var equations:Array = new Array;

var equationsAnswers:Array = new Array;

var score:uint = 0;

var questionsAsked:uint = 0;

var answer:String = new String;

var drawable:MovieClip = new MovieClip;

equations = ["x + 7 = 13", "x - 8 = 23"];

equationsAnswers = ["6", "31"];

lines = new MovieClip();

stage.addEventListener(MouseEvent.MOUSE_DOWN, startLines);

stage.addEventListener(MouseEvent.MOUSE_MOVE, drawLines);

stage.addEventListener(MouseEvent.MOUSE_UP, stopLines);

checkbtn.addEventListener(MouseEvent.CLICK, newquestion);

stage.addChild(lines);

drawable.addChild(lines);

drawable.mask=whiteboardMask;

function startLines(e:MouseEvent) : void {

    isMoving = true;

    lines.graphics.lineStyle(linesSize, linesColor, 1.0);

    lines.graphics.moveTo(mouseX, mouseY);

}

function drawLines(e:MouseEvent):void {

    if (isMoving){

        lines.graphics.lineTo(mouseX, mouseY);

    }

}

function stopLines(e:MouseEvent):void {

    isMoving = false;

}

function newquestion(e:MouseEvent):void {

    answer = inputAnswer.text;

    if (answer == equationsAnswers[questionsAsked]){

        score ++;

    }

    questionsAsked++;

    scoreshow.text = score + ":" + questionsAsked;

    question.text = equations[questionsAsked];

    inputAnswer.text = "";

}

question.text = equations[questionsAsked];

Any help would be appreciated.

[esdebon · Accepted solution]

stage.addChild(drawable);

you need add to the stage the Movieclip named drawable

var score:uint=0;

var questionsAsked:uint=0;

var answer:String=new String();

var drawable:MovieClip=new MovieClip();

stage.addChild(drawable);

equations=["x + 7 = 13","x - 8 = 23"];

equationsAnswers=["6","31"];

lines = new MovieClip();

stage.addEventListener(MouseEvent.MOUSE_DOWN, startLines);

stage.addEventListener(MouseEvent.MOUSE_MOVE, drawLines);

stage.addEventListener(MouseEvent.MOUSE_UP, stopLines);

checkbtn.addEventListener(MouseEvent.CLICK, newquestion);

stage.addChild(lines);

drawable.addChild(lines);

drawable.mask=whiteboardMask;

function startLines(e:MouseEvent):void {

    isMoving=true;

    lines.graphics.lineStyle(linesSize, linesColor, 1.0);

    lines.graphics.moveTo(mouseX, mouseY);

}

function drawLines(e:MouseEvent):void {

    if (isMoving) {

        lines.graphics.lineTo(mouseX, mouseY);

    }

}

function stopLines(e:MouseEvent):void {

    isMoving=false;

}

function newquestion(e:MouseEvent):void {

    answer=inputAnswer.text;

    if (answer == equationsAnswers[questionsAsked]) {

        score++;

    }

    questionsAsked++;

    scoreshow.text=score+":"+questionsAsked;

    question.text=equations[questionsAsked];

    inputAnswer.text="";

}

question.text=equations[questionsAsked];

[jerm8352]

thank you, I'm an idiot.

It works perfectly now.

[esdebon]

you're welcome

It's just a detail that went unnoticed

[jerm8352]

Thank you again.  Is there an easy way to erase the entire whiteboard?  to get rid of all the "lines" on the whiteboard?

[esdebon]

lines = new MovieClip();

[jerm8352]

Thank you. WOW again I completely miss the obvious.

[esdebon]

do not worry sometimes happens