1. Animation

2. Animation Defined Like video: illusion of motion using sequence images minimally differ from each other. Different from Video: each frame is designed, and created instead of live action being recorded. Definition: the process of creating the illusion of motion and shape change by means of the rapid display of a sequence of static images that minimally differ from each other.illusionmotion 2

3. How animations work The illusion—as in motion pictures in general—is thought to rely on the phi phenomenon/Persistence of Vision.phi phenomenon A sequence of images – Create illusion of movement when played in succession Animators are artists who specialize in the creation of animation. Animators

4. Media and Playback Animation can be recorded on eitherrecorded – analogue media: such as a flip book, motion picture film, video tape,flip bookmotion picture film – or on digital media, such as animated GIF, Flash animation or digital video.digital mediaanimated GIFFlash animation To display animation, a digital camera, computer, or projector are used along with new technologies that are produced.digital cameraprojector

5. History https://en.wikipedia.org/wiki/History_of_ani mation https://en.wikipedia.org/wiki/History_of_ani mation http://history-of-animation.webflow.io/ http://video.mit.edu/watch/history-of- animation-3391/ http://video.mit.edu/watch/history-of- animation-3391/ http://www.usca.edu/swygert/animation/hist ory.htm http://www.usca.edu/swygert/animation/hist ory.htm

6. History of Animation Early animations (before 1910), consisted of simple drawings photographed one at a time. – extremely labor intensive, hundreds of drawings per minute of film. The development of celluloid around 1913 quickly made animation easier to manage. – Use of clear plastics, transparent except for where drawings are painted on it. – make a complex background and/or foreground and sandwich moving characters in between several other pieces of celluloid – Only has to draw the parts that have changed.

7. History of Animation Walt Disney took animation to a new level. – first animator to add sound to his movie cartoons with the premiere of Steamboat Willie in 1928. – In 1937, produced the first full length animated feature film, Snow White and the Seven Dwarfs. With the introduction of computers, animation took on a whole new meaning. – Many feature films of today had animation incorporated into them – Toy Story, the first full length feature film animated entirely on computers when it was released in 1995. With the advent of personal computers, it has now become possible for the average person to create animations.

8. Animation Techniques/Methods http://www.filmeducation.org/resources/primary/teaching_with_film/pri mary_animation/animation_techniques/ http://www.filmeducation.org/resources/primary/teaching_with_film/pri mary_animation/animation_techniques/ Drawn animation: – Flipbook: draw each frame individually – Cel Animation: use of clear plastics (or layers on computers) Cut-out animation: use paper to cut shape/characters and etc., used in 2D animations; Claymation/Stop Motion: use clay, wire, plasticine to make 3D models Computer Animation: done on the computer with computer software

9. Cel Animation Cel animation: – Only have to re-create the parts that change – Use paintings on clear plastic – Can have a background that is larger than the frame and “slides” past – Disney, Snow White 1937 – “Simpsons” First 14 episodes were hand painted takes 6-8 Months per episode Subsequent episodes used digital-ink-and-paint to mimic hand-painted cells

10. Cel Animation https://en.wikipedia.org/wiki/Traditional_animation#Cels

11. Cut-out animation Any form of animation where cut-out shapes are moved around or replaced by other cut- outs. – Flat objects like buttons, matchsticks and string can also be used in this form of animation. – Cut-outs can also be laid on top of drawings. – Quick and easy to do but difficult to have more than one or two objects moving at the same time. – animation can appear very stiff and awkward. https://en.wikipedia.org/wiki/Cutout_animation

12. Cut-out animation: South Park Pilot was cut-out animation Subsequent episodes used computer animation that mimicked cut-outs Added some live film in later episodes Late added some shadowing effects South Park takes 6 weeks

13. Claymation/Stop Motion 3-D model producing 2-D images – build the model – set the lighting – set the camera position and angle – make a frame – move the model and make another frame – Repeat until you are done… – Example include Gumby, Wallace and Gromit – Very time-consuming! Wallace and Gromit – 30 frames per day, 5 years to produce

14. 3-D model, 2-D images Using a computer-based 3-D modeling software – build the model (in the computer) – define light source(s) (in the computer) – define camera position and angle (in the computer) – define the object(s) movement (in the computer) – render the frames – 3-D computer modeling Toy Story A Bug’s Life Monsters Jimmy Neutron – Open Source Software: Blender

15. Creating 2D Animation Using Flash Multimedia authoring programs: – Adobe Flash, Adobe Director – Often frame-based Animation sequence is created as a sequence of frames Usually on a timeline 15 Frame numbers A layer with a seqence of frames

16. Types of Techniques to Create Animation in Flash Frame-by-frame Tweening Scripting/Programming with ActionScript 16

17. Frame-by-Frame By explicitly placing different visual content for each frame Each frame is a keyframe. – A frame in which the content is explicitly specified. – Different from a frame in which the content is interpolated between frames. Like flipbook animation http://www.youtube.com/watch?v=FH97UerMW6I http://www.youtube.com/watch?v=zO8MlSjo0T0 17

18. Quick Tutorials https://www.youtube.com/watch?v=jS3lRTL5 Mk8 https://www.youtube.com/watch?v=jS3lRTL5 Mk8 https://www.youtube.com/watch?v=Dvxtg2Zu TGg https://www.youtube.com/watch?v=Dvxtg2Zu TGg

19. Frame-by-Frame Example 19 Frame:1 234567

20. Frame-by-Frame Example 20 Frame 1 Frame 2 Frame 3 Frame 4 Frame 5 Frame 6 Frame 7 Frame 8 Frame 9 Animation playing 2 fps

21. Tweened Animation Content in frames between 2 keyframes is interpolated These interpolated frames are called in- between frames. 21

22. What Does Interpolation Mean? Example: Suppose a bird in the first keyframe (frame 1) is at x = 11 and at x = 20 in the second keyframe (frame 10). Linear interpolation of the bird's x will make the bird at: – x = 12 in frame 2 – x = 13 in frame 3 – x = 14 in frame 4 –... and so forth 22

23. Continuing with the Bird Example In tweened animation, – what you need to do: create 2 keyframes: frames 1 and 10 only explicitly place the bird at x=11 in frame 1 and x=20 in frame – what the computer do for you: place the bird at x=12 in frame 2 place the bird at x=13 in frame 3... place the bird at x=19 in frame 9 23

24. Example of Bird Tweening Position 24 Frame 1 Frame 2 Frame 3 Frame 4 Frame 5 Frame 6 Frame 7 Frame 8 Frame 9 Animation playing 2 fps

25. What can be tweened? Position (shown in the bird example) Rotation Size Color Opacity Shape 25

26. Linear vs. Quadratic Interpolation Linear interpolation: – Object move at constant speed throughout the course of animation; – Instantaneous start and stop of object making movement not realistic; Quadratic interpolation: – Object has acceleration when starting to move and deceleration when stopping; – In flash, using Easing in and Easing out to engage quadratic interpolation so motion can increase and decrease gradually and in turn looks more realistic.

27. Animation by Scripting/Programming Does not rely on a sequence of frames on timeline Dynamic: – Animation can be programmed to respond to the user's interaction – Animation can be different in a different play through 27

28. Animation Frame Size Width and height of the animation In multimedia authoring programs, such as Adobe Flash and Director: – determined by the stage dimension – also in pixels 28

29. Animation Frame Rate Playback speed of the animation In frames per second (fps) Too low: choppy Too high: choppy if the computer is not fast enough to process and display the frames 29

30. Exporting Animation Three formats animations are exported in: GIF, Flash and Video Video is used when exported animation will be broadcast or played on television in video format  Sound track can be added and mixed into video;  Compression can be applied in exporting process;

31. Exporting Animation in Flash Flash is best used for vector graphics based animation; Provides efficient transmission on the internet with smaller file size compared to video or GIF format; For animations providing user interactions, flash is the format to use; Flash can also be used to develop interactive games and websites.

32. 1.https://en.wikipedia.org/wiki/Animationhttps://en.wikipedia.org/wiki/Animation 2.https://en.wikipedia.org/wiki/History_of_animationhttps://en.wikipedia.org/wiki/History_of_animation 3.Other references directly linked on individual slides. References