GDS 214 WEB DESIGN II Text Effects in ActionScript
Instructor: Rob Higgins
Typing Text
Here is the code for typing text. All you need to do is add
it to the actions in a layer called script and put a dynamic
text instance in another layer called text. Name the instance
of your text as "typewriter_txt" and you are ready
to go.
The code:
function typewriter(chars) {
// This function sets up the text animation
// and sets up the associated event handler...
this.onEnterFrame = writeText;
this.count = 1;
this.message = chars;
this.maxLength = this.message.length;
}
function writeText() {
// This function is the typewriter event handler.
// It runs every frame, adding an extra character to
// the output text field until all characters have been shown.
this.typewriter_txt.text = this.message.substr(0, this.count);
this.count++;
if (this.count>this.maxlength) {
this.onEnterFrame = undefined;
}
}
typewriter("hello everybody! \nHow are you?");
Here is the effect:
Here is the code to do basically the same thing we did in the
ripple effect using tweening. See how easy it is to do the same
thing in ActionScript.
Put this code in your layer:
function transition(chars, startX, startY) {
// initialize the text format object which we
// will be using to define the character spacings...
mFormat = new TextFormat();
mFormat.font = "Arial Black";
mFormat.size = "32";
// Assign the initial value of startX to a
// new variable because we would otherwise
// overwrite this important value...
startText = startX;
// Create a text field per character...
for (i=0; i<chars.length; i++) {
// create an empty clip...
name = "char"+i;
this.attachMovie("character", name, depthCount);
// put it at the appropriate place...
this[name]._x = startX+startText;
this[name]._y = startY;
// write the character into the clip textfield...
this[name].field.text = chars.substr(i, 1);
// get this text's width and update the spacing...
mSize = mFormat.getTextExtent(this[name].field.text);
startX += mSize.width;
// update depth...
depthCount++;
// set alpha to zero and resize in preparation
// for the effect, and then add the event handler
// to trigger the start of the animation...
this[name]._alpha = 0;
this[name]._xscale = this[name]._yscale=1000;
this[name].timing = (startX-startText)/10;
this[name].onEnterFrame = starter;
}
}
function starter() {
// Stagger the start of the effect depending
// on the position of this character in the text...
this.timing--;
if (this.timing<0) {
this.onEnterFrame = animate;
}
}
function animate() {
// Scale and fade in until the
// text is back to its original alpha...
this._xscale -= 90;
this._yscale -= 90;
this._alpha += 10;
if (this._alpha>90) {
this.onEnterFrame = undefined;
}
}
depthCount = 100;
transition("Parkland is so Cool!", 10, 200);
Make a movie clip called mc.character with the following specifications:
Add dynamic texxt with the following specifications:
