2D Rigging/Bones

Over the last few weeks, our work with Flash has been interesting introduction into animation concepts and basic workflow.

Quick review:

  • Objects are drawn and converted to symbols for future edits and repeated use.
  • Animation is done through series of keyframes or tweens between keyframes.
  • Flash has two drawing modes that can both assist OR hurt your drawing efforts. Are you wanting merged or object drawing?

The Skeleton Dance

Let's watch Disney's 1929 'The Silly Symphony'. It was drawn by Ub Iwerks, one of the creators and early illustrators of Mickey Mouse. Over the course of the next handful of days, we will create our own Skeleton Dance project.

Step 1: Bone Symbols

  1. Import Skeleton Dance still linked below image.
  2. Place the image onto a layer named Trace.
  3. Lock the layer so you don't accidentally move the image during the project.
  4. Using the Merge Drawing option (vs. Object Drawing), draw each of the bones.
  5. Select each after you've drawn one and create a symbol (F8) of each.
  6. Build a unique symbol for each of the 12 bones. Notice how we only create one of each. Later, we can copy, flip, rotate, etc. that one multiple times.
    • Upper Arm
    • Lower Arm
    • Hand
    • Thigh
    • Shin
    • Foot
    • Head
    • Jaw (can be a portion selected from the Head)
    • Neck (Not a visible bone -- will have to be assumed in shape)
    • Spine
    • Ribs/Shoulders
    • Pelvic bone
  7. Using the Paint Bucket tool, you will need to fill in each part so the bones aren't see-through.
  8. Save your file as SkeletonDance.fla.

Step 2: Building Scene Symbols

  1. In your Library, create a folder called Body. With all the parts we've built, it'll help to organize the Library a little. Drag and drop all body parts into this folder. Place all your bone symbols onto your Bones layer to see which (if any) symbols you still need to create. Create those symbols before moving on.
  2. Delete your Trace layer. Adjust your Stage color so the background looks like a spooky night sky color.
  3. Create a layer called Background. Make sure it is below your Bones layer.
  4. Create additional symbols for:
    • Ground
    • Headstones
    • Lightning Bolt (use the Deco Tool's Lightning Brush option)
    • Trees (use the Deco Tool's Tree option) -- Winter Deciduous looks spooky.
  5. Arrange your scene using these symbols on the Background layer.
  6. If you need to move things behind others, right-click and choose Arrange > Send to Back.
  7. Begin thinking about what your skeleton figure (or figures) will do. You will need additional symbols (props) for your animation. Begin drawing and creating symbols for those.

Step 3: Animating Skeleton & Scene

This is where you can be as creative as you can. Get your skeleton to play baseball or play an instrument in an all skeleton band. Using your created props and the bones, you will animate your skeleton or skeletons for at least 15 seconds (15 * 24 = 360 frames).

Remember: Just like the illustrators of Disney's 'Silly Symphony,' you should feel free reuse character's actions or tweens.

Reverse keyframes to get an animation to "rewind" or copy frames to later in the Timeline -- select the frame range in the Timeline that you want reversed and right-click > Reverse Frames. A skeleton's action could easily be a series of keyframes repeated for a while.


Looking over Adobe's tutorial on the Bone tool, we see they use a Guide layer for some animating movements. We can also things that are long (a tail) will need LOTS of "bone" pieces so that it smoothly curls.