1. Multimedia object types:animation ISMT multimediaDr Vojislav B Mišić

2. Animation • Technically, similar to video – a sequence of still images • Images created artificially, as opposed to video (which presents something happening in the real world, maybe retouched) • Why? Because it is a good (and sometimes less expensive) way to show/say some things

3. What we are going to talk about? • Cel (and flipbook) animation • Sprite, path, vector animation • Key frames and tweening • Character animation • 2D vs. 3D • … and other things

4. Flipbook animation • displaying a sequence of graphic files(e.g., a slide show) • problem: takes too much time (especially over the Internet) • solution: some form of compression (we will discuss this in more detail later) • compression techniques are usually proprietary (different type of images!)

5. Cel animation • animation created by a sequence of still images (as always) • different characters, objects, backgrounds overlaid to obtain the final image • final image is shot frame by frame • changes are made only to objects which move • multiplan camera (Disney): distance between layers in order to create an illusion of depth

6. Sprites and Paths • sprite: a part of the animation which moves independently of the rest • anything can be a sprite: ball, animal, human, … • a sprite can be attached to a path (or vice versa), so that successive sprite positions are located on a path • sprite can animate in-place, or move along a path, or both

7. Splines and Vectors • paths can be linear, but that is unrealistic • more often, paths follow a spline curve • watch for gravity! • example: mixed feelings • sprites can be describedas raster objects

8. Key frames • most important frames are drawn first:key frames • establish the main dramatic poses, • define the flow of actions, and • create the overall graphic style of the animation

9. Tweening • tweening:frames areinsertedbetweenthe key frames • computer can do much of the tedious work

10. Motion interpolation • Motion along an arbitrary line • Computer performs the interpolation • Special effects (rotation, resizing) can be specified along the line

11. Character animation • often the trickiest part – many simultaneous movements involved • faces are very difficult to animate • sometimescutouts areused forbody parts

12. Other design effects • ease-in and ease-out • velocity curves • line-of-action • secondary action and overlapping action • follow-through • hierarchical motion • exaggeration

13. Anticipation, action, reaction • Action/reaction is often anticipated before it actually happens • Sometimes aided by showing small movements immediately before the action • Reaction-recovery: small movements in the opposite direction immediately after the action • Fake: the action itself is not shown, only what happens before and immediately after

14. Kinematics • (in mechanical engineering) study of motion of rigid objects and structures • (in motion picture technology) study of motion of (rigid) objects and structures with joints • examples: men (objects) walking, running,falling down or apart • inverse kinematics: calculating the motion form predefined key positions, under the given set of constraints

15. Morphing • transformation of one image into another • very popular a few years ago • a number of key points is set on both images • actual transformation is calculated on the basis of transformation (in both position and color) of key points • more key points + more intermediate steps = smoother transformation

16. Some rules to be obeyed …

17. Animated GIFs • a sequence of still images (actually GIF images according to GIF89a standard), packed for the Internet • suitable for simple animations • small size = short loading time • several tools available (including one from Microsoft)

18. Macromedia Flash • Quickly becoming de facto standard • Compact export format, players • Ability to incorporate raster images as well as vector objects • Powerful 2D motion effects • Hotspots to support interactivity • More on Flash in the lab sessions …

19. 2D vs. 3D • our perception of the world is three-dimensional • 3D effects improve visual appearance • 3D special effects can be added to 2D images (most drawing/painting programs can do it) • 3D images can be generated from appropriate scene setups • … but: sophisticated applications are required

20. 3D effects • adding depth to 2D images • effects like • extruding • shadows • highlights • embossing • texturing • special lighting effects

21. Genuine 3D • genuine 3D worlds rendered into 2D images • tasks in creating 3D: a brief overview according to Pixar

22. Step 1: Creating Storyboards • detailed storyboard drawings are created as the blueprint for the action and dialog • there can be as many as 3 to 4 thousand such drawings for a feature-length movie (which comes to about onedrawing everytwo seconds or so) • they are revisedmany times duringthe creativedevelopment process

23. Step 2: Modeling • specialized animation software is used to create three-dimensional computer models of characters, props, and sets • computer models describe the shape of the object as well as themotion controls thatthe animators use tocreate movementand expressions

24. Step 3: Animation • specialized animation software allows animators to choreograph the motion in each scene by defining key frames or poses • computer automatically creates the "in-between" frames • animators neitherdraw, nor paint thescenes, as is requiredin traditionalanimation process

25. Step 4: • surface characteristics, including textures, finishes and colors, are added to every object in the scene • textures can simulate a wide variety of appearances • textures may be 2Dimages or proceduralalgorithms • additional properties:reflectivity,transparency …

26. Step 5: • Using "digital lights," every scene is lit in much the same manner as stage lighting • Key, fill and bounce lights and room ambience are all defined and used to enhance the mood and emotion of each scene

27. Lighting is the key • Key light – the brightest • Fill light – opposite the key light, reduces contrast and shadows • Back light – reduces shadows, separates the subject from the background • Powder your nose

28. Step 6: Rendering • rendering software (Pixar's proprietary RenderMan) "draws" the finished image by computing every pixel of the image from the model, animation, shading, and lighting information • once rendered, finalimages aretransferred to film,video, or CD-ROM

29. Summary • Animation is often the simplest way to accomplish motion • If you want to go beyond what Flash can offer, be ready for surprises …