Scrolling Text

Another commonly used interactive element is a dynamic text field that has the capability to scroll if it contains more text than it can display. As you probably know by now, Flash 5 does have built-in dynamic text fields, and these dynamic text fields have built-in scroll functionality. However, you do have to do a little coding to get the fields to scroll. In this section, you walk through how to set up and code a dynamic scrolling text field.

Setting up a scrolling text field is easy. All you need to do is the following:

1. Create a dynamic text box.

2. Assign a variable name to the text box.

3. Assign some text to the variable.

4. Use the scroll and maxscroll properties with a couple of buttons (or a slider) to control the scrolling.

That's really the gist of the whole process. Of course, you can make it as complex as you want. In fact, in the exercise that follows , you make buttons visible and invisible depending on the values of scroll and maxscroll.

As you might have guessed, the key here is the scroll and maxscroll properties of the dynamic text boxes.

Exercise 17.8 Creating the Text Field, Assigning a Variable Name, and Sending Text to the Variable

Before you can start worrying about scrolling your text, you need to set up the dynamic text box on the Stage.

1. Open textScroll.fla from the Chapter_17/Assets folder on the CD.

2. Change the name of layer 1 to text field.

3. Select the Text tool and open the Text Options panel (Window > Panels > Text Options). For Text Type, select Dynamic Text. Don't worry about the other options for the moment.

4. Draw a text box on the Stage; make it roughly 200200 pixels.

5. With the new text box selected and the Text Options panel open, assign a variable name of text to the text box.

6. Now you can set up the formatting for the text box. With the Text Options panel open, change the following settings:

   Line Type: Multiline

   HTML: Selected

   Border/Bg: Selected

   Word Wrap: Selected

   Selectable: Not Selected

7. Add a new layer to the main timeline and name it Actions. One last thing you need to do is add some data to your text variable so that something actually shows up in your text box. Rather than do a lot of data entry, just copy the text in scroll.txt in the Chapter_17/Assets folder on the CD. Make sure that you do not have word wrap turned on in your text editor when you do this (the returns that get inserted mess up your code). Paste this code into frame 1 of the Actions layer.

8. Save and test your file.

   Your text box should be filled with the data you copied from the scroll.txt file. (See Figure 17.6.)

   Figure 17.6. The dynamic text box with data loaded from a variable.

   

Adding the Basic Scrolling

Now that you have the basic text box set up, you just need to tell it to scroll.

Exercise 17.9 Setting Up the Scrolling

If you open the Library, you'll see two symbols: scrollButton and scrollMC. You use these to set up the scrolling functionality of your text field.

1. You still should be in textScroll.fla. Add a new layer and name it Scrolling.

2. With the Scrolling layer selected, drag two instances of scrollMC from the Library onto the Stage. Position one instance of the movie clip next to the upper-right corner of the text box. Position the second instance next to the lower-right corner of the text box and flip it vertically so that it points down. (See Figure 17.7.)

   Figure 17.7. The text box with the scroll buttons in position.

   

   Now you need to add some code to scrollMC so that it knows how to handle the scrolling operation. When one of the scrolling buttons is pressed, you want the text to scroll. You want the text to continue to scroll until the button is released. You'll set up a variable named down to monitor whether one of the buttons is currently pressed. The actions are going to be the same for both buttons, so you can edit the original symbol in the Library.

3. Double-click scrollMC in the Library. Select the scrollButton on the Stage and launch the Actions panel. When the button is being pressed, you want down to be equal to true. When the button is released, down should be set to false. Enter the following code:

    on(press){     down = true;  }  on(release,releaseOutside){     down = false;  } 

   All dynamic text fields have a built-in property called scroll. To make the text scroll, you simply increment or decrement this property of the text field. In this situation, you want to increment or decrement the scroll property of the text field while the variable down is true. To do this, you need to constantly monitor the state of the down variable. You had to wrap the buttons inside movie clips so that you could use the onClipEvent(enterFrame) to constantly monitor them.

4. Go back to the main timeline and select the button that has the arrow pointing down. Open the Actions window and enter the following code:

    onClipEvent(enterFrame) {     if (down) {         ++_root.text.scroll;      }  } 

5. If down is true, you're continually incrementing the value of the scroll property. Go ahead and save and test your movie. Your text should scroll happily as long as the lower button is pressed.

6. To do the equivalent for the button that points up, all you have to do is copy the code you just entered and change it from an increment (++) to a decrement (--):

    onClipEvent(enterFrame) {     if (down) {         --_root.text.scroll;      }  } 

7. Save and test your file. You now have a fully functional scrolling text box.

Now that you've mastered the basics of scrolling text boxes, you can go back in and tweak your code to make it a bit more functional.

Making the Scroll Buttons Disappear

Wouldn't it be nice if you could set it up so that the movie clips with the scroll buttons were visible only when you needed them? When you're on the first line, you don't need the scroll up movie clip. When you're at the bottom of the text, you don't need the scroll down movie clip. It's not difficult at all to set up. You just need to change the condition in your existing if statement and add a second condition. Then you throw in an alternative if neither of the first two conditions are met:

1. Instead of just checking whether down is true, add in a check to make sure the movie clip is visible as well. If both are true, scroll the text.

2. If you've scrolled as far as possible in either direction, set the visibility of the movie clip to false.

3. Otherwise, just set the visibility of the movie clip to true.

In the next exercise, you make the buttons disappear as soon as they're no longer necessary.

Exercise 17.10 Scrolling Up and Down

The statements for scrolling up and down are going to be slightly different. If scroll and maxscroll have equivalent values, you've scrolled as far down as you can and you can make the scroll down button invisible. If scroll is equal to 1, you're at the top of the scroll list, and you can make the scroll up button invisible.

1. Select the down-pointing scrollMC and launch the Actions panel. Your code currently looks like this:

    onClipEvent(enterFrame) {     if (down) {         ++_root.text.scroll;      }  } 

   You just need to add the check for visibility to the existing if statement:

    onClipEvent(enterFrame){     if (this._visible && down){         ++_root.text.scroll;      }  } 

2. Next, add the if else statement (between the asterisks ) that checks whether scroll and maxscroll are equal. If they are, make the movie clip invisible; if not, make sure the visibility is set to true:

    onClipEvent(enterFrame){     if (this._visible && down){         ++_root.text.scroll;      }  //***************************************************      if (_root.text.scroll == _root.text.maxscroll){         this._visible = false;      }else{         this._visible = true;      }  //***************************************************  } 

3. Repeat Step 1 for the up scrollMC.

4. Repeat Step 2 for the up scrollMC, but change the condition in the if statement to this:

    if (_root.text.scroll == 1) 

5. Save and test your movie.

You have the same functionality as you did before, but now with the added twist of the buttons disappearing when they're not needed.

So far, so good. However, if you're going to have a scrolling text field on your page, you might want to periodically replace the contents of the text field. Opening up the FLA file, replacing the text in the variable, and generating a new SWF file would be a pain. Why not start by uploading the text from an external file?

Loading the Text from an External File

Loading the text from an external file is the most efficient way of setting up your scrolling text field. Why? Because it means you can easily update the scroller with new information by just making changes to the data going in, not by updating the Flash file itself. There are a couple different approaches you can take to accomplish this:

• Load a simple text file created in Notepad (Windows) or SimpleText (Macintosh).

• Load a text file generated from a database using middleware, such as Macromedia's ColdFusion, Microsoft's Active Server Pages (ASP), Perl, PHP, or any language that can generate a simple text file.

What kind of changes do you need to make to your existing movie to make this work? There really are only four tasks that you have to worry about:

1. Embed your existing scrolling text field and buttons in a movie clip and give the new movie clip and instance a name.

2. Add Actions to your new movie clip to tell it what to do when the data loads.

3. Change the Actions attached to the buttons to reflect that they now are embedded inside another movie clip.

4. Remove the variable in frame 1 of the main timeline and replace it with a loadVariables() call to the text file you want to use.

Whenever you load variables or movies into your Flash movie, you need to understand that the values of the variables are not instantly available for you to use; they have to load first, and that takes time. This is known as latency . Latency happens. You have to know how to deal with it.

Fortunately, when you're working with movie clips, you have a method onClipEvent(data)that you can use to check whether the data you requested has loaded. The actions you place inside this clip event don't get processed until all data has finished loading. That way, you don't run the risk of trying to access a variable before it's available.

You can load your variables by attaching the loadVariables() method to either the main timeline or as part of a load clip event on your movie clip. Both ways work.

The format of the text file is important. The extension on the file is not. That means that as long as the text in the file is in the proper name/value pair format, the file can be created as a .txt, .asp, .cfm, .pl, .php, or whatever kind of file; it doesn't matter. The format for the name/value pair in the text file should look like this:

 text=This is some text. Spaces are okay. 

Note that there are no quotes around the text string. If you put quotes around the text string, it's not going to work. If you do put quotes around the string and you've selected the HTML option on the Text panel, the only thing that will be returned is <p align="left"></p>. If the HTML option is not selected, a blank is returned. That being said, quotes inside the text string are usually acceptable. If you need to have a whole string appear in quotes, you need to URL-encode the quotes (%22 in place of the quote mark). The URL encoding is just the % hexadecimal equivalent of a character. You'll find that certain other characters won't print out the way you want them to; you might have to URL-encode them as well. You can find a URL-encoding table here:

http://www.macromedia.com/support/flash/ts/documents/url_encoding.htm

In the next exercise, you set up the script to load a text for the scrolling text field from a simple text file.

Exercise 17.11 Loading the Text from an External File

If you set up your Flash file so that the text loads from an external file, you can quickly provide fresh content to your movie without ever having to open it again. The changes you need to make to your file are relatively minimal.

1. You can either use the same file you were working with in the previous exercise or open textscroll_final.fla from the Chapter_17/Assets folder on the CD.

2. The first thing you need to do is convert your existing content into a movie clip. Select the text box and both buttons and choose Insert > Convert to Symbol from the main menu. Select Movie Clip behavior and name it scrollMovie.

3. You already know that you need to be able to communicate with your new movie clip, so you need to give it an instance name. Select the new movie clip on the Stage, open the Instance panel (Window > Panels > Instance), and give it an instance name of scrollMovie.

   Tip

   You've probably noticed that when I have a single instance of a movie clip on the Stage, I always make the movie clip name and the instance name the same. It just makes it easier to remember what's where. When I have multiple instances of the same movie clip on the Stage, I give them the same name but attach incremental numbers to the end: scrollMovie1, scrollMovie2, and so on. That way, they're easy to reference with ActionScript.

4. Next you need to do something about those buttons. Because they're now nested inside another movie clip, the paths to the text box have to be adjusted. Double-click the movie clip to open it, select one of the buttons, and in the Actions panel, change all references from:

    _root.text 

   to:

    _root.scrollMovie.text 

   Select the other button and do the same thing.

   The actions for the scroll up button now look like this:

    onClipEvent(enterFrame){     if (this._visible && down){         --_root.scrollMovie.text.scroll;      }      if (_root.scrollMovie.text.scroll == 1){         this._visible = false;      }else{         this._visible = true;      }  } 

   The actions for the scroll down button now look like this:

    onClipEvent(enterFrame){     if (this._visible && down){         ++_root.scrollMovie.text.scroll;      }      if (_root.scrollMovie.text.scroll ==      _root.ScrollMovie.text.maxscroll){         this._visible = false;      }else{         this._visible = true;      }  } 

5. Next you need to load the variables from the text file and let the movie clip know when the text field is ready to display. Go back to the main timeline and select frame 1 of the Actions layer and launch the Actions panel.

6. Delete everything in the Actions list. You're going to enter two lines of code. The first line makes the movie clip on the Stage invisible so that you don't see the text box until the data is loaded. The second line loads the data. Add the following code to the Actions list:

    _root.scrollMovie._visible = false;  _root.scrollMovie.loadVariables("scrolla.txt"); 

   Tip

   You don't have to have your loadVariables() call on the main timeline. You can just as easily attach it to the scrollMovie movie clip using onClipEvent(load):

    onClipEvent(load) {     this._visible = false;      _root.scrollMovie.loadVariables("scrolla.txt");  } 

7. Notice that you're loading the variables to a targetthat target being your movie clip instance on the Stage. You need to know when the data has finished loading. You do that with onClipEvent(data).

   Select the movie clip on the Stage and enter the following code in the Actions list:

    onClipEvent (data) {     this._visible = true;  } 

   This code waits until the data has been loaded into the movie clip and then makes the movie clip visible. This way, the user never sees an empty scroll box.

8. One last thing to do before you test your new movie. You have to copy the text file into the same directory that your Flash file is in. The file you want to copy is scrolla.txt in the Chapter_17/Assets folder. Notice that there are two other files out there as well: scrolla.cfm and scrolla.asp. The first file was generated by a ColdFusion query, the second by an ASP query. You can use either of these as well; you just have to change the filename in the loadVariables() call.

9. That's it. Test away.

Try modifying the text file and then launching the SWF file. Your text has changed, and you didn't need to reopen the FLA file or generate a new SWF file. That's a powerful new option for keeping content on your site fresh!