Saturday, 7 June 2008

Fade text effect

In this tutorial you will learn how to create a fade text effect in Flash. The fade effect is basically text which fades in from being transparent. This effect is fairly basic and very simple to create, no actionscript is needed.


Fade text effect

Step 1

Open a new Flash document.
Select the Text tool with static text and type your message on the stage. You can choose whatever font type or font size you wish.




Step 2

Convert your text message in to a symbol by pressing F8. Then give your symbol an appropriate name, check movie clip and click ok.


Step 3

On the timeline insert a new key frame at frames 20 and 40 by selecting F6 at each frame. This creates a short pause after the text fade effect. You can make this pause shorter by decreasing the number of frames after the second key frame.



Using the selection tool (v) select the first frame. Then click your text message on the stage. Now change the colour to alpha at 0% at the bottom of the screen. This will make your movie clip transparent at the beginning of the animation.



Now create a motion tween in between the first and second key frames. On the timeline right click in between the first and second key frame and select “Create motion tween”. You time line should look like below:




Step 4

Test your movie clip Ctrl + enter.




You should now have a nice fade text effect. Checkout the video version of the fade text effect if you are having problems.

This fade text effect can also be achieved using Tweens with Actionscript code. The below code would be the alternative for step 3. For more information on Tweens checkout this tutorial.

import fl.transitions.Tween;
import fl.transitions.easing.*;

var myTween:Tween = new Tween(text_mc, "alpha", Strong.easeOut, 0, 1, 10, true);

12 comments:

Mau 17 October 2008 19:45  

Very clear and easy to understand. Thank you.

Mau 18 October 2008 07:23  

Hi again, I have a weird thing happening in flash.
After I created the text effects with your tutorial everything runs fine within Flash but when I publish it to HTML (or pressing CTRL+ENTER to view it in a Flash window) the effects are gone.
Have I done something wrong?

iliketo 18 October 2008 07:37  

@Mau

Can you rephrase your question I’m not quite sure what you mean?

Mau 18 October 2008 07:52  

Sure, the thing is that the text effects works well under flash. I mean in the flash editor, when I press enter they work ok.
When I publish (pressing F12) or watch it (pressing CTRL+ENTER) the text effects are gone.
Would you like me to send you the flash file?

iliketo 19 October 2008 04:45  

@Mau

Does this particular problem happen with other flash tutorials as well?

Mau 19 October 2008 07:34  

I don't know. I am really new to flash. I wanted to create a presentation this weekend, but I have been stuck with this issue for hours.
I don't think there's anything wrong with your tutorial either, I guess the problem is between the chair and the computer, I mean most probably the problem is myself.
Anyway thanks for your help. Have you had this problem before?

iliketo 20 October 2008 09:02  

@Mau

I've never had this problem before.

corliss 24 January 2009 21:12  

Ok, I'm new a this, I did get the first line of text to fade, but I wanted to add a second line. I created a new layer, started the frame at 41, followed the fade instructions for the second line. When I perform a play back only the first line fades in and out. What am I doing wrong?

iliketo 25 January 2009 02:55  

@Corliss

You need to create a empty key frame at frame 41. Then try the fade text.

Nick 14 February 2009 18:56  

I'm having a similar problem...Everything is set up correctly I believe, but when i export the clip it doesn't show the text fading. Within the editor itself it does show it fade.

iliketo 15 February 2009 05:01  

@Nick
When you export the movie make sure you set the file type as Swf. If this doesn’t work try to publish the movie.

Mary 3 March 2009 09:09  

Happened to me too. When you are creating the text symbol make sure the text type is NOT dynamic, but rather static. It works fine now.

  COPYRIGHT © 2014 · ILIKE2FLASH · Theme by Ourblogtemplates

Back to TOP