Tutorial details:
Written by: Jesse Stratford [email:jessestratford@actionscript.org]
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: [as]on (rollOver) {
  _root.up = true;
  }
  on (press, release, releaseOutside, rollOut, dragOut) {
  _root.up = false;
  }[/as]
  The down button has this code: [as]on (rollOver) {
  _root.down = true;
  }
  on (press, release, releaseOutside, rollOut, dragOut) {
  _root.down = false;
  }[/as]
• A movie clip (no instance name necessary) which has 5 frames. Frames 1 - 4 inclusive are blank and frame 5 has this code: [as]if (_root.up) {
  _root.text.scroll += 1;
  } else if (_root.down) {
  _root.text.scroll -= 1;
  }
  gotoAndPlay (1);[/as]

Now that you are all looking at the same scenario let's observe how it works. First let's look at the simplest example (you can make a sample of this if you like but it isn't necessary). If I had a text field which stored the variable 'text' which maybe 10 lines and I wanted to have a button which scrolled down through that text, as stated earlier I can use the .scroll element. That's great you think, but how? Well I'll show you how. The .scroll element is used infix (you give it a path first) and works in this manner: [as]_root.text.scroll = 2;[/as]

This code effects the root level text field which stores the variable 'text'. In the example above it will set the line in the topmost portion of the field to line 2, whatever that happens to say. Note that it doesn't delete line 1 or anything serious like that, it simply moves it out of the way so now we can see line 2 (and anything below that if the text field is big enough). Similarly, take this example:

[as]_root.text.scroll = 10;[/as]

This makes the topmost line in the field line 10 of the text. And so on the story goes. Get the hang of it? So if I want to show the next line in a text field (next = this + 1) I can use this code:

[as]_root.text.scroll = _root.text.scroll + 1;[/as]

or alternatively, this code which does the same:

[as]_root.text.scroll += 1;[/as]

This will make the text field show the next line, provided there is a next line. If I put this code on a button and click it twice, it would show line 3 (we start on line 1, 1+1+1 = 3). If the text has only 5 lines and I click this button 6 times, it will just stay on line 5. If I click it 100 times it will just stay on line 5.

So now you can see that by somehow looping this code we can make a script which will scroll slowly through our text. This is where our Controller clip comes in. My controller in the example has 4 empty frames followed by a keyframe with this code:

[as]if (_root.up) {
_root.text.scroll += 1;
} else if (_root.down) {
_root.text.scroll -= 1;
}
gotoAndPlay (1);[/as]

Assuming you know about variables and paths, this code checks (each time this frame is reached) whether the variable up or the variable down is true and then changes the .scroll element of our text field accordingly. It also sends the controller clip back to Frame 1, which then plays through to Frame 5 and effects an infinite loop. So why the 4 blank frames? I could easily have made this a 2 frame MC or used onClipEvent (frameEnter) but this would make the .scroll element change every frame. If you are running your movie at the standard of 12 frames per second, that's 12 lines you'll scroll through each second, making it a bit difficult for the end-user to read the text before it's scrolled off the screen. You can increase or decrease the number of empty frames as per your liking.

So we now know that this code will scroll the text up if the up variable is true. But how does the up variable come to be true? We set it so with a button, that's how! And for this example I've made my button set it to true when it is moused over. Also, on mouse off the up variable is set back to false because otherwise the field would keep scrolling! So here's what the code looks like:

[as]on (rollOver) {
_root.up = true;
}
on (press, release, releaseOutside, rollOut, dragOut) {
_root.up = false;
}[/as]

You'll notice I've included a long list of possible events to set the up variable back to false, that's just to be entirely sure it is set back on mouse out. If you want the button to perform some other action on release for example, you can remove the release handler from the above code and add your other actions under a new on (release) handler.

Finally, note that the HTML example also loads the text variable from a text file and uses HTML formatting on the dynamic text field. You have to check the HTML box in this example or the HTML won't work properly, but you knew that I'm sure.

That's really about it. I don't think any more explanation is needed and my dinner smells inviting so I'm going to go eat it! If you think of anything that needs to be added to the tutorial, email me. If you have questions or need further info post on the forums, don't email me questions please, I get enough email as is.

Jesse Stratford [email:jessestratford@actionscript.org] is the Co-Master of ActionScript.org and a freelance Flash developer and teacher. He is based in Australia and enjoys all things Flash. NB: If you have comments or feedback please feel free to email me, but please do not email me Flash questions; the forums are provided for that purpose and you will get a faster answer by posting you question there.

If you have found this tutorial helpful, I hope that you will take 30 seconds to visit The Hunger Site where, with just one click you can make a free donation of food to a starving person in a third-world country. We do not benefit financially from this action; it is purely an act of charity.

This tutorial is protected by International Intellectual Property Rights laws and may not be reproduced or redistributed in full or part, without the prior written consent of the author. Unauthorized reproduction of this tutorial or its contents may result in prosecution. I've worked hard on this tutorial, please don't steal it.