Step 1: Brief Overview

Using ActionScript we ll duplicate a MovieClip then modify its alpha, scale, and p
osition 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 use
d 600×300 in size and added a blue radial gradient (#4584D4, #184D8F). Also, I add
ed 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 (#FF
FFFF, #5CFAFF).
Convert this shape to a MovieClip add a Glow filter, use the values in the follo
wing image:
Convert this to a MovieClip and name it "LightBall", remember to check the "Expo
rt 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 pleas
e check the Flash help (F1).
view plaincopy to clipboardprint?
1. package
2. {
3. import flash.display.Sprite;
4. import flash.ui.Mouse;
5. import flash.events.MouseEvent;
6. import flash.events.Event;
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 na
me of the class has to be the same as the file name.
view plaincopy to clipboardprint?
1. public class MouseTrailer extends Sprite
2. {
public class MouseTrailer extends Sprite
{
Step 7: Variables
There s only one variable in this class, the LightBall variable. This is used to c
reate a new instance of the LightBall that we created in the Fla.
view plaincopy to clipboardprint?
1. var lightBall:LightBall;
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.
view plaincopy to clipboardprint?
1. public function MouseTrailer():void
2. {
3. Mouse.hide();
4. stage.addEventListener(MouseEvent.MOUSE_MOVE, startTrailer);
5. }
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.
view plaincopy to clipboardprint?
1. private function startTrailer(e:MouseEvent):void
2. {
private function startTrailer(e:MouseEvent):void
{
Step 10: Duplicating the LightBall
This code creates a new LightBall when the mouse is moved.
view plaincopy to clipboardprint?
1. /* Create a new LightBall object */
2.
3. lightBall = new LightBall();
/* 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.
view plaincopy to clipboardprint?
1. /* Position */
 2.
3. lightBall.x = mouseX + Math.random() * lightBall.width;
4. lightBall.y = mouseY - Math.random() * lightBall.height;
/* 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:
view plaincopy to clipboardprint?
1. /* Add to Stage */
2.
3. addChild(lightBall);
4.
5. /* Add Listener to Animate function */
6.
7. lightBall.addEventListener(Event.ENTER_FRAME, animate);
/* 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.
view plaincopy to clipboardprint?
1. private function animate(e:Event):void
2. {
private function animate(e:Event):void
{
Step 14: Alpha
The alpha is reduced by 5% every frame.
view plaincopy to clipboardprint?
1. /* Alpha */
2.
3. e.target.alpha -= 0.05;
/* Alpha */
e.target.alpha -= 0.05;
Step 15: Remove Invisible Objects
When the LightBall is no longer visible (alpha < 0) the object is removed.
view plaincopy to clipboardprint?
1. /* If lightBall is no longer visible, remove it */
 2.
3. if (e.target.alpha <= 0)
4. {
5. e.target.removeEventListener(Event.ENTER_FRAME, animate);
6.
7. removeChild(e.target as Sprite);
8. }
/* 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.
view plaincopy to clipboardprint?
1. /* Scale */
2.
3. e.target.scaleX -= 0.1;
4. e.target.scaleY -= 0.1;
/* Scale */
e.target.scaleX -= 0.1;
e.target.scaleY -= 0.1;
Step 17: Vertical Position
view plaincopy to clipboardprint?
1. /* Y Position */
2.
3. e.target.y += 3;
4. }
/* 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 wan
t. 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.