Frontendplace Blog

Sharing Frontend developing ideas

Typewriter class in actionscript

Posted by info on August 25th, 2008

This is an example how to create a typeing effect without having to use masks. (you can repeat the text or add a pipe character )


import mx.utils.Delegate;

class myfolder.typingText { // replace myfolder with the folder structure you use
private var delayTime:Number;
private var destinationMc:MovieClip;
private var messageText:String;
private var currentChar:Number;
private var includePipe:Boolean; // include pipe character after text
private var doRepeat:Boolean; // repeat typeing after 5 sec

public function typingText(mcBot, mcRoom){
this.delayTime = 50;
this.destinationMc = null;
}
public function typeText(){
var dest = this.destinationMc;
if (dest && dest.html != null) {
dest.html = true;
dest.text = this.messageText.substr(0, this.currentChar);
if(this.includePipe)
dest.text = dest.text + "|";

this.currentChar++;
if (this.currentChar > this.messageText.length) {
if(this.doRepeat){
this.currentChar = 1;
_global.setTimeout(Delegate.create(this,typeText),5000);
}
} else {
_global.setTimeout(Delegate.create(this,typeText),this.delayTime);
}
}
}
public function startTyping(textParam, delayParam, destinationParam, repeat , pipe){
this.messageText = textParam;
this.delayTime = delayParam;
this.currentChar = 1;
this.destinationMc = destinationParam;
this.typeText();
this.includePipe = pipe;
this.doRepeat = repeat;
}

}

Insert in flashdocument:

import myfolder.typingText

var myText = "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed vel est. Cras convallis quam non diam. ";

// textarea
var typing1 = new typingText();
typing1.startTyping(myText,200, taTypingText,true, false );
// dont use pipe in text area because a CR is generated and pipe end up under the last line

//inputtext
var typing2 = new typingText();
typing2.startTyping(myText.substr(0, 40),80, tiTypingText, true, true );

// textfield
var typing3 = new typingText();
typing3.startTyping(myText,500, dtTypingText, false, false );

Example: