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

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

In the previous page, with a few detours along the way, you created the text whose letters you want faded out. In this and subsequent pages, let's add the code and learn more about how it works!

Specifying the Document Class
The first thing we need to do is associate a class whose code will execute automatically when our SWF file is run. The way you do this is by specyfing your document class. Click on any empty area of your artboard to display the document's properties in the Properties Panel:

[ get the document class ready ]

In the Class field, enter the name MainDocument and click on the pencil icon found next to it. You'll now be in AS file editing mode. Hit Ctrl + S or go to File | Save to save this file as MainDocument.as into the same folder as where your FLA is saved:

Everytime your SWF file is run, the code in MainDocument gets executed. This means that the code we would want to start our animation can happily live here.

Adding the Code
Your MainDocument class connects the visual part of what you have done with the code part that you will be doing. In this section, let's fully add the code that will fade the letters in our text out so that you have a working example. We will then go through and look at why the code works the way it does!

First, overwrite all of the contents inside your MainDocument class with the following code:

package

{

 

import flash.display.MovieClip;

import flash.utils.Timer;

import flash.events.TimerEvent;

import com.greensock.TweenLite;

import com.greensock.easing.*;

   

public class MainDocument extends MovieClip

{

  

var animationSeconds:Number = 1;

var delayMilliseconds:Number = 100;

  

var currentCount:Number = 0;

  

var letters:Array;

var timer:Timer;

  

public function MainDocument()

{

Setup();

}

  

public function Setup()

{

letters = new Array();

 

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

{

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

}

ShuffleArray(letters);

SetupTimer();

}

 

public function SetupTimer()

{

timer = new Timer(delayMilliseconds);

timer.addEventListener(TimerEvent.TIMER, TimerTick);

timer.start();

}

 

public function TimerTick(e:TimerEvent)

{

if (currentCount < letters.length)

{

AnimateLetter();

}

else

{

timer.stop();

timer.removeEventListener(TimerEvent.TIMER, TimerTick);

}

}

public function ShuffleArray(input:Array)

{

for (var i:int = input.length-1; i >=0; i--)

{

var randomIndex:int = Math.floor(Math.random() * (i + 1));

var itemAtIndex:Object = input[randomIndex];

 

input[randomIndex] = input[i];

input[i] = itemAtIndex;

}

}

 

public function AnimateLetter()

{

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

currentCount++;

}

}

 

}

You are not quite done yet. This code relies on the TweenLite library to perform the animations, so make sure to download the TweenLite library and copy the com folder and paste in the same directory as your FLA and MainDocument.as file:

If you are not sure how to do this, do check out my introductory Animating with TweenLite tutorial that goes into greater detail on this.

Once you have your com folder from the TweenLite library copied/pasted into the same location as the rest of your files, you are good to go. If you press Ctrl+Enter or Control | Test Movie | Test, you will see letters from your text fading out:

[ your example should work now! ]

Ok, now that you have a working example, let's start figuring out why it actually works by looking at the code...on the next page.

Onwards to the next page!

1 | 2 | 3