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.
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Carlos Yanez
Facebook Graph API Development with Flash
Follow Activetuts+ editor Michael James Williams as he walks you through integrating Flash with Facebook! Learn to develop apps for the Facebook website and harness the Graph API in your external projects.
Join our newsletter!
XML Flip Book / AS3 only $30.00 
XML Photography Template V2 only $40.00 
Gughi Fassino Photojournalism - More
Active Basix
Just getting started? Start with our basix tutorials on the fundamentals. View All Basix Tutorials
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Activetuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
looks great!!!
Pretty basic
like you REALLY needed to come on here and say,”pretty basic”. if you are so knowledgeable in this, why don’t YOU make some tutorials? this may be basic to you, but to people like me, it isn’t.
Very nice work Carlos, keep this work!!
I suggest create this using a Tween Engine and use Class for the custom Object, but anyone do their way, really great work!!
Although this is a flash don’t, it’s great for learning the steps towards other implementations.
i would so ues this if it were 1999
it is not for dumbs lik u???
Listen not to the naysayers, you’ve outlined a great tutorial that can be leveraged and modified to suit a potpourri of flash endevours. There are few truly “new” techniques employed in websites today that aren’t identical manifestations of things from 10 years past – with a face-lift. Basic it may be, I imagine the conceit is something apropos to giving a foundation with which to build upon.
Looks great, but is not a new effect, otherwise the is a great code with classes.
hehehe why not you post a new one…?
I like it. Maybe the guys who think it is basic would do the whole thing with an MVC framework. You guys are lame. Nice work Carlos. Thanks for the contribution.
i would use this if it were 2008.
This is soo 2008.
peace out bros
Love it, all though mouse trailers aren’t exactly popular anymore (if they ever were?) The effects can be applied to other elements – I.e if your moving a drag an drop object – it could have the trailer attached to it. Would be very cool personally =]
Great tutorial Carlos, cheers
LOL @ jink – its 2009 buddy
I think… he teaches how to create… now with a good imagination can create something very impressive and i am sure that people wont care if this effect is something about 1990 or 2009, but they will care it´s bealtiful!!
So it´s a great work man!! keep doing your great job”
Absolutely, it’s pretty easy to mod this tutorial to make a reasonably effective cartoon fire effect. Pretty basic, but it can be found here:
http://www.fhqhosting.com/ui/2ParticleClicker.swf
Thanks for the clear instructions. it was a big help for someone like me who’s new to flash. I’ve completed the tut and now i’ll try to experiment with it using different graphics.
I like the delay
ok, is I’m the only one having errors here. I corrected the first problem in which I had to add 4 missing brackets. Now I’m getting two errors I can’t seem to figure out. The errors are–1180: Call to a possibly undefined method LightBall.
1046: Type was not found or was not a compile-time constant: LightBall.
I am new to AS3.0. Please help.
Those errors typically show up when you’ve mixed up your object and the instance of it. This tutorial uses the “LightBox” object and creates instances of it called “lightBox” every time the mouse is moved. The only difference between them is the capitalization of a letter, so that would be a great place to start.
yeah, I had the object and instance mix up, but now I am getting another error. The error is #1013: The private attribute may be used only on class property definitions. I am guessing I put the brackets in the wrong spot.
Here is my code:
package {
import flash.display.Sprite;
import flash.ui.Mouse;
import flash.events.MouseEvent;
import flash.events.Event;
public class MouseTrailer extends Sprite {
var lightBall:LightBall;
public function MouseTrailer():void {
Mouse.hide();
stage.addEventListener(MouseEvent.MOUSE_MOVE, startTrailer);
}
private function startTrailer(e:MouseEvent):void {
/* Create a new LightBall object */
lightBall = new LightBall();
/* Position */
lightBall.x = mouseX + Math.random() * lightBall.width;
lightBall.y = mouseY – Math.random() * lightBall.height;
/* Add to Stage */
addChild(lightBall);
/* Add Listener to Animate function */
lightBall.addEventListener(Event.ENTER_FRAME, animate);
private function animate(e:Event):void {
/* Alpha */
e.target.alpha -= 0.05;
/* 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);
}
/* Scale */
e.target.scaleX -= 0.1;
e.target.scaleY -= 0.1;
/* Y Position */
e.target.y += 3;
}
}
}
}
Nevermind, I took out the package and classes completely and now it is working fine with me. Thanks.
what was your solution?
Maybe useful for some Disney-like website?
Well, let’s find out!
Nice one! Ive always wanted to know how to do that…and know I do. Loving the glow, guess its pretty easy to change the colour too, cheers
Nice one! Ive always wanted to know how to do that…and know I do. Loving the glow, guess its pretty easy to change the colour too, cheers
im new to flash and i keep searching to the net to get some tutorials and when i see this im really impresssssed, it inspired me… i hope i can also do it( and i hope it wont take years hehe)
wonderful work, thx a lot :)
Just bumped in this site, nice work, what’s the name of the program again? Do I have to buy this program or is it already in my system.
Adobe Flash CS4 or CS3
thx..! great job bro. great job.
Hey,
Thank you!
the code is very simple and the effect is so cool
is great tutorial, nice work!
How do you make it follow a path
I wanna know how to make it follow a path too! Thanks!
Good starting tutorial for beginner flash people, such as me! Your code was very confusing, though. You don’t have all the brackets and I have no idea where to put then…. Ugh.
Great effect, however we (at Hyperactive in Peth, Aust) created a much better effect.
Check out, http://hyperactiveadvertising.com.au/ to see what i mean
or http://www.hadynlander.com/ for more about the genius behind it
Wow! What a great inspiration! Amazing!
hii
i want to the move object on mouse moving than mouse stop object stop but when object in stop click the object get the drop down menu
please send it scipt flashmx
I’m back. I just want to know how can I stop the lightball mousetrail from interfering with my buttons. For example, as I am rolling over a text button, the cursor jumps from the handcursor to the arrowcursor. I have a hit state, but it doesn’t seem to work. Please help.
thx bro..good work……
It doesnt work for me; somebody please help.. Im absolute new in Flash
The error is #1013: The private attribute may be used only on class property definitions. private function animate(e:event):void
here is my code:
package
{
import flash.display.Sprite;
import flash.ui.Mouse;
import flash.events.MouseEvent;
import flash.events.Event;
public class MouseTrailer extends Sprite
{
var lightBall:LightBall;
public function MouseTrailer():void
{
Mouse.hide();
stage.addEventListener(MouseEvent.MOUSE_MOVE, startTrailer);
}
private function startTrailer(e:MouseEvent):void
{
/* Create a new LightBall object */
lightBall = new LightBall();
/* Position */
lightBall.x = mouseX + Math.random() * lightBall.width;
lightBall.y = mouseY – Math.random() * lightBall.height;
/* Add to Stage */
addChild(lightBall);
/* Add Listener to Animate function */
lightBall.addEventListener(Event.ENTER_FRAME, animate);
private function animate(e:Event):void
{
/* Alpha */
e.target.alpha -= 0.05;
/* 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);
}
/* Scale */
e.target.scaleX -= 0.1;
e.target.scaleY -= 0.1;
/* Y Position */
e.target.y += 3;
}
}
}
}
this is so nice and very interesting.. pixie like.. very cute! great work!
hi…. am new to web designing & developing. I love these tutorials… hope you can upload some more nice effects so we can learn…
Thanks :)
really nice tutorial. i like it and i would like to ask a Question.
Do you know how to do cursor animation in cascading style sheet (CSS)
cool TUT! :D
very good MR. Carlos Yanez
can anyone help. iv got the same problem as a couple of other people. the error code 1013:
Hi
Newb question here.
Why have you created two movie instances, once called Light, the other called LightBall. I can see that the actionscript refers to the LightBall object, creating multiple instances called “lightBall”. I also tried removing the Light object from the downloaded script to see what happened and the trailer stopped working altogether.
Why? What part of the script refers to the “Light” object as only the LightBall object is used in the MouseTrailer.as script.
Many thanks
LightBall uses the Light object inside it, so without Light, Lightball is missing the Light
this just straight up wont work for me!! can anyone post some working code so i can see where ive gone wrong??
Lame. Fix your tut, it doesn’t work.
I’ve added the missing brackets. Remember this code was created by the post’s author i just added missing stuff. Step 3 is crucial, without it the code won’t work.
package
{
import flash.display.Sprite;
import flash.ui.Mouse;
import flash.events.MouseEvent;
import flash.events.Event;
public class MouseTrailer extends Sprite
{
private var lightBall:LightBall;
public function MouseTrailer():void
{
Mouse.hide();
stage.addEventListener(MouseEvent.MOUSE_MOVE, startTrailer);
}
private function startTrailer(e:MouseEvent):void
{
lightBall = new LightBall();
/* Position */
lightBall.x = mouseX + Math.random() * lightBall.width;
lightBall.y = mouseY – Math.random() * lightBall.height;
/* Add to Stage */
addChild(lightBall);
/* Add Listener to Animate function */
lightBall.addEventListener(Event.ENTER_FRAME, animate);
}
private function animate(e:Event):void
{
/* Alpha */
e.target.alpha -= 0.05;
/* 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);
}
/* Scale */
e.target.scaleX -= 0.1;
e.target.scaleY -= 0.1;
/* Y Position */
e.target.y += 3;
}
}
}
:/ It doesn’t work even with code pasted by Javier.
greg’s question is important for me to. When I delete “Light” movieclip, animation form source code doesn’t work.
And if I make all by myself it doesn’t work :/ Only from source code is working.
Excellent tutorial and eccellent code!
thanks for sharing this!
remembers me of Disney land
How do you link the actionscript with the movie????????? please help!!!???
the tutorial is really great thanks, i was looking for this kind or tutorial for two days :) but now i have one problem after adding some other scripts to my animation Glowing Mouse disappear how can i fix it can anyone help? (this is first time i have used class)
thanks in forward
Hey!
I have created an unique mouse trailer, u will love to see that.
You can see many more effects on my site here: http://www.admecindia.co.in/spri2.html
Thanks and code for that is:
var spring = .1;
var friction = .8;
var gravity = 5;
var ax = 0;
var ay = 0;
var dx = 0;
var dy = 0;
var mx = 0;
var my = 0;
var ex = 0;
var ey = 0;
var cx = 0;
var cy = 0;
this.onEnterFrame = function () {
ax += (_xmouse-a._x)*spring;
ay += (_ymouse-a._y)*spring;
ay += gravity;
ax *= friction;
ay *= friction;
a._x += ax;
a._y += ay;
//****************————
dx += (a._x-d._x)*spring;
dy += (a._y-d._y)*spring;
dy += gravity;
dx *= friction;
dy *= friction;
d._x += dx;
d._y += dy;
//****************————
mx += (d._x-m._x)*spring;
my += (d._y-m._y)*spring;
my += gravity;
mx *= friction;
my *= friction;
m._x += mx;
m._y += my;
//****************————
ex += (m._x-e._x)*spring;
ey += (m._y-e._y)*spring;
ey += gravity;
ex *= friction;
ey *= friction;
e._x += ex;
e._y += ey;
//****************————
cx += (e._x-c._x)*spring;
cy += (e._y-c._y)*spring;
cy += gravity;
cx *= friction;
cy *= friction;
c._x += cx;
c._y += cy;
this.createEmptyMovieClip(“myLine”, 200);
myLine.lineStyle(1);
myLine.moveTo(_xmouse, _ymouse)
myLine.lineTo(a._x, a._y);
myLine.lineTo(d._x, d._y);
myLine.lineTo(m._x, m._y);
myLine.lineTo(e._x, e._y);
myLine.lineTo(c._x, c._y);
}
Thanks
Ravi Bhadaurua
ActionScript n Flex Programmer
admec multimedia institute, Rohini, New Delhi
hello,
I come again with some doubts, actually i want to convert this as3 mouse trailer script to as2. but i am facing some problems.
My script is:
var obj = new Object();
obj.onMouseMove = function() {
createEmptyMovieClip(“s”, this.getNextHighestDepth());
s.attachMovie(“bl”, “bll”, s.getNextHighestDepth());
s._x = _root._xmouse+Math.random()*s._width;
s._y = _root._ymouse-Math.random()*s._height;
s._alpha -= 0.05;
if (s._alpha <= 0){
removeListener(obj);
removeChild(s);
}
s._xscale -= 0.1;
s._yscale -= 0.1;
s._y += 3;
}
Mouse.addListener(obj);
Thanks in advanced
admec multimedia
thanks 4 this tutorial :)
but how can i add a mouse event of url ??
thanks