Académique Documents
Professionnel Documents
Culture Documents
Lecture #8
Animation
Today’s Lecture
1. Introduction to Animation
2. What is Animation
3. Types of Animation
4. File Types of animation
5. Using Flash to build you
animation
6. Animation terminology
3D Animation, Morphing, Tweening, Onion
Skinning etc.
7. Animated GIFs
8. History of Animation
9. Animation in Movies
10. LOTS OF VIDEOS TODAY
Sit back and enjoy
Intro to Animation
What is animation?
A drawing that moves, bringing the
drawing to “life”
A sequence of images that create the
illusion of movement when played in
succession.
http://www.youtube.com/watch?v=8SBfN9ltF8c
Why use animation?
Easier to show somebody how something Four Stroke Engine
works than to try and explain it.
• Attracts attention
Intro to Animation
http://animationarchive.net/Behind%20the%20Scenes/Animation%20Basics
Sampling and Quantizing of Motion
Since each frame is just an image
What can we control?
Background: Background:
Buggy Buggy
Scene 1 Scene 2
Cel: Horse Cel: Horse
WAY 1
Compare Way 1 and Way2 ? – Slowing down
http://en.wikipedia.org/wiki/Key_frame
Tweening:
Short for in-betweening, the process of generating
intermediate frames between two images to give
the appearance that the first image evolves smoothly
into the second image.
Animation – Some Terminology
Onion skinning
is a 2D computer graphics term for a
technique used in creating animated
cartoons and editing movies to see
several frames at once
24
3-D Animation – Process
3-Dimensional
animation
involves 3 steps:
Modelling
Animating
Rendering
3-D Animation - Process
• Modelling:
• Defining the object’s ____________
• Process of creating broad contours and
structure of 3D objects and scenes
(draw views – top, side,
cross section
• Animating:
• Process of defining _____________
• Defining lighting and perspective views
to create change during animation
http://hof.povray.org/
Animation
Some Special Effects
Morphing:
Process of
_____________
_____________
into a series of
images
Useful for showing how
image might
_______________
Famous Faces:
http://www.youtube.com/watch?v=wZur
Rt0TidI&NR=1
http://www.youtube.com/watch?v=h7bf
CkqUuX8&NR=1
http://www.youtube.com/watch?v=nUD
IoN-_Hxs
Animation Some Special Effects
Warping:
Distorts a single
image
Warp frown into smile
http://www.cise.ufl.edu/~anand/student
s/chui/img/eg_face_warp_anim.gif
Animation Some Special Effects
A 2D cockpit for a
Boeing 737. Some
gauges are retained
from the default MSFS
737, while others are
modernized. Some
non-functional controls
are included in the
dashboard.
Where can you get animation?
Purchase CDs or buy off the internet or get
free clipart on the internet, for example:
http://www.animation-central.com/misc.htm
monkeypoo.gif
(contains by Laura’s sister
in Photoshop!)
Characteristics of an Animated GIF
Macromedia Director
Sophisticated Animations:
Strata 3D, LightWave, 3D Studio Max, Maya, and
Houdini, FormZ
Animation Software
Flash Professional
A multimedia authoring and playback system
Launched in 1996 by Macromedia/ Adobe bought in 2005
Flash became popular for its animated graphics
Responsible for much of the animations, advertisements and
video components found on today's Web sites
Flash is the industry's most advanced authoring environment for
creating interactive websites, digital experiences and mobile content.
Flash Software
• Flash uses the .FLA file extension for source files
Animation is
choreographed
• .SWF extension for the Flash movie that is created and played.
using one or
• .swf originally meant “Shockwave Flash” but now “Small Web Format”
more
sequential
• Animation
timelines in is choreographed using one or more sequential
whichtimelines
actions in which actions and interactions are defined
and
interactions
are defined
Animation Software
Why Is Flash So Popular?
Professional designs
Interactive content rich with video, graphics, animation
Import multimedia elements from other applications
Support vector ___________________:
much more space efficient over bitmapped frames
scale up with accurate detail no matter how large the window is
resized by the user.
Flash Player is a free client ___________ application that
works with popular Web browsers to play the animation
Adobe Flash Player is the __________ for delivering high-
impact, rich Web content. Designs, animation, and
application user interfaces are deployed immediately
across all browsers and platforms
.swf originally meant “Shockwave Flash” but now “Small Web Format”
Animation Software
Animated GIF Flash Director
Created by Depends Flash Director
Extension Source depends .fla (source) .dir (source)
.gif (movie) .swf (movie) .dcr (movie)
.flv (flash video
encoder)
Size Larger than normal Vector images take up Vector images take up
gif less space than GIF less space than GIF
bitmapped images bitmapped images
Uses Banners, small Interactive video, More interactive sites
areas graphics, animation
Need to play Nothing Flash Player (Free and Web browser plug in
it works with most (The Shockwave
browsers) Player)
Stage: rectangular area where the visible motion will take place
Timeline: series of frames in a row and stacks of layers.
Indicates key frames, regular frames and empty frames
Shape: basic shapes drawn with the shape tools, line tool or a
single letter
Digital Animation
What was the first full length film that
was created entirely with digital
animation.
What year did it come out?
1995
Animation in the Movies
Titanic
Star Wars
Let’s Review
Name two types of 2-D animation.
46
Practice Questions:
1. Question: How many frames per Facts:
second should we have when building •Movies on film
an animation for display on a
•TV
computer?
•Computer animation