Week 9

12 principles applied: follow through & overlapping action

Follow through & overlapping action can give your character weight and personality. This principle reinforces the idea that an animated character exists in a world bound by physics principles.

The two terms are closely related:

  • Follow through: Loosely connected parts of a body/object is always a few steps behind and will continue to move after the character has come to a complete stop.
  • Overlapping action: Different parts of a body will move at different rates based on their location and mass.

Follow throughs and overlapping actions are usually added after the main body parts of character have been animated. The straight-ahead technique is often a good solution for these extra details.

The hat, tail and tie are all examples of follow through/overlapping actions.

Cleaning up and coloring your frames

The power of animation lies in the relationship between multiple frames rather than in the beauty of single drawing. In order to get the motion right, we often use a lot of overlapping lines and should avoid getting too precious about any given frame. There’s no color involved in early versions of an animation either.

However, once we’re happy with a sequence, cleaning up our lines and adding color is an important step of the animation process

Rough, cleaned and colored versions of the same frame

Cleaning up your frames in Animate

Cleaning up your rough animation frames will make your animation clearer by replacing tentative, overlapping lines with a single solid one. It’s also an opportunity to fix small errors or inconsistencies (i.e: volume).

Always work on a new layer.


If you have a Wacom at home you can use the Brush *Keyboard shortcut: Y and Pencil *Keyboard shortcut: Shift + Y tools. and/or basic shapes (such as ellipse, rectangle etc.):

  • Be consistent with the stroke’s width and style
  • Don’t forget to set the smoothness: the higher the smoothness, the fewer the number of anchor points… which will give you smoother/less “hand drawn” lines.


If you do not have a Wacom, I recommend using the Pen *Keyboard shortcut: P (if you need a refresher on using the pen tool, I recommend this game: https://bezier.method.ac). For simple shapes you may consider using the Rectangle *Keyboard shortcut: R, Oval *Keyboard shortcut: O, and Line *Keyboard shortcut: N tools

  • Don’t use fills at this point
  • Keep the color, stroke width and style consistent with the other strokes in your drawing.
  • You can change a straight path into a curve with the Selection tool *Keyboard shortcut: V: over, click and drag on the path you wish to edit.

Coloring your frames in Animate

Once you have a clear set of lines, you can add color to your frames. A well thought-out color palette can really help your character stand out and reinforce some of its personality traits (bright colors for a happy-go-lucky character vs. muted/dark colors for a villain).

First, pick all your colors and save them in a color palette (or group of swatches):

  1. Select Window > Color
  2. Select your first color and click on the Add to swatch button. Repeat for each color
  3. Select Window > Swatches.
  4. On the Swatches tab, click the New Folder icon to create an empty palette. Don’t forget to give it a name (i.e: the name of your character).
  5. The colors you recently created/added should be on the last row of your swatches. Toggle your newly created palette and toggle it so you can see its content (currently empty) and drag and drop each swatch into it.

Now that you have all your colors selected you can use them to fill your drawing with the bucket tool*Keyboard shortcut: K:

  1. Select the bucket tool
  2. Click on the fill swatch and select one of the colors in your color palette.
  3. Click in the area you want to fill. You will only be able to fill closed shapes. If an area doesn’t fill as expected it might be that there is a tiny gap somewhere – zoom into your drawing and close the gap. You can ask the bucket tool to automatically close gaps of a certain size:
    • Click and hold the Gap Size icon and select the size of gaps you want the bucket tool to fill.
  4. If you want to use the bucket tool to fill an area that isn’t (or is only partially) defined by a stroke, you can create temporary demarcations:
    • Activate the pencil tool *Keyboard shortcut: Shift + Y
    • Define the area you want to fill with a color that you are currently aren’t using anywhere else.
    • Select the Bucket tool and click inside new shape.
    • Select and delete the temporary outlines.

You can also use the brush tool *Keyboard shortcut: B to fill certain areas more organically (this will work better with a Wacom/tablet).  When using the brush tool, pay attention to the Brush Modes as they will yield very different results:

Click and hold this icon to select different brush modes

Paint normal: the brush creates new marks without interacting with previous strokes/fills.

Paint fills: the brush creates new marks over everything except strokes.

Paint behind: the brush creates new marks only “behind” existing fills and strokes

Paint selection: to use this mode, you must first select one or several areas with your selection tool. The brush only creates marks on the selected area(s). This is a great option for shading.

Paint inside: this mode is similar to the selection mode in that it only allows the brush to create marks within an object. However, the brush will only apply marks in a single area per brush stroke.

Final project- step 4: walk cycle (revised)


Revise your walk cycle until it’s “just right” (i.e: perhaps you need to add a few in-between frames to slow it down a bit, change the position of an arm or a leg etc.)

Add a follow through/overlapping action to your character’s walk cycle (i.e: a tail, flappy ears, hair, clothing/accessories etc.)

Finally, clean up your lines and add color to your animation sequence.

If the rough walk cycle you created last week was created in a software other than Animate you have to recreate it in this software at this point. The reason for this is that we will be adding camera, effects, credits and sound in After effects and this will be much smoother if we can import an Animate file (i.e: if you created your walk cycle in Procreate, you will not be able to use the camera to zoom on your character without it being extremely pixelated – Procreate is a raster program, while Animate works with vectors).


Use the following file format: 24fps, width: 1920px | height: 1080px. Save your .fla file and export your animation to Quicktime (review exporting instructions on the week 2 page). Upload your animation to Vimeo or Youtube.


Create a new post on your Open Lab portfolio. Your post should include a link to your Vimeo or Youtube video as well as a short description (what did you add/change from the previous version. Reflections on your process, challenges, goals etc. are also welcome).

This assignment is due next week. Submit the following files on the following platforms:

  • Blackboard: .fla file and a link to your Open Lab post.
  • Open Lab discussion board: Reply to the “Final Project: walk cycle(revised)” discussion post with a link to your Open Lab post

This is part of the final project. It will be taken into account in the final grade for the project (see full grading rubric here).