Creating a Slider Bar for Text

December 10, 2000
by Will Turnage

Dear Multimedia Handyman,

I am looking for a way to scroll text using a slider instead of the normal up and down arrows.

Clars

Dear Clars,

To use a slider bar with text, you need to start with three key pieces of information:

the boundaries in which the slider can move;
the height of the text field sprite; and
the height of the text field member.

Using the boundaries of the slider, the first thing you need to do is control the movement of the slider. The following handler moves a slider bar up and down with the mouse.

on positionSlider me

tempV = the mouseV

  -- if tempV is below the minimum level then
  -- set tempV equal to the minimum
  if tempV < pBoundingSpriteMin then tempV = pBoundingSpriteMin

  -- otherwise if tempV is greater than the
  -- maximum level then set tempV equal to the
  -- slider bar maximum
  else if tempV > pBoundingSpriteMax then
    tempV = pBoundingSpriteMax
  end if

sprite(me.spriteNum).locV = tempV

end

This handler first determines the location of the mouse. Then, it makes sure that the mouse location is within the boundaries of the slider. Finally, it positions the slider bar in that location.

The next step in using a slider with a text field is to calculate the percentage that the slider has traveled from its starting position. This percentage can be calculated using the following formula:

(current slider position - slider boundary minimum) / (slider boundary maximum - slider boundary minimum)

Finally, you'll use this percentage to calculate a new scrollTop for the Text or Field member. You might think that to obtain the new scrollTop value, all you need to do is multiply the percentage by the height of the Text member; however, that's only partly right.

For the slider bar to be accurate, you need to determine how many pixels are necessary to scroll through the entire contents of the Text member. You can determine this by taking the total height of the Text member, and then subtracting the number of pixels that are visible on screen (that is, the height of the sprite containing the Text member).

So, the code to calculate the slider percentage and scrollTop might look like this:

on scrollText me

pPercentage = (sprite(me.spriteNum).locV - pBoundingSpriteMin) / float(pBoundingSpriteMax - pBoundingSpriteMin)
pTargetFieldMem.scrollTop = integer(pPercentage * pTargetFieldHeight)

end

And the final result looks something like this:

A sample Director 7 movie is available for download in Mac or Windows 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/.