AS3 typing\typewriter effect in Flash
01 February, 2011 by Tom Elliott
I’ve seen a number of these typing\typewriter effects around but for this AS3 typing effect in Flash, I wanted to create a dynamic script that tries to mimic the look of text being typed which can also be styled and coloured using HTML font tags. Whilst this script is ideal for smaller headlines and sentences, there’s no reason it cannot be used for larger strings and paragraphs. You can find the full source AS3 script for the typing effect at the end of the post.
There are number of variables in the code which can be easily modified. Two string variables are used for the typing effect. initString stores the text that will be typed and varString forms the output string, which combines the characters from the first string along with any HTML styling at specific places. This is controlled by the main timer typeTimer, which fires every hundredth of a second.
To make the text look like it is being typed by a word processor, an additional character is added to the output string for the cursor, which flashes once the typed text is completed. Rather than using the vertical line character ‘|’, I found a capital ‘i’ in Arial produced the straight line I was after but this cursor character can be changed with the cursorChar variable. Make sure any non-standard characters are embedded in the movie before publishing.
Because typing naturally differs in speed from character to character, there is an added random interval thrown in for good measure to get these slight variations in typing speed. The typing speed can be controlled by the minTypeTime and typeSpeedVariation variables and increasing these will produce slower, more varied typing.
Although the text should Wordwrap, you can insert custom line breaks into the string at specified character positions using the below code:
if (charPos == XX) {
varString+="\n";
}
The source code is below and I’m happy for it to be used.
I’d be interested to see where and how you’re using the script!
Download AS3 Typing Effect
4 Comments
Hey Mahdi,
Glad you found the typing effect code useful! Good questions – and not entirely straightforward – 😉 I’ve done my best to answer them below:
1 – If you’re using the uploaded Flash file, I think you’ll need to expand both the text area and document size, or shrink the font… it looks like it’s getting cut off because it’s reaching the end of the text area.
2 – To loop the typing effect, the AS3 code “typeTimer.stop();” – can be replaced with the below:
clipText.dynText.htmlText = “”;
varString = “”;
charPos = 0;
cursorFlashed = 0;
typeTimer.reset();
typeTimer.start();
3 – To pause at the “…” or at a certain point in the typing effect, you can replace the AS3:
typeVar = minTypeTime + Math.random()*typeSpeedVariation;
with:
if (charPos == 25) {
typeVar = 150;
} else {
typeVar = minTypeTime + Math.random()*typeSpeedVariation;
}
where charPos is the position in the text string for the character you want to pause at, and the typeVar the pause length in milliseconds (divided by 2). So for 3 seconds, the value is 150.
Hope that helps and good luck with the Blog!
Tom
Hello,
This is great! Thanks for posting. I have one question. How I can change the color of the cursor character. (I mean the straight line)
Thanks
Liv says: Great code. Though on exporting, it doesn’t show up since I have scenes after this scene with the typewriting code.
Any ideas for help?
Thanks!
Hey Tom!
Thanks for the post and uploading the code – it was really useful! This is the first time I’ve ever used flash (and I’ve only just started to learn HTML/CSS a few days ago sorry apologies if these are easy questions.
1) When I’ve tried input the text string “Welcome to The Insiders\n…the first step to a successful career path.” it stops after the letter ‘a’ – Any reason why?
2) How do I have this on loop rather than stopping? (i’ve tried removing the end timer etc but to no avail)
2) As a final aesthetic point if I try to slow the type speed down only at ‘…’ how would I go about this?
Any help is much appreciated!
Kind regards,
Mahdi
P.s As a note, the site is just a wordpress blog but I’m trying to remake it from HTML from scratch with added bits like flash etc!