animation - Computer Science
advertisement
CS1033 Notes Warm up Questions: Question: Which will rank you higher with Page Rank, having 1 link to your site from iki di i 3 lilinks k tto your www.wikipedia.org or hhaving site from www.uwo.ca? Question: if we search for the terms “Cattle”, “Ranch”, “Texas” and we only get ppages g back that have those words, what are some of the factors that will make one page show up ahead of another page? Computer Science 1033 – Week 8 ANIMATION http://www.youtube.com/watch?v=0g1eb8 O9j1M&feature=related “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 Slide 1 of 42 Overview of Today’s Topics Announcements Announcements Demonstration of how to do assignment 3 What is animation? Types of animation File types of animation Using Flash to build your animation and animation terminology gy History of animation Review LOTS OF VIDEOS TODAY Sit back and enjoy Slide 3 of 42 Assignment 3 and Assignment 4 are posted. y longer g than you y think, give g ◦ Theyy will take you yourself LOTS of time to do them. Final Exam: Sunday, Dec 9at 7pm ◦ ◦ ◦ ◦ ◦ Bring your student card and a soft pencil 2 hour exam m lti le ch ice questions esti ns All multiple choice About 150 questions NO calculators, ipods, hats, electronic devices, notes Slide 4 of 42 1 CS1033 Notes Announcements Announcements Assignment 2 Should be marked by now Assignment 3 g Assignment 3 Hints THINGS THAT CAN GO HORRIBLY WRONG ◦ 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: http://publish.gaul.csd.uwo.ca/lreid/other/student1/ http://publish.gaul.csd.uwo.ca/lreid/other/student2/index.ht ml http://publish.gaul.csd.uwo.ca/lreid/other/student3/assign3/ http://publish.gaul.csd.uwo.ca/lreid/other/student7/assign3/ http://publish.gaul.csd.uwo.ca/lreid/other/student9/major/ind p p g j ex.html Remember your titles Think about layout, layout consistency 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/SamplesOfCo mmonMistakes/ THINGS THAT CAN GO RIGHT http://publish.gaul.csd.uwo.ca/lreid/other/student8/assign3/in dex.html Slide 5 of 42 Hint if you want cool fonts in your web page! Hints for assignment 3 Remember: ◦ ◦ ◦ ◦ Titles Headers H d 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 Slide 6 of 42 http://www.google.com/webfonts/ Paste the code you get at the google site into your code below the <head> tag. (the code will look like this ◦ 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..) <link href='http://fonts.googleapis.com/css?family=Eater' rel='stylesheet' type='text/css'> Create a new CSS rule in Dreamweaver: ◦ Click on Edit Rule ◦ Give it a name & hit OK ◦ Give it the font name of the name in the above code (e.g. Eater) ◦ E.g. http://www.csd.uwo.ca/~lreid/cs1033/fontdemo.html ◦ http://www.csd.uwo.ca/~lreid/cs1033/fontdemoAfter.html Slide 7 of 42 Slide 8 of 42 2 CS1033 Notes What is animation Why use animation? A sequence of images that create the illusion off movementt when h played l d in i succession. i Here are some simple examples: Easier to show somebody how something works then to try and l i it explain it. Also animation: Four Stroke Engine ◦ Indicate movement ◦ Illustrate change over time ◦ Visualize three-dimensional objects ◦ Attracts attention Slide 9 of 42 Slide 10 of 42 How does animation work? Sampling and Quantizing of Motion 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 what’ss happening at a particular moment) Required Frames Per Second FPS: ◦ Each frame is sampled into a discrete samples and each sample becomes a pixel Sampling process Remember: More samples means better quality (10 pixels by 10 pixels vs 200 pixels by 200 pixels) More samples means bigger file sizes (10 pixels by 10 pixels vs 200 pixels by 200 pixels) ◦ Movies on film 24 fps ◦ TV 30 fps ◦ Each pixel gets assigned a colour, maybe just 2 colours(black and white1bit colour) or maybe 16 illi colour l l ) Quantization Q ti ti million (24 bit colour) process 9000 frames for five minute cartoon ◦ Computer animation 12 to15 fps Since each frame is just an image Jerky if anything less Slide 11 of 42 Question: What else can we “Sample” with MOTION? Slide 12 of 42 3 CS1033 Notes Frame Rate (Frames Per Second FPS) Frame Rate: indicates the playback speed of the animation in frames p per second 2-D Animation ◦ Cel Animation ((also called traditional animation, classical animation, hand-drawn animation, frame by frame animation) ◦ Path Based Animation ◦ 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 g to process p and display p y the frames. two types of 2-D animation: Both types still are made of frames: ◦ The more frames per second, 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 13 of 42 Cel Animation Slide 14 of 42 Cel Animation Question: What was the first full length cel based animated movie? Hints: 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 b k d background http://www.youtube.com/watch?v=jbhCUPwSrp0&featu re=player_embedded Slide 15 of 42 ◦ ◦ ◦ ◦ 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 Slide 16 of 42 4 CS1033 Notes Path Based Animation Path Based Animation Pick: Question: What name do we give to the start frame and the end frame? (not the frames that are computer t generated, t d rather th the th frames f 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? ◦ a starting point for an object, (start frame) ◦ an endingg point p for an object j (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 17 of 42 Path Based Animation Software The 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 Slide 18 of 42 What can we do to change the motion? If the animation appears too slow, we p p the motion by: y can speed up ◦ Reduce the number of frames (say pull out every other frame) OR ◦ Increase the frame rate (go from 10fps to 20fps) Question: What does a bigger FPS imply? Larger file size More realistic motion Slide 19 of 42 Slide 20 of 42 5 CS1033 Notes Slowing down the motion by adding more frames Question: What is wrong with Way 2? Assume now that the motion is a bit too fast, 2 ways to slow it down: ◦ Way 1:: Add dd more o e frames: a es: 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 ◦ O Original i i l Cli Clip has h 5 frames, f att 20 fps, f so finishes fi i h playing l i att 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 21 of 42 Cel Animation vs. Path Based Animation From the text book: Digital Media Primer by Yue-Ling Wong Slide 22 of 42 2-D Animation Terminology Question: What do these terms mean? yf ◦ Keyframe ◦ Tweening ◦ Onion Skinning From the text book: Digital Media Primer by Yue-Ling Wong Slide 23 of 42 Slide 24 of 42 6 CS1033 Notes 3-D Animation 3-D Animation 3-Dimension animation involves 3 steps: ◦ Modelling ◦ Rendering ◦ Animating Demo http://www.youtube.com/watch?v=tgsnixOJJF w&feature=relmfu This is a website where all the images are created byy rayy tracingg and computers, yet they look amazingly real (Check out the Hall of Fame): http://hof.povray.org/ Slide 25 of 42 Special Effects Animation More Special Effects Virtual Reality: Creates environment where user becomes part of the experience Examples: Morphing: ◦ An Animation ◦ Process of blending together two images into a series of images ◦ Useful for showing how image might change over time ◦ Morphing done in 2D but usually in 3D because subjects chosen Slide 26 of 42 ◦ 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. Warping: ◦ Distorts a single image ◦ Warp frown into smile Slide 27 of 42 Slide 28 of 42 7 CS1033 Notes Break Where can you get animation? After you grab your coffee, watch this video and see how at the veryy end of it, it does MORPHING very effectively ◦ http://www.youtube.com/watch?v=nUDIoN_Hxs Purchase CDs or buy off the internet or get free clipart on the internet, for example: h // http://www.animation-central.com/misc.htm l / h 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 29 of 42 Using Photoshop to make an animated gif Animated GIFS Slide 30 of 42 Question: What do you think the file size of an animated gif is affected by: ◦ Size of the gif (frame dimensions) ◦ Number N b off colors l ◦ 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 31 of 42 Slide 32 of 42 8 CS1033 Notes Flash Why is Flash so popular? A multimedia authoring and playback system Launched in 1996 by Macromedia Adobe bought it 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. Some sample sites that do cool Flash animation: 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. ◦ http://www.zapiram.es ◦ http://www.pablogaribay.com 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, 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 33 of 42 Flash in action Question: 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 Slide 34 of 42 Essential Flash Terminology Question: What kind of tween would have been used in this Flash animation? i i ? 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. End picture Slide 35 of 42 Slide 36 of 42 9 CS1033 Notes Essential Flash Terminology Tweening: Creating the intermediate frames based on the starting keyframe and ending keyframe. There are 3 types of tweens: 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 Can morph and d rotation) i ) shapes h A excellent video to help you with your Flash skills! http://www.youtube.com/watch?v=tKwQZC8 5FNk Can’t morph (only position and d rotation) i ) Motion Guide: lets you animation an object along a path that you draw yourself. Only works with symbols Slide 37 of 42 Laura ventures into the world of Flash My first project (didn’t take me very long) e I ttried e to make a e a wa a : Then walkingg man: Slide 38 of 42 Comparing File Types: ◦ Walking 1 ◦ Walking 2 Then I saw this So I tried to recreate it myself Slide 39 of 42 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 i 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 Web browser plug in and works with most (The Shockwave browsers) Player) Slide 40 of 42 10 CS1033 Notes Ancient Egypt Mural attempting to depict movement (4000 years old) Chris Griffin 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 usingg somethingg similar to the modern film projector 1898 – Stop motion animation introduced 1960 first prime time animation TV Show debuted Question: What was it? Question: What is the longest g running animation prime time show 1982 Star Trek, The Wrath of Khan includes computer generated effects. TRON, a Disney animation includes 15 minutes of computer generated scenes 1986 Take On Me by aha, creates much hyped video that uses rotoscoping (pencilsketch animation/live-action combination ) 1906 Blacktons makes “The Humorous Phases of Funny Faces” using a blackboard and f bby frame f h frame shots 1914 McCay makes “Gertie the Dinosaur”, the first successful character animation 1928 Walt Disney uses sound and animation in Steamboat Willie 1937 first full length feature animation movie: Snow White Gertie The Dinosaur 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 11 CS1033 Notes Let’s Review http://www.youtube.com/watch?v=SaJxnTf44 eg&feature=related g Finally: For the major assignment, you must create an animation. Here is a simple little one to inspire you: http://www.mustangdrivein.com/ (Click on the banner) Slide 45 of 42 12
