Task: News Ticker

I l @ ve RuBoard

A simple example that we can build using string functions and a dynamic text member is a scrolling text ticker. This looks like the old-fashioned news tickers that appeared on the sides of buildings announcing news and stock prices.

The idea is to have one line of text, which gradually scrolls to the left, revealing more characters to the right while characters disappear from the left.

Figure 10.3 shows the ticker, but it is difficult to get the idea with a static image. Instead, open the example movie, 10ticker.fla and test it to see the movie in action.

Figure 10.3. The scrolling news ticker is much more exciting live than as a static image.

1. Start with a blank movie.

2. Create a dynamic text field that is only one line high but stretches the entire width of the work area. You can place anything in the text field, such as "Text goes here."

3. Link this text field to the variable text .

4. Adjust the font to use a monospaced font, such as Courier New.

5. Select the text area and choose Insert, Convert To Symbol. Choose Movie Clip as the type of symbol and name it anything you want. The text field is now the only component of a movie clip.

   

   Using monospaced fonts is an important part of many text effects. Monospaced fonts are different from normal fonts in that each character is the exact same width. This makes it easier to predict the width of text lines and to line up columns of text. Examples of monospaced fonts are Courier New and Monaco.

   
   

6. The script attached to the movie clip starts by initializing a variable called tickerText that will hold the complete text to be displayed. The script also initializes firstChar to 0, which will be the first character displayed in the text field, and lineLength to 50, which will be the number of characters displayed at one time.

   Then, the handler places a number of spaces at the start of tickerText . This is to make the text start with all spaces and then gradually come in from the right.

    onClipEvent(load) {     // full text     tickerText = "News Alert: ";     tickerText += "Stock prices shoot up sharply with good earnings reports. ";     tickerText += "The first manned flight to Mars prepares to leave Earth orbit. ";     tickerText += "Your favorite sports team wins championship. ";     tickerText += "Scientists find cure for major diseases. ";     firstChar = 0; // start at character 0     lineLength = 50; // show this many characters     // put spaces before text     for(var i=0;i<lineLength;i++) {         tickerText = " " + tickerText;     } } 

7. The enterFrame handler takes the first 50 characters from tickerText and places them in text . The first 50 characters will be spaces because we placed them there at the end of the load handler.

   Then, firstChar is moved over by one. In the next frame, instead of characters 0 through 49 being displayed, characters 1 through 50 will. Then 2 through 51. This is how the text appears to scroll.

   The enterFrame handler also tests firstChar to see whether it is beyond the end of the string length. If it is, it sets firstChar back to 0, so the whole thing starts over again.

    onClipEvent(enterFrame) {     // set the text to this segment     text = tickerText.substr(firstChar,lineLength);     // move segment by one character     firstChar++;     // if all text used, then start over again     if (firstChar > tickerText.length) {         firstChar = 0;     } } 

8. Using the movie you created, or the example movie 10ticker.fla, try changing the text in tickerText and the lineLength to see the effect.

   This example would be a good place to use external text rather than hard-coded text. You can use either the HTML or external text file technique to read in text from an external source to populate tickerText .

   Note that this might take some adjustment because you need to remember that the tickerText variable is in the movie clip, not the root level. So if you define a variable in the URL, or you load one using loadVariables at the root level, you will need to refer to _root . tickerText rather than tickerText .

Although this example is a great way to learn dynamic text field and string functionality, it is not the best way to create a ticker effect. Instead, you can create a wide dynamic text field, mask its left and right sides, and have it slide slowly to the left. This creates a smoother ticker and allows you to use non-monospaced fonts.

I l @ ve RuBoard