Tutorial details:
Written By: Patrick Mineault
Author e-mail:
Author website: www.5andahalf.com
Time: 45 minutes
Difficulty: Intermediate
Requirements: Flash 5
Topics covered: text boxes, onClipEvents, scroll and maxscroll
Assumed knowledge: variables
Download FLA

Actionscript for Flash 5 dummies: Scrolling a text box II

Welcome to the second installment in the Actionscript for Flash 5 dummies series, scrolling a text box II. You'll need to read (and hopefully understand) the first tutorial before going on with this one; it's linked in the Related Articles at the bottom of this page.

I'm glad to say I've gotten some very positive feedback from people, so I would like to announce that the Actionscript for Flash 5 dummies series is here to stay; if I'm not too busy, I'll try and write a tutorial every two or three weeks. You can send a blank e-mail to with "subscribe" in the subject line if you wish to be reminded of any new tutorials.

Today's tutorial will build on what we learned last time on scrolling a text box. Mainly, we'll modify the script in three points: loading the text from an external text file, getting rid of the hand cursor, and adding a scrollbar. These three points were suggested to me by readers of the first tutorial. Unfortunately, they are not as easy to create as a simple scroller; I'll try my best, however, to explain them in an easy to understand way.

The Movie

Without further ado, here's the movie we're going to make:

As you can see, there's a lot of functionality added, as well as easier management because of the external text file. Don't worry though, whilst it is true that a lot of code has been added, it should be pretty easy to understand, provided you have a sufficient amount of coffee handy.

Get your old .fla file ready from the last tutorial, as we'll start adding the actionscript.

Step 1: Loading an external text file

Hard-coding your text may be easy, but it sure makes updating a pain in the buttocks. Therefore, we'll be using an external text file which we'll load into Flash at run-time. Let's get going.

Using the technique described last tutorial ( ...list variables, remember?), copy your text into an empty Notepad, or similar plain text editor. Your entire text should be on one line, unless you have word wrap turned on. Keep this instance of Notepad open, you'll need it later.

You'll need to make some adjustments to the text in order to load it into Flash. You see, when you hard-code text into Flash, the program uses certain encoding entities for characters, so that it won't interfere with scripting. You need to un-encode these entities before putting your text inside of a text file. These entities are , " and ', which need to be changed to , ", and ' respectively. This will turn your text into the so-called "literal" representation of your text.

Additionally, you'll need to encode your literal text using URL-encoding. URL-encoding consists of replacing "at-risk" characters with their hexadecimal ASCII codes preceded by the percent (%) sign. "At-risk" characters consist of some symbols, like &, %, =, which have special meaning in the context of URL-encoding, as well as characters in the top half of the ASCII table, like ÀÉÖÇ, who tend to get butchered on systems with non-standard character sets, in particular MacOS. You can get a list of characters and their URL-encoded equivalents at Macromedia.

If the preceding sounded like chinese, don't worry. Being a nineteen year old college dropout with no job, girlfriend or social life, I've used my spare time to make a little Windows application that will take care of the gory details of reformatting text into a usable form. You will find, in the attached zip file, a file called textformatter.exe. You can extract it on the desktop. Double-click on it from there. You should see a blue screen of death followed by a prompt saying: "Your computer will now explode in 5 seconds. Mouhahaha". Just kidding. Seriously, you should see this:

Select the text you copied into Notepad, and then in the Text formatter app, press "Paste from Clipboard" to paste the text into the textbox. You can then press on the "URL-encoded text" tab to translate the text into a form usable for inclusion in a text file. Then press "Copy to clipboard", and back in Notepad, paste it.

What you say? The app doesn't work? You're on a Mac? You're afraid the app will scan your hard drive for porn and then send everything it finds to everyone in your Outlook address book, along with a message that says "<person> sucks!"? Well, don't worry, I've thought about you too. You'll find a Flash version of the formatter, textformatter.swf, in the zip file as well. Be aware though, because it uses Flash's super slow string functions, it takes a while to refomat the text, and on large text files it tends to crash.

All right, now that you have your reformatted text in Notepad, add "daTextBox=" (without the quotes) at the beginning of your text. Save this file as "text.txt" in the same directory where you will add your movie later.

Your text should now look like this:

 

<plug> Before you ask, no, that is not Notepad, but rather an excellent Notepad replacement by the name of Metapad. It's only 70k, and its block-indenting options are perfect for coding. Best of all, it's free. You can get it at: http://welcome.to/metapad/ </plug>

Now that your text is ready, you'll need to update containerMC's actionscript (old code is grayed out):

onClipEvent (load) {
    this.loadVariables("text.txt");
    scrolling = 0;
    frameCounter = 1;
    speedFactor = 3;
    refreshRate = 12;
    refreshCounter = 0;
    refreshLastMaxScroll = 0;
    loaded = false;
}
onClipEvent (enterFrame) {
    if (loaded) {
        if (refreshCounter%refreshRate == 0 && daTextBox.maxscroll != refreshLastMaxScroll) {
            //Scrollbar should be refreshed here
            refreshLastMaxScroll = daTextBox.maxscroll;
            refreshCounter = 0;
        }
        refreshCounter++;
    }
    if (frameCounter%speedFactor == 0) {
        if (scrolling == "up" && daTextBox.scroll>1) {
            daTextBox.scroll--;
        } else if (scrolling == "down" && daTextBox.scroll<daTextBox.maxscroll) {
            daTextBox.scroll++;
        }
        frameCounter = 0;
    }
    frameCounter++;
}
onClipEvent (data) {
    loaded = true;
}

Not much anything new, is there? Yes, that is a relief.

The first thing that we added is the loadVariables statement. This loads the variables from the text.txt file. Now, when Flash opens the text file, it sees daTextBox=blablabla, so it sets the internal variable daTextBox to «blablabla». Note that we use the "this" operator, which refers to the current clip, to show Flash that we want the variables loaded into containerMC, not in the main timeline or in some other clip.

This single line asks Flash to load the text file into the movie. Now, remember that we will tie this in later with a scrollbar, and the scrollbar will vary in height depending on how long the text is. So we would like it, later on, that the scrollbar be updated to reflect the length of the text, first when the text is loaded, and then every half-second or so after that.

This way, if we reload other text into the textbox, then the script will catch the event half a second later and update the scrollbar accordingly. Neat, huh? Now, of course, since we don't to unnecessarily put too much pressure on the CPU, we'll only update the scrollbar if the length of the text has changed since last time we checked.

So let's look at how we accomplish this. First, in the load clip event, we define some variables that we'll use later on in the script. You'll need to change the refreshRate so that it will be half of your movie's frame rate. My movie is set to 24 fps, so I set refreshRate to 12.

We set loaded to false, since there's no use in updating the scrollbar if the text isn't loaded yet. Now, in order to find out when the text is loaded, we introduce a new clip event, the data clip event. This event will be fired automatically when the text is loaded. Hence, we set loaded to true when the event is fired.

Now, for the hard part. In our enterFrame clip event, which, as you remember, is fired on every frame, we first check to see if the text file is loaded. If it is, then we check if:

a) It is time to refresh the scrollbar
b) The scrollbar needs to be refreshed

The way we accomplish point A is by checking if our frame counter can be divided by our refresh rate. We use the same principle we did when we wanted to slow down the scrolling of our text box in the last tutorial.

For point B, we check if the length of our text is different then the last time we checked by looking at daTextBox's maxscroll property.

If so, then the scrollbar would need to be refreshed, and we'll introduce this in the last part of this tutorial. For now, we just reset our refresh counter and the variable that holds the previous length of the text. We finish by incrementing our refresh counter.

This will take care of updating the scrollbar every half second. You might be wondering, however, what will happen when the text is first loaded. Well, we initialized our variables in the load clip event in such a way that the first time our text is loaded, the if will be true, and the updating of the scrollbar will be done immediately. Sneaky, eh?

That wasn't too hard now, was it? It's time for some hardcore ActionScript.