Presentation is loading. Please wait.

Presentation is loading. Please wait.

2.02A History of Animation 2.02 Develop Computer Animations.

Similar presentations

Presentation on theme: "2.02A History of Animation 2.02 Develop Computer Animations."— Presentation transcript:

1 2.02A History of Animation 2.02 Develop Computer Animations

2  2.02 Computer Animation Graphic Organizer —Section A

3 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.

4 How has animation evolved over the years?  Animation has progressed from hand-drawn images to computer- generated animations.

5  Examples:  2D to 3D illusion 2D to 3D illusion  2D PHOTOS TO 3D - ILLUSION 2D PHOTOS TO 3D

6 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.

7  Persistence of Vision - YouTube.flv

8 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

9  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

10 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.

11  The Process of Animation

12 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.

13 Computer Assisted Animation... continuation  Even though computers are now used extensively, many traditional steps are still used. Storyboarding Pencil Testing Keyframes Tweening

14 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.

15 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.

16 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

17  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.

18 Review History of Animation  Animation  Traditional Animation  Computer Assisted Animation  Computer Generated Animation

19 2.02B Methods and Uses of Animation 2.02 Develop Computer Animations

20  2.02 Computer Animation Graphic Organizer—Section B

21 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.

22  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)

23 Methods of Animating

24 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.

25 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

26 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.

27 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.

28 Programming or Scripting-Based Animation  Requires knowledge of a programming or scripting language.  Example: Rollover or Mouseover  How is the rollover effect used?  Created by using scripting languages such as Javascript. When the mouse is moved over an image, it changes to a different image so quickly that it looks as if the change has occurred in a single instant.

29 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)

30 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 

31 Uses of Computer Animations

32 How are the types of computer animations used?  Entertainment  Advertisement  Selling  Teaching  Training

33 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.

34 What type of graphics are used in virtual reality?  3-dimensional.

35 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- http://www.looking-glass- 

36 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?

37 3D Graphics and Animation Software

38  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.

39 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.

40 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.

41 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.

42 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.

43 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

44 2.02C Frame-by-Frame Computer Animation Using PowerPoint 2.02 Develop Computer Animations

45 Frame-by-Frame Animation
















61 2.02C Computer Animation Software and Design Guidelines 2.02 Develop Computer Animations

62 Common Terms in Animation Software  Stage  Library  Timeline  Frame  Keyframe  Playhead  Frames per Second  Layers

63 List and describe the program parts for computer animation software.... Following slides

64 Stage The part of the animation program window where the animation’s content is composed and manipulated.

65 Library Stores frequently used graphics, movie clips, and buttons.

66 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.

67  How Does Computer Animation Work

68 Parts of the Timeline

69 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.

70 Regular Frames Contain one image or frame. Regular Frame

71 Keyframes Shows where the key (most important) actions occur. Shows where tweening will occur. Keyframes Image used with permission from

72 Playhead Vertical red marker in the timeline that shows which frame is the current frame.

73 Scrubbing Dragging the playhead across the timeline in order to preview the animation.

74 Frames Per Second (FPS) The number of frames that appear in one second of the animation.

75  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)

76  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?

77 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

78 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”

79 Screenshots from Different Animation Software Packages

80 Flash This Image has been used with permission from: / /

81 Synfig Image created by Ricardo Graça and used with permission from:

82 Autodesk 3ds Max This image used with permission from:

83 Guidelines For Designing Frame-by-Frame Computer Animations

84  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?

85  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.

86  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?

87 Copyright Laws

88  Purpose  Fair use situations  Public domain material

89 Review Parts of Computer Animation Software  Stage  Library  Timeline Parts of the Timeline  Frame  Keyframe  Playhead  Frames per Second  Layers

90 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.

91 2.02D Adding Sounds into Computer Animations 2.02 Develop Computer Animations

92 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.

93 Sound File Formats

94 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.

95 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.

96 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.

97 Recording Sound Files

98 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.

99 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.

100 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..

101 Importing Sound Files

102 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

103 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

104 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

105 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?

106 Review Adding Sounds into Computer Animations  Recording sound files  Importing sound files

107 2.02E Adding and Animating Text in Computer Animations 2.02 Develop Computer Animations

108  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?

109  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)

110  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)

111  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)

112 2.02F Publishing Animated Videos 2.02 Develop Computer Animations

113 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.

114 Step 1: Analyze and Optimize the Animation

115 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.

116 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.

117  Optimizing animation involves fine-tuning compression settings.  Optimize the sounds in the Library by compressing to MP3. Optimize the Animation (Continued)

118 Step 2: Choose an Animation File Type

119 Animation File Types What are some animation file types?  Animated GIF  AVI  MOV  MPEG  SWF

120 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

121 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.

122 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.

123 Step 3: Choose a Delivery Method

124 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.

125  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)

126 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.

127 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.

128 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.

129 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

130 Step 4: Publish the Animation

131 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.

132 Factors that Influence the Delivery of Computer Animations

133 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.

134 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.

135 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.

136  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?

137 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.

138 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.

139 Review (Continued) Animation File Types  Animated GIF  AVI  MOV  MPEG  SWF Plug-ins and Standalone Players  Adobe Flash Player  QuickTime  RealPlayer  Windows Media Player

140 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

Download ppt "2.02A History of Animation 2.02 Develop Computer Animations."

Similar presentations

Ads by Google