Text Typing Effect

I'm sure you have seen many tutorials on how to create a text typing effect. These are mostly done by animating masks on the timeline. This tutorial is a bit different. In this Actionscript 3 tutorial, you'll learn how to create a text effect as the user types some text. Check out the Flash movie above to see how it looks (click on the movie and start typing). You can certainly customize the animation part to fit your taste, I'm just teaching how to set it up with Actionscript 3.

Note: the movie supports Enter presses, but not erasing.

Setting up the environment

1. Create a new Flash document of size 400x400.

2. Create a dynamic text field. Apply the following settings. Note the instance name!

Text settings

3. Convert the text field into a movie clip. Set the registration point to the center. Name it "TextMC".

4. Linkage the movie clip to a class named "CharMovieClip".

5. Remove the movie clip from the stage.

Moving into Actionscript

6. Open your actions panel and type the following. 

	import fl.transitions.Tween;
import fl.transitions.easing.*;

//This variable stores the pressed key (String value)
var pressedKey:String;

//These are used for positioning a character on the stage
var xpos:Number = 0;
var ypos:Number = 0;

//This is used for tracking the row number
var rowNumber:uint = 0;

//The height of a row
var myRowHeight:uint = 30;

/*
This us used for tracking how many characters there
are in a row.
*/
var charactersOnRow:uint = 0;

//This array holds all the tweens
var tweens:Array = new Array();

//Listen when the user hits the keyboard
stage.addEventListener (KeyboardEvent.KEY_DOWN, reportKeyDown);

function reportKeyDown (event:KeyboardEvent):void {

	//Get the pressed key (String value)
	pressedKey = String.fromCharCode(event.charCode);

	//Get the key code
	var keyCode:int = event.keyCode;

	//ENTER is pressed, change the row
	//and exit the function
	if (keyCode == 13) {
		charactersOnRow = 0;
		rowNumber++;
		xpos = 0;
		ypos = myRowHeight * rowNumber;
		return;
	}

	//Create a new character movie clip
	var characterMC:CharMovieClip = new CharMovieClip();

	//Call the function that writes the character in the movie clip
	writeCharacter (characterMC);

	/*
	If we have the maximum number of characters on a row,
	switch the row.
	*/
	if (charactersOnRow == 25) {
		charactersOnRow = 0;
		rowNumber++;
		xpos = 0;
		ypos = myRowHeight * rowNumber;
	}
	//Update the amount of characters there are in the current row
	charactersOnRow++;

	//Assign the correct position for the character
	characterMC.x = xpos + 10;
	characterMC.y = ypos + 10;

	//Update the x and y positions for the next character
	xpos += characterMC.width;
	ypos = myRowHeight * rowNumber;

	//Add the character movie clip to the stage
	addChild (characterMC);

	//Call the function that animates the character
	animateCharacter (characterMC);
}

/*
This function writes a character to the movie clip
that is given as a parameter.
*/
function writeCharacter (characterMC:CharMovieClip):void {

	//Set the character on the movie clip's text field
	characterMC.myText.text = pressedKey;

	//Make sure the character fits in the text field
	characterMC.myText.autoSize = TextFieldAutoSize.LEFT;
}

function animateCharacter (char:MovieClip):void {

	//Create a new movie clip, which we will animate
	var temp:CharMovieClip = new CharMovieClip();

	//Write the typed character to the animated movie clip
	writeCharacter (temp);

	//Tween the movie clip
	var tweenX:Tween = new Tween(temp, "scaleY", Regular.easeOut, 0, 100, 1, true);
	var tweenY:Tween = new Tween(temp, "scaleX", Regular.easeOut, 0, 100, 1, true);
	var tweenAlpha:Tween = new Tween(temp, "alpha", Regular.easeOut, 1, 0, 0.5, true);

	//Push the tweens to an array, so they wont's get garbage collected
	tweens.push (tweenX);
	tweens.push (tweenY);
	tweens.push (tweenAlpha);

	//Assign the position
	temp.x = char.x;
	temp.y = char.y;

	//Add it to stage
	addChild (temp);

}

Test your movie! If you have any questions, don't hesitate to ask in the forum.

Bookmark and Share