Tuesday, October 18, 2016

Animation Tutorial

Welcome! In this tutorial you will learn how to create a sprite sheet and animate is using CSS & JavaScript.

Brief History of Animation

Humans have been bringing scenes to life through animation as along as we’ve been able to draw. In 3,000 B.C. a bronze-age poetry bowl depicts a leaping goat.


In 1824, the first thaumatrope toy was created. It used the brain’s persistence of vision to blend two pictures together. This persistence of vision phenomena is still used today in animation.

Steps

  1. First, you will need to plan out your animation. You will create at least 36 sprites, so you should consider creating a storyboard to plan out your transitions.
  2. Next, you will create a sprite sheet. See instructions in video below:

  3. Finally, you will remix this Thimble project then upload your sprite sheet and update CSS & JavaScript to get it working on your web page. Find instructions for updating Thimble here.

When you finish, publish your page and 

complete this form to turn in!


Resources:



Student Examples: