|
A Little Experiment:
To understand real implementation of flash cs4 bone system and use of inverse kinematics, let's do a quick experiment. Raise your hand in front of you straight, with your palm facing the sky. Now touch your shoulder with fingers of same hand.
What has happened is, two bones of your arm, one from shoulder till elbow, and other from elbow till your hand have moved, bending at elbow joint, thus enabling you to touch your shoulder.
Creating Bone Structure:
We will mimic the same bone structure in this tutorial using the bone tool, and see how flash will automatically constraint our drawing’s movements to comply with human arm like motions only.
Fig. 1 - Human arm’s vector graphic that needs to be animated
Above image shows a vector graphic of human arm which we will use to learn working of bone tool in flash.
Pick Selection Tool (Arrow Tool) and drag select (by making a box around) the whole arm drawing just to make sure everything is selected including outlines and shadows.
Note: Make sure everything you need to animate with bone tool is on a single layer.
Fig. 2 - Everything on layer is selected using arrow tool
Now select Bone tool from Tools panel or simply press X on your keyboard. Mouse pointer will change to a small plus sign and black bone along with it.
Fig. 3 - Bone tool in tools panel
With bone tool selected, click on the arm, where shoulder bone should start and drag it till elbow, exactly where elbow joint should be, and release it there.
Fig. 4 - First bone of arm created using bone tool
With this bone created, you will notice some adjustments made by flash automatically, let's inspect them in detail.
First change is that our original vector graphic is automatically grouped by flash. This happens because when we created our first bone on original layer, flash recognized it as a new bone structure, thus grouped all the vector shapes on that particular layer, into a symbol and created our first bone, shown in gray color in above figure.
Tip: Bones are displayed in their default layer color, you can change bone color by editing layer properties in timeline
Second change is that, flash moved newly created hand symbol to a new layer and labeled it Armature_1. Armature layers are animation layers created by flash automatically when new bone structure is started. Armature layers are indicated in Timeline with a running boy icon.
Fig. 5 - Armature animation layer created by flash for new bone structure
Now let’s create second bone. With bone tool selected when you will hover your mouse over elbow joint, where we dropped the bone in previous step, mouse pointer will change to white plus sign and white bone along with it. This shows we can continue our bone structure from this joint.
Click on elbow joint of first bone, drag your mouse till wrist and drop it there. Second bone is created starting from elbow till wrist, and it is connected with first bone at elbow.
Fig. 6 - Second bone of arm created using bone tool
Animating Bone Structure
With our simple bone structure in place, we will now see the real magic of inverse kinematics using bones.
In timeline panel, click on frame 15 of Armature_1 layer. Right click and select Insert Pose from frame context menu.
Note: Insert Pose menu option will only appear for armature animation layers.
Flash will insert a pose, or keyframe you may say, for our armature animation layer and it will also create all the intermediate frames to save us time of creating animation frame by frame.
While time indicator is still on frame 15, pick Selection Tool, click anywhere on arm symbol and bring mouse pointer over second bone. You’ll notice mouse pointer changes to a bone selection tool, by indicating a black arrow along with black bone.
Now click on second bone. You’ll notice black circle around elbow joint gets highlighted, which indicates currently this bone is selected.
Bone Properties Panel
At this point let’s examine the bone properties panel. If not already open, select Window > Properties to open properties panel. When a bone is selected on stage, properties panel will show that particular bone’s properties.
Bone properties are grouped into four categories, Location, Joint: Rotation, Joint: X Translation and Joint: Y Translation.
With these properties you can control the speed of a particular bone with respect to whole bone structure, you can completely disable a joint’s rotation, or even set a restricted rotation. For example in our case you can restrict elbow joint not to move backwards, because in realty too, your hand cannot touch elbow of same arm.
Continue Animating Bone Structure
Ok let’s get back to animating our armature. On frame 15, with selection tool, click on second bone if not already selected.
Click and drag second bone, and play around with it, you’ll notice first bone also moves along with it, but in more natural way. That’s the magic of inverse kinematics using bones tool.
Fig. 7 - Creating second pose for arm
Now let’s test our movie, select Control > Test Movie. You’ll see arm animating from its start position to second pose in a natural way using articulated structure of bones.
Exercises:
- Extend existing animation to move arm further backwards, do you notice any overlap or scrambling in arm symbol?
- Extend this bone structure to create bones for fingers as well.
- Disable a joint’s Rotation from bone properties panel. What change you notice in bone on the stage? How is it indicated that this joint cannot rotate in flash.
- Apply constraint on existing animation, so that arm cannot be rotated backwards at elbow joint.
- Disable joint rotation of shoulder joint, can you move first bone? Can you move second bone now?
|
