Other Animation Effects in Edge Animate - dummies

Other Animation Effects in Edge Animate

By Michael Rohde

There are different attributes and properties for using text boxes in your animation in Edge Animate CC. Sometimes you may want to use text to convey a message. In Edge Animate, you can format and animate text so that it flows within your composition.

Although limited in capacity, the text box editor in Edge Animate is still rather feature-rich. While you can format each text box to show text with properties such as italics and bold, you can’t make only some of the words appear italic and bold. It’s an all-or-nothing proposition on that front. You can, however, tweak your animation in various ways to look the way you want. Here are some typical examples:

  • By placing some text boxes creatively, you can arrange elements on the Stage so it appears that one word in a paragraph is italic while other words are not.

  • While working in the text box editor, you can press Enter to start a new line of text. You can even format paragraphs to have an indent.

  • You can change the look of your text by applying additional formatting properties such as alignment, paragraph spacing, vertical alignment, word spacing, and text shadows — and animate all these properties.

Text properties that don’t show a keyframe diamond (and so can’t be directly animated) include

  • Weight

  • Italics and underlining

  • Alignment

Even though Edge Animate doesn’t have keyframes for these properties, you can still create animation sequences that mimic that behavior.

Follow these steps to create a workaround for animating properties that don’t have keyframes assigned to them — in this case, animating a change in the weight of text:

  1. Create a text box on the Stage and type in some text. Then close the text box editor.

  2. Set the font weight to 100 (Thin).

  3. Toggle the Pin and slide the Playhead down the Timeline away from the Pin.

  4. Change the opacity from 100% to 0%.

    You just created an animated sequence in which your text disappears.

  5. Copy and paste the text element.

    By doing so, you’re placing an identical text box on top of the existing text box.

  6. For the new text box, set the Opacity to 0% and the font weight to 900 (Black).

  7. Slide both the Pin and the Playhead together (place the cursor over the orange bar with chevrons, then click and drag) down the Timeline so that the Pin is at the end of the first animation sequence and the Playhead is farther down the Timeline.

  8. Adjust the Opacity back to 100% to create an animation sequence in which the bold text gradually appears.

You can view this animation from the Stage or preview in a browser. You should see the thin-weighted font fade out and then see the text fade back in with a heavier weight.

If you want more of an abrupt change from Thin to Bold, here’s how to do that:

  1. Create a text box, type in some text, and then close the text editor.

  2. From the Properties panel, change the Visibility from Always On to On.

  3. Change the font weight to Thin.

  4. Copy and paste the text box.

  5. In the Elements panel (top-right of the interface), rename the first text box to Thin and the second text box to Bold so you can remember which is which.

  6. Select the Bold text box and set the Visibility to Off.

  7. Drag the Playhead and the Pin (don’t toggle the Pin) together down the Timeline to the point at which you want the font weight to change.

  8. 8. From the Elements panel, choose the Thin text box and set the Visibility to Off.

  9. From the Elements panel, select the Bold text box, set Visibility to On, and set the weight to 900 (Black).

Because you never toggled the Pin, you didn’t create any keyframe animation sequences. However, you did create keyframe diamonds in the Timeline (as shown in this figure).

Keyframe animations without an animation sequence.
Keyframe animations without an animation sequence.

When you preview this animation, you should see the thin text appear and then abruptly change to bold.

You can use these same two procedures to mimic animations for italics, underlining, and alignment. The accompanying sidebar describes an experiment of mine.