Flash Hacks. 100 Industrial-Strength Tips & Tools

< Day Day Up >

Hack 49 Typewriter Effect

Create the classic typewriter text effect without any manual timeline animation.

The first experiment most Flashers want to try once they've developed a text effect framework is the classic typewriter effect. It is perfect for the opening credits to suspense thrillers, crime dramas, and movies about writers, such as Adaptation.

In this case, we implemented a typewriter effect complete with sound. The code assumes your Flash movie contains a sound with the linkage identifier typeClick (import the sound into Flash and set its linkage identifier in the Linkage Properties dialog box, accessible from the Library panel's pop-up Options menu). Naturally, we used the sound of a typewriter key in the example available as typewriter.fla on this book's web site.

The Code

Here is the code based on the earlier text effect framework [Hack #48] . Changes are shown in bold. The code assumes that a dynamic text field named letter is stored in a containing clip with the instance name field and that the sound typeClick exists in the Library.

function typewriter(target:MovieClip, delay:Number):Void {

  target.interval = function( ) {

    target._visible = true;

    keyHit.start(0,1)

    clearInterval(target.intervalID);

  };

  target.intervalID = setInterval(target, "interval", delay);

  target._visible = false;

}

function placeText(target:MovieClip, x:Number, y:Number,

                   banner:String, tFormat:TextFormat):Void {

  // For each character... 

  for (var i = 0; i < banner.length; i++) {

    // Create a clip and place the current  

    // character of the text field inside it.

    var char:MovieClip = target.attachMovie("letter", "char" + i, 

                                    target.getNextHighestDepth( ));

    char.field.text = banner.substr(i, 1);

    char._x = x;

    char._y = y;

    // Add the width of the current text character to the 

    // next letter's x position.

    x += tFormat.getTextExtent(char.field.text).width;

    //

    // Here is the effect call.

    var timer = i*200 + Math.round(Math.random( )*200);

    typewriter(char, timer);

  }

}

var keyHit = new Sound(this);

keyHit.attachSound("typeClick");

var format:TextFormat = new TextFormat( );

format.font = "Arial";

format.size = 24;

placeText(this, 100, 100, "This is a text effect.", format);

At the end of placeText( ), we set up a delay, timer, of between 200 and 400 milliseconds per character. This time delay has to expire before the text is revealed (and the associated typewriter click sound is played) by function typewriter( ). This simulates the delay between keys as a user types text.

Any text effect always follows this same code pattern:

• Create a delay per letter, and change one or more properties of each letter.

• At the end of this delay, set each changed property to its final value to complete the transition.

• Go on to the next letter.

For the typewriter effect, the _visible property is set to false, making all letters initially invisible. When the delay time expires, the code in typewriter( ) makes the text visible again. Figure 6-31 shows the typewriter effect in action. The delays reveal each character in sequence, left to right.

Figure 6-31. The typewriter effect in action

Final Thoughts

The typewriter effect demonstrates that many possible effects follow a similar pattern. It also reveals that important aspects to any text effect include the time delay, the font face, and the accompanying sound. Without the accompanying sound or delay between letters, it wouldn't be nearly as convincing as a typewriter effect. Likewise, using a constant width (monospaced) font might make it even more effective.

Many text effects can be achieved using the right combination of timing, sounds, and fonts. For example, you might use the sound of chalk drawing on a chalkboard and an appropriate font to convey a handwritten, scholastic effect (in that case, each letter could be an animated movie clip that shows the letter being drawn using several strokes).

< Day Day Up >