Presentation on theme: "2.02A History of Animation 2.02 Develop Computer Animations."— Presentation transcript:
2.02A History of Animation 2.02 Develop Computer Animations
2.02 Computer Animation Graphic Organizer —Section A
Animation The rapid display of a sequence of images of 2-D or 3-D artwork or model positions in order to create an illusion of movement. Relies on persistence of vision to create the illusion of movement.
How has animation evolved over the years? Animation has progressed from hand-drawn images to computer- generated animations.
Examples: 2D to 3D illusion 2D to 3D illusion 2D PHOTOS TO 3D - ILLUSION 2D PHOTOS TO 3D
Persistence of Vision In the early 1800’s, the phenomenon known as persistence of vision gave mankind the first glimpse into the modern world of animation. Persistence of vision refers to the way our eyes retain images for a split second longer than they actually appear, making a series of quick flashes appear as one continuous picture.
Persistence of Vision - YouTube.flv
Persistence of Vision Using a flipbook, you can see the persistence of vision effect in action. If you have a different sequential drawing on each page of the flipbook and you flip through the pages rapidly, the drawings appear to move.flipbook Examples of Early Animation Examples
Examples: How to Draw Animations Persistence of Vision in Animation How to Draw Animations Persistence of Vision in Animation Pac Man Flipbook Pac Man BREAK DANCE (flipbook) BREAK DANCE
Traditional Animation Describe early animation. Also called cel animation or hand-drawn animation.cel animation Begins with a storyboard. A preliminary soundtrack is recorded. Penciled drawings are made by lead animators of keyframes. Pencil tests are prepared. Artists called in-betweeners draw the frames between the keyframes. The drawings are traced onto cels and painted. Finally, they are photographed.
The Process of Animation
Computer Assisted Animation What is the difference between traditional animation and computer animation? The computer is used to make the animation process quicker and easier. Usually involves 2-D images Can be hand-drawn and scanned into the computer. Can be drawn directly into the computer using graphics tablets. The images are positioned into keyframes containing the most important movements. Tweening is then performed by the computer to create images between keyframes.
Computer Assisted Animation... continuation Even though computers are now used extensively, many traditional steps are still used. Storyboarding Pencil Testing Keyframes Tweening
Computer Generated Animation All images, objects and animation are created on the computer. Typically uses 3-D images. Adds two steps to the animation process. Modeling – process of creating a wireframe structure of the 3-D objects and scenes. Rendering – process of applying colors, textures, shadows, transparency, etc. to create the final image or animation.
3-D Graphics and Animation 3-D animations are more complex. Creating 3-D animations involves modeling, animation, and rendering. Modeling is creating broad contours and structure of 3-D objects and scenes. Animation is determining the motions of the objects. Rendering involves determining colors, surface textures, and amounts of transparency of objects.
Computer Generated Animation Motion capture can be used to create animation. Actors wear special suits that allow the computer to capture their movements. The movements can then be applied to computer-generated graphics. Examples: The Polar Express Avatar
Traditional animation is defined as the process of creating the illusion of motion by viewing a series of individual drawings successively. Bridging the Traditional and Computer Eras Computer animation is creating a digital scene by digitally recording cells, sorting them on an electronic storyboard, and displaying them electronically in succession. Describe computer animation.
Review History of Animation Animation Traditional Animation Computer Assisted Animation Computer Generated Animation
2.02B Methods and Uses of Animation 2.02 Develop Computer Animations
2.02 Computer Animation Graphic Organizer—Section B
Frame-by-Frame Animation Rapidly displaying images, or frames, in a sequence to create the optical illusion of movement. Digital animation is based on the frame by frame animation process. Example of a ball bouncing. Example of a ball bouncing.
The quality of frame-based animation depends on the frame rate. Frame Rate = Frames per Second FPS = Smoother Action The more frames per second, the smoother the motion appears. Frame-by-Frame Animation (Continued)
Methods of Animating
Morphing Animation What happens during the morphing effect? The term morphing comes from the word metamorphosis, which is the transformation of one thing into another. The beginning image is inserted. The ending image is inserted. The computer performs the tweening to generate a sequence of images, each of which is slightly different from the one it follows to gradually morph the two objects. For example, a photograph of one person might gradually morph into a picture of another person.
Example of Morphing The top two images show the beginning and ending images. The lower images show the older man morphing into the young boy. In business, morphing can be used for transitions between web pages or images. Beginning Image Ending Image Finished Animation
Path Based Animation Also called vector animation. An object follows a path which is a line, or vector, inserted by the animator. A motion path can include curves, loops, and angles. The computer calculates the correct position of the object as it moves along the path and generates the frames to create the animation.
Path Based Animation (Continued) Vector graphics or animated gifs can be used to create animations with very small file sizes. The small file sizes make this type of animation very popular on the Web. Many of the banner ads and embedded animations viewed on web sites use this technology because it loads so quickly and is easy to use.
Rollovers are extremely important for navigation buttons on user interface designs. Examples Web pages ■ CBT programs Kiosks ■ CD-ROM Training Games ■ CDs and DVDs. Programming or Scripting-Based Animation (Continued)
Stop Motion Animation Process of manipulating real-world objects and photographing them one frame at a time. Very popular method with the film industry until computer generated imagery became possible. Now used mainly in clay animation. Example http://en.wikipedia.org/wiki/File:Moving_Penny.gif http://en.wikipedia.org/wiki/File:Moving_Penny.gif
Uses of Computer Animations
How are the types of computer animations used? Entertainment Advertisement Selling Teaching Training
Uses of Computer Animation Entertainment Films, computer games and virtual reality. 3D graphics are popular for these types of animations because they are more realistic. Virtual Reality is the use of technology to immerse a user into an artificial environment. Interaction occurs when the user moves around and manipulates simulated 3D objects in the environment. Requires high-quality graphics using 3D technology. Requires high frame rates for smooth motion, and high image resolution for realistic detail.
What type of graphics are used in virtual reality? 3-dimensional.
Uses of Computer Animation Advertising Animation can be used to catch the viewer’s eye. Popular for banner ads on websites. Selling – showcasing products or services. Teaching – illustrating concepts or processes. Training – simulating events or demonstrating techniques in presentations. Examples : http://www.looking-glass- animations.co.uk/example_animations.htm http://www.looking-glass- animations.co.uk/example_animations.htm http://www.looking-glass-animations.co.uk/ http://www.looking-glass-animations.co.uk/
Use Animation Appropriately Before using an animation, be sure to answer the following questions: Is it appropriate for the target audience? Does it help deliver the message? Is it overused? Does it load quickly?
3D Graphics and Animation Software
The leading graphics programs designed specifically for creating and editing 3D images are: Xara 3D 3ds Max 4 Maya Blender Flash Cinema 4D These programs allow users to: Create live-action animation Bounce an object Zoom in or out of a scene Fade text or pictures in or out to create other animated effects.
Design Frame-by-Frame Computer Animations NOTE: Before continuing with this presentation, open the 3.01C Frame-by-Frame Animation Using PowerPoint Presentation to view a completed animation.
Use PowerPoint to Create Frame by Frame Animation 1.Insert a clipart image that is a vector file Hint: In Microsoft software, search for.wmf files. 2.Ungroup the image. 3.Edit the image then regroup it. 4.Copy the image and paste it onto the next slide. 5.Change the image or its location. 6.Repeat for several slides.
PowerPoint Animation (continued) Rehearse the timings. Click on Slide Show, Rehearse Timings Set the amount of time for each slide to display. Set the Show to run continuously. Click on Slide Show, Set Up Show Check Loop Continuously Until Esc Save and preview the animation.
Create Animated Gifs Many image editing programs can create animated gifs. Examples: Adobe PhotoShop and Gimp Steps: Insert an image. Copy it to a different layer and change the image or its position. Repeat the layers until you are satisfied. Save the file as an animated gif.
Review Methods and Uses of Computer Animations Methods of computer animations Frame-by-Frame Animation Morphing Animation – Uses shape tweening. Path Animation - Uses motion tweening. Programming and Scripting-Based Animation Stop Motion Animation Uses of computer animations Advertising Entertainment Selling Teaching Training
Common Terms in Animation Software Stage Library Timeline Frame Keyframe Playhead Frames per Second Layers
List and describe the program parts for computer animation software.... Following slides
Stage The part of the animation program window where the animation’s content is composed and manipulated.
Library Stores frequently used graphics, movie clips, and buttons.
Timeline The part of the animation program window that organizes and controls an animation’s content over time using layers and frames. In video-editing software, where source clips, transitions, and audio files are arranged to create the video.
How Does Computer Animation Work
Parts of the Timeline
Frames Frames hold the content that the movie displays or plays at that point in time. The number of frames determines the length of the animation. The higher the number of frames, the longer the animation.
Regular Frames Contain one image or frame. Regular Frame
Keyframes Shows where the key (most important) actions occur. Shows where tweening will occur. Keyframes Image used with permission from http://facweb.cs.depaul.edu/sgrais/creating_a_motion_tween.htmhttp://facweb.cs.depaul.edu/sgrais/creating_a_motion_tween.htm
Playhead Vertical red marker in the timeline that shows which frame is the current frame.
Scrubbing Dragging the playhead across the timeline in order to preview the animation.
Frames Per Second (FPS) The number of frames that appear in one second of the animation.
If the animation program creates movies at 12 fps (frames per second) by default, inserting a keyframe and change once every 12 frames results in a change in action for every second. A project with 60 frames results in a 5-second movie. Frames Per Second (continued)
The FPS determines the length of the animation. The playhead shows which frame is the current frame being viewed. The playhead can be scrubbed, or dragged, across the timeline in order to preview the animation as it is being created. How do FPS, playhead, and scrubbing impact the process of designing computer animations?
Layers What are the functions of the different layers? Timeline is divided into layers to help organize content and allow the different layers to be edited separately. Sound would be on a separate layer. Text would be on a separate layer. A motion path would be on a separate layer. Layers
Motion Guide Layer... continuation Multiple objects can be linked to one motion layer. Text layers can also be linked to a motion layer. Motion Guide Layer Layer on which a motion path is drawn. Objects on different layers can be linked to the motion layer so they will follow the motion path. Once linked, they become “guided layers”
Screenshots from Different Animation Software Packages
Flash This Image has been used with permission from: http://glennward.co.uk/2009/09/1-1-introduction-to-adobe-flash-the-workspace-and-tools /http://glennward.co.uk/2009/09/1-1-introduction-to-adobe-flash-the-workspace-and-tools /
Synfig Image created by Ricardo Graça and used with permission from: www.ricolandia.comwww.ricolandia.com
Autodesk 3ds Max This image used with permission from: http://www.softpedia.com/progScreenshots/3D-Studio-Max-Screenshot-15976.htmlhttp://www.softpedia.com/progScreenshots/3D-Studio-Max-Screenshot-15976.html
Guidelines For Designing Frame-by-Frame Computer Animations
Insert keyframes at each change in the action Content on keyframes can be changed by: Adding and deleting objects. Replacing one object with another. Moving objects, resizing, or rotating objects. All these actions simulate some kind of motion or action. What are the guidelines to consider when designing computer animations?
Add a keyframe at the point where the animation will stop. Allow sufficient time for the image to be viewed after the final content change. Insert text, sound and motion on separate layers in the timeline. Guidelines For Creating Frame- by-Frame Animations (continued) For example, if a new graphic is inserted at frame 35, place the final keyframe at frame 50 to allow time for the display of the final graphic.
Frame by frame animation—the computer generates the frames in between the keyframes. Morphing—the computer generates the frames to change one shape into another. Path animation—the computer generates the frames by calculating the position of the object and rotating it appropriately as it moves along the path inserted by the animator. How do the different types of tweening impact the movement of objects?
Purpose Fair use situations Public domain material
Review Parts of Computer Animation Software Stage Library Timeline Parts of the Timeline Frame Keyframe Playhead Frames per Second Layers
Review (Continued) Guidelines for Designing Animation Insert keyframes at each change in the action Change keyframes by: Adding and deleting objects. Replacing one object with another. Moving objects, resizing, or rotating objects. Add a keyframe at the point where the animation will stop. Allow sufficient time for the image to be viewed after the final content change.
Using Sound in Animations Sound files can be used to enhance an animation. Sound could include: Music Narration Sound Effects Do not use sound unless it enhances the animation. If the sound is distracting and irrelevant to the animation, do not use it.
Sound File Formats
Most animation and video programs enable sound files to be imported in at least two formats: MP3 WAV Wave files have the highest quality sound.
WAV (Waveform) Summarize the WAV format. The standard format for sound on computers running the Windows operating system. WAV files produce high-quality sound. Generate large file sizes. When creating or editing sound, WAV files are typically used until all editing is finished. The final sound file is then saved in a more compressed file format such as MP3.
MP3 Summarize MP3 format MP3 is a standard format for music files sent over the Internet that compresses music or other types of audio. The compression process removes sounds that humans cannot hear. To most listeners, MP3 files sound as good as WAV files. It results in a much smaller file sizes which means they can be uploaded or downloaded much quicker.
Recording Sound Files
Sounds can be recorded or captured from a variety of sources. For example, record your voice using a microphone that is connected to the computer’s sound card. Or, connect a device such as a CD player, MP3 player, or tape player to the sound card Line-in jack to record CD audio or other pre-recorded material. Some animation software allows you to record narration without having to create the sound in a separate program.
Recording Sound Files When recording, be aware that sound files tend to be large. Large sound files will increase the size of the finished animation which means the animation will take longer to download and require more storage space. Keep sound files as small as possible while maintaining sufficient quality by: Recording WAV files at a lower quality setting. Using recording or conversion software that will save the sound file in a compressed format such as MP3.
What is the purpose of the compression process? The purpose for compressing files is to reduce the amount of storage space required by files. This means the files will download and upload more quickly..
Importing Sound Files
Sound files are usually imported into the animation much like image files. Most animation programs require or recommend that each sound object be inserted on its own layer. Importing Sound Files
If the animation is for a Web site, keep the overall file size small for faster downloads by using more compact MP3 files and looping a shorter sound segment. On the other hand, if the animation is part of a presentation delivered in an auditorium equipped with a high- quality audio system, use the highest quality sound file possible. When creating or choosing the sounds to include in the animation, keep the intended purpose of the animation in mind. Guidelines for Using Sound
Remember that in order to avoid a violation of copyright law, only original music can be used in professional productions such as Web animations and presentations. Fortunately, there is a large number of inexpensive programs that combine sound loops to create original, royalty-free music for animations and movies. Copyright
Any type of music can be used as long as copyright restrictions are observed. If a copyrighted piece of music is used, royalties will have to be paid to the copyright owner and permission will have to be obtained. If the music is an original composition, the person who wrote and played the music must give their permission to use it. Copyright What type of music can be used in professional productions?
2.02E Adding and Animating Text in Computer Animations 2.02 Develop Computer Animations
Text performs the same function in an animation as it does in a graphic: it provides information on the subject of the animation or directions to the viewer. An animation program provides the added option of animating the text in some way to make it more effective. Text in computer animations What is the purpose of text in computer animation?
To add a text object in animation software: Create a layer to hold the text Choose the text tool from the toolbox Specify text settings Key the text. Choose formatting options: Font, font size, and font style Change text color and alignment Adding text into computer animations (Continued)
The text is inserted and then it is formatted and animated. In some software, text can be inserted into its own layer and edited separately from the other elements. Describe what happens to text when it is added into computer animations? (Continued)
Text can appear and disappear in selected frames in the movie or presentation. Text can fade in or fade out. Text can follow a motion path. Text can scroll or change colors. Text can blink on and off. Text can appear one letter or word at a time. NOTE: The possibilities for text animation will vary depending on the animation software being used. Possible Animation for Text (Continued)
Publishing Animated Videos Publishing animations and animated videos involves the following steps: Analyze and optimize the animation. Choose an appropriate file type. Choose the delivery method. Publish the animation.
Step 1: Analyze and Optimize the Animation
Analyze Animations For Potential Problems Identify potential problems that may occur when downloading and playing a movie. If the entire movie will be downloaded before it is played, determine which parts of the movie are taking the most time to download. If the movie will be delivered through a streaming connection, look for ways to reduce or control the pauses during download and playback.
Optimize the Animation What should occur during the analyzing and optimizing video files process? Animations should be optimized in order to: Reduce the file size for quicker downloads. Make the video or animation play more smoothly during playback. Maintain sufficient quality for viewing. Videos can be optimized anytime or only when they are published.
Optimizing animation involves fine-tuning compression settings. Optimize the sounds in the Library by compressing to MP3. Optimize the Animation (Continued)
Step 2: Choose an Animation File Type
Animation File Types What are some animation file types? Animated GIF AVI MOV MPEG SWF
Animation File Types Audio Video Interleave (AVI) Microsoft’s animation and video format for computers running the Windows operating system. Does not compress animation as much as other formats. Will not play on all operating systems or in all players. Graphics Interchange Format (GIF) Pronounced “jiff” or “gif” Animated GIFs can contain 2-D or 3-D images. They are used for cartoons, logos, graphics with transparent areas, and animations. GIF files are popular for the use on the Web because they: Have small file sizes. Do not require a special plug-in or player. Are supported by most browsers
Animation File Types Apple QuickTime Movie (MOV) Files can be either downloaded or streamed. Run on many different operating systems. Must be viewed in the QuickTime player which is a free download. Moving Pictures Expert Group (MPEG) A very compressed video format. Files tend to be much smaller and better quality than other formats. Recommended for videos that will be downloaded instead of streamed because it does not require a specific player or plug-in.
Animation File Types Shockwave Flash (SWF) Pronounced “swiff” File format for animation created with Adobe Flash. Files can contain text as well as both vector and raster graphics; also may include interactive actions written in ActionScript. Must be viewed in the Adobe Flash Player which is a free download. Popular format for the Web because: File size is small. Support streaming.
Step 3: Choose a Delivery Method
Delivery Methods What are the delivery methods for distributing computer animations? Once videos have been analyzed and optimized to perform best in the intended medium, the next step is to publish. Delivery methods available for distributing animations: As part of a Web page On a CD-ROM or DVD. As an executable file which bundles both the animation and the program to play in a single file.
When an animation or an executable file is distributed over the Internet, the entire file must be downloaded before the animation can play. Animations distributed as part of a web page can be either: Streamed Downloaded Delivery Methods (Continued)
Streaming What happens during the streaming process? Streaming is a technique for transferring audio and video files over the Internet as a continuous stream of data. The Streaming Process Data is held in a temporary storage area called a buffer until it is played by the computer. There will always be an initial delay while the first frame is buffered. Suppose an animation plays at 5 frames per second. Each frame will play for 0.2 seconds. If the first frame takes 0.3 seconds to download, the animation cannot start playing until after that time has elapsed.
Advantages and Disadvantages of Streaming Advantages Quick Access - files can start playing as soon as a computer begins receiving the data rather than waiting for the complete file to download before playing. Data is discarded as it is played so a complete copy of the file is not stored on the viewer’s computer. Disadvantages The viewer must be connected to the Internet to view the video. The viewer’s connection speed influences the quality of playback. Files cannot be saved and viewed later.
Plug-ins and Players What is the purpose of a plug-in or player? Plug-ins or players may be required to view an animation over the Internet. A plug-in is a program that works with the browser to expand its capabilities. Examples: Allow it to play video or audio files. Allow it to open certain file types.
Plug-ins and Players What is the purpose of a plug-in or player? A standalone player is a separate program that can play video and audio files without the browser software being open. Examples List examples of plug-ins and players. Adobe Flash Player QuickTime RealPlayer Windows Media Player
Step 4: Publish the Animation
Publish the Animation For animations distributed over the Internet: Upload the file to the host computer. Create a link to the file or embed it into the web page. Test the animation in different browsers. For animations distributed on CDs or DVDs: Burn the file onto the disk. Finalize the disk. Test the disk in several different CD or DVD players.
Factors that Influence the Delivery of Computer Animations
Factors that influence the delivery of computer animations: Viewer’s bandwidth, or connection speed. Streaming rate Playback rate Internet (water is the data) Connection Type determines how much data can transfer to the network.
Bandwidth Data Bandwidth The amount of data that can be transmitted over a network in a given amount of time. The speed at which data travels over a network depends on: The type of Internet connection for the network. The number of users using the network at that specific time.
Streaming and Playback Rate Streaming rate is the rate in frames per second at which videos can be downloaded or transferred to a computer and is determined by: The viewer’s network connection speed. The content of the video file being downloaded. Playback rate is the rate in frames per second at which the video plays.
If a lot of people are using the network at one time, less bandwidth will be available to download the data. This will cause the streaming rate to be slower. This means the playback rate will most likely be slower than the streaming rate. This will cause the playback to pause until more data is received. Bandwidth and Streaming Rate What is the relationship between bandwidth and streaming rate?
Bandwidth and Streaming Rate What is the relationship between playback and streaming rate? If the streaming rate is slower than the playback rate, the video will pause until more data is received. It is a good idea to provide the video in different file sizes so viewers can choose the file size best suited for their connection type.
Review Publishing Animated Videos Analyze and optimize the animation. Analyze and optimize the animation. Choose an appropriate file type. Choose the delivery method. Publish the animation.
Review (Continued) Animation File Types Animated GIF AVI MOV MPEG SWF Plug-ins and Standalone Players Adobe Flash Player QuickTime RealPlayer Windows Media Player
Review (Continued) Methods for publishing animated videos Website CD-ROM or DVD Executable file Factors that influence the delivery and distribution of computer animations: Bandwidth Streaming rate Playback rate