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.
In general, a cursor
trailer requires the following capabilities:
The ability to obtain
the cursor position.
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.
Insert/Create a new Symbol, and call the new Symbol: Trail.
Set the behavior to MovieClip.
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).
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.)
On the first frame of the CursorTracker, insert the following
Action:
DragMovieClip("", lockcenter)
This will cause this
movie clip to be dragged.
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.
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.
Drag an instance of CursorTracker anywhere onto the Scene 1
stage.
Drag an instance of Trail somewhere outside the stage area
of Scene 1.
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.
Open the CursorTracker symbol.
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).
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.
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.
