ActionScript 3 Trail Effect

February 6, 2009 by: smonte

In this tutorial, you’ll learn how to create a trail effect. The effect is quite easily accomplished and it’s very easy to modify the code to create different trail effects. Let’s get started to create this Flash CS3 movie!

Setting up the environment

1. Create a new Flash ActionScript 3.0 document of size 300×300.

2. Draw a circle of size 30×30 (you can choose the colors as you like).

3. Convert the circle into a movie clip (name doesn’t matter, registration point in the center).

4. Give the ball an instance name of “ball”.

5. Linkage the ball movie clip to a class called “Ball”.

6. Leave the ball on the stage (position doesn’t matter).

Moving into ActionScript 3.0

Type the following in the first frame of your movie.

//Define the starting angle
var angle:Number = 0;
//Define the rotation speed
var speed:Number = 0.2;
//Define the circle's radius
var radius:Number = 50;
 
/* We want the ball to rotate around the center of the stage. We declare variables for the center coordinates, so they don't need to be calculated again in each frame (this saves time from CPU). */
var centerX:Number = stage.stageWidth / 2;
var centerY:Number = stage.stageHeight / 2;
 
//Add ENTER_FRAME to the ball, so we can animate it in each frame
ball.addEventListener (Event.ENTER_FRAME, moveBall);
 
//We use this timer to create a trail ball each 0.1 seconds
var timer:Timer = new Timer(100,400000);
timer.addEventListener (TimerEvent.TIMER, createTrailBall);
timer.start ();
 
//This function is responsible for moving the ball
function moveBall (e:Event):void {
 
        //Calculate the new x and y coordinates
        var xpos:Number = centerX + Math.cos(angle) * radius;
        var ypos:Number = centerY + Math.sin(angle) * radius;
 
        //Move the ball to the new coordinates
        ball.x = xpos;
        ball.y = ypos;
 
        //Increase the angle
        angle += speed;
}
 
function createTrailBall (e:Event):void {
 
        //Create a new ball instance
        var trailBall:Ball=new Ball();
 
        //Position the trail ball in the same position where the original ball is located
        trailBall.x = ball.x;
        trailBall.y = ball.y;
 
        //Add ENTER_FRAME to animate the trail ball
        trailBall.addEventListener (Event.ENTER_FRAME,animateTrailBall);
 
        /* Add the trail ball on to the stage. We don't want to position the trail ball on top of the original ball. We use the addChildAt method to set the index to 0. */
        addChildAt (trailBall,0);
}
 
function animateTrailBall (e:Event):void {
        //In each frame, reduce the alpha and the scale of the trail ball.
        e.target.alpha -= 0.04;
        e.target.scaleY -= 0.04;
        e.target.scaleX -= 0.04;
 
        /* If the alpha is less than 0, we remove the trail ball from the stage. */
        if (e.target.alpha < 0) {
                e.target.removeEventListener (Event.ENTER_FRAME,animateTrailBall);
                removeChild ((MovieClip)(e.target));
        }
}

The code is pretty straightforward. The comments should be informative enough to let you know what we’re doing in each step. As you can see, the values can be easily changed to create different kinds of trail effects. For example, in the following movie, I just changed the timer to create a trail ball every 0.02 seconds.

var timer:Timer = new Timer(20,400000);

That’s it for this ActionScript 3.0 tutorial. Hope you enjoyed it and learned something new! If you have any questions concerning the tutorials, please visit the forum.