1. Copyright © 2003 Pearson Education, Inc. Chapter 3, Slide 1 by Michael Kay The Web Wizard’s Guide to Flash

2. Copyright © 2003 Pearson Education, Inc. Chapter 3, Slide 2 CHAPTER 3 Flash Animation

3. Copyright © 2003 Pearson Education, Inc. Chapter 3, Slide 3 Chapter Objectives Get familiar with the Timeline Add and manipulate frames and keyframes Create and edit symbols Construct three types of animation Use animation for non-motion effects Utilize onion skinning, guide layers, and masks Manage symbols and other assets in the library

4. Copyright © 2003 Pearson Education, Inc. Chapter 3, Slide 4 Frames and the Timeline Add a keyframe wherever you want a change to occur in the movie. Standard frames fill the space between keyframes and add time to the movie.

5. Copyright © 2003 Pearson Education, Inc. Chapter 3, Slide 5 Frame-by-Frame Animation Wherever you add a keyframe and change something on the Stage, you create animation. Add successive keyframes to continue to move an object across the Stage. Frame-by-Frame animation offers minute control over animation but it’s also very tedious.

6. Copyright © 2003 Pearson Education, Inc. Chapter 3, Slide 6 Symbols A symbol exists in a Flash movie’s library and instances of a symbol are placed on the Stage. Select an object on the Stage and choose Insert > Convert to Symbol to covert it into a symbol. Choose Insert > New Symbol to create a symbol from scratch. Each symbol has its own Stage and Timeline.

7. Copyright © 2003 Pearson Education, Inc. Chapter 3, Slide 7 Types of Symbol Behavior Graphic is usually the choice for a static piece of artwork, but can also be used for animation. The button symbol is a special symbol type just for creating interactive buttons that respond to the mouse. A movie clip symbol is similar to a graphic symbol. It is an essential ingredient for creating ActionScript. It can be used for animation.

8. Copyright © 2003 Pearson Education, Inc. Chapter 3, Slide 8 Motion Tween Animation Add a new layer and place a single symbol instance on the Stage. In the same layer, insert a new keyframe several frames later. Use the Arrow tool to drag the symbol instance to a new location in the second keyframe. In the Timeline, click on the first keyframe. Go to the Frame panel (Properties Inspector in Flash MX) and choose Motion from the Tweening menu.

9. Copyright © 2003 Pearson Education, Inc. Chapter 3, Slide 9 Other Motion Tween Effects A Motion Tween will apply to any changes to symbol instances between 2 keyframes. Select a symbol instance and change an attribute in the Effect panel (Properties Inspector in Flash MX) or apply a transformation to alter its size or rotation. Create a fade-in by setting the Alpha value to “0” for the first instance.

10. Copyright © 2003 Pearson Education, Inc. Chapter 3, Slide 10 Shape Tween Animation Add a single non-symbol object to to a keyframe on its own layer. Insert a second keyframe several frames after. Manually reshape the object in either keyframe. Assign a Shape tween from the Frame panel (Properties Inspector in Flash MX). Place shape hints if needed.

11. Copyright © 2003 Pearson Education, Inc. Chapter 3, Slide 11 Other Tools for Animation Onion skinning allows you to view or edit multiple frames at once. Add a motion guide to constrain an animation to a specific path. Use a mask layer to control what is hidden or revealed in a specific layer. The shape of the object in a mask layer designates what will be visible.

12. Copyright © 2003 Pearson Education, Inc. Chapter 3, Slide 12 Managing Assets in the Library Every symbol you create is stored in a Flash movie’s library. From the library you can edit a symbol, change its behavior, or alter its other properties. Other assets in the library include imported bitmap images, sounds, or video clips. To copy an asset from the library in one Flash movie, drag it to a second one.