The End:

The final animation should conclude your story and resolve the conflict(s) that arose in the middle. This will be done utilizing spite animation, so you may choose to make this component loop or not.


As with the beginning and middle storyboard the conclusion of your story. From your storyboards, move into either photoshop or illustrator to create the final artwork. As you did for the zoetrope, the frames of your animation will be placed side by side. These side by side frames when used for digital animation are referred to as a sprite. Your sprite should use a minimum of 24 frames, but may certainly use more.

To set up your sprite, decide how large you want a single frame of animation to be. For example, my demo is 100 pixels wide, and 200 pixels high. Then multiply the width by the number of frames you need or think you need for your animation. My demo used 20 frames, so my file needed to be 200 pixels hight and 2000 pixels wide. If you need to add more frames just add the width of one frame to the width of your document.

Once your sprite is finished, it will be brought to life using a little HTML and CSS.

The HTML will be simple, in the body of your document add the following:

<div id=”sprite”></div>

In the <head> of your document add the following css:

#sprite {
width:FRAME_WIDTHpx; height:FRAME_HEIGHTpx;
background:url(sprite.png) left center;

animation: go NUMBER_OF_SECONDSs steps(NUMBER_OF_FRAMES) infinite;

@keyframes go { 100% { background-position: -WIDTH_OF_SPRITEpx; }

Bringing it all together:

Due for critique next week are all 3 parts of your story. To make this process easier for social distancing, please digitize parts 1 and 2. Scan each page of your flip book to create an animated gif, this can be done with photoshop or utilize the Animation Studio in the AMC. Scan each strip of your zoetrope animations and use the sprite method to bring them to life.


Part 3 will be graded on the following for criteria:

  • Aesthetics – This includes use of color and value, detail, line consistency and quality
  • Process – This will include your storyboards, and visible effort put into the animation
  • Concept – This will consider how effectively you conclude your story
  • Animation – This will focus on how smooth the elements move
  • Over all story – This takes into account how all three parts work together