Toxiclab.org

Typewriter Text Effect

21.7.2010, 15:50
Submited in: Flash | Total Views: 7722

Read this action script 3 lesson and learn how to create typewriter text effect. Please Enjoy!

Example:



Step 1

Create a new flash action script 3 document and save it as fla.fla. Press Ctrl+J key on the keyboard (Document Properties) and set the width of your document to 420 pixels and the height to 200 pixels. Select white color as background color.



Step 2


Call the current layer action script. Double-click on its default name (Layer 1) to change it. Press Enter once you have typed in the new name!

Step 3

Select the first frame of layer action script and go to the AS panel (F9). Then, enter this code inside the actions panel:

var myText:String;
var counter:int = 0;

var format : TextFormat = new TextFormat();
format.size = 12;
format.font = "Times New Roman";
format.bold = true;
format.color = 0x00000;

var textField : TextField = new TextField();
textField.width = 400;
textField.height = 200;
textField.selectable = false;
textField.wordWrap = true;
textField.defaultTextFormat = format;
textField.x = textField.y =10;
addChild(textField);
    
var textLoader:URLLoader = new URLLoader(new URLRequest("text.txt"));
textLoader.addEventListener(Event.COMPLETE, function(e:Event){initText(e.target.data);});

function initText(string:String):void{
 myText = string;
 addEventListener(Event.ENTER_FRAME, writeText);
}

function writeText(e:Event):void{
 if (counter <= myText.length){
         textField.text = myText.substr(0,counter);
         counter++;
 }
 else{
  removeEventListener(Event.ENTER_FRAME,writeText);
 }
}

Step 4

Go to the folder where you saved a fla file. After that, create a new text document and name it text.txt. After that, write any text in the text document. That text will be displayed as typewriter text

We're done!

Please Enjoy!

Download example

Are you a website owner?
Click here to register and submit your tutorials!

Browse by category


Most popular tutorials