 |
| Advertisement |
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:
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.
.png)
0 comments: