This is a basic tutorial for creating a nice looking mouse trailer using ActionScript 3.0.
Here’s how this flash component looks like:
Hey! Stop playing with it and go follow the tutorial to create one of your own :)
1. Source Image
Let’s start with a source image that we are going to use for this mouse trailer flash component.
As far as you have probably guessed we need some kind of a star. I cropped one out of this picture:
So you need to crop this fancy star out of its white background. Since we’re building a magic stick effect, I’ve used the Magic Wand Tool to crop the star image and saved it as .gif. And here is what I’ve got:
2. Creating the object
Now you can open a new ActionScript 3.0 project in Flash and simply drag&drop this .gif star to the Scene.
Looks huge, ha? We’ll have to fix that by going down to Properties section. I’ve set the width and height to 12px. I think that’s the best size.
Once the star is tiny, right-click on it and:
“Convert to Symbol…” > Name: Star > Type: Movie Clip
Click the Advanced button > Check the “Export for ActionScript” checkbox > Class: Star > Base Class: flash.display.MovieClip
3. ActionScript
Go to File > New And create a new blank ActionScript File.
Let’s paste some code there:
Importing the classes that our flash file will be using:
package
{
import flash.display.Sprite;
import flash.ui.Mouse;
import flash.events.MouseEvent;
import flash.events.Event;
The next thing we need to do is extend the Sprite Class to access the addChild() method. The name of the class should be the same to the file name.
public class MouseTrailer extends Sprite
{
Setting up variables: we have only one and it’s our Star. This variable will be used for creating multiple instances of our star.
var star:Star;
Now lets hide the mouse cursor away and add the Listener, which will trigger the Trailer effect:
public function MouseTrailer():void
{
Mouse.hide();
stage.addEventListener(MouseEvent.MOUSE_MOVE, startTrailer);
}
Trailer start function itself. Here we’re creating a new star on mouse move, defining its position and adding it to the stage:
private function startTrailer(e:MouseEvent):void
{
/* Create a new Star */
star = new Star();
/* Define the Position */
star.x = mouseX + Math.random() * star.width;
star.y = mouseY - Math.random() * star.height;
/* Add new star to Stage */
addChild(star);
Adding Alpha animation:
/* Listener */
star.addEventListener(Event.ENTER_FRAME, animate);
}
/* Animation */
private function animate(e:Event):void
{
/* Alpha */
e.target.alpha -= 0.05;
While stars disappear it would be convenient to remove them:
if (e.target.alpha <= 0)
{
e.target.removeEventListener(Event.ENTER_FRAME, animate);
removeChild(e.target as Sprite);
}
Now lets scale down our stars frame-by-frame and have them moving down to the ground:
/* Scale & Falling of the stars */ e.target.scaleX -= 0.04; e.target.scaleY -= 0.04; e.target.y += 3; } } }
4. Last thing
Now save your progress with the actionscript file and go back to the .fla
Look down at the Properties panel and fill in Document Class with “MouseTrailer” setting.
Don’t forget to set the background to black and remove any elements from the stage. And you can now test your awesome mouse trailer flash component.
Thought this flash component won’t be your best seller, you can do some more advanced stuff out of it. Try to insert your own picture, or you can either play with the action script settings: alpha, scaling, falling etc. Thus this is a great flash file to customize and implement for your own needs.
In case you have any troubles with this tutorial, you can buy this mouse trailer flash component together with the source files for as less as $1 at our marketplace.
Want something more advanced? Try Creating an Animated Cube!
