9 Replies Latest reply on Dec 23, 2006 4:23 PM by Newsgroup_User

    Line Drawing

    DJ_Sick_Nick
      How do you draw a line on the stage when the mouse is pressed and when the mouse is released it ends the line? Also, is it possable to determin the speed of the mouse when the line is being drawn, then trace it in the output pannel? Thanks in Advance!

      -Nick D.
        • 1. Re: Line Drawing
          Level 7
          To draw, basically is used the events of Mouse Class e lineTo method.
          In the example I stored the drawing in the mcDraw mc to facilitate the
          manipulation.


          var thickness:Number = 3;
          var lineColor:Number = 0x0000FF;
          var lineAlpha:Number = 100;
          var drawing:Boolean = false;

          this.createEmptyMovieClip("mcDraw", this.getNextHighestDepth());
          var mouseListener:Object = new Object();
          mouseListener.onMouseDown = function()
          {
          drawing = true;
          mcDraw.lineStyle(thickness, lineColor, lineAlpha);
          mcDraw.moveTo(_xmouse, _ymouse);
          };
          mouseListener.onMouseMove = function()
          {
          if(drawing) mcDraw.lineTo(_xmouse, _ymouse);
          };
          mouseListener.onMouseUp = function(){drawing = false;};
          Mouse.addListener(mouseListener);


          --
          Regards,
          Erick Souza
          www.ericksouza.com
          • 2. Re: Line Drawing
            kglad Adobe Community Professional & MVP
            and yes, you can display the mouse speed. use getTimer() in your onMouseDown handler to define the startTime and store the mouse start position and initialize the distance the mouse has traveled.

            then update the duration (using getTimer() again) of drawing in your onMouseMove and also in your onMouseMove handler increment the distance the mouse has moved and reset the mouse start position with the current position.
            • 3. Re: Line Drawing
              DJ_Sick_Nick Level 1
              Thanks for the reply! It works great, but now all that i need to know is how to delete the line. All that I really need is a simple code. I have a timer script ready for 1 second, and I just want the line to delete after that second. Also, do you know how to tell what speed the mouse is being flicked?
              • 4. Re: Line Drawing
                DJ_Sick_Nick Level 1
                Sorry. I didnt see your post, Kglad. I dont know how to construct that syntax. I'll give it a try while I wait for a response, but I might not get it. Please tell me how to do that...
                • 5. Re: Line Drawing
                  Level 7
                  I had modified the code and send the old script.

                  The speed is calculated in the code below, basically the calculation is:
                  distance / time.


                  var propLine = {thickness: 3, color: 0x0000FF, alpha: 100};
                  var drawing:Boolean = false;

                  var elapsedTime:Number, speed:Number;
                  var times:Object = new Object();
                  var coord:Object = new Object();

                  this.createEmptyMovieClip("mcDraw", this.getNextHighestDepth());
                  var mouseListener:Object = new Object();
                  mouseListener.onMouseDown = function()
                  {
                  drawing = true;
                  mcDraw.lineStyle(propLine.thickness, propLine.color, propLine.alpha);
                  mcDraw.moveTo(_xmouse, _ymouse);

                  times.o = getTimer();
                  coord.oX = _xmouse; coord.oY = _ymouse;
                  };

                  mouseListener.onMouseMove = function()
                  {
                  if(drawing) mcDraw.lineTo(_xmouse,_ymouse);
                  };

                  mouseListener.onMouseUp = function()
                  {
                  drawing = false;

                  times.n = getTimer();
                  coord.nX = _xmouse; coord.nY = _ymouse;

                  distance = Math.sqrt(Math.pow(coord.nX - coord.oX, 2) +
                  Math.pow(coord.nY - coord.oY, 2));
                  elapsedTime = times.n - times.o;

                  speed = Math.floor((distance / elapsedTime) * 20);

                  trace(speed);
                  };
                  Mouse.addListener(mouseListener);


                  --
                  Regards,
                  Erick Souza
                  www.ericksouza.com
                  • 6. Re: Line Drawing
                    Level 7
                    If you prefer, in the script below the speed is calculated all the time
                    and separate from the drawing code.


                    var propLine = {thickness: 3, color: 0x0000FF, alpha: 100};
                    var drawing:Boolean = false;

                    var elapsedTime:Number, speed:Number;
                    var times:Object = new Object();
                    var coord:Object = new Object();

                    this.createEmptyMovieClip("mcDraw", this.getNextHighestDepth());
                    var mouseListener:Object = new Object();
                    mouseListener.onMouseDown = function()
                    {
                    drawing = true;
                    mcDraw.lineStyle(propLine.thickness, propLine.color, propLine.alpha);
                    mcDraw.moveTo(_xmouse, _ymouse);
                    };

                    mouseListener.onMouseMove = function()
                    {
                    if(drawing) mcDraw.lineTo(_xmouse,_ymouse);
                    };

                    mouseListener.onMouseUp = function()
                    {
                    drawing = false;
                    };
                    Mouse.addListener(mouseListener);


                    //Mouse Speed
                    function showSpeed():Void
                    {
                    times.n = getTimer();
                    coord.nX = _xmouse; coord.nY = _ymouse;

                    distance = Math.sqrt(Math.pow(coord.nX - coord.oX, 2) +
                    Math.pow(coord.nY - coord.oY, 2));
                    elapsedTime = times.n - times.o;

                    speed = Math.floor((distance / elapsedTime) * 20);

                    trace(speed); //display: mouse speed

                    times.o = getTimer();
                    coord.oX = _xmouse; coord.oY = _ymouse;
                    };

                    setInterval(showSpeed, 50);


                    --
                    Regards,
                    Erick Souza
                    www.ericksouza.com
                    • 7. Re: Line Drawing
                      kglad Adobe Community Professional & MVP
                      try both or all three sets of code to see what suits your needs, but i think the following has something to offer. if you want to draw more than one line, update the depth of the holder movieclip:



                      • 8. Re: Line Drawing
                        kglad Adobe Community Professional & MVP
                        try both or all three sets of code to see what suits your needs, but i think the following has something to offer. if you want more than one line on-stage at any one time, update the depth of the holder movieclip so the lines are not replacing each other:


                        • 9. Re: Line Drawing
                          Level 7
                          Some optimizations (I like to test more elegant means) :simile:


                          var propLine = {thickness: 3, color: 0x0000FF, alpha: 100};
                          var drawing:Boolean = false;

                          var elapsedTime:Number, speed:Number, oldTimes:Number, iSpeed:Number;
                          var coord:Object = new Object();

                          this.createEmptyMovieClip("mcDraw", this.getNextHighestDepth());

                          var mouseListener:Object = new Object();
                          mouseListener.onMouseDown = function()
                          {
                          drawing = true;
                          mcDraw.lineStyle(propLine.thickness, propLine.color, propLine.alpha);
                          mcDraw.moveTo(_xmouse, _ymouse);
                          };

                          mouseListener.onMouseMove = function()
                          {
                          if(drawing)
                          {
                          mcDraw.lineTo(_xmouse,_ymouse);
                          updateAfterEvent();
                          trace("Speed: " + showSpeed());
                          };
                          };

                          mouseListener.onMouseUp = function()
                          {
                          drawing = false;
                          };
                          Mouse.addListener(mouseListener);


                          function showSpeed():Number
                          {
                          distance = Math.sqrt(Math.pow(_xmouse - coord.oldX, 2) +
                          Math.pow(_ymouse - coord.oldY, 2));
                          elapsedTime = (getTimer() / 100) - oldTimes;
                          speed = Math.floor(distance / elapsedTime);

                          oldTimes = getTimer() / 100;
                          coord.oldX = _xmouse; coord.oldY = _ymouse;

                          return speed;
                          };


                          --
                          Regards,
                          Erick Souza | ericksouza.com