Flash CS4 Character Animation with Bone Part 2
by WaiLam, April 26th, 2009
  • Share
  • Share

In previous tutorial, i have teach you how to add bone to a character. But, if you test by moving the bone, the character look wired. So, we need to optimize the bone in order to have best result when doing animation.

Part 2 – Optimizing the character and bones use for animation.

Step 1. Optimize body bone

The body bone is use to hold the body shape and it is the root of all bone. When we need to move the position of the character, we can move this bone. To adjust the shape affected by the body bone. We need to use the binding tool. Press and hold on the bone tool icon in the toolbar, the binding tool icon will appear. Select it.

cs4_fig2" src="http://flashenabledblog.com/wp-content/uploads/cs4_fig2.jpg" alt="cs4_fig2" width="681" height="68" />

Select the body bone and the knot affected by this bone will be highlighted with yellow color.

cs4_fig3

Press on the knot and drag on the bone and connect the knot and bone. To remove control points from the bone, Ctrl-click (Windows) or Option-click (Macintosh) a control point that is highlighted in yellow.

cs4_fig4

Connect the knot and the body bone like show below.

cs4_fig5

Step 2. Optimize hip and shoulder bone

Shoulder bone is use to connect the arm and hip bone is use to connect the leg and the body. In this character, these bone only use for connection and they will not affect the shape. So, we need to fix the position and rotation of these bones.

First, we disable all the connection from these bone to the shape. Select binding tool and click on the left shoulder bone. You can see some knot of the shape are highlighted. To remove control points from the bone, Ctrl-click (Windows) or Option-click (Macintosh) a control point that is highlighted in yellow. Repeat for right shoulder and the hip bones.

cs4_fig6

Second, we need to disable the rotation of the bone. Use the select tool to select the shoulder bone. Then you will see the option panel for joint:rotation. click on the “enable” check box to disable it.

cs4_fig7

Repeat for the right should and two hip bone.

Step 2. Optimize head and neck bone

The head and neck bone is use to control the movement of head. To have a better result, i have to limit the movement of the neck and head bone.

Select the neck bone. From the properties panel. Set the rotation constriant to -15 to +15 degree.

cs4_fig8

Then, only connect knots near the neck area.

cs4_fig9

Select the head bone. From the properties panel. Set the rotation constriant to -20 to +20 degree.

cs4_fig10

Then connect the rest of the knots in head area to the head bone.

cs4_fig11

Now, you can test the head movement. Use the select tool and select the head bone. Drag and move the bone and you can see the head move with the bone.

cs4_fig12

Step 3. Optimize arm and bone

Now, for the arms. First, we need to set the connection for each bone. Start from right arm, select upper arm bone. Use the binding tool to set the knot connection near the bone like the figure show below.

cs4_fig13

Select lower arm bone. Use the binding tool to connect the knot to arm bone like the figure show below.

cs4_fig14

Select hand bone. Use the binding tool to connect all knot from the hand to the bone.

cs4_fig15

Now, we set the rotation constraint for each bone.We limit the ratation of the upper arm from -10 to +70 degree. This will make sure the arm will not collapse with the body and head.

cs4_fig16

Then we limit the rotaiton of the lower arm from -80 to +0 degree.This make the arm move more nature.

cs4_fig17

Now, we test the movement of arm. The arm look strange when i move the bone.

cs4_fig18

We need a further tweak on the shape. First, we add one more point on the arm. Use the add anchor tool (Key “+”) click on the arm and add a point. Move the point and make the shape like this. You can also delete some unusual point by using the remove anchor tool (Key “-”).

cs4_fig19

Then, we reconnect some point to the bones.

cs4_fig20
cs4_fig21

Now, the arm look better.

cs4_fig22

Repeat the steps with the left arm.

Step 4. Optimize leg and bone

Now, for the legs, similar to the arm. We also need to connect the shape to the bone and limit the rotation of the bone.

Select the upper leg bone. Use the binding tool to connect the upper area shape to the bone.

cs4_fig23

Select the lower leg bone and connect the lower leg shape.

cs4_fig24

Last, select the foot bone and connect the foot shape.

cs4_fig25

Now, we set the rotation constraint for each bone.We limit the ratation of the upper leg from -45 to +25 degree.

cs4_fig26

Then we limit the rotation of the lower leg from 0 to +45 degree.

cs4_fig27

Limit the rotation of foot from 0 to +45 degree.

cs4_fig28

Now, you can test moving the bone. You can see the shape move with the bone like a skin of the bone. If the shape not moving correctly. You can adjust the connection between bones and knot.

cs4_fig29

cs4_fig30

In next tutorial, you will learn how to animate this character.animation-with-bone-part-2/">
Flash CS4 Animation with Bone Part 3

Tags: , ,

Copy and Paste the code below
Email and IM
Websites
Forums
Get This

9 Responses to “Flash CS4 Character Animation with Bone Part 2”

  1. Flash - Character Animation | massiveProCreation Blog Says:

    [...] Flash Enabled has released the second part of ‘Flash CS4 character animation with bone tool‘ also there is new tutorial on flashTuts about animating the robot walkcycle. If you are [...]

  2. Flash Enabled Blog - Everything Flash » Blog Archive Flash CS4 Animation with Bone Part 3 « Says:

    [...] Posts TutorialsAdobe Flash TutorialsFlash CS4 Character Animation with Bone Part 2AS3 Mouse Events and Mouse Related User ActionsPapervision 3D Tutorials (with [...]

  3. Flash Enabled Blog - Everything Flash » Blog Archive Flash CS4 Character Animation with Bone Part 1 « Says:

    [...] Posts TutorialsAdobe Flash TutorialsFlash CS4 Character Animation with Bone Part 2AS3 Mouse Events and Mouse Related User ActionsPapervision 3D Tutorials (with [...]

  4. Flash CS4 Character Animation with Bone Part 1 « D-sign Says:

    [...] Part 2, you will learn how to optimize the character and bone use for animation. Tags: flash [...]

  5. Flash CS4 Character Animation with Bone Part 2 « D-sign Says:

    [...] next tutorial, you will learn how to animate this character. Flash CS4 Animation with Bone Part 3 Tags: flash, [...]

  6. Flash CS4 Character Animation with Bone Part 3 « D-sign Says:

    [...] CS4 Animation with Bone Part 1 Flash CS4 Animation with Bone Part 2 Flash CS4 Animation with Bone Part 3 Tags: animation, [...]

  7. lechatnoir Says:

    Interesting, but that’s too much of hassle for something that will not look really crisp. I still think vectors look way better then the fully texturized stuff people insist on using with the papervision.
    I hope Flash CS5 will support FBX files from either maya or motion builder complete with animated layers so we can have a better control within maya. Now THAT would be a revolution . Until then we have to complete the 3d animation with other package then import then back into flash.

  8. Suvarna Says:

    I hope Flash CS5 will support FBX files from either maya or motion builder complete with animated layers so we can have a better control within maya. Now THAT would be a revolution . Until then we have to complete the 3d animation with other package then import then back into flash.

  9. web development ontario Says:

    nice work done. THAT would be a revolution . Until then we have to complete the 3d animation with other package then import then back into flash.

Let leave a Comments for this post.