Slider control behavior

November 5, 2000
by Pat McClellan

Dear Handyman,

I would like to thank you for your help with the Multi-track cycling animation scripting that you helped me with. I thought that I could do the slide bar to go through the tracks, but I was wrong. If it's not too difficult could you help me with this also?

Tim

Dear Tim,

Let's think about the requirements for a slider in general so that we'll create a slider behavior that can be used anywhere. When you look at a slider, there's the part that moves, which we'll call the "thumb". (I don't know why they call it that, but that seems to be the convention.) Then there's the "track" that it moves in, which limits its motion. Except... not really.

The track is nothing more than a graphic that appears to limit the motion of the thumb. The track is important for making the slider intuitive to use, giving the user cues as to which way and how far the slider thumb can move. It also gives the user some sense of where the current value of the slider is, relative to its range. However, remember that the track is just a graphic and has no direct significance or interaction with our Lingo.

The most conventional sliders go either horizontally or vertically, so we'll probably want to build that into the behavior. The distance that a slider can travel is variable, so we'll allow the author to specify the ends of the slider's span in pixels (this should visually correspond to the track graphic). The key consideration is the range of values that the slider can set. For example, a volume slider might have a range from 0 to 7, while the slider you need will range from 1 to 36 (corresponding to the 10-degree increments of your animation tracks).

In the demo movie I made for the previous article, I used only 4 tracks, so I would have needed a range from 1 to 4. One last consideration is the format of the output value. In your case, you'll want an integer to correspond to one of your 36 animation tracks, but it's likely that for some instances of sliders you'd want to output float values. I'll make that an option as well. Here's what the resulting gpdl dialog box will look like (or similar on Windows).

Note that in this image, the Min Pixel value is larger than the Max Pixel value. That's because on vertically oriented sliders, the lowest value generally corresponds to the bottom of the slider. The locV of the bottom of the slider will be a higher number than the locV of the top of the slider.

D8 Download for Mac or Windows.

In creating the Lingo for this, let's start with the movement of the thumb sprite, either vertically or horizontally, within the range of the slider track. First we'll check to see if pDirection is horizontal or vertical. If it's horizontal, then we'll position the sprite at the mouseH, limiting the range of the motion to the slider by using the max and min functions. For vertical sliders, we'll do something similar, although the min and max functions are more complicated because they allow for the pMinPixel to be either lower or higher than pMaxPixel.

on positionThumb me

  if pDirection = #horizontal then

    if the mouseH > pSprite.locH then
      pCurrentPos = min(the mouseH, pMaxPixel)
    else if the mouseH < pSprite.locH then
      pCurrentPos = max(the mouseH, pMinPixel)
    end if

    pSprite.locH = pCurrentPos

  else -- vertical slider

    if the mouseV > pSprite.locV then
      pCurrentPos = min(the mouseV, max(pMinPixel,pMaxPixel))
    else if the mouseV < pSprite.locV then
      pCurrentPos = max(the mouseV, min(pMinPixel, pMaxPixel))
    end if

    pSprite.locV = pCurrentPos

  end if

end

Once the thumb sprite is positioned, the behavior will convert the thumb's position in pixels into a value in our range. To do that, we'll have to take the distance (in pixels) that the thumb can travel (which corresponds to the end points of the slider's track) and divide it by the number of values in our range. Because a vertical slider might have the highest value at the lowest locV, we have to use the absolute value function as we calculate the distance. The last line of the calculateVal handler converts the value to an integer if the author has selected integer as the output format.

on calculateVal me

  distance = abs(pCurrentPos - pMinPixel)
  pCurrentVal = (distance/pIncrement) + pMinValue
  if pOutputFormat = #integerValue then pCurrentVal = integer(pCurrentVal)

end

Finally, we'll need to send this value out so that the slider affects something. I've built the behavior so that you can specify a message, as well as the sprite to which that message and the slider's value will be sent. You'll need to write a behavior to receive this message and deal with it. In the demo movie above, I simply sent a message to a field sprite to display the value that it receives. For your animation example, the behavior we used has a handler called incrementTrack.

Therefore, if you use this slider behavior in conjunction with it, you'll simply enter "incrementTrack" as the message. I've added the slider to the demo movie for the multitrack animation, which you can download. Good luck with your project.

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.