2 Replies Latest reply on Apr 15, 2007 5:58 PM by adamlewen

    Drawing by key presses

    adamlewen Level 1
      Good Week All
      I'm trying to delve into some drawing methods, so let me rephrase a question which I posted some time ago:
      Basically what I am trying to do, and failing in, is moving and object (a dot) on the stage with the keyboard arrows (simple enough) but have a line follow the object (so the keys will move the dot, and also draw a line, as if the dot is the pen).

      I was playing around with different code examples, but I cannot get it to work, and I think it might be a code hierarchy thing that I am not aware of, since the drawing code will need to end up on the stage's code (main) and the keys I am using are now on the MovieClip...;

      I am attaching the 2 example codes I am learning from:
      Thanks for any help people!, again I am new at this.
        • 1. Drawing by key presses
          mforsberg
          It's a good start.

          I would keep the key listener events on the ball only have it call back to the drawing clip whenever it's updated. There are several ways to do this, I think the simplest way in this case would be simply to pass the drawclip to the "dot" clip on creating. In other words;

          DotClip.drawReference = Draw;

          from there, you can use DrawReference from the clip events on the "dot" clip. Make an additional function inside Draw looking something like

          Draw.drawLine = function(fromX, fromY, toX, toY) {
          this.lineStyle(2,0x000000,100);
          this.moveTo(fromX,fromY);
          this.lineTo(toX,toY);
          this.endFill();
          }


          now, modify the "dot" clip:

          onClipEvent (enterFrame) {
          // continually looks for the edges of our ball
          ballBounds = this.getBounds(_root);

          // store the current value of the dot before updating values
          var prevX = this._x;
          var prevY = this._y;


          //left arrow key
          if (Key.isDown( 37 )) {
          if (ballBounds.xMin<= 0) {
          this._x = 0 + ballRadius + movement;
          }
          this._x = this._x - movement;
          }
          //right arrow key
          if (Key.isDown( 39 )) {
          if (ballBounds.xMax >= movieWidth) {
          this._x = movieWidth - ballRadius - movement;

          }
          this._x = this._x + movement;
          }
          //up arrow key
          if (Key.isDown( 38 )) {
          if (ballBounds.yMin <= 0) {
          this._y = 0 + ballRadius + movement;
          }
          this._y = this._y - movement;

          }
          //down arrow key
          if (Key.isDown( 40 )) {
          if (ballBounds.yMax >= movieHeight) {
          this._y = movieHeight - ballRadius - movement;
          }
          this._y = this._y + movement;
          }

          // now store the new values
          var newX = this._x;
          var newY = this._y;

          // check to see that we don't draw anything unless the position has been updated
          if(newX!=prevX||newY!=prevY) {
          this.drawReference.drawLine(prevX,prevY,newX,newY);
          }


          }


          This obviously isn't the smoothest way to solve it, you'll probably end up with too many lines being drawn to the screen eating memory and framerate. One solution to that would be having a minimum change in pixels that the dot must've traveled to require a redraw.

          Anyway I hope this helped a bit.

          Sorry about the indentation, I'm new to these forums...
          • 2. Re: Drawing by key presses
            adamlewen Level 1
            Thanks for the reply!
            I have messed around with it for sometime (my problem),
            and your suggestion looks interesting, I hope it'll help.
            It seems that its more complicated than I thought.
            Thanks!
            I'll let you know later
            and thanks for commenting out.