Spring Tool

Adobe
Products Industries Learning Help Downloads Company

Store
Adobe Store for home and home office
Education Store for students, educators, and staff
Business Store for small and medium businesses
Other ways to buy

Info Sign in
My cart My shipments My support
Flash Developer Center /
mudbubble.com
Spring tool basics
Advanced spring techniques
Converting an armature to a symbol
Apr 30, 2010
Comments (5)
(1 Rating)
Prerequisite knowl edge
A basic understanding of the Flash authoring interface, working with symbols, using the Bone
Exploring the Spring tool in Flash Professional CS5 | Adobe Developer... http://www.adobe.com/devnet/flash/articles/spring_tool.html
1 of 14 05/11/2010 12:30
tool, and creating simple timeline animations is recommended.
User level
Intermediate
Required products
Flash Professional (Download trial)
Sampl e fil es
spring_tool_source.zip
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.
Spring tool basics
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).
Figure 1. A basic IK armature
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:
After downloading and unzipping the sample files for this tutorial, open spring_basic_1.fla
in Flash Professional CS5.
1.
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.
2.
Position the frame indicator on Frame 10 (see Figure 2). 3.
2 of 14 05/11/2010 12:30
Figure 2. The frame indicator on Frame 10 after lengthening the IK span
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).
4.
Figure 3. Dragging the entire armature to a new position to create an animation
Now it's time to turn on Spring. Select the entire armature by double-clicking one of the
bones.
5.
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).
6.
Figure 4. Adjusting the Spring strength in the IK armature
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.
7.
Play the animation to see how the armature reacts to the Spring tool (see Figure 5).
8 .
3 of 14 05/11/2010 12:30
Fi gure 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
Fi gure 6. How varying spring strengths affect the animation (mouse over the buttons to play)
4 of 14 05/11/2010 12:30
Advanced spring techniques
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).
Figure 7. Complete coil made from a single shape converted to a symbol
Setting up the coil spring with individual symbol instances allows for optimal articulation when
an IK armature is added:
Open spring_coils.fla in Flash Professional CS5.
1.
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.
2.
Repeat this procedure for all subsequent bones until you reach the last symbol at the top
(see Figure 8).
3.
Figure 8. IK armature applied using the Bone tool
To get Spring to work you have to add some animation to the IK armature:
5 of 14 05/11/2010 12:30
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).
1.
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.
2.
Figure 9. The coil spring in its compressed state
Double-click one of the bones to select them all.
3.
Using the Properties panel add a strength value of 100.
4.
Play the three animations in Figure 10 to see the effect of Spring strength at its highest
numerical value on every bone.
5.
Fi gure 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.
Spring with shapes
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.
6 of 14 05/11/2010 12:30
Open spring_shape_1.fla.
1.
Start with a simple shape drawn with the Rectangle (R) tool (see Figure 11).
2.
Figure 11. Rectangle drawn with the Rectangle tool
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.
3.
Figure 12. Armature applied by working from left to right
Lengthen the IK span by inserting about 100 frames. 4.
Position the frame indicator at Frame 5.
5.
Using the Selection tool drag the last child bone (far right) down until the armature is
vertical (see Figure 13).
6.
Figure 13. In Frame 5, the last bone in the armature is dragged downward into a vertical
position
Double-click one of the bones to select the entire armature. 7.
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.
8 .
Play the animation to see the effect (see Figure 14).
9 .
7 of 14 05/11/2010 12:30
Fi gure 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).
Figure 15. Root bone (left) with the least amount of flexibility (highest numerical value) and last
child bone (right) with the most flexibility (lowest numerical value)
8 of 14 05/11/2010 12:30
Fi gure 16. Example of an armature with springiness applied separately to each bone (mouse
over the button to play)
Converting an armature to a symbol
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).
Figure 17. Converting the entire armature animation to a symbol
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).
9 of 14 05/11/2010 12:30
Figure 18. Armature layers converted to a symbol
Fi gure 19. Example of an armature converted to a symbol to help with positioning for an
animation (mouse over the button to play)
10 of 14 05/11/2010 12:30
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 J ell-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).
Fi gure 20. The spring_jello.fla example (mouse over the button to play)
11 of 14 05/11/2010 12:30
Fi gure 21. The spring_arm.fla example (mouse over the button to play)
Fi gure 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.
This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0
Unported License
Webcam Motion Detection: Using the BitmapData API in Flash 8
Augmented reality using a webcam and Flash
Advanced character animation in Flash
Animation in Macromedia Flash: Squash and Stretch
Adding 3D to Flash projects using After Effects
Creating graphic effects using the new Deco scripts in Flash Professional CS5
Creating self-voicing puzzles in Flash
Combining animation and ActionScript using Flash Professional CS5 and Flash Builder 4
Creating movie clips with reflections in ActionScript 3.0
12 of 14 05/11/2010 12:30
Creating your first Flash Professional CS5 document
More
10/21/2010 Converting external link as2 script to as3
10/22/2010 Problem: Flash movie plays on desktop, but not on website
10/11/2010 Animating with Armature
10/22/2010 Flash CS5 for Mac Extreem slow with 5G RAM
More
10/20/2010
@everythingfla How to link multiple textarea boxes that are each a fixed size so
they automatically continues in the next textarea?
10/12/2010 Setting a source path in Flash CS4 Professional
10/11/2010 Vector class: creating typed array lists in ActionScript 3.0
10/05/2010 Pausing video from the HTML wrapper (@everythingFLA)
Comments (5)
Comments
darkllangleMay 4, 2010
Thanks a lot, that's so cool n fun to read and watch ^^
Manjunath HegdeMay 5, 2010
Thanks Chris.
balaji naikMay 13, 2010
GOOD.! USE FULL TOOL WE CAN USE FOR THREAD ANIMATIONS
pavkey88May 25, 2010
Really useful tutorial. I plan on using these techniques to create the new generation of
jiggly butt dancing girls for my banner ads.

And I owe it all to you. :)
cleverconceptsSeptember 22, 2010
I'm an 8th grade teacher. I've been using your tutorials since 2004 when I first started
teaching Flash to 6th -8th graders. I'm very, very grateful that you generously share your
expertise with the world. It's one thing to be really good at what you do. It's another
thing, entirely, to share that gift openly. Thank you. The many students I work with year
after year in my classes have so much fun because of you. Some have even become
animators and web developers. ;)
13 of 14 05/11/2010 12:30

Again, thank you.

Sincerely,
Mrs. Murphy
Del Dios Middle School, California
Please sign in to improve or rate the content.
United States (Change)
Security Contact Adobe Report piracy EULAs Permissions and trademarks Careers
Copyright 2010 Adobe Systems Incorporated. All rights reserved.
Use of this website signifies your agreement to the Terms of Use and Online Privacy Policy
(updated 07-14-2009).
14 of 14 05/11/2010 12:30

Spring Tool

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Spring Tool

Загружено:

Авторское право:

Доступные форматы

Adobe

Products Industries Learning Help Downloads Company

Вам также может понравиться