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).
1 |
|
2 |
package
|
3 |
{
|
4 |
import flash.display.Sprite; |
5 |
import flash.ui.Mouse; |
6 |
import flash.events.MouseEvent; |
7 |
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.
1 |
public class MouseTrailer extends Sprite |
2 |
{
|
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.
1 |
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.
1 |
|
2 |
public function MouseTrailer():void |
3 |
{
|
4 |
Mouse.hide(); |
5 |
stage.addEventListener(MouseEvent.MOUSE_MOVE, startTrailer); |
6 |
}
|
Step 9: Start Trailer Function
This function will handle the trailer, setting its properties.
1 |
|
2 |
private function startTrailer(e:MouseEvent):void |
3 |
{
|
Step 10: Duplicating the LightBall
This code creates a new LightBall when the mouse is moved.
1 |
|
2 |
/* Create a new LightBall object */
|
3 |
|
4 |
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.
1 |
|
2 |
/* Position */
|
3 |
|
4 |
lightBall.x = mouseX + Math.random() * lightBall.width; |
5 |
lightBall.y = mouseY - Math.random() * lightBall.height; |
Step 12: Adding to Stage
We add the LightBall to the stage with the following code:
1 |
|
2 |
/* Add to Stage */
|
3 |
|
4 |
addChild(lightBall); |
5 |
|
6 |
/* Add Listener to Animate function */
|
7 |
|
8 |
lightBall.addEventListener(Event.ENTER_FRAME, animate); |
Step 13: Animate Function
The alpha, scale and vertical position are handled in this function.
1 |
|
2 |
private function animate(e:Event):void |
3 |
{
|
Step 14: Alpha
The alpha is reduced by 5% every frame.
1 |
|
2 |
/* Alpha */
|
3 |
|
4 |
e.target.alpha -= 0.05; |
Step 15: Remove Invisible Objects
When the LightBall is no longer visible (alpha < 0) the object is removed.
1 |
|
2 |
/* If lightBall is no longer visible, remove it */
|
3 |
|
4 |
if (e.target.alpha <= 0) |
5 |
{
|
6 |
e.target.removeEventListener(Event.ENTER_FRAME, animate); |
7 |
|
8 |
removeChild(e.target as Sprite); |
9 |
}
|
Step 16: Scale
The scale is reduced by 10% every frame.
1 |
|
2 |
/* Scale */
|
3 |
|
4 |
e.target.scaleX -= 0.1; |
5 |
e.target.scaleY -= 0.1; |
Step 17: Vertical Position
1 |
|
2 |
/* Y Position */
|
3 |
|
4 |
e.target.y += 3; |
5 |
}
|
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.
By
