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 !
Tutorials Home
Tutorials » Text_Effects
Object-Oriented Scrollee
