Vous êtes sur la page 1sur 47

MULTIMEDIA and COMMUNICATIONS

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.

Why Use Animation?


• Indicates movement

• Illustrates change over time

• Visualizes three-dimensional objects

• Attracts attention
Intro to Animation

 Simulation of movement through Frames Per Second


a series of pictures that have objects in
(FPS)
slightly different positions
 Animation is a _______________ •Movies on film - ___fps
•TV – _____fps
 Each drawing is called a ________ 9000 frames for five
(a snapshot of what’s happening at a minute cartoon
particular moment) •Computer animation
_____ fps
•“jerky” anything less
Intro to Animation

 In animation, each frame overlaps


the previous one
 Movement is caused by rapidly
displaying each frame in
sequence.
 Creates the illusion of a moving
object

http://animationarchive.net/Behind%20the%20Scenes/Animation%20Basics
Sampling and Quantizing of Motion
 Since each frame is just an image
 What can we control?

 Sampling process: collecting information pieces


With images we could control resolution, bit depth etc.

Question: What can we “Sample” with MOTION?

______________ and ______________


Sampling and Quantizing of Motion
 Since each frame is just an image
What can we control? Question:
What else can we
◦ Each frame is made up of discrete “Sample” with
samples where each sample is a pixel MOTION?
 Sampling process Frame Rate
 Remember:
 More samples means better quality (10 pixels by 10
pixels vs 200 pixels by 200 pixels)
 More samples means bigger file sizes (10 pixels by 10
pixels vs 200 pixels by 200 pixels)

◦ Each pixel gets assigned a colour,


maybe just 2 colours (black and
white1bit colour) or maybe 16 million
colour (24 bit colour)
 Quantization process
Frame Rate (Frames Per Second FPS)

 Frame Rate: indicates the playback speed


of the animation in frames per second
 Low frame rate appears choppy

 Question: BUT high frame rate can also


appear choppy, WHY?
 Answer: if the computer playing the
animation is not fast enough to process
and display the frames.
Types of Animation
Types of animation:
•2-D animation
•Cel animation
•Path animation
•3-D animation

Both types are made of frames:


The more frames per second:
• the more believable the movement will be.
•the bigger the final version of the movie file will be (more
bytes)
2-D Animation  Cel- Animation
 “Cel” (________) – clear sheet material on which images
were drawn by movie animators (they are hand drawn)
 (also called traditional animation, classical animation, hand-drawn
animation, frame by frame animation)
 Celluloid images placed on a _________ background.
 Background remains _______ (until you want to change scene)
 Object changes from frame to frame (one drawing per cel
______________)
2-D Animation  Cel- Animation

Background: Background:
Buggy Buggy
Scene 1 Scene 2
Cel: Horse Cel: Horse

Gaits of the Horse, by E. Muybridge (1834-1904)

Hobby Animation http://www.youtube.com/watch?v=jbhCUPwSrp0&feature=player_embedded

Charlie Brown (1965 original created)


Cel Animation
 Question: What was the first full length cel
based animated movie?
 Hints:
 Debuted in 1937
 Over 350,000 frames
 Over 1,500,000 pen and ink drawings
 Stars seven rather short guys and one pasty brunette
Path Based Animation
 Pick:
 a starting point for an object, (__________)
 an ending point for an object (__________)
 a _________ for the object to follow

 And then the computer generated all the frames in between


called ____________
 The artist doesn’t have to draw the intermediate frames (like the
artist did in cel based animation)

Path ends Motion


here Path begins
Motion Path here
Path Based Animation
 Question: What name do we give to the start frame
and the end frame? (not the frames that are
computer generated, rather the frames drawn by
us?)
 Question: Why is the act of generating the frames in
between the first frame and the last frame called
tweening?
 Question: The path the object follows have to be a
straight line, TRUE or FALSE?
 Question: What software allows us to do path based
animation?
2-D Animation  Path-Based

 Animation Software Features


 Frame Rate: __________ of the animation
 Transitions: __________ fade-ins, fade-outs
 Repetitions/Looping: how many times the animation repeats
 User Control: playback,start, stop, pause, go to end
 Setting the Frames Per Second (FPS)

Question: What does a bigger FPS imply?


- _________________
- _________________
What can we do
to change the motion? How to speed
up motion
 If the animation appears too slow, we can
speed up the motion by:
• Reduce the number of frames (eliminate frames)

• Increase the frame rate (speed of animation)


• ie. 8 fps go 12 fps
Slowing down the motion
by adding more frames
 Assume now that the motion is a bit too fast,
2 ways to slow it down:
 Way 1: Add more frames:

• Keep the frame rate the same ie. 8fps


• Increase the number of frames between the keyframes to stretch out
the animation (see next 2 slides for example)
 Way 2: Lower the frame rate (go from 20fps to 5fps)
• Keep number of frames as original but stretches out movie

WAY 1
Compare Way 1 and Way2 ? – Slowing down

Original WAY 1 WAY 2

Let’s See: Original Clip has 5 frames,


at 20 fps, so finishes playing at 0.2
seconds— (1sec/5) --TOO FAST!
Way 1: Increasing the number of
frames between keyframes to
stretch out the animation
 still have 20 fps, but add in extra
frames between, now have 20
frames
From the text book: Digital Media Primer by Yue-Ling Wong
Compare Way 1 and Way2 ?

Original WAY 1 WAY 2

Let’s See: Original Clip has 5 frames, at


20 fps, so finishes playing at 0.2
seconds— (1sec/5) --TOO FAST!
Way 2- lower the frame rate.. And
keep the number of frames the
same
 holds frame on screen for 0.2
seconds, then moves to frame 2,
on screen for 0.2 second, etc….
From the text book: Digital Media Primer by Yue-Ling Wong
Animation  Some Terminology
 Keyframe
Click on links for
 Tweening definitions on Internet
 Onion Skinning
But we are going to
look at them in the
next few slides
Animation – Some Terminology
Keyframe Animation:

Animating a graphical object by creating smooth


transitions between various keyframes, the frames that
indicate the beginning and end of an object's motion
path.

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

Purpose: the animator or editor can make


decisions on how to create or change an
image based on the previous image in the
sequence.

Great little tutorial – take a look at it!


http://www.mystery-productions.com/flash/onionskinning.html
Rotoscoping
Rotoscoping:
An animation technique for combining
(compositing) ________ with ___________
in television commercials and is also used for
special effects in feature-length films THEN:
Animations trace over live-action film The artist is drawing on a
movement, frame by frame for use in transparent easel, onto which
animated films. the movie projector at the
right is throwing an image of
a single film frame
http://www.youtube.com/watch?v=djV11Xbc914
NOW:
You have to watch till about 30 seconds into Tools that provide efficient
the video before you see the live video and ways to rotoscope include
then it is turned into animation. Digital Magic and
Elastic Reality.

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

• Rendering: Sample Demo


• Give objects attributes:_______
(uses Formz)
________________________
This is a website where all
the images are created by
ray tracing and computers,
yet they look amazingly real
(Check out the Hall of Fame):

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

Virtual Reality: (VR)


 Creates environment where user becomes part of the experience
 Boeing: flight simulators of airplane cockpits (hydraulic
controlled on legs)
 CD based adventure games – point and go thru doors, stairs
 Hand-held equipment allows person to interact with environment

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

 OR, you can create your own:


◦ Animated Gifs can be create in Photoshop or in other
software tools
◦ Using Flash

 We will look at two different file types of


animation:
◦Animated gifs
◦ Flash animation
Animated GIFS

 A series (blocks) of still GIF images within


_____________
world_tsunami.gif
(contains a sequence of
 Animated GIFs are formally called frames in the file)
______________

 When the GIF document is viewed, the multiple


images display, quickly and in succession, and
produce a streaming animation

monkeypoo.gif
(contains by Laura’s sister
in Photoshop!)
Characteristics of an Animated GIF

 File size is affected by:


 the number of colors
 amount of noise in the frames (just like other GIF
files)

 Only ___________ Plug-in: A program


that permits web
 No Plug-ins Required: Animated GIFs require browser to access
no plug-ins, and the authoring tools to create them and execute files
that the browser
are often free and easy to learn. would not normally
recognize. Flash
uses Shockwave
 No Sound: If you need sound in addition to
motion, you cannot use an animated GIF by itself.
Instead, you may want to consider other animation
alternatives, such as Flash, or even video
Using Photoshop to make an
animated gif
Other Animation File Types

 Animated Gifs (.gif) (universal)

 Flash (.fla, .swf) (by Adobe)

 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.

Cool Websites that use Flash:


http://www.flashtemplates.com/tag-animal-page-1.html
http://www.pablogaribay.com/
Animation File Types

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)

No sound Sound Sound

flv (used on YouTube) or swf (Flash Animations) ?


Essential Flash Terminology
 Question: What kind of tween would have
been used in this Flash animation?

 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

 Symbol: store in a library and can be reused. Changes to the library


symbol will result in changes in all of the copies of this symbol
currently on the stage.
 Graphic: static graphic, can be used in other symbos
 Button: interactive part of animation with user, responds to
mouse clicks and rollovers.
 Movieclip: reusable piece of animation, can turn a simple
animation into a movieclip symbol and reuse it.
Essential Flash Terminology
 Tweening: Creating the intermediate frames based
on the starting keyframe and ending keyframe.
There are 2 types of tweens:

Motion Tween Shape Tween


Works with symbols only Works with shapes only
Can’t morph (only movement) Can morph shapes
Only one symbol per layer if the Can have more than one shape
symbol will have a motion tween per layer but be careful, depends
on what you want to morph
Can be used with motion guide Can’t use motion guide

 Motion Guide: lets you animate an object along a


path that you draw yourself. Only works with
symbols
Animation in the Movies
Animation
 Digital Video History:
http://www.yo
 1983 Star Trek  the Wrath of Khan utube.com/wat
– dead planet transformed to lush ch?v=SaJxnTf4
earth-like habitat 4eg&feature=r
elated

 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

Making of the Titanic


Animation in the Movies

 Movies - Visual effects:


 Terminator II liquid metal
cyborg
 Jurassic Park dinosaurs

 Titanic

 Star Wars
Let’s Review
 Name two types of 2-D animation.

 What is the term for the computer


generated frames between the
starting frame and ending frame?
Warm-up Questions
Which of the following terms means:
“seeing two or three of the previous frames in
order to predict where to put the next frame”

Tweening: Process of generating


a) Tweening __________________ two images to give
b) Onion Skin the appearance that the first image evolves
smoothly into the second image.
c) Morphing
Onion Skin: Creating animated cartoons and
editing movies to see ___________________

Morphing: Process of blending


together _____________ into a series
of images

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

2. Question: Which type of animation


uses frames:
A. Cel Based
Answer:
B. Path Based
C. Both
D. Neither

3. Question: If an animation is 40 frames Answer:


long and the fps is 5, how long will the
animation take to play?

Vous aimerez peut-être aussi