How to Create Sequences in Edge Animate

By Michael Rohde

It’s important to get a handle on working with keyframes and animation sequences in Adobe Edge Animate so you can create them and edit them to do what you want. Go over all the parts of Edge Animate that you need for creating keyframes and animation sequences. Here’s where you actually create those keyframes and animation sequences — which boils down to getting familiar with these processes:

  1. Place an element on the Stage with the drawing tools or by importing an image.

  2. Toggle the Pin so that it turns light blue.

  3. Click and drag either the Pin or the Playhead down the Timeline.

    The amount of space that separates the Pin from the Playhead determines the length of time the animation takes to play out.

  4. Click and drag the element around the Stage, for example, move the element from the top-left corner down to the bottom-right corner.

    Edge Animate adds color-coded bars to the Timeline.

To preview your animation, click Play or press the spacebar.

Animating forward

Where you place the Pin and the Playhead on the Timeline affects your animation sequence. For example, you may be scratching your head and wondering why, when you play your animation, the element goes from the bottom-right corner up to the top-left corner instead of the other way around.

To animate forward — that is, to have the animation sequence play in the same direction in which you moved the elements on the Stage — you must move the Playhead farther down the Timeline than the Pin so that you see a yellow bar-with-arrows (as shown).

Animating forward by moving the Playhead down the timeline.

Animating forward by moving the Playhead down the timeline.

Animating backward

If you want your animation to appear in a backward sequence relative to the direction in which you move the element on the Stage, then move the Pin farther down the Timeline than the Playhead: You see a blue bar-with-arrows, as shown.

Animating backward by moving the Pin down the Timeline.

Animating backward by moving the Pin down the Timeline.

Adobe Edge Animate CC is full of keyboard shortcuts. One of them is Shift+P, which reverses the direction of your timespan from blue to orange (or vice versa). This comes in useful when you realize you want to play an animation sequence in the opposite direction.