Exploring the Spring tool in Flash Professional CS5

Adobe Flash Professional CS5 introduces a new tool called Spring that, when applied to an inverse kinematics (IK) armature, automates the effect of a spring-like motion. You can apply Spring to an entire IK armature or to the individual bones within an armature. You can also vary the amount of spring each bone has, as well as add damping to control the amount of decay.

This article examines how to apply spring to various IK armature examples to quickly create animations that would be difficult and time-consuming to create manually.

To use the Spring tool you need to first create an armature. Spring can only be applied to the bones within an IK armature created with the Bone tool. The first example uses five instances of a symbol linked together using an IK armature (see Figure 1).

Note: For more details on the Bone tool in Flash, please see my article, Character animation with the Bone tool in Flash.

Follow these steps to animate the simple armature:

1. After downloading and unzipping the sample files for this tutorial, open spring_basic_1.fla in Flash Professional CS5.
2. Lengthen the IK span by inserting about 100 frames. Click on Frame 100 in the armature layer and press the F5 key to insert the frames.
3. Position the frame indicator on Frame 10 (see Figure 2).

4. Using the Selection tool (V), grab the last bone in the armature and drag it straight down so that the armature is now angled approximately 90 degrees from its original position (see Figure 3).

5. Now it's time to turn on Spring. Select the entire armature by double-clicking one of the bones.
6. In the Properties panel, locate the new section named Spring. There you can adjust the strength of each bone using a hot text slider (see Figure 4).

7. Adjust the value of the Spring strength from the default of 0 to 100 by sliding the hot text slider to the right or selecting the value and typing in 100. Since all the bones in the armature are selected, the same strength value is applied to all of them.
8. Play the animation to see how the armature reacts to the Spring tool (see Figure 5).

Figure 5. Spring tool in action (mouse over the button to play)

So what does strength actually mean when it is applied to a bone or to an entire armature? Simply put, strength is the amount of rigidity the bone can have. The more strength applied to a bone, the more rigid the bone will be. The less strength applied to a bone, the more flexible that bone will be.

Play the animation to see the difference between spring strengths (see Figure 6). For reference:

• A strength value of 0 applies no spring effect to the bone
• A strength value of 1 provides the most flexibility to the bone
• A strength value of 100 decreases the bone's flexibility

Figure 6. How varying spring strengths affect the animation (mouse over the buttons to play)

For a more advanced spring effect, you can give each bone in an armature a different strength value. For this example I have designed an appropriate graphic for the occasion: a coil spring. The coil spring is made up of several instances of a single symbol (see Figure 7).

Setting up the coil spring with individual symbol instances allows for optimal articulation when an IK armature is added:

1. Open spring_coils.fla in Flash Professional CS5.
2. Starting with the bottom symbol, select the Bone tool (M) and apply a bone segment from the right end to the left end of the symbol instance.
3. Repeat this procedure for all subsequent bones until you reach the last symbol at the top (see Figure 8).

To get Spring to work you have to add some animation to the IK armature:

1. As you did in the previous spring example, position the frame indicator on Frame 10 (you can choose a different frame if you'd like but I prefer to start with Frame 10 and then adjust later if necessary).
2. Using the Selection tool, position the armature into a compressed position (see Figure 9). The easiest way to do this is to move the second bone from the bottom first, then work your way up the chain until you reach the last bone.

3. Double-click one of the bones to select them all.
4. Using the Properties panel add a strength value of 100.
5. Play the three animations in Figure 10 to see the effect of Spring strength at its highest numerical value on every bone.

Figure 10. Coil springs with different bone strength settings (mouse over the buttons to play)

For a different effect, you can adjust the amount of spring for each bone individually. Remember, lower Spring strength values give more flexibility to the bone; higher numerical values yield less flexibility.

As you may already know, the Bone tool supports armatures within vector shapes. This means you can apply Spring to these bones as well, providing flexibility to shapes that was otherwise difficult, if not impossible to achieve in previous versions of Flash.

1. Open spring_shape_1.fla.
2. Start with a simple shape drawn with the Rectangle (R) tool (see Figure 11).

3. Moving from left to right, apply an IK armature using the Bone (M) tool (see Figure 12). Note the parent bone is the one on the far left indicated by the green circle.

4. Lengthen the IK span by inserting about 100 frames.
5. Position the frame indicator at Frame 5.
6. Using the Selection tool drag the last child bone (far right) down until the armature is vertical (see Figure 13).

7. Double-click one of the bones to select the entire armature.
8. In the Properties panel expand the Spring section and adjust the Strength to 100. Flash Professional CS5 will apply the new Spring strength to the armature.
9. Play the animation to see the effect (see Figure 14).

Figure 14. Example of an armature with springiness applied uniformly (mouse over the button to play)

Applying an IK armature to shapes with Spring provides almost limitless animation possibilities. In the previous example the entire armature was given a Spring strength value of 100. Of course, you don't have to use the Spring strength throughout the entire armature. If you select each bone individually, you can vary the strength based on how much flexibility you want per bone. Simply select each bone and adjust the amount of Spring individually. I prefer to limit the amount of spring at the root bone (the first bone in the armature) while increasing the amount of spring towards the last child bone in the armature. For example, I assigned a strength of 100 to the first bone, 80 to the second, 50 to the third, 40 to the fourth, 30 to the fifth, and 10 to the sixth (see Figure 15).

Play the animation to see the effect (see Figure 16).

Figure 16. Example of an armature with springiness applied separately to each bone (mouse over the button to play)

Here is one of the most valuable tips I can provide: Once you have created an armature and animated it (with or without the Spring tool), select the IK span in the Timeline and convert it to a symbol (see Figure 17).

This provides an easy way to transform the entire armature on the Stage. This means you can easily scale, rotate, skew, and apply color effects without disrupting the armature itself.

The elephant example (elephant.fla) shows how converting the trunk armature to a symbol allows you to easily position it relative to the character facial features and apply a subtle color tint to help separate it from the body color (see Figure 18).

Play the animation to see the effect (see Figure 19).

Figure 19. Example of an armature converted to a symbol to help with positioning for an animation (mouse over the button to play)

Where to go from here

At this point you know enough about the Spring feature to start creating your own examples.

I created a few examples to show you some basic ways to use the Spring tool and control its behavior along with other timeline animations. I hope these help provide a springboard (pardon the pun) for your Flash Professional CS5 animation experiments. These examples include some Jell-O like movement (see Figure 20), a swinging arm (see Figure 21), and a set of four animated armatures moving at once (see Figure 22).

Figure 20. The spring_jello.fla example (mouse over the button to play)

Figure 21. The spring_arm.fla example (mouse over the button to play)

Figure 22. The spring_examples.fla example (mouse over the buttons to play)

To further hone your animation skills, read the Animation Learning Guide for Flash, which explains how to use all of these animation types in Flash, including the improved way of creating and editing motion tweens using the Timeline and Motion Editor.

For more information on controlling the display and expressiveness of impressive graphic effects features in Flash to enhance the look and feel of your projects, see the Graphic Effects Learning Guide for Flash.