Friday, 2 January 2009

Position of mouse

This Flash tutorial will teach you how to display the x and y position of the mouse, so when you move your mouse on the stage it keeps track of the position and updates as you move. This tutorial uses the _xmouse and _xmouse properties to return the x and y coordinates of the mouse position.

Finding the mouse position on the stage is rather simple you could just enter the code below, but this has a problem. It only shows the position of the mouse from when you first start the movie, and does not keep track of the position as you move the mouse.

trace("Mouse X: " + _xmouse);
trace("Mouse Y: " + _ymouse);

To overcome this problem I will be using dynamic text fields to display the x and y position of the mouse. I have used an Actionscript 2.0 file and also a custom cursor for this tutorial.


Position of mouse

Step 1

Create a new flash document and set the stage size to whatever dimensions you wish. I used 250 x 200 pixels and #66CCFF background.


Step 2

Select the text tool (T) with dynamic text and drag two rectangle shapes on the stage like below:



And beside the dynamic text fields, select static text tool and type: “x” and “y”.


Step 3

Select each of the dynamic text field in turn using the selection tool and give them the instances names: xmouse_txt and ymouse_txt respectively.




Step 4

On the timeline create a new layer called Actions and right click on the 1st frame and select Actions and enter the following code:

1. onMouseMove = function() {

2. xmouse_txt.text = _root._xmouse;
3. ymouse_txt.text = _root._ymouse;

4. updateAfterEvent();
5. }

**Line 1: The mouseMove function detects when the mouse moves.

Line 2-3: This uses x and y mouse properties to display the coordinates of the mouse position in the dynamic text fields.

Line 4: The updateAfterEvent function update the movie by continually refreshing the stage which makes the cursor appear smooth on the screen.


You could alternatively use the following code, which does exactly the same. The onEnterFrame event executes repeatedly, so the updateAfterEvent() is not needed.
onEnterFrame = function(){
xmouse_txt.text = _root._xmouse;
ymouse_txt.text = _root._ymouse;
}

Step 5

Test your movie Ctrl + enter. Now move you mouse across the stage and the coordinate of the mouse should appear. Note the size of the stage 250 x 200, so effectively the top left of the movie should be (0, 0) and the bottom right should be (250, 200).



You should now have the position of the mouse. Feel free to contact me for any questions or comments.

3 comments:

angie 2 January 2009 at 13:32  

when i play the flash, i found that the start X, Y is not (0,0), both is negative value...

what had cause my flash wrong? but i'd followed the exact same code, should be come out the same result...

iliketo 2 January 2009 at 16:04  

@Angie

The code is correct. It depends on the position of your mouse cursor. If your cursor is at the top left, then the value should be (0,0).

I think you are getting negative values because you are maximizing the actual movie window.

NARAYANAN 3 January 2009 at 10:59  

i should ve seen this site a long back..its good dear!!

  COPYRIGHT © 2014 · ILIKE2FLASH · Theme by Ourblogtemplates

Back to TOP