5 Replies Latest reply on Jun 16, 2006 7:25 PM by GhettoFabFlah

# Movement based on Rotation

Hello. I'm having trouble with the movement of a movieclip across the stage. Here's my question:

i have a movieclip that rotates to point towards the mouse, and when the mouse is clicked it moves across the screen in a strait line acording to it's rotation. i guess a way to picture it is an arrow pointing towards the mouse and when it's clicked the mouse speeds off in the direct it's pointing. The hard part is that i need the information on it's _x and _y and all that stuff so i cant just make it a movieclip set to play onMouseDown.

I have a bad feeling that this could be solved with simple trig. but i don't know enough about sine and cosine to know how. Am i even right about this and if so could somebody provide an "answer to my prayers?"
• ###### 1. Re: Movement based on Rotation
if you create your arrow movieclip with its base at stage-center aligned horizontally, ang below gives the _rotation property of your arrow movieclip pointing towards the mouse:

• ###### 2. Movement based on Rotation
No no no, maybe i wasn't clear. I have all of the code for making it rotate, its just that i'm not sure how to make it move according to the rotation in correspondance to the mouse. Like in a strait line, cause the _x and _y += would be completely different for each angle, you know?
• ###### 3. Re: Movement based on Rotation
once you know how to determine the angle to the mouse, the rest is easier:
• ###### 4. Re: Movement based on Rotation
soh-cah-toa!

Draw two points – one is yourclip and one is the mouse.

Now draw a line straight along the x-axis (across the page) starting at one point (we will pretend this is the movieclip) until it is directly under the other point. Next draw a line straight up (or I guess it could be down) to the other point. Finally draw a straight line back to the starting point. You should now have a lovely right triangle.

The long side that doesn't go directly along either the y or the x axis is the path that your movie clip is going to take – it is also the hypotenuse of a right triangle. Which brings me to the opening line:

soh: Sine (of the angle) is Opposite divided by Hypotenuse
cah: Cosine (of the angle) is Adjacent divided by Hypotenuse
toa: Tangent (of the angle) is Opposite divided by Hypotenuse

The angle we are talking about is the angle from the x-axis line to the hypotenuse. The angle next to the starting movieclip point. When we say opposite we mean the edge of the triangle that is away from that angle. And when we say adjacent we mean the side that touches the starting point (but isn't the hypotnuse!) Take a moment and label your drawing.

So let's pretend that the hypotenuse is 1 (one). One what it doesn't matter, mile, inch, lighyear, it is all the same and it is all just 1! So that tells us that the:

Sin(angle)=opposite / 1

But anything divided by one is…wait for it…wait for it…is the thing itself. So:

Sin(angle)=opposite

and its pretty easy to see that:

"Whoppeee!" you say? But opposite and adjacent are just different names for the difference in the y direction and x direction. So this is telling you exactly what you wanted to know. You said "the _x and _y += would be completely different for each angle" and this gives you the proportion for any given angle.

Now make a circle around the center movieclip at the distance of the other point. Remember this is a distance of one–one what it doesn't matter! If you think about moving that pointer all the way around the circle you will see that both the sine and cosine will range between -1 and 1. Interestingly enough the distance of the hypotenuse is always positive one. But since the sin (the y distance) and cos (the x distance) have direction they can be negative or positive depending upon the angle.

So for any given angle the sin tells you the proportion in the y direction and the cos tells you the proportion in the x direction. So if you wanted to move the center movieclip to the unit circle in the direction of angle "a" you would just add sin(a) to the y value and cos(b) to the x value. You don't need to worry about plus or minus because the angle will tell you what needs to be negative and what needs to be positive.

All well and good, but what if the circle (distance) isn't one? So if you want the clip to move a total distance of, oh I don't know, 5 you would do this:

myClip._y+=5*Math.sin(angle);
myClip._x+=5*Math.cos(angle);

Now of course this assumes you already know you just want to move a distance of 5. You will have to do some other calculations to make sure that isn't further than you want to go.

Seems like an awfully long post for a simple question, but trig isn't really that hard and it can really help you with scripting in Flash. Even though I do this all the time I usually have to say my little mnemonic out loud and make myself a little triangle diagram. Eventually it will become second nature.
• ###### 5. Re: Movement based on Rotation
Man, reading that was TOTALLY worth it. I could feel the information that i never thought i would use again come rushing back to me. Probably the most helpful post ever. Not just answered, but EXPLAINED in simple, easy, dumb-person-like-me-that-can't-understand-complex-words language. Anyway yhea that answered my question. Thank ya kindly!