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

Flash CS4 Character Animation with Bone Part 3

Carlos Pinho
By | 2009-04-30T05:38:55+00:00 Apr 30, 2009|Old Posts|

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.

ca4_fig2

I have set the standing pose like below.

ca3_fig3

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.

ca4_fig4

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.

ca4_fig5

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

ca4_fig6

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

ca4_fig7

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

ca4_fig8

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

ca4_fig9

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.

ca4_fig10

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

ca4_fig11

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

ca4_fig12

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

ca4_fig13

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.

ca4_fig14

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

ca4_fig15

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

ca4_fig14

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.

ca3_fig31

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

ca3_fig32

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

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.