Flash / AS



ASP.net / PHP






  Design & Effects
  Audio & Video
  User Interface





Mouse Trail
by Syko

You've probably seen this effect all over the internet. It's actually nothing too hard. In this tutorial I'm going to explain you how to make the mouse trail with only actionscript! Yes, that's right, only actionscript, absolutely no graphics are used in this tutorial so there's nothing too complicated. They way I explain it can only be done with Flash MX so if you're using Flash 5 this tutorial is no good for you!

[ The mouse trail ]

Creating the Mouse Trail
OK. Since it all just actionscript, just copy&paste the code and I'll explaining it to you.

  1. Copy & paste the following code into the first frame of your movie.


The code explained:
Now I will simply explain what the code does...

Text = "kirupa";
letters = Text.split("");

The first line of code is just simply for defining the text for the effect. You can change it to whatever you want also.. The second line splits the text into an array where every element is a single character.

letterformat = new TextFormat();
letterformat.font = "Verdana";
letterformat.align = "center";
letterformat.size = "10";

Here we define the appearance for the text. The first line just creates a new TextFormat object. The 2nd line defines the font, the 3rd the alignment of the text and the 4th the size of the text.

spacing = 8;
speed = 3;

Here we just define some custom variables. Spacing is the size of the area between the letters and speed is the speed which we will need to make them follow the mouse cursor smoothly. (note: the smaller the speed is the faster it is)

for (L=0; L<letters.length; L++) {}

This creates a for() loop.
L=0 means that when this loop runs for the first time the variable 'L' has a value of '0'
L<letters.length - this is a condition. The loop will only be run if L is less than the length of the array 'letters' which also means that L has to be less than the number of letters. 'Less than' because the loop started with an L value of 0 and the elements in the array are counted '0, 1, 2, etc...". So the first letter in the array is known as the element '0' not '1'.

_root.createEmptyMovieClip(letters[L], L);
_root[letters[L]].createTextField(letters[L]+"t", L, L*spacing, 10, 20, 20);

The first line creates a new movieclip on the main timeline named as the letter that is displayed in it.
'letters[L]', for the first time the loop is run, is the same as 'letters[0]' which means the first element from the array (which is 'k').
The second line creates a textfield inside the new movieclip with an instance name of the letter plus a letter 't'. So for the first time the loop is run the instance name would be 'kt'. Then the rest of the parameters are depth which is L, the x position which is L*spacing (L*8 in this case) so it every letter would appear next to each other not on each other. The next parameter is the Y position which is 10 so the text would appear a little bit lower than the cursor. The next one is width and then comes height... their value should be enough for the text to fit in there.

with (_root[letters[L]][letters[L]+"t"]) {

This tells flash to evaluate expressions and actions that are between the curly brackets, inside the object defined between the parentheses.
_root[letters[L]] gets the element with the key of the value of L from the array 'letters'.
[letters[L]+"t"] is the same but the final result will be the element name plus a 't' letter in the end, which equals the textbox instance name from before.

text = letters[L];
selectable = false;


This is imply for the appearance of the text!
The first line makes the textfield to show us the current letter from the array.
The second line sets a texformat defined earlier to the new textfield.
The third line just makes the text unselectable so you won't see a "text select" cursor when you rollover the text. And the fourth line closes "with".

if (L>0) {}

This just checks if the variable 'L' is more than 0. If it is, then the actions and expressions between the curly brackets are evaluated. If not the '} else {' is triggered.

_root[letters[L]].id = L;

This sets a new variable 'id' inside the current movieclip and gives it a value of L because L changes all the time because of the for loop and this way we can store the array-key to the current instance name.

_root[letters[L]].onEnterFrame = function() {}

This tells flash to evaluate the actions and expressions between the curly brackets every frame (second/fps) inside the movieclip that is named as the element in the array with the key 'L'.

this._x += (_root[letters[this.id-1]]._x-this.lastX)/speed;
this._y += (_root[letters[this.id-1]]._y-this.lastY)/speed;
this.lastX = this._x;
this.lastY = this._y;

Now this makes the whole thing move! (Actually just all the letters except the first one). The first line defines the X position of the letter.
+= means that the expression on the left will be increased by the value of the expression on the right every frame.
Now let's see the formula...
_root[letters[this.id-1]._x gets the X position of the movieclip that has an instance name of the element that is just before the current element in the array. (In this case: if the current letters is 'r' then it would get the X position of 'i'. Remember that 'id' was the instance key to the instance name of the current movieclip itself. Simply this part is what I call "the target X position"!
-this.lastX subtracts the current movieclip's X position of the last frame from the "target X position" of the current frame.
/speed divides the overall result by the value of 'speed' (which is 3) to make the smooth movement.
The second line is the same as the first but for the Y position.
the last 2 lines define the lastX and lastY. these will be defined after the last 2 lines of code because all the code will be evaluated starting from the top and moving down. So that makes them the X and Y positions of the last frame!

} else {

The curly bracket on the firs line closes the onEnterFrame function
The one on the second line closes the if() action and starts an else {}. The actions and expressions between the curly brackets will be evaluated when L is indeed 0(or lower)!

_root[letters[L]].onEnterFrame = function() {
this._x += (_root._xmouse-this.lastX+10)/speed;
this._y += (_root._ymouse-this.lastY)/speed;
this.lastX = this._x;
this.lastY = this._y;

This is the same actions as above but for the first letter of the text and instead of the X and Y position of the letter in front of the current one it uses the cursor's X and Y position since there is no letters before the first one. And it moves the letter 10 pixels to the right so the first letter won't appear just below the cursor.

download final source for Flash MX

And you're done! That wasn't so hard was it? And it's totally coded. You can add/remove/change any letters as needed. If you have any questions post the at kirupaforum.

Updated: 10/02/2003: Code modified by LostInBeta




kirupa.com's fast and reliable hosting provided by Media Temple.