30 April 2010
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:
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:
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:
To get Spring to work you have to add some animation to the IK armature:
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.
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).
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).
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).
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.