Text Trailing Effect

May 14, 2000
by Pat McClellan

Dear Multimedia Handyman,

I want to create a mouse trail affect with text so if user is moving the mouse around in the movie the arrow or cursor leaves a trail of text .

Marco

Dear Marco,

This is a nice effect that I'm seeing more and more -- especially during loader movies for Shockwave and Flash. Here's a demo:

Download the sample movie in Mac or PC format.

To create this effect is actually pretty easy. You'll need to combine some minor graphics production with a simple frame behavior. Start by creating a text member that says whatever you want the message to be. For example, "Loading...". Set the background color of the text member to the background color of the stage (or approximately the color of the background that the words will appear over.) You may want to set the text member's options so that anti-aliasing is on. Now convert the text member to a bitmap (Modify -> Convert to bitmap).

Open the bitmap member in the paint window and select the registration point tool (the + in the tool palette.) You'll see that the registration point is at the top left of the word. I recommend selecting a point at the bottom left instead. You'll see why later. Select the marquee tool (the selection rectangle) -- this is just to turn off the registration tool.

Next, count the letters in the word; no need to include spaces in your count. Duplicate this bitmap repeatedly until you have the same number as the number of letters. You're going to need to crop these bitmaps so that each one has only one letter of the word. So step through the bitmaps sequentially, cropping out all but the appropriate letter. As you're doing this, do not change the regPoint. When you're finished, you should have a series of bitmaps corresponding to the sequence of letters in your word. Now, as a group, drag all of the cast members to the stage, and set their ink to Background Transparent (or other if you desire.) You'll notice that the letters all line up correctly on the stage. That's because they share the same regPoint -- and the same loc.

Now for the Lingo. The first letter will simply need to track the mouseLoc. Wherever the mouse moves, the first letter will go. When that first letter (first sprite) moves, there will be a difference between its loc and the loc of the second letter (deltaLoc). If we moved the second sprite so that its loc was the same as the first, they would appear to move as a unit, but we want to introduce a delay -- a wave or a ripple. So instead, let's only move the second sprite halfway toward the first sprite. And the third sprite will move halfway toward the second sprite's position, and so on through all the letters. The effect will be a wave or ripple where there is the most motion near the first letter, diminishing to the last letter.

When you apply this effect, there are several properties you'll want to set. You'll need to set the first sprite, the last sprite, and the speed. The speed is simply a matter of varying whether each subsequent sprite moves halfway, or a third of the way, or a quarter of the way toward the preceding sprite. Here's the code:

property pFirstSprite, pLastSprite, pSpeed

on getPropertyDescriptionList me

  pdlist = [:]

  addprop pdlist, #pFirstSprite, [#comment:"First sprite:", #format:#integer, #default:1]
  addprop pdlist, #pLastSprite, [#comment:"Last sprite", #format:#integer, #default:10]
  addprop pdlist, #pSpeed, [#comment:"Speed", #format:#float, #default:1.50, #range:[#min:1.00, #max:1.95]]

  return pdlist

end getPropertyDescriptionList

on exitFrame

  sprite(pFirstSprite).loc = the mouseLoc

  repeat with i = (pFirstSprite + 1) to pLastsprite
    targetLoc = sprite(i-1).loc
    deltaLoc = targetLoc - sprite(i).loc
    sprite(i).loc = sprite(i).loc + (deltaLoc/pSpeed)
  end repeat

  go to the frame

end

There's really not a lot of complexity here. It's just a repeat loop through all the sprites moving them toward the preceding sprite. It's simple enough that I'm sure some of you will come up with some cool variations. Let me know what you come up with by posting your comments and code in the DOUGthreads forum thread for this article. Click "Discuss this article" on the icon bar below to enter the discussion.

Patrick McClellan is Director Online's co-founder. Pat is Vice President, Managing Director for Jack Morton Worldwide, a global experiential marketing company. He is responsible for the San Francisco office, which helps major technology clients to develop marketing communications programs to reach enterprise and consumer audiences.