Date post: | 12-Jan-2016 |
Category: |
Documents |
Upload: | jocelyn-richard |
View: | 218 times |
Download: | 2 times |
ANIMATIONANIMATIONComputer Science 1033 – Week 8
“Live action writers will give you a structure, but who the hell is talking about structure? Animation is closer to jazz than some kind of classical stage structure.” Ralph Bakshi
Golden Years of Animation
Weirdness
Slide 2 of 48
Overview of Today’s TopicsOverview of Today’s TopicsAnnouncementsHints about assignment 3How to do Assignment 3Finish Page Rank/GoogleAnimation
Slide 3 of 48
Announcements Announcements Assignment 3
Due NEXT Friday, HAND IT IN ON WEDNESDAY NOTE: people who leave it till Friday ALWAYS have problems!
Major Assignment (assignment 4) due Thursday, April 2nd.
If you have Windows 7, you wont have movie maker, you can get it for free here: http://explore.live.com/windows-live-essentials
April 23, 7pmBring:
Pencil (soft) and eraserStudent card
Do NOT bring: calculator, ipod, hat, etc..
Slide 4 of 48
Demo of how to do Demo of how to do Assignment 3Assignment 3http://publish.gaul.csd.uwo.ca/vivi/as
sign3spring2015/Assignment3Spring2015.html
http://publish.gaul.csd.uwo.ca/vivi/assign3spring2015/images/
http://publish.gaul.csd.uwo.ca/vivi/assign3spring2015/assignment3_content.txt
http://publish.gaul.csd.uwo.ca/vivi/assign3spring2015/images/logo_shishlogo.jpg
http://www.csd.uwo.ca/~lreid/cs1033/assignment3/example/
Slide 5 of 48
AnnouncementsAnnouncementsAssignment 3 – things I forgot to
mention last week!◦Links that go OFF your site should open
a new tab (so not your buttons, but links to anywhere away from your site) (e.g. your references)
◦Headings at the top of each page as well as titles
Slide 6 of 48
Announcements Announcements Assignment 3
◦IT will take you longer than you think, give yourself LOTS of time to finish it and to hand it in (Hand it in on before Wednesday, the labs will be VERY busy on Thursday and Friday).
◦Hints: Remember your titles Think about layout, consistency, ease of use! Follow the specs Use a table for a clean layout (put the banner
in the top row and content in the bottom row) Common Mistakes
http://www.csd.uwo.ca/~lreid/cs1033/assignment3/SamplesOfCommonMistakes/
Slide 7 of 48
Announcements Announcements Assignment 3 Hints
THINGS THAT CAN GO HORRIBLY WRONG http://publish.gaul.csd.uwo.ca/lreid/other/student
1/http://publish.gaul.csd.uwo.ca/lreid/other/student
2/index.htmlhttp://publish.gaul.csd.uwo.ca/lreid/other/student
3/assign3/
http://publish.gaul.csd.uwo.ca/lreid/other/student7/assign3/
http://publish.gaul.csd.uwo.ca/lreid/other/student9/major/index.html
THINGS THAT CAN GO RIGHT http://publish.gaul.csd.uwo.ca/lreid/other/student
8/assign3/index.html
This term
Slide 8 of 48
Hints for assignment 3Hints for assignment 3Remember:
◦ Titles◦ Headers◦ File names, spaces, lowercase◦ Images
Hotspots Alt, Title Size within page On each page
◦ Banner ◦ No Scrolling horizontal/vertically
to see buttons◦ Consistency◦ Buttons look, ease of use
◦ Back to top◦ References page layout◦ Text colours, contrast◦ Broken links
Check from a different computer!
◦ Underlining◦ Colours
Link Colours◦ Paragraphs◦ Padding◦ Followed the instructions
(make the anchor links, etc..)
Slide 9 of 48
How to do Assignment 3How to do Assignment 3Colours look at:
http://kuler.adobe.com/ http://design-seeds.com/index.php/search/ca
tegory/mineral
Marks for:Nice BannerGood Colour SchemeAlt/title tag on banner/imagesNo scrolling horizontally EVER at 900 pixelsConsistency in the layout of the pages and
the buttons/NICE LAYOUT ON EVERY PAGEUnderliningHotspot
Roll over buttons get 1 or 2 marks morePROPERTY TITLES! Website – Web Page
◦ Micro Building Designs - Concrete WorkMust use table to lay things outHeadings on pagesUse an image for each page/good sizeLayout paragraphs well (don’t squish on edge)Bold/highlight headings If you have CSS, you might need to do
Insert>Div>Id (give ID a name) INSTEAD of named anchor (named anchor is in CS6 but not CSS)
HeadingsLinks that go OFF your site
Slide 11 of 48
Paragraphs Centering DON’THyphens on listsEmails linksBack to top, anchorsThink about link coloursLink lengths
◦ http://www.csd.uwo.ca/images/CSD_long_photo_16.jpg vs.
◦ Middlesex
Common Mistake: renaming files/folder…this will TOTALLY SCREW up your website if you do not do it correctly!
Slide 12 of 48
What is animationWhat is animation
A sequence of images that create the illusion of movement when played in succession.
Here are some simple examples:
Slide 13 of 48
Why use animation?Why use animation?Easier to show somebody
how something works then to try and explain it.
Also animation: ◦Indicate movement
◦Illustrate change over time
◦Visualize three-dimensional objects
◦Attracts attention
Four Stroke Engine
Slide 14 of 48
How does animation work?How does animation work?Simulation of movement through a series of
pictures that have objects in slightly different positions
Each drawing is called a frame (a snapshot of what’s happening at a particular moment)
Required Frames Per Second FPS:◦ Movies on film 24 fps◦ TV 30 fps
9000 frames for five minute cartoon
◦ Computer animation 12 to15 fpsJerky if anything less
Slide 15 of 48
Sampling and Quantizing of Sampling and Quantizing of MotionMotionSince each frame is just an image
◦Each frame is sampled into a discrete samples and each sample becomes a pixel Sampling process Remember:
More samples means better quality (same image represented in10 pixels by 10 pixels or in 200 pixels by 200 pixels)
More samples means bigger file sizes (10 pixels by 10 pixels vs 200 pixels by 200 pixels)
◦Each pixel gets assigned a colour, maybe just 2 colours(black and white1bit colour) or maybe 16 million colour (24 bit colour) Quantization process
Question: What else can we “Sample” with MOTION?
Slide 16 of 48
Frame Rate (Frames Per Frame Rate (Frames Per Second FPS)Second 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.
Slide 17 of 48
2-D Animation 2-D Animation two types of 2-D animation:
◦Cel Animation (also called traditional animation, classical animation, hand-drawn animation, frame by frame animation)
◦Path Based AnimationBoth types still are made of frames:
◦The more frames per second, the more believable the movement will be.
◦The more frames per second, the bigger the final version of the movie file will be (more bytes)
Slide 18 of 48
Cel AnimationCel Animation
An animator must HAND draw every single frame!
To simplify, one background is drawn and then the item that will move 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
Slide 19 of 48
Cel AnimationCel AnimationQuestion: 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 p
asty brunetteOther examples:
◦Charlie Brown
Slide 20 of 48
Path Based AnimationPath Based AnimationPick:
◦a starting point for an object, (start frame)◦an ending point for an object (end frame)◦a path for the object to follow
And then the computer generated all the frames in between (called TWEENING), so that the artist doesn’t have to draw the intermediate frames (like the artist did in cel based animation)
Slide 21 of 48
Path Based AnimationPath Based AnimationQuestion: 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?
Slide 22 of 48
Path Based Animation Path Based Animation SoftwareSoftwareThe software that generates the
frames has features such as:◦Looping◦Transition (Fade in and Fade out)◦Repetitions allows the user to pick
how many times the animation repeats◦Setting the Frames Per Second
Question: What does a bigger FPS imply? Larger file size More realistic motion
Slide 23 of 48
What can we do to change the What can we do to change the motion?motion?If the animation appears too slow, we can speed up the motion by:◦Reduce the number of frames (say pull
out every other frame)OR◦Increase the frame rate (go from 10fps
to 20fps)
Slide 24 of 48
Slowing down the motion by Slowing down the motion by adding more framesadding more framesAssume 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 same Increase the number of frames between the
keyframes to stretch out the animation◦ Way 2: Lower the frame rate (go from
20fps to 5fps) Keep the same number of frames as original but
stretches out movie◦ Original Clip has 5 frames, at 20 fps, so
finishes playing at 0.2 seconds, too fast! Way 1: still have 20 fps, but add in extra frames
between, now have 20 frames Way 2: holds frame on screen for 0.2 seconds, then
moves to frame 2, on screen for 0.2 second, etc….
Slide 25 of 48
Question: What is wrong with Way 2?
From the text book: Digital Media Primer by Yue-Ling Wong
Slide 26 of 48From the text book: Digital Media Primer by Yue-Ling Wong
Cel Animation vs. Path Based Cel Animation vs. Path Based AnimationAnimation
Slide 27 of 48
2-D Animation Terminology2-D Animation TerminologyQuestion: What do these terms
mean?◦Keyframe◦Tweening◦Onion Skinning
Some Inspiration An amazing animator: http://j-scott.com/work/
Slide 28 of 48
3-D Animation3-D Animation3-Dimension animation involves 3
steps:◦Modelling◦Rendering◦Animating
Demohttp://www.youtube.com/watch?v=tg
snixOJJFw&feature=relmfu
Slide 29 of 48
3-D Animation3-D AnimationThis 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): http://hof.povray.org/
Slide 30 of 48
Special Effects AnimationSpecial Effects Animation
Morphing:◦An Animation◦Process of blending together two
images into a series of images◦Useful for showing how image
might change over timeWarping:
◦Distorts a single image◦Warp frown into smile
Slide 31 of 48
More Special EffectsMore Special EffectsVirtual Reality: Creates environment where
user becomes part of the experienceExamples:
◦ 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
◦ Google Cardboard!!! AppsA 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.
Slide 32 of 48
BreakBreakAfter you grab your coffee, watch
this video and see how at the very end of it, it does MORPHING very effectively ◦http://www.youtube.com/watch?
v=nUDIoN-_Hxs
Slide 33 of 48
Where can you get Where can you get animation?animation?Purchase CDs or buy off the internet or
get free clipart on the internet, for example: http://heathersanimations.com/animalsone.html
OR, you can create your own:◦Animated Gifs can be create in Photoshop or
in other software tools◦Using Flash
We will look at two different file types of animation:◦Animated gifs◦Flash animation
Slide 34 of 48
Animated GIFSAnimated GIFS Question: What do you think the file size of an
animated gif is affected by:◦ Size of the gif (frame dimensions)◦ Number of colors ◦ Number of frames
Question: What do you think is the maximum number of colours you can have in an animated gif?
No Plug-ins 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
Slide 35 of 48
Using Photoshop to make an Using Photoshop to make an animated gifanimated gif
Slide 36 of 48
FlashFlashA multimedia authoring and playback systemLaunched in 1996 by MacromediaAdobe bought it in 2005Flash became popular for its animated graphicsResponsible 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.
Some sample sites that do cool Flash animation:◦ http://mono-1.com/monoface/main.html
http://www.intel.com/museumofme/en_US/r/index.htm
Slide 37 of 48
Why is Flash so popular?Why is Flash so popular? Interactive content rich with video, graphics, animation Import multimedia elements from other applications Support vector 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 free client application 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
Adobe worked out a deal to have the Flash player preinstalled on machines between the critical time period of 1998-2000 (before most people had broadband). This helped Flash over take Director in terms of popularity (users didn’t have to wait to install the player while surfing)
Slide 38 of 48
Flash in actionFlash in actionQuestion: Suppose we had the
following starting picture and the given ending picture, what THREE things do you think you would have to consider in order to make it appear animated but it should have a smooth animation, not jerky?
Question: Which colours will be used in tweening?
Start picture End picture
Slide 39 of 48
Essential Flash TerminologyEssential Flash Terminology
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 symbols◦ 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.
Slide 40 of 48
Essential Flash TerminologyEssential Flash TerminologyTweening: Creating the intermediate frames
based on the starting keyframe and ending keyframe. There are 3 types of tweens:
Motion Guide: lets you animation an object along a path that you draw yourself. Only works with symbols
Motion Tween Shape Tween
Classic Tween (from cs3)
Animates symbols only. Create the tween initially and then go to a frame and move the object and that frame becomes a keyframe
Works with non symbol shapes and vector graphics only
Animates symbols only. Need to manually create all keyframes and connect then with a tween
Can’t morph (only position and rotation)
Can morph shapes
Can’t morph (only position and rotation)
Slide 41 of 48
A excellent video to help you A excellent video to help you with your Flash skills!with your Flash skills!https://www.youtube.com/watch?
v=gDTPdSAqYIg
Slide 42 of 48
Laura ventures into the world of Laura ventures into the world of Flash Flash
My first project (didn’t take me very long)
Then I tried to make a walking man:◦Walking 1◦Walking 2
Then I saw thisSo I tried to recreate it myself
Slide 43 of 48
Comparing File Types:Comparing File Types:
Animated GIF
Flash Director
Created by Depends Adobe Adobe
Extension Source depends.gif (movie)
.fla (source)
.swf (movie)
.gif (Flash can make gifs too!)
.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)
History of Animation: early cave drawings show animals with 8 legs (trying to show animal moving) 1868 – Flip book patented 1877 - Praxinoscope Cylinder containing slits that when spun gave the illusion of movement 1892 - Reynaud showed how he could use 12 pictures and loop the pictures. He had 500 frames using something similar to the modern film projector 1898 – Stop motion animation introduced
Ancient Egypt Mural attempting to depict movement (4000 years old)
1906 Blacktons makes “The Humorous Phases of Funny Faces” using a blackboard and frame by frame shots1914 McCay makes “Gertie the Dinosaur”, the first successful character animation1928 Walt Disney uses sound and animation in Steamboat Willie1937 first full length feature animation movie: Snow White
Gertie The Dinosaur
1960 first prime time animation TV Show debuted Question: What was it?Question: What is the longest running animation prime time show1982 Star Trek, The Wrath of Khan includes computer generated effects. TRON, a Disney animation includes 15 minutes of computer generated scenes1986 Take On Me by aha, creates much hyped video that uses rotoscoping (pencil-sketch animation/live-action combination )
Chris Griffin
1995 Question: What was the first full length completely computer generated animation movie released? Question: What is the highest grossing animated film of all time?
Laura says GO SEE THIS MOVIE
Slide 48 of 48
Let’s ReviewLet’s Reviewhttp://www.youtube.com/watch?
v=SaJxnTf44eg&feature=related Finally: For the major assignment,
you must create an animation. Here is a simple little one to inspire you: http://www.mustangdrive-in.com/ (Click on the banner)
Slide 49 of 48
Warm up Questions:Warm up Questions:Question: How many frames per second
should we have when building an animation for display on a computer?
Question: Which type of animation uses frames:A. Cel BasedB. Path BasedC. BothD. Neither
Question: If an animation is 40 frames long and the fps is 5, how long will the animation take to play?
Question: What was the first◦ Full length animated feature film?◦ Full length completely computer generated film?