SIMPLE CURSOR TRAILER
(this document applies to Flash 4)

 

 

 

Cursor trailer are very popular nowadays; and they seem to have become fancier and fancier; yet everyone of them use the same basic general technique, which is described below.
    

Download .FLA

General Technique

In general, a cursor trailer requires the following capabilities:

  1. The ability to obtain the cursor position.

  2. The ability to put a movie clip (the trailer) in a certain position relative to the cursor position.

Once 1 and 2 are in place, they are run at a certain interval (this can be done in a loop) such as this:

Obtain cursor position->Put movie clip->Repeat 

The Repeat part are usually done in either one of these two cases: 

  • when the cursor position has changed; or

  • when a predetermined time interval has elapsed (for example: at every second).

Basic Step by Step Guide

Please note that this guide it's intended to be easy to understand; and it is not the only way to accomplish a cursor trailer effect. 

Create a new FLA (for this illustration purpose, use 400x300 size).

Creating the "Trail" Symbol

For this example, the trailer will be a simple Movie Clip of that of a circle.  But first, we need to create the symbol for it.

  1. Insert/Create a new Symbol, and call the new Symbol: Trail.  Set the behavior to MovieClip. 
  2. On the first frame of the Trail, draw a white circle about 20x20 pixels; and make sure the center point is positioned at 0,0 (on the object property window, set x and y to -10 as below).

Obtaining the Cursor Position

Now that we have the "trail" symbol, we need to be able to put it into wherever the cursor position is.  The cursor position can be obtained by dragging an "invisible" movie clip.  (By "invisible,"  I'm referring to a movie clip that does not have any visible "visual" element).

  1. Insert/Create a new Symbol, and call it: CursorTracker.  Set the behavior to MovieClip. (This will be the "invisible" or blank symbol so no need to worry that the symbol has no picture on it.)
  2. On the first frame of the CursorTracker, insert the following Action: 
    DragMovieClip("", lockcenter)  
    This will cause this movie clip  to be dragged.
  3. The second and third frame of CursorTracker will be a loop, which continuously get the mouse position.  
    On the second frame, insert the following actions: 
    Set Variable: "cusorX" = GetProperty ("",_x) 
    Set Variable: "cusorY" = GetProperty ("",_y)
    Set Property ("/Trail", X Position) = cursorX
    Set Property ("/Trail", Y Position) = cursorY
    The first and second line obtains the cursor position.
    The 3rd and 4th lines set the position of the movie clip "Trail," so that it ends up on right below the cursor.
  4. On the third frame, insert the following action:  
    Go to and Play(2)
    This causes the action on frame 2 to be executed again and again, so that we can continuously obtain the cursor position.

(For more information about this subject, see another tutorial on this site.

Putting a First Draft.

  1. Drag an instance of CursorTracker anywhere onto the Scene 1 stage.  
  2. Drag an instance of Trail somewhere outside the stage area of Scene 1.  
  3. Test Movie.  It should show something like below, try to move the mouse over the stage area.

This is pretty nice, but it's not really a "trailer" yet.  

Creating the Trail Effect.

The trail on most cursor-trailers are produced by using the DuplicateMovieClip function.  In this case, the movie clip that we want to duplicate is the Trail clip that we created above.   

  1. Open the CursorTracker symbol.  
  2. On the first frame, modify the action so that it reads:
    DragMovieClip("", lockcenter).
    Set Variable: "currentTrail" = 1
    Set Variable: "maxNumOfTrails" = 20
    The "currentTrail" variable is a counter; it is used to determine how many trails are already on the screen, and to enable the code to determine what to call the trail-movie-clip.  The "maxNumOfTrails" variable is a limit of how many number of trails can be shown on the screen at once.  The bigger the number, the longer the trail will be (but it might also be slower).
  3. On the second frame, modify the action so that it reads:
    Set Variable: "cursorX" = GetProperty("", _x)
    Set Variable: "cursorY" = GetProperty("", _y)
    Comment: Make duplicate of the trail
    Duplicate Movie Clip ("/Trail", "Trail" & currentTrail, currentTrail)
    Comment: Position the trail right so that it ends up below the cursor
    Set Property ("/Trail" & currentTrail, X Position) = cursorX
    Set Property ("/Trail" & currentTrail, Y Position) = cursorY
    Comment: Increment counter
    Set Variable: "currentTrail" = currentTrail + 1
    Comment: Check if the number of trails on the screen has exceed the limit, if so, start over
    If (currentTrail>maxNumOfTrails)
          Set Variable: "currentTrail" = 1
    End If
    The bold portion explain what is going on.
  4. On the third frame, no need to change anything.  
    Go to and Play(2)
    This causes the action on frame 2 to be executed again and again, so that the movie will continuously obtain the cursor position and put a "trail" movie clip on that position.

The Second Draft.

 


This tutorial is F. Permadi
Created December 1999

<<INDEX>>