Shape Tweening Text

project: Shape Tweening Text

description: In this tutorial you will learn how to shape tween text. To make the reading more interesting, you'll learn a few extra skills as well.

Files: The motion_tween_text.fla file is in the fla_files folder.

step 1: Open motion_tween_text.fla and click on the first keyframe. Notice the light blue line around the text. (Figure A) This is about to cause a problem. (But no worries as we'll be able to fix it.)

step 2: With the first keyframe still selected, set the Tween to Shape in the Properties Panel. (Figure B)

step 3: The dashed line indicates a broken tween. (Figure C)

step 4: The problem is that shape tweening only works on objects and we were trying to tween text. To remedy the situation Modify > Break Apart (Command-B) (Figure D)

step 5: Now we see the familiar selection mesh that indicates the shape is an object. (Figure E)

•Note: Because the shape is now an object rather than text it can no longer be edited with the text tool.

step 6: Click on the second keyframe. (Figure F)

step 7: Modify > Break Apart (Command-B) (Figure G)

step 8: Click in the timeline to wake-up the slumbering broken tween so it knows it's been fixed. (Figure H)

step 9: Save (Command-S) and Test Movie (Shift-Return) to see our odd animation. (Figure I)

•Note: The rest of this tutorial deals with placing Shape Hints and refining the animation. If you'd rather jump to Motion Tweening instead, feel free but remember the lessons you've skipped just in case.

step 10: Position the playhead over frame 1, Shift-Command-H four times, and reposition the shape hints as shown. (Figure J)

•Tip: Remember that the first hint (a) goes in the upper left corner and you work the others counterclockwise around the shape in alphabetical order.

step 11: This step is a bit tricky so watch the movie (Figure K) before trying to decipher my instructions. Click on the first keyframe. Pause. Click and drag the keyframe to frame 10 (This moves the hints too). Option-Drag the keyframe back to frame 1 (this copies the keyframe but not the hints, remember?). Now the T shape sits on the stage for 10 frames before beginning its tween. Now click on the last keyframe. Pause. Click and Drag to move it to frame 30 (so the tween takes 20 frames).

•Note: The 10 frames per letter/20 frames per tween pattern will repeat for each letter.

step 12: Select then Option-Drag the keyframe on frame 30 to frame 40 This enables the "I" to remain on the stage for 10 frames. Insert > Blank Keyframe (F7) in frame 60 and type an L. Select it then Modify > Break Apart (Command-B).

Now, watch the movie (Figure L) and I'll explain. Since the vertical stroke of the L does not sit directly over the I we need to nudge it (with the right arrow key) but how far? The trick is to turn on onion skinning, select the L, then nudge until it's positioned correctly.

step 13: Select frame 40 and apply a Shape Tween via the Properties Panel then Modify > Shape > Add Shape Hint (Shift-Command-H) as before. (Figure M)

step 14: Repeat the process for the T and add your own flourish at the end. (Figure N)

•Note: The fade is an Alpha (transparency) setting. Look for Alpha in the Properties Panel. More on that here.

step 15: Next up: The Fill Transform Tool.

contents