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 PHOTOS TO 3D - ILLUSION

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. Teacher Note: Supplemental Activity Just for Fun! The boy is looking at a zoetrope which is an example of early types of animation. Visit this link to read more information about zoetropes if interested: http://en.wikipedia.org/wiki/Zoetrope

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. Examples of Early Animation Teacher Note: Click on flipbook to see an example. (The flipbook link opens this URL: http://en.wikipedia.org/wiki/File:Daumenkino_kol.jpg) The examples link opens this URL: http://www.dickbalzer.com/Flash_Gallery.360.0.html Supplemental Activity Just for Fun! Click on the link for examples of early animation techniques. This site has interesting information that can be supplemental if desired. The link takes you here: http://www.dickbalzer.com/Optical_Toys.203.0.html To view examples of early animation, click on the Optical Toys link at the top or on the left side. This provides good examples of early animation techniques AND also of Flash animations since the examples are actually Flash movies.

Examples: How to Draw Animations Persistence of Vision in Animation Pac Man Flipbook BREAK DANCE (flipbook)

Traditional Animation Describe early animation. Also called cel animation or hand-drawn 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. Teacher Notes: The cel animation link opens this URL: http://en.wikipedia.org/wiki/Cel_animation A preliminary soundtrack is recorded after storyboarding to make it easier for the animators to synchronize the motion to the sound. The lead (or key) animator draws only enough keyframes to get across the major point of action. They keyframes are then matched to the soundtrack to get them in the correct places (pencil testing). Improvements are made and details added by assistant animators until the director approves the scene. Once approved, the scene goes to the cleanup department. Cleanup animators trace the frames onto a new sheet of paper. Then artists called in-betweeners draw in any missing frames between the keyframes needed to create the illusion of movement. (This process is called tweening). These are then pencil tested and must be approved. Once finished, they are transferred to a thin piece of transparent plastic called a cel (because it used to be made out of cellulose nitrate). The cels are then painted and photographed. If you click on the link and scroll thru the Wikipedia page, you can see a picture of an artist painting on a cel. Snow White was the first full-length animated feature film. The DVD has an excellent documentary of the making of the film and illustrates the traditional animation process.

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. Teacher Note: Tweening is the process of creating the frames between the keyframes. Pencil testing can now be done on the computer.

Computer Assisted Animation . . . continuation Even though computers are now used extensively, many traditional steps are still used. Storyboarding Pencil Testing Keyframes Tweening The current process is still the same until after the animation drawings are completed.

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. Teacher Note: Supplemental Information: The link below is to a paper written by early computer graphics pioneers and dealing with 3D modeling and texturing of images. This images from this paper can be used to illustrate how objects, or models, can be digitized into the computer. http://design.osu.edu/carlson/history/PDFs/ten-hidden-surface.pdf Just for fun! Students could research the story behind the University of Utah’s famous teapot.

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

Bridging the Traditional and Computer Eras Traditional animation is defined as the process of creating the illusion of motion by viewing a series of individual drawings successively. Describe computer animation. Computer animation is creating a digital scene by digitally recording cells, sorting them on an electronic storyboard, and displaying them electronically in succession.

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. The link opens this URL: http://en.wikipedia.org/wiki/Animation

Frame-by-Frame Animation (Continued) The quality of frame-based animation depends on the frame rate. Frame Rate = Frames per Second  FPS = Smoother Action Teacher Note: Supplemental Activity Just for fun: See if students can guess how many frames per second television uses. TV Quality Video = 30 frames per second Typical Computer Animation = 24 frames per second Minimum = Anything under 12 frames per second will look “jerky” The more frames per second, the smoother the motion appears.

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. Teacher Note:

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. Teacher Note: In the banner, the text is following a motion path. The butterfly is an animated gif following a motion path. The motion path was created using PowerPoint’s custom animation feature (Under the Slide Show Menu). When the Slideshow is running, click on the butterfly to see it follow the motion path. To show the motion path in the slide view, right-click on the butterfly and click Custom Animation. (In Office 2010, to see the motion path, click on the butterfly and then click on the Animations tab.)

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.

Programming or Scripting-Based Animation (Continued) Rollovers are extremely important for navigation buttons on user interface designs. Examples Web pages ■ CBT programs Kiosks ■ CD-ROM Training Games ■ CDs and DVDs.

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 Teacher Note: Supplemental Activity: An early example of stop motion animation used in film can be found here: http://memory.loc.gov/cgi-bin/query/h?ammem/papr:@field(NUMBER+@band(animp+1592)) It can be viewed in two different formats. It it entitled The Enchanted Drawing.

Uses of Computer Animations

How are the types of computer animations used? Entertainment Advertisement Selling Teaching Training The link opens this URL: http://en.wikipedia.org/wiki/Animation

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/

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

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 Insert a clipart image that is a vector file Hint: In Microsoft software, search for .wmf files. Ungroup the image. Edit the image then regroup it. Copy the image and paste it onto the next slide. Change the image or its location. Repeat for several slides. Teacher Note: Open the 3.01C Frame-by-Frame Animation Using PowerPoint Presentation to show a finished animation. Step-by-step instructions are listed below if you are unfamiliar with ungrouping a clipart image. Right click on the clipart, choose Grouping, Ungroup Click yes when prompted to convert the image to a Microsoft Office drawing object. Right click on the clipart again, choose Grouping, Ungroup The clipart is now ungrouped into its separate parts and all the parts are selected. In order to change only one piece of the image, you must click OFF the clipart and then click on the piece you want to change. Double-clicking on the piece to change will bring up the Format Autoshape dialog box where the colors can be changed. When you are finished editing the image: right click on it, choose Grouping, Regroup.

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. Teacher Note: Many tutorials are available online explaining how to create an animated gif using GIMP and PhotoShop. For your convenience, a couple of links to tutorials have been included below. You DO NOT have to use these tutorials. How to Create and Animated Gif in GIMP: http://www.makeuseof.com/tag/how-to-make-an-animated-gif-image-with-gimp/ How to create an animated gif in PhotoShop: http://creativetechs.com/tipsblog/build-animated-gifs-in-photoshop

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

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

Frame-by-Frame Animation Steps Choose a clipart that can be ungrouped, which is a vector image. Click on the clipart. On the Drawing toolbar click Draw, and then click Ungroup. Ungroup the graphic parts, start /removing the parts, and then add the parts back on one per slide. Set an automatic timer

Frame-by-Frame Animation

Frame-by-Frame Animation

Frame-by-Frame Animation

Frame-by-Frame Animation

Frame-by-Frame Animation

Frame-by-Frame Animation

Frame-by-Frame Animation

Frame-by-Frame Animation

Frame-by-Frame Animation

Frame-by-Frame Animation

Frame-by-Frame Animation

Frame-by-Frame Animation

Frame-by-Frame Animation

Frame-by-Frame Animation

Frame-by-Frame Animation

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

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 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. Link to flash interface: http://iit.bloomu.edu/vthc/flash/mainlayout.html Link to flash timeline: http://iit.bloomu.edu/vthc/flash/Timeline.html

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

Frames Per Second (continued) 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.

How do FPS, playhead, and scrubbing impact the process of designing computer animations? 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.

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 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” Multiple objects can be linked to one motion layer. Text layers can also be linked to a motion layer. Motion Guide Layer

Screenshots from Different Animation Software Packages Teacher Note: Have the students identify the different parts of the screens for the different 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/

Synfig Image created by Ricardo Graça and used with permission from: www.ricolandia.com

Autodesk 3ds Max This image used with permission from: http://www.softpedia.com/progScreenshots/3D-Studio-Max-Screenshot-15976.html

Guidelines For Designing Frame-by-Frame Computer Animations

Guidelines For Designing Frame-by-Frame Computer Animations What are the guidelines to consider when designing 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.

Guidelines For Creating Frame-by-Frame Animations (continued) 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. 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.

How do the different types of tweening impact the movement of objects? 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.

Copyright Laws

Copyright Laws Purpose Fair use situations Public domain material *Copyright laws protect the right of intellectual property and access to possible monetary rewards for owners, which should encourage creativity. *Fair use situations apply to use in news reporting, parody, research, and education. *Public domain material do not have a copyright for the possible following reasons: no copyright issued, copyright expired, or it was not renewed. *Check out website http://www.ccsj.edu/blackboard/BB%20Copyright_Fair_Use.pdf for more information on copyright laws and multimedia.

Review Parts of Computer Animation Software Parts of the Timeline 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.

2.02D Adding Sounds into Computer Animations 2.02 Develop Computer Animations

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

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

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

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.

Guidelines for Using Sound 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.

Copyright 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 What type of music can be used in professional productions? 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.

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

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

Text in computer animations What is the purpose of text in computer animation? 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.

Adding text into computer animations (Continued) 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

Describe what happens to text when it is added 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.

Possible Animation for Text (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.

2.02F Publishing Animated Videos 2.02 Develop Computer Animations

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. Teacher Note: The terms movie and video are being used to refer to the animation. Factors that can result in larger file sizes: The amount of movement in an animation affects file size. More movement = larger file size. The number of objects in a scene affects file size. More objects = larger file size. Color depth affects file size. More colors used = larger file size. The frames per second contained in the animation affects file size. Higher FPS = longer animations and larger file sizes.

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.

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

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. Teacher Note: Many software programs will allow animations to be exported as SWF files even if you do not have the Adobe Flash software installed on your computer.

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.

Delivery Methods (Continued) 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

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 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 Teacher Note: If file type is used that requires a specific player, a link should be included on the page to a website where the player or plug-in can be downloaded easily.

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 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. Data Bandwidth Teacher Note: Different types of connections (56K modem, DSL, etc.) can carry different amounts of data.

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.

Bandwidth and Streaming Rate What is the relationship between bandwidth and streaming rate? 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 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. 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