Movie Clip Follower

This tutorial will teach you how to create a cool animated mouse follower. It’s very easy to change to looks of the follower to fit for your needs!

Note: You need TweenMax in order to complete this tutorial.

Creating the Document

First, create a new Flash ActionScript 3 document.

Document Settings

Set the stage options to the following.

Creating the Background

With the rectangle tool, create a 400×300 sized rectangle without any stroke. Align it to the center of the stage.

Add a radial fill for the rectangle (left color: #00CCFF, right color: #000000)

New Layer for the Follower Movie Clip

Create a new layer named “follower”.

Create the Follower Movie Clip

In the “follower” layer, draw a white cirle without any stroke. Make it size 25×25. Convert the circle to a movie clip with the following settings.

Instance Name

Give the follower movie clip an instance name of “follower”.

Time for the ActionScript 3

Now that we have everything set up on the stage, let’s add some ActionScript to actually make the follower to follow our cursor! Create a new layer called “actions” and type the following.

//Import TweenMax 
import gs.*;
 
//Listen when the mouse moves 
stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoves);
 
//This function is called when the mouse moves 
function mouseMoves(e:Event):void { 
 
 //Tween the follower movie clip to the cursor's coordinates 
 TweenMax.to(follower, 0.5 ,{x :mouseX, y: mouseY});
}

Here we just listen when the mouse moves and when it does, we tween the follower to the cursor’s coordinates. We use TweenMax to make our lives a little easier To add the blurry animation for our mouse follower, type the following code.

//Call the function which tween various properties of the follower 
up();
 
//This function adds more blur and scales the follower 
function up():void { 
 
 //Tween the blur 
 TweenMax.to(follower, 0.5, {blurFilter:{blurX:15, blurY:15}});
 
 //Tween the scale and call the function down() when finished 
 TweenMax.to(follower, 0.5, {scaleX: 1.5, scaleY:1.5, onComplete: down});
} 
 
//This function removes blur and scales the follower 
function down():void { 
 
 //Tween the blur 
 TweenMax.to(follower, 0.5, {blurFilter:{blurX:10, blurY:10}});
 
 //Tween the scale and call the function up() when finished 
 TweenMax.to(follower, 0.5, {scaleX: 0.5, scaleY:0.5, onComplete: up});
 
}

As you can see, all the animation is done in the down() and up() functions. We simply go back and forth between the functions…

Final Words

That’s the end of this tutorial. I hope you enjoyed it and find it useful. Check out the .fla file if you’re still wondering how this works. And you have any questions or trouble, pls post them in the new forum!

Download .fla