Frame-by-frame Animation

Kevin Driscoll EdTech Magazine Spring 2008


Animation is an excellent extension to an investigation of digital image editing. This introductory lesson demonstrates the origins of animation in a pre-digital era and caries these core principles over to the personal computer. Students will also be able to integrate this work into on-going web-based projects as animated GIFs and Flash movies.

Lesson Description

Class begins with a simple prompt: "Use the brush tool to draw a face." The teacher will circulate to iron out any technical issues and show everyone where and how to save their work. After students settle in, the teacher describes frame-by-frame animation while a video of Glen Keane plays silently. The class considers the tracing paper and charcoal pencil. How do they compare to other drawing tools? What limitations do they impose?

The teacher next demonstrates the same frame-by-frame technique using "onion-skinning" or semi-transparent layering in animation software. Students are then prompted to think about the opposite expression to the one their face is currently making (e.g. Bored / Excited) and begin to draw more frames. Students experiment with cut, copy, and paste as well as simply drawing. How does this change the process?

While students are working, the teacher will pass out printed flipbooks. What happens if the reader flips faster or slower? How many pages does it take to produce believable motion? Depending on the software platform, the teacher should demonstrate how to change the animation's frame-rate.

Finally, students are instructed on saving and exporting their projects.

Subject Area

This lesson can be adapted to art, media, and computer applications courses for middle-school and high-school students. An ideal setting is a computer lab in which each student has her own computer and can see the teacher's desktop on a projector. While the examples in this lesson use a Flash platform for creating animations, this work can be adapted to any multi-layered digital image editing software. Appropriate tools are available for all of the major operating systems (GNU/Linux, Windows, and Mac OS X).


This lesson addresses the following areas of the National Educational Technology Standards for Students:

  • Basic operations and concepts
  • Technology productivity tools
  • Technology communications tools


  • Over-the-shoulder view of Glen Keane sketching frame-by-frame:

  • Glen Keane biographical information:

  • Stunning flip-book collection:

  • Free image editing software:

  • Detailed instructions and sample Flash projects for use with this lesson:

  • Examples of past student work, see "Day 1":

Grading Rubric

This is a project to introduce a unit and should be counted among a larger portfolio of work. Students should be required to exhibit a selection of their work publicly (on- or off-line).

Teaching Tips

  • If students are new to the platform being used, it is helpful to start up the software on their machines in advance of class, with a new empty project opened and the desired drawing tool selected.
  • Keep a simple text editor (such as Notepad) open on the teacher's desktop. Use it to display instructions and record interesting student comments or questions. This can be an invaluable log of the day's work and supports students who will need to refer back up to the instructions during independent work time.
  • Play the Keane video without sound and narrate it live with special attention to the needs of the particular class. Art students will need different direction than computer science students.
  • Pair students or provide mirrors so they can observe the changes that faces make between expressions.
  • Limit students to using one drawing tool, one foreground, and one background color to help focus everyone on creating high-quality animation.
  • Begin the next class with a slide show of face animations from the first class. Put them up on a website and give out the URL for families, friends, and other faculty to see.
Do NOT follow this link or you will be banned from the site!

Non-profit Tax ID # 203478467