Computer Graphic Design

Adobe Animate – Final “Pac-Man” Animation – Spring 2026

Objective:

  •  I can use Adobe Animate to produce a complete HTML5 animation that tells a story featuring Pac-Man.

Links:

Topics Discussed:

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

Assignment:

  • First, create a new FullHD HTML5 animation document running at 30fps.
  • Use File -> Import -> Import to Stage or the “Pin Library” techniques demonstrated in class to move the “Pac-Man” graphic symbol, and any other symbols that you wish to use in your animation to your new document.
  • Using the Adobe Animate CC techniques studied in class, your task is to design an HTML5 animation using motion  tweens and embedded animation to have Pac-Man “wocka” as he moves onto the stage, performs some action, then leaves the stage. Take a look at the Pac-Man Intermissions YouTube video above for inspiration!
  • Your animation must be a minimum of 8 seconds long, without titles. (That’s at least 240 frames at 30fps!)
  • Your animation should have a basic story that should be obvious to the viewer.
    • What kind of story can you tell with Pac-Man?
    • What other characters will you need to add to tell your story?
    • Will you need to use text or word bubbles to create dialogue?
    • Remember that Pac-Man must enter the stage, perform his action, then leave the stage.
    • Depending on the story you want to tell, 8 seconds may not be enough!
  • Your animation should have at least one original background. You may use a background that you produced on your own, or you may use an original photograph (one you took on your own). You may not use any photographs downloaded from the internet. Alternately, you may draw your own background in Illustrator, Animate, or Photoshop.
  • Your animation should have an audio soundtrack. I will provide music clips to use, but you may import music that you have available as long as you use less than 8 seconds of music. You may create sounds using Garageband if you have experience with this software.
  • You may only use images and text that you have created yourself. This includes artwork, photographs and animations. You may, however, use downloaded audio under fair use guidelines if the clip you place is shorter than 8 seconds. Anything else that you did not create yourself may not be used.
  • When your animation is complete, save it as “YOUR NAME – Final Animation.fla”.
  • Turn the finished .fla Animation file  to the Google Classroom “Final Animation” assignment post by end of day on Thursday, April 23rd.
  • All completed movies will be viewed at an in-class film presentation on Monday, April 27th.
  • You must have an 8-second movie to present by end of day on Thursday, April 23rd, bearing in mind that Friday the 24th is an I-Day and Monday is when we will be watching the finished products together.

Do your best, and good luck!

Assigned: April 16th, 2026
Due Date: April 23rd, 2026

Computer Graphic Design

Adobe Animate – Importing from Illustrator to Animate CC – Spring 2026

Objective:

  • Students will be able to prepare Illustrator artwork for export to Animate CC for use in an IK Animation.

Student-Friendly Objective:

  • I can prepare my Illustrator artwork to make a Bone Tween animation in Animate CC.

Topics Discussed:

  • IK Armature
  • Bone Tool
  • For a complete list of Topics Discussed, please see the previous weeks’ lessons.

Assignment:

  • Create a new Illustrator Web document with all the default settings.
  • Use the Shape tools to draw six shapes: a Head, a Body, a Left Arm, a Right Arm, a Left Leg and a Right Leg.
  • In the Front View document, use the black selection arrow to select the different parts of your character, and use the fn+F8 shortcut to convert each part to a Symbol. Every part of your character that is going to move should be made a separate symbol! Name each of the symbols appropriately as you create them. When you are finished, at a minimum you should have symbols for your character’s Head, Body, Right Arm, Left Arm, Right Leg and Left Leg.
  • Save this file as “Your Name – Body Parts.ai”. We will use this file to import into Animate CC.
  • Open a new Animate CC HTML5 canvas. Make the size FullHD, and set the framerate to 30fps. The stage color can be any color of your choice.
  • Use the “File -> Import -> Import to Stage” menu command to locate and import your “Your Name – Body Parts.ai” file. Walk through the prompts to import your body parts into Animate. Make sure to select all the parts, and select “Single Animate Layer” from the “Convert Layers to:” dropdown menu.
  • Use what we learned yesterday, and the in-class demonstration today to add bones to your shapes. (Remember: “Start from the heart” and work your way out to the head, arms and legs.)
  • Make your stick figure move! Add up to 120 frames to your animation, and use the Motion Tween-style Armature layer to animate your character’s poses.
  • We will use this technique next week to produce a simple animation. Save your file as “Your Name – Stick Figure.fla” and submit a copy to today’s Google Classroom assignment post by end of day on Thursday.

Assigned: April 15th, 2026
Due Date: April 16th, 2026

It’s super effective!