Home > Articles > Computer Software > Creative Software > Other

  • Print
  • + Share This
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

  • 01yellow_circle.jpg 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.

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

    The animation_start.html file opens, displaying Hello World.

  • 03yellow_circle.jpg Click the Next Step link to add easing (Step 2 of 5).
  • 04yellow_circle.jpg Click the Easing button in the Timeline, select Ease Out, select Quad, and then press Enter (Win) or Return (Mac).
  • 05yellow_circle.jpg Click the Next Step link to add an entrance animation (Step 3 of 5).
  • 06yellow_circle.jpg Move the Playhead to 0:00.250 (0.25 seconds).
  • 07yellow_circle.jpg Double-click the Playhead to display a blue pin on top.
  • 08yellow_circle.jpg Drag the Pin (blue) to 0:00.750 (0.75 seconds). This displays a blue region for the animation.

  • 09yellow_circle.jpg In the Elements panel, select the RoundRec <div> element.
  • 10yellow_circle.jpg Shift-drag the shape element off the Stage to the left.
  • 11yellow_circle.jpg In the Properties pane, set the Rotate value to 720, and then click the Stage.

  • 12yellow_circle.jpg Click the Next Step link to add an entrance animation (Step 4 of 5).
  • 13yellow_circle.jpg Drag the left Rotate keyframe right to 0:00.500 (0.5 seconds).
  • 14yellow_circle.jpg Press Enter (Win) or Return (Mac) to activate the blue region.
  • 15yellow_circle.jpg Drag the blue region right to 0:00.750 (0.75 seconds).
  • 16yellow_circle.jpg Select the Hello World text element on the Stage.
  • 17yellow_circle.jpg In the Properties panel, set the Scale X or Y value to 0, and set the Opacity value to 0.

  • 18yellow_circle.jpg Click the Next Step link to add an exit animation (Step 5 of 5).
  • 19yellow_circle.jpg Click the Easing button in the Timeline, select Ease In, select Quad, and then press Enter (Win) or Return (Mac).
  • 20yellow_circle.jpg Drag the Pin (blue) to 0:01.75 (1.75 seconds).
  • 21yellow_circle.jpg Drag the Playhead (gold) to 0:02.250 (2.25 seconds).
  • 22yellow_circle.jpg Select the Hello World text element on the Stage.
  • 23yellow_circle.jpg In the Properties panel, set the Opacity value to 0.
  • 24yellow_circle.jpg Drag the Yellow region to 0:00.500 (0.5 seconds) so the pin is at 0:02.
  • 25yellow_circle.jpg Select the RoundRect element on the Stage, and then Shift-drag it off the Stage to the right.
  • 26yellow_circle.jpg Click the Go to Start button, and then click the Play button or press Space to play back the animation.

    The lesson is complete.

  • 27yellow_circle.jpg Click the File menu, click Save, navigate to a folder, create a folder, enter a name for the composition, and then click Save.
  • + Share This
  • 🔖 Save To Your Account