Tutorial details:
Written by: Jesse Stratford [email:jessestratford@actionscript.org]
Time: 25 minutes
Difficulty Level: Intermediate
Requirements: Flash 4 or 5.
Topics Covered: Scrolling objects including graphics symbols and text dynamically.
Assumed knowledge: buttons, basic button actions, masks, looping MCs, getPrperty and setProperty, tellTargets..

NB: By my own admission this is a bit of a bad way to scroll text, it's good for graphics but not so good for text for various reasons. I've made a new one on text scrolling, go back and you'll see it in the Intermediate section. Also note that this version will scroll forever. If you want it to stop at the top and bottom of your object you need to go through this workaround (please read it all before posting questions on the forums). Cheers - Jesse

Download the source for the above movie here. (Zipped, PC Flash 5 file).

[Rant] There's a rant in the scrolling text field above about why I decided to write this tutorial. I really just used that because I couldn't think of any other text for my field :o) [/Rant]

This tutorial covers scrolling objects including graphic/movie clip symbols and the good old text field. It uses basic getProperty and setProperty principles and masks. If we're talking about text, this tutorial will allow you to scroll dynamically loaded text, such as that loaded from a server-side text file, as it doesn't use motion tweens. The only limitation of this tutorial that I know of is that it, if your text is going to be really long, you need to make the text field larger, but once you do this once, it will work for all really long text strings. So let's get going!

Start by downloading the source. As always it's a Flash 5 file. If, for some reason you can't use my source then create the following structure, the code I will explain later, just make it for now.... (Those of you with the source can skip these dot points):

• The following code on the first keyframe: [as]_level0.masker.contentText:contentText = "Some text here";[/as]
• Two instances of a button on the main stage. I've used an arrow. Suit yourself.
  
  • The up button should have this code attached: [as]on (rollOver) {
    direction = -1;
    _level0.fatController.gotoAndPlay(2);
    }
    on (press, release, releaseOutside, rollOut, dragOut) {
    _level0.fatController.gotoAndStop(1);
    }[/as]
  • The down button should have this code: [as]on (rollOver) {
    direction = 1;
    _level0.fatController.gotoAndPlay(2);
    }
    on (press, release, releaseOutside, rollOut, dragOut) {
    _level0.fatController.gotoAndStop(1);
    }[/as]
• One instance of a MC, with an instance name (I called it 'fatController') with 3 frames and the following code:
  
  • Frame 1: [as]stop();[/as]
  • Frame 2: [as]_level0.masker.contentText._y =
    _level0.masker.contentText._y+(_level0:direction*5);[/as]
  • Frame 3: [as]_level0.masker.contentText._y =
    _level0.masker.contentText._y+(_level0:direction*5);
    gotoAndPlay (2);
    [/as]
• A movie clip with instance name 'masker'.
• A sub movie clip with instance name 'contentText'
  
• A Dynamic Text field which holds the variable contentText, to which the path is now: _root.masker.contentText:contentText . Get it?
• A showing mask which covers a few lines of text (or a small amount of the graphic we're scrolling). This structure I will explain later.

Some of the code above has been placed over multiple lines for tutorial neatness, in Flash it will probably revert to one line, that's OK.

Now that that's out of the way let's get on to learning how this neat little function works!

Turn the page *bing*...

Remember Thomas The Tank? Sure you do! And remember The Fat Controller who used to order him about, and talk without moving his lips and... sorry I'm getting off the point. Our Fat Controller clip is just like this, it's going to order our text field about. To be more precise it will order about the movie clip within which the text field (or graphic) lives. For the purpose of this example, because I want the field to continue scrolling without the user having to click over and over, I've made the commands in a looping MC which, when told to begin giving commands, will continually give commands until it's told to stop.

This is what we achieved in frames 2 and 3 of the fatController clip. Which have this code:

[as]_level0.masker.contentText._y =
_level0.masker.contentText._y+(_level0:direction*5);[/as]

Note the above code has been put on two lines for tutorial neatness, in Flash it should all be on one line.

So this code first gets the current _y position (which is a numerical pixel value) of the movie clip containing our text field, then adds or subtracts 5 pixels, thus making the text field move up or down. We control whether pixels are added or removed using the variable I've named direction which is set to either 1 or -1. When set to -1 this means that the clip is moved up the screen, because -1 * 5 = -5. So we're adding a negative value, which is like subtracting. That's maths. Remember maths?

But fatController is lazy, so it's first frame is a stop action. If we don't tell it to do something it will sit around doing nothing. That's where our button auctions come in. Take the up button for example. It has the following code:

[as]on (rollOver) {
direction = -1;
_level0.fatController.gotoAndPlay(2);
}
on (press, release, releaseOutside, rollOut, dragOut) {
_level0.fatController.gotoAndStop(1);
}[/as]

So, on roll over, this button sets our direction variable to -1, so our text will move up the screen. Then it tells the fatController to get a move on! It plays fatController at Frame 2 which has our Y position incrimentation code, as discussed above. Frame 3 does the same and loops back to Frame 2. This loop continues and causes regular 5 pixels movements in the Y position of our clip. This gives the scrolling effect.
The second part of the button code tells the fatController to take a rest when the users moves the mouse off the up button. fatController then goes back to it's first frame, which has a stop instance, for a rest. Note that I've put a whole lot of events in the second on() tag. This is so our code wont stuff up if a user moves over the button, clicks and then moves out, or clicks and drags out, or some other weird, unpredictable scenario. This just makes our code function better in all environments, the only event you really need to include is rollOut.

Finally, the text field is dynamic so we can change the text easily. I've set the initial value in the first keyframe of the main stage, but you could just as easily use loadVariablesNUM() to load in a text file whose text you wish to show in the text field.

Not too hard hey? If you have questions post the on the forums please, rather than emailing me directly.

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.