Advertisement
  1. Code
  2. Effects
Code

Create a Glowing Mouse Trailer in Flash

by
Difficulty:IntermediateLanguages:

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 600x300 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 6x6 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).

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.

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.

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.

Step 9: Start Trailer Function

This function will handle the trailer, setting its properties.

Step 10: Duplicating the LightBall

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

Step 11: Position

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

Step 12: Adding to Stage

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

Step 13: Animate Function

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

Step 14: Alpha

The alpha is reduced by 5% every frame.

Step 15: Remove Invisible Objects

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

Step 16: Scale

The scale is reduced by 10% every frame.

Step 17: Vertical Position

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.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.