Animation with Flash
We start off by learning about "persistence of vision" and practice making Zoetrope strips. Once students have this concept down we move into frame by frame, motion tween and shape tween with Flash. To understand computer generated animation you have to learn about the timeline and working with key frames so we start out slowly and then get more complex.
12 Animation Principles (pdf) Animation Techniques Handout (pdf)
Zoetrope (Hand Drawn Animation)
Create two zoetrope strips. Outline them with an ink pen and use colored pencil to fill in
the outline with color.
1. Ball bounce
2. Your choice – keep it simple
Make sure to put your name on the strips and turn them in together.
- Historical Information
- Examples: Ball Bounce | Face
- Sample Strips - this may vary depending on your zoetrope
- Purchase a Zoetrope
Basic Animation Techniques
Adobe Flash uses four primary animation techniques: Frame-by-frame, Classic Motion Tween, Motion Tween (new), and Shape Tween. In the following lessons you will explore each technique. I encourage you to practice each after you complete the tutorial assignment. Make notes on what strengths and weakness that each offers.
Frame by Frame Animation Directions
This lesson will introduce you to another type of frame-by-frame animation. In the first project you will learn how to change the stage dimensions, onion skinning and the animation technique of squash and stretch. In the second lesson you will learn how to create a cycle in the form of symbol.
Keyboard Shortcuts:
· F5 Insert Frame
· F6 Insert Keyframe
Tutorials
- Lesson 1: Frame-by-frame Ball Bounce (7:47) *Example
- Lesson 2: Frame-by-frame Flame (5:29) *Example
Classic Motion Tween Animation Directions
This lesson will introduce you to another type of animation technique in Flash called Classic Tween. Make sure to always use symbols and keep only have one animation per layers. In the first activity you will create the basic ball bounce. In the second activity you will create a movie that replicated a game of pong.
Keyboard Shortcuts:
· F5 Insert Frame
· F6 Insert Keyframe
Tutorials
- Lesson 1: Classic Tween Ball Bounce (5:08)
- Lesson 2: Classic Tween Pong (7:19) *Example
- Lesson 2.1: Classic Tween Resize/Rotate (4:18) *Extension of Lesson 2
- Lesson 3: Classic Tween Anticipation (7:00) This lesson features rotate and blur.
Motion Tween
In this lesson you will learn how to use Motion tween to move, resize and orient objects to a path.
- Lesson 1: Motion Bounce (4:13)
- Lesson 2: Hurdles (5:34) *Featuring Motion Paths
- Lesson 3: The Fly (7:20) *Featuring animation cycles and orienting to a motion path
Shape Tween
In this lesson you will practice using shape tween to change the color of the sky.
Template (right click "Save Target As..", save to desktop) shape.fla (fla)
- Lesson 1: Shape Tween Practice (2:19) *Download the template above
- Lesson 2: Shape Tween Ball Bounce (3:09)
- Lesson 3: Shape Name (4:23)
When you finish these try some of the additional lessons below.
More Practice
Pivot
In this lesson you will practice using motion and classic to animate a lever. I will also introduce layer folders.Templates (right click "Save Target As..", save to desktop) pivot.fla (fla)
- Lesson: Pivoting with New and Classic Motion Tween (8:40)
Motion Editor (for advanced users)
(CS3 and older) Stair Bounce
Assignment handout (pdf) | Example (swf)
- Stair Bounce - Only use with CS3 and below. Features guide paths.
Dialog Animation Practice Assignment
In this lesson you will practice frame by frame animation technique for animating dialog.
Templates (right click "Save Target As..", save to desktop) dialog_start.fla (fla)
Sound Files (right click "Save Target As..", save to desktop) :
Adobe | Joe | Mom | Hallway
Example (swf) | Dialog Handout (pdf)
- Lesson 1: Dialog Setup (6:18)
- Lesson 2: Animating the Dialog (5:22)
- Lesson 3: Recording audio with Soundbooth (6:43)
CS4 and Beyond
The Bone Tool
Example (swf)
Templates: I want you to start from scratch on this one so watch the tutorial if you don't know how to start a new Flash file.
Completed: I will provide my completed Flash file if you want to take a look.
(right click "Save Target As..", save to desktop) bones_complete.fla (fla)
In this lesson you will practice using the bone tool to animate a back hoe.
- Lesson 1: Practice Using the Bone Tool (4:34)
- Adobe Tutorials on using Bones: www.adobe.com/go/lrvid4058_fl
- Youtube Tutorials
The 3D Tools
Example (swf)
Templates: I want you to start from scratch on this one so watch the tutorial if you don't know how to start a new Flash file.
Completed: I will provide my completed Flash file if you want to take a look.
(right click "Save Target As..", save to desktop) 3d_practice.fla (fla)
In this lesson you will practice using the bone tool to animate a back hoe.
- Lesson 1: Practice Using the 3D Tool (4:34)
Dump Truck Animation Practice Assignment
Assignment handout (pdf) | Example (swf) | Lesson (pdf)
Templates (right click "Save Target As..", save to desktop) Yellow | Blue
In this lesson you will practice a variety of new animation techniques and review some old ones.
- Lesson 1: Cycles (12:33)
- Lesson 2: Sound (4:14)
- Lesson 3: Rumble (4:26)
- Lesson 4: Drive and rumble (12:35)
Sound Files (right click "Save Target As..", save to desktop) :
Beep | Start Up | Driving | Dumping
Flash Slide show
In this tutorial I will show you how to take a multi-layered Photoshop file and turn it into a simple Flash slide show. This will cover both the work in Photoshop and in Flash.
Flash Slide show Tutorial (13:03)