Tag Archives: Spring 2023

Computer Graphic Design

Adobe Animate – Final “Pac-Man” Animation

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 HD 1280 x 720 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”.
  • Seniors: Turn the finished .fla Animation file  to the Google Classroom “Final Animation” assignment post by end of day on Friday, May 19th.
  • Underclassmen: You may turn in the finished .fla Animation file to the Google Classroom “Final Animation” assignment post by end of day on Monday, May 22nd.
  • Everyone will be taking a multiple-choice final exam on Friday, May 19th. Seniors who complete the exam early may use the remaining time to turn in their Final Animation, if necessary.
  • All completed movies will be viewed at an in-class film presentation on May 23rd.
  • You must have an 8-second movie to present by end of day on Monday, May 22nd, bearing in mind that Tuesday the 23rd is a half-day where we will be watching the finished products together. Failure to have a movie to present on the half-day Presentation Day will result in an “zero” on your final project grade.

Do your best, and good luck!

Assigned: May 11th, 2023
Due Date: May 22nd, 2023

Computer Graphic Design

Adobe Animate – Bone Tweens

Objective:

  • I can create a HTML5 animation using Inverse Kinematics, a.k.a. Bone Tweens.

Links:
How to Use the Bone Tool to Create Animation

Topics Discussed:

  • New Animate CC document
  • Shapes
  • Symbols
  • Registration Point
  • Tweens
  • Bone Tweens
  • IK Chains
  • IK Shapes
  • Keyframes
  • Layers

Assignment:

  1. Produce a new HTML5 Canvas file. Name it “Your Name – Bone Tweens”. Set the FPS to 30 and the Stage size to Standard HD.
  2. Use the Shape tools to draw a shape. Convert this shape to a Symbol using any of the techniques we learned last week, and place five instances (copies) of this symbol on your Stage in a straight line.
  3. Use the process demonstrated in class (and in the videos) to create an IK Chain. Use the Bone Tool to draw Bones between the Registration Points (Center) of each of the five symbols. Note that as you add each Symbol to the IK Chain, it is moved from its original layer to the “Armature” layer that was automatically created when you linked the first two Symbols with the Bone Tool.
  4. Use the process demonstrated in class and in the tutorial to move and animate the IK Chain. (Note: This works just like a Motion Tween!)
  5. Create a new layer and draw a long thin horizontal rectangle. (Note: Do NOT make this a Symbol!)
  6. Select the Bone Tool. Starting from the left side of the rectangle, draw a bone from the left edge of the rectangle, about a fifth of the way across. Repeat this process until you have five bones linking the left edge of the rectangle to the right edge of the rectangle.
  7. Drag the last bone in the chain to transform the shape. You now have an IK Shape object. Animate a transformation (Curling, Waving, etc.)
  8. Finally, use the PolyStar Tool to draw a large, thin star. Use the Options to give the star at least five points and thin arms.
  9. Select the Bone Tool and starting from the center of the Star, draw four bones radiating from the center to the outer tip of the top arm.
  10. Repeat this process, starting from the center of the star each time, for each of the remaining four arms.
  11. Animate a separate transformation (Curling, Waving, etc.) for each of the five arms. (Make the star dance!)
  12. When you are finished, you should have three different IK animations (IK Chain, IK Shape, IK Star).
  13. Save your work. Upload the completed “Your Name – Bone Tweens.fla” file to today’s Google Classroom post “Bone Tweens” by the end of today.

Assigned: May 9th, 2023
Teacher Pacing Due Date: May 11th, 2023