How to Make an Arrow Point at the Mouse in AS3

Difficulty: Easy


Skills Used: trigonometry, mouse location, dynamic textboxes

A simple movie clip where the rotation of the arrow is based on the mouse's location. Good introduction to using trigonometry in Actionscript 3.0.

Instructions:
1. Open up a new file in Flash. Make sure you are using Actionscript 3.0. I made my stage 300x300 pixels.

2. In the top menu, select Insert -> New Symbol. Name the symbol "arrow". Draw an arrow pointing straight up. Then drag the arrow so that it's registration point (that's the little cross that always stays in place no matter where you put the arrow) is at bottom center of your arrow. The registration point determines how the arrow will rotate, so this is important.

3. In the upperleft corner where it says "Scene 1 arrow" click on "Scene 1". This brings you back to the mainframe of the movie. Drag the arrow symbol from the library to the stage, center it and keep it close to the top of the stage. Rename the current layer in the timeline "arrow".

4. Create a new layer in the timeline and name it "Actions". Open up the actions window and paste the following code:

addEventListener(Event.ENTER_FRAME, rotate);

function rotate(e:Event)
{
var x:int = mouseX - myArrow.x;
var y:int = mouseY - myArrow.y;

var angle:int = Math.atan(y/x)/(Math.PI/180); //finds the arc tan of x/y, then converts it to degrees

if (x<0)
{
angle += 180;
}

myArrow.rotation = angle + 90;
}

This creates an event which will update the arrow's location every time the movie enters a new frame. It calculates the arctan of y/x, then converts that number from radians to degrees. Arctan is always positive, which means if we didn't modify the angle it would always point to the right. The if statement determines if the arrow should be pointing to the right. Finally, we add 90 degrees to the angle calculated because otherwise the arrow would be at an angle to the mouse.

Test your movie, the arrow should be pointing to the mouse at all times.

5. (Optional) If you want to see the degree of the angle of your arrow, which could help you modify the code later on, then you can add a dynamic text box that shows the current angle. Create a new layer in the timeline called "text". Use the text tool to draw a text field box on the stage. Center the textfield.

In the properties inspector, name the instance of this textbox "myAngle". Make sure it is set to "classic text", not "TLF" text. Make sure it is "dynamic", not "static" or "input". In the "Character" menu, click the button that says "Embed.." and a menu will pop up. In the "Character ranges" list, select "Numerals 0-9", then hit OK. (It's important to always embed your text, otherwise the text could disappear at inconvenient times.) Back in the properties inspector, under the "Paragraph" menu, set the format to centered.

Select the "Actions" layer and open up the Actions window again. Inside of the "rotate" function, add one last line of code:

myAngle.text = String(myArrow.rotation);

You're done! Test your movie and make sure the textbox is displaying the angle correctly.


Final Code:

addEventListener(Event.ENTER_FRAME, rotate);

function rotate(e:Event)
{
var x:int = mouseX - myArrow.x;
var y:int = mouseY - myArrow.y;

var angle:int = Math.atan(y/x)/(Math.PI/180); //finds the arc tan of x/y, then converts it to degrees

if (x<0)
{
angle += 180;
}

myArrow.rotation = angle + 90;

myAngle.text = String(myArrow.rotation);
}