Tutorial details:
Written by: Jesse Stratford [email:jessestratford@actionscript.org]
Time: 25 minutes
Difficulty Level: Intermediate
Requirements: Flash 4 or 5.
Topics Covered: _xmouse, _ymouse, looping MCs.
Assumed knowledge: Instances, Paths, Get Property and Set Property. (See the relevant tutorials, linked in "Related Articles" at the end of this tutorial)

Download the source for the above movie here. (Zipped, PC Flash 5 file).

Welcome one and all to the Object Movement Relative to Mouse Position tutorial (wow, is that a mouthful!?). Here we will discuss how to alter the position of objects based on what a user does with their mouse. Note that this tutorial deals with positions only but any smart operator could easily convert the source provided to adapt any property mentioned in the Set Property tutorial. Also note that that this tutorial uses Flash 5 source. While all these effects are doable in Flash 4, I move with the times and Flash 5 makes them a lot easier. If you're using Flash 4 you're going to have to: make a draggable movie clip which has no content (so it doesn't obscure the movie's content) and replace all references to _xmouse and _ymouse with Get Property (see the relevant tutorial) calls to the _x and _y of the draggable clip attached to your mouse.

Now off we go! We're going to start simply so let's first look (briefly) at the most simple form of this: the motion tween form.

Grab the source here if you want it. You don't need it for this one.

This example is made using a standard motion tween. Don't make this one, it's a waste of time, it's just for learning purposes. I made a Movie Clip and then inserted a 40 frame, left to right motion tween of my little blue circle, placing it on the stage I named it 'animation'. Then, I make a 2 frame movie clip and insert the following code:

Frame 1:

[as]if (_root._xmouse>=200) {
_level0.animation.nextFrame();
} else {
_level0.animation.prevFrame();
}[/as]

Frame 2:

[as]if (_root._xmouse>=200) {
_level0.animation.nextFrame();
} else {
_level0.animation.prevFrame();
}
gotoAndPlay (1);[/as]
So both frames have the same code, except frame 2 has a loop back to frame 1. Thus this clip will play forever. And what does it do? First it checks if the mouse is on the right hand side of the screen, (is the _x position greater than half the width of the movie?), if so it moves the animation forward one frame, so that the circle moves a bit to the right.

This is great for beginners but it has many limitations. For starters it will keep moving left or right, past where my mouse sits. Also it will stop when it reaches the bounds of the animation. It's also a bit buggy. Like I say, just an example, let's move on to the real thing.

Grab the source here. Once again this is just a sample, so you don't really need to download this one, but you need t o read how it works below.
This version is completely Actionscript based and more practical. Instead of an animated clip on the stage I have just one movie clip with 1 frame and an instance name of 'circle'. Once again I have the controller clip with two frames, although the code is slightly different this time.

[as]if (_root._xmouse>=200) {
_level0.circle._x = (_level0.circle._x+10);
} else {
_level0.circle._x = (_level0.circle._x-10);
}[/as]

We're still using the same conditional statement which checks if the mouse position on the X axis is greater than half the width of the movie, (is the mouse in the right hand side of the movie in other-words), however now we're using setProperty to tween the circle along the X axis. Rather than moving an animation of a tween forward or backwards frame by frame, we take the current X position ( _level0.circle._x ) and add or subtract 10 pixels to it. Frame 2 has the same code, but with a gotoAndPlay (1); as before, to loop back to frame 1.

This one is nicer but it still has problems. For instance, observe that the circle can move outside the bounds of the movie clip, and as before, if you stop moving your mouse it keeps moving past your mouse because your mouse is still on the right or left side of the movie. We'll fix that in the next example.

Now it's time to bring out the big guns. I'm sick of my circle deliberately misconstruing my commands. I say 'come here' and it comes, but then it keeps moving! It's time to teach that circle some manners. No circle should walk before it's Master Mouse!

You really should download the source for this one.
At last! A well mannered circle animation! Now I can sleep at night.

Seriously though, doesn't it look better when the circle stops moving next to the mouse? Wouldn't you like to make that happen to? You can, and it's easy peasy. The structure for this example is exactly as before, with a movie clip with one frame and an instance name, on the main scene in frame 1. Our controller clip is there too, only it's commands are slightly different now:

Controller clip - Frame 1:

[as]if (_root._xmouse>_level0.circle._x) {
_level0.circle._x = (_level0.circle._x+10);
} else {
_level0.circle._x = (_level0.circle._x-10);
}[/as]

(As always, Frame 2 has the gotoAndPlay for looping purposes.)

Now, the setPeoperty bit here, where we add 10 pixels to the current X position is just the same as the previous example. What we have changed is the conditional clause. Before we were moving the circle depending on which hemisphere of the movie the mouse was in (left or right side). Now we've changed our tune and we only want to move the circle if it's X position is different to that of the mouse. This is shown by: if (_root._xmouse > _level0.circle._x) which translates loosely in English into: "If the _x position of the mouse is greater than the X position of the circle, then do the following action". The action which follows is of course to move the circle until the X positions are no longer different.

These examples have all dealt with the _x (X position) only, but _y is just a easily manipulated. Our very first example showed this:

Now the circle desperately chases our mouse in both directions (vertically (y direction) and horizontally (x direction) and all I did was change the controller commands to:

[as]if (_root._xmouse>_level0.circle._x) {
_level0.circle._x = (_level0.circle._x+10);
} else {
_level0.circle._x = (_level0.circle._x-10);
}
if (_root._ymouse>_level0.circle._y) {
_level0.circle._y = (_level0.circle._y+10);
} else {
_level0.circle._y = (_level0.circle._y-10);
}[/as]

ie. Exactly the same as the previous example, but with a duplicate cause for _y which is just the _x clause where every "_x" has been replaced by a "_y".

Good huh? And easy too no less. Many of you will want to replicate the original Yugop effect in which the further from the center of the stage you go in any direction, the faster the movie moves. This is very simply done by adapting the source above. Remember that faster movement is achieved by simply increasing the number of pixels added to or subtracted from the _x or _y property of the clip. I'll let you figure that much out yourself though. You've got to start somewhere! If you havea ny questions please post them on the forums rather than emailing me directly.

Jesse Stratford [email:jessestratford@actionscript.org] is the Co-Master of ActionScript.org and a freelance Flash developer and teacher. He is based in Australia and enjoys all things Flash. NB: If you have comments or feedback please feel free to email me, but please do not email me Flash questions; the forums are provided for that purpose and you will get a faster answer by posting you question there.

If you have found this tutorial helpful, I hope that you will take 30 seconds to visit The Hunger Site where, with just one click you can make a free donation of food to a starving person in a third-world country. We do not benefit financially from this action; it is purely an act of charity.

This tutorial is protected by International Intellectual Property Rights laws and may not be reproduced or redistributed in full or part, without the prior written consent of the author. Unauthorized reproduction of this tutorial or its contents may result in prosecution. I've worked hard on this tutorial, please don't steal it.