Final Animations

Hey all,

A reminder that your final animations are due TOMORROW at 6pm. I will give you guys the first three hours of class to add the finishing touches to your animations and fix any last minute issues.

You will turn in a

• Final Animation .FLA
• Final Animation SWF
• Final Animation Quicktime Movie

Class Eight - Storyboarding

PSA Examples - AKA Hooray for the 80s

Final Project - Due July 8th

Final Project - Animation & Motion Theory
Public Service Announcement
Public Service Announcement (100pts)
Due July 8th

For your final assignment you will create a 15 second PSA animated announcement using Adobe Flash. The project will incorporate elements that we have discussed during this course including character design, character animation and sound.

The student will create a story outline, storyboards, animatic and final .fla and movie to be turned into the class dropbox on the class server.

Students will choose from one of the subjects below:

• Health and Wellness – Encourage people to exercise, eat a healthy diet, play sports, enjoy the outdoors, walk instead of driving, or otherwise lead a healthy, active lifestyle.
• Environmental Support – Encourage people to recycle and re-use materials, reduce pollution, use cleaner energy, conserve wilderness, or contribute to saving endangered species.
• Adopt a Shelter Pet – Encourage people to adopt a pet from an animal shelter, or to donate to an animal-related cause.
• Party Responsibly – Encourage people to be responsible about partying: don’t drink and drive, set up a designated driver, or be aware of their limits.

Part 1: Final Project – Rough Storyboards:
Due Juneth

Create two rough storyboards detailing out two different ideas for the scenes of your Final Project: a 15-second animated Public Service Announcement.

• Create sketches to show what is happening in the different scenes. Sketches can be rough, but they should clearly show what is happening in that scene. Next to each sketch, include a description of the scene: include the dialogue, narration, or typography.

• Show the action and movement in each scene: use arrows to show which direction the characters or objects will move. Consider using zoom effects or camera moves. Use arrows to show what direction the camera will move.

• Convey a Public Service message: your message should inform the public about what they can do to improve the world. The message should be something simple that can be represented in 15 seconds.

• Student will pitch their story and basic storyboards to be critique by me

Part 2: Analyzing Public Service Announcements:

• Find 3 Public Service Announcements that you think are effective and interesting.
• Create a word document with links to each PSA, and a short description and analysis of each. Answer the following:
o What was your first reaction to this PSA? Did it make you angry or upset? Did it make you laugh? What emotional message is getting through?
o What aspects of the PSA make it effective, and why? Consider artwork, graphics, imagery, camera work, narration, dialogue, typography, music, sound effects, style, etc.

Class Eight - Principles of Animation - Storyboarding

Class Files
Flash Principles

Class Topics

• 12 Principles of Animation
• Staging
• Anticipation
• Follow-Through / Overlapping Action
• Secondary Action
• Solid Drawing
• Appeal
• Storytelling Tips
• How to Storyboard

12 Principles of Animation



Anticipation - Bugs Bunny 0:54



Follow Through - Overlapping Action 1:05 - 1:07


Overlapping Action in Adobe Flash



Secondary Actions - Pinnoco




Secondary Actions

Storyboarding 

Storyboards are graphic organizers in the form of illustrations or images displayed in sequence for the purpose of pre-visualizing a motion picture, animation, motion graphic or interactive media sequence.

The storyboarding process, in the form it is known today, was developed at the Walt Disney Studio during the early 1930s, after several years of similar processes being in use at Walt Disney and other animation studios. wikipedia 

Storyboard Terms


How to Storyboard If You Can't Draw

 


Steven Spielberg on Storyboarding



Toy Story Storyboarding Pitch

Lab 7 - Walk Cycle

Lab 7 – Walk Cycle
Due: Monday, June 23rd

Animation & Motion Theory

In this assignment you will create a walk cycle for a unique character, as in more than just a stick figure. Using the references in the presentation file and on the class blog create an advanced walk cycle. The character should have a contact, recoil, passing and high point pose, as well as reverse of those poses.

The character should be made into a graphic symbol that cycles. Then have the character symbol move across the page.

Think about the character, is he/she happy, sad? Does it take big steps or small steps? These characteristics will play into your character.

Class Seven - Walk Cycle

Files
Flash-Cycle

Presentation Files
PDF
PPTX

Topics

• Walk Cycle
• Step
• Position

Walk Cycle

In animation, a walk cycle is a series of frames or illustrations drawn in sequence that loop to create an animation of a walking character. The walk cycle is looped over and over, thus having to avoid animating each step again.

Walk cycles can be broken up into 4 key frame, namely Forward Contact Point, Passing Pose1, Back Contact Point and Passing Pose 2. Frames that are drawn between these key poses (traditionally known as in-betweens/Inbetweening) are either hand-drawn or using computer software to interpolate them.

Human Walk Cycle



Walk Cycle Hand Drawn in Adobe Flash



Walk Cycle Examples

Lab 6 - Character Voiceover

Lab 6 – Character Voiceover
Due: Wednesday, June 18th

Animation & Motion Theory

In this assignment you will make a character speak a short one sentence phrase. It must have a minimum of four words in the sentence.

Begin by creating a character head. Then create the mouth movements for the basic vowels and consonants. Look at the examples on the class blog for assistance.

Record your sentence, you may can use a microphone, webcam with Adobe Audition or Audacity. You can also use voice recording apps on your smart phone to do this as well. Make sure there is no background sound or music in your recording. This is important so it will not interfere with our exposure sheet.

Open the sound file into Adobe Audition or Audacity to do any minor editing or tweaking. Use audition to set the phrase into frames.

Use this as a base to create an exposure sheet to layout the mouth sound to the frame position. This can be done on a piece of lined notebook paper. Note the example on the class blog.

Use the exposure sheet to layout the voice over of the character.

Class Six - Dialogue - Character Dubbing

Class Files
Flash - Audio

Presentation Files
target="_blank">PDF target="_blank">PPTX
Topics Covered

• Dialogue Basics
• North/South, East/West
• Vowel Mouth Shapes
• Constant Mouth Shapes
• Time Sheet
• Audio Recording

Mouth Movements

Character Movement - Marvin the Martian



Kermit the Frog



Lip Sync



Lip Sync 



Learn the Basics of Audacity

Lab 5 - Animated Text

Lab 5 – Kinetic Typography
Due: Monday June 16th
Animation & Motion Theory
Animated Sequence Should be 10 seconds minimum

KineticTypography

Add animated typography to your rotoscoped project. The kinetic typography can be original thoughts, poem, song, letter or from a found poem, quotes or song that you can use. The typography style should match the style of your rotoscoped work.

It should have interesting motion. Add extra frames as necessary to make sure the words are readable. Pick out music that will compliment your project. Work with the beats and time your animation.

Rotoscoping Phase 2: Extend & Finish

Extend your rotoscoped sequence to work with the typography: add cycless or extra frames to allow enough time to read the words and establish the scene. You can also take this time to clean up your rotoscoped sequence and add colors, details, texture, or a background scene.

Class Five - Typography

Class Files

Flash Typography

Class Presentation Files

PDF
PPTX

Topics:

• Typography Basic
• Serif/Sans-Serif
• Tracking/Kerning
• Leading/Size

---

Typography

Serif vs Sans-Serif:

Serif Typeface:

In typography, a serif /ˈsɛrɪf/ is a small line attached to the end of a stroke in a letter or symbol,such as when handwriting is separated into distinct units for a typewriter or typesetter. wikipedia link

Sans-Serif

In typography, a sans-serif typeface is one that does not have the small projecting features called "serifs" at the end of strokes wikipedia link

Serif vs Sans-Serif Description



Line-Height/leading

In typography, leading refers to the distance between the baselines of successive lines of type. The term originated in the days of hand-typesetting, when thin strips of lead were inserted into the forms to increase the vertical distance between lines of type. wikipedia link

Tracking/Spacing

In typography, kerning is the process of adjusting the spacing between characters in a proportional font, usually to achieve a visually pleasing result. Kerning adjusts the space between individual letter forms, while tracking (letter-spacing) adjusts spacing uniformly over a range of characters. In a well-kerned font, the two-dimensional blank spaces between each pair of characters all have a visually similar area. wikipedia link

Animating Text in Adobe Flash



Input/Dynamic Text



Kinetic Typography, Eminem, Rap God


 
Kinetic Typography, The Beatles, Help!



What Teachers Make, Taylor Mali

Lab 4 - Rotoscoped Animation

Assigned: June 2nd
Due: June 9th

clipconverter.cc

Experimental Animation: Over the following two labs we will create an experimental animation that combines rotoscoped animation and kinetic text.

Rotoscoping, (Part One)
Create a short animated sequence, using the Rotoscoping technique to translate live action into frames drawn in Flash. Start by creating at least 150 frames of animation (5 seconds at 29.97 frames per second). In Phase 2, we’ll work on extending the animation and adding a text animation.

1) Find an interesting motion clip. Save the video as an .FLV and Import to Flash.

2) Create a new layer above the video to draw in your frames as keyframes. Draw in at least 150 frames (5 seconds at 29.97 frames per second) making a keyframe at every 3rd or 4th frame.

3) Turn in two files: the .fla file with the rotoscoped layers on top of the video layer,
and another .fla with only your drawings (delete the video layer) and mask effect on.

Class Four - Rotoscoping

Class Files
Rotoscoping
Class Topics:

• History of Rotoscoping
• Exporting Video to Still Images
• Rotoscoping Practice

Class Presentation Files

PDF
PPTX

Rotoscoping

Rotoscoping is an animation technique in which animators trace over footage, frame by frame, for use in live-action and animated films.Originally, recorded live-action film images were projected onto a frosted glass panel and re-drawn by an animator. This projection equipment is called a rotoscope, although this device was eventually replaced by computers. Wikipedia Link

Rotoscoping Examples:

Koko the Clown: Bed Time 1915



Tale of the Fish and the Fisherman



Lucy in the Sky with Diamonds, 1968

Take on me, 1968

Waking Life, 2001

Scanner Darkly 2006

Masking

Basic Masks in Adobe Flash

Masking with Text

Labs 3 - Tween Character Animation

MGD204: Animation Theory 
Flash Animated Character

Take the character you created in the character design assignment. Convert it if you have not already into a Flash drawn character using the Flash drawing tools.

Divide the character into at LEAST four moving parts, this could be things like head, torso, legs, tail, eyes, etc. Use motion/shape tweens to animate your character to give him/her/it life. Animate the character for roughly 2.5 seconds.

For instance, an example would be a dog character where the torso breathes in and out, the head rotates, the tail ways and the eyes widen in and out.

Due June 3rd

Class Three: Flash Tweens

Class Files
Flash Tweens

Class Presentation Files
PDF
PPTX

Topics

• Flash symbols
• Graphic
• Movie Clip
• Shape Tween
• Motion Tween
• Transform
• Rotation
• Scale
• Curved Path
• Alpha
• Tint
• Rotation
• Effects
• Blur
• Dropshadow

Production Notes on Eminem's 'Mosh: Link

Create a Symbol

Shape Tweens



Motion Tweens

 

Alpha Motion Tween




Rotation/Scale



Bouncing Ball using Motion Tweens

Character Animation Using Symbols

Class Two - Flash Animation Basics

Class Files:
Basic Flash Animation

Presentation Files:
PDF
PPTX
PPTX

Topics Covered:

• Timeline
• Frames Per Second (FPS)
• Flash Keyframe/Blank Keyframe
• Onion Skin
• Flash Frame
• Move, Delete, Convert Keyframe
• Frame-by-Frame Animation
• Squash and Stretch
• Arcs
• Spacing/Timing

Basic Frame-by-Frame in Adobe Flash

Onion Skin in Adobe Flash



12 Principles of Animation

Disney's Twelve Basic Principles of Animation is a set of principles of animation introduced by the Disney animators Ollie Johnston and Frank Thomas in their 1981 book The Illusion of Life: Disney Animation. Johnston and Thomas in turn based their book on the work of the leading Disney animators from the 1930s onwards, and their effort to produce more realistic animations. The main purpose of the principles was to produce an illusion of characters adhering to the basic laws of physics, but they also dealt with more abstract issues, such as emotional timing and character appeal.

The book and some of its principles have been adopted by some traditional studios, and have been referred to by some as the "Bible of animation." In 1999 the book was voted number one of the "best animation books of all time" in an online poll. Though originally intended to apply to traditional, hand-drawn animation, the principles still have great relevance for today's more prevalent computer animation. Wikipedia Link




Squash and Stretch in Adobe Flash



Squash and Stretch Examples:

1:01  - 1:30, 2:20 - 2:25

Lab One - Assignment Character Design

Assigned: May 19th
Due: May 26th
Download

Create an original character and draw it in Flash. We’ll use this character to create an animated cycle.

Design an original character to animate – we’ll be creating an animation of your character walking or running in place.

The character can be a human, animal, alien, inanimate object, or a hybrid. Draw in any style: realistic or exaggerated. The style should be consistent and unified through all parts of the character.

Draw your character in Flash: practice using the Flash tools. Try doing something in a different way than you would in Photoshop or Illustrator. (You may draw your character on paper first, but the finished character must be drawn in Flash.)

Use Layers: create layers for each main moving part of the character. For example, you can create a layer for the head, another for the central body, one for each arm and leg, and even separate layers for the hands and feet. The more layers you have, the easier it will be to animate your character.

Draw your character in the first pose of a “Walk Cycle” (see the references­ given out in class). Use an expressive and dynamic pose. Start thinking about how your character might move: what kind of pose or posture would convey their movement? Is the character Running? Walking? Sneaking? Flying? Swimming?

The “Side-View” Walk Cycle is recommended, since it does not require foreshortening.

Class One - Flash Drawing

Course Overview

• MGD104 Syllabus

Required Equipment:

• Thumbdrive/External Harddrive
• Dropbox.com 

Class Files
Flash: Drawing Exercises

Presentation Files
PDF
PPTX

Topics Covered

• Flash Program History
• History of Flash on the Internet
• Flash Drawing Tools
• Pencil
• Pen
• Paintbrush
• Paintbucket
• Eraser
• Gradient
• Properties Panel
• Insert Keyframe 
• Insert Blank Keyframe
• Frame

---

Flash History

Flash Animation: Wikipedia Link

Animations

1997: John Kricfalusi, The Goddamn George Liquor Program



1999: Joe Cartoon, Frog in a Blender: Link

2000: Tim Burton, Stainboy



2000: Dice Raw, Thin Line Between Raw and Jiggy

Flash Series Examples
Homestarrunner.com
AngryAlien.com
mondomedia.com


Resources:
Coldhardflash.com

---

Flash Drawing Tools:



Paint Brush Tool
 

 Paint Bucket/Ink Bottle

 

Pen Tool

 

Character Design

• Form
• Aesthetics
• Recognizable
• Personality
• Originality

John K discusses these concepts in greater detail: Link

Interview with Character Designers: Link