1. © 2011 Delmar, Cengage Learning Chapter 8 Building Complex Animations

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

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

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

5. © 2011 Delmar Cengage Learning Tools You’ll Use Build Complex Animations

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

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

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

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

10. © 2011 Delmar Cengage Learning Comparing Timelines Plan for Complex Movies and Animations Complex TimelineAnimated graphics symbol contains the animation for all the layers

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

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

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

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

15. © 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 all three candles. You could create one movie clip symbol of the fire, which would continuously crackle and move as fires do

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

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

18. © 2011 Delmar Cengage Learning Stop and Play buttons in the Library panel Item Preview window Create an Animated Graphic Symbol Click this button to play the animation Click this button to stop the animation Animated graphic symbol

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

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

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

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

23. © 2011 Delmar Cengage Learning Diagram of a nested movie clip animation Parent Child Create a Movie Clip Symbol

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

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

26. © 2011 Delmar Cengage Learning Movie Explorer panel Create a Movie Clip Symbol Click the Panel options button to view options, such as to print the Movie Explorer Customize view Frames and layers Video, sounds, and bitmaps Text elements Buttons, movie clips, and graphic symbols ActionScript

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

28. © 2011 Delmar Cengage Learning Animate Buttons Using Movie Clip Symbols Movie clip symbol nested inside a button Button symbolAnimated 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

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

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

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

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

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

34. © 2011 Delmar Cengage Learning The Motion Editor panel Edit an Animation using the Motion Editor Property Properties of the selected motion tween Click a property heading to enlarge the column Column headings Property values Icon used to insert/remove a keyframe Block squares indicate keyframes Frame numbers