To apply a shape tween, create different shapes in an initial keyframe and in a final keyframe.. Then select any frame between the keyframes in the Timeline, right-click/Ctrl-click, and
Trang 1Adobe fLAsh professionAL Cs5 CLAssrooM in A book 191
Now, as the buoy moves from left to right, it rocks as if floating on water The
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.
The 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
The 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 The 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
Trang 2192 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 The Bone tool can connect movie clip instances together to form an articulated object
that can be posed and animated with inverse kinematics The Bone tool can also create
an armature for a shape, which can be posed and animated with inverse kinematics
as well
2 The Bind tool can redefine the connections between the control points of a shape and
the bones of an armature The 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 Then 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
Trang 3Adobe 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
Trang 4194
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
This 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
Trang 5195
Let your viewers explore your site and become active
participants Button symbols and ActionScript work
together to create engaging, user-driven, interactive
experiences.
Trang 6196 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
The 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 The 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 The user doesn’t actually know that the playhead is jumping around the Timeline: The user just sees (or hears) different content appear as the buttons are clicked on the Stage
Trang 7adobe fLash professIonaL Cs5 CLassroom In a book 197
Creating Buttons
A button is the visual indicator of what the user can interact with The 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
Trang 8198 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.
The 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
The 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
Trang 9adobe 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.
The 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
Trang 10200 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.”