Computer Graphic Design

Animating With Keyframes: Eat Some Dots!

Objective:

  • Produce an animation in Animate CC using Embedded Animation, Motion Tweens and Keyframes.

Student-Friendly Objective:

  • I can produce a complete HTML5 animation using Embedded Animation, Motion Tweens and Keyframes.

Video Link:

Topics Discussed:

  • For a complete list of Topics Discussed, please see the previous lessons.

Assignment:

  1. Open the “Pac-Man” animation produced in Lesson 38 – “Animating Within a Symbol”. Your Pac-Man symbol should now cross the Stage once, opening and closing his mouth (using the embedded animation technique we learned yesterday).
  2. Today, your objective is to make Pac-Man eat some dots as he moves. We will do this using a “keyframe animation” technique.
  3. Double-click your “Layer 1” and rename it “Pacman”. This should be the layer that your Pac-man symbol Motion Tween is on.
  4. Create a new layer, and name it “Dots”.
  5. On the “Dots” layer, draw six evenly spaced dots using the Oval tool (hold shift to make a perfect circle!) along the straight motion path that Pac-man crosses (make sure that Pac-man touches each dot at least once).
  6. Scrub the playhead to the first frame that Pac-man completely crosses a dot (the dot will be over Pac-man, because the “Pacman” layer is above the “Dots” layer).
  7. Press F6 on the keyboard to copy all the dots on the first keyframe to the current frame.
  8. Delete the dot that is currently over Pac-man.
  9. Repeat this process for each of the remaining five dots (F6, move Pac-man under the dot, delete the dot).
  10. Once you have deleted all six dots, move the “Dots” layer below the “Pac-man” layer.
  11. Scrub the playhead, and Pac-man should appear to “eat” the dots as he moves across the stage.
  12. Press Command + Return (Ctrl + Enter on the PC) to test your movie.
    • Pac-Man should move across the stage (with the embedded mouth “chomping” animation)
    • Pac-Man should “eat” each of the six dots as he crosses the stage.
  13. Save your work as “Your Name –  Pac Dots.fla” and upload a copy to today’s Google Classroom assignment post by tomorrow, April 25th.

Finished Movie Example:
PacDots.mp4

Good Luck! Assigned: April 24th, 2019
Teacher Pacing Due Date: April 25th, 2019