eee3112 introduction to multimedia application & technology chapter 2: animation development by...
TRANSCRIPT
![Page 1: EEE3112 Introduction to Multimedia Application & Technology Chapter 2: Animation Development by Muhazam Mustapha, September 2012](https://reader035.vdocument.in/reader035/viewer/2022062516/56649e555503460f94b4c9f0/html5/thumbnails/1.jpg)
EEE3112Introduction to Multimedia Application & Technology
Chapter 2: Animation Development
by Muhazam Mustapha, September 2012
![Page 2: EEE3112 Introduction to Multimedia Application & Technology Chapter 2: Animation Development by Muhazam Mustapha, September 2012](https://reader035.vdocument.in/reader035/viewer/2022062516/56649e555503460f94b4c9f0/html5/thumbnails/2.jpg)
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
![Page 3: EEE3112 Introduction to Multimedia Application & Technology Chapter 2: Animation Development by Muhazam Mustapha, September 2012](https://reader035.vdocument.in/reader035/viewer/2022062516/56649e555503460f94b4c9f0/html5/thumbnails/3.jpg)
Chapter Content
• Terminologies
• Animation
• Audio
• Team Planning
• Interactivity
![Page 4: EEE3112 Introduction to Multimedia Application & Technology Chapter 2: Animation Development by Muhazam Mustapha, September 2012](https://reader035.vdocument.in/reader035/viewer/2022062516/56649e555503460f94b4c9f0/html5/thumbnails/4.jpg)
Terminologies
![Page 5: EEE3112 Introduction to Multimedia Application & Technology Chapter 2: Animation Development by Muhazam Mustapha, September 2012](https://reader035.vdocument.in/reader035/viewer/2022062516/56649e555503460f94b4c9f0/html5/thumbnails/5.jpg)
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
![Page 6: EEE3112 Introduction to Multimedia Application & Technology Chapter 2: Animation Development by Muhazam Mustapha, September 2012](https://reader035.vdocument.in/reader035/viewer/2022062516/56649e555503460f94b4c9f0/html5/thumbnails/6.jpg)
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
![Page 7: EEE3112 Introduction to Multimedia Application & Technology Chapter 2: Animation Development by Muhazam Mustapha, September 2012](https://reader035.vdocument.in/reader035/viewer/2022062516/56649e555503460f94b4c9f0/html5/thumbnails/7.jpg)
Animation
![Page 8: EEE3112 Introduction to Multimedia Application & Technology Chapter 2: Animation Development by Muhazam Mustapha, September 2012](https://reader035.vdocument.in/reader035/viewer/2022062516/56649e555503460f94b4c9f0/html5/thumbnails/8.jpg)
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]
![Page 9: EEE3112 Introduction to Multimedia Application & Technology Chapter 2: Animation Development by Muhazam Mustapha, September 2012](https://reader035.vdocument.in/reader035/viewer/2022062516/56649e555503460f94b4c9f0/html5/thumbnails/9.jpg)
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]
![Page 10: EEE3112 Introduction to Multimedia Application & Technology Chapter 2: Animation Development by Muhazam Mustapha, September 2012](https://reader035.vdocument.in/reader035/viewer/2022062516/56649e555503460f94b4c9f0/html5/thumbnails/10.jpg)
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]
![Page 11: EEE3112 Introduction to Multimedia Application & Technology Chapter 2: Animation Development by Muhazam Mustapha, September 2012](https://reader035.vdocument.in/reader035/viewer/2022062516/56649e555503460f94b4c9f0/html5/thumbnails/11.jpg)
• 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
![Page 12: EEE3112 Introduction to Multimedia Application & Technology Chapter 2: Animation Development by Muhazam Mustapha, September 2012](https://reader035.vdocument.in/reader035/viewer/2022062516/56649e555503460f94b4c9f0/html5/thumbnails/12.jpg)
• 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
![Page 13: EEE3112 Introduction to Multimedia Application & Technology Chapter 2: Animation Development by Muhazam Mustapha, September 2012](https://reader035.vdocument.in/reader035/viewer/2022062516/56649e555503460f94b4c9f0/html5/thumbnails/13.jpg)
• 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
![Page 14: EEE3112 Introduction to Multimedia Application & Technology Chapter 2: Animation Development by Muhazam Mustapha, September 2012](https://reader035.vdocument.in/reader035/viewer/2022062516/56649e555503460f94b4c9f0/html5/thumbnails/14.jpg)
Workspace {{}}• Stage• Property Inspector & Library• Timeline of Layers & Motion Editor
• (Demo)
![Page 15: EEE3112 Introduction to Multimedia Application & Technology Chapter 2: Animation Development by Muhazam Mustapha, September 2012](https://reader035.vdocument.in/reader035/viewer/2022062516/56649e555503460f94b4c9f0/html5/thumbnails/15.jpg)
Create Animation {{}}• Insert Symbol• Key Frame• Insert Tween• Publishing
• (Demo)
![Page 16: EEE3112 Introduction to Multimedia Application & Technology Chapter 2: Animation Development by Muhazam Mustapha, September 2012](https://reader035.vdocument.in/reader035/viewer/2022062516/56649e555503460f94b4c9f0/html5/thumbnails/16.jpg)
Audio
![Page 17: EEE3112 Introduction to Multimedia Application & Technology Chapter 2: Animation Development by Muhazam Mustapha, September 2012](https://reader035.vdocument.in/reader035/viewer/2022062516/56649e555503460f94b4c9f0/html5/thumbnails/17.jpg)
Acquiring Audio {{}}• Use your own method• Can use MS Sound Recorder
• (Demo)
![Page 18: EEE3112 Introduction to Multimedia Application & Technology Chapter 2: Animation Development by Muhazam Mustapha, September 2012](https://reader035.vdocument.in/reader035/viewer/2022062516/56649e555503460f94b4c9f0/html5/thumbnails/18.jpg)
Embedding Audio {{}}• Audio Symbol• Trimming & Fading
• (Demo)
![Page 19: EEE3112 Introduction to Multimedia Application & Technology Chapter 2: Animation Development by Muhazam Mustapha, September 2012](https://reader035.vdocument.in/reader035/viewer/2022062516/56649e555503460f94b4c9f0/html5/thumbnails/19.jpg)
Team Planning
![Page 20: EEE3112 Introduction to Multimedia Application & Technology Chapter 2: Animation Development by Muhazam Mustapha, September 2012](https://reader035.vdocument.in/reader035/viewer/2022062516/56649e555503460f94b4c9f0/html5/thumbnails/20.jpg)
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
![Page 21: EEE3112 Introduction to Multimedia Application & Technology Chapter 2: Animation Development by Muhazam Mustapha, September 2012](https://reader035.vdocument.in/reader035/viewer/2022062516/56649e555503460f94b4c9f0/html5/thumbnails/21.jpg)
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
![Page 22: EEE3112 Introduction to Multimedia Application & Technology Chapter 2: Animation Development by Muhazam Mustapha, September 2012](https://reader035.vdocument.in/reader035/viewer/2022062516/56649e555503460f94b4c9f0/html5/thumbnails/22.jpg)
Interactivity
![Page 23: EEE3112 Introduction to Multimedia Application & Technology Chapter 2: Animation Development by Muhazam Mustapha, September 2012](https://reader035.vdocument.in/reader035/viewer/2022062516/56649e555503460f94b4c9f0/html5/thumbnails/23.jpg)
Buttons {{}}• Flash defines buttons as symbols that has
STATES as timeline (instead of time value)• Define states: Up, Over, Down, Hit• Naming Instance
![Page 24: EEE3112 Introduction to Multimedia Application & Technology Chapter 2: Animation Development by Muhazam Mustapha, September 2012](https://reader035.vdocument.in/reader035/viewer/2022062516/56649e555503460f94b4c9f0/html5/thumbnails/24.jpg)
ActionScript {{}}• We will only cover navigating scripts