Rotating Mouse Trail with ActionScript 3

February 6, 2009 by: smonte

In this tutorial, I’ll show you how to create a mouse trail animation. The whole animation is done with ActionScript 3.0 as usual. You can easily change the code to change the speed, sizes, shapes etc. Start your Flash IDE and let’s get started!

Setting up the environment

1. Create a new document of size 300×300.

2. Draw a rectangle of size 10×10. The color doesn’t matter, since we’ll change that via ActionScript 3.

3. Convert the rectangle into a movie clip. Name it “myRectangle” and set the registration point to the center.

4. Linkage the movie clip to a class named “MyRectangle”.

Linkage rectangle

NOTE: When you hit OK, you get an ActionScript Class Warning. Don’t worry about it. The Flash warns you because it can’t find a class named “MyRectangle”. That’s no wonder, since we haven’t created that class. When we run our movie, Flash will create the MyRectangle class for us.

5. Remove the rectangle from the stage.

Moving into ActionScript 3

Create a new layer for ActionScript and type the following.

//Start a timer. Timer calls the timerHandler every 0.2 seconds.
var timer:Timer = new Timer(200, 0);
timer.addEventListener (TimerEvent.TIMER, timerHandler);
timer.start ();
 
//Get the center coordinates of the stage.
var centerX:Number = stage.stageWidth / 2;
var centerY:Number = stage.stageHeight / 2;
 
//This function is called by the timer.
function timerHandler (e:Event):void {
 
        //Create a new rectangle.
        var newRectangle:MyRectangle = new MyRectangle();
 
        //Set the position to same place as where the mouse cursor is.
        newRectangle.x = mouseX;
        newRectangle.y = mouseY;
 
        //Calculate x and y distances to the rectangle
        //from the center of the stage.
        var dx:Number = newRectangle.x - centerX;
        var dy:Number = newRectangle.y - centerY;
 
        //Calculate the distance to the rectangle from
        //the center of the stage (Pythagorean theorem)
        newRectangle.radius = Math.sqrt(dx*dx + dy*dy);
 
        //Calculate the angle of the rectangle from the center
        newRectangle.myAngle = Math.atan2(dy, dx);
 
        //Set the angle speed (how fast we rotate)
        newRectangle.speed = 0.06;
 
        //At first,set the rectangle to be invisible
        newRectangle.alpha = 0;
 
        //Assign a random scale to the rectangle
        newRectangle.scaleX = Math.random() + 1.5;
        newRectangle.scaleY = newRectangle.scaleX;
 
        // Get access to the ColorTransform instance associated with the rectangle.
        var colorInfo:ColorTransform = newRectangle.transform.colorTransform;
 
        // Set a random color for the ColorTransform object.
        colorInfo.color = 0xffffff * Math.random();
 
        //Apply the random color for the rectangle
        newRectangle.transform.colorTransform = colorInfo;
 
        //Add the rectangle to the stage
        addChild (newRectangle);
 
        //Add ENTER_FRAME to animate the rotation
        newRectangle.addEventListener (Event.ENTER_FRAME, moveRectangle);
}
 
//This function rotates a rectangle
function moveRectangle (e:Event):void {
 
        //Get the rectangle from the event target
        var rectangle:MovieClip = e.target as MovieClip;
 
        //Calculate the new x and y positions for the rectangle
        var newX:Number = centerX + Math.cos(rectangle.myAngle) * rectangle.radius;
        var newY:Number = centerY + Math.sin(rectangle.myAngle) * rectangle.radius;
 
        //Increase the angle for the next frame
        rectangle.myAngle += rectangle.speed;
 
        //Assign the new position
        rectangle.x = newX;
        rectangle.y = newY;
 
        //Decreate the radius to get a "spiral" animation
        rectangle.radius -= 0.6;
 
        //Reduce the scale 
        rectangle.scaleX -= rectangle.radius * 0.0001;
        rectangle.scaleY -= rectangle.radius * 0.0001;
 
        //Increase the alpha if it's not one and radius is larger than 50
        if (rectangle.alpha < 1 && rectangle.radius > 50) {
                rectangle.alpha += 0.05;
        }
        //Start decreasing alpha if radius is smaller than 50
        if (rectangle.radius < 50) {
                rectangle.alpha -= 0.005;
        }
 
        //If radius is smaller than zero, remove the rectangle
        if (rectangle.radius < 0) {
                rectangle.removeEventListener (Event.ENTER_FRAME, moveRectangle);
                removeChild (rectangle);
        }
}
  • Digg
  • Sphinn
  • del.icio.us
  • Mixx

Related tutorials:

  1. Movie Clip Trail Effect
  2. Random Boxes Text Effect with ActionScript 3
  3. Flash Mouse Trailer with Stars
  4. Colorful Mouse Followers with ActionScript 3
  5. Creating a Shake Effect

Comments

2 Responses to “Rotating Mouse Trail with ActionScript 3”
  1. Got tons of impressive information keep it up, keep us posted. thanks

    Log in to Reply
  2. Sohbet says:

    thank you.

    Log in to Reply

Leave a Reply

You must be logged in to post a comment.