Tuesday, 11 August 2009

Find mouse position in Actionscript 3

This is an update from the previous mouse position tutorial in Actionscript 2.0. In this tutorial you will learn how to find the mouse position of the stage, and the position of a movie clip in Actionscript 3.0. This means that when you move the mouse you will see the x and y positions of the stage, and of the movie clip. The AS3 version is only a little different to the AS2 one. I have created this tutorial in Flash CS4.


Find mouse position in Actionscript 3

Step 1

Open a new Flash AS3 File.
Set an appropriate stage size and whatever background colour you wish. I have used #65FF98 colour, but you can use whatever colour you wish.
Select the text tool with dynamic text and drag four text boxes near the bottom left of the stage like below:



**Make sure your dynamic text boxes are of a reasonable size.


Step 2

Select each dynamic text box in turn and give them the following instance names: xstage_txt, ystage_txt, xmovie_txt and ymovie_txt.



If you are using Flash CS4 you will need to embed the following for each dynamic text box: Uppercase, Lowercase, Numerals and Punctuation.


Step 3

Select the rectangle tool and drag a rectangle shape at the centre of the stage area like below. You can use whatever colour of rectangle you wish.



Convert your rectangle into a movie clip by selecting F8. Make sure you select the top left registration point. Then give the movie clip the following instance name: ‘box_mc’.


Step 4

On the timeline create a new layer called “Actions”. Select the first frame and hit F9 to open up the actions panel and enter the following code:

//1.
stage.addEventListener(MouseEvent.MOUSE_MOVE, mousePosition);

//2.
function mousePosition(event:MouseEvent) {
xstage_txt.text= "X Stage: " + String(mouseX);
ystage_txt.text= "Y Stage: " + String(mouseY);

xmovie_txt.text= "X MovieClip: " + String(box_mc.mouseX);
ymovie_txt.text= "Y MovieClip: " + String(box_mc.mouseY);

}

Code:
1. This adds an event listener to the stage with the mouse move event and the parameter mousePosition.
2. This is the mousePosition function which displays the x and y position on the stage using the mouseX and mouseY properties. The movie clips position is also displayed using the mouseX and mouseY properties of the movie clip.


Step 5

Test your mouse position Ctrl + Enter. Now move your mouse and you should see the relative x and y positions, as well the positions of the move clip. So, the top left position should be (0, 0), and the top left the movie clip should also be (0, 0). If the messages on the dynamic text boxes are flashing or not showing up, try increasing the size of the text box.



You should now be able to find the mouse position in Actionscript 3.0. The source files can be downloaded here.

1 comments:

Aravind 19 February 2010 at 20:54  

It is a very good explanation. I am new to flash and it really helped to understand how to track mouse positions

  COPYRIGHT © 2014 · ILIKE2FLASH · Theme by Ourblogtemplates

Back to TOP