Fading Out Letters in Text - Page 3
       by kirupa  |  16 June 2011

  Have questions? Discuss this Flash tutorial with others on the forums.

In the previous page, you got your application to work by adding the full code in MainDocument.as and making sure the TweenLite library worked in your project. In this page, let's deconstruct the code and learn why it works to do the things it does.

Looking at the Code
The code for making this all work may look like a lot, but it really isn't. At a high level, our code does the following four things:

1. Stores all of the letters in a random, jumbled order.
2. Starts a timer that ticks periodically.
3. Fades a letter at each timer tick.
4. Stops the timer when all of the letters disappear.

 Let's start at the very top and look at how these four things are translated into code.

Basic Setup
Before we get to the interesting parts, we should cover the basics such as our import statements and declared variables. At the very top of your document, the first thing you see are the import statements that inform the Flash compiler where the various classes come from:

import flash.display.MovieClip;

import flash.utils.Timer;

import flash.events.TimerEvent;

import com.greensock.TweenLite;

import com.greensock.easing.*;

In many cases, these import statement are added automatically when you type a class name that requires it. For 3rd party libraries, you have to add the import statement manually though. The two TweenLite import statements correspond to the 3rd party TweenLite library.

Next up, let's look at the variables that will be available for the entire MainDocument class to use:

var animationSeconds:Number = 1;

var delayMilliseconds:Number = 100;

var currentCount:Number = 0;

var letters:Array;

var timer:Timer;

There is nothing particularly interesting here. Briefly take note of the variable names and any initial value they may be set to. I'll call out anything that is relevant when these variables are used in our main code!

Storing the Letters...Randomly
Now we are getting to the interesting stuff. When your SWF loads, the MainDocument class gets instantianted. As part of the instantiation, the MainDocument constructor gets called:

public function MainDocument()

{

Setup();

}

The MainDocument constructor is responsible for calling the Setup function:

public function Setup()

{

letters = new Array();

for (var i:int = 0; i < textClip.numChildren; i++)

{

letters.push(textClip.getChildAt(i));

}

ShuffleArray(letters);

StartAnimation();

}

The Setup function is responsible for accessing the individual letters and storing them in a random order for animating. The first thing we do is initialize the letters variable to be a new Array object:

letters = new Array();

Once we have our array object, it's time to populate it with the individual letters that are contained inside our textClip movie clip that houses all of our letters:

for (var i:int = 0; i < textClip.numChildren; i++)

{

letters.push(textClip.getChildAt(i));

}

The way we populate our array is by going through every child inside our textClip movie clip and adding it. The children of textClip are just the individual letters - TextField objects to be more precise. By using a combination of numChildren to know when to stop and getChildAt to know which child to add to our array, our letters array will contain a reference to every letter that makes up the text we wish to animate!

If I were to trace the contents of our letters array, this is what you will see:

[ a sea of TextField objects! ]

The order in which the letters get stored in our array is the order in which they appear in our text. Animating all of the letters in order may not be what you want. The easiest way to animate the letters out of order is to simply shuffle the contents of our array so that our letters are jumbled.

The shuffling of our array is handled by our ShuffleArray function that takes our letters array as an argument:

ShuffleArray(letters);

I won't describe the ShuffleArray function in this tutorial because the Shuffling an Array tutorial covers everything you need to know about this function instead! Just know that, after the call to ShuffleArray, the contents of your array are...well, shuffled! All that is left is to start the timer by making a call to SetupTimer:

SetupTimer();

With this function, we move on to Step 2 of what our code does.

Starting a Timer
The SetupTimer function is responsible for starting the timer that is responsible for gradually fading all of the letters out:

public function StartAnimation()

{

timer = new Timer(delayMilliseconds);

timer.addEventListener(TimerEvent.TIMER, TimerTick);

timer.start();

}

As you can imagine, the Timer class and its related functions are central to making this all work:

timer = new Timer(delayMilliseconds);

timer.addEventListener(TimerEvent.TIMER, TimerTick);

timer.start();

 First, I initialize my timer variable to store a Timer object. As part of the construction of my Timer object, I pass in a number (delayMilliseconds) that specifies how often to have my timer tick:

timer = new Timer(delayMilliseconds);

The value for delayMilliseconds, as specified towards the top of our code file where this variable is declared, is 100. This means, every 100 milliseconds (or .1 second), our Timer will will tick.

Getting into specifics, our "tick" is actually a TimerEvent.TIMER event that is fired by our timer object. In order to do something at each tick, we need to listen to this event and react accordingly. That is handled by the following line of code:

timer.addEventListener(TimerEvent.TIMER, TimerTick);

Just like listening for any event, you use the addEventListener function to specify the event you are listening for (TimerEvent.TIMER), and the function / event handler to call when you hear the event. In this case, our event handler is called TimerTick. Every 100 milliseconds, the TimerTick event handler will get called.

The last thing left is to actually start our timer:

timer.start();

Starting a timer is handled by the appropriately named start function!

Every time our timer ticks, you saw earlier that the TimerTick event handler (referred to as a function from now on) gets called:

public function TimerTick(e:TimerEvent)

{

if (currentCount < letters.length)

{

AnimateLetter();

}

else

{

timer.stop();

timer.removeEventListener(TimerEvent.TIMER, TimerTick);

}

}

Inside this function, the main block of code is the if statement that checks whether there are any letters left to fade:

if (currentCount < letters.length)

{

AnimateLetter();

}

else

{

timer.stop();

timer.removeEventListener(TimerEvent.TIMER, TimerTick);

}

The currentCount variable, which you will see used shortly, keeps track of the number of letters you have animated through. The number of letters is stored by our letters Array's length property. As long as the number of letters we have animated is less than the total number of letters, we call the AnimateLetter function:

AnimateLetter();

If there are no more letters left to animate, then we stop the timer and remove the event:

timer.stop();

timer.removeEventListener(TimerEvent.TIMER, TimerTick);

We'll revisit this code and look at both of these cases in greater detail shortly!

Fading a Letter
First, we will look at the AnimateLetter function. This function is responsible for fading out a letter when called:

public function AnimateLetter()

{

TweenLite.to(letters[currentCount], animationSeconds, {alpha:0, ease:Cubic.easeIn});

currentCount++;

}

The animation is done entirely by using the TweenLite library. The first argument I pass in to the to function is the letter I wish to animate, and that is accessed from our letters array by passing in our currentCount value as the index at which to find the item at.

The second argument specifies the duration of the animation. Tha value is stored by our animationSeconds variable which was declared and initialized much earlier with a value of 1. You can increase or decrease this number to slow down or speed up the animation respectively.

The third argument takes a collection of properties that define some animation properties. Since I am wishing to fade my text out, I set the alpha value of the text to 0. What this means is that the end result of this animation should be that our text is not visible. The other property I pass in is the easing function I wish to use.

If you want to learn more about TweenLite, the Animating with TweenLite tutorial goes into greater detail.

Stopping the Timer
The last thing we will look at is stopping our animation once all of the letters have been faded out. That is handled by the following code which you briefly saw earlier:

timer.stop();

timer.removeEventListener(TimerEvent.TIMER, TimerTick);

The first thing we do is stop our timer so that our TimerTick function doesn't get called. The next thing we do is remove the association between the TimerEvent.Timer and the TimerTick function using removeEventListener. While you don't have to do this, it is a good habit to clean up event associations when you no longer need them!

Conclusion
And with this, you are done with this tutorial on how to make individual letters from your text fade! Below, you will find the source files for the example you saw on the first page along with the example you saw as part of this tutorial:

Download Final Source Files

Just a final word before we wrap up. If you have a question and/or want to be part of a friendly, collaborative community of over 220k other developers like yourself, post on the forums for a quick response!

1 | 2 | 3