Tutorial details:
Written by: Jesse Stratford
Time: 10 - 15 minutes
Difficulty Level: Intermediate
Requirements: Flash 5.
Topics Covered: How to make a continuously scrolling text field which works with HTML and dynamic texts.
Assumed knowledge: LoadVariablesNUM, text fields, variables, conditional clauses, buttons and button actions.

The above movie scrolls HTML text loaded from a text file. Grab the source for this and the standard text scroller here (you will need it).

This tutorial is to replace my previous method of scrolling text which was really just poorly conceived on my part. My apologies for that. In this tutorial I'll show you (briefly coz I'm busy today) how to scroll text. The examples I use are continuously scrolling because I hate having to click a button 100 times to see the last line of code but if you don't want to use continuous scrolling, I'm sure you can figure out the necessary adaptations...

Our beloved Macromedia are good to us. They listen to what developers request and rat out little extra functions which will make Flash better, then include them in the new releases. This is true of the .scroll element which originally appeared in Flash 4 but wasn't really well known or commonly used (don't ask me why, I love it). The .scroll element, given a path to a text field allows us to increase or decrease the 'index' of the line of text currently being shown. That's Jargon for "let's us scroll up or down". The only problem with the .scroll element is that it only moves X number of lines, and it doesn't do it smoothly, it just jumps from one line to the next. This just as practical as a fancy looking scroll down effect but the later is more visually appealing so we're going to investigate how to do it.

Open the scroll_text.fla file you just downloaded. If you can't open the file for some reason, create this scenario:

  • A dynamic text field on the main stage which shows/stores the variable 'text'. It should be non-HTML (for the moment), multi-lined with word wrapping.
  • A variable 'text' which stores some random string of text. Note that the text must have line breaks in it or contain enough text to auto-wrap around, otherwise why would you be trying to scroll it?
  • Two buttons, one up, one down. The up button has this code:
    on (rollOver) {
     _root.up = true;
    }
    on (press, release, releaseOutside, rollOut, dragOut) {
     _root.up = false;
    }

    The down button has this code:
    on (rollOver) {
     _root.down = true;
    }
    on (press, release, releaseOutside, rollOut, dragOut) {
     _root.down = false;
    }
  • A movie clip (no instance name necessary) which has 5 frames. Frames 1 - 4 inclusive are blank and frame 5 has this code:
    if (_root.up) {
     _root.text.scroll += 1;
    } else if (_root.down) {
     _root.text.scroll -= 1;
    }
    gotoAndPlay (1);