The animation created in this tutorial is sort of a frame-by-frame animation (remember that all animations involve rapidly flipping static images or frames), but this time, we will create a single image file that contains all the different moments of the animation. This image is called a sprite sheet. A sprite is a single pose or moment in an animation image series. It can be called a state. Sprites are collected on a sprite sheet. Sprite Sheets are used in games and other interactive products because they make it easy to manage the different states of an asset (image, icon, button, character, etc.).
Example. When your character moves in a third-person video game, like Zelda, the animation is usually done with a sprite sheet. Each position of the character during the idle movement or walk cycle is a single image in a sheet of many images. And the camera (if you will) shows only one at a time in a loop.
In the example below, you see Link’s idle pose. (Link is the name of the player character in the Legend of Zelda series of video games published by Nintendo.) In this case the sprites are 3D models instead of images, but the idea is the same. (Please let me know if this file ever disapears, it is hosted externally.)
For your second animation, you will create a character’s walk cycle. It will be designed with a sprite sheet, and it will be animated using CSS. The finished product is something like this:
The sprite sheet for this animation looks like the following. It is a typical four-frame walk cycle. Note that I have made the head bobble, but I do not discuss this in the tutorial. You can figure it out. :-)
In this tutorial, you will use Illustrator or Photoshop (or any other tool) to draw the character, and Photoshop to prepare the sprite sheet. (I assume you know Photoshop.) You will also write very basic HTML and some CSS code to animate your character.
Read the whole thing once before you start creating the animation. If you have issues with certain parts, don’t hesitate to contact me.