11 Replies Latest reply: Jun 27, 2012 3:52 PM by esdebon RSS

    Help with a whiteboard!

    jerm8352 Community Member

      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!

        • 1. Re: Help with a whiteboard!
          esdebon Community Member

          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)

          • 2. Re: Help with a whiteboard!
            jerm8352 Community Member

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

            • 3. Re: Help with a whiteboard!
              esdebon Community Member

              mask.jpg

               

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

              • 4. Re: Help with a whiteboard!
                jerm8352 Community Member

                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.

                • 5. Re: Help with a whiteboard!
                  esdebon Community Member

                  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];

                  • 6. Re: Help with a whiteboard!
                    jerm8352 Community Member

                    thank you, I'm an idiot.

                     

                    It works perfectly now.

                    • 7. Re: Help with a whiteboard!
                      esdebon Community Member
                      you're welcome

                       

                       

                      It's just a detail that went unnoticed

                      • 8. Re: Help with a whiteboard!
                        jerm8352 Community Member

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

                        • 9. Re: Help with a whiteboard!
                          esdebon Community Member

                          lines = new MovieClip();

                          • 10. Re: Help with a whiteboard!
                            jerm8352 Community Member

                            Thank you. WOW again I completely miss the obvious.

                            • 11. Re: Help with a whiteboard!
                              esdebon Community Member

                              do not worry sometimes happens