Hack 50 Time-Based Text Effects

Create various effects by varying the size and position of letters over time using the text effect framework.

We've seen how our text effect framework [Hack #48] could be used to create a typewriter text effect [Hack #49] . This hack presents three more text effects run atop a single code base to show you the various possibilities.

Stand-Up Effect

This text effect makes the text appear to "stand up" over time. As with other text effects, this is achieved by changing a clip property over time. In this case, the property being changed is _yscale (percent height). It is initially set to 0 so the text is invisible (it has no height). Notice that instead of changing the property immediately (as we do in the typewriter effect [Hack #49] ), the transition is performed over time via an onEnterFrame( ) handler. The onEnterFrame( ) handler deletes itself when the _yscale property has reached its final value (100%).

The Code

The following code shows how to create a smooth effect by changing the letter properties gradually via an onEnterFrame( ) handler. We've also modified placeText( ) from the preceding hack [Hack #49] to accept the name of a function to execute and the time delay between characters. This makes it easier to reuse that function for different effects. The code assumes that a dynamic text field named letter is stored in a containing clip with the instance name field. The final version is available as standup.fla on this book's web site. Portions of interest are highlighted in bold.

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

  target.interval = function( ) {

    clearInterval(target.intervalID);

    this.onEnterFrame = function( ) {

      target._yscale += 10;

      if (target._yscale > 95) {

        delete this.onEnterFrame;

      }

    };

  };

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

  target._yscale = 0;

}

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

                   banner:String, tFormat:TextFormat,

                   effectFunction:Function, delay: Number):Void {

  // For each character... 

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

    // Create a clip and place the current  

    // character in 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 function call, passed in as a parameter

    effectFunction(char, i*delay);

  }

}

var format:TextFormat = new TextFormat( );

format.font = "Arial";

format.size = 24;

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

Figure 6-32 shows the stand-up effect in action. The effect changes the height of each character from 0% to 100% of the original size.

Figure 6-32. The stand-up effect in action

Drop Effect

By changing other properties and/or more than one property over time, we can create transitions that appear different while using similar code. To create a drop effect, we vary the _y property over time to make the letters appear to drop into place in sequence. We also set the _visible property to make each letter visible at the start of its drop sequence.

Also, note that a more gradual animation is created here by simulating inertia or easing via the code highlighted in bold. The placeText( ) function (not shown) is the same as in the preceding example, which again assumes that a dynamic text field named letter is stored in a containing clip with the instance name field. The final version is available as drop.fla on this book's web site.

// ActionScript 2.0 code

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

  target.interval = function( ) {

  target._visible = true;

  clearInterval(target.intervalID);

    target.onEnterFrame = function( ) {

      target._y -= (target._y - target.startY) / 3;

      if (Math.abs(target._y - target.startY) < 1) {

        target._y = target.startY;

        delete target.onEnterFrame;

      }

    };

  };

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

  target.startY = target._y;

  target._y = 0;

  target._visible = false;

}

var format:TextFormat = new TextFormat( );

format.font = "Arial";

format.size = 24;

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

Figure 6-33 shows the drop effect in action. The delays cause each letter to appear in sequence, followed by a drop animation.

Figure 6-33. The drop effect in action

Fade-in and Zoom Effect

Perhaps the best-known text effect is the fade-in and zoom, made famous by theVoid (http://www.thevoid.co.uk).

This effect changes the _xscale, _yscale, and _alpha properties over time, but the code is fundamentally the same as before. The transition is smoothed by using inertia for all of the property changes (as highlighted in bold in the listing). The placeText( ) function (not shown) is the same as in the preceding examples and again assumes that a dynamic text field named letter is stored in a containing clip with the instance name field. The final version is available as fadeIn.fla on this book's web site.

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

  target.interval = function( ) {

    target._visible = true;

    clearInterval(target.intervalID);

    target.onEnterFrame = function( ) {

      target._xscale -= (target._xscale - 100) / 3;

      target._yscale -= (target._yscale - 100) / 3;

      target._alpha  -= (target._alpha  - 100) / 3;

      if (Math.abs(target._xscale - 100)<1) {

        target._xscale = 100

        target._yscale = 100

        target.alpha = 100

        delete target.onEnterFrame;

      }

    };

  };

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

  target._xscale = 2000;

  target._yscale = 2000;

  target._alpha = 0;

}

var format:TextFormat = new TextFormat( );

format.font = "Arial";

format.size = 24;

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

Figure 6-34 shows the fade-in and zoom effect in action. Although the effect looks more complex than the preceding examples, we are merely changing multiple properties over time.

Figure 6-34. The fade-in and zoom effect in action

To make the effect symmetrical, move the text field within the letter movie clip (using the Selection tool) so that the clip's registration point is at the center left of the text field, as shown in Figure 6-35.

Figure 6-35. Moving the registration point to make the fade-in effect symmetrical

Final Thoughts

Once you have the basic framework in place, you can create diverse text effects by changing various properties over time. You can either dream up a text effect and then try to implement it, or you can pick a property (or properties) to vary and see what visual effects they generate.

To create an interactive text effect generator, let your user specify the input text and vary parameters, such as the amplitude or speed of the effect, over time. You can create a library of more sedate text effects for business presentations or wacky ones for hipper web sites.