Fire Text Animation

Many powerful animation softwares have come out during the last 10 years or so. They allow you to create breath-taking animations (for example, of texts and logos) using some powerful, yet easy-to-use, built-in functions, filters and God only knows what.

Well, I would lie if I said that Flash is capable of producing anything as impressive. Sure, if you spend enough time fine-tuning your animation, it would look really great. But then, what's the use? Flash is for one thing, other programmes are for another.

In this tutorial, I'm going to show you how to create a decent animation using suprisingly easy methods. It is advisible, though, that you have a basic understanding of  Motion Tweens and Masks before you start this tutorial.

At first when I planned to write this tutorial, I wanted to simply put some animation of fire inside a Mask. But, since I couldn't find a single fire animation that I thought was good enough, I did it another way. 

I googled a decent picture of a flame, and animated it using only the Free Transform Tool. Well, frankly, I was amazed to see that the masked tweened picture looked much like a real fire animation! :-)

So, let us begin

i. We first need to get an image of fire. This is the image I have found. You can Copy and Paste it into your Flash project.

ii. We need to create a mask. The mask is in fact a shape. In our case, we want it to be text-shaped. 

So, grab your Text Tool (T) and write something on a new layer (click on the icon to create a new layer).

You should now have 2 layers: one with a Mask, the other with a picture on it.

iii. Once we've got the mask and picture,  right-click on the layer you have got the text-shaped mask on and go to Mask. This, of course, will create the mask.

Animating

And now it's time to animate! 

As promised, we will confine ourselves to only using the Free Transform Tool (Q) to animate the picture.

i. Set the fps to 30—this should be the right frame-rate for this project, I think.

At this point, it's up to you how you will animate the image of fire. That's why below you can find the description of how I did it.

ii. Place the picture below the Mask. Do it so that they are not overlapping. Then, select the image and, using the Free Transform Tool, stretch it a lot, like shown in the below picture.

Note: the red "fire" text is our Mask.

iii.  Select the 15th frame and press F6 to create a keyframe there. Once you got it, select the picture, press Q to activate the Free Transform Tool and make it 2 times wider.

iv. The next step is creating yet another Keyframe, this time on the 25-th frame. So select the frame and press F6 to create a Keyframe there. On this keyframe the picture will get much bigger. 

To do that, we can either use:

a) The Free Transform Tool 

b) The Scale and Rotate window you will activate by going to Modify>Transform>Scale and Rotate.

v.  Select the image and go to Modify>Transform>Flip Vertical.

What this function does is, of course, flip things vertically.  We do that because we want the picture to go up now so that the effect is complete.

vi. We're going to create a Motion Tween so that the fire picture goes up. Just create a Keyframe on, say, the 45-th frame, move the "fire" image all the way up so that it's above the mask. 

You can now create a Motion Tween between the two keyframes.

This is how the Timeline should look when you're done with animating:



And this is how the animation of the Motion Tweened imagine will look if you followed my instructions:

Note: The way I animated the image is not the only possible way of creating this effect. It's possible that the transformation that you applied to your image yield an even better result. I hope they do!

Hope this this information was helpful. Below you can download the source file of our finished animation.

Thanks for reading and have a nice day!