Basic Alpha Fade Tutorial (tweening method)

The following technique can be applied to any text or other shape drawn in flash as well as an imported graphic.

1. Open new movie. In layer 1, select the text tool and type the word of your choice in the first keyframe (To change font, open your Character Panel and adjust your Character settings there). Take a moment to name this first layer as well.

2. Select the text that you just typed. Press F8 to create a symbol. As default, Flash 5 will have Movie Clip Symbol selected. This is fine or you can choose to select Graphic Symbol. Next name your symbol and click OK. You have just created a graphic symbol of the text you typed. Once you create a symbol in flash (whether it be a graphic, movie clip or button symbol) you are able to apply instance properties to the symbol. This is what we will be doing next.

3. Now click on keyframe 20 and press F6. You have now made another instance of your symbol. At this point we will return to keyframe 1 and apply a color effect of alpha to create an alpha fade effect.

4. At keyframe 1 select your text (symbol), then go to your Instance Panel (if it is not already open right click on your text symbol and select Panels > Instance). Now select the Effect tab from the Instance Panel. At the pull down menu, select Alpha then slide the percentage scale to be at 0%. Your symbol will disappear, as it is now transparent in keyframe 1.

5. Next move your mouse to your timeline and anyplace between keyframe 1 and keyframe 20, right click on the timeline. Select Create Motion Tween. Your tween will automatically be created for you, fading the symbol from completely transparent to solid (frame 20).

6. Now test your movie. That's the basis for an alpha fade effect. You can achieve many other effects by changing the color effect used at any particular instance of a symbol, as well as its position and scale. This tutorial has explained how to create an Alpha Fade through 'traditional' tweened animation in Flash. You can also create this same basic effect using Action Script.

This tutorial was originally created in Jan 2000 for Flash 4 and revised in Aug 2001 for Flash 5

Download the source for this example

:: organic:pixel ::

[ back ]