I love tweening the alpha value in my Flash symbols. It's one of the prettiest effects for fading content—especially text— in and out. If you combine the effect with some easing and a minimal motion tween, you can turn plain old text into an elegant visual effect. This is particularly useful if you are working in a tight space like a banner, skyscraper or microsite where you need to present multiple pieces of information but don't have a lot of real estate.
In this tutorial I'll show you how to make a simple Flash animation that does a smooth perpetual fading loop.
Here's what I'm talking about:
What You Need
I work with a Windows computer and am using (and publishing the .swf's for) Flash 8. This technique is so basic that it should work with any version of Flash that supports alpha adjustments. I'll show you how to accomplish this with only Flash timeline and -no- ActionScript, as well as how to use one simple bit of ActionScript to improve the timing. You should understand Flash well enough to use the timeline and create symbols.
Getting Started
One of the first challenges I ran into with Flash was how to loop a piece of the animation without restarting the timeline or having a visual "bump" where the animation ended. I frequently create Flash banners with an interesting, fast build animation on my root timeline that I only wish to run once. By the time it completes, I want the stage loaded with symbols smoothly doing their own thing, forever.
When I finally figured it out, it was simple. We'll break it down into four steps:
1. Create a new movie clip symbol.
2. Place your content into layers.
3. Stagger layers of content to create overlapping animated "steps".
4. Set up the last step to handle a smooth transition to alpha 0 (invisible) and start the movie clip over.
Optional Step: use GoToAndPlay to tell the last step to restart on a specific frame. This lets you fade the first step in if you wish.
Tip: this example works for any object, not just text. You can use it to fade pictures, vector drawings and other animated symbols just as easily.
