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

6 Right-click/Ctrl-click on frame 100 in the water layer and select Insert Keyframe.. using Shape hints Shape hints force Flash to map points on the first shape to corresponding points o

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 The 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

The 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

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.

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 The 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

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 The “a” hint goes on the top-left corner, the “b” hint goes on the

The 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

The 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.

The 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 The 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 The 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

The first bone is defined The 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

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

The bones in the flag will help the flag wave realistically The 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 The 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.

2 In the Properties inspector, in the Spring

section, enter 100 for the Strength.

The 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.

The 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.

The 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.

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

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.

The 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