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