Kingsley eLearning Solutions

You have big dreams for your eLearning.
We'll make them come true.

image of Kingsley

Typing effect for Flash AS2

Submitted by Kingsley 👑 on Wed, 11/11/2009 - 13:24
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

Submitted by Brandon (not verified) on Mon, 11/07/2011 - 20:47

Permalink

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++)

Submitted by stella (not verified) on Mon, 11/05/2012 - 18:05

Permalink

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!

Submitted by Ann (not verified) on Sat, 06/01/2013 - 12:33

Permalink

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)

Add new comment

Tags