Typewriter Text Effect with AS3

Typewriter Text Effect with AS3

Quick & easy code : see how to create a typewriter text effect with Actionscript 3. The text to be displayed will be loaded from a txt file.

View DemoDownload Source

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); 
	}
}

24 thoughts on “Typewriter Text Effect with AS3

  1. Thankfully

    I have a dream that one day on the blue waves of Internet, many thousands of people will be able to concieve and write so fine programs in AS3 thanks to your generosity and imagination and give thanks to you and send you all that you want.
    Thankfully.

  2. DK

    Cool code but i have UTF Character,how to show this .swf
    Your action script don’t support UTF Characters.

    Tnx any way cool code.

  3. knalle

    If you want it to type slower you could just lower the frame rate – since a new character is added at every frame (ENTER_FRAME).

    BUT that wouldn’t really be the proper way of controlling it. Instead try using the Timer class

    var myTimer:Timer = new Timer(200); // milliseconds as argument
    myTimer.addEventListener(TimerEvent.TIMER, writeText);
    myTimer.start();

    (remember to change writeText function parameter to TimerEvent argument type – and remove the ENTER_FRAME eventlisteners)

  4. Luis

    Hi there i used this tutorial code to make a text to write itself as it showed here but i hit a lil problem after, how can i edit the animation it self in order to montage it with other animated elements in a picture. its because im making a kind of board that has a few animated items and i would love to use this animation on it. could you please help :) ? this tutorial was very usefull to me

  5. Kelly

    This is great, saved me a lot of time….
    If i want the text to fade at the end and then start typing new text how does that work?
    Thanks so much this helps a lot…
    Kelly

  6. Flasheye

    Hi,
    i changed something, maybe someone need this:

    // you need 2 TextFields: textField_txt & textField2_txt

    function TextAnimation(string:String, platz:TextField, speed:Number):void{
    var counter:int = 0;
    var TATimer:Timer = new Timer(speed);
    TATimer.addEventListener(TimerEvent.TIMER, writeText);
    TATimer.start();

    function writeText(e:Event):void{
    if (counter <= string.length){
    platz.text = string.substr(0,counter);
    counter ++;
    }
    else{
    TATimer.removeEventListener(TimerEvent.TIMER,writeText);
    }
    }
    }

    TextAnimation("THIS is a TEST", textField_txt, 20);
    TextAnimation("THIS is a second TEST", textField2_txt, 100);

  7. ruth

    This code is a great help. I was wondering how you align the text but.

    I’ve been able to move the text in with

    textField.x = textField.y =450;

    but if i add to the x it doesn’t work, i.e

    textField.x=100 = textField.y =450;

  8. Liz

    Hi there, thanks for this it’s great. But is there a way to use any font, can I embed a special font in any way?

    Thanks
    Liz

  9. mentioned_offitype

    There doesn’t seem to be any way to modify leading, or removing the anti-alias from the text. :/

    It’s nice, but it isn’t useful for what I’m trying to do, sorry.

  10. Marcella

    I started this code in the middle of a 30 second animation but it still remains on the stage. I was wondering if there’s an extra code that could make the text disappear from the stage, but still continue on with the rest of the animation?

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>