Course notes
syllabus | schedule | topics | assignments | class notes | resources | students | ARTC courses
Principles of Animation - Timing
Timing and Spacing

Timing gives meaning to motion.

Timing tells us the weight of an object, it will help convey a character's thoughts, and emotions, and it can set the mood.

Movement is not important, it is how this movement expresses the cause of the motion.

When thinking about timing you need to:

  • reserve enough to time to prepare the audience for something to happen
  • devote time to the action
  • devote time to the reaction that happens in response to the action

    If too MUCH time is spent on any of the above things, the audience's mind will wander
    If too LITTLE time is spent, the audience will not get the meaning (or miss the whole thing)

    Timing is based on nature.

    Newton's laws of motion:
  • I. Every object in a state of uniform motion tends to remain in that state of motion unless an external force is applied to it.
  • III. For every action there is an equal and opposite reaction.

    The force could be:
  • Natural force (external) such as wind, gravity, friction
  • an Internal force such as freewill, intention, instinct, mood (the character initiates the action)

    There are two different types of timing:
  • timing for inanimate objects
  • timing for living characters

    Timing for inanimate objects is based on nature and the physics of the real world.
    Timing for living creatures is based on physics and mental operations (intention and emotion). Characters think then act.

    Even cartoon motion is based on real motion and timing but it is exaggerated.

    To move something, you need to understand the forces that are causing the movement

    Things that effect timing:
  • weight / mass
  • the construction of an object
  • the flexibility of an object
  • the initial force
  • opposing forces

    Things do not move suddenly. They typically accelerate to their maximum speed.
    Things do not stop suddenly. Even if they hit a wall, they compress and bounce off a little before stopping.

    Timing is based on cause and effect.

    Ease in and ease out is really the relationship between velocity and forces.

  • Animating using Photoshop
    To create a hand drawn animation using Photoshop Frame Animation

    In Photoshop, open a new file and use the Preset - Film& Video (720 x 480) then select Window menu - Animation

    Make sure it is in Frame Animation mode - Animation (Frames)
    Animation Palette Menu - Convert to Frame Animation

    You need to have your Layer palette open and work with both the Animation palette and layer palette

    Different ways to animate using the layers:
  • Turn layers on or off for each frame
  • Move the layers - drag it around with the pointer tool
  • Change Layer Opacity in the frame - in the layer palette
    can select more than 1 frame and drag the layer around
  • Change Layer Blending Mode in each frame
  • Add a style to the layer

    Steps to making an animation
  • Make new layer - change opacity to 75
  • draw on the layer
  • duplicate the layer and move the object or erase and redraw the object in new spot
    you can also make a new layer but you need to set the opacity to 75 again
  • repeat the previous step till you have a nice stack of layers
  • go to the Animation (Frames) palette and select the first frame
  • turn on or off the layers you want to be visible in this frame
  • Duplicate the frame by clicking the icon in the bottom of the palette
  • Turn off and on layers for each frame duplicated

    When you click the duplicate icon on the bottom it will duplicate the single frame or the series of frames you select

    If you select more than 1 frame, it will put them after the last frame you selected

    To insert new frames in the middle (Tweening)
  • Select the frame that you want the frames to go before
  • click the Tweens Animation Frames icon in the Animation palette
  • Select Previous frames, type number of frames, and only select the parameter that you want to change

    If you select:
  • a single frame it asks if you want to put the additional frames
  • two contiguous frames, it puts the new frames in the middle
  • more than 3 or more frames, it replaces the middle frames with the new interpolated frames using
    the outer frames as the ones to determine the tweening

    The tween options:
  • all layers will make inbetweens for all layers in the frame
  • selected layers makes inbetweens for only the selected layers in the layer palette

  • Select from position, opacity, or effects or a combination of the all

    To set the delay select one or more frames
  • (you can select noncontiguous frames by using the Command click on Mac or Ctl click on PC)
  • Pull down on the delay number to select a new time delay

    To set the loop
  • Pull down on the menu with Once in it to select Once, Forever or Other...

    Changing the order of the frames
  • Drag the frame to a new spot in the row of frames

    Reversing the frames
  • Select frames (can select frames that are not contiguous)
  • Animation palette menu - Reverse frames

    To delete frames
  • Drag the drag to the trash or
  • select the frame and click the trash or
  • Animation palette menu - Delete Frame

    Changing the position of a layer in all frames
  • If you had a ground plane in all frames and wanted to change it in all frames you need to Unify the position
  • Select a frame
  • move the layer to correct spot
  • Go to the Layer palette and click the icon Unify: Unify Layer Position
  • (all other layers that contain that layer visible will show the new position of the layer)
  • This is an on/off toggle switch and the movement of this layer will always be linked to all layers unless it is turned off

    To turn on or off a layer on all frames:
  • Select a frame
  • turn the layer on or off
  • Go to the Layer palette and click the icon Unify: Unify layer visibility
  • (all other layers will either show or not show that layer)
  • Toggle it on or off for that layer

    To turn on or off a layer effect such as drop shadow on all frames:
  • Select a frame
  • apply an effect by double clicking the icon of the layer
  • Go to the Layer palette and click ON the Unify: Unify layer style
  • (all other layers will either show or not show that layer effect)

    To make changes to all frames based on the movement or visibility of the first frame:
  • Select first frame
  • Select layer and make sure that Propogate Frame 1 is checked in the Layer palette
  • Move the layer and watch the rest of the frames with that layer visible move
  • They will move relative to where they are placed
  • Click the layer off and on
  • It will turn the visual on all other frames that have that layer on and off
  • It does not work with effects

    You can also select a range of frames
    Select a layer
    Animation palette menu - Match Layer across frames
  • it will set the position, visibility or style across all the frames you select

    Cut, Copy, Paste Frames
    Select one or more frames
    Animation palette menu - Copy Frame
    Select the frame to indicate where you want to paste it
    Animation palette menu - Paste Frame
    Tell it where to paste it, Replace Frames, Paste over, Paste before, Paste after

    Adding a new layer each time you make a frame:
    Each time you want to add a new frame it is helpful to have a new layer if you are drawing frame by frame animation
    Under the animation palette menu - select:
  • Create new layer for each new frame

    You can also turn on or off
    New layers visible in all frames
    all newly created frames will appear in all frames

    Increase size of frame view
  • Animation palette menu - Panel Options

    If you created animation by moving an object and now need the individual layers so you can go back and draw on each layer, you need to:
    Animation palette menu - Flatten Frames into Layers
  • it turns the layer eye on and off for all frames
  • Timeline Tweened Animation

    Animation palette menu:
    Convert to Timeline (if its in the Frame Animation mode)

    From the Palette menu:

    Document settings - how long will it be, and set frame rate to Custom 15 so you don't have to draw so many
    You can use 30 if you are only doing Tweened (no frame by frame drawing)

    Dragging the top blue edges of the timeline will define the work area

    Steps to make a tweened animation Add a layer (Layer palette)

    Add content to the layer
    Draw on the layer

    Select a frame by moving the blue slider

    Open the arrow on the layer in the Animation palette
    Click the stopwatch to turn on animation for that attribute

    Go to a frame, move the object and it will set a key for you
    repeat this (go to the frame, move it) till you have an animation

    Try this with Position, Opacity and Style

  • You can set a key frame by clicking the diamond between the two arrows on the left
  • Add additional layers animating their parameters
  • Adjust where the layer should first show up and then be gone by dragging its right and left edges inward
  • You can jump to a key frame by holding down the Shift key and dragging in the timeline

    When you click the keyframe it turns yellow, you can then Copy then Paste the Key frame to a new
    spot on the timeline

    You can move the selected keyframes and delete them
    Right mouse button click them

    You can also change the interpolation mode of the selected keyframe
    Animation palette - Keyframe Interpolation ...
    • Linear (even steps to next key)
    • Hold (like stepped in Maya)

    You can convert this to Frame Animation but it may change a few layer properties and keyframe settings

  • To create an animation by drawing on each individual frame, this method works best.

    Add a new layer
    Layer menu - Video Layers - New Blank Video Layer (used for creating handdrawn animation frame by frame)

    Select the new Video layer in the layer palette
  • Draw on that layer

    Open the Video layer in the animation palette

    You can then duplicate the frame or just go to the next frame and draw again
    Layer menu - Video Layers - duplicate frame

    repeat drawing on new frames till your animation is done

    Adding a new blank frame in between existing frames
  • Position the blue timeline slider
  • Layer menu - Video Layers - Insert blank frame

    Deleting a frame
  • Position the blue timeline slider
  • Layer menu - Video Layers - Delete frame

    Onion Skinning
  • Click Animation palette - Enable Onion Skins ON
  • Change Onion Skin Settings in the pull down menu
  • I usually use 5 Frames Before and 0 Frames After

    Removing the paint strokes on a frame
  • Layer menu - Video Layers - Restore frame
  • Layer menu - Video Layers - Restore All frames

    You cannot convert this to Frame Animation

  • Setting Shortcuts
    Since you will be adding a new frame a LOT, it is good to set a shortcut for it

    Go to Edit menu - Keyboard Short cuts... - Application Menus
    • Open Layer
    • Scroll way down and find Video Layers>
    • Click on Insert Blank Frame and hold down Ctrl + Option + Command and hit a key
    • remember this key - OK
    Exporting the Final Animation
    File - Export - Render Video
    Name it
    Select where you want to save it (select folder)

    Click Quicktime Export - Settings
    • Video Settings
    • Compression:
      • Animation for solid colored small animations - less compression
      • H.264 for animations
    • Frame Rate = Current or 15 fps
    • Compressor = High NOT Best
    • OK
    No Optimize for Internet Streaming - OK

    Set size or use Document size
    You can set the range to render
    You can also set the Alpha - transparency
    Set Frame Rate or use the Document Frame Rate