Flash CS4 introduces the Bone tool for creating inverse kinematic (IK) animations. If you are not familiar with IK animations, to summarize it broadly, it is a way of creating animations that simulate moving limbs or joints where interactions between various connected components is needed.
In this tutorial, I will explain how to create these IK animations by creating joints on a single, solid shape. You can see an example of this in the following animation where I simulate blades of grass (probably from another planet!) moving:
You will create something very similar to this in this tutorial, so let's get started. Go ahead and launch Flash CS4, and create a new file.
Drawing a Blade of Grass
What we want to do is draw out this weird curly blade of grass. There are several ways you can do this. For me, the easiest way is to draw a closed shape of the grass blade using my pencil tool and then filling it in with a solid color.
To do this, first select your Pencil Tool from your Tools panel located on the right-hand side of your window:
I am going to go with a slightly faded green color:
Ok, in this page we made a great deal of progress by getting this weird shape drawn. In the next part, let's actually look at setting the joints and creating the IK animation.
In the previous part, you created the shape that, in this page, you will be adding joints to and animating. Let's dive right in!
Setting up the Bones
Now that your shape is done, let's divide our shape into individual components that can be independently adjusted using the Bone tool. With your shape selected, select the Bone tool from the Tools panel:
As can guess what the next step is, keep creating these joints and hugging the contours of your shape until you hit the end of the road:
Creating the IK Animation
With your bones set, it is time to create the IK animation. In your timeline, you will see a layer called Armature created for you:
Select your shape again if it has lost focus. Now, click on any of the joint endings and move them around with your mouse cursor:
Once you have gotten your shape in just the right pose that you want, hit Enter to see the preview on the design surface, or press Ctrl + Enter to see how it looks in the Flash player!
Conclusion
You are done with this tutorial. As you can see, the IK animation functionality in Flash CS4 allows you to create certain types of animations that you couldn't do easily before. If you are curious to see how my animation on the first page of this tutorial was created, download the Flash CS4 source file from the following location:
Be sure to double click on the blade of grass to see the IK animation and pose inside the movie clip, for I didn't create them on the main timeline like I showed in this tutorial.
In this tutorial, I will explain how to create these IK animations by creating joints on a single, solid shape. You can see an example of this in the following animation where I simulate blades of grass (probably from another planet!) moving:
You will create something very similar to this in this tutorial, so let's get started. Go ahead and launch Flash CS4, and create a new file.
Drawing a Blade of Grass
What we want to do is draw out this weird curly blade of grass. There are several ways you can do this. For me, the easiest way is to draw a closed shape of the grass blade using my pencil tool and then filling it in with a solid color.
To do this, first select your Pencil Tool from your Tools panel located on the right-hand side of your window:
[ select the Pencil tool to draw your shape ]
Once you have selected your Pencil Tool, set your Pencil Mode to Smooth. You can find the Pencil Mode menu at the very bottom of your Tools panel:
[ setting the Pencil Mode to smooth will make your lines seem more fluid ]
Once you have set your pencil mode to Smooth, it is time to start drawing your shape's outline. There isn't an easy way to describe how to do this, but just imagine there is a stencil / cut-out of this blade of grass and you are following the outline of it:
[ pretend you are tracing a solid shape by using the pencil tool ]
Do make sure that the shape you have drawn is fully closed. If there are any open regions or gaps, then you will unable to give your shape a fill color. Speaking of which, use your Paint Bucket tool to give your blade of grass a different fill color.I am going to go with a slightly faded green color:
[ give your shape a fill color ]
Once you have done this, let's remove the outline from this shape. Make sure your Selection Tool is active from your Tools panel, and with your mouse cursor, try to double-click over the outline of your shape. Once you do that, you will find your entire shape's outline selected:
[ double click on the outline to select it for deletion ]
With your shape's outline selected, hit the Delete key to remove the outline. In the end, all you should see is your shape.Ok, in this page we made a great deal of progress by getting this weird shape drawn. In the next part, let's actually look at setting the joints and creating the IK animation.
In the previous part, you created the shape that, in this page, you will be adding joints to and animating. Let's dive right in!
Setting up the Bones
Now that your shape is done, let's divide our shape into individual components that can be independently adjusted using the Bone tool. With your shape selected, select the Bone tool from the Tools panel:
[ the Bone tool is the one with the icon of a bone! ]
Once you selected your Bones tool, click on the base of your shape and start moving your mouse up to create the first segment of your joint:
[ click at the base of your shape and start moving up the outline ]
Once you have dragged your mouse up a few pixels, release your mouse to set the first joint:
[ releasing the drag will create a bone segment ]
This is only the first joint, and you will need more. Click on the tip of the joint you just created and begin drawing another joint:
[ draw another joint by starting your new joint from where the old one ended ]
Just like before, release your mouse after you have drawn a joint an appropriately sized bone segment.As can guess what the next step is, keep creating these joints and hugging the contours of your shape until you hit the end of the road:
[ that is a lot of joints for a blade of grass! ]
This will take a minute or two, but it isn't particularly difficult. If you find yourself unable to get the joint to map with the curves in your shape just right, zooming in or turning snapping off (View | Snapping) can help.Creating the IK Animation
With your bones set, it is time to create the IK animation. In your timeline, you will see a layer called Armature created for you:
[ when you use the bone tool on the shape, the Armature layer is created for you ]
On this layer, right click on Frame 120, and select the Insert Pose menu item. Once you have done that, a keyframe will be inserted for you at Frame 120 with a green background color filling up all frames between 1 and 120 in the Armature Layer:
[ insert a Pose keyframe on Frame 120 ]
Let us insert another Pose - this time at around Frame 60. Just like before, right click on frame 60 in your Armature layer, and select the Insert Pose menu item. After a few seconds, your Pose will be inserted there as well:
[ insert another Pose keyframe at Frame 60 ]
With your playhead on Frame 60, it is time to move some of the joints around. Click on the Selection Tool to get your mouse cursor back and to go out of Bones mode.Select your shape again if it has lost focus. Now, click on any of the joint endings and move them around with your mouse cursor:
[ drag the points whose connected segments you want to move ]
Getting the right pose you want is a bit of an art, and with a shape containing as many joints as this, you may find the lag between your mouse movement and your shape actually updating to be quite noticeable. With some trial and error (and Undo), getting what you want should be straightforward.Once you have gotten your shape in just the right pose that you want, hit Enter to see the preview on the design surface, or press Ctrl + Enter to see how it looks in the Flash player!
Conclusion
You are done with this tutorial. As you can see, the IK animation functionality in Flash CS4 allows you to create certain types of animations that you couldn't do easily before. If you are curious to see how my animation on the first page of this tutorial was created, download the Flash CS4 source file from the following location:
|
No comments:
Post a Comment