.
.
 
Mouse Trails

Mouse Trails are one of the easiest ways to spice up a Flash movie. There are so many different variations on mouse trails. This tutorial is not meant to cover all the possibilities, but give you a basic idea of how a mouse trail can be made using action script. It is my opinion that mouse trails should be separate files from the rest of the movie and loaded into a level in the first (or second) frame of the main scene. This helps keep the main movie uncluttered as well as making your mouse trail modular for reuse in another movie. So that's how this tutorial is constructed.

Download MouseConfetti.fla used in this example.

Dissymmetry Intermediate Flash Tutorial - Mouse Trails (5,214 bytes)

1) Check out the example mouse trail below:

2) You start off a mouse trail by making a very simple movie clip animation sequence that will be duplicated numerous times to create the effect. The simpler the starting movie clip is, the better performance you can expect from your mouse trail. For the example, I made only three different colored "confetti" pieces floating down from the registration point of the movie clip. The registration point (the "+" that appears on all flash symbols and movies) is critical for this effect. It is the point which will be centered on the mouse when we drag the movie clip.

3) The movie clip should not be of the looping type, each duplicated clip will destroy itself once it has completed running. To do this, insert a layer above all the other layers and call it "Events". at the end of the movie, past all occupied frames, insert two additional keyframes only in the "Events" layer. Be sure that both of these frames are keyframes! The first will be void of actionscript but must be labeled"Halt". The second of these keyframes will contain the following action script:

removeMovieClip (Me);

4) Place an instance of the finished movie clip (complete with the animation you desire) in the main stage an name the instance "MouseFollower". The main movie will basically be four frames long.

5) The first frame should contain the following action script:

tellTarget ("/MouseFollower") {
  gotoAndStop ("Halt");
}
startDrag ("/MouseFollower", true);
set ("iCount", 0);
This action script keeps the original "MouseFollower" movie clip from destroying itself, starts the drag operation and initializes the variable "iCount" to 0

6) The second and third make up a continuous loop in the main movie clip timeline. Each contains the same action script with the exception that the third one contains an additional "gotoAndPlay (2);" action as the last line to maintain the loop. Place the following action script into both the third and second frames:

if (Mouse_y <> _ymouse or Mouse_x <> _xmouse) {
  set ("Mouse_y", _ymouse);
  set ("Mouse_x", _xmouse);
  if (iFireCount > 30) {
    set ("iFireCount", 0);
  }
  set ("iFireCount", iFireCount + 1);
  duplicateMovieClip ("/MouseFollower", "MouseFollower" & iFireCount, iFireCount);
  setProperty ("/MouseFollower" & iFireCount, _x, getProperty("/MouseFollower", _x));
  setProperty ("/MouseFollower" & iFireCount, _y, getProperty("/MouseFollower", _y));
  tellTarget ("/MouseFollower" & iFireCount) {
    set (Me, "/MouseFollower" & ../:iFireCount);
    play ();
  }
}

7) Let's break this down. The first line checks the location of the mouse (using the new _xmouse and _ymouse properties in Flash 5) against the previously saved coordinates in the variable "Mouse_x" and "Mouse_y". The if statement keeps anything from happening unless the mouse is moved from its current position.
  The next couple of lines sets new values for those variables. "iFireCount" is a counter that is used to limit the number of duplicated movie clips. This if statement (line 4) keeps the duplicated movie clips from getting out of hand by resetting "iFireCount" to 0. You can control how many movie clips are generated by changing the value I have set to 30. This number worked great for my example, use whatever works for the animation sequence you are using.
  In line 7, iFireCount is incremented + 1.
  The next few lines actually create the effect. We are duplicating the "MouseFollower" movie clip and incrementing what layer we are duplicating the movie into. We then use the current position of the movie clip "MouseFollower", which is attached to the mouse, as the location for the new movie clip to be duplicated to.
  We then tell the new movie clip what it's name is in line 15 so that it can delete itself once it's lifespan is over.

Don't forget to add the

goto and play(2);
action to the end of the third frame's script to maintain the loop.

8) Notes on using MouseTrails

  • Mouse trails can take up a large amount of the processing power of the users' machines. Care must be taken to ensure quality playback when mouse trails are employed. Remember when creating the animation sequence that this movie clip will be duplicated however many times you have it set to. Keep the animations short and clean with as little excess as possible. Try not to run too many other animations, at once while the mouse trail is running, especially gradient and alpha tweens as these are great memory hogs as well.
 

.
Right-Bottom 006699.gif (866 bytes)

"The Internet is the foundation for a new industrial order. ... If you don't believe deeply, wholly... that the Net is going to change your business, you're going to lose."  - Fortune Magazine

All graphics on this site are copyrighted by their respective distributors and may not be duplicated, modified in any fashion or used in any way without consent.

Last Updated: 12/5/07

Home |  Tutorials |  Basic |  Intermediate |  Advanced |  Contact Us