Tutorial details:
Written by: Jesse Stratford
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:
    _level0.masker.contentText:contentText = "Some text here";
  • Two instances of a button on the main stage. I've used an arrow. Suit yourself.
    • The up button should have this code attached:
      on (rollOver) {
       direction = -1;
       _level0.fatController.gotoAndPlay(2);
      }
      on (press, release, releaseOutside, rollOut, dragOut) {
       _level0.fatController.gotoAndStop(1);
      }
    • The down button should have this code:
      on (rollOver) {
       direction = 1;
       _level0.fatController.gotoAndPlay(2);
      }
      on (press, release, releaseOutside, rollOut, dragOut) {
       _level0.fatController.gotoAndStop(1);
      }
  • One instance of a MC, with an instance name (I called it 'fatController') with 3 frames and the following code:
    • Frame 1:
      stop();
    • Frame 2:
      _level0.masker.contentText._y =
      _level0.masker.contentText._y+(_level0:direction*5);
    • Frame 3:
      _level0.masker.contentText._y =
      _level0.masker.contentText._y+(_level0:direction*5);
      gotoAndPlay (2);
  • 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*...