Scrolling Text Horizontally

February 6, 2002
by Will Turnage

Dear Multimedia Handyman,

I'm working on a CD-ROM project where I need to have text scroll across the screen and then disappear when it hits a certain part of the stage. Let's say the text comes in from the left or right and then starts to disappear when it hits the center of the stage. Also, is it possible to have several scrolling text fields on the stage moving at different speeds?

Thanks in advance,

Dear Ed,

In previous versions of Director, what you want to do could get pretty convoluted, but with imaging Lingo and timeout objects with Director 8, it's a piece of cake.

For each scrolling text field, you'll need to decide upon a few pieces of information.

First, you'll need the height and the width of the text that you want to appear on screen. Next, you'll need to select which member in your movie contains the text you want to scroll. Finally, you'll need two pieces of information to control the speed of the text scroll. The first is the number of pixels you want the text to scroll each time it moves, and the second is the frequency which you want the text to scroll. For instance, you could scroll the text 1 pixel every 50 milliseconds, or you could scroll it 5 pixels every 250 milliseconds. Both of these options will scroll the text at the same speed, but the first option will make the text appear to scroll more smoothly. Once you have decided these five pieces of information, then you can write your code.

The first step is to initialize a few variables at startup:

on beginSprite me

    pTextImage = pTextMem.image.duplicate ()
    pOffset = - pTextImageWidth
    pMemRef = sprite (me.spriteNum).member
    timeout ("imagingTextCrawl" & me.spriteNum).new (pSpeed, #buildImage, me)

end

The first variable you create is an image object of the text member that you specified in your behavior's getPropertyDescriptionList. Next, you use that image's width to calculate an offset. This number will be used later to determine when the text has scrolled off the edge of its display area and is ready to repeat. Next, you create a reference to the member which the behavior is attached to. Finally, you create a timeout object which will actually scroll the text member. The frequency of the scroll operation is determined by the pSpeed property as set in the property dialog for the behavior.

Now, all that's left to write is the buildImage handler which looks like this.

on buildImage me

tempImage = image (pTextWidth, pTextHeight, 32)

destRect = rect( 0, 0, tempImage.width, pTextImage.height)
textSourceRect = rect ( pOffset, 0, pOffset + tempImage.width, pTextImage.height)

  tempImage.copyPixels (pTextImage, destRect, textSourceRect)
  pMemRef.image = tempImage
  pMemRef.regPoint = point (0,0)

  pOffset = pOffset + pDistance
  if pOffset >= pTextImage.width then
    pOffset = -(pTextWidth) - pDistance
  end if

end

This handler starts by creating an image object that is the exact dimensions specified in thegetPropertyDescriptionList dialog. It uses the height of the text member to calculate a new rect (this will prevent distortion based on different font sizes). Then, the pOffset variable is used to calculate which part of the text image will display on screen. Once you have that information, then you just use the copyPixels function to copy the image of the text into your on screen bitmap.

Once you've copied the image, then you increase your pOffset variable by the amount you specified earlier for pDistance. If the text has finished scrolling off the screen, then you reset the pOffset variable, which will start the text scrolling again. The final result will look like this:

One of the nicer benefits of using imaging Lingo is that you can also easily add custom masks to your text scrolls. For instance, if you create a PNG image in Fireworks that looks like this:

Then you can add a single line of code to your buildImage handler that would copy the mask on top of your text member. Then you could get some more interesting scrolling text fields like this!

A sample Director 8 movie and images are available for download in ZIP or SIT archive format.

Will Turnage is a multimedia programmer based in New York City. In addition to his weekly role as Director Online's Multimedia Handyman, he is also the Technology Director for Sony Music's Client Side Technologies Group. You can read more about his work at http://will.turnage.com/.