Athenian School
Flash Animation Class
Mr. Graham
June-July 2011

2011 Student Projects

Course Objectives

1. Able to effectively use Flash drawing tools and common tool-options
2. Create movie clip, button, and graphic symbols and manage them using the "library".
3. Use instances, layers and scenes to organize and control your animations
4. Create simple motion tweens, shape tweens and frame animations
5. Use motion paths and easing to create more realistic animations
6. Create and animate a character, mouth synchronization
7. Use simple ActionScript behaviors to control your movie
8. Use multiple timelines by embedding movie clip symbols
9. Demonstrate "anticipation", environmental effects on objects, primary/secondary animation.

Resources

Flashkit movies | Adobe Flash Site | Color Coordinator | Gifanimations.com | Gifworks.com | Class Media Resources | How to draw faces (PDF) | Creation Engine (Student price for Flash)
2006 Student Projects

Tips

Stay organized: properly name your symbols, instances, and layers.
Only symbols or grouped objects can be "motion tweened"; make symbols first, then create keyframes and tween.
Only "broken apart" objects can be shape tweened; break apart text twice to shape tween it.
Lock layers when not in use
Place separate objects on separate layers. This is absolutely necessary if you tween any of those objects.
If you can't fix it, Undo; or delete the layer and start again.
Break up your animation into scenes.
Plan animations with more than one tween on paper. Sketch, name symbols, draw the action on paper first. In movies, this is called a Storyboard.
Use Copy/Paste frames; "reverse frames"; swap symbols
Mix shape and motion tweens as long as they are on separate layers.
Import GIF animations to get complex symbols. (note: file size increases quickly with these)
Use movie clip symbols when you want an object to have its own timeline animation. It will play independent of the main timeline; you can control it with ActionScript.

Examples

Sound Files

Activities

Flash Frenzy Crossword

Course Guide
Adjustments will be made after class starts to adjust to student needs.
Drawing or artistic skills are not required; you may animate simple stick or ball characters, or import drawings.
As a result of this class, you will have a portfolio of each skill in a single Flash file divided into scenes and an optional final project.

Day 1

Introductions: favorite cartoon?/ logins
rules/breaks/seating chart
Set "Flash2010.html" as your home page
Try this for fun: Animator VS. Animation
Discussion and cluster: what do you want to be able to do with Flash as a result of this class?
Set up flash workspace: add "scene" and save workspace
Create a new Flash document and scene (save as "portfolio")
Introduction to Flash interface and drawing tools: Drawing Example
Make a simple oval; adjust stroke, fill, gradient.
Adjusting curve and line with the arrow tool and basic eraser.
Using the property inspector to edit; using the arrow key to move objects
Basic Keyframe animation (f6) insert keyframe with stickman: quick, live demo
Work time: animate a stickman on one layer using simple keyframes.

Day 2

Review: fill, stroke, erase, properties (position and size)
More drawing: Selections: partial and using the sub-select tool; eraser options
Pencil and Brush: filling/closing gaps; snapping; smoothing and straightening;
Draw object mode; grouping and ungrouping (Ctrl + G) (Ctrl + SHIFT + G)
Bitmaps:difference between a bitmap and a vector drawing. Draw a simple vector and import a clipart bitmap from Class Media Resources
Import bitmap to library and animate
Tracing a bitmap
Gradients and tranforming gradients: demo
Layers: Breaking up animated elements on separate layers.
Section B only: Bitmaps- trace bitmanp and recolor; keframe animate up and down. Download bull.gif and import to stage. Trace and recolor.
Layers: add a background layer and lock the animation layer. Add frames to both. Create an angry bull animation of him stomping. Use layers for each object. Use simple keyframe animation.
What are breadcrumbs? How to to select sub-objects: double-click to sub-select an object in your scene (Scene>Symbol>Object>Drawing)

Day 3

Project: Knight V Dragon: Reinforce importance of layers and introduce tween animation.
Symbols and Instances (F8)
Mini-lesson: Understanding differences between timelines, frames and keyframes ( F5, F6)
Tweens: Knight VS Dragon

Download the knight and dragon gifs into your Pictures folder.
Together we will create a new scene called dragon and import the knight and dragon into the library.
What is a symbol? Flash converts animated gifs to symbols and bitmapped frames automatically. Rename the symbols appropriately.
We will place each on a separate layer an draw a background layer.
(Use layer techniques: separate each symbol on its own layer and lock as needed, control real layers in your scene and animate more than one object.)
Layers: 1- Sky, 2-ground, 3-Knight, 4-dragon
What is a "tween"-- origins and reason for use.
Name symbol instances for actionscript and reference
Create keyframe tween animation of fight between the dragon and knight.
Add a two color sky gradient and transform; add a ground layer and use a gradient or brush.

Add sound using the sound library. Download and open in Flash (File > Import > External Library)

Review: Tips above.
Worktime for project or portfolio

Day 4

Text
TIP: Only symbols or grouped objects can be "motion tweened"; make symbols first, then create keyframes and tween.
Text animation example Hello
Create a new scene called "Text"
Text: breaking up to change: subselect; fills, strokes.
Adding gradient and bitmap fills to text or other objects, transforming gradients
Create your text animation
Filters: add filters to text and movieclips

Day 5

MOTION GUIDES & ANIMATED GIFS
Motion guides: see example
Create a motion guide animation using the Wild Car Ride FLA File.
Editing a tween: color change
Add a motion guides to your scene, "knight vs dragon", to make the action more complex
Optional: Create symbols with sub-symbol movie clips for more complex animation: example
Add sound using the sound library
Practice Time

Day 6

Jib-Jab Style animation: Example.
Step-by-step directions (PDF) for Flash only. Photoshop Prep Directions.
Use this sound bite library for your voice.
Work time on your animation including adding a body and background. You may use a photograph as a backdrop for your scene.

Day 7

WorkTime: work on your project of choice adding a background to your Jib Jab, another scene to Knight VS Dragon (duplicate the first scene and edit) or other animation.

SHAPE TWEENS
Introduction to shape tweens (Tip- don't group these): example
Distributive vs. Angular tweens: example
Project: attack of the blob! Create your own simple shape tween animation. 1. Draw a simple blob shape using the brush (Make sure the object drawing option is turned off! Shape tweens only work on ungrouped (broken apart) shapes. 2. Create a new keyframe and draw more blob to the front of the original blob. Erase some of the blob to the left side; so it looks like the blob moved itself forward. 3. Add a shape tween between keyframes. 4. Repeat process to make it move across the stage. 5. Try some effects like changing the color of the blob on keyframes. Add a new layer and create new shape tweens of different figures.

Day 8

SOUND
Project: Digital piano or drum kit: see starter templates below.
Directions for Piano: 1. Download the piano starter template that includes the piano notes and a background piano. 2. Decide what kind of sounds you want to play and download or use the sound files provided: Piano Notes, Drum Kit, Cartoon, Nature, or talking. Import them into the library. 3. Create a button symbol for the black keys (demo and do). Draw on the button layer over the piano and color the button to match the key. Then Modify > convert to symbol: button. Next edit the button from the stage or library. Add keyframes for over and down, coloring or applying effects. Close editing. Make a second button for the white keys. 4. Edit each sound in the library: double-click and add a linkage name. Keep it simple; you have to remember how to spell it later. Then, select the check box to "export for actionscript". 5. Click on your first button. Use the behaviors palette to "play sound from library". Modify the event to play the sound "on press". This makes the sound sooner than the default, on release. 6. Duplicate your button. There is no need to create any more from scratch. Position each button and apply "play sound" behaviors as before. Pay close attention to the linkage name. You must spell it correctly.

Project lesson includes the following
Button Symbols
Sound: Add sounds to keyframes and adjust; use the sound samples above.
Sounds on separate layer as a soundtrack; use a soundtrack above.
Sound Behaviors: example
Create a digital sound box or piano together: example; use the sound samples above or use your own. Download this starter Flash file. More samples and project templates below.
Import sounds, name linkage; make buttons; sound behaviors
Where to locate more sounds: sound effects, open source music
Finish your sound or music box

Day 9

INTERMEDIATE TECHNIQUES
Masks: example
Worktime: add an introduction scene to your piano. Drag the new scene to the top and create an intro mask using an image and mask shape. Masks can be created with shapes, letters or words. Add spin to your tween for more dynamics. Shape tweens also work.

MovieClip Behaviors: duplicate, explode, transform
Timeline effects: "Insert > Timeline Effects"-- example. Create an "explode" scene in your portfolio. Then, apply your new skill by adding an explode to another project or try exploding other symbols.
Worktime
Frame techniques: copy, past and reverse frames. Example, demo and practice time.
Swap symbol technique-- Example and Demo (Motion tween; then, select the symbol on stage to swap in Properties)
Work on projects of choice

Day 10

TIMELINE CONTROL & PUBLISHING
Buttons: creating a button. Using a button to trigger a scene: completed example
Stop/Go action buttons: Download / View SWF
Worktime
Publishing your work: exporting your movie, publishing options.
Work time: work on your portfolio and/or individual animation projects.
Export/publish your movies for the web and adjust settings.

Explore or work on your own:

Synchronizing sound with a character: phoneme shapes: download FLA with shapes library. Example
Create your animated character. Download a sound from the "Examples" area above.
Planning your animation; naming symbol instances (only movie clips have independent timelines)
Import a movie into flash (avi)
Download the Flash trial at home: Flash Home
(Rotoscoping: what is it: Download Example FLA )
Rotoscope: download FLA and create several frames, save.

Copyright © 2010 Matthew Graham All Rights Reserved.
Use of syllabus, original examples and all other instructional materials may only be used by the copyright holder, except by explicit contractual permission by Matt Graham.