Tutorial details:
Written by: Kyle McDonald
Website: www.kylemcdonald.com
Difficulty Level: Advanced Download FLA


INTRODUCTION

I am writing this tutorial because I feel that the current tutorial on actionscript.org which defines how to detect the angle of a mouse relative to an object on the screen is unnecesarily complex. Instead of going through sine tables, I think that it would be much better if you understand how to do two things in a simpler way:

1.) Detect the angle created by the mouse and a movie clip symbol.
2.) Rotate a movie clip symbol about its vertex based on the position of the mouse.

PART 1: Back to the basics: Trigenometry and Algebra

When you are detecting the angle of the mouse relative to an object, what you are really doing is finding the angle (aka "theta") in the triangle created by the x,y position of the mouse, the 0,0 position of the vertex of the movie clip symbol, and the horizontal line that passes through the vertex of the movie clip symbol.



If anybody remembers the pnumatic device "sohcahtoa", then you might remember it means:

sin()=(opposite/hypotenuse)
cos()=(adjacent/hypotenuse)
tan()=(opposite/adjacent)

You can see where "opposite", "adjacent", and "hypostenuse" are by looking at the next picture.



Also, just incase you are wondering, "opposite", "adjacent", and "hypostenuse" are lengths of the sides of the triangle. So, since everyone past about 8th grade knows, it takes a little bit more math to find the hypotenuse, and since we already have the length of the adjacent and opposite sides (the x and y of the mouse relative to the movie clip symbol, in this case the mouse) we can just go ahead and use algebra to manipulate this equation to solve for :

tan()=(opposite/adjacent) is equal to
=inverse-tan(opposite/adjacent) is equal to
=tan^-1(opposite/adjacent) is equal to
=arc-tan(opposite/adjacent)

Really, tan^-1(), arc-tan(), and inverse-tan() are all ways of saying the same thing. Hopefully, this clears it up for you, bcause I know I was confused for a while. Flash uses the term "atan" as the function for arc-tan/inverse-tan/tan^-1. So, now that we have our understanding of the concept and the equation (=arc-tan(opposite/adjacent)), now we can almost start making Flash do the work for us!

PART 2: Stupid Flash Tricks

By now you probably have a good understanding of the trigenometry behind the script we will write, or you just skipped the previous section. Either way, the first thing we need to do is re-define our equation to be used. Like most programming languages, ActionScript computates it's trigenometry functions in Radians. For example, let us say that the mouse is at a 45 degree angle, that means that it is an equal x distance away as it is y distance ((any number / itself)=1). So, the equation we would use to get it's angle is Math.atan(1). Math.atan() is the function with which Flash will do arc-tangent lookups for you. So, to test this out we can make a simple movie with a dynamic text box with the variable name "text", and an actionscript on the frame that says: And then test the movie. But no! Flash seems to have betrayed us and given us the ugly number 0.785398163397448! This is because, like I said, Flash does it's calculations in Radians. So, to convert from Radians to Degrees, you can divide the radians number by a number (/180), (aka pi/180). So, now if we try for the actionscript instead: Then we come up with the answer we were looking for, 45 degrees. Now that we have a good understanding of the way that Flash does geometry, we can finally write some real (more or less) actionscript and actually get the angle dynamically.