DIGI 260 - Lab 02 Home


Frame-by-frame Techniques
Animation Principles
Sprite Construction

  1. Design a very small animation. This could be a button, icon, thumbnail, etc.
  2. Software is up to you. An online tool such as PIXLR will do the job, or you could just use Photoshop.
  3. Your animation might jump, morph, expand, dematerialize, grow wings, etc. Consider animation principles, and the message the images convey. There are some great ideas here and here about conveying a message visually in a short time.
  4. The first frame of the animation should be the resting state of the image, and the remaining frames should show the progress/journey.
  5. Your completed graphic should be 100px tall, and 2900px wide. Each "frame" of the animation should be 100px wide, so there will be 29 frames. The image format should be .png. Do not create an animated .gif. Your image may look something like this:

    heart animation
  6. Use this template to test your animation. Name your image file animation.png and put it right next to the HTML file to test; we'll look in class at how to do this.
  7. If you're feeling adventurous, you can modify the JS inside to affect the playback speed of the animation, but all you need to submit is the image.

Place a copy of the .png in a folder named with your first and last names, and the number of the lab. .zip this folder and upload it using the D2L page for the labs. Don't forget to have fun!

This lab is worth five marks. This lab is due at the beginning of next class.