Scrolling Text Banner

This lessons shows you how to create a scrolling text banner by animating the text of a field so that it appears to scroll horizontally.

Creating the UI

Creating the UI

The UI for this stack consists of 2 fields, one label field and one field, containing some text, with its lockText property set to true.

You can download the stack that accompanies this lesson here: https://tinyurl.com/yar33ghb

The mouseUp message

The mouseUp message is sent when the user clicks a field whose lockText property is set to true. When the mouseUp message is sent to the field, it triggers this mouseUp handler.

The mouseUp handler

The mouseUp handler animates the field's text so that it appears to scroll horizontally. It does this by removing one character at a time from the start of the field so the text appears to move from right to left.

Putting text into the field

The first thing the handler does is to put the text that will be animated into the field.

put "It is a truth universally acknowledged, that a single man in possession of a good fortune..." into me

The keyword me refers to the current object: the object whose script contains the handler that is executing. In this example, then, the text is placed in the field, because the mouseUp handler is in the field script.

Animating the text

The repeat loop performs the actual scrolling by removing the first character from the field each time through the loop. This is repeated until there are no more characters left in the field.

repeat until the text of me is empty
	## shift everything one character to the left:
	delete first character of me
	wait 6 ticks ## 1/10th of a second
end repeat

To the viewer, the text appears to come from the right side of the field and march toward the left. In reality, the handler is simply removing one character from the field during each iteration of the loop.

Using this method, the scrolling text moves with a slight jerkiness because the spaces are wider than one pixel. The effect is very well-suited for simulating a teletype or a marquee display. To make text move smoothly across the screen, put the text in a field and use the move command to move the field across the screen.

The mouseUp code

on mouseUp
   put "It is a truth universally acknowledged, that a single man in possession of a good fortune..." into me
   
   repeat until the text of me is empty
      ## shift everything one character to the left:
      delete first character of me
      wait 6 ticks ## 1/10th of a second
   end repeat
end mouseUp

0 Comments

Add your comment

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.