First time here? First time here? Newsletter Signup Newsletter
Search tutorials
Author: Martin Tremblay

Object-oriented Scrollee
an introduction to object-oriented actionscripting

1.One simple little movie clip

Create a new movie clip.

This movie clip will be the little screen where your text is going to be displayed. You need a background. In my case, it's a simple blackbox on layer called image. You need a dynamic text object (). For greater flexibility, add a new layer and call it text. Put the dynamic text box on it and name the variable txtScrollee.

Then put this movie clip on the stage and name it mcScrollee.

2. A different kind of actionscript

Object-oriented programming is the basis for some of the most powerful langage like C++ and Java. The movie clip library and the instance of Flash can be seen as a graphical representation on object-oriented development.

Create a new layer on the stage and name it FScrollee. This layer won't be use to display graphic, only actionscript.

The first step in creating an object is to code the constructor. The constructor usally contains the basic element for using this object. In our case, we need at least the name of the movie clip we are going to use to display our text.

FScrollee = function (mc, maxString, waitingFrame)

this.mc = mc;
this.waitingFrame = waitingFrame;
this.maxString = maxString;

this.text = "";
.currentLetter = 1;
this.wait = 0;


The constructor receive 3 arguments : mc, maxString and waitingFrame.

mc : The movie clip used to display our text.

maxString : maximum length of the text that can be shown on the screen.

waitingFrame : number of frame before the scrollee restart.

For now the only interesting argument is mc, which correspong to movie clip we create in step 1. The variables preceded by this are called properties. We are already familiar with theses kind of variable. When we modified the scale of a movie clip, we access the ._xscale and ._yscale of this movie clip which are properties of the movie clip.

Now that, we have constructed our object, we need to give it something to do. We will create custom function for this object. We call these functions methods.

We will first add a method to set the text of the scrollee.

FScrollee.prototype.SetText = function (text)

this.text = text;


As you see, this is quite simple. Of course, we don't really need a function to do this, but it helps encapsulate your object. Code encapsulation usally help maintain data integrity and make your code more generic. We will add a functionnality to our method.

FScrollee.prototype.SetText = function (text, bReset)

//Default value for bReset is true

if (arguments[1] == null)
bReset = true;

this.text = text;

if (bReset)
this.currentLetter = 1;


When we change the text we can now reset the scrollee. When bReset equals true, we will reset the scrollee and the scrollee will continue interrupted we it equals false.

The first if contains a strange expression (arguments[1] == null). It means that if the method does not receive two arguments, the method imply that the user want to reset the scrollee. So by default, bReset == true. The null value means that a variable does not have a value (null does not equal zero, it's equals nothing !!! ).

We now need to display the text.

FScrollee.prototype.Display = function ()

if (this.currentLetter <= this.maxString)
this.mc.txtScrollee = this.text.substr( 0, this.currentLetter );
this.mc.txtScrollee = this.text.substr( this.currentLetter - this.maxString, this.maxString );

//if we have reach the last letter to display, we wait...
if (this.currentLetter == this.text.length)
if (this.wait < this.waitingFrame)
this.currentLetter = 1;
this.wait = 0;


The four first line do all the job. This is how it work. The substr method which come with the actionscript String object returns part of a string. The first argument the position of the first letter to "extract" and the second argument is the length (the number of letters you want to extract).

So if the text I want to display is "Scrollee 1.0 - An introduction to object-oriented actionscript" and this is my first display. Let's see want the variable of the mc will be depending of the value. Let say our maximum display range is 10, so this.maxString value is 10.

this.currentLetter this.maxString this.mc.txtScrollee
1 10 S
5 10 Scroo
8 10 Scroolee
16 10 ee 1.0 - A
21 10 0 - An int
35 25 .0 - An introduction to o

Don't forget. Space count as letter.

The second part of the method is a waiting block... (very easy to understand, very boring to describe)...

We now have all the method we need to create our scrollee.

3. Using the FScrollee object

We may have create the basis for our object but we are not using it... yet. Now we do.

Create a third layer and name it mc_variable. This layer will contains only code, no gfx. Put this layer UNDER the layer name FScrollee. Since we will use the code of the object, Flash needs to know what is this object before we can use it. On this layer, instanciable your FScrollee object.

var scrollee = new FScrollee (mcScrollee, 15, 20);

scrollee is now the variable containing one instance of FScrollee. The operator new will reserve some memory to store the property of your object.

You remember that the constructor of FScrollee needed three arguments:

mc : The movie clip we created (mcScrollee) will be the base mc for this object.

maxString : The max number of displayable letters (15).

waitingFrame : We will wait 20 frames after the scrollee have display all letters.

We will now set the text for our object using the method we created.

scrollee.SetText ("All work and no play makes Martin a dull boy");

4a. The empty movie clip looping technique

We need to display are scrollee. There is two techniques.

With the empty movie clip looping technique, you create a need movie clip and you put it on the stage. The movie clip don't have any graphic in it, only two empty frames. In the first frame, you call the Display method of our object.


Since our object is on the stage, we need to go back one step. the _parent specify the relative path to access the scrollee object.Without this specification, the actionscript interpretor would have inside the empty movie clip for something call scrollee and since there's none, he would not have done anything.

The second frame loop on the first.


The Display method is call at each frame.

4b. The smart clip technique

You can also using the Smart Clip functionnality added in Flash 5. You don't need to create a new movie clip. Just single click on your mcScrollee instance and go to the Frames Actions windows. You must call the Display method is the same manner you would have in the empty movie clip technique.

onClipEvent (enterFrame)

5. Using the SetText method

You can now change the text by using the SetText method. If the second argument is true, then the scrollee will reset. if the argument is false, then only the text will be updated.

on (release)
scrollee.SetText(txtNewText, false);

Have fun !

» Level Intermediate

Added: 2002-01-05
Rating: 7 Votes: 104
(10 being the highest)
» Author
Martin Tremblay is Flash games developper.
» Download
Download the files used in this tutorial.
» Forums
More help? Search our boards for quick answers!


  • There are no comments yet. Be the first to comment!

  • You must have javascript enabled in order to post comments.

Leave a Comment
  • Your email address will not be published. All fields are required.
Featured Flash FLA
» Author: Inocreato
» Title: RaiseTheBlocks
» Description: Raise all the blocks to win the game
Featured Sound Loops
Image for equalize

Audio Player

» Author: TomCat Carty
» Title: The Wood
» Description: Just a little game ending or it can maybe be looped. Recorders with music box and percussion to give the feel of well, I don't know, the woods? Free to use, just credit me. thank you
Latest Font
» Author: Fábio FAFERS
» Description: I created this font for free use. Everyone can apply it in personal or business texts. Its free, but I want to be communicated in case of business use. Donations are accepted to keep the project of free fonts alive! Thank you all
Featured Sound Fx
Image for equalize

Audio Player

» Author: Davisigner
» Description: Hmm... what to say about this one? It's reminiscent of the closing notes of the opening music from the Three Stooges done in a church organ style with a closing cymbal crash. I'll give this one away gratis, but feel free to check out my free loops and potential upcoming license-mandated ones over in the respective part of Flashkit.