Intro to Animation

1. Intro to Animation • What is animation? • A drawing that moves, or • bringing the drawing to “life” • moving something which can't move itself • Animation is a powerful tool capable of communicating complex ideas • How the heart beats • Adds visual impact to MM project

2. Intro to Animation Four Stroke Engine • Animation is used for: • Entertainment (action, realism) • Education (visualization, demonstration) • Why Use Animation? • Rely on animations “moving images” for effective communication • It helps to illustrate what you are explaining • Overcomes learning disabilities • Simulating scientific phenomena • Increase of the interest of viewer and create a lasting impressions • Easier to show somebody how something works then to try and explain it

3. Animation: how it works? Simulation of movement through a series of pictures that have objects in slightly different positions Each drawing is called a Frame Required Frames Per Second FPS? 24

4. Animated Cartoons I In animation, each frame overlaps the previous one

5. Animated Cartoons II

6. Dialogue Animated Cartoons

7. Examples of Animation Computer Based Training Programs Demonstrate the way something works ie. assemble parts, adjust controls, perform surgery.Example Education: Teach applied and hands-on skills • Spelling and foreign language programs for school children • Programs that prepare high school students for college exams • Learning to play an instrument • Athletes learning techniques in their sport Games: All games on the market ie. Playstation, Nintendo, Xbox, gameboys Web: Animated buttons, banners, text, and characters are used for visual appeal for example to market/advertise services and information.

8. Animation and Authoring systems • Authoring systems provides several visual effects such as: wipes, fades, zooms and dissolves. For example in Director there are many effects. • To add transition in Director: • Select Modify > Frame > Transition • Double-click the frame in the transition channel • Right Click on the transition channel • A transition always takes place between the end of the current frame and the beginning of the frame where the transition is set

9. Sources of Animation Animation clip art websites available on Internet for free or at cost: http://www.animation-central.com/misc.htm The ones for a cost are more professional and creative Create each image that corresponds to a frame using a draw or paint program Create animations with software Enhance using an editing program such as Adobe Photoshop Multimedia authoring programs like Macromedia Director allow you to easily create path animations

10. Animation • Realistic motion One of the overall photorealism motive is realistic motion. Animation is a special case. • Ease of control something nearly impossible to control does not help much • Flexibility support the widest possible range of motion • Expressiveness the animation shows the feeling of the animated figure.

11. Movements Of The Two Legged Figure More movement examples

12. Creating animation logical steps • Gather all the activities you wish to provide in the animation • Choose the animation tool best suited • Build and try your sequences with lighting effects • Post process your animation: do any special rendering and adding sound

13. Animationtechniques: Cel animation • Traditional animation (Cel Animation) : • It is labor intensive • Start with story board (set of drawing outlining the clip). • Master artist draw key frames to define action. • Other artists (cheaper) draw in between frames to complete animation • all line drawings are painted on cels

14. 2-D Animation  Cel-Based “Cel” clear sheet material on which images were drawn by movie animators images placed on a stationary background. Background remains unchanged Object changes position

15. Animationtechniques: Cont. Cel animation • Film runs at 24 fps. Thus minute of animation requires 1440 hand-drawn pictures

16. Animationtechniques: Computer Assisted Animation • Computer-assisted systems are now quite commonto do traditional animation more economically • We can use computers to help expedite the animation process • Draw sketches with digital systems & use digital paint programs for coloring • Can even try to automatically generate in-betweens (tweening) • Widely used in production

17. Path-Based • Moves object along • Path: straight or any curves • Often object does not change (but resized or rotated) • Path animation easier to create than cel based animation • Specify beginning and end position • Tweening

18. Animationtechniques: Computer Animation • start with some model of the scene (aset of parameters are associated with the model such as joint angles, positions, etc.) • view each of these parameters as a function of time • vary parameters to generate desired pose for all objects • render scene to produce one frame • repeat for all frames (roughly 130,000 frames for 1.5 hour movie) • So how will we control these parameters?

19. So how will we control these parameters? • manually set them for each frame • key-framing: specify parameter values at specific times • generatethem procedurally: the computer interpolate the in-between values • execute behavioral scripts (e.g., follow the fish in front of you) • motion capture • physical simulation

20. Key-Framing • Associate a set of parameters with the model: joint angles and positions. • View each of these as a function of time. • In key-framing, we specify parameter values at specific times and let the computer interpolate the in-between values.

21. Key-Framing • In key-framing, we specify parameter values at specific times

22. Interpolating Motion Parameters • For a given parameter, we’ve specified some fixed values: these are the key frame values

23. Interpolating Motion Parameters

24. Kinematics • Kinematics: Is the study of the movement & motion of structures that have joints such as people or robots. • This means: derive motion from positions, angles, velocities, … • Position of end effectors is a function of the state of all joints • When animated, the position, speed, and rotation of all the joints and the articulated parts (such as head, shoulder, & knees) are calculated. Given an articulated human, how do we make him wave? • rotate the shoulder into position • and then the elbow and wrist • and finally rebalance other parts of the body

25. Procedural Animation • To specify a procedural animation • sit down and write some code — the animator as programmer • input: current time • output: correct parameter value • usually combine lots of little procedures together one procedure for walk, one for run, one for hop, … • There is a clear tradeoff between procedures & interaction • think of the analogy of creating a 2-D illustration if it’s simple, we can probably quickly do it interactively • but if it’s very complex & regular, coding is probably quicker

26. Behavioral Animation • Animate by defining rules (or writing a program) that governs your entities’ behavior. • Typically, define behavior in part as a response to what the environment is doing • Classic example: “boids” objects whose motion is determined as a simple function of near neighbors’ motion (plus obstacle avoidance, etc.) • A common example of this approach is “flocking”

27. Motion capture • strap a bunch of sensors on a person & record their motion • track the location of several reference points • convert this to joint angles & map to expressed model • several technologies available –optical –magnetic tracking – instrumented exoskeletons • But it can be hard to edit

28. 3-D Animation involves 3 steps: • Modelling • Process of creating broad contours and structure of 3D objects and scenes (draw views – top, side, cross section • Animating • Defining lighting and perspective views to create change during animation • Rendering Sample Demo

29. Animation  Some Special Effects • Morphing: • Process of blending together two images into a series of images • Useful for showing how image might change over time • Is an effect in which one effect is transformed into another.

30. Morphing • Some software transform still pictures as well as animated images. • Morphed images are built at a rate of 8 frames per second and each transition takes 4 seconds, a total of 32 frame per second. MonaAnim.gif • Key pointes can be held on both the initial and final images, in this case the points on the start image will move to the corresponding pointes on the final image.

31. Animated GIFS monkeypoo.gif(contains by Laura’s sister in Photoshop!) world_tsunami.gif(contains a sequence of frames in the file) For simple animations use .GIF format Special type of GIF file known as an animated GIF/GIF89a that provides the animation you need. When the GIF document is viewed, the multiple images display, quickly and in succession, and produce a streaming animation

32. Animated GIF files - continued • Characteristics of an Animated GIF: • File size is affected by: • Number of frames • image size • No Plug-ins Required: Animated GIFs require no plug-ins, and the authoring tools to create them are often free and easy to learn. • 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

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

34. Animation File Types Flash Software • Flash uses the .FLA file extension for source files • .SWF extension for the Flash movie that is created and played. • .swf originally meant “Shockwave Flash” but now “Small Web Format” • Animation is choreographed using one or more sequential timelines in which actions and interactions are defined Animation is choreographed using one or more sequential timelines in which actions and interactions are defined

35. Animation Software Why Is Flash So Popular? • Professional designs • Interactive content rich with video, graphics, animation • Import multimedia elements from other applications • Support vector graphics: • 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 applicationthat works with popular Web browsers to play the animation • Adobe Flash Player is the standard for delivering high-impact, rich Web content. Designs, animation, and application user interfaces are deployed immediately across all browsers and platforms

36. Onion skinning • is a 2D computer graphics term for a technique used in creating animated cartoons and editing movies to see • allows you to see a faint ghost image of the previous frame so you can see where you want to place the artwork for the next frame.

37. Flash Animation using Onion Skinnig • Step 1 - Draw the image (for example Frog) on the Stage

38. Flash Animation using Onion Skinnig • Step 2 - - Select Frame 2 and add a Keyframe In Frame 2 click on the Frog to select it, and move it up and to the right. • At the bottom of the Timeline there is a row of five buttons. Click on the second one- this turns on Onion Skinning • Notice how you now can see a faint ghost image where your first frame was?

39. Flash Animation using Onion Skinnig • Step 3 - With the Transform Tool selected rotate, scale etc your Frog. Continue to add Keyframes for each change you make in the Frog. Do this for 11 frames. • Choose Control > Loop Playback so that you can see your animation repeat.

40. Flash Animation using Onion Skinnig • Step 4 - Play with and Modify your movie. Add as many Keyframes as you wish and make the movie as long as you wish.

41. Animation Software .swf originally meant “Shockwave Flash” but now “Small Web Format” flv (used on YouTube) or swf (Flash Animations) ?