Transcript Chapter 8

Chapter 8
Building Complex Animations
© 2011 Delmar, Cengage Learning
Chapter 8 Lessons
1.
2.
3.
4.
5.
Plan for complex movies and animations
Create an animated graphic symbol
Create a movie clip symbol
Animate buttons using movie clip symbols
Edit an animation using the Motion Editor
© 2011 Delmar Cengage Learning
Build Complex Animations
• Introduction
– A well-built movie consists of many small
pieces of animation put together and often, of
movies nested within movies
– You can create Flash movies using reusable
pieces such as movie clip symbols
– allows you to have fewer motion tweens
and layers in the movie
© 2011 Delmar Cengage Learning
Build Complex Animations
• Introduction
– It is better if you split the many animations on
the Stage into smaller, reusable pieces, and
then insert these smaller pieces as needed
– Creating animated graphic symbols and
movie clips symbols also allows you greater
flexibility in adding ActionScript to elements,
as well as placing elements on and off the
Stage
© 2011 Delmar Cengage Learning
Build Complex Animations
Tools You’ll Use
© 2011 Delmar Cengage Learning
Plan for Complex Movies and Animations
• Consider the following questions as you
plan your project:
– Are there any repeated elements on the
Stage?
– Are there any repeating or complex
animations, or elements on the Stage that
animate while the rest of the movie is still?
– What kind of interactivity will your Flash movie
have?
© 2011 Delmar Cengage Learning
Plan for Complex Movies and Animations
• Your Library panel should house all of the
building blocks for your movie.
• To build a logical Library panel, you should
have a solid plan in place for the different
elements you expect to use.
© 2011 Delmar Cengage Learning
Plan for Complex Movies and Animations
• You can convert an entire multiple-layer
animation into a single animated graphic
symbol that you can store in the Library
panel.
• When you create a single animated graphic
symbol it removes all of the associated
keyframes, layers, and tweening of the
animation from your Timeline.
© 2011 Delmar Cengage Learning
Plan for Complex Movies and Animations
• Animated graphic symbols can also
reduce file size if you expect to use the
animation in more than one place in a
movie.
• An animated graphic symbol is tied to the
Timeline of the movie in which you place
the symbol.
© 2011 Delmar Cengage Learning
Plan for Complex Movies and Animations
Complex Timeline
Animated graphics symbol contains
the animation for all the layers
Comparing Timelines
© 2011 Delmar Cengage Learning
Plan for Complex Movies and Animations
• A movie clip symbol, which is essentially a
movie within a movie, is a more robust
way to store complex animations in the
Library panel.
• The biggest difference between a movie
clip and an animated graphic symbol is
that the movie clip symbol retains its own
independent Timeline.
© 2011 Delmar Cengage Learning
Plan for Complex Movies and Animations
• This creates a nested effect, which means
the movie clip instance Timeline plays
within the main Timeline.
• Because the movie clip instance Timeline
is independent of the main Timeline, it will
repeat if its Timeline is shorter than the
main Timeline.
© 2011 Delmar Cengage Learning
Plan for Complex Movies and Animations
• A technique for stopping an animated
movie clip is to insert a blank keyframe at
the end of the layer on the main Timeline
that displays the movie clip.
• You could also use ActionScript to control
the playing of a movie clip by creating
buttons that start and stop a movie clip.
© 2011 Delmar Cengage Learning
Plan for Complex Movies and Animations
• When you create the animation for
elements in a movie clip, each element
might reside in its own movie clip symbol.
• When you place these elements on the
Stage in a movie, each of the movie clip
symbols would move according to its own
independent Timeline, as well as take up
only one layer.
© 2011 Delmar Cengage Learning
Plan for Complex Movies and Animations
You could
create one
movie clip
symbol of
the fire, which
would
continuously
crackle
and move as
fires do
You could create
one movie clip
symbol of a
flickering flame,
and use it to
animate all
three candles.
Using movie clip symbols
© 2011 Delmar Cengage Learning
Create an Animated Graphic Symbol
• Most of the time you will want to use movie clip
symbols instead of animated graphic symbols
to store animations.
• In some instances though, it may be useful for
you to create an animated graphic symbol:
– When you want a sequential animation to play
only one time
– When you want an animation to synchronize with
other elements on the Stage
© 2011 Delmar Cengage Learning
Create an Animated Graphic Symbol
• You create an animated graphic symbol in the
same way you create a static graphic symbol,
by choosing the Graphic option in the Create
New Symbol dialog box.
• In the Library panel, an animated graphic
symbol looks the same as a static graphic
symbol. However, when you select the
animated graphic symbol or movie clip symbol,
it is displayed with the Stop and Play buttons.
© 2011 Delmar Cengage Learning
Create an Animated Graphic Symbol
Click this button to
play the animation
Click this button to
stop the animation
Animated graphic
symbol
Stop and Play buttons in the Library panel Item Preview window
© 2011 Delmar Cengage Learning
Create an Animated Graphic Symbol
• If you draw and animate an object in a movie it
can be later placed inside an animated graphic
or movie clip symbol.
• You can copy motion tweens, frames, and
layers from the main Timeline and paste them
into a new symbol.
• You cannot copy sound or interactivity in an
animation from the main Timeline to an
animated graphic symbol.
© 2011 Delmar Cengage Learning
Create a Movie Clip Symbol
• Movie clips are usually the most efficient
choices for you in creating and storing
complex animations.
• The main advantage of movie clip symbols
is that they maintain their own
independent Timeline.
© 2011 Delmar Cengage Learning
Create a Movie Clip Symbol
• Movie clip symbols require only one frame in
the main movie, regardless of the complexity of
the animation.
• You can add sound and associated
ActionScript statements to a movie clip symbol.
• When one movie clip is made up of many other
movie clips, the process is called nesting.
© 2011 Delmar Cengage Learning
Create a Movie Clip Symbol
• When you nest movie clips, it creates a
parent-child relationship that will become
increasingly important as you enhance the
interactivity of your movies and begin to
deploy more sophisticated ActionScript
statements.
• When you insert a movie clip inside another
movie clip, the inserted clip becomes the child
and the original clip becomes the parent.
© 2011 Delmar Cengage Learning
Create a Movie Clip Symbol
Parent
Child
Child
Child
Diagram of a nested movie clip animation
© 2011 Delmar Cengage Learning
Create a Movie Clip Symbol
• If you place an instance of a parent clip
into a movie and then change it, you will
also affect all of its nested child clips.
• Any time you change the instance of a
parent clip, the associated child clips
update automatically.
© 2011 Delmar Cengage Learning
Create a Movie Clip Symbol
• The Movie Explorer panel allows you to
inspect the nesting structure of your entire
movie.
• You can easily view the movie’s structure
and see which elements are nested.
• You can apply a filter to view just the
elements you want.
© 2011 Delmar Cengage Learning
Create a Movie Clip Symbol
Text elements
Click the Panel options
button to view options,
such as to print the
Movie Explorer
Buttons, movie
clips, and graphic
symbols
Customize view
Frames and layers
ActionScript
Video, sounds,
and bitmaps
Movie Explorer panel
© 2011 Delmar Cengage Learning
Animate Buttons Using Movie Clip Symbols
• You can animate a button by nesting a movie
clip symbol inside any one of the three visible
states of the button: Up, Over, and Down—
although Up and Over are the most common
placements.
• To build an animated button symbol, you
need a movie clip symbol with the animation
and a button symbol in which to nest the
animation.
© 2011 Delmar Cengage Learning
Animate Buttons Using Movie Clip Symbols
Because movie clips have independent
Timelines, the clip will run continually while the
button symbol is on the Stage, even if the main
movie pauses or stops
Button symbol
Animated movie clip
Movie clip symbol nested inside a button
© 2011 Delmar Cengage Learning
Animate Buttons Using Movie Clip Symbols
• Adding interactivity to a movie means that
you are asking your user to be involved in
the movie in some way other than
watching it.
• You could add a button for a user to click
or give the user a choice to make, more
likely holding your user’s interest.
© 2011 Delmar Cengage Learning
Animate Buttons Using Movie Clip Symbols
• You can create complex interactions by
using ActionScript in combination with
movie clip symbols.
• You can use ActionScript to instruct movie
clips to perform actions without waiting for
user input and to jump to specific frames
on the Timeline of a movie clip symbol.
© 2011 Delmar Cengage Learning
Animate Buttons Using Movie Clip Symbols
Button control
game variables
Keeps track of
score as you play
the game
Users drag pieces to
the correct place in
the puzzle
Interactive game created with symbols, buttons, and ActionScript
© 2011 Delmar Cengage Learning
Edit an Animation using the Motion Editor
• Motion Editor allows you to edit motion tween
animations by changing the property values
such as the position, rotation, color effects,
and ease.
• When you use the Motion Editor, you can
quickly make changes to an animation
without having to use the Properties panel
and you can view the effect of a change while
it is being made.
© 2011 Delmar Cengage Learning
Edit an Animation using the Motion Editor
• When you click Motion Editor, the Motion
Editor panel opens in place of the Timeline
panel at the bottom of the Flash
workspace.
• The Motion Editor includes several
columns with the headings across the top
of the panel.
© 2011 Delmar Cengage Learning
Edit an Animation using the Motion Editor
Column
headings
Frame numbers
Block squares
indicate keyframes
Properties of
the selected
motion tween
Click a property
Property
heading to enlarge
the column
Property
values
Icon used to insert/remove
a keyframe
The Motion Editor panel
© 2011 Delmar Cengage Learning