Editing and Animating Text

April 17, 2007

Assumed knowledge: Basic know how and usage of the Flash MX interface. Good use of basic tweening and symbol properties. Should know how to make a symbol.

Ever wanted to change the way that your text looks in Flash MX? Then make it animate and do cool effects? This tutorial goes through most of the common ways.

Editing Text

This is relatively simple and can be achieved through just playing around with the Text properties.

Firstly select the Text Tool

Then type any text that you want into the text field that you create. Try to keep the text field at the right length to avoid creating a new line. I chose to work with Raven.

Look down at the properties bar and make sure that the font is static text.

Okay now we have our text lets have a little play around with it. In the Text properties play around and choose a font that you like I chose Arial Rounded MT Bold. Chose the type of script, it is probably better to leave it as normal. Chose the A/V tool and space out the text.

My text now looks like that:

You can have a play around with the bold, italics and its aligning too if you want to but that doesn?’t provide much to do if you want to change the way your text looks. To change the text we would break it apart and craft it the way we want it to be.
Select your text and press Ctrl +b, which breaks the text into letters, you can move the letters around and make the text look strange if you want to.

But if you want to edit your text even more select all of the letters and press Cntrl + b again. Now they are all shapes that you can freely edit. So have a play around and change how your text looks. Use the arrow tool and change the edges of the text. Heres what I made:

You can use the text and edit it in anyways that you can with a normal object. I used the color mixer and added a radial effect to my text, so it looks like this.

The sides are white and had no alpha effects for those who are experienced. But if you use a different colored background then choose the matching color or set the white to 0 alpha. Setting it to 0 alpha and the background colour give off basically the same look. That is probably most of the text effects that you can do in Flash MX. Its all really up to you depending on what you want your text to look like.

Alpha Tweening

So you can make text look pretty cool in Flash MX, well how about animating the text? Making it do cool tricks. This can all be achieved using Flash MX?’s symbol properties and basic tweening.

Firstly type in some text and right click on the text and convert the text into a movieclip.

Okay now we have our movie clip. Right click 20 frames into the timeline and make a key frame.

Now in frame 20 select the movieclip and go to it?’s properties. On the color drop down menu select alpha and set the alpha to 0.

Right click in the timeline. Anywhere except for the 1st and 20th frames and create a motion tween. Press Ctrl+ Enter to export the movie or select Test movie from the Control tab.

Wow look we have a cool alpha tweening effect! You can make a new key frame at frame 40 and tween the Text back to normal alpha if you want to so that the movie looks complete. This is only one of many animation effects that you can do with text. Of course you could do the same thing but use colors by tinting the movie clip. But this tutorial has taught you the basic system for changing what text look likes through animation. Not only can you use text but you can use anything as long as you follow that system.

Tweening letters

So far we have learnt how to break apart text and how to animate text. This part of the tutorial combines some of the best bits of the rest of the tutorial to create something neat.

Start off and create some text and break it apart into shapes. Select each letter and convert them into movieclips. Create a few new layers and cut and paste each letter onto a separate layer. When you paste your movieclip right click and select paste in place.

Now we have all of our letters on separate letters. On each of the layers create a keyframe at the end at frame 30.

On frame 30 select each separate letter and move them offstage, do this for all of the letters. Then make every layer have a motion tween and test your movie. See how all of the letters separate. That?’s the effect! For more information on tweening keep on reading.

Easing

When you tween an object in Flash MX you can make it move faster or slower depending on what you set the ease to. Create a tween be it a motion tween or a shape tween and select the ease in the tween properties.

Change the ease to what you want it to be. The best way to discover tweening is to tween objects yourself and test. It?’s a nice effect when used well.

Now you know how to create cool looking text and are able to apply cool animations to them.

If you would like the Fla. Version of all of what is set in this tutorial then click below to download it. Each section is put into a scene, to play just a scene press Cntrl + Alt + Enter or click test Scene under Control. Raven?’s showpiece is a little movie that shows some effects that can be done with what has been done in the tutorial.

Downloadable Source Files

If you enjoyed this post, then make sure you subscribe to my RSS Feed