Tweening Text on Paths

Obviously you can use motion tweens to move text around the Stage. You can also use tweening on paths and scaling to create the illusion of text moving in three-dimensional space.

When you are simulating three-dimensional space in Flash, you need to remember two rules:

• Objects that are closer to you appear larger than objects that are farther away.

• Objects that are closer to you appear to move faster than objects that are farther away.

To see how you can use these types of effects, take a look at a couple files. First, look at an example of how you can use tweening on a curved path with scaling and brightness changes.

Open tweening.fla from the Chapter_07/Assets folder on the CD, and then test the file to see what it does.

The main part of the animation is the tween of the letters of the word one. Each letter is converted to a movie clip. Why? Because you can tween a text block, but you can't apply an effect to it. To use the Brightness effect, the letters must be embedded in symbols.

In the first frame, each letter is scaled and a Brightness of 100% is applied. The scaling is proportioned so that the e always appears to be closer and the o appears farthest away until they reach their final positions . The tweens are staggered so that the e moves the fastest and the o moves the slowest. (See Figure 7.5.) That's an important concept to remember, and you'll see it again in later chapters: Objects that are closer to you appear to be moving faster than objects that are farther away.

Figure 7.5. By staggering the motion tweens, you can make the letters move at different speeds. In this case, the foreground letters move faster than the background letters.

Just to add a little more interest, as soon as the o is in place, another tween is started. This time, each letter is scaled to 150% and Brightness is set back to 100%, in effect making the letters expand, fade out, and disappear.

At the same time as the final tween is taking place, the letters for "one nation" are spelled out on the Stage. See how these remain in place for a number of frames and then appear to blink in and out, again using changes in brightness rather than alpha transparency.

Exercise 7.3 Creating a 3-D Text Effect

In this exercise, you will use alpha transparency, scaling, and tweening on an elliptical path to mimic 3-D motion.

1. Create a new movie and rename Layer 1 to Freedom 1.

2. Select the Text tool and open the Character panel (Window > Panels > Character). Make the following changes to the Character panel:

   Font: Arial or Helvetica (or your choice)

   Color: Pick one

   Size: 9

3. Type the word FREEDOM in all caps on the Stage.

4. Embed the text field in a movie clip (F8), and name the movie clip Freedom Text. You'll need to set up a motion path on a Guide layer to control the movement of your text movie clips.

5. Add a Guide layer above the current layer (click the Guide layer icon next to the Layer icon).

6. With the Guide layer selected, use the Oval tool to draw an unfilled ellipse on the Stage.

   Tip

   When you are using an ellipse, circle, or any closed outline as a motion guide, you can set up your tweens in two ways. You can remove a small segment of the outline to create discrete stopping and starting points, or you can space the contents of your keyframes in such a way that the distance to the next keyframe is always shorter than the distance to the previous keyframe.

   Flash is very economical: It will always take the shortest route to the next point on a closed path. This means that you might get objects moving in predictable but undesired directions. For this exercise, you'll practice removing a line segment.

7. For now, you need to remove a small segment of the ellipse so that Flash knows where the starting and stopping points on the tween are. Use the Magnifier tool, and zoom in on the right side of the ellipse. Use the Eraser tool to remove a small segment of the line. (See Figure 7.6.)

   Figure 7.6. Create an elliptical shape for your motion guide. To use this as a motion guide, you'll need to make a break in the line otherwise , Flash will always choose the shortest path.

   

8. Click on the crosshairs of the Freedom Text movie clip, and drag it to the ellipse. Snap it to one of the ends of line where you cut the ellipse.

9. Insert keyframes in frames 10, 20, 30, and 40.

10. Reposition the movie clip in the new frames:

    Frame 10: Top of the ellipse

    Frame 20: Left side of the ellipse

    Frame 30: Bottom of the ellipse

    Frame 40: Endpoint of the ellipse

11. Test your tween to make sure that you have everything snapped into place.

    Next you'll make changes to the scaling and transparency to make it feel more 3-D.

12. Use the Effect (Window > Panels > Effect) and Transform (Window > Panels > Transform) panels to make the following changes. (See Figure 7.7.) Notice that you increase the Scale and the Alpha settings for the text that is "closer" to you:

    Frame 1: Alpha 50%

    Frame 10: Alpha 75%/Scale 300%

    Frame 20: Alpha 100%/Scale 600%

    Frame 30: Alpha 75%/Scale 300%

    Frame 40: Alpha 50%

    Figure 7.7. If you turn on Onion-Skinning, you can see the five different instances of the Freedom Text movie clip with the scaling applied.

    

13. Test your file again. By changing the scale and transparency, you get a more 3-Dlike effect.

In the next section, you'll take a look at how you can use text as a mask to create interesting effects.