macrominds

I just implemented a simple type writer effect for flash / actionscript3. In this article I’m going to show you how to use it. You can download the as3-class and use it for free.

About the design

I wanted to keep the effect simple to use, yet flexible.

So the only thing you need to do is create a dynamic TextField, type your text, convert it to a MovieClip and assign the BaseClass TypeWriterTextField. That’s it.

I implemented a few hooks for you to customize the effect or to receive events, when characters are typed (in order to play a sound or something) and when it’s finished typing characters.

Note however, that I implemented it for a pretty much limited use-case, so it may be limited to simple texts. It can handle linked TextFields, but no HTML-Texts.

Screencast

A short screencast showing the usage of standard-TypeWriterTextField:

Extending / customizing

Customizing should be done by extending TypeWriterTextField and overriding methods.

You can adapt the typing speed to your needs, by overriding the following function


protected function getTimerDelayMS():Number{
return 50;
}


The function returns 50ms delay between each character-typing by default, return any value in milliseconds to adapt it.

The following methods can be overriden to react on events:


protected function onTypeEvent(typedCharacter:String){
}
protected function onFinishedTyping(){
}


The first method will be called each time, a character is typed and will be passed the character that has just been typed as parameter typedCharacter

The second method will be called once the typing effect finished, when all characters have been typed.

How it works

Upon creation, the TypeWriterTextField scans it children. The first TextField instance found will be used to determine which text to type. It’s text will be stored and then cleared. A timer is used to type the characters. Typing is performed by adding the next character to the original TextField’s .text-attribute.

Download

typewritertextfield v0.1