PART 3: Detecting the Mouse Angle

Now we have the hard parts behind us, from here on out is me explaining Flash.

1.) Open up flash and make a nice square stage, around 300x300, just to make it easy when you try to visualize things.

2.) Make a new movie clip object with the name "script".

3.) Go back to Scene 1, your main stage, and drag the "object" movie clip onto the stage. (You should see a little circle with a white fill to represent the symbol). If you want, you can turn on the grid and snap to the grid so that you have a centered detector. Make sure you change the grid settings to 15px 15px, though.

4.) Create a text box in the bottom right corner of the stage.

5.) Change the properties of this text box in the "Character" window under the "text Options" set so that it is "Dynamic Text" with the variable "angletext" assigned to it.

6.) Right click on it and select "Actions". Now we are going to write the actionscript that will tell us what the angle of the mouse is. Type this into the actionscript area:

And that is all we have to do. Unless you want to understand this script, you can skip the next portion of this tutorial.

REFERENCE:
1.) onClipEvent (mouseMove) {
2.) x=this._xmouse;
3.) y=this._ymouse*-1;
4.) angle = Math.atan(y/x)/(Math.PI/180);
5.) if(x<0){angle+=180}
6.) if(x>=0&&y<0){angle+=360}
7.) _root.angletext=angle;
8.) updateAfterEvent();}

Line 1: Do the following whenever the mouse is moved.
Line 2: Define the variable "x" to mean the mouse x position relative to the movie clip.
Line 3: Define the variable "y" to mean the mouse y position relative to the movie clip, except reverse the number from + to - or - to + so that the actual angle cartesian coordinates for the mouse are used.
Line 4: Compute the angle of the mouse, and put it into the variable "angle".
Line 5 and 6: If you just take the current variable "angle", the angle that is returned is only good for the first quadrant within which you move the mouse. So, these lines are to fix the number that you get so it is good for all the quadrants.
Line 7: This line allows you to see the final number for the angle of the mouse by placing it into the textbox.
Line 8: Update the screen so you can see the results.

PART 4: Rotating something based on the mouse angle

Right now we have a very useful script, but it is kind of hard to see because there is nothing to show us that flash is doing something for us except that the text box is reporting the mouse angle. So, in this section we will make an arrow that rotates and points to the mouse, similar to the first mouse detection tutorial.

1.) Create a new movie clip symbol called "arrow".

2.) Draw an arrow in this fashion (I edited the grid settings to be 8px by 8px):



3.) Go back to the main stage and drag the arrow symbol into onto the stage. Make sure the vertex of the arrow symbol is aligned with the "script" symbol.

4.) Give the instance name to the symbol "arrow", "arrow". (open the instance window by clicking on the in the bottom right corner of Flash).

5.) Almost done! Click on the script symbol on the stage (the little circle) and open up it's actions. Add to the end, right before UpdateAfterEvent(), the line: 6.) That is all!

If you even took the time to read that last line, hopefully you noticed the *-1 and want to know why that is there. Well, that is actually something else that is weird about Flash. Flash counts 0 as 0, 90 as either -90 or 270, 180 as 180 and 270 as either 90 or -270. Now if you consider the other difference between Flash and Cartesian coordinates, this makes perfect sense, because all Flash does is flip the 4 quadrants along the x axis. Anyway, in the end we have an accurate cartesian reading of the angle of the mouse. In the end your script should look like this: