# Quick Tip: Create a Typewriter Text Effect Class

##### Tutorial Details
• Difficulty: Beginner
• Platform: Flash (Flash Player 10.1+)
• Language: AS3
• Estimated Completion Time: 10 Minutes

In this Quick Tip, we’ll create a static, re-usable ActionScript class that will produce a Typewriter effect with a single line. Read on!

## Step 1: Brief Overview

We’ll split a user defined string into an array, and then add the resulting letters to a TextField one by one using the Timer class.

## Step 2: Typewriter Class

Our class will be static, which means it doesn’t need to be instantiated using the new keyword. To access a static class member, use the name of the class instead of the name of an instance.

Create a new ActionScript file and write the following code:

package
{
import flash.text.TextField;
import flash.utils.Timer;
import flash.events.TimerEvent;

public final class Typewriter
{
/* Declare the variables and methods as static */

private static var chars:Array; //the characters in the string
private static var tf:TextField; //textfield to which the string will be written
private static var timer:Timer; //pauses between writing each character
private static var i:int = 0; //variable used to count the written characters

public static function write(txt:String, txtField:TextField, time:Number):void
{
chars = txt.split(""); //split the string into an array of characters
tf = txtField; //assign tf to the text field passed to the function
timer = new Timer(time); //set time according to parameter

timer.start(); //start writing function
}

private static function writeChar(e:TimerEvent):void
{
if (i < chars.length)
{
tf.appendText(chars[i]); //writes a char every time the function is called
i++; //next char
}
if (i >= chars.length) //check whether string is complete
{
timer.stop();
timer.removeEventListener(TimerEvent.TIMER, writeChar); //clear timer
timer = null;
}
}
}
}


## Step 3: Usage

The usage couldn’t be easier – just add the Typewriter.as class to your project folder and use the following code:

import Typewriter;

Typewriter.write('Text to Write', targetTextfield, 50);


That’s it, test your movie and you’ll see your TextField using the Typewriter effect.

## Step 4: Example

I used the class in on this example swf so you can see the effect:

## Conclusion

Use this class to create your own effects!

Thank you for reading. If you’d like a more advanced version of this effect for use in your projects, take a look at Rasmus Wriedt Larsen’s Letter By Letter Animation.

• Cristian Bote

Nice one Carlos! Kudos!

• Tom

What’s the “+ 2″ on line 20? It’s causing “tf.length” to NEVER be equal “cLen” and thus the TimerEvent never stops firing.

• http://michaeljameswilliams.com/ Michael James Williams

Oops, sorry – I fixed that in the Facebook edit, but apparently not here. Corrected now, thanks for pointing it out!

• Lock

It’s still doesn’t work. It should be +1.

• http://michaeljameswilliams.com/ Michael James Williams

Damn. Rewritten and tested.

• Lock

I assume +2 is a typo as it doesn’t work.

• Wooly

Hi Carlos!

I test your script and I had this error once the text is complete:

TypeError: Error #2007: Le paramètre text ne doit pas être nul.
at flash.text::TextField/replaceText()
at flash.text::TextField/appendText()
at Typewriter\$/writeChar()
at flash.utils::Timer/_timerDispatch()
at flash.utils::Timer/tick()

Did I do something wrong?

• Wooly

Ok, I find the problem. It was the “+2″ on line 20.

Thx for this tutorial!