How to create type writer effect using Actionscript 3

In this tutorial you will learn how to create a typing effect using Actionscript 3.

We will create a function that can be later used many times. There will be one paremeter - text you want to type.

First of all, create a text field on stage with an instance name of textF.

Here is the code:

//--------------------------------------------------------------//

var para:String = "As you can see, firstly we create an array,which contains each letter as a separate element. Then we makea 50 millisecond timer (this will be the interval between each letter's appearance). Start the timer and just add a new letter when it completes. When the number of letters reach maximum, timer stops!";

function typeText(str:String) {
paper_txt.text="";
var textarray:Array=str.split("");
var timer:Timer=new Timer(50);
 var i:int=0;
timer.start();
timer.addEventListener(TimerEvent.TIMER, update);
  function update(TimerEvent) {
paper_txt.appendText(textarray[i]);
i++;
if (i==textarray.length) {
timer.stop();
}
}
}

typeText(para);
//--------------------------------------------------------------//

As you can see, firstly we create an array, which contains each letter as a separate element. Then we make a 50 millisecond timer (this will be the interval between each letter's appearance). Start the timer and just add a new letter when it completes. When the number of letters reach maximum, timer stops!

Easy as that. Remember that you can use split(); function differently, depending on what result are you aiming for. If you want not letters, but words to appear like that - change the parameter to space - split(" ").

Preview.
Download .zip


Author : Kirill Poletaev