According to the dictionary, animation can be defined as "the act, process, or result of imparting life, interest, spirit, motion, or activity". In multimedia terms animation usually involves imparting motion of some sort to the objects on the screen. If used correctly, animation can make your instructional program more interesting to learners. On the other hand, if used incorrectly it can also irritate the heck out of them, and turn them off to your program.
Animation can be used for a variety of purposes, including to:
Animation in all its forms is actually the illusion of movement. This illusion is created by displaying a series of still images one after the other in rapid succession. If the images are placed close enough together (frame rate) and changed slightly each time then you get the impression of movement. This type of animation is possible because of the phenomenon known as persistence of vision. In brief, an object seen by the human eye remains mapped on the eye's retina for a brief time after viewing. This makes it possible for a series of images that are changed very slightly and very rapidly--one after the other--to seemingly blend together into a visual illusion of movement.
If you've ever seen a flipbook then you've seen this effect in one of its most basic forms. Each page of a flipbook has a single image on it - each one slightly different than the other. As you flip through the book the images on each page seem to blend together to form a moving image. This is the same phenomenon that allows us to be able to watch movies. Movies you see in the theater or on television are not "moving pictures" at all. They are just a series of still images displayed one after the other - at 24 frames per second, to be exact.
So, animation is really a trick of the eye. It's all in your head.
Outside of the computer world, there are a variety of different types of animation, such as cel animation, clay animation, model animation, rotoscoping, and many others. These different types of animation are created using a variety of methods. In the computer world there are basically two methods used to create animations: the frame-based based method and the path-based method.
With the frame-based method you have to create all of the individual images that will make up your animation and then string them together in flipbook fashion. You do this by first creating a series of separate images that differ slightly from one another. If your animation requires 10 frames then you have to create 10 separate images. You then use software to display them successively, giving the impression of a single moving image. This capitalizes on the persistence of vision effect mentioned earlier.
The following example illustrates this concept:
On the left you see each of the individual images that were created, and on the right you see the effect of putting them together one after the other in a single image. That combined image can then be used on its own. It's just like a flipbook.
One of the more common frame-based type of animations used in computer applications is the animated GIF. The acronym GIF stands for Graphics Interchange Format, and is usually used as a file format for still images containing 256 colors or less. However, it can also been used to display a series of images. This is accomplished by combining several individual GIF images into a single file. The image above is an animated GIF, and was created by combining the eight images on the left into the single image on the right. What's great about animated GIFs is that you don't have to have expensive software to create one, just a little knowledge about frame-based animation. The drawback is that the user has no control over the animation - it just plays in sequence and that's it (notice the image above just keep doing the same thing over and over). Plus, complex animations can be tricky to create as animated GIFs, and file sizes can get pretty large.
Another drawback of the animated GIF is that you have to create all of the separate images that you'll need to create your animation. You probably don't need to create 24 frames for each second as with commercial animation. It's possible to achieve the persistence of vision effect in computer graphics with fewer than 24 frames per second, but once you get too low the image starts to look jumpy and not very well "animated". Even so, it's still possible to create simple yet effective frame animations with just a few different frames. For example, here's an animated GIF composed of only 2 frames:
Still pretty effective, huh?
Animated GIFs can be imported into the Flash, PowerPoint, and HTML authoring environments. In addition to using animated GIFs, Flash has powerful frame animation capabilities built-in. You can combine separate frames in Flash manually, using the Cast to Time command, the Space to Time command, or by creating a film loop.
With the path-based method you create a single "object" and then direct the computer to modify various properties of that object over time. This could involve changing the location of the object, the size of the object, or even the color of the object. The most common property to change is the location; by doing so you can make the object move around the screen.
For example, you might start with a picture of a car and then tell the computer to move it from one side of the screen to the other side, giving the impression that it is driving across the screen. You don't have to draw the car at each different position, you just tell the computer the starting point, ending point, and speed, and it moves the car across the screen for you. In complex programs you could even have the car grow or shrink or change color as it moved across the screen, just by adjusting the properties.
Path animation is also referred to as sprite animation or object-based animation. Path animations can be created in Flash, PowerPoint, and HTML authoring environments. In Flash the path-based method is referred to as "tweening", and is quite powerful. You can pretty much make objects do whatever you want them to do.
In PowerPoint you can create what are referred to as Custom Animations to move objects around the screen. While PowerPoint is limited in the kinds of animations you can create, with a little creativity you can come up with some pretty impressive results. Have a look at this one:
Here is an example of a similar path animation made using Flash and converted to a Shockwave movie for use on a Web page:
As you can see, when working with multimedia, animations can be created and then imported into your authoring program, or in many cases they can be created within the authoring program. It all depends on the program you use. In any event, there's no doubt that moving images have a powerful effect on the human mind (not to mention lots of other minds - have you ever watched a cat chase a spot of light?). However, as with other multimedia elements, it's important to not overdo the use of animations. Don't have everything on the screen moving around and flashing. Animations are best used as simple attention getters, or better yet as supplements to your main instructional material.
For this competency we'd like for you to play around with your authoring program's various ways of creating and/or importing animations. Depending on the authoring software you are using, here are some LinkedIn Learning tutorials we recommend that you go through. Once again, keep in mind that the names of the tutorials may differ slightly depending on which set of tutorials you are using.
|PowerPoint||Nothing new here|
|Dreamweaver||Nothing new here|
Using a Guide Layer
|Other programs||Nothing new here|
When you've explored your authoring program's various ways of creating and importing animations, we'd like you to demonstrate your ability to create and use utilize animations using your authoring program. How you accomplish this will differ depending on the program you are using.
Begin by loading your activity from the last competency. For this activity, you can use the same menu as before. Once again, each of the three options available on the main menu should lead users to a new page or screen. These separate screens should contain the following:
Once again, if you are using PowerPoint make sure that users cannot advance through the show except through the use of the menu buttons.
If you want to try creating your own animated GIFs, try this tutorial. You'll need a graphics program to create the individual images, and an animation program to put them together as an animated GIF. If you do not already have a program for creating animated GIFs, try downloading one of these:
Frame Animation - With Flash you can use any of several methods mentioned earlier to create a frame-based animation. This includes manually combining separate frames by creating a film loop. Or, if you prefer you can import an animated GIF.
Path Animation - You can use tweening to accomplish this. Tweening allows you to pretty much animate any object.
Frame Animation - With PowerPoint you can import an animated GIF or create your own frame-based animation through the creative use of multiple slides.
Path Animation - With PowerPoint you can create a Custom Animation to move an object around the screen.
Frame Animation - With HTML you're pretty much limited to using an animated GIF, unless you want to write complicated programming code. Which you don't, right?
Save this activity in your program's native file format. Name the file "animation". Depending on the program you are using, you will end up with one of the following types of files:
Assignment: Animation Activity Grading Criteria: