How To Use Adobe Flah Professional Cs6

How to use adobe flash cs6
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:
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).
Figure 2. The frame indicator on Frame 10 after lengthening the IK span
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).
Figure 3. Dragging the entire armature to a new position to create an animation

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).
Figure 4. Adjusting the Spring strength in the IK armature
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).
This content requires Flash To view this content, JavaScript must be enabled, and you need the
latest version of the Adobe Flash Player. To view this content, JavaScript must be enabled, and you
need the latest version of the Adobe Flash Player.
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)
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:
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).
Figure 8. IK armature applied using the Bone tool
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.
Figure 9. The coil spring in its compressed state

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.
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.
1. Open spring_shape_1.fla.
2. Start with a simple shape drawn with the Rectangle (R) tool (see Figure 11).
Figure 11. Rectangle drawn with the Rectangle tool

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.
Figure 12. Armature applied by working from left to right
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).
Figure 13. In Frame 5, the last bone in the armature is dragged downward into a vertical position
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).
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)
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)
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).
Figure 18. Armature layers converted to a symbol

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.

How To Use Adobe Flah Professional Cs6

Transféré par

Informations du document

Description originale:

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

How To Use Adobe Flah Professional Cs6

Transféré par

Droits d'auteur :

Formats disponibles

How to use adobe flash cs6

Spring tool basics

Figure 1. A basic IK armature

Follow these steps to animate the simple armature:

Figure 3. Dragging the entire armature to a new position to create an animation

 A strength value of 0 applies no spring effect to the bone

Advanced spring techniques

Figure 7. Complete coil made from a single shape converted to a symbol

1. Open spring_coils.fla in Flash Professional CS5.

Figure 9. The coil spring in its compressed state

Spring with shapes

Figure 11. Rectangle drawn with the Rectangle tool

Converting an armature to a symbol

Figure 18. Armature layers converted to a symbol

Vous aimerez peut-être aussi