© 2011 Delmar, Cengage Learning

Chapter 8

Building Complex Animations

Chapter 8 Lessons

1. Plan for complex movies and animations

2. Create an animated graphic symbol

3. Create a movie clip symbol

4. Animate buttons using movie clip symbols

5. Edit an animation using the Motion Editor

© 2011 Delmar Cengage Learning© 2011 Delmar Cengage Learning

© 2011 Delmar Cengage Learning

• 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

Build Complex Animations

© 2011 Delmar Cengage Learning

• 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

Build Complex Animations

© 2011 Delmar Cengage Learning

Tools You’ll Use

Build Complex Animations

© 2011 Delmar Cengage Learning

• 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?

Plan for Complex Movies and Animations

© 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

Comparing Timelines

Plan for Complex Movies and Animations

Complex Timeline Animated graphics symbol contains the animation for all the layers

© 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

Using movie clip symbols

Plan for Complex Movies and Animations

You could create one movie clip symbol of a flickering flame, and use it to animate allthree candles.

You could create onemovie clip symbol ofthe fire, which wouldcontinuously crackleand move as fires do

© 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

Stop and Play buttons in the Library panel Item Preview window

Create an Animated Graphic Symbol

Click this button toplay the animation

Click this button tostop the animation

Animated graphic symbol

© 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

Diagram of a nested movie clip animation

Parent

Child Child Child

Create a Movie Clip Symbol

© 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

Movie Explorer panel

Create a Movie Clip SymbolClick the Panel optionsbutton to view options, such as to print theMovie Explorer

Customize view

Frames and layers

Video, sounds, and bitmaps

Text elements

Buttons, movieclips, and graphicsymbols

ActionScript

© 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

Movie clip symbol nested inside a button

Button symbol Animated movie clip

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

© 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

Button control game variables

Keeps track of score as you play

the game

Users drag pieces to the correct place in

the puzzle

Animate Buttons Using Movie Clip Symbols

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

The Motion Editor panel

Edit an Animation using the Motion Editor

Property

Properties ofthe selected motion tween

Click a propertyheading to enlargethe column

Columnheadings

Propertyvalues

Icon used to insert/remove a keyframe

Block squaresindicate keyframes

Frame numbers