Create a Glowing Mouse Trailer in Flash

Mouse Trailers are objects which follow the mouse cursor as you move it. In this tutorial, I’ll help you create a blue and shiny mouse trailer using ActionScript 3.0.

Final Result Preview

Let’s take a look at the final result we will be working towards:

Step 1: Brief Overview

Using ActionScript we’ll duplicate a MovieClip then modify its alpha, scale, and position properties to get a nice trailer effect.

Step 2: Starting

Open Flash and create a new Flash File (ActionScript 3).

Set the stage size to your desired resolution and add a background color. I’ve used 600×300 in size and added a blue radial gradient (#4584D4, #184D8F). Also, I added a black rectangle with 60% alpha and text to display an instructional message. Let’s take a look at the image.

Step 3: Creating the Main Shape

This trailer is composed of one simple shape which is duplicated and scaled when you move the mouse.

Select the Oval Tool, draw a 6×6 px circle and fill it with a radial gradient (#FFFFFF, #5CFAFF).

Convert this shape to a MovieClip add a Glow filter, use the values in the following image:

Convert this to a MovieClip and name it "LightBall", remember to check the "Export for ActionScript" option.

Step 4: ActionScript

Create a new ActionScript File (Command + N) and save it as "MouseTrailer.as"

Step 5: Import Necessary Classes

These are the classes we’ll need, if you need specific help with any of them please check the Flash help (F1).

package 
{
	import flash.display.Sprite;
	import flash.ui.Mouse;
	import flash.events.MouseEvent;
	import flash.events.Event;

Step 6: Mouse Trailer Class

We extend the Sprite Class to access the addChild() method. Remember that the name of the class has to be the same as the file name.

public class MouseTrailer extends Sprite
{

Step 7: Variables

There’s only one variable in this class, the LightBall variable. This is used to create a new instance of the LightBall that we created in the Fla.

var lightBall:LightBall;

Step 8: Constructor

In the constructor function we’ll add the lines that hide the Mouse cursor and the Listener that will start the Trailer.

public function MouseTrailer():void
{
	Mouse.hide();
	stage.addEventListener(MouseEvent.MOUSE_MOVE, startTrailer);
}

Step 9: Start Trailer Function

This function will handle the trailer, setting its properties.

private function startTrailer(e:MouseEvent):void
{

Step 10: Duplicating the LightBall

This code creates a new LightBall when the mouse is moved.

/* Create a new LightBall object */ 
 
lightBall = new LightBall();

Step 11: Position

The new LightBall position is based on the width and height of the clip and the position of the Mouse cursor.

/* Position */

lightBall.x = mouseX + Math.random() * lightBall.width;
lightBall.y = mouseY - Math.random() * lightBall.height;

Step 12: Adding to Stage

We add the LightBall to the stage with the following code:

/* Add to Stage */
  
addChild(lightBall);
  
/* Add Listener to Animate function */
  
lightBall.addEventListener(Event.ENTER_FRAME, animate);

Step 13: Animate Function

The alpha, scale and vertical position are handled in this function.

private function animate(e:Event):void
{

Step 14: Alpha

The alpha is reduced by 5% every frame.

/* Alpha */

e.target.alpha -= 0.05;

Step 15: Remove Invisible Objects

When the LightBall is no longer visible (alpha < 0) the object is removed.

/* If lightBall is no longer visible, remove it */

if (e.target.alpha <= 0)
{
	e.target.removeEventListener(Event.ENTER_FRAME, animate);

	removeChild(e.target as Sprite);
 }

Step 16: Scale

The scale is reduced by 10% every frame.

/* Scale */

e.target.scaleX -= 0.1;
e.target.scaleY -= 0.1;

Step 17: Vertical Position

/* Y Position */

e.target.y += 3;
}

Step 18: Using the Class

Time to go back to the Fla.

Open the Properties Panel, add "MouseTrailer" as the Document Class and you’ll be ready to test your movie!

Conclusion

Now you have a nice looking Mouse Trailer wich you can customize however you want. Try changing the shape of the MovieClip, the size, the color – there are a lot of options! I hope you enjoyed this tut, thanks for reading.