Simple Flash Blog

Typewriter effect in flash can be useful in creating banners or presentations. This tutorial explaines how to create a flash type writer effect using ActionScript.

 Steps to follow:

1. Open Flash 8, create a new document and save it as typeeffect.fla. Go to the Properties panel or choose Modify >> Document (Ctrl+J) and set the dimensions of your flash document to 350×200 pixels.

2. Insert two layers so that the total number of layers is three. Rename them from top to bottom as it follows: actions, text, background (like in the image below).

3. In the first frame of the background layer insert a picture with dimensions 350×200. The one I used is from pdphoto.org. Choose File >> Import>> Import to Stage and select the picture from your computer. Align the picture to center of the stage both horizontal and vertical from the Align panel (Window >> Align or Ctrl+K if it is not opened).

4. Click the Text Tool (T) to select it. Go to the Properties panel and set Dynamic Text as Text Type, font Arial, size 25, color white #FFFFFF, bold, align center. Now go to the first frame of the text layer and draw a text field there. Select it and go back to the Properties panel and set W:3 30.0, H: 180.0, give it an instance name of display_txt and then align it to center horizontal and vertical using the Align panel.

5. While the display_txt go to the Filters panel (second tab of the Properties panel). Click the plus sign  to add a filter and choose Drop Shadow from the list that appears. Set the properties as it follows: Blur X:5, Blur Y:5, Angle: 45, Color black #000000.

6. Now go to the first frame of the actions layer and open the Actions panel (F9). Put the following ActionScript code in:

var phrase_string:String="What I want to say : \n I love Fish";
var n:Number= phrase_string.length;
var i:Number=0;
this.onEnterFrame=function(){
 if (i<n){
  display_txt.text+=phrase_string.substr(i,1);
  i+=1;
 }
}

Now let’s see what the code does. I use phrase_string variable to hold I want to display. You may put here what text do tou want. The \n is a line break, so finnaly I would have three lines.

The n variable is for holding the lenght of phrase_string. The i variavle is a contor to cover all the chars from phrase_string.

Then I use onEnterFrame event for doing some action: if i is less than n I will add to display_txt.text the char from i position in phrase_string.

7. That it’s all. Test tour movie (Ctrl+Enter) and ask me if you have any doubts.

This entry was posted on Tuesday, September 18th, 2007 at 3:42 am and is filed under ActionScript. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.