Introduction to Multimedia Lecture #8 Animation Instructors: Mohamed MAGANGA

1. A Vision of Students Today Introduction to Multimedia Lecture #8 Animation Instructors: Mohamed MAGANGA

2. Today’s Agenda 4 Lectures Left • Video (2) • Sound (1) • Review (1) • Announcements • Warm Up • Today’s Lecture • Lecture #7 (finish history) • Lect # 8: Animation • Lect 9: Video part 1 (hopefully start)

3. Overview of Today’s Topics Announcements What is animation? Types of animation File types of animation Using Flash to build your animation and animation terminology History of animation Review

4. Announcements • Student needing notes, please help out  • Assignment 2s should all be marked by now. You have two weeks to complain about your mark. • Assignment 3 (due Friday, March 19) Assignment 4 (due Wednesday April 7) • They will take you longer than you think, give yourself LOTS of time to do them. • Check that your P: drive works! • Final Exam: Wednesday April 14 2:00 PM Location: Thames Hall Gym • 2 hour exam • All multiple choice questions • About 150 questions

5. Announcements Final Exam Note: you must get a weighted average of at least 45% on the final exam and major assignment http://www.csd.uwo.ca/courses/CS1033/ And go to Course Outline Note that weighted average = (total of weighted marks / sum of weights) and  weighted mark = (weight * mark) For example, if you received 60% on the final exam(weighted at 40 % of your final mark) 80% on the major assignment (weighted at 20% of your final mark), Your weighted averagewould be ((60*.4)+(80*.2)) / (0.4+0.2) = (24+16) / 0.6 = 40/0.6 = 66% WHICH IS ABOVE THE REQUIRED 45% TO PASS. NOTE though, if you did not hand in the major project and received 50% on the final exam, your weighted mark would be 33% and you would NOT pass the course, even if your overall grade for your labs, assignments and final exam was greater than 50%.

6. Warm up Questions: Question: What is the PageRank algorithm? Question: Name the most popular search directory web site? Question: Name the most popular search engine website? What % of the market does it currently have? Question: What are the 3 components you must address to get your page a higher ranking? Question: Who started Yahoo, who started Google? Question: Name one search tool that predates Google and Yahoo

7. Warm Up Questions Which of the following is the most important in terms of getting your website ranked highly in Google. A domain name with good keywords in it The number of links from your page to other pages The number of links from other pages to your page Having good keywords in the title Have good meta tag keywords. If you want a table in your webpage to automatically resize as the user resizes the window, then you should define it in terms of pixels not percentages True False

8. Today’s Agenda • Introduction to Animation • What is Animation • Types of Animation • File Types of animation • Using Flash to build you animation • Animation terminology 3D Animation, Morphing, Tweening, Onion Skinning etc. • Animated GIFs • History of Animation • Animation in Movies • LOTS OF VIDEOS TODAY  Sit back and enjoy

9. Intro to Animation • Animation is a powerful toolcapable of communicating complex ideasHow the heart beatshttp://www.smm.org/heart/heart/top.html • Easier to showsomebody how something works then to try and explain it http://www.youtube.com/watch?v=8SBfN9ltF8c • What is animation? • A drawing that moves, bringing the drawing to “life” • A _________________that create the illusion of movement when played in succession.

10. Why use animation? Four Stroke Engine • Easier to show somebody how something works then to try and explain it. Why Use Animation? • Indicates ______________ • Illustrates ____________ • Visualizes ______________ objects • Attracts attention

11. Intro to Animation • Simulation of movementthrough a series of pictures that have objects in slightly different positions • Animation is a_______________ • Each drawing is called a “frame”(a snapshot of what’s happening at a particular moment) • RequiredFrames Per Second FPS: Facts: • Movies on film - 24 fps • TV – 30 fps 9000 frames for five minute cartoon • Computer animation_______________ • “jerky” anything less

12. Intro to Animation • In animation, each frameoverlaps the previous one • Movement is causedby rapidly displaying each frame in sequence. • creates the illusionof a moving object http://animationarchive.net/Behind%20the%20Scenes/Animation%20Basics

13. Sampling and Quantizing of Motion • Since each frame is just an image  • Sampling process – process of collecting information pieces from a general populationEach image consists of pixelsWe know that • Remember: • 10 pixels by 10 pixelsvs200 pixels by 200 pixels • More samples means better quality • More samples means bigger file sizes • Question: What else can we “Sample” with MOTION?

14. Frame Rate (Frames Per Second FPS) • Frame Rate: indicates the playback speed of the animation in frames per second • Low frame rate appears choppy • Question: BUT high frame rate can also appear choppy, WHY? • Answer: if the computer playing the animation is not fast enough to process and display the frames.

15. Types of Animation Two types of animation exist: • 2-D animation • Cel animation • Path animation • 3-D animation

16. 2-D Animation  Cel-Based Gaits of the Horse, by E. Muybridge (1834-1904) A brief history of the first animated full length feature Charlie Brown “Cel” (__________) – clear sheet material on which images were drawn by movie animators (also called traditional animation, classical animation, hand-drawn animation, frame by frame animation) Celluloid images placed on a __________ background. Background remains ___________ Object changes from frame to frame Ex. Toonz software

17. Cel Animation An animator must ___________every single frame! To simplify: one background is drawn and _______________ is drawn on a clear sheet of plastic (a cel), one drawing for each frame. When moving to the next scene, just change the background http://www.youtube.com/watch?v=jbhCUPwSrp0&feature=player_embedded

18. Cel Animation • Question: What was the first full length cel based animated movie? • Hints: • Debuted in 1937 • Over 350,000 frames • Over 1,500,000 pen and ink drawings • Stars seven rather short guys and one pasty brunette • Other examples: • Charlie Brown

19. Path Based Animation Path ends here Motion Path begins here Motion Path • Pick: • a starting point for an object, (_________) • an ending point for an object (_________) • __________ for the object to follow • And then the computer generated all the frames in between called _________________- the artist doesn’t have to draw the intermediate frames (like the artist did in cel based animation)

20. Path Based Animation Question: What name do we give to the start frame and the end frame? (not the frames that are computer generated, rather the frames drawn by us?) Question: Why is the act of generating the frames in between the first frame and the last frame called tweening? Question: The path the object follows have to be a straight line, TRUE or FALSE? Question: What software allows us to do path based animation?

21. 2-D Animation  Path-Based • Animation Software Features • _____________:speed of the animation • _____________:special effects  fade-ins, fade-outs • _____________:allows the user to pick how many times the animation repeats • _____________:playback, how many times to run animation • _____________:plays continuously until user stops it • Setting the Frames Per Second • Question: What does a bigger FPS imply? • Larger file size • More realistic motion

22. What can we do to change the motion? • If the animation appears too slow, we can speed up the motion by: • Reduce the ______________ • Increase the ______________

23. Slowing down the motion by adding more frames • Assume now that the motion is a bit too fast, 2 ways to slow it down: • Way 1: Add more frames: • Keep the frame rate the same • Increase the number of frames between the keyframes to stretch out the animation • Way 2: Lower the frame rate (go from 20fps to 5fps) • Keep the same number of frames as original but stretches out movie • Let’s See: Original Clip has 5 frames, at 20 fps, so finishes playing at 0.2 seconds, too fast! • Way 1: still have 20 fps, but add in extra frames between, now have 20 frames • Way 2: holds frame on screen for 0.2 seconds, then moves to frame 2, on screen for 0.2 second, etc….

24. Question: What is wrong with Way 2? From the text book: Digital Media Primer by Yue-Ling Wong

25. Animation  Some Terminology Keyframe Tweening Onion Skinning

26. Animation – Some Terminology Keyframe Animation:Animating a graphical object by creating smooth transitions between various keyframes, the frames that indicate the _____________________of an object's motion path. http://en.wikipedia.org/wiki/Key_frame Tweening: Short for in-betweening, the process of generating ____________________________to give the appearance that the first image evolves smoothly into the second image. • Tweening – more

27. Animation – Some Terminology Onion skinning is a 2D computer graphics term for a technique used in creating animated cartoons and editing movies to see ________________ at once Purpose: the animator or editor can make decisions on how to create or change an image based on the previous image in the sequence. Great little tutorial – take a look at it! http://www.mystery-productions.com/flash/onionskinning.html

28. 3-D Animation – Process • 3-Dimensional animation involves 3 steps: • Modelling • Animating • Rendering

29. 3-D Animation - Process • Modelling: • ______________________ • Process of creating broad contours and structure of 3D objects and scenes (draw views – top, side, cross section • Animating: • Process of defining _____________ • Defining lighting and perspective views to create change during animation • Rendering: • Give _________________color, surface textures, amounts of transparency Sample Demo

30. This is a website where all the images are created by ray tracing and computers, yet they look amazingly real (Check out the Hall of Fame): http://hof.povray.org/

31. Animation  Some Special Effects • Morphing: • Process of_________________into a series of images • Useful for showing how image might change over time Famous Faces: http://www.youtube.com/watch?v=wZurRt0TidI&NR=1 http://www.youtube.com/watch?v=h7bfCkqUuX8&NR=1

32. Animation  Some Special Effects • Morphing: • More examples

33. Animation  Some Special Effects • Warping: • Distorts a ______________ • Warp frown into smile http://www.cise.ufl.edu/~anand/students/chui/img/eg_face_warp_anim.gif

34. Animation  Some Special Effects Virtual Reality: (VR) • Creates environment where user becomes part of the experience • Boeing: flight simulators of airplane cockpits (hydraulic controlled on legs) • CD based adventure games – point and go thru doors, stairs • Hand-held equipment allows person to interact with environment A 2D cockpit for a Boeing 737. Some gauges are retained from the default MSFS 737, while others are modernized. Some non-functional controls are included in the dashboard.

35. Animated GIFS world_tsunami.gif(contains a sequence of frames in the file) monkeypoo.gif(contains by Laura’s sister in Photoshop!) Forsimple animationsuse .GIF format Special type of GIF file known as ananimated GIF/GIF89athat provides the animation you need. Animated GIFs are formally calledmulti-block GIFs A series (blocks) of still GIF images within_______________GIF file. When the GIF document is viewed, the multiple images display, quickly and in succession, and produce astreaming animation

36. Animated GIF files - continued • Characteristics of an Animated GIF: • File size is affected by: • the number of colors • amount of noise in the frames (just like other GIF files) • Only _________ colors • No ___________ 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 Plug-in: A program that permits web browser to access and execute files that the browser would not normally recognize. Flash uses Shockwave

37. Using Photoshop to make an animated gif

38. Sources of Animation Animation clip art websitesavailable on Internet for freeor at cost:http://www.animation-central.com/misc.htm The ones for a cost are more professional and creative Create each imagethat corresponds to a frame using a draw or paint program Create animationswith software (Photoshop, Flash) Multimedia authoring programs like Macromedia Director allow you to easily create path animations

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

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

41. Animation Software • Flash Professional CS3–? • A multimedia authoring and playback system • Launched in 1996 by Macromedia/ Adobe bought in 2005 • Flash became popular for its animated graphics • Responsible for much of the animations, advertisements and video components found on today's Web sites • Flash is the industry's most advanced authoring environment for creating interactive websites, digital experiences and mobile content. Cool Websites that use Flash: http://www.zapiram.es/ http://www.pablogaribay.com/

42. Animation Software Why Is Flash So Popular? • Professional designs • Interactive content rich with video, graphics, animation • Import multimedia elements from other applications • Support _____________ 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 __________________ that 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

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

44. Essential Flash Terminology • Question: What kind of tween would have been used in this Flash animation? • Stage: rectangular area where the visible motion will take place • Timeline: series of frames in a row and stacks of layers. Indicates key frames, regular frames and empty frames • Shape: basic shapes drawn with the shape tools, line tool or a single letter • Symbol: store in a library and can be reused. Changes to the library symbol will result in changes in all of the copies of this symbol currently on the stage. • Graphic: static graphic, can be used in other symbos • Button: interactive part of animation with user, responds to mouse clicks and rollovers. • Movieclip: reusable piece of animation, can turn a simple animation into a movieclip symbol and reuse it.

45. Essential Flash Terminology Tweening: Creating the intermediate frames based on the starting keyframe and ending keyframe. There are 2 types of tweens: Motion Guide: lets you animation an object along a path that you draw yourself. Only works with symbols

46. Animation in the Movies Animation History: http://www.youtube.com/watch?v=SaJxnTf44eg&feature=related 1995 • Digital Video • 1983 Star Trek  the Wrath of Khan – dead planet transformed to lush earth-like habitat • http://en.wikipedia.org/wiki/TWOK#Effects • Digital Animation • What was the first full length film that was created entirely with digital animation. • What year did it come out?

47. Animation in the Movies Making of the Titanic Making of the Titanic Short Clip From Titanic

48. Animation in the Movies • Movies - Visual effects: • Terminator II liquid metal cyborg • Jurassic Park dinosaurs • Titanic • Star Wars

49. Animation in the Movies 12 Highest Gross Earnings made so far by Computer Generated Animations worldwide at of 2007. Can anyone guess what was the highest grossing computer generated film? • 01: $881 million - Shrek 2 (Dreamworks) • 02: $865 million - Finding Nemo (Pixar) • 03: $624 million - The Incredibles(Pixar) • 04: $624 million - Ice Age 2 (Bluesky) • 05: $529 million - Monster Inc. (Pixar) • 06: $486 million - Toy Story 2 (Pixar) • 07: $455 million - Shrek (Dreamworks) • 08: $455 million - Cars (Pixar) • 09: $406 million - Madagascar (Dreamworks) • 10: $378 million - Ice Age (Bluesky) • 11: $358 million - Toy Story (Pixar) • 12: $358 million - A bug's life (Pixar)

50. Let’s Review Name two types of 2-D animation. What is the term for the computer generated frames between the starting frame and ending frame?