You are Here:Home>>Old Posts>>Flash CS4 Character Animation with Bone Part 1

Flash CS4 Character Animation with Bone Part 1

Carlos Pinho
By | 2009-04-20T07:28:33+00:00 Apr 20, 2009|Old Posts|

In Flash CS3 or previous version, it is the worst job if you want to do character animation inside flash. I prefer to  use 3 rd party software such as ToonBoom to do the animation first and then import it in to flash.

But in CS4, there included a new nice tool for doing character animation. This is called bone tool. You can create IK bone which help on doing character animation.

In this tutorial, i will introduce how to use the bone tool.

I diveded it into 3 parts.

Part 1, you will learn how to add bone to a character.

Part 2, you will learn how to optimize the character and bone use for animation.

Part 3, you will learn how to animation the character with the bone tool and keyframe.

Quick link here.

Flash CS4 Animation with Bone Part 1
Flash CS4 Animation with Bone Part 2
Flash CS4 Animation with Bone Part 3

Part 1 – Adding bone to character with bone tool.
_______________________________________________________________________________

Stpe 1. Prepare the character.

Create a Character with your favour vector editing tool such as Illustrator or simply using flash. I have created a simple character in flash.

fig1

Here are some best practise tips you may need to bear in mind.

  • Closed stroke and fill– your graphics should always have closed stroke. When tweening in between poses, cloased stroke made best result.
  • Simplfy shape – your graphic should have a simple stroke. Optimize your shape and remove unnecessary knot.
  • Simple colour – Your graphics should have a simple colour for easy tweening.
  • Symmetry Pose shape – Draw your character in symmerty pose shape. The pose shape should have the arm and leg easy to set pose.

Step 2. (Optional) Importing artwork to Flash.

When you draw your graphics in other program such as illustrator. You need to import the graphics into Flash. You may need to clear up the graphics if needed.

You can get more info here for importing your graphics.

Using imported artwork

Step 3. Add bone to the shape.

In order to animate your charater, you need to add bone to your graphics. You can select bone tool in the toolbar.

Bone Tool – Adding bone to shape or object.

fig2

Bind Tool – Conntect the shape or object to the bone.

fig3

Create main bone on the body.

Select the bone tool. Click on the position under the head and drag to near the hip of the character to create a bone. Here i use one bone for the whole body. You can add more bones if you have complex animation on the body.

fig4

Create the shoulder bone.

Move the mouse to the join of the main bone under the head. Drag and create the left shoulder bone parallel to the shoulder. The end of the bone should near the middle area of the joint between body and arm. Repeat for the right shoulder.

fig5

Create the hip bone.

Move the mouse to the join of the main bone under the head. Drag and create the left shoulder bone parallel to the shoulder. The end of the bone should near the middle area of the joint between body and arm. Repeat for the right shoulder.

fig6

Create the head and neck bone.

Drag from the joint under the head and create a small neck bone. Then, drag from the end ofthe neck bone and create a bigger bone use for head. The head bone will connect to the head later to control the movement of the head. So, it is better to have a bigger head bone in order to control all the point in the head.

fig7

Create the arm bone.

Start from the end-joint of the left shoulder bone. Drag and create 3 bone along the left arm. 1-Shoulder to knot. 2-knot to hand. 3-hand. Repeat for the right arm.

fig8

Create the leg bone.

Start from the end-joint of the left hip bone. Drag and create 3 bone along the left leg. 1-hip bone to knot. 2-knot to foot. 3-foot.

fig9

The bone will looked show below.

fig10

Part 2, you will learn how to optimize the character and bone use for animation.

About the Author:

Carlos Pinho
A father, a husband and a geek... Carlos was the founder of projects like The Tech Labs and Flash Enabled Blog. He is the founder of TekTuts He is passionate about technologies. Their main skills are in analytics, transport & logistics, business administration. He also writes about programming resources, trends, strategy and web development.