Tutorial details:
Written by: Jesse Stratford
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:

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

Frame 2:

if (_root._xmouse>=200) {
 _level0.animation.nextFrame();
} else {
 _level0.animation.prevFrame();
}
gotoAndPlay (1);

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.