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