O'Reilly Hacks
oreilly.comO'Reilly NetworkSafari BookshelfConferences Sign In/My Account | View Cart   
Book List Learning Lab PDFs O'Reilly Gear Newsletters Press Room Jobs  


 
Buy the book!
Flash Hacks
By Sham Bhangal
June 2004
More Info

HACK
#50
Time-Based Text Effects
Create various effects by varying the size and position of letters over time using the text effect framework
The Code
[Discuss (1) | Link to this hack]

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 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 parametereffectFunction(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);

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

Figure 1. The stand-up effect in action


O'Reilly Home | Privacy Policy

© 2007 O'Reilly Media, Inc.
Website: | Customer Service: | Book issues:

All trademarks and registered trademarks appearing on oreilly.com are the property of their respective owners.