week 08

animation

animation

animation

• a sequence of images that create the illusion of movement when played in succession

• each still image = a frame

why use animation

• easier to show how something works than explain it

• illustrate change overtime

• indicates movement

• visualize 3D objects

• entertainment

how does animation work

• simulation of movement through a series of pictures

• required frames per second (FPS)

  • movies = 24fps

  • TV = 30fps

  • computer animation = 12-15fps

sampling motion

each frame is an image, each image is sampled, each sample is a pixel

• more samples = better quality and bigger file size

quantizing motion

each pixel gets assigned a colour or value

frame rate: indicates the playback speed of the animation in fps

• low frame rate = choppy

• high frame rate = choppy is computer can’t handle it

• high frame rate = more believable movement

2D animation: cel animation

each frame is drawn by hand

(e.g., rotoscoping)

2D animation: path based

• starting and ending point of an object are picked (keyframes)

• a path for the object to follow is made

• a computer generates the in between images (tweening)

• onion skinning

onion skinning

transparent previous motion to determine how far to adjust the next

3D animation: computer animation

step 1: modeling (design character)

step 2: rendering (adding fur, skin, etc…)

step 3: animating (making motion look realistic)

2 other kinds of animation

• motion graphics (similar to path based)

• stop motion

path based animation software

• generates the frames

• looping

• transitions

• repetitions

• setting frames per second (bigger fps = bigger file = realistic motion)

speeding up motion

• reduce the number of frames (will also reduce file size)

• increase the frame rate

slowing down motion

• add more frames (but same fps) = bigger file size

• lower the frame rate = not as smooth an animation

realistic motion: timing

• consider the timing and spacing of your key frames

• standard frame rate is 24fps

realistic motion: ease

• slow in and slow out

• movement starts slow, builds speed, and loses speed

realistic motion: drag

• something continues to move after the thing it’s joined to stops

• adds realism to a character

realistic motion: anticipation

• character prepares for an action

• makes action more realistic

realistic motion: squash/stretch

• objects get longer/flatter to emphasize speed, weight, and mass

• more squash/stress = softer object

animated GIFs

• file size impacted by size of GIF, # of colours, and # of frames

• max # of colours in an animated GIF is 256

• no plug-ins required to play a GIF

• no sound

history of Flash animation

• launched in 1996 by Macromedia

• bought by Adobe in 2005

• became popular for animated graphics

• the industries most advanced authoring environment for created interactive websites, digital experiences and mobile content

what made Flash popular

• rich with video, graphics,games, and animations

• import multimedia elements from other applications

• supports vector graphics

• free

• pre installed in machines between 1998-2000

• people paid to create games

• Apple killed Flash because it wasn’t allowed on Apple devices

Flash: motion tween

animates symbols only

• can’t morph (only position and rotation)

Flash: shape tween

works on non symbol shapes and vector graphics only

• can morph shapes

Flash: classic tween

animates symbols only but keyframes are manually created

• can’t morph (only position and rotation)

motion guide

lets your figure out the path you want the animation to take

PowerPoint animation

decide how

• to make an object arrive

• emphasize an object

• make an object leave

• make an object follow a path

smooth start/smooth end

• start: slow at beginning and quick at end

• end: start quick and slow at end

• default: 2 sec smooth starts and 2 sec smooth end

control your timing and duration

1868

flip book

1877

praxinoscope (cylinder that spun around)

1892

Reynaud showed how we could use 12 pictures and loop the pictures (horse)

1898

stop motion animation introduced

1906

Blacktons make the “humorous phases of funny faces” uses a blackboard

1914

McCay makes “Gertie the dinosaur” the first successful character animation

1928

Walt Disney combines sound and animation in Steamboat Willlie

1937

first full length feature animation Snow White

1960

first prime time animated TV show “the Flintstones”

• longest running right now is the Simpsons

1982

Star Trek, The Wrath of Khan includes computer generated effects

• TRON, a Disney animation includes 15min of computer generated scenes

1986

Take On Me by aha used rotoscoping (pencil sketching over live film)

1995

first full-length computer generated movie is Toy Story

2011

cinemagraphs are invented

cinemagraphs

• combination of a photo and video

• looks like one part of a photo is animated

• usually stored as an animated GIF