Animate Text in Edge Animate CC - dummies

Animate Text in Edge Animate CC

By Michael Rohde

Now, before you get carried away with the idea of animating your text in Adobe Edge Animate CC, keep in mind that you can animate some text properties but not others. To give you a sense of which is which, this section lists the attributes you can animate — and those you can’t.

The animation sequences you create can use any property that has a keyframe diamond next to it. If you don’t see the diamond, then you can’t create a keyframe with that property.

Built-in animation properties

Text properties that you can animate include

  • Size

  • Color

  • All the spacing (Advanced Text Formatting) properties, including

    • Letter spacing

    • Word spacing

    • Line height

    • Text indent

The following procedure provides an example of animating text so that it changes size, color, and spacing:

  1. Use the Text tool to draw a text box on the Stage and type in some text.

    Note that if you press Enter, you start a new line. To close the text box editor, click the X or click the Stage.

  2. Format the text by changing the color, size, and letter spacing as shown in the figure. Simply select the text box, and leave the text box editor closed, to format the text.

    You have to double-click the text box to open the editor, so use only a single click to select the text box.

    Editing the text properties.
    Editing the text properties.
  3. Toggle the Pin and move the Playhead down the Timeline away from the Pin.

  4. Reset the properties that you changed in Step 2 back to their defaults.

    As you change each setting, the properties appear in the Timeline (as shown in this figure).

    Properties appearing in the Timeline.
    Properties appearing in the Timeline.

You can preview the animation on the Stage or in the browser.

The keyboard shortcut for previewing in the browser is Ctrl+Enter.