TYPEWRITER EFFECT IN AS3                                                 as3


    This tutorial shows you how to create cool looking typewriter effect in actionscript 3.0 for your flash project. The entire animation is made via actionscript including the flashing cursor whose size, color or symbol you can change as you like. After finishing this tutorial you should have something similar to this example below:

     We start by opening new actionscript 3.0 flash document. All we need on stage is dynamic textfield with instance name textarea. You can change size, color or font of the textfield as you like. Now open actions window and insert the following actionscript code: 


var initString:String="Your text goes here!";
var varString:String="";
var charPos:int=0;
var charTotal:int=initString.length;

var flashCursor:Boolean;
var showCursor:int=1;
var cursorFlashed:int=0;
var cursorFlashNo:int=10;
var cursorChar:String="I";
var cursorCharSize:int=25;
var cursorFlashSpeed:int=8;

var minTypeTime:int=8;
var typeSpeedVariation:int=9;
var typeVar:int=minTypeTime+typeSpeedVariation;

var typeTimer:Timer=new Timer(10);
typeTimer.addEventListener(TimerEvent.TIMER, timerHandler);
typeTimer.start();

function timerHandler(e:TimerEvent):void {
if (typeTimer.currentCount%typeVar==1) {
if (charPos==charTotal) {
	flashCursor=true;
}
if (charPos!=charTotal) {
	varString+=initString.charAt(charPos);
	charPos+=1;
	textarea.htmlText=varString+
	""+cursorChar+"";
	typeVar=minTypeTime+Math.random()*typeSpeedVariation;
} else {
if (cursorFlashed<cursorFlashNo) {
if ((showCursor == 1) || (showCursor == 2)) {
	textarea.htmlText=varString;
} else {
	textarea.htmlText=varString+
	""+cursorChar+"";
}
	showCursor+=1;
if (showCursor==7) {
	showCursor=1;
	cursorFlashed+=1;
}
} else {
	typeTimer.stop();
}
	typeVar=cursorFlashSpeed;
}
}
}


     First line is string variable which contains the text itself. Second line is variable which will contain typing text. Lines 3 and 4 are two other variables used later in the script. Variables on line 6-12 are parameters of the cursor such as, flashing enabled, number of flashes, speed, character used as cursor etc. Lines 14-20 creates random delay timer between typing each characters which creates more realistic typing effect. Finaly, line 22 is the begining of the typing function itself. It contains loops which adds characters to varString variable, then adds the cursor character at the end and then sends this variable to textfield on stage.When it reaches the end of initString variable it runs cursorFlahNo more times, which creates the cursor flashing effect, and then stops the flashing.


DOWNLOAD SOURCE FILE