Daniel Skovli

This user is yet to take control of their account and provide a biography. If you are the author of this article, please contact us via support AT actionscript DOT org.

View all articles by Daniel Skovli

Download the Source file for this tutorial (zipped .fla, flash 5)

You have probably seen many different typewriter effects done in flash. So have I, but there was one I couldn't find - the pure actionscript typewriter. Therefore, I've written this tutorial. Follow these easy steps, and you'll have your own typewriter done in no-time:

Step 1 - Creating the layout and frames:

As you might have spotted from this screenshot - you need three frames to build your typewriter. I have put actions, buttons and text in separate layers, but that is just for structure. Make a dynamic text-box, and give it the variable name 'textbox'. This should go over all three frames.

Step 2 - creating the frame-actions:

Then, you are ready to create the actions to make the whole thing work:
o In Frame 1 we define the text we want to display. Use "\n" for a newline. Frame 1 has these actions

q = 1;
text = "this is where you put your text";
stop();

o Frame 2 checks if we've output all the characters yet, and if not it takes Q characters from the start of our string and shows them in the text field. Frame 2 has these actions:

if (q < text.length) {
        textbox = text.substring(0, q);
        q++
} else {
        textbox = text;
        gotoAndStop(1);
}

o Frame 3 is just a loop back frame. Frame 3 has these actions:

gotoAndPlay(2);

Step 3 - creating the button:

Make a button at frame 1, and place it on stage. This button should launch the typewriter, so it has to have a little piece of code attached to itself (right click the button, and chose actions).
o the button has these actions:

on (release) {
        play();
}