Main Content

You are here:

Command Line Effect

Welcome to another one of Foundation Flash's free Flash tutorials. Today we're going to combined the graphical user interface of Flash with hard code (source available) to create this typing/command line effect. Before we look at it though, make sure you're familiar with

During today's tutorial we'll be making this:

So, first things first. Set yourself up a new project, .fla and .as, using the name 'Typewriter'. If you change that name, make sure you change it everywhere. Save all in the same folder. Now head to your .fla, set the document class to 'Typewriter' and then the formatting can begin.

Start by creating a new dynamic textbox and give it an instance name of 'typed' so we can refer to it later in the code. Drag it out so it fill most the screen before going to the properties box and tweaking the font, size and colour. I've made mine bold so it stands out as well. Make sure on the drop down box that it is a Multiline text box and NOT only Single line or it won't be able to contain more than one line. Optionally, you can change the colour of the stage - it just depends on what sort of effect you're trying to achieve - but you'll probably want to tweak the frame-rate.

Type a start line off into your box e.g. 'Starting script...'. This line will be left untouched and the typing will start on the next line. Now turn to you .as file's code:

package {
        import flash.display.MovieClip;
        import flash.utils.Timer;
        import flash.events.TimerEvent;
        import flash.text.TextField;
        public class Typewriter extends MovieClip {

Just starting off our new Typewriter class and importing some key classes to help us. As with the majority of our other projects, we are left to define some variables and open our constructor function:

             public var flickerOn:Boolean = false;
                public var letters:Array = new Array();
                public var timer:Timer = new Timer(250);
                public var betweenLines:String = "\n> ";
                public var delay:uint = 0;
                public function Typewriter():void {

flickerOn will be used by our flashing cursor, our timer is our main timer (which we set to go off every 250ms), betweenLines is the code for between lines - your new line indicator and the newline character itself so Flash puts in a new line (\n) and delay is used to decide how long to wait between each line (though not actually that figure itself). Most important, however, is the letters array, which will hold everything that is waiting to be typed. The last line just declares the constructor function, which will be this:

                     timer.addEventListener(TimerEvent.TIMER,typeChar);
                        timer.start();
                }

What are we doing here? Well, I'm afraid it's just boring old timer code, adding a handler called 'typeChar', which, as the observant among you will have noticed, doesn't actually exist yet. I can exclusively let you know that it will first decide whether to flash the cursor or type a character, then do that:

             private function typeChar(e:TimerEvent):void {
                        if ((letters[0] == betweenLines && delay < 8) || letters.length == 0) {
                                delay++;
                                if (flickerOn) {
                                        typed.text = typed.text.substring(0,typed.text.length - 1);
                                } else {
                                        typed.appendText("_");
                                }
                                flickerOn = !flickerOn;
                        } else {
                                delay = 0;
                                typed.appendText(letters.shift());
                        }
                }

It does logically make some sense:

if((we're about to type a new line but haven't delayed enough yet) or there are no more letters to type){
flicker the cursor;
} else{
print the next letter
}

The delay waits eight ticks before typing the next line. In code terms, there is a little left to explain. We're using the substring function to take everything but the last character (i.e. remove the last character, the underscore) or appending (tacking on at the end) and underscore: if we were showing the underscore indicator, we remove it; if there wasn't one, we add it. Later, we use the shift() function to remove and retrieve the first value of the array - the next character to be typed. Then we use the old ! trick to change the value of flickerOn to the opposite of what is was before.

Now we're getting somewhere: we can print the contents of the letters array and flicker the cursor. As of yet, though, we can't actually add anything to the letters array. To make the process quick and easy to understand we can use a little function like this:

             private function type(theString:String):void {
                        letters.push(betweenLines);
                        for (var i = 0; i < theString.length; i++) {
                                letters.push(theString.charAt(i));
                        }
                }
        }
}

Our new function, called type takes a string which it breaks into characters. It pushes (add to the end) the betweenLines indicator onto the letters array, then adds each character individually.

All that's left to do now is to call the type function from our constructor function. As an example, these are the lines used in the Flash above:

                     type("Hello and welcome to today's tutorial.");
                        type("We hope you enjoy it.");
                        type(" ");
                        type("__              _");
                        type("|_  |   /\  |_   |_|");
                        type("|   |_ /  \  _|  | |");

Just change the text to whatever you want. Backslashes must be escaped by putting another backslash before them (or after them I suppose!) however. That concludes today's free Flash tutorial about creating a typewriter effect. Enjoy!

See you again for another tutorial,

Harry.

Comments