Simple TypeWriter effect for Flash / Actionscript3 v0.1

Published: 06/11/09 05:09 PM


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:

Get Adobe Flash player

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


6 Kommentare zu “Simple TypeWriter effect for Flash / Actionscript3 v0.1”

  1. Susan sagt:

    Your downloadlink doesn´t work, you damn sucker!

  2. Thomas Praxl sagt:

    Calm down. Now it does.

  3. Tomas sagt:

    I’m not exactly holding my breath that I’ll get a response, but whenever I try this it gives me an error when I give in the Base Class.

    “A definition for the base class could not be found in the classpath. Please enter the name of a class defined in the classpath, or enter the default class ‘flash.display.MovieClip’.”

  4. Thomas Praxl sagt:

    Hi Tomas,

    as your error-message suggests, I’m pretty sure that “TypeWriterTextField” is not in your classpath.

    You should make sure to convert your symbol exactly as shown in the screencast.

    One way to make sure that “TypeWriterTextField” is in your class path is to copy TypeWriterTextField.as to the folder that contains your .fla file.

    Please tell me if the error-message still appears. Feel free to contact me via mail as well.

  5. Victoria sagt:

    Hi!
    I have the same problem as Tomas above. I have put the TypeWriterTextField.as in the same folder as my .fla-file but it doesn’t seem to be in the class path anyway. Should I put it in another folder to make it work, somewhere under Adobe Flash Builder where I there are lots of .as-files?

  6. Thomas Praxl sagt:

    Hi Victoria,

    I sent you an E-Mail.

Kommentieren Sie diesen Artikel

Hintergrundgrafiken für Word oder Open Office unter Windows

Flex embed almost any binary data