EEE3112Introduction to Multimedia Application & Technology

Chapter 2: Animation Development

by Muhazam Mustapha, September 2012

Learning Outcome

• By the end of this chapter, students are expected to be ready to demonstrate the required skill for CO2:– Basic nomenclature of animation– Publishing simple animation– Embedding audio– Merging works– Simple interactivity

Chapter Content

• Terminologies

• Animation

• Audio

• Team Planning

• Interactivity

Terminologies

Definitions• Animation is a product of frame-by-frame

computation of graphics (images)• Animation is a type of multimedia that is widely

used in the internet to improve human appreciation

• It is, however, should be used sparingly as it consumes a lot of bandwidth

• Terminologies that we are going to use is based from Adobe Flash as we are going to use this software for our class

Definitions• Frame: Temporal (time-based) drawing in an

animation – can be considered as frames in film• Frame Rate: No. frames per sec. More frame

rate, the better the animation, but requires more computing resources

• Key Frame: Frames where the start of animation effect (changes) is calculated

• Tween: Frames that are computed based on the operation defined at key frames

• Symbol: An object in Flash that points to a separate copy

Animation

Animation Techniques• Traditional Animation

– Full animation: Detailed drawing of frames realistic motion. Used by animation giants like Walt-Disney

– Limited animation: Stylized drawing of frames. Used in most of Japanese animes.

– Rotoscoping: Frames obtained from real life action, then re-drawn by animators frames-by-frame

– Live-action/animation: Mixture of animation and life action like in Who Framed Roger Rabbit.

• [Source: http://en.wikipedia.org/wiki/Animation]

Animation Techniques• Stop animation

– The animation that is done by snapping the stopped movement of object frame-by-frame to create the illusion of motion

• Examples:– Puppet animation: the object is made of puppet – as

in Robot Chicken– Clay animation: the object is made of clay – as in

Chicken Run– Cutout animation: the object is made of paper or

cloth cutting – as in South Park

• [Source: http://en.wikipedia.org/wiki/Animation]

Animation Techniques• Computer animation

– Digitized and computerized approach to animation– 2D animation

• animation based on 2D images• examples include animated GIF, Flash and Powerpoint

animations

– 3D animation• animation based on 3D digital mesh• the mesh would be associated to a digital skeleton / bone

that would be moved by the animator• would normally utilize sophisticated motion capture

• [Source: http://en.wikipedia.org/wiki/Animation]

• The latest most advanced technique to create 3D animation

• Uses life actors whose movement would be captured and used to move digital characters in animation – normally using markers

Motion Capturing

• Two types:– Passive markers: markers REFLECT light and

triangulated by a few cameras from different angles to get 3D position

– Active markers: markers PRODUCE light and triangulated by a few cameras from different angles to get 3D position

• [Source: http://en.wikipedia.org/wiki/Motion_capture]

Motion Capturing

• Two types:– Passive markers: markers REFLECT light and

triangulated by a few cameras from different angles to get 3D position

– Active markers: markers PRODUCE light and triangulated by a few cameras from different angles to get 3D position

• [Source: http://en.wikipedia.org/wiki/Motion_capture]

Motion Capturing

Workspace {{}}• Stage• Property Inspector & Library• Timeline of Layers & Motion Editor

• (Demo)

Create Animation {{}}• Insert Symbol• Key Frame• Insert Tween• Publishing

• (Demo)

Audio

Acquiring Audio {{}}• Use your own method• Can use MS Sound Recorder

• (Demo)

Embedding Audio {{}}• Audio Symbol• Trimming & Fading

• (Demo)

Team Planning

Job Distribution• Since the assignment would be a group

assignment, proper job distribution is important• The task is best divided by timeline (frame) and

layers• First, the plan for the animation must be put on

a storyboard and agreed upon• Next, sound should be recorded in a few

sessions• Layers and symbols should then be created

Job Merging• Finally the separate works would be combined• The layers from separate animations would be

copied into the master copy• If there is any new symbols created in the

separate animations it must be copied into the master first then the layer can be merged

Interactivity

Buttons {{}}• Flash defines buttons as symbols that has

STATES as timeline (instead of time value)• Define states: Up, Over, Down, Hit• Naming Instance

ActionScript {{}}• We will only cover navigating scripts