Tutorial: Create a typing effect in AS3

Typing Effect in ActionScript 3.0

In this tutorial you'll learn how to create a typing effect when working with text fields. This will become very handy if you don't want the text to be displayed right away but with some dynamic motion.

We start out by creating a new .fla file with a size of 400x550. Then we place a dynamic text field in the middle of the stage and give it an instance name of "info".

Now, open up the actions panel - or just your external script if you use so and let the (simple) coding begin.

Code Snippet
var phrase:String = "Two roads diverged in a yellow wood,\nAnd sorry I could not travel both\nAnd be one traveller, long I stood\nAnd looked down one as far as I could\nTo where it bent in the undergrowth;"
+ "\n\nThen took the other, as just as fair,\nAnd having perhaps the better claim,\nBecause it was grassy and wanted wear;\nThough as for that the passing there\nHad worn them really about the same,"
+ "\n\nAnd both that morning equally lay\nIn leaves no step had trodden black.\nOh, I kept the first for another day!\nYet knowing how way leads on to way,\nI doubted if I should ever come back."
+ "\n\nI shall be telling this with a sigh\nSomewhere ages and ages hence:\nTwo roads diverged in a wood, and I--\nI took the one less traveled by,\nAnd that has made all the difference"
+ "\n\n - Robert Frost";
 
var count:uint = 0;
 
addEventListener(Event.ENTER_FRAME, writeText);
 
function writeText(event:Event):void {
	count++;
	info.text = (phrase.substr(0,count));
 
	if (phrase.length < count) {
		removeEventListener(Event.ENTER_FRAME, writeText);
	}
}

line 1-5: We create a string containing all the text we want to show.

line 7: The "count" variable will keep track on our current position in the text.

line 12: We let "count" increment so that we reveal one new letter per frame.

line 13: The substr() function needs 2 arguments - a starting index and an ending index. It will then return any letters between the two indexes.
By taking our "phrase" string and using the substr() function with a starting index of zero and an ending index of our current count we will get a string from the first letter to the letter with an index of "count".

line 15-17: If the "count" variable exceeds the length of our phrase the event must be removed!

How can I use this tutorial?
This snippet of code is very handy. You can add some additional features to get an even better effect. For example, you can add a typing sound or you can make it look for commas and full stops and then make a little pause in the typing.
You can of course use text fields that aren't created on the stage but in a script to hold the string. You can have multiple strings with different text.

By Lewinzki