This chapter is from the book
This chapter is from the book
This chapter is from the book
Taking the Animate with the Pin Lesson
With the Animate II: The Pin lesson, you can quickly create an animation by using the Pin to help you create keyframes. You’ll learn how to work with the Playhead and the Pin to create an animation region. You’ll use the completed file from the Create lesson (Hello World) and then add an entrance and exit animation to it.
Take the Animate with the Pin Lesson
From the Welcome screen under Getting Started or the Lessons panel, click the Animate II: The Pin 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 animation_start.html file opens, displaying Hello World.
Click the Next Step link to add easing (Step 2 of 5).
Click the Easing button in the Timeline, select Ease Out, select Quad, and then press Enter (Win) or Return (Mac).
Click the Next Step link to add an entrance animation (Step 3 of 5).
Move the Playhead to 0:00.250 (0.25 seconds).
Double-click the Playhead to display a blue pin on top.
Drag the Pin (blue) to 0:00.750 (0.75 seconds). This displays a blue region for the animation.
In the Elements panel, select the RoundRec <div> element.
Shift-drag the shape element off the Stage to the left.
In the Properties pane, set the Rotate value to 720, and then click the Stage.
Click the Next Step link to add an entrance animation (Step 4 of 5).
Drag the left Rotate keyframe right to 0:00.500 (0.5 seconds).
Press Enter (Win) or Return (Mac) to activate the blue region.
Drag the blue region right to 0:00.750 (0.75 seconds).
Select the Hello World text element on the Stage.
In the Properties panel, set the Scale X or Y value to 0, and set the Opacity value to 0.
Click the Next Step link to add an exit animation (Step 5 of 5).
Click the Easing button in the Timeline, select Ease In, select Quad, and then press Enter (Win) or Return (Mac).
Drag the Pin (blue) to 0:01.75 (1.75 seconds).
Drag the Playhead (gold) to 0:02.250 (2.25 seconds).
Select the Hello World text element on the Stage.
In the Properties panel, set the Opacity value to 0.
Drag the Yellow region to 0:00.500 (0.5 seconds) so the pin is at 0:02.
Select the RoundRect element on the Stage, and then Shift-drag it off the Stage to the right.
Click the Go to Start button, and then click the Play button or press Space to play back the animation.The lesson is complete.
Click the File menu, click Save, navigate to a folder, create a folder, enter a name for the composition, and then click Save.
)
)
)
)