Home > Articles > Home & Office Computing

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

This chapter is from the book

Taking the Animate with Keyframes Lesson

With the Animate I: Keyframes lesson, you can create an animation by setting keyframes at specific times on the Timeline and changing property values between them. The property changes from one keyframe to another over time on the Timeline creates animation. As an indicator, when a keyframe is hollow, it means that it has different value than the previous keyframe. Using keyframes is a little more time consuming, however, you have more control over the results. To help make it easier, you can use Auto Keyframe Mode, which automatically creates keyframes when a property is modified, and Auto Transition Mode, which automatically creates a transition as needed.

Take the Animate with Keyframes Lesson

  • 01yellow_circle.jpg From the Welcome screen under Getting Started or the Lessons panel, click the Animate I: Keyframes lesson tile to start it.

    The Welcome screen closes, Edge Animate creates a new Untitled project, and the Lessons panel displays the start of the lesson.

  • 02yellow_circle.jpg Click the Click to open the sample link.

    The keyframe_animation.html file opens, displaying a blank Stage.

  • 03yellow_circle.jpg Click the Next Step link to create keyframes (Step 2 of 7).
  • 04yellow_circle.jpg Move the Playhead to 0:01.
  • 05yellow_circle.jpg Select the E element on the Stage.
  • 06yellow_circle.jpg In the Properties panel, click the Y keyframe (diamond) to add a keyframe on the Timeline.
  • 07yellow_circle.jpg Move the Playhead to 0:00.
  • 08yellow_circle.jpg In the Properties panel, click the Y keyframe again.
  • 09yellow_circle.jpg Change the Y value to -90.
  • 10yellow_circle.jpg Click the Play button or press Space to play back the animation.

    The E letter jumps to its position.

  • 11yellow_circle.jpg Click the Next Step link to add a transition (Step 3 of 7).

    When two keyframes have different values, you can add a transition between the two values.

  • 12yellow_circle.jpg Right-click (Win) or Control-click (Mac) either of the keyframes, and then click Create Transition.

    A transition appears connecting the keyframes in the Timeline.

  • 13yellow_circle.jpg Click the Play button or press Space to play back the animation.

    The E letter smoothly transitions to its position.

  • 14yellow_circle.jpg Click the Next Step link to specify easing for the transition (Step 4 of 7).
  • 15yellow_circle.jpg Click the transition in the Timeline to select it.

  • 16yellow_circle.jpg Click the Easing button in the Timeline, select Ease Out, select Bounce, and then press Enter (Win) or Return (Mac).
  • 17yellow_circle.jpg Click the Play button or press Space to play back the animation.

    The E letter falls and lands with a bounce to its position.

  • 18yellow_circle.jpg Click the Next Step link to animate the shadow element (Step 5 of 7).
  • 19yellow_circle.jpg Click the Auto Keyframe Mode button in the Timeline to select it.

    This automatically creates keyframes when a property is modified.

  • 20yellow_circle.jpg Click the Auto Transition Mode button in the Timeline to select it.

    This automatically adds a transition when a property is modified.

  • 21yellow_circle.jpg Select the shadow element on the Stage.
  • 22yellow_circle.jpg Move the Playhead to 0:01.
  • 23yellow_circle.jpg In the Properties panel under Transform, click the Scale X and Scale Y keyframe.
  • 24yellow_circle.jpg Move the Playhead to 0:00.
  • 25yellow_circle.jpg In the Properties panel under Transform, set the Scale X value to 0. Since the X and Y are linked, both values change.

    This creates an automatic animation and transition using the current one (Bounce).

  • 26yellow_circle.jpg Click the Play button or press Space to play back the animation.

    The shadow animates along with the E element.

  • 27yellow_circle.jpg Click the Next Step link to reuse keyframes (Step 6 of 7).
  • 28yellow_circle.jpg Select the E element on the Stage.
  • 29yellow_circle.jpg Click the Time Snapping button in the Timeline to deselect it.
  • 30yellow_circle.jpg Move the Playhead to where the E first hits bottom, around 0.364.
  • 31yellow_circle.jpg In the Properties panel, click the Rotation keyframe.
  • 32yellow_circle.jpg Move the Playhead to where the E reaches the top of the bounce, around 0.544.
  • 33yellow_circle.jpg In the Properties panel, set the Rotate value to -10.
  • 34yellow_circle.jpg Move the Playhead to where the E hits bottom again, around 0.729.
  • 35yellow_circle.jpg Select the first rotation keyframe, making sure that only the one keyframe is selected.

  • 36yellow_circle.jpg Press Ctrl+C (Win) or apple.jpg+C (Mac) to copy the keyframe, and then press Ctrl+V (Win) or apple.jpg+V (Mac) to paste it.
  • 37yellow_circle.jpg Click the Next Step link to reuse transitions (Step 7 of 7).
  • 38yellow_circle.jpg Click the Time Snapping button in the Timeline to select it.
  • 39yellow_circle.jpg In the Elements panel, click the gray dot under Visibility for G, D, and E2 to display them on the Stage.
  • 40yellow_circle.jpg In the Timeline, select the bar on top of the transitions for the E animation to select all transitions.
  • 41yellow_circle.jpg Press Ctrl+C (Win) or apple.jpg+C (Mac) to copy it.
  • 42yellow_circle.jpg Select the G element on the Stage, move the Playhead to 0:01, and then press press Ctrl+V (Win) or apple.jpg+V (Mac) to paste it.

  • 43yellow_circle.jpg Select the D element on the Stage, and then press press Ctrl+V (Win) or apple.jpg+V (Mac) to paste it.
  • 44yellow_circle.jpg Select the E2 element on the Stage, and then press press Ctrl+V (Win) or apple.jpg+V (Mac) to paste it.
  • 45yellow_circle.jpg Click the Play button or press Space to play back the animation.

    Each letter bounces in, one after the other..

    The lesson is complete.

  • 46yellow_circle.jpg Click the File menu, click Save As, navigate to a folder, create a folder, enter a name for the composition, and then click Save.

  • 47yellow_circle.jpg To open a finished version of the lesson, click the Click to open the finished sample link.
  • + Share This
  • 🔖 Save To Your Account