ReviewMyElearning.com

Typing effect for Flash AS2

Occasionally in my Flash apps I need to simulate text being typed on the screen. I know... there are a lot of programs the can do this for you but sometime ago I pounded out a few lines of code to it. This comes in handy when I pull the text dynamically from another source like maybe XML. Rather then write up a long post on how it works I did a quick screencast. The code is below for all my fellow copy-n-paste folks :-) And I did find the error... it was simple typo. I fixed it in the code posted here. Code:

var speed:Number = 60;
var msg1:String = "this.onEnterFrame@gmail.com";
var msg2:String = "Taking the suck out of eLearning. \nEnjoying Android, Flash, Articulate, PHP, Ajax, Drupal.";

typeText(msg1, tf1)
setTimeout(typeText,speed*msg1.length,msg2,tf2);

function typeText(msg:String, tf:TextField) {
	for (i=0; i<msg.length; i++) {
		setTimeout(addChar,speed*i,msg.charAt(i),tf);
	}
}
function addChar(char:String, tf:TextField) {
	tf.text += char;
}

Comments

Hi, your code was very useful for me... I need something mor in this: can we "pause/play" the text during the typing?

I'm doing it for a movie, and it as to pause (and we don't know exactly where) and then continue ...
Ex: to simulate an actor typing, stop typing (because an other actor is speaking to him) and then continue where he was in the text...

Can you help me?
(sorry... my english is not good)

Thank you for your code! It really helped me for a banner that i am working on.
I would like to ask you if there is a way to add a blinking cursor while text is being typed.
Thank you in advance!

This is the only one I could find that worked!

You legitimately helped me. Thanks so much!

This seems to be missing the condition for the for loop and the increment - the code below seems to work:

var speed:Number = 60;
var msg1:String = "this.onEnterFrame@gmail.com";
var msg2:String = "Taking the suck out of eLearning. \nEnjoying Android, Flash, Articulate, PHP, Ajax, Drupal.";

typeText(msg2, tf1)
setTimeout(typeText,speed*msg1.length,msg2,tf2);

function typeText(msg:String, tf:TextField) {
for (i=0; i {
setTimeout(addChar,speed*i,msg.charAt(i),tf);
}
}

function addChar(char:String, tf:TextField)
{
tf.text += char;
}

So the text fields here seem to think that the less than symbol is an initial HTML tag...which is why the for loop code isn't showing up in your post or mine - the for loop should be:

for(i=0; i(less than symbol)msg.length; i++)

Post new comment

The content of this field is kept private and will not be shown publicly.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.
  • Images can be added to this post.
  • You may use [inline:xx] tags to display uploaded files or images inline.
  • You may use <swf file="song.mp3"> to display Flash files inline
  • Twitter-style @usersnames are linked to their Twitter account pages.
  • Twitter-style #hashtags are linked to search.twitter.com.

More information about formatting options

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
  _             _       _  _  _  _       _           _        _  _  _  _       _  _  _  _  _    
(_) (_) _(_)(_)(_)(_)_ (_) (_) _(_)(_)(_)(_)_ (_)(_)(_)(_)(_)
(_) (_) (_) (_) (_) (_) (_) (_) (_)
(_) _ (_) (_)_ _ _ _ (_)_ _(_) _ _(_) (_) _ _
(_) _(_)_ (_) (_)(_)(_)(_)_ (_) (_) (_)(_)_ (_)(_)(_)
(_) (_) (_) (_) _ (_) (_) (_) _ (_) (_)
(_)_(_) (_)_(_) (_)_ _ _ _(_) (_)_(_) (_)_ _ _ _(_) (_) _ _ _ _
(_) (_) (_)(_)(_)(_) (_) (_)(_)(_)(_) (_)(_)(_)(_)(_)

Enter the code depicted in ASCII art style.