(For more resources related to this topic, see here.)

Animation within Edge Animate

There are many applications that enable the user to compose animated sequences. Users of Adobe Edge Animate may have experience in other programs such as Director, Flash Professional, After Effects, or even Photoshop. All of these applications handle animation in slightly different ways, but they do all share some aspects of animation techniques and tooling as well.

Like many digital animation programs, Edge Animate employs the concept of “tweening” between keyframes. In traditional cell-based animation, a master animator would draw out certain key frames for an animation sequence, and the frames in between these key frames would be created by apprentice or lower-ranked members of the animation team. The goal was always to create a smooth transition between each key frame created by the master animator, which would result in a completed animation sequence.

This process is performed programmatically within Edge Animate. As keyframes are placed along the Timeline, Edge Animate will record changes in property values as transitions at the position of the Playhead (moment in time). We have the additional ability to provide the tweening engine with instruction sets based upon a variety of easing equations. This allows a more natural flow between keyframes, and can also be used to achieved certain effects such as an elastic or bounce motion.

The Edge Animate Timeline

The Timeline is where all of the motion in an Edge Animate composition is orchestrated. The Timeline itself shares concepts and constructs from other Adobe applications, most notably Flash Professional and After Effects.

Unlike the frame-based timeline in Flash Professional, the Edge Animate Timeline is purely time-based.

Playback controls

The playback controls in Edge Animate are all grouped together in the upper-left corner or the Timeline panel. These controls allow quick access to many of the playback options available through the Timeline.

Time

The time in Edge Animate is measured in standard decimal time code format (mm:ss.ddd), and this is how it is displayed in the Time control. As the Playhead moves along the Timeline, the information in this display is updated accordingly. A user can scrub the control to the left or right to adjust the current time, or simply click on it—making it editable.

Note that the time controls in Edge Animate are actually grouped along with the Stage and are accessible from directly beneath that panel. The controls are also broken up to allow separate modification of the Playhead time (yellow), and Pin time (blue), when enabled.

Timeline options

These options can be toggled on or off depending upon current needs, as they perform a variety of Timeline-related functions.

These options include the following:

• Auto-Keyframe Mode (K): Selecting this option will enable Edge Animate to generate keyframes for various properties automatically as they are adjusted along the Timeline. When not selected, any keyframes must be inserted manually.
• Auto-Transition Mode (X): When enabled, this informs Edge Animate to use immediate transitions between element property adjustments as they are animated across time.
• Toggle Pin (P): Toggles the Pin on and off.

There are also a number of options present on the bottom of the Timeline:

• Only Show Animated Elements: When this option is selected, only those elements whose properties are animated will display within the Timeline. Static elements (such as a background image, perhaps) will be hidden.
• Timeline Snapping: WToggles Timeline snapping on or off.
• Show Grid: Toggles Timeline grid on or off and allows us to set the grid spacing units

More about the Show Grid control

We are also able to set the grid spacing by clicking on the small arrow to the immediate right of this icon in order to access a small list of options. We can choose to display grid lines over a selection of measurements across the Timeline.

Timeline controls

There are basically only four controls within the Timeline that we need to be concerned with: the Playhead, the Pin, Zoom, and a set of Grid controls. The functionality between controls varies greatly here, as some are used for playback, some for animation, and others are simply there for the enhancement of our overall workflow. All, however, are very useful.

The Playhead

The Playhead is the larger of the two elements on the Timeline and is represented by a solid red line that indicates the current time. We can click on the Playhead and scrub back and forth to change the current time. When an animation is being played back through Edge Animate, the Playhead will move along with the current time.

Normally, the Playhead and the Pin are both synced. If not, they can be resynced through the application menu: Timeline | Toggle Pin.

The Pin

The Pin is a unique control to Edge Animate. It is a way of pinning the current state of element properties to a certain time, while using the Playhead to determine at which time the animation should complete. The Pin can be positioned either before or after the time indicated by the Playhead—but it always indicates a starting point for the animation, with the Playhead indicating the end. Changing any element properties while the Pin is unsynced will create animation of those properties beginning at the Pin and ending at the Playhead position. In this way, we can quickly and freely create animation that is tightly controlled across the Timeline.

To quickly sync or unsync the Pin from the Playhead, we can double-click on the Playhead to toggle between each state. We can also use the keyboard shortcut (P) to accomplish this same task—or even use the control in the Timeline which performs this action..

When the Pin has been activated, the direction of animation is indicated through a colored strip of chevrons on the Timeline. The color will be yellow or blue, depending upon the direction of motion; blue indicates motion to the left of the Pin, while yellow indicates motion to the right of the Pin.

Zoom controls

There are two zoom controls in Edge Animate, which allow us to expand and contract the Timeline. One is the Zoom Timeline to Fit button that appears as dual arrows in the lower-right corner of the Timeline. This will expand or contract the entire span of the visible Timeline to the current width of the Timeline panel. It can provide a good overview of the entire animation. The second control is a slider which appears directly to the right and allows the user to manually control the zoom level of the Timeline to accommodate whatever we are specifically trying to accomplish at any particular time.

Keyframes

Similar to their representation in After Effects, keyframes in Edge Animate appear along the Timeline as small diamonds. Unlike keyframes in Flash Professional, Edge Animate keyframes are tied directly to the property that is being changed and not to the element itself. This allows for fine-grained property adjustments across the Timeline for any particular element. It is very flexible and a powerful way to animate selected element properties!

Keyframe navigation

There are a number of keyboard shortcuts in Edge Animate that assist with Timeline navigation—specifically when jumping across keyframes.

Command	Shortcut
Go to Previous Keyframe	Ctrl + Left Arrow (Windows), Command + Left Arrow (Mac)
Go to Next Keyframe	Ctrl + Right Arrow (Windows), Command + Right Arrow (Mac)

Creating motion

Animating element properties within Edge Animate is fairly straightforward. We’re going to step through a number of basic ways to animate elements along the Edge Animate Timeline. Once using only the Playhead, and again using the Playhead in conjunction with the Pin. By performing the same animation in each way, we will get a feel for the different workflow styles Edge Animate makes available to us when animating element properties across time.

Note that most elements will not appear within the Timeline until their properties are actually modified across time. The reasoning for this is if nothing is actually animated, there is no reason to clutter the Timeline.

Inserting keyframes

There are a number of mechanisms through which we can insert keyframes into our composition: using the Properties panel, the application menu, the Timeline Keyframe buttons, or through the right-click menu. Before we move on, let’s have a quick look at each of these methods.

Adding keyframes through the Properties panel

With any element selected, we can position the Playhead upon the Timeline and look to the application menu to insert our keyframes. Simply navigate to the menu and choose Timeline | Add Keyframe and then select the type of keyframe to add, based upon the property we wish to set a keyframe for:

Adding keyframes through the application menu

With any element selected, we can position the Playhead upon the Timeline and look to the application menu to insert our keyframes. Simply navigate to the menu and choose Timeline | Add Keyframe and then select the type of keyframe to add, based upon the property we wish to set a keyframe for:

Not all properties have keyboard shortcuts assigned to them by default, though we can easily assign them for commonly used properties, if we wish. This is accomplished through the application menu: Edit | Keyboard Shortcuts….

Using the Timeline keyframe buttons

With any element selected, we can position the Playhead upon the Timeline and look to the left area of the Timeline panel to insert our keyframes. Any property which currently has a keyframe assigned to it will appear grouped beneath an element in the Timeline. These existing properties will include a small icon positioned to the right of the property name through which we can add new keyframes for that specific property. To add new keyframes to properties which do not appear beneath an element, we can simply right-click on the element name and choose Add Keyframe to insert them:

Using right-click for keyframe insertion

With any element selected, we can position the Playhead upon the Timeline and look to the Stage itself to insert our keyframes. Simply right-click on any element which exists on the Stage at that place in the Timeline, and choose Add Keyframe to insert any of the available properties for that element.

Animating with the Playhead

We will now do a simple animation of an element moving from one side of the Stage to the other, while rotating and changing color using the Playhead along with the Properties panel.

1. Create a new Edge Animate project and save it to your local disk.
2. Adjust the Stage as follows by using the Properties panel:
   • Stage W: 600 px
   • Stage H: 350 px
   • Background Color: #000000
   • Overflow: hidden
3. Using the Rectangle tool, draw out an element upon the Stage. We will modify its properties in the next step, so do not worry about dimensions or shape.
4. For each property listed, make the following adjustments within the Properties panel:
   • Location X: 20 px
   • Location Y: 230 px
   • Size W: 100 px
   • Size H: 100 px
   • Background Color: #c0c0c0
5. Still using the Properties panel, click on the keyframe diamond next to the properties for Location, Background Color, and Rotation. This will set a keyframe for each property within the Timeline.
6. Be sure that Auto-Keyframe properties is in its selected state in the Timeline. Since we have already marked each of these properties with initial keyframes, any adjustments we make across time will be auto-keyframed.
7. Our project should now appear as shown in the following screenshot. We are ready to proceed with the remainder of this exercise.

   

8. Drag the Playhead over to the ruler marker labeled 0:04 and release.
9. Now, select the element with the Selection tool and in the Properties panel, modify the following properties:
   • Location X: 480 px
   • Background Color: #900000
   • Rotation: 480 deg
10. Notice that we now have transition bars appear on the Timeline with another set of keyframes at the end of our animation sequence.

11. We can now either scrub through the Timeline by dragging the Playhead back and forth, or hit the Play button to view the full sequence.

    When played back, the element should appear to roll along the Stage from left to right, changing from gray to red as it does so. The resulting end state is displayed in the following screenshot:

    

    Note that any of the properties of an element can be keyframed, thus modified over time in the way we have done here.

Animating with the Pin

Now we will perform the preceding exercise, but this time we will employ the Pin to demonstrate an alternative way of creating motion in Edge Animate.

1. Create a new Edge Animate project and save it to your local disk.
2. Adjust the Stage as follows by using the Properties panel:
   • Stage W: 600 px
   • Stage H: 350 px
   • Background Color: #000000
   • Overflow: hidden
3. Using the Rectangle tool, draw out an element upon the Stage. We will modify its properties in the next step, so do not worry about dimensions or shape.
4. For each property listed, make the following adjustments within the Properties panel:
   • Location X: 20 px
   • Location Y: 230 px
   • Size W: 100 px
   • Size H: 100 px
   • Background Color: #c0c0c0
5. Drag the Playhead to 0:04 in the Timeline.
6. Now, go to the application menu and select Timeline | Toggle Pin. This will unsync the Pin from the Playhead. Again, the Pin is the small control directly beneath the Playhead when unsynced.
7. Grab the Pin and drag it to 0:00 in the Timeline. This will pin the element’s current properties to the 0:00 point without the need to manually insert keyframes. Keep the Playhead itself at 0:04.
8. Now, select the element with the Selection tool and in the Properties panel, modify the following properties:
   • Location X: 480 px
   • Background Color: #900000
   • Rotation: 480 deg
9. Notice that we now have transition bars appear on the Timeline without the need to set any keyframes whatsoever.

   

10. Go to the application menu and select Timeline | Toggle Pin to sync the Pin. We can also toggle the Pin through a keyboard shortcut.

11. We can now either scrub through the Timeline by dragging the Playhead back and forth, or hit the Play button to view the full sequence.

    When played back, the element should appear to roll along the Stage from left to right, changing from gray to red as it does so.

    Note that, while in this case the Pin was placed at an earlier time in relation to the Playhead within our Timeline—that need not be the case. We can also place the Pin at a later time than the Playhead and the same behavior will be exhibited: current properties are pinned to the Pin position while adjusted properties align to the position of the Playhead.