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.
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);
}
}
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.
thanks for the tute…
How to slow down the typewriting? Thanks for tut!
hi – really need help to do this effect using actionscript 2. hope you can help me.
Great Job. You ROCK dude.
How can I make the test being typed faster ? Pls help.
Thank you so much for your tutorials. They are of a tremendous help
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.
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)
Thank you so much for your fantastic tutorials…
Regards,
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
Is there a simple way to use load multiple .txt files and have previous .txt text fade off?
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
how to add typewrite sound effects, like ‘dash’ in each character?
thanks,great tut
have you forgot to test with chrome and IE?
man you job is very good, but my english is very bad to explain, jajaja, thanks.
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);
thanx for share, thanx for your time, thanx so much..
best regards,
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;
just solved it, my mistake, all that was needed was a ;
again great code!
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
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.
Thx for you tut! It’s cool
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?