ptg Adobe fLAsh professionAL Cs5 CLAssrooM in A book 191 Now, as the buoy moves from left to right, it rocks as if floating on water. e flag and flag pole continue to sway. Adding damping effects Damping refers to how much the spring effect decreases with time. It wouldn’t be realistic if the rocking of the buoy or the swaying of the flag and the flag pole continues indefinitely. Over time, the swaying should lessen and eventually stop. You can set a damping value from 0 (no damping) to 100 (maximum damping) to control how rapidly these effects diminish. 1 Select the first bone of the buoy (in the floating part), and in the Properties inspector, in the Spring section, enter 100 for the Damping. e maximum damping value will decrease the rocking of the buoy over time. 2 Continue to select each of the bones of the armature and enter the maximum value (100) for Damping. 3 Choose Control > Test Movie > in Flash Professional to see the effects that the damping values have on the motion of your buoy. e buoy and the flag and flag pole still sway, but their motion quickly subsides after the initial starting motion and after the buoy stops at the far right side of the Stage. e damping values help add a sense of weight to the armature. Experiment with both the strength and damping values in the Spring section of your armature to get the most realistic motion. Download from Library of Wow! ebook ptg 192 LESSON 5 Articulated Motion and Morphing Review Questions 1 What are the two ways of using the Bone tool? 2 What is the Bind tool used for? 3 Define and differentiate these terms: a bone, a node, a joint, and an armature. 4 What is a shape tween, and how do you apply it? 5 What are shape hints, and how do you use them? 6 What does strength and damping refer to in the Spring feature? Review Answers 1 e Bone tool can connect movie clip instances together to form an articulated object that can be posed and animated with inverse kinematics. e Bone tool can also create an armature for a shape, which can be posed and animated with inverse kinematics as well. 2 e Bind tool can redefine the connections between the control points of a shape and the bones of an armature. e connections between the control points and the bones determine how the shape reacts to the bending and rotations of the armature. 3 Bones are the objects that connect individual movie clips together or that make up the internal structure of a shape for motion with inverse kinematics. A node is one of the movie clip instances that have been linked with the Bone tool. A node can be described in terms of its relationship with other nodes, such as parent, child, or sibling. Joints are the articulations between bones. Joints can rotate as well as translate (slide in both the x and y directions). Armatures refer to the complete articulated object. Armatures are separated on a special Pose layer on the Timeline where poses can be inserted for animation. 4 A shape tween creates smooth transitions between keyframes containing different shapes. To apply a shape tween, create different shapes in an initial keyframe and in a final keyframe. en select any frame between the keyframes in the Timeline, right- click/Ctrl-click, and select Create Shape Tween. 5 Shape hints are labeled markers that indicate how one point on the initial shape of a shape tween will map to a corresponding point on the final shape. Shape hints help refine the way the shapes will morph. To use shape hints, first select the initial Download from Library of Wow! ebook ptg Adobe fLAsh professionAL Cs5 CLAssrooM in A book 193 keyframe of a shape tween. Choose Modify > Shape > Add Shape Hint. Move the first shape hint to the edge of the shape. Move the playhead to the final keyframe, and move the corresponding shape hint to a matching edge of the shape. 6 Strength is the amount of springiness of any individual bone in an armature. Add springiness with the Spring feature to simulate the way different parts of a flexible object jiggle when the entire object moves and continue to jiggle when the object stops. Damping refers to how quickly the springiness effect subsides over time. Download from Library of Wow! ebook ptg 194 6 CREATING INTERACTIVE NAVIGATION Lesson Overview In this lesson, you’ll learn how to do the following: • Create button symbols • Add sound effects to buttons • Duplicate symbols • Swap symbols and bitmaps • Name button instances • Write ActionScript to create nonlinear navigation • Use the Code Snippets panel to quickly add interactivity • Create and use frame labels • Create animated buttons is lesson will take approximately three hours to complete. If needed, remove the previous lesson folder from your hard drive and copy the Lesson06 folder onto it. Download from Library of Wow! ebook ptg 195 Let your viewers explore your site and become active participants. Button symbols and ActionScript work together to create engaging, user-driven, interactive experiences. Download from Library of Wow! ebook ptg 196 LESSON 6 Creating Interactive Navigation Getting Started To begin, view the interactive restaurant guide that you’ll create as you learn to make interactive projects in Flash. 1 Double-click the 06End.swf file in the Lesson06/06End folder to play the animation. e project is an interactive restaurant guide for a fictional city. Viewers can click any button to see more information about a particular restaurant. In this lesson, you’ll create interactive buttons and structure the Timeline properly. You’ll learn to write ActionScript to provide instructions for what each button will do. 2 Close the 06End.swf file. 3 Double-click the 06Start.fla file in the Lesson06/06Start folder to open the initial project file in Flash. e file includes several assets already in the Library panel, and the Stage has already been sized properly. 4 Choose File > Save As. Name the file 06_workingcopy.fla and save it in the 06Start folder. Saving a working copy ensures that the original start file will be available if you want to start over. About Interactive Movies Interactive movies change based on the viewer’s actions. For example, when the viewer clicks a button, a different graphic with more information is displayed. Interactivity can be simple, such as a button click, or it can be complex, receiving inputs from a variety of sources, such as the movements of the mouse, key presses from the keyboard, or even data from databases. In Flash, you use ActionScript to achieve most interactivity. ActionScript provides the instructions that tell each button what to do when the user clicks one of them. In this lesson, you’ll learn to create a nonlinear navigation—one in which the movie doesn’t have to play straight from the beginning to the end. ActionScript can tell the Flash playhead to jump around and go to different frames of the Timeline based on which button the user clicks. Different frames on the Timeline contain different content. e user doesn’t actually know that the playhead is jumping around the Timeline: e user just sees (or hears) different content appear as the buttons are clicked on the Stage. Download from Library of Wow! ebook ptg adobe fLash professIonaL Cs5 CLassroom In a book 197 Creating Buttons A button is the visual indicator of what the user can interact with. e user usually clicks a button, but many other types of interactions are possible. For example, something can happen when the user rolls the mouse over a button. Buttons are a kind of symbol that have four special states, or keyframes, that determine how the button appears. Buttons can look like virtually anything—an image, graphic, or a bit of text—they don’t have to be those typical pill-shaped, gray rectangles that you see on many Web sites. Creating a button symbol In this lesson, you’ll create buttons with small thumbnail images and restaurant names. A button symbol’s four special states include: • Up state. Shows the button as it appears when the mouse is not interacting with it. • Over state. Shows the button as it appears when the mouse is hovering over the button. • Down state. Shows the button as it appears when the mouse button is depressed. • Hit state. Indicates the clickable area of the button. You’ll understand the relationship between these states and the button appearance as you work through this lesson. 1 Choose Insert > New Symbol. 2 In the Create New Symbol dialog box, select Button and name the symbol gabel loffel button. Click OK. 3 Flash brings you to symbol-editing mode for your new button. Download from Library of Wow! ebook ptg 198 LESSON 6 Creating Interactive Navigation 4 In the Library panel, expand the folder called restaurant thumbnails and drag the graphic symbol gabel loffel thumbnail to the middle of the Stage. 5 In the Properties inspector, set the X value to 0 and the Y value to 0. e upper-left corner of the small gabel loffel restaurant image is now aligned to the center point of the symbol. 6 Select the Hit frame in the Timeline and choose Insert > Timeline > Frame to extend the Timeline. e gabel loffel image now extends through the Up, Over, Down, and Hit states. 7 Insert a new layer. 8 Select the Over frame and choose Insert > Timeline > Keyframe. A new keyframe is inserted in the Over state of the top layer. Download from Library of Wow! ebook ptg adobe fLash professIonaL Cs5 CLassroom In a book 199 9 In the Library panel, expand the folder called restaurant previews, and drag the movie clip symbol called gabel loffel over info to the Stage. 10 In the Properties inspector, set the X value to 0 and the Y value to 215. e gray information box will appear over the restaurant image whenever the mouse cursor rolls over the button. 11 Insert a third layer above the first two. 12 Select the Down frame on the new layer and choose Insert > Timeline > Keyframe. A new keyframe is inserted in the Down state of the new layer. Download from Library of Wow! ebook ptg 200 LESSON 6 Creating Interactive Navigation 13 Drag the sound file called clicksound.mp3 from the Library panel to the Stage. 14 Select the Down keyframe where the sound form appears, and in the Properties inspector, make sure that Sync is set to Event. A clicking sound will play only when a viewer depresses the button. Note: You’ll learn more about sound in Lesson 8, “Working with Sound and Video.” Download from Library of Wow! ebook . Create Shape Tween. 5 Shape hints are labeled markers that indicate how one point on the initial shape of a shape tween will map to a corresponding point on the final shape. Shape hints help refine. way the shapes will morph. To use shape hints, first select the initial Download from Library of Wow! ebook ptg Adobe fLAsh professionAL Cs5 CLAssrooM in A book 193 keyframe of a shape tween Shape > Add Shape Hint. Move the first shape hint to the edge of the shape. Move the playhead to the final keyframe, and move the corresponding shape hint to a matching edge of the shape. 6