First time here? First time here? Newsletter Signup Newsletter
651326 Members and growing! | Flash Jobs
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 = "";
this
.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 );
else
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.wait++
else
{
this.currentLetter = 1;
this.wait = 0;
}
else
{
this.currentLetter++;
}


}

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.

_parent.scrollee.Display();

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.

gotoAndPlay(1);

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)
{
_parent.scrollee.Display();
}

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!

Comments

  • 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: doc_chin7
» Description:

The flash's horizontal road drive was done in CS4 and was upgraded to CS6. The car responds to right/ left key and flash will auto-generate the movement of roads from left-right or right-left based on random number. Have fun driving in this virtual environment and avoid other cars... :) If you are creative, a road driving game can be created from it.

Featured Sound Loops
Image for equalize

Audio Player

» Author: BoxCat
» Title: CPU Talk
» Description: From the cyberpunk RPG, "Nameless: the Hackers" Completely Free to use! Keywords: edm hip hop rap electronic mysterious mission hacking chase exciting spy ios ambient chilling love happy sad angry suspense
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: nathan
» Description:

A recorded sound of the Dimensional Fork Gate.