Typewriter Effect in Flash

The following code will give you type writer effect using Flash.


Typewriter Effect

  1. Make 3 layers total in your movie.
  2. Name the top layer 'text' and type your text in frame 1 of that layer.  On that same layer enter a frame at frame 60.  This will just extend your text to the end of the movie.  Lock your top layer so you won't select your text.  
  3. Now we will mask your text so that it will give it that typing effect.  Name the middle layer 'mask'.
  4. In frame one of the 'mask' layer create a rectangle the height of one of your lines and and small enough right before your text, and make sure you group it.  Make sure the color you use is the same color as your text (whatever color you would like the text to be) Now copy frame 1 and paste it into frame 15.  In frame 15 stretch the rectangle you just made to cover the whole line.  So basically you should have frame 1 with a small rectangle right before the first letter of the 1st line, and then 15 frames down you will have the box covering the whole line.  

    • On the frame 1 in the mask layer double-click and do a motion tween and check 'tween scaling'.
    • Copy frames 1 - 15 of your mask layer.  And paste them at frame 16, 30, etc. until you have pasted a 'tween' for each line of your paragraph.  Now you just need to go through each set of tweening frames that you just pasted and move the boxes down to the correct lines.   You first tween should cover the 1st line, second tween 2nd line, and so forth.
    • You are now done with the tweening aspect.  As of right now if you run the movie it should type the lines, but it won't keep the lines that you type above them so to fix that you have a couple of more steps.
    • On the last layer name it 'text stay'.  This is where the concept comes in.  On every frame at the end of the tween, you want to paste your text into that frame using the 'Paste in Place' feature. At the end of the first tween paste the text into frame 15 (which should be the last frame of your first tweening sequence) of your 'text stay' layer and then delete out all the other lines except the first one.  Now do the same of the second, except delete all the other lines except the 1st and second lines -- all the way until you have all the lines and don't delete any.
    • Lock all the layers and test them. 

Added on June 1, 2007 Comment