Typewriter Text Effect with AS3
May 26th, 2010 in Flash | 20 CommentsQuick & 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.
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);
}
}
May 27th, 2010
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.
May 29th, 2010
thanks for the tute…
May 30th, 2010
How to slow down the typewriting? Thanks for tut!
Jun 25th, 2010
hi – really need help to do this effect using actionscript 2. hope you can help me.
Jul 14th, 2010
Great Job. You ROCK dude.
How can I make the test being typed faster ? Pls help.
Jul 30th, 2010
Thank you so much for your tutorials. They are of a tremendous help
Aug 16th, 2010
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.
Aug 28th, 2010
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)
Oct 9th, 2010
Thank you so much for your fantastic tutorials…
Regards,
Oct 25th, 2010
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
Nov 4th, 2010
Is there a simple way to use load multiple .txt files and have previous .txt text fade off?
Nov 13th, 2010
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
Nov 26th, 2010
how to add typewrite sound effects, like ‘dash’ in each character?
Feb 21st, 2011
thanks,great tut
Mar 10th, 2011
have you forgot to test with chrome and IE?
Mar 29th, 2011
man you job is very good, but my english is very bad to explain, jajaja, thanks.
Jun 8th, 2011
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);
Aug 21st, 2011
thanx for share, thanx for your time, thanx so much..
best regards,
Aug 25th, 2011
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;
Aug 25th, 2011
just solved it, my mistake, all that was needed was a ;
again great code!