Sunday, August 15, 2010

How to create typing effect using Actionscript 3

In this tutorial you will learn how to create a typing effect using Actionscript 3.

We will create a function that can be later used many times. There will be one paremeter - text you want to type.

First of all, create a text field on stage with an instance name of textF.

Here is the code:

function typeText(str:String){
textF.text=""
var textarray:Array = str.split("");
var timer:Timer = new Timer(50);
var i:int = 0
timer.start();
timer.addEventListener(TimerEvent.TIMER, update);
function update(TimerEvent){
 textF.appendText(textarray[i]);
 i++
 if(i==textarray.length){
  timer.stop();
  }
}
}

As you can see, firstly we create an array, which contains each letter as a separate element. Then we make a 50 millisecond timer (this will be the interval between each letter's appearance). Start the timer and just add a new letter when it completes. When the number of letters reach maximum, timer stops!

Easy as that. Remember that you can use split(); function differently, depending on what result are you aiming for. If you want not letters, but words to appear like that - change the parameter to space - split(" ").

With a little bit of creativity, here's what you can do:



Thanks for reading!

No comments:

Post a Comment