Rotation

Here is the challenge: You want to rotate a movie clip so that it always points to the mouse. This is a very useful tool to add to your toolbox. It can be used in games , mouse trailers , those eyes that follow the mouse around the screen, interface elements, and so on. In fact, rotation is not just limited to the mouse. Since the mouse coordinates are just x and y values, you can extend this technique to force a movie clip to point to any particular point, such as another movie clip or the center or corner of the screen.

Lets work through an example. You can follow along with the steps or just open rotate_to_mouse.fla (which you can download from www.friendsofed.com, along with all of the other code for this book), to have all the work done for you.

First, you need a movie clip. Make an arrow and convert it to a movie clip symbol with the name arrow , as shown in Figure 3-15. Keep the registration point in the center, as this is the point it will rotate around. The most important thing to remember when drawing your symbol is to make sure that it is pointing to the right, or positive x axis, because this is how it will look when rotated to 0 degrees.

Figure 3-15: Making the arrow symbol

Keep an instance of this movie clip in the center of the stage and name it arrow . Then deselect it or click frame 1 on the timeline and open the Actions panel. You dont want to put code on the symbol itself, which would require clip events; you want the code to go on the timeline. Figure 3-16 shows what you will be doing.

Figure 3-16: Computing the rotation

Look familiar? Its the same triangle youve been dealing with for a while now, just mapped to the mouse and arrow coordinates. The mouse position can always be read with the _xmouse and _ymouse properties. You can get the location of the arrow with its _x and _y properties. Subtracting these, you get the length of the two triangle legs. Now, you simply need to use Math.atan2(dy, dx) to find the angle. Then convert it to degrees and set the arrows _rotation property to the result. It will look like this:

 var dx = _xmouse - arrow._x; var dy = _ymouse - arrow._y; var radians = Math.atan2(dy, dx); arrow._rotation = radians * 180 / Math.PI; 

Of course, to get animation, you need to set up a loop. As discussed in detail in the previous chapter, event handlers are your best bet. You have two choices: onEnterFrame or onMouseMove . Either one will work. Lets go with onEnterFrame :

 onEnterFrame = function(){    var dx = _xmouse - arrow._x;    var dy = _ymouse - arrow._y;    var radians = Math.atan2(dy, dx);    arrow._rotation = radians * 180 / Math.PI; } 

Test it. What do you know? It works like a charm !

Now, suppose that you didnt have Math.atan2 . You could get the ratio of opposite to adjacent by dividing dy by dx and pass that in to Math.atan . All you need to do is change the fourth line in the preceding code as follows :

 var radians = Math.atan(dy / dx); 

Try that one, and youll see the problem pretty quickly. If the mouse is to the left of the arrow, the arrow will not point to it, but directly away from it. Can you figure out what is going on? Going back to the diagram showing triangles A, B, C, and D (Figure 3-13), remember that triangles A and C share the same ratio, as do triangles B and D. There is no way for Flash to know which angle you are referring to, so it simply gives you A or B. So, if your mouse is in the D quadrant, Flash is going to return the angle for the B quadrant and rotate the mouse into that area.

You can no doubt see the benefits of Math.atan2 now. Youll be using it many times throughout the book.