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

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

A nice effect I often see in movie intros is one where individual letters in a block of text are faded out. There is just something fascinating about it. Below is an example of what I am referring to:

[ after about 30 seconds, all of the letters will have been gone! ]

Notice that each letter fades out - leaving absolutely nothing of the original text towards the end. By the end of this tutorial, you will learn how to create this effect.

Overview of the Implementation
Because this effect contains many little steps spanning both design as well as code, I feel it would be helpful to get a quick glimpse of the steps involved before you dive into the details of them:

The diagram does omit some small but crucial details, but it should give you a preview of what to expect. Let's start by designing the text.

Setting up the Text
The first thing we are going to do is get our text ready:

1. Launch either Flash CS4 or CS5 and create a new ActionScript 3 project.
2. Resize your stage to be 350 pixels wide and 150 pixels tall:

[ resize your stage to be 350 x 150 ]

3. Once your stage has been resized, let's add some text to make it look less empty. Use the Text tool to add the following text:

Quisque porta tincidunt elit, vestibulum sagittis ipsum semper ac. Nam.

Your stage should now look as follows:

[ my text has been entered ]

4. Next, make sure your text is displayed in the Classic engine as opposed to the TLF engine. You can verify this by selecting your text field and looking in the Properties Panel where the Text Engine property lives:

[ set your Text Engine to the older Classic Text ]

If you don't see Classic Text displayed, go ahead and select Classic Text from the drop-down.

5. Now, all that is left is to make our text look nice. Feel free to spruce it up so that it looks just the way you like. For reference, here is what my text looks like:

[ 40pt, Tw Cen MT Condensed, #333333, full of win ]

6. Once you are happy with what your text looks like, let's place all of this inside a movie clip so that you can reference it via code easily. Select your text field and press F8 or go to Modify | Convert to Symbol. The Convert to Symbol dialog will appear.
    
   Inside this dialog, make sure your Type is set to Movie Clip, and give your clip a generic name like textMovieClip:

[ convert your text into a Movie Clip ]

Click OK once you are done to dismiss this dialog and to convert your text into a movie clip.

7. Right now, your text is now wrapped up by the movie clip. What we want to do next is go inside our newly created movie clip and have direct access to our text again. Right click on your movie clip and select Edit in Place. You will now be inside your movie clip:

[ the breadcrumb bar tells you that you are inside the movie clip now ]

8. You will now have access to your text field again. What we are going to do next is break apart our text and distribute each character to its own layer.
   
   First, right click on your text object and select Break Apart. Once you have done that, you'll see that each character now is separate:

[ break the text into the individual letters ]

Next, select all of the characters if they aren't selected already. Right click on the selected characters and select Distribute to Layers. After a few seconds, look at your timeline. You will see that each character now has its own layer:

[ each letter will have is own layer ]

9. You are almost done with the design portion of this exercise! Tunnel back out to Scene 1 by clicking on the Scene 1 link in the breadcrumb bar:

[ let's leave the movie clip and go back to our root ]

10. All that is left is to give our movie clip containing your text an instance name. Select the movie clip, look in the Properties Panel, and give it the instance name textClip:

[ give your movie clip the instance name textClip ]

If you haven't done so already, go ahead and Save this file. Give it any name you want, but just remember where you saved it for you will be adding more files in the same directory as this file really soon.

You just finished the "designing" part of this tutorial where you took some text, broke the text into individual letters, and molded it into a shape that you can easily work with using code. We'll have to now shift gears from doing things visually to doing things using code...on the next page!

Onwards to the next page!

1 | 2 | 3