In this tutorial I will show you how to make one object follow another object in Flash. Then I'll show you how to make the effect more elastic. It's up to you to figure out an application for it. I use it a lot to get things to follow the mouse around.
The following scripts are written in Actionscript 3.0. However, I've also included a .fla done in Flash 8 in for anyone who wants to see it in Actionscript 2.0. If you just want the files, feel free to jump down and download them now.
We're following the leader!
So first we need to get one object to follow the other object around. Having a two year old son and a dog, I have a lot of experience with things following you. In these examples, the object follows the mouse pointer.
Getting an object to follow the mouse is fairly simple in Flash. In fact, you can just use the startDrag() function, but that sticks the object to the mouse. We'd like it to follow at a distance, so we'll need to make our own function to do that. This function will be an EnterFrame event handler.
Rather than documenting the entire script here, I'll just focus on where the real action is. The full Actionscript files are available for download at the end of the article.
private function FollowMouse(event:Event):void {
// follow the mouse, but not too closely
distx = follower.x - mouseX;
disty = follower.y - mouseY;
follower.x -= distx / 10;
follower.y -= disty / 10;
}
Basically, all we do here is figure out how far away the follower object is from the mouse. Then we move the object a certain amount closer. Here we are moving 10% closer each frame. And here is the resulting mouse following effect.
Mouse Follower
Now add some elasticity
Now that the object is following, let's add a little personality to the effect. I know when my son is following me around, he rarely makes a straight path directly to me, nor is he always able to stop once he's caught up.
Rather than directly moving towards the mouse, we'll use momentum to insert some elasticity to the objects response. This makes it appear that the object is attached to the mouse by a rubber band. And it is surprisingly easy to do.
private function FollowMouse(event:Event):void {
// follow the mouse in a more elastic way
// by using momentum
distx = follower.x - mouseX;
disty = follower.y - mouseY;
momentumx -= distx / 3;
momentumy -= disty / 3;
// dampen the momentum a little
momentumx *= 0.75;
momentumy *= 0.75;
// go get that mouse!
follower.x += momentumx;
follower.y += momentumy;
}
You will notice that we had to dampen the momentum a little. This keeps it from bouncing indefinitely off the screen. The number you use here needs to be between 0.0 and 1.0. Anything else and you'll have flubber that shoots off the screen, never to return.
The closer this value is to 1.0, the faster your object will move and the more it will swing around. The closer it is to 0.0, the slower it will move and the less it will overshoot its target. Experiment with it a bit to get the effect you want. You can also speed or slow the object by changing the number that you divide the distance by when adjusting the momentum.
Elastic Mouse Follower
Follow another object
So now you can follow the mouse. What about when you want to follow something else? That's what makes this script so simple, just replace mouseX and mouseY with the x and y of the object you want to follow and you are set.
distx = follower.x - leader.x; disty = follower.y - leader.y;
Download the fun
- Elastic mouse follower Actionscript 3.0 source files.
- Elastic follower in Flash 8 form (Actionscript 2.0).
Please feel free to leave any comments or questions you may have about this tutorial. That's what the comments are all about.