Typewriter

A typewriter effect is one of the essential items to learn if you want to be a Flash pro. Learn how to do it, without using confusing Actionscripts

Please install Flash

Step 1

Start off by starting a new movie: File » New. Then go to Modify » Movie and change the width and height to whatever your preference might be. The one I’m making is Width: 200 Height: 50. Then make a new symbol (Button) by going Insert » New Symbol and name it Button1 and behavior as a button. On the white screen, draw what you want the button to look like, just as I have and make sure you have text in it.

Example 1

Step 2

After you have made the graphic in the “Up Frame”, right click on “Over” near the top left hand side and chose Insert Keyframe. Everything should remain the same except there should be a dot inside the “Over” at the top and your image should be highlighted in blue.

Example 2

Step 3

Alright, with your image highlighted, chose Insert » Convert to Symbol. Name can be called Movie1 and behavior is as a Movie Clip. Right click on your image, which should now be a movie clip, and choose Edit In Place. Here is where we will make our animation which will occur when you put your mouse over the button.

Example 3

Step 4

You would want to split the text and the other graphics in to different layers. Alright, on the first frame which you are on, you should type the full text of what you want to appear. Fox example, I chose “Forum”. Then add a keyframe on the third frame, and type in “forum_” with an underscore at the end. Now go to the fifth frame and type in “foru_”. Then on the seventh, type “for_” and so on until you are just left with “_”, which on my example would be on the thirteenth frame.

Example 4

Step 5

After that, you would want to insert a blank frame on the nearest odd keyframe, here it would be 15. Then on the 17 frame, insert a “_”. Then another blank keyframe on 19th. Again, on the 21st, write a “_”. Now we will add all the text back in, so on the 23rd, type “F_”, 23rd “Fo_” and so on until you get to “Forum_”. You should get up to the 31st frame.

Example 5

Step 6

Then on 33rd put “Forum” without an underscore. Then on 35th, put “Forum_”. Keep going “Forum” and “Forum_” over and over like specified, until you think it is enough, I did it 7 times. Pretty wacky, but easy huh? That’s it, its completed. Now days, programs such as Swish make it extremely easy to do such time consuming and tedious effects.

Example 6

Note: This tutorial was originally authored by my friends at Spoono.com. This revised version is available on Absolute Cross with permission.

Tutorial resources
Back to top