2 Replies Latest reply on May 29, 2007 11:34 AM by fanderson2

    follow mouse at a point

    fanderson2
      Go to http://www.flashgames247.com/play/599.html and play the first assignment for an example. On this game when you move the mouse the gun points towards the mouse and hence rotates. Can somebody explain how to do this simply (an example in an .fla would be useful), I'm not very experienced with actionscript so please explain in detail. Thanks for posting. Fanderson2
        • 1. Re: follow mouse at a point
          Rothrock Level 5
          There is a wonderful trick in flash called Math.atan2(y,x); that helps with this.

          Imagine that the gun is one point of a right triangle (not the point at the right angle, but one of the other corners. Then imagine that the mouse/target is the other not right angle corner. You can then go along the x axis to the right angle corner and then along the y axis to the target.

          So do you see the imaginary right triangle there? Some times the right angle will be on the right side, sometimes the left. Sometimes the y axis will go up, sometimes it will go down, but between two points you should always be able to visualize a right triangle.

          The next step is we want to find the angle to make the gun rotate. Well that angle is the same angle between the x axis and the line from the gun to the mouse target, right? That is the hypotenuse of that right triangle. See it?

          Well from some basic trig, we reach way back and remember that the tangent of an angle in a right triangle is the opposite side divided by the adjacent side. But what are those?

          Look at your imaginary triangle. (Okay, by this point it might help to sketch it out!) The opposite side is the y portion of your triangle, that is the difference between the y position of the mouse/target and the gun. So something like:

          dy=_ymouse-gun._y;

          I use dy here for "the difference in y." You can guess pretty easy what the adjacent side is? Yup, it is the difference in the x parts, and I will let you work out how to find that yourself.

          So finally the magic. We know that tangent(angle)=opposite / adjacent or in our language:

          tangent(angle) = dy / dx;

          But we don't want the tangent we want the angle. That is where arctangent comes in. In works a tangent backwards and says for this number what angle will give that tangent? This would be great, but the problem with tangent is that there are two numbers that give a given tangent. So you wouldn't know where the target was up and left or down and right.

          Enter magic atan2(dy,dx) this is a need trick that Flash has given us. It tells you the correct angle without you having to worry about which quadrant your angle is really in.

          But there is one more thing in your way. if you put in the code to figure the differences and then add this:

          trace("the angle is: "+atan2(dy,dx));

          You will get numbers that don't seem to make sense. They will be very small. You will have something at, say, 90° by you will see 1.57 or so. That is because atan2 returns the angle in radians. This is just a mathematical way of relating angles to the circumference of a circle. What we would call 360° or all the way around is what radians would call 2̦pi. And 180° is just pi.

          But the _rotation property is given in regular degrees, so we need one last thing to set the rotation of the gun. And that is to convert from radians to degrees. So if there are 180 degrees for every one pi (ummmm pie) the conversion is

          degrees = radians * 180/ Math.PI

          So let's put it all together. Now this is something that you will want to do repeatedly so we should have some way for it to repeat. I'm just going to use an onEnterFrame to make it easy. Now assuming this code is on the main _root timeline. And the gun is also on the main timeline:

          this.onEnterFrame=function(){
          var dx:Number=_xmouse-gun._x;
          var dy:Number=_ymouse-gun._y;
          var angle:Number=Math.atan2(dy,dx);
          gun._rotation=angle*180/Math.PI;
          }

          TADA!

          • 2. Re: follow mouse at a point
            fanderson2 Level 1
            Thank you so much for the info! It has really helped. fanderson2