Adobe Flash chuyên nghiệp - p 20 ppt

ptg
Adobe fLAsh professionAL Cs5 CLAssrooM in A book 181
6 Right-click/Ctrl-click on frame 100 in the water layer and select Insert
Keyframe. Or, choose Insert > Timeline > Keyframe (F6).
A new keyframe is inserted at frame 100. e contents of the previous keyframe
are copied into this keyframe. You now have three keyframes on the Timeline in
the water layer: one at frame 1, a second at frame 50, and a third at frame 100.
7 Move the red playhead back to frame 50.
Next, you’ll change the shape of the water in the second keyframe.
8 Choose the Selection tool.
9 Click and drag the contours of the water shape so that the crests become dips
and the dips become crests.
Each subsequent keyframe in the water layer contains a different shape.
Apply the shape tween
e next step is to apply a shape tween between the keyframes to create the smooth
transitions.
1 Click on any frame between the first keyframe and the second keyframe in the
water layer.
2 Right-click/Ctrl-click and select Create Shape Tween. Or, from the top menu
choose Insert > Shape Tween.
Download from Library of Wow! ebook
ptg
182 LESSON 5 Articulated Motion and Morphing
Flash applies a shape tween between the two keyframes, which is indicated by a
black forward-pointing arrow.
3 Click on any frame between the second keyframe and the last keyframe in the
water layer.
4 Right-click/Ctrl-click and select Create Shape Tween. Or, choose Insert > Shape
Tween.
Flash applies a shape tween between the last two keyframes, which is indicated
by a black forward-pointing arrow.

5 Watch your animation by choosing Control > Test Movie > in Flash
Professional. Flash creates a smooth animation between the keyframes in the
water layer, morphing the shape of the ocean surface.

Note: The Motion
Editor is not available
for shape tweens.
Download from Library of Wow! ebook
ptg
Adobe fLAsh professionAL Cs5 CLAssrooM in A book 183
Using Shape Hints
Shape hints force Flash to map points on the first shape to corresponding points on
the second shape. By placing multiple shape hints, you can control more precisely
how a shape tween appears.
Adding shape hints
Now you’ll add shape hints to the shape tween of the wave to modify the way it
morphs from one shape to the next.
1 Select the first keyframe of the shape tween in the water layer.
2 Choose Modify > Shape > Add Shape Hint (Ctrl+Shift+H/Command+Shift+H).
A red circled letter “a” appears on the Stage. e circled letter represents the
first shape hint.
3 Drag the circled letter to the top-left corner of the ocean shape.
Shape hints should be placed on the contours of shapes.
Download from Library of Wow! ebook
ptg
184 LESSON 5 Articulated Motion and Morphing
4 Choose Modify > Shape > Add Shape Hint again to create a second shape hint.
A red circled “b” appears on the Stage.
5 Drag the “b” shape hint to the top edge of the ocean shape at the bottom of a
dip of the wave.

6 Add a third shape hint.
A red circled “c” appears on the Stage.
7 Drag the “c” shape hint to the far top-right corner of the ocean shape.
You have three shape hints mapped to different points on the shape in the first
keyframe.
8 Select the next keyframe of the water layer (frame 50).
A corresponding red circled “c” appears on the Stage, although an “a” and a “b”
shape hint are directly under it.
9 Drag the circled letters to corresponding points on the shape in the second
keyframe. e “a” hint goes on the top-left corner, the “b” hint goes on the
bottom of the wave, and the “c” hint goes on the top-right corner.
Download from Library of Wow! ebook
ptg
Adobe fLAsh professionAL Cs5 CLAssrooM in A book 185
e shape hints turn green, indicating that you’ve correctly placed the shape hint.
10 Select the first keyframe.
Note that the initial shape hints have turned yellow, indicating that they are
correctly placed.
11 Choose Control > Test Movie > in Flash Professional to see the effects of the
shape hints on the shape tween.
e shape hints force the crest of the first shape to map to the crest of the
second shape, causing the shape tween to appear more like a traveling wave
instead of an up-and-down bobbing motion.
Removing shape hints
If you’ve added too many shape hints, you can easily delete the unnecessary ones.
Removing a shape hint in one keyframe will remove its corresponding shape hint in
the other keyframe.
• Drag an individual shape hint entirely off the Stage and Pasteboard.
• Choose Modify > Shape > Remove All Hints to delete all the shape hints.
Simulating Physics with Inverse Kinematics

Now that you’ve animated the undulating water beneath the crane, it would be
nice to see the red buoy move along the surface as well. You could create a motion
tween so it travels along the water. However, since the buoy has a flexible flag
attached, it’ll be more realistic to see the flag and the pole wave and bend as the
buoy moves. Flash Professional CS5 introduces a new feature for inverse kinematics
called Spring that helps you do this easily.

Note: You can add a
maximum of 26 shape
hints to any shape
tween. Be sure to add
them in a clockwise
or counterclockwise
direction for best
results.
Download from Library of Wow! ebook
ptg
186 LESSON 5 Articulated Motion and Morphing
e Spring feature simulates physics in any animated armature. A flexible object
(like a flag or a flag pole) normally would have some “springiness” that would cause
it to jiggle on its own as it moves, and continue to jiggle even after motion of the
entire body stops. e amount of springiness can be set for each bone in an arma-
ture to help you get the exact amount of rigidity or flexibility in your animation.
define bones for your armature
In the following steps, you’ll animate the buoy floating across the water and set the
strength of the spring in each of the bones in the armature of the buoy. e first
step is to add bones to the shape of the buoy.
1 Lock and hide all the layers except for the buoy layer and select the contents of
the buoy layer.
2 Choose the Bone tool.

3 Click on the base of the buoy and drag out the first bone to the tip of the
triangular support at the bottom of the flag pole.
e first bone is defined. e contents of the buoy layer are separated to a new
Pose layer.
4 Click on the end of the first bone and drag out the next bone a little farther up
the flag pole.
e second bone is defined.
Download from Library of Wow! ebook
ptg
Adobe fLAsh professionAL Cs5 CLAssrooM in A book 187
5 Click on the end of the second bone and drag out the next bone to the left into
the flag.
6 Define two more bones to extend the armature to the tip of the flag.
e bones in the flag will help the flag wave realistically. e bone in the flag
pole will help the pole bend separately from the floating bottom.
Setting the spring strength for each bone
Next, you’ll set the strength value for the spring for each bone. e strength value
can range from 0 (no spring) to 100 (maximum spring).
1 Select the last bone (at the tip of the flag) of the armature in the buoy.

Note: The Spring
feature for inverse
kinematics works for
both armatures in
shapes and armatures
with movie clips.
Download from Library of Wow! ebook
ptg
188 LESSON 5 Articulated Motion and Morphing
2 In the Properties inspector, in the Spring

section, enter 100 for the Strength.
e last bone has the maximum spring
strength since the flag tip is the most flexible
part of the whole buoy and would have the
most independent motion.
3 Select the next bone in the armature
hierarchy. It may be difficult to select the
next adjacent bone if they are too crowded
together, so you can choose the Parent
button in the Properties inspector to move
up the hierarchy.
4 In the Properties inspector, in the Spring
section, enter 60 for the Strength.
e middle of the flag is a little less flexible
than the tip, so it has a smaller strength value.
5 Select the next adjacent bone, and in the Properties inspector, in the Spring
section, enter 20 for the Strength.
e base of the flag is even less flexible than the middle of the flag, so it has an
even smaller strength value.
6 Select the next adjacent bone (the bone within the pole), and in the Properties
inspector, in the Spring section, enter 50 for the Strength.
Giving the pole a medium amount of spring strength will make the pole bend
back and forth on the buoy.
Download from Library of Wow! ebook
ptg
Adobe fLAsh professionAL Cs5 CLAssrooM in A book 189
insert the next pose
Next, you’ll move the buoy across the water and watch how its horizontal motion
affects the movement of the individual bones in the armature.
1 Unhide all the layers so you can see where the buoy is located on the scene.

2 Select frame 70 of the armature layer, which contains your buoy.
3 Holding down the Alt/Option key, click and drag the buoy and move it to the
right so it meets the shipping containers on the edge of the Stage.
Holding down the Alt/Option key allows you to move the entire armature
around the Stage.
4 Choose Control > Test Movie > in Flash Professional to see the motion of the
buoy and its attached flag.

Note: The effects of
the Spring feature are
more apparent when
there are additional
frames on the Timeline
after the armature’s
final pose, as in this
lesson. The additional
frames allow you to see
the residual bouncing
effect after the motion
stops.
Download from Library of Wow! ebook
ptg
190 LESSON 5 Articulated Motion and Morphing
e buoy moves from left to right. At the same time, the flag pole bends and the
flag sways. When the buoy stops at the edge of the Stage, the pole and the flag
continue to move.
Refining armature spring values
Although the flexibility of the flag and the pole on the buoy gives the animation
more realism, the floating bottom should also rock as it moves. In this section,
you’ll refine your armature by adding some spring to the first bone in the buoy.

1 Lock and hide all the layers except for the armature layer containing the buoy
and select the first bone.
2 In the Properties inspector, in the Spring section, enter 20 for the Strength.
Giving a spring value to the first bone makes it sway back and forth with any
motion of the entire armature.
3 Choose Control > Test Movie > in Flash Professional to see your refinements to
the motion of the buoy.
Download from Library of Wow! ebook