Agoraphobiae

Code | Games | Geek

Fade in text, then fade out text with embedded font in AS3

Leave a comment

There are many snippets online on how to fade, but each with it’s own flaw – some incomplete, some using AS3’s default Tween (yuck). After trying to figure out it for myself, I came up with this. The following is a working example of placing some text on the stage, fading from 0 to 100 alpha, then back to 0.

To start off, import the classes needed. I’m using the TweenLite library, widely regarded as the best (so I’ve heard), better than the default Adobe Tween. After using their website demos, you’ll see it’s much faster. You’ll need to grab the library, and place the com folder from the .zip into the folder with your .fla, as instructed in the Getting Started Guide.

// remember to import
import com.greensock.*;
import com.greensock.easing.*;

import flash.text.TextField;
import flash.text.TextFormat;
import flash.text.TextFieldAutoSize;
import flash.text.Font;


Next, inside of your .fla’s document class, add the following function. It will take the text you want to display, the x and y location you wish to display it at, and the font color and font size. This information gets encoded into a TextFormat object, which is then given to the TextField object as its default formatting. I’m using Layer movieclips as a workaround ActionScript’s inability to handle layers; if you aren’t doing this you can easily just use addChild() to add the textbox to the stage.

// in document class
public function displayText(s:String, xloc:Number, yloc:Number, fcolor=0xFFFFFF, fsize=48):void
{
    var textf:TextFormat = new TextFormat();
    textf.color =           fcolor;
    textf.font =            "Intro";
    textf.size =            48;

    textbox = new TextField();
    textbox.text = s;
    textbox.width = 400;
    textbox.height = 400;
    textbox.embedFonts = true;
    textbox.defaultTextFormat = textf;
    textbox.setTextFormat(textf);
    textbox.autoSize = TextFieldAutoSize.LEFT;
    textbox.antiAliasType = "advanced";
    //textbox.border = true;

    textbox.x = xloc;
    textbox.y = yloc;
    Layer02.addChild(textbox);

This is where the magic happens. Using the TweenLite.from function, we go from the specified alpha value (0.1) to the current, which is the default (1) when the textbox gets added to the stage. Then, we added a handler to this fade in tweet, which is a function that calls a TweenLite.to to fade out. This fade out function has an onComplete handler as well, which points to a function called updateTextGraphics. updateTextGraphics simply takes the textbox we created as an argument and removes it from the stage. Each effect lasts 3 seconds, but the fade in has a 1 second delay, and the fade out has a 3 second delay.

    TweenLite.from(textbox, 3, {alpha:0.1, delay:1, onComplete:function handle():void {
        TweenLite.to(textbox, 3, {alpha:0, delay:3, onComplete:updateTextGraphics, onCompleteParams:new Array(textbox)})
        }
        })
}

public function updateTextGraphics(textmc):void
{
    Layer02.removeChild(textmc);
}

The code assumes you have embedded a font named Intro – I’ll go over how to work with embedded fonts in another tutorial.

Have fun fading in and fading out text!

The whole code below:

// remember to import
import com.greensock.*;
import com.greensock.easing.*;

import flash.text.TextField;
import flash.text.TextFormat;
import flash.text.TextFieldAutoSize;
import flash.text.Font;

// in document class
public function displayText(s:String, xloc:Number, yloc:Number, fcolor=0xFFFFFF, fsize=48):void
{
    var textf:TextFormat = new TextFormat();
    textf.color =           fcolor;
    textf.font =            "Intro";
    textf.size =            48;

    textbox = new TextField();
    textbox.text = s;
    textbox.width = 400;
    textbox.height = 400;
    textbox.embedFonts = true;
    textbox.defaultTextFormat = textf;
    textbox.setTextFormat(textf);
    textbox.autoSize = TextFieldAutoSize.LEFT;
    textbox.antiAliasType = "advanced";
    //textbox.border = true;

    textbox.x = xloc;
    textbox.y = yloc;
    Layer02.addChild(textbox);

    TweenLite.from(textbox, 3, {alpha:0.1, delay:1, onComplete:function handle():void {
        TweenLite.to(textbox, 3, {alpha:0, delay:3, onComplete:updateTextGraphics, onCompleteParams:new Array(textbox)})
        }
        })
}

public function updateTextGraphics(textmc):void
{
    Layer02.removeChild(textmc);
}

have fun

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s