In previous tutorial, i have teach you how to add bone to a character and optimize the bone. Now, We go to the last step to animate the character by the bones. In this tutorial, you learn how to animate the character by moving the bones. I will do a simple dancing animation.
Part 2 – Animate the character by bones.
Step 1. Set the start pose and end pose
First, we need to set the start pose and end pose. My animation will start at a standing pose and end with the same pose. Remember to backup your fla first.
Using the select tool press and drag on the bone. You can set the pose of the character.

I have set the standing pose like below.

Because we need to have the same pose at the end, we create a new key frame at 150 frame. Scroll to see the 150 frame and click on it to highlight. Press F6 to create a new key frame. Now, you have 2 key frame at frame 1 and frame 150.

Step 2. Set the leg pose
Now, i am going to set the pose in each key frame. I drag the foot bone to set the pose. You will see the leg is move like a chain when moving the foot bone.
At frame 15, create a new key frame. Set the pose of leg like below.

At frame 30, create a new key frame. Set the pose of leg like below.

At frame 45, create a new key frame. Set the pose of leg like below.

At frame 60, create a new key frame. Set the pose of leg like below.

At frame 90, create a new key frame. Set the pose of leg like below.

Step 3. Set the arm pose
Following the legs, i will work on the arm. Similar to the leg, i drag on the hand tool to move the arm.
At frame 30, create a new key frame. Set the pose of arm like below.

At frame 40, create a new key frame. Set the pose of arm like below.

At frame 55, create a new key frame. Set the pose of arm like below.

At frame 70, create a new key frame. Set the pose of arm like below.

Step 4. Set the head pose
Now, i going to set the pose of the head. I can drag the head bone to move the head. You will see the head movement is limited when move the bone.
At frame 23, create a new key frame. Set the pose of head like below.

At frame 37, create a new key frame. Set the pose of head like below.

At frame 47, create a new key frame. Set the pose of head like below.

Now you can test the animation.
Step 3. Add easing effect to the animation.
Some of the animation may not look nature. Since they are always move in the same speed. But flash allow you to add easing function between each pose.
To add easing function to the animation. Click on the time line, between two key frame. The, you will see the panel to add the easing effect.

In the panel, you can set the strength of the easing effect and the type of easing effect.

Conclusion
The bone tool is a very good feature. But after using the tool, i think it have a lot of space for improvement on the tool. For example, the bone tool did not support individual time line for each bone. This lead to a problem if you have a complex animation. Also, it leak of control for tweaking the bone’s affected area and strength on the shape. Hope these will be improved in next version.
After the tutorial
In this series of tutorial, you have learn how to animate a character with bone. This is not the only way to animate a character with bone. Beside using a single shape character. You can also link the bone to different move clip to do bone animation. Bone tool also support a interesting function, it can allow user to interact with the animated body in real time. That mean, you can interact with it when it is published as a swf. Hope i can have a tutorial later for these functions.
Flash CS4 Animation with Bone Part 1
Flash CS4 Animation with Bone Part 2
Flash CS4 Animation with Bone Part 3
| Copy and Paste the code below | |
| Email and IM | |
| Websites | |
| Forums | |
follow:
April 30th, 2009 at 5:45 am
[...] Flash CS4 Animation with Bone Part 1 Flash CS4 Animation with Bone Part 2 Flash CS4 Animation with Bone Part 3 [...]
April 30th, 2009 at 6:34 am
[...] next tutorial, you will learn how to animate this character. Flash CS4 Animation with Bone Part 3 Tags: flash, [...]
April 30th, 2009 at 6:36 am
[...] CS4 Animation with Bone Part 1 Flash CS4 Animation with Bone Part 2 Flash CS4 Animation with Bone Part 3 Tags: animation, [...]
May 24th, 2009 at 2:42 pm
Thank You! Sir!
A very fine Tutorial !
Appoothy