Text Animation Letter by Letter

Posted on September 5th, 2009 Rasmus Wriedt Larsen 5 comments

Ever tried making a text apear by making each letter coming on the screen one by one, and ended up with something likes this?
Text Animation 1
Read on and find out how to fix it!

We’re going to start by making a new .fla file, then make a dynamic texfield with multiline set to true and call that textF. I made a background for mine, so it ends up looking like this:
mySetupTextAnimation

Lets start by making the normal animation that only works okay

Lets start off by making the basic setup with:
- a variable holding the text (when that is set in init() we remove the text we can see on the screen)
- a veariable telling us how far we are in the text right now
- an init funtion (init is just an abbreviation for initialize) that will reset the text and how far we have got in the text, and add a event listener.
- a loop executed for every frame (my framerate is 12)

package  
{
	import flash.display.MovieClip;
	import flash.events.Event;
	import flash.text.TextField;
 
	public class MainTextfieldAnimation extends MovieClip
	{
		public var allTheText:String;
		public var howFarInTheText:int;
 
		public function MainTextfieldAnimation() 
		{
			allTheText = textF.text;
			init();
		}
 
		public function init():void
		{
			howFarInTheText = 0;
			textF.text = "";
			this.addEventListener(Event.ENTER_FRAME, masterLoop);
		}
	}
}

Now lets put something in our loop:

		public function masterLoop(event:Event):void
		{
			textF.appendText(allTheText.charAt(howFarInTheText));
			howFarInTheText ++;
		}

Now this will just go on for ever, when howFarInTheText reaches a higher value than there are letters, it will just add a blank letter. So lets add a function removing the event listener:

		public function animationFinished():void
		{
			if (this.hasEventListener(Event.ENTER_FRAME))
			{
				this.removeEventListener(Event.ENTER_FRAME, masterLoop);
			}
		}

This is just checking if there is an even listener – if not, we can’t remove it.

Now we got to figure out when to execute this function, so add this to the first part of the masterLoop function:

			if (howFarInTheText == allTheText.length - 1)
			{
				animationFinished();
				return;
			}

The reason we need to subtract 1 from the length is that the first letter will come at allTheText.charAt(0), this mean it is zero-based. The length parameter of the string is not zero based, therefore we need to substract it by 1.

Here is it for a test (i know the framerate is real low, don’t worry, just read on – and you probably have to press the restart button by now)

So this pretty much works great. But there is one thing that I’m not happy with. We “waste” one fram typing all the spaces in the text. That doesn’t look too god to me – this was also the reason I made the framerate so low, else it’s harder to see. Here is how to fix it (add it to the end of the masterLoop function)

			if (allTheText.charAt(howFarInTheText) == " " && howFarInTheText != allTheText.length - 1)
			{
				textF.appendText(allTheText.charAt(howFarInTheText));
				howFarInTheText ++;
			}

So here is the final code for the normal way to do this (if you want to see it you have to uncollapse it by clicking the little arrow):

package  
{
	import flash.display.MovieClip;
	import flash.events.Event;
	import flash.text.TextField;
 
	public class MainTextfieldAnimation extends MovieClip
	{
		public var allTheText:String;
		public var howFarInTheText:int;
 
		public function MainTextfieldAnimation() 
		{
			allTheText = textF.text;
			init();
		}
 
		public function init():void
		{
			howFarInTheText = 0;
			textF.text = "";
			this.addEventListener(Event.ENTER_FRAME, masterLoop);
		}
 
		public function masterLoop(event:Event):void
		{
			if (howFarInTheText == allTheText.length - 1)
			{
				animationFinished();
				return;
			}
			textF.appendText(allTheText.charAt(howFarInTheText));
			howFarInTheText ++;
			if (allTheText.charAt(howFarInTheText) == " " && howFarInTheText != allTheText.length - 1)
			{
				textF.appendText(allTheText.charAt(howFarInTheText));
				howFarInTheText ++;
			}
		}
 
		public function animationFinished():void
		{
			if (this.hasEventListener(Event.ENTER_FRAME))
			{
				this.removeEventListener(Event.ENTER_FRAME, masterLoop);
			}
		}
	}
}

You can check it out here (press the restart button):

The problem is this:

First we see this:
Text Animation 1
The next frame we see this:
Text Animation 2
So the text jumps down a line and that just looks crappy.

So here is how we fix it:

The thing we’re going to do is split the text up in lines, so we will only write the letters from one line at one time. When we finished putting all the letters from one line, we go to the next one.

I’ve just put the final code for the good way of doing it here, as it’s basicly the same principles beeing used. This time we just need to go though an array (containing each line) to get our letters:

package  
{
	import flash.display.MovieClip;
	import flash.events.Event;
	import flash.text.TextField;
 
	public class MainTextfieldAnimation extends MovieClip
	{
		public var textLinesArray:Array;
 
		public var howFarInTheText:int;
		public var howFarInLines:int;
 
		public function MainTextfieldAnimation() 
		{
			textLinesArray = new Array();
 
			for (var i:int = 0; i < textF.numLines - 1; i++)
			{
				textLinesArray.push(textF.getLineText(i));
			}
 
			init();
		}
 
		public function init():void
		{
			howFarInTheText = 0;
			howFarInLines = 0;
			textF.text = "";
			this.addEventListener(Event.ENTER_FRAME, masterLoop);
		}
 
		public function masterLoop(event:Event):void
		{
			if (howFarInTheText == textLinesArray[howFarInLines].length - 1)
			{
				if (howFarInLines == textLinesArray.length-1)
				{
					animationFinished();
					return;
				}
				howFarInTheText = 0;
				howFarInLines ++;
				textF.appendText("\n");
 
			}
			textF.appendText(textLinesArray[howFarInLines].charAt(howFarInTheText));
			howFarInTheText ++;
			if (textLinesArray[howFarInLines].charAt(howFarInTheText) == " " && howFarInTheText != textLinesArray[howFarInLines].length - 1)
			{
				textF.appendText(textLinesArray[howFarInLines].charAt(howFarInTheText));
				howFarInTheText ++;
			}
		}
 
		public function animationFinished():void
		{
			if (this.hasEventListener(Event.ENTER_FRAME))
			{
				this.removeEventListener(Event.ENTER_FRAME, masterLoop);
			}
		}
	}
}

and here we have a nice result (press the restart button):

Here is a ZIP with the source.

Share this Article

ActionScript 3, Animation, Flash, Tutorial

5 responses to “Text Animation Letter by Letter”

Mushyrulez September 6th, 2009 at 04:23

The last .swf is still the first one :P

Great tutorial!
Rasmus Wriedt Larsen September 6th, 2009 at 13:59

Oh yeah, thanks for pointing that out :) I fixed it now. I’m glad you liked it.
MichaelJW September 8th, 2009 at 18:44

Nice one Rasmus :)
bcnobel January 19th, 2010 at 18:21

Maybe I’m being noobish about this, or i just looked over it, but isn’t the button’s MC supposed to be linkaged to the class you wrote, instead of flash.display.MovieClip?

Because this way it isn’t working for me…
Maybe i just did something horribly wrong, but i just downloaded your source, and that didn’t work either for me…

thing is, i’m kinda new @ actionScript 3.0…

Pliz help?
Rasmus Wriedt Larsen January 19th, 2010 at 19:24

Hi Bcnobel.

I don’t really think I understand your question, and I have a suspicion it’s because you don’t fully grasp the concepts of AS3. I would recommend reading Michael James William’s avoider game tutorial. If you’re still facing problems after this, just send me a mail and we’ll figure it out :)

Text Animation Letter by Letter

Lets start by making the normal animation that only works okay

The problem is this:

So here is how we fix it:

5 responses to “Text Animation Letter by Letter”

Leave a reply

Subscribe

Categories

Flash Blogs