Create a typewriter effect with AS3

In this tutorial I’ll show you how to create a simple typewriter effect using AS3 classes with one single.as file for Document Class.

Settings all files

Create a new ActionScript File and save it as “MainClass.as” (com.fladev.effect.MainClass) – this will be the main class for our flash file;
The package classes extends the Sprite class (since we don’t have a timeline animation). Finnaly create a new AS3 Flash file(590×300px) and open it, so that we have both files opened.

MainClass.as

We need to add some variables:

[as3]private static const SPEED_TIMER:Number = 10;//timer delay for typing
private var timer:Timer;
private var textLength:Number;
private var i:Number = 0;
private var textToAnimate:String = "Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat."[/as3]

Constructor function

In constructor function we add the timer and we set for this a listener for “startToAnimate” function. Then we start the timer.

[as3]//add the timer
timer = new Timer(SPEED_TIMER);
timer.addEventListener(TimerEvent.TIMER, startToAnimate);
//setting the length of textToAnimate variable
textLength = textToAnimate.length;
//starting the timer
timer.start();[/as3]

Now we need to make the function startToAnimate in order to make the typewriter effect.

startToAnimate

[as3]private function startToAnimate(e:TimerEvent):void
{
//as default variable "i" is set to 0; we check if the "textLength" is smaller than "i" then we display each character in "txt" textfield.
if (i < textLength) {
txt.appendText(textToAnimate.substr(i, 1));
i += 1;
} else {//if "i" is equal to "textLength" then we stop the timer and we remove the listener.
timer.stop();
timer.removeEventListener(TimerEvent.TIMER, startToAnimate);
}
}[/as3]

If you test the movie now it will throw an error, becouse we didn’t create the textfield in main movie.
Simple create a dynamic textfield with instance name “txt”, make for linetype to be Multiline, selectable if you need and also embedd your font if its necesarry.

OK, now you can test it!


Twitter Digg Delicious Stumbleupon Technorati Facebook

10 Responses to “Create a typewriter effect with AS3”

  1. Excuse my ignorance but ‘where’ does the fla ‘point’ to the .as file?….just wondering if it can be moved back a few folders?….great post – been looking for this – thanks

  2. Hi, in properties panel you will see a path: com.fladev.effect.MainClass; if you change this, don’t forget to modify the package name in MainClass.as.

  3. I’m from Brazil, very good job, helped me a lot! Thanks!

  4. Hi, in properties panel you will see a path: com.fladev.effect.MainClass; if you change this, don’t forget to modify the package name in MainClass.as.

  5. Excuse my ignorance but ‘where’ does the fla ‘point’ to the .as file?….just wondering if it can be moved back a few folders?….great post – been looking for this – thanks

  6. check the path for external classes Amy.

  7. hello, is it possible to load the texte like mytext.txt

  8. Yes,
    var txtLoader:URLLoader = new URLLoader();
    txtLoader.dataFormat=URLLoaderDataFormat.VARIABLES;

    myTextLoader.addEventListener(Event.COMPLETE, onLoaded);

    function onLoaded(e:Event):void {
    textToAnimate = e.target.data.yourContent;
    }

    txtLoader.load(new URLRequest(“yourText.txt”));

  9. Hi guys, I am sorry for asking stupid question. I am using Flash CS4 and I cannot find the path in property..please help
    thank you

  10. what path do you mean?