Introduction to Multimedia Lecture #8 Animation Instructors: Mohamed MAGANGA
description
Transcript of Introduction to Multimedia Lecture #8 Animation Instructors: Mohamed MAGANGA
Introduction to Multimedia
Lecture #8Animation
Instructors: Mohamed MAGANGA
Today’s Agenda
1. Announcements2. Warm Up 3. Today’s Lecture
Lecture #7 (finish history)
Lect # 8: Animation Lect 9: Video part 1 (hopefully start)
4 Lectures Left•Video (2)•Sound (1) •Review (1)
Overview of Today’s TopicsOverview 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
Announcements 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 They will take you longer than you think, give yourself
LOTS of time to do them.LOTS of time to do them. Check that your P: drive works!Check that your P: drive works!
Final Exam: Wednesday April 14 2:00 PM Wednesday April 14 2:00 PM Location: Thames Hall GymLocation: Thames Hall Gym 2 hour exam2 hour exam All multiple choice questionsAll multiple choice questions About 150 questions About 150 questions
AnnouncementsFinal Exam Note: you must get a weighted average of at least 45% on the final exam and major assignment
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 average would 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%.
http://www.csd.uwo.ca/courses/CS1033/And go to Course Outline
Warm up Questions: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
Warm Up QuestionsIf 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
a) Trueb) False
Which of the following is the most important in terms of getting your website ranked highly in Google.
a) A domain name with good keywords in itb) The number of links from your page to other pagesc) The number of links from other pages to your paged) Having good keywords in the titlee) Have good meta tag keywords.
Today’s Agenda1. Introduction to Animation2. What is Animation3. Types of Animation4. File Types of animation5. Using Flash to build you
animation 6. Animation terminology
3D Animation, Morphing, Tweening, Onion Skinning etc.
7. Animated GIFs8. History of Animation9. Animation in Movies10.10. LOTS OF VIDEOS TODAY LOTS OF VIDEOS TODAY
Sit back and enjoy Sit back and enjoy
Intro to Animation What is animation?
A drawing that moves, bringing the drawing to “life”
A _________________that create the illusion of movement when played in succession.
http://www.youtube.com/watch?v=8SBfN9ltF8c
Animation is a powerful tool capable of communicating complex ideas How the heart beats http://www.smm.org/heart/heart/top.html
Easier to show somebody how something works then to try and explain it
Why use animation?Why use animation? Easier to show somebody how something
works then to try and explain it.
Why Use Animation? Indicates ______________
Illustrates ____________
Visualizes ______________ objects
Attracts attention
Four Stroke Engine
Simulation of movement through 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)
Required Frames Per Second FPS:
Intro to Animation
Facts:•Movies on film - 24 fps•TV – 30 fps
9000 frames for five minute cartoon
•Computer animation _______________•“jerky” anything less
Intro to Animation In animation, each frame overlaps
the previous one Movement is caused by rapidly
displaying each frame in sequence.
creates the illusion of a moving object
http://animationarchive.net/Behind%20the%20Scenes/Animation%20Basics
Sampling and Quantizing of Sampling and Quantizing of MotionMotion
Since each frame is just an image Sampling process – process of collecting Sampling process – process of collecting
information pieces from a general populationinformation pieces from a general populationEach image consists of pixelsWe know that
Remember:Remember: 10 pixels by 10 pixels vs 200 pixels by 200 pixels More samples means better quality better quality More samples means bigger file sizes bigger file sizes
Question: What else can we “Question: What else can we “SampleSample” ” with MOTION?with MOTION?
Frame Rate (Frames Per Second Frame Rate (Frames Per Second FPS)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.
Types of Animation
Two types of animation exist:
•2-D animation•Cel animation
•Path animation
•3-D animation
2-D Animation Cel-Based
“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
Gaits of the Horse, by E. Muybridge (1834-1904)
A brief history of the first animated full length feature
Charlie Brown
Cel AnimationCel 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
Cel AnimationCel 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
Path Based AnimationPath Based Animation 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)
Path ends here
Motion Path
Motion Path begins here
Path Based AnimationPath 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?
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
2-D Animation Path-Based
Question: What does a bigger FPS imply?Larger file sizeMore realistic motion
What can we do What can we do to change the motion?to change the motion? If the animation appears too slow, we can
speed up the motion by: Reduce the ______________ Increase the ______________
Slowing down the motion Slowing down the motion by adding more framesby 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 sameKeep the frame rate the same Increase the number of frames between the keyframes to Increase the number of frames between the keyframes to
stretch out the animationstretch out the animation Way 2: Lower the frame rate (go from 20fps to 5fps)
Keep the same number of frames as original but stretches Keep the same number of frames as original but stretches out movieout movie
Let’s See: Original Clip has 5 frames, at 20 fps, so finishes playing at 0.2 seconds, too fast!
Way 1Way 1: still have 20 fps, but add in extra frames between, : still have 20 fps, but add in extra frames between, now have 20 framesnow have 20 frames
Way 2: Way 2: holds frame on screen for 0.2 seconds, then moves holds frame on screen for 0.2 seconds, then moves to frame 2, on screen for 0.2 second, etc….to frame 2, on screen for 0.2 second, etc….
Question: What is wrong with Way 2?Question: What is wrong with Way 2?
From the text book: Digital Media Primer by Yue-Ling Wong
Animation Some Terminology Keyframe Tweening Onion Skinning
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
Onion skinning is a 2D computer graphics term for a technique used in creating animated cartoons and editing movies to see ________________ at once
Great little tutorial – take a look at it!
http://www.mystery-productions.com/flash/onionskinning.html
Purpose: the animator or editor can make decisions on how to create or change an image based on the previous image in the sequence.
Animation – Some Terminology
3-D Animation – Process
3-Dimensional animation involves 3 steps: Modelling Animating Rendering
• 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
3-D Animation - Process
http://hof.povray.org/
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):
Morphing: Process of
_________________into a series of images
Useful for showing how image might change over time
Animation Some Special Effects
Famous Faces: http://www.youtube.com/watch?v=wZurRt0TidI&NR=1
http://www.youtube.com/watch?v=h7bfCkqUuX8&NR=1
Morphing: More examples
Animation Some Special Effects
Warping: Distorts a
______________ Warp frown into smile
Animation Some Special Effects
http://www.cise.ufl.edu/~anand/students/chui/img/eg_face_warp_anim.gif
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.
Animated GIFS For simple animations use .GIF format
Special type of GIF file known as an animated GIF/GIF89a that provides the animation you need.
Animated GIFs are formally called multi-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 a streaming animation
world_tsunami.gif(contains a sequence of
frames in the file)
monkeypoo.gif(contains by Laura’s sister
in Photoshop!)
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
Using Photoshop to make an animated gif
Sources of Animation Animation clip art websites available on Internet for free or at cost:
http://www.animation-central.com/misc.htm The ones for a cost are more professional and creative
Create each image that corresponds to a frame using a draw or paint program
Create animations with software (Photoshop, Flash) Multimedia authoring programs like Macromedia Director allow
you to easily create path animations
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
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
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/
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
Animation Software.swf originally meant “Shockwave Flash” but now “Small Web Format”
flv (used on YouTube) or swf (Flash Animations) ?
Animated GIF Flash DirectorCreated by Depends Flash DirectorExtension Source depends
.gif (movie).fla (source).swf (movie)
.dir (source)
.dcr (movie)
Size Larger than normal gif
Vector images take up less space than GIF bitmapped images
Vector images take up less space than GIF bitmapped images
Uses Banners, small areas
Interactive video, graphics, animation
More interactive sites
Need to play it Nothing Flash Player (Free and works with most browsers)
Web browser plug in (The Shockwave Player)
No sound
Sound Sound
Essential Flash Essential Flash TerminologyTerminology
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.
Essential Flash TerminologyEssential 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
Motion Tween Shape TweenWorks with symbols only Works with shapes only
Can’t morph (only movement) Can morph shapes
Only one symbol per layer if the symbol will have a motion tween
Can have more than one shape per layer but be careful, depends on what you want to morph
Can be used with motion guide Can’t use motion guide
Animation in the Movies
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?
1995
Animation History: http://www.youtube.com/watch?v=SaJxnTf44eg&feature=related
Animation in the Movies
Short Clip From Titanic
Making of the Titanic Making of the Titanic
Animation in the Movies
Movies - Visual effects: Terminator II liquid metal cyborg Jurassic Park dinosaurs Titanic Star Wars
Animation in the Movies
12 Highest Gross Earnings made so far by Computer Generated Animations worldwide
at of 2007.
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)
Can anyone guess what was the highest grossing computer generated
film?
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?