Animation 1: Traditional Animation

Computer Animation

  • 2 basic classes of computer animation:
  • Keyframe animation
    • Data driven
    • Hand animation or Motion Capture
  • Simulation
    • Procedural/algorithm driven
    • Particle systems, physics, artificial life
  • I’ll talk about Keyframe animation


  • This week:
  • Traditional animation
    • Cell animation
    • Stop Motion
  • Next week:
  • Computer animation
    • Trad vs Computer animation
    • Keyframes
    • Interpolation

Overview and aims

  • This lecture will explain the basics traditional animation techniques and how computers can be used to achieve them
  • By the end of the lecture you will be able to:
    • Describe techniques used by Disney and other animation studios
    • Describe the difference between cell animation and stop motion animation
    • Create an animation

Flip book

  • The most basic form of animation is the flip book
  • Presents a sequence of images in quick succession
  • In film this becomes a sequence of frames
  • If the images are shown quickly enough the human visual system isn’t able to see the breaks
  • They are perceived as motion, not separate images
  • More on the psychology next year

The Time Line

Animation is a sequence of frames (images) arranged along a time-line

Cell Animation

  • Cell animation works on the same principle as a flipbook
  • Display a sequence of images at 25 frames per second

Cell Animation

  • Cell animation works on the same principle
  • Display a sequence of images at 25 frames per second


  • Each frame is an image
  • Traditionally each image had to be hand drawn individually
  • This potentially requires vast amounts of work from a highly skilled animator


  • Have a background images that don’t move
  • Put foreground images on a transparent slide in front of it
  • Only have to animate bits that move
  • Next time you watch an animation notice that the background is always more detailed than the characters
  • Asian animation often uses camera pans across static images


  • The head animator draws the most important frames (Keyframes)
  • An assistant draws the in-between frames (inbetweening)

Other Techniques

  • Squash and stretch
  • Slow in slow out

Squash and stretch

  • Change the shape of an object to emphasise its motion
  • In particular stretch then squash when changing direction

Slow in slow out

  • Control the speed of an animation to make it seem smoother
  • Start slow, speed up in the middle and slow to a stop

Stop Motion Animation

  • Stop motion is similar, you create a sequence of images
  • But they are photographs or real objects
  • There are slight movements between each frame

Stop Motion Animation

  • Create models of all your characters
  • Pose them
  • Take a photo
  • Move them slightly
  • Take another photo

Stop Motion Animation

  • The hard part is ensure that the movement appears smooth and coherent
  • (This is true of all animation)
  • You need to make sure that all the moves you make are consistently in the same direction

Stop Motion Animation

  • The method implies a different way of working from cell animation
  • In cell animation you make characters simple because you have to draw them a lot
  • In stop motion animation your characters are physical objects
  • Spend a lot of time creating them so they look good
  • And move them easily and realistically (without breaking them)
  • This is similar to computer animation

Stop Motion Characters

  • Many different ways of creating characters
  • Just use objects that you move around
  • Articulated toys can be good (action man/barbie)
  • Puppets
  • Plasticine etc.
  • Ardman use soft plasticine coverings but their characters have metal skeletons underneath to make them easy to move

Making animations

  • Create a load of images and save them
  • Use some software to combine them

Making animations

  • Cell animation:
  • Draw animations
  • Could use a bit map package like photoshop
  • But you would have to redraw everything in a traditional way
  • Vector packages like illustrator allow you to create objects and move them (easier)
  • Flash is built around the concepts of cell animation (keyframes, inbetweening)

Making animations

  • Stop motion animation:
  • A digital camera
  • Some plasticine
  • A lot of patience

Making animations

  • There are lots of packages that take a sequence of images and make a movie file from them
  • Quicktime pro, windows movie maker (I think)
  • Animated gifs using gimp or photoshop

Animations in Processing

  • I’m going to get you to write a program to show animations
  • You need to be able to display a different image each frame
  • Processing makes this easy, the draw method is called each frame

Animations in Processing

  • Use a variable to keep track of the current frame (a number)
  • Add 1 to it at every frame
  • What if it goes at the wrong speed?
  • There is a method in Processing called frameRate, which controls how often draw is called

Animations in Processing

  • I will give you a Processing sketch that already does all the hard bits like loading the files in
  • You need to control the playing of the animation

Things to think about

  • Making movements smooth: slow and careful
  • Coherent motion
  • Framerate, transitions
PDF Printer    Send article as PDF to