Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > Adobe Flash

  • Print
  • + Share This
This chapter is from the book

Animating titles

Frequently, splash screens on Flash Web sites feature animated titles and other text-related materials that twirl, tumble, and spin until they all come into place as a complete design. Several techniques can help you accomplish these kinds of effects quickly and easily. The Break Apart command, when applied to a block of static text, breaks the text into its component characters while keeping them as live, editable text. This command lets you painlessly create separate text fields for the letters that make up a word or title. Using the new Distribute to Layers command then allows you to isolate each of those characters on its own layer, ready for motion tweening.

When you do start applying motion tweens to your individual letters or words, it's very useful to think and work backward from the final design. Create an end keyframe containing the final positions of all your characters, for example. Then, in the first keyframes, you can change their positions and apply as many transformations as you like, knowing that the final resting spots are secured.

To animate the letters of a title:

  1. Select the Text tool, and make sure that Static Text is selected in the Property Inspector.

  2. On the Stage, type a title you want to animate.

  3. Choose Modify > Break Apart (Cmd-B for Mac, Ctrl-B for Windows).

    Flash replaces the static-text title with individual static-text letters (Figure 1.30).

    Figure 1.30Figure 1.30 Breaking apart a block of static text (top) results in static text of the individual letters (bottom).

  4. Choose Modify > Distribute to Layers (Cmd-Shift-D for Mac, Ctrl-Shift-D for Windows).

    Each selected item on the Stage is placed in its own layer below the existing one. In this case, the names of the newly created layers are named with the individual letters automatically (Figure 1.31).

    Figure 1.31Figure 1.31 Distribute to Layers separates the selected items in their own layers.

  5. Create a keyframe at a later point in the Timeline.

  6. In the first keyframe, rearrange and transform the letters according to your creative urges.

  7. Select all the frames in the Timeline, and apply a motion tween.

Flash automatically converts the static text elements to graphic symbols and stores them in the Library. Your movie animates all these text elements coming together as a complete title (Figure 1.32).

Figure 1.32Figure 1.32 These letters tumble and fall into place at the last keyframe.


Make sure that you select all the frames in step 7. If do not include the last keyframe, Flash will leave those text elements as static text while converting the elements in the first keyframe to graphic symbols. In that case, you'll end up with motion tweens with different elements in the first and last keyframes, which could foul up future tweening in those layers.

  • + Share This
  • 🔖 Save To Your Account