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!
- 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];
setTextFormat(letterformat);
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.
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
Mouse
Trail
