Typewriter Text Effect with AS3

1. Create a new flash file (Actionscript 3.0) and save it as typewriter.fla.

2. Rename “layer 1″ to “actions”. Open the actions panel.
Declare the following variables:

var myText:String;
var counter:int = 0;

3. Create a TextFormat object in order to format our text.

var format : TextFormat = new TextFormat();
format.size = 16;
format.font = "Verdana";
format.bold = true;
format.color = 0xFFFFFF;

4. Create a TextField, set its properties as follow and add it to the display list.

var textField : TextField = new TextField();
textField.width = 600;
textField.height = 350;
textField.selectable = false;
textField.wordWrap = true;
textField.defaultTextFormat = format;
textField.x = textField.y =10;
addChild(textField);

5. Next create an initText function that set the “myText” variable to the string passed as argument. Also add an ENTER_FRAME event listener.

function initText(string:String):void{
   myText = string;
   addEventListener(Event.ENTER_FRAME, writeText);
}

6. The writeText function checks whether the counter variable is inferior or equal to the length of “myText”.
While it’s true, we use the substr method that returns a substring consisting of the characters that start at index 0 and with a length specified by counter. When it becomes false, we remove the ENTER_FRAME listener.

function writeText(e:Event):void{
   if (counter <= myText.length){
           textField.text = myText.substr(0,counter);
           counter++;
   }
   else{
      removeEventListener(Event.ENTER_FRAME,writeText);
   }
}

7. The text to be display is stored inside a text file. So create your text file, type your own text and save it as text.txt inside the same directory of your fla file. Then load the file. When the load is complete, it simply calls the initText function.

var textLoader:URLLoader = new URLLoader(new URLRequest("text.txt"));
textLoader.addEventListener(Event.COMPLETE, function(e:Event){initText(e.target.data);});

8. Here’s the final code, test your movie to see in action.

var myText:String;
var counter:int = 0;

var format : TextFormat = new TextFormat();
format.size = 16;
format.font = "Verdana";
format.bold = true;
format.color = 0xFFFFFF;

var textField : TextField = new TextField();
textField.width = 600;
textField.height = 350;
textField.selectable = false;
textField.wordWrap = true;
textField.defaultTextFormat = format;
textField.x = textField.y =10;
addChild(textField);

var textLoader:URLLoader = new URLLoader(new URLRequest("text.txt"));
textLoader.addEventListener(Event.COMPLETE, function(e:Event){initText(e.target.data);});

function initText(string:String):void{
   myText = string;
   addEventListener(Event.ENTER_FRAME, writeText);
}

function writeText(e:Event):void{
   if (counter <= myText.length){
           textField.text = myText.substr(0,counter);
           counter++;
   }
   else{
      removeEventListener(Event.ENTER_FRAME,writeText);
   }
}

To Download right-click, and save to your computer.

download_btn