This chapter is from the book
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
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.
Click the Click to open the sample link.The keyframe_animation.html file opens, displaying a blank Stage.
Click the Next Step link to create keyframes (Step 2 of 7).
Move the Playhead to 0:01.
Select the E element on the Stage.
In the Properties panel, click the Y keyframe (diamond) to add a keyframe on the Timeline.
Move the Playhead to 0:00.
In the Properties panel, click the Y keyframe again.
Change the Y value to -90.
Click the Play button or press Space to play back the animation.The E letter jumps to its position.
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.
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.
Click the Play button or press Space to play back the animation.The E letter smoothly transitions to its position.
Click the Next Step link to specify easing for the transition (Step 4 of 7).
Click the transition in the Timeline to select it.
Click the Easing button in the Timeline, select Ease Out, select Bounce, and then press Enter (Win) or Return (Mac).
Click the Play button or press Space to play back the animation.The E letter falls and lands with a bounce to its position.
Click the Next Step link to animate the shadow element (Step 5 of 7).
Click the Auto Keyframe Mode button in the Timeline to select it.This automatically creates keyframes when a property is modified.
Click the Auto Transition Mode button in the Timeline to select it.This automatically adds a transition when a property is modified.
Select the shadow element on the Stage.
Move the Playhead to 0:01.
In the Properties panel under Transform, click the Scale X and Scale Y keyframe.
Move the Playhead to 0:00.
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).
Click the Play button or press Space to play back the animation.The shadow animates along with the E element.
Click the Next Step link to reuse keyframes (Step 6 of 7).
Select the E element on the Stage.
Click the Time Snapping button in the Timeline to deselect it.
Move the Playhead to where the E first hits bottom, around 0.364.
In the Properties panel, click the Rotation keyframe.
Move the Playhead to where the E reaches the top of the bounce, around 0.544.
In the Properties panel, set the Rotate value to -10.
Move the Playhead to where the E hits bottom again, around 0.729.
Select the first rotation keyframe, making sure that only the one keyframe is selected.
Press Ctrl+C (Win) or 
+C (Mac) to copy the keyframe, and then press Ctrl+V (Win) or +V (Mac) to paste it.
Click the Next Step link to reuse transitions (Step 7 of 7).
Click the Time Snapping button in the Timeline to select it.
In the Elements panel, click the gray dot under Visibility for G, D, and E2 to display them on the Stage.
In the Timeline, select the bar on top of the transitions for the E animation to select all transitions.
Press Ctrl+C (Win) or +C (Mac) to copy it.
Select the G element on the Stage, move the Playhead to 0:01, and then press press Ctrl+V (Win) or +V (Mac) to paste it.
Select the D element on the Stage, and then press press Ctrl+V (Win) or +V (Mac) to paste it.
Select the E2 element on the Stage, and then press press Ctrl+V (Win) or +V (Mac) to paste it.
Click the Play button or press Space to play back the animation.Each letter bounces in, one after the other..
The lesson is complete.
Click the File menu, click Save As, navigate to a folder, create a folder, enter a name for the composition, and then click Save.
To open a finished version of the lesson, click the Click to open the finished sample link.
)
)
)
)
)
)
)
)