Learning from Animation

• Ninjai: the little ninja• www.ninjai.com

• Bugsbunnyhttp://looneytunes.warnerbros.com/web/toons/

toons_detail.jsp?id=toons_halloween_drmoron

cool things about animation

• Provide “natural” properties to a media without a shape– The screen is no more than a field of pixels– Animation evokes association to things in the physical

world• Time and space• Physics• Behavior

Beware! Pitfalls of over-animated designs

– The flash intro trap– Compromise on the core values of the web medium– Losing sight on the fundamentals of color and composition

Animation Cycles

• constant motion to keep things alive– Could be subtle

Simple Flash walk cycle by Tom Franks

A basic walk cycle

“Rocco” by Tom Franks

A gesture cycle

environmental cycle

application of cycles in games

• Other principles of animation

– Anticipation• Coil up before a run

– Stretch and squash

– Exaggeration

Object-oriented approach

•compose your design based on “characters”

•Break up your design into independent entities that interact with each other

•Hierarchical structures to contain these “objects”• For example:

• time: summer => • weather: hot => • people: thirsty => • swimming pool: full

•Examplehttp://www.shine02.org/fis/fis.html

Careful Use of Repetition

• Fertcohttp://www.wired.com/animation/collection/nina_paley/fertco/

Clones in bulky costumes, from classic Star Wars

Battle Scenes with model space ships

Repetition is cheap in the information age. Star Wars did not translate its old magic into the new medium

a scene from Star Wars Phantom Menace game

Applications in User Interface:

• Looney Tuneshttp://looneytunes.warnerbros.com/web/homepage/

homepage.jsp• Monkey Studio

http://www.themonkey.it/index2.html• Cartoonnetworks

• http://www.cartoonnetwork.com

• Fujifilmhttp://www.fujifilm.com/JSP/fuji/epartners/

digitalShowcase.jsp