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

• 
• 
• 
• 

Related tutorials:

1. Movie Clip Trail Effect
2. Using Filters with ActionScript 3
3. Colorful Mouse Followers with ActionScript 3
4. MovieClip Scroller
5. Mask Animation with ActionScript 3

Filed under: ActionScript 3 Advanced

Comments (10)

Comments

1. APG says:

   October 27, 2009 at 3:52 am

   Wow that’s awesome. Ive always been using like 50 lines of code to do the same thing. Now i don’t have to

   Thanks

   Log in to Reply
2. tutorial blog says:

   October 19, 2009 at 5:04 pm

   very good.

   Thank for share

   Log in to Reply
3. ryan says:

   July 2, 2009 at 7:42 am

   question

   hey love this tut! it there a way for the object to rotate and follow the cursor? I have a fish animation and it needs to turn around when the cursor moves back and forth.

   Log in to Reply
4. aris says:

   May 27, 2009 at 3:32 am

   thanks! finally i got it! cool!!!!!!!1

   Log in to Reply
5. _equ says:

   April 29, 2009 at 9:09 am

   There is ‘yoyo’ property in TweenMax and TweenLite tweens, so you don’t need to write a separate function to bring the animation to th base state.

   TweenMax.to(follower, 0.5, {blurFilter:{blurX:15, blurY:15}, yoyo: 0});

   Log in to Reply
6. Travis says:

   April 23, 2009 at 5:49 pm

   nice tuts..

   Log in to Reply
7. Art says:

   April 19, 2009 at 4:05 pm

   Hi Sara,

   //i downloaded the fla but it’s not workin and appears this errors

   //1172: Definition gs could not be found.
   //1120: Access of undefined property TweenMax.

   All this means is that you need to download the TweenMax plugins. They are free and you can get theme here: http://blog.greensock.com/tweenmaxas3/

   All you need to do is place them where you are publishing, so that the SWF can find them. That should take care of it!

   Log in to Reply
8. sara says:

   April 18, 2009 at 6:15 am

   i downloaded the fla but it’s not workin and appears this errors

   1172: Definition gs could not be found.
   1120: Access of undefined property TweenMax.

   Log in to Reply
   • eg19689 says:

     July 7, 2009 at 1:42 pm

     you need to download TweenMax. Google it.
     Take care

     Log in to Reply
9. samBrown says:

   April 17, 2009 at 10:57 am

   cool tut, thx for the insight.

   Log in to Reply