1 / 36

CSC 8610 & 5930 Multimedia Technology

CSC 8610 & 5930 Multimedia Technology. Lecture 7 Animation Techniques. Today in class (4/16). 6:15 Recap, Reminders 6:20 Project discussion 6:45 Lecture – Animation 7:30 Break 7:45 Lecture - Animation (cont’d) 9:00 Wrap. Animation Techniques. Animation. Like video A sequence of images

deva
Download Presentation

CSC 8610 & 5930 Multimedia Technology

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. CSC 8610 & 5930Multimedia Technology Lecture 7 Animation Techniques

  2. Today in class (4/16) • 6:15 Recap, Reminders • 6:20 Project discussion • 6:45 Lecture – Animation • 7:30 Break • 7:45 Lecture - Animation (cont’d) • 9:00 Wrap

  3. Animation Techniques

  4. Animation • Like video • A sequence of images • Create illusion of movement when played in succession • Commonly used in multimedia projects

  5. Creating Animation • Video editing programs • Multimedia authoring programs: • Adobe Flash, Adobe Director • Often frame-based

  6. Frame-based • Animation sequence is created as a sequence of frames • Usually on a timeline

  7. What a Timeline Look Like in Adobe Flash Frame numbers A layer with a seqence of frames

  8. Types of Techniques to Create Animation in Multimedia Authoring Program • Frame-by-frame • Tweening • Scripting

  9. Frame by frame

  10. Frame-by-Frame • By explicitly placing different visual content for each frame • Each frame is a keyframe. • Like flipbook animation“Flip Book Animation 1”“Flip Book Animation 2”

  11. Keyframe • A frame in which the content is explicitly specified. • Different from a frame in which the content is interpolated between frames.

  12. Frame-by-Frame Example Frame: 1 2 3 4 5 6 7

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

  14. More Examples • Post-It Note Animations • How to Create Walking Animation

  15. tweened Animation

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

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

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

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

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

  21. Example of Shape Tweened Bird Frame 1 Frame 50 Frame 10 Frame 60 Frame 20 Frame 70 Frame 30 Frame 80 Animation playing 30 fps Frame 40

  22. Example of Shape Tweened Bird • Position (tweened) • Rotation • Size (tweened) • Color • Opacity (tweened) • Shape (tweened) Animation playing 30 fps

  23. Scripted Animation

  24. Examples of Scripted vs Timeline • Creating Animated GIFs (timeline) • Adobe Flash with Tweening (scripted) • PowerPoint animation (scripted)

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

  26. Frame-by-Frame vs. Tweened vs. Scripted

  27. Frame-by-Frame vs. Tweened vs. Scripted

  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

  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

  30. Animation Frame Rate Setting in Multimedia Authoring Programs • Maximum rate • The playback will: • not exceed the frame rate setting • not gurantee to maintain the frame rate(slower computer may play at frame rate lower than the setting)

  31. Adjusting Speed of a Frame-based Animation Suppose you have a frame-based animation and want to change its playback speed. General Strategy: Avoid eliminating frames if possible

  32. Adjusting Speed of a Frame-based Animation • To speed up: • Increase frame rate if possible and keep the number of frames (preferred) • Keep the frame rate but reduce the number of frames (not preferred) • To slow down: • Keep frame rate but add more frames (preferred) • Reduce frame rate but keep the number of frames

  33. Example of Adjusting Speed Suppose you have this 5-frame animation and you want to slow it down. Frame 1 Frame 2 Frame 3 Frame 4 Frame 5

  34. Example of Adjusting Speed Suppose you have this 5-frame animation and you want to slow it down. If you reduce the frame rate and keep the same frame number:

  35. Example of Adjusting Speed Suppose you have this 5-frame animation and you want to slow it down. If you reduce frame rate and keep the same frame number: If you keep the frame rate and add more frames:

  36. Broader Context and Application • Imagine – from Pencils to Pixels • History of Computer Animation (2 parts) • Torsten Reil builds better animations (TED Talk) • David Bolinsky animates a cell (TED Talk)

More Related