Credit for this has to go Daniel Skovli and Jesse Stratford for there work on the original Scripted Typewriter Effect. Their’s is a great place to start, and most of this tutorial uses the same variables as their’s. The difference between their method and this one is that this method doesn’t rely on the timeline. So rather than make the playhead jump around to different scripts, I’m going to type out text using only one frame and a typing speed that can be adjusted by simply changing one number. The biggest advantage of this method is that the speed of the typing is regulated by a variable that can be changed to within milliseconds.

Setting up the FLA

To set up Flash start with your new document and create three layers: one for actions, one for the text, and one for a button to start the animation. You could put these all on one layer, but it’s better to get in the habit of putting everything on it’s own layer. I don’t normally work with a frame rate less than 30fps, but what you choose is entirely up to you. That’s the beauty of doing things with actionscript rather than relying on the timeline. Name the top layer, ‘actions’, the middle, ‘button’, and the bottom, ‘text’.

On frame 1 of the button layer create a simple button and give it the instance name, ‘start_btn‘. Then create blank keyframes on both the actions and text layers anywhere after the first frame (I used frame 5). Now in that new keyframe, create a text box. Change the text-type drop-down menu to Dynamic Text and give it the variable name ‘textbox‘. Note that the variable is not the Instance Name.

12 Lines of Script Goes a Long Way

Still on frame 5, switch to the actions layer and open up the Actions Window. Follows is the complete code.

var q:Number = 1;
var typeSpeed:Number = 100; // time between letters in milliseconds; smaller numbers dictate faster typing
var copy:String = "Look, Ma! I'm typing in Flash!";
function type():Void {
textbox = copy.substring(0, q);
q++;
if (q == copy.length) {
textbox = copy;
clearInterval(typeInterval);
}
}
typeInterval = setInterval(this, "type", typeSpeed);

It’s pretty much the same as Skovli’s code. Just the same, it uses the substring() function to determine how much of the textbox to display. Each time q is incremented by 1, the number of characters that are shown is increased by 1. The real difference here is the use of setInterval() which acts on it’s own at a given rate until told to stop. By creating a function that tells Flash how to type, we then insert it into the setInterval function which tells it how often to type. The typeSpeed variable determines the rate that the interval is called at in milliseconds. Increasing this number means more time passes between interval calls, hence Flash will type slower and vice versa. Once all the text is displayed, the process is stopped with clearInterval().

Back to frame 1, with the Actions Window still open, add:

stop();
start_btn.onRelease = function() {
gotoAndStop(5);
};

All this does is prevent the movie from playing until we start it with the button.

Fin

And there you have it. Using the copy variable you can add whatever text your like or even import text from an external txt file and stylize it with CSS.

Related Articles

Attachments

thanks http://www.actionscript.org/resources/articles/200/1/Scripted-Typewriter-Effect-2/Page1.html

Leave a comment