Lingo basics

-- exercise IV, March 15, 2000 --


I. Controlling navigation.
II. Text input.
III. Animation by cast member shifting.
IV. Rubberbanding.
V. Autonomous time-based behavior.


The Alien Vigilance Slider. Signal strength in alien communication is directly proportional to vigilance level.


Direct manipulation interfaces often require various forms of rubberbanding. This refers to the dynamic transformation of shape, location, etc. based on cursor input. Slider gauges are perhaps the most common example, but there are many conceivable applications for dynamic visual transformation.


Again, the movie loops in one frame.

To get the vigilance slider to look and behave properly, we need a bit of clever sprite organization. The slider actually consists of three stacked sprites (plus the black lines on the left and the labels on the right). A color gradient sits at the bottom. It is static. The next layer is a white rectangle that partly covers that color gradient. The round gray handle is on top. If you could view the slider from the side, it would look like this.



When the user pushes the mouse button on the gray handle sprite, it starts to follow the cursor in the vertical direction. Moreover, the white rectangle is reshaped so that its bottom edge follows the cursor. It appears as if the color bar grows and shrinks. The handle and rectangle edge follow the cursor as long as the mouse button is pressed.

A few tests are necessary to stop the slider at the end points. You can, for instance, use the locations of the two horizontal black lines for that purpose.

The signal strength indicator is animated using the sprite property called blend. The cast member looks the same all the time, but the sprite blend depends on the vertical position of the vigilance slider.

A complication is that the user might click in different vertical positions within the handle relative to its registration point. You can handle this by computing the offset when the user clicks and then correct for it when you set the new vertical location.

Relevant Lingo  

the mouseH, the mouseV, the locH of sprite, the locV of sprite. Current positions in stage coordinates for the cursor and for sprites.

the top of sprite. Position in stage coordinates for the upper edge of the bounding box of a sprite. The bounding box is the imagined rectangle that covers the sprite. If the sprite is rectangular, then the bounding box is the same as the sprite shape itself.

the height of sprite. The height of the bounding box of a sprite. Can be set from Lingo, which is a good way to reshape the white rectangle in the vigilance slider.

the blend of sprite. A number between 0 and 100 indicating how much the sprite blends with the background. If the blend is 100, the sprite is completely opaque. A blend of 0 yields a completely transparent sprite.

on mouseDown. Handler that is called when the mouse button is pressed. Typically used in a sprite or cast member script.

the stilldown. A property that returns TRUE if the mouse button is pressed. Very convenient to use together with the repeat while control structure to keep updating a sprite property as long as the mouse button is down, like this:

on mouseDown
  <initialize if necessary>
  repeat while the stillDown
    <change sprite props based on cursor pos>
  end repeat
end mouseDown

Notice the Lingo command updateStage inside the repeat loop. As long as the repeat loop runs, Director has no opportunity to update the presentation of the sprites. The call to updateStage is a manual way of performing the update, and make the slider follow the mouse smoothly.