Category Archives: Computer Graphic Design

Computer Graphic Design Assignments and Information

Animate CC – Final “Pac-Man” Animation

Objective:

  • Produce an original HTML5 animation using the Adobe Animate tools and techniques studied in class.
Student-Friendly Objective:

  •  I can produce a complete HTML5 animation featuring Pac-Man.

Links:

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

Assignment:

  • First, create a new 800 x 600 HTML5 animation 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.
  • Using the Adobe Animate CC techniques studied in class, 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 an 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 Thursday, May 17th.
  • Underclassmen: You may turn in the finished .fla Animation file to the Google Classroom “Final Animation” assignment post by end of day on Tuesday, May 22nd.
  • All completed movies will be viewed at an in-class film presentation on May 24th. Note: All seniors must take their final exam on the 18th.
  • You must have an 8-second movie to present by end of day on Tuesday, May 22nd, bearing in mind that Monday and Tuesday the 21st and 22nd are half-days. Failure to do so will result in an “zero” on your final project grade.


Do your best, and good luck!

Assigned: May 14th, 2018
Due Date: May 22nd, 2018

Animate CC: Working with Sound

Objective:

  • Utilize sound in Animate CC movies.
  • Import sound to the Stage or the Library.
  • Open the Sound Properties window to change the compression of a sound.

Student-Friendly Objective:

  •  I can import and use sound in my Animate CC animations, and use the Sound Properties window to change the compression level of sounds.

Tutorial Link:

How to Use Sounds in Animate CC

Required Files:
Topics Discussed:
  • Import
  • Extend Timeline
  • Keyframes
  • Layers

Assignment:

  1. If you have not yet completed the “Pac-Man Quiz” animation we started earlier in the week, you should do so before attempting this assignment.
    1. Refer to Animating Within a Symbol: Make Pac-Man Chomp! if you still need to know how to make Pac-Man’s mouth open and close while he moves.
    2. Refer to Animating With Keyframes: Eat Some Dots! if you need to know what the Pac-Man animation should look like when you’re finished and ready to start today’s Lesson.
  2. Locate the audio files at the top of this posting. You will find “pacman_beginning.wav” and “pacman_chomp.wav”
  3. Access today’s tutorial link and read through the information on Using Sounds in Animate CC on the Adobe website. Use the information provided to embed these audio clips into your animation. Extend the timelines to accommodate the “PacmanSong” audio file length. Try to match the “Wocka2sec” sound to when Pac-Man eats the dots by moving the audio clips in the timeline to match the keyframes on the Dots layer.
  • If you don’t have dots for Pac-Man to eat, add some!
  • Remember you’ll need to use keyframes to get Pac-man to eat the dots.
  • The “PacmanEatFruit” sound is provided in case you want to add Pac Man eating the fruit like I did in the in-class example. It is not a requirement, just a stretch goal if you want to take on the challenge!

Save your work. Turn in your completed animation (now with embedded sound) titled “Your Name – PacManQuiz.fla” to Monday’s Google Classroom assignment post by the end of Friday.

Assigned: May 10th, 2018
Due Date: May 11th, 2018