1. EEE3112 Introduction to Multimedia Application & Technology Chapter 2: Animation Development by Muhazam Mustapha, September 2012

2. Learning Outcome By the end of this chapter, students are expected to be ready to demonstrate the required skill for CO2: –Basic nomenclature of animation –Publishing simple animation –Embedding audio –Merging works –Simple interactivity

3. Chapter Content Terminologies Animation Audio Team Planning Interactivity

4. Terminologies

5. Definitions Animation is a product of frame-by-frame computation of graphics (images) Animation is a type of multimedia that is widely used in the internet to improve human appreciation It is, however, should be used sparingly as it consumes a lot of bandwidth Terminologies that we are going to use is based from Adobe Flash as we are going to use this software for our class

6. Definitions Frame: Temporal (time-based) drawing in an animation – can be considered as frames in film Frame Rate: No. frames per sec. More frame rate, the better the animation, but requires more computing resources Key Frame: Frames where the start of animation effect (changes) is calculated Tween: Frames that are computed based on the operation defined at key frames Symbol: An object in Flash that points to a separate copy

7. Animation

8. Animation Techniques Traditional Animation –Full animation: Detailed drawing of frames realistic motion. Used by animation giants like Walt-Disney –Limited animation: Stylized drawing of frames. Used in most of Japanese animes. –Rotoscoping: Frames obtained from real life action, then re-drawn by animators frames-by-frame –Live-action/animation: Mixture of animation and life action like in Who Framed Roger Rabbit. [Source: http://en.wikipedia.org/wiki/Animation]

9. Animation Techniques Stop animation –The animation that is done by snapping the stopped movement of object frame-by-frame to create the illusion of motion Examples: –Puppet animation: the object is made of puppet – as in Robot Chicken –Clay animation: the object is made of clay – as in Chicken Run –Cutout animation: the object is made of paper or cloth cutting – as in South Park [Source: http://en.wikipedia.org/wiki/Animation]

10. Animation Techniques Computer animation –Digitized and computerized approach to animation –2D animation animation based on 2D images examples include animated GIF, Flash and Powerpoint animations –3D animation animation based on 3D digital mesh the mesh would be associated to a digital skeleton / bone that would be moved by the animator would normally utilize sophisticated motion capture [Source: http://en.wikipedia.org/wiki/Animation]

11. The latest most advanced technique to create 3D animation Uses life actors whose movement would be captured and used to move digital characters in animation – normally using markers Motion Capturing

12. Two types: –Passive markers: markers REFLECT light and triangulated by a few cameras from different angles to get 3D position –Active markers: markers PRODUCE light and triangulated by a few cameras from different angles to get 3D position [Source: http://en.wikipedia.org/wiki/Motion_capture] Motion Capturing

13. Two types: –Passive markers: markers REFLECT light and triangulated by a few cameras from different angles to get 3D position –Active markers: markers PRODUCE light and triangulated by a few cameras from different angles to get 3D position [Source: http://en.wikipedia.org/wiki/Motion_capture] Motion Capturing

14. Workspace {{}} Stage Property Inspector & Library Timeline of Layers & Motion Editor (Demo)

15. Create Animation {{}} Insert Symbol Key Frame Insert Tween Publishing (Demo)

16. Audio

17. Acquiring Audio {{}} Use your own method Can use MS Sound Recorder (Demo)

18. Embedding Audio {{}} Audio Symbol Trimming & Fading (Demo)

19. Team Planning

20. Job Distribution Since the assignment would be a group assignment, proper job distribution is important The task is best divided by timeline (frame) and layers First, the plan for the animation must be put on a storyboard and agreed upon Next, sound should be recorded in a few sessions Layers and symbols should then be created

21. Job Merging Finally the separate works would be combined The layers from separate animations would be copied into the master copy If there is any new symbols created in the separate animations it must be copied into the master first then the layer can be merged

22. Interactivity

23. Buttons {{}} Flash defines buttons as symbols that has STATES as timeline (instead of time value) Define states: Up, Over, Down, Hit Naming Instance

24. ActionScript {{}} We will only cover navigating scripts