Character animation with the Bone tool in Flash. Adobe Flash CS4 Professional includes a new Bone tool that enables you to link symbols together quickly and easily in a parent/child relationship commonly referred to as inverse kinematics.
If you need to view or modify control points on line segments or curves, Flash offers the Subselection tool, activated with the keyboard shortcut A.
The entire bone structure is also referred to as an armature. You can apply a armature to a series of movie clip symbols or to a raw vector shape that can then be manipulated across time by dragging the armature to a new pose.
This article examines how to create a basic bone structure using symbols and shapes, and then apply these techniques to make a cartoon character walk across a scene. You can use the Bone tool to create an armature using movie clip symbols or an armature within a vector shape. Let's start by building a basic armature using Symbols: Create a new Flash document and make sure to select Action. Script 3. 0. The Bone tool will only work with AS 3.
Http:// Today we cover the differences between the Selection and Subselection tools in Adobe Flash. Want to stay up to date.
Figure 1). For this example, I kept it simple and used the Rectangle tool to create a basic shape. Flash will duplicate the instance every time you click and drag it. Repeat this procedure a few more times to create multiple instances of the same symbol (see Figure 2). Link all of these objects together to create your armature. Select the Bone tool (X) from the Tools panel (see Figure 3). Decide what will be your parent or root symbol instance in the armature.
Subselection Tool to Change Image Shape: The above video teaches you how to select and change the shape using the 'Sub-selection Tool'. Using the Primitive tools (Smart Shapes) in Flash in this free tutorial from American Graphics Institute. This Flash tutorial shows you how to use the Selection Tool to modify shapes and lines, and shows you how to use the Subselection Tool to adjust anchor points on a shape. Flash - Sub-Selection Tool JJ at CCBC. Subscribe Subscribed Unsubscribe 16 16. Adobe Flash - Subselection tool and free transform tool - Duration: 7:17.
This is the symbol instance to which you will apply the first bone segment. Then drag to the next symbol instance to link them together. When you release the mouse, a solid bone segment will appear between the symbol instances (see Figure 4). Repeat this procedure to link the second symbol instance to the third instance. Continue dragging from one symbol to the next until you have linked all symbol instances with bones (see Figure 5). The next step is the fun part. Select the Selection tool from the Tools panel (V) and drag the last bone in your chain.
The entire armature can now be manipulated in real time as you drag the last bone around the Stage (see Figure 6). It's easy to animate your armature by increasing the amount of frames of the IK span by clicking and dragging its edge to the desired frame number (see Figure 7). With the frame indicator on a new frame number, drag your armature to a new position. Flash will insert a keyframe in the current frame number and interpolate the motion within the IK span.
You've just animated a simple armature using the Bone tool in Flash. This is an exciting way to animate shapes like never before in Flash. I use this technique often to produce tail- waving animations for animal characters. Let's start with a rectangle that's very tall and thin. You could even taper the top end of it using the Subselection tool (A) to simulate the end of a tail (see Figure 8).
Select the Bone tool (X). Flash will convert the shape to an IK shape object as soon as the first bone is drawn inside of it. Continue creating bones moving upward, one after the other, so that they connect with one another from head to tail. I recommend that each bone gradually decrease in length so that articulation gradually increases towards the tip of the tail. This will allow for anatomically realistic motion.
When you are done adding bones to the tail, it should look something like Figure 1. Using the Selection tool (V), drag the last bone at the top of the chain (at the very tip of the tail). Insert additional frames in your IK span by clicking a frame number further down the Timeline and then pressing F5 (Insert Keyframes), or drag the right edge of the IK span to the right. What you want to achieve is a seamless looping animation. This requires the first and last frames to be identical. This will insert a keyframe at the end of the IK span that contains the identical armature pose (see Figure 1. Position the frame indicator on a frame in the middle of your IK span at the halfway point and manipulate the armature into a new position similar to the one in Figure 1.
To add realism to the tail wave, add a secondary motion to the tail. Because the tail's movement is initiated by the root bone, the end of the tail will have a delayed reaction to the root bone's movements. To animate this, position the frame indicator a few frames after the initial pose in frame 1 and manipulate the armature so that the end of the tail is curved in the direction opposite that of the root bone (see Figure 1. Don't forget to add a secondary motion just after the pose at the midway point in the IK span (see Figure 1.
Play back the animation and you will see the tail has much more articulation and feels more natural due to the secondary poses that you added. Now take it another step further by adding some easing in and easing out. In the Properties panel, select the type of easing using the Ease pop- up menu. The character I have designed for this example is a rather sullen- looking monkey. All of his body parts have been separated into symbols on different layers (see Figure 1.
Tip: Set your Flash document to Action. Script 3 and 2. 4fps. The next step is to determine how to apply your armature.
But I have found this to be not the best way, because it can make for a very complicated armature and therefore difficult to manipulate. I prefer to create smaller individual armatures limited to just the arms and the legs. Animating the legs The leg itself is made up of three individual symbols (see Figure 1. The idea here is to place all of these leg symbols inside a single Graphic symbol: Select all three symbols and press F8 (Convert to Symbol) and name it leg. Double- click this symbol to edit it.
Your completed armature should consist of only two bones and look something like Figure 1. The next step is to constrain the joint rotation of each bone. The Properties panel will update and provide pop- up menus for Joint: Rotation and X/Y Translation options.
The speed affects how the bone feels when manipulating it. A lower numerical value adds more weight to the bone, making it seem sluggish compared to a bone with a higher numerical value. I like to lower the value of the root bone a little bit because it provides a more natural feel to the entire armature (see Figure 2. Since three objects require only two bones, the last object in the chain is more difficult to control because it lacks a dedicated bone to which to apply its constraints. A home- grown technique that solves this problem involves adding an extra object to allow for an extra bone in the armature. The object itself can be anything, because ultimately it will not be included in the published SWF file.
I prefer to use a small red circle drawn with the Oval tool (O) (see Figure 2. Flash does not allow objects to be added to an IK pose layer.
Create a new layer for the new object to reside in temporarily. Flash CS4 will automatically move the object to the armature layer, where it will become part of the linked chain of bones (see Figure 2. Now you're ready to start animating the walk cycle. To help align the foot along a horizontal plane, choose View > Rulers to turn on rulers for the document, and then drag from the top ruler down across the Stage to create a horizontal guide. Position the guide directly along the bottom edge of the shoe. This guide will help align the walk cycle along a perfectly horizontal plane.
Don't forget to choose View > Guides > Lock Guides to prevent the guide from being accidently moved during the animation process. I prefer to start the animation with the leg in its most forward position, and then animate it sliding backward.
Insert about 1. 5 frames and position the frame indicator at about the midway point—in this case, frame 8. Drag the sneaker to the right along the horizontal guide and make sure its bottom edge is aligned perfectly with the guide. Make it a habit to play back your animation frequently. Doing so will, at this early stage, reveal a problem with the leg animation.
The foot travels in an arc, which it should, because the armature is currently not moving along its x or y axis. This is causing the shoe to move below the horizontal guide (see Figure 2.
The fix for this is to position the frame indicator on each frame, select the shoe symbol, and use the arrow keys to nudge the shoe until its bottom edge is aligned with the guide. Double- click it, and then right- click over the layer containing the object and convert it to a guide layer. This will prevent the object from being included in the published file (see Figure 2. Your finished leg animation should look similar to Figure 2. Figure 2. 7. Completed leg animation (mouse over the button to play)Since the leg animation is nested inside a symbol, it is easy to copy and paste it to be used as your second leg.
There's no need to animate the leg again, which will save you lots of time. Just copy the leg symbol paste it to a new layer below the pelvis layer. You can even adjust the brightness a little to push the second leg back even further.
Select the instance and, in the Properties panel, select Brightness from the Color Effect drop- down menu, and adjust the slider to a negative value to darken it slightly. While you are in the Properties panel, you will want to make sure the second leg begins looping on a different frame to avoid animating in parallel with each other. You'll want the leg to start about midway into the animation, so type 8 in the frame field in the Looping pop- up menu (see Figure 2.
Make sure the copied leg is a few pixels higher then the original leg to suggest space between them. You may also want to move the back leg a few pixels along the x axis to suggest more of a three- fourths view of the body (see Figure 2.
Animating the arms The next step is to apply an armature to the character's arms.