Introduction

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:

  1. Show transitions
  2. Move objects across the screen
  3. Indicate change over time
  4. Illustrate concepts
  5. Direct attention to important elements on the screen
  6. Motivate users

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.

Types of Animation

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.


Frame Animation

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.


Path Animation

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:

Path Animation in PowerPoint

In HTML it's a little trickier to create path animations. You have to either write special code using something like JavaScript or DHTML, or use a separate program such as Flash to create the animation. Here is an example of a very simple path animation created using JavaScript. Click on the blue square to make it move:

 

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
Flash Creating Animation
Motion Tweening
Using a Guide Layer
Mask Animation
Other programs Nothing new here

Animation Activity

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:

  • One of the screens should have a frame-based animation. This can be an animated GIF or other frame-based animation. It's up to you what happens in the animation, but try to make it relevant to what you are doing in the course. If you use an animated GIF, you can either find one that's already available or try creating one yourself.
  • One of the screens should have a path-based animation. You should either have an object or a block of text moving across the screen in some way. It can either be automatic or triggered by the user via a link of some sort.
  • The third screen can have any kind of animation you choose (as long as it's different from the other two). Here's your chance to be creative.
  • Make sure there's a button on each screen to allow users to go back to the main screen.
  • Finally, include your name somewhere on the main screen.

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:

Windows: GIF Construction Set

Macintosh: GIF Builder


Flash Notes

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.


PowerPoint Notes

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.


HTML Notes

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?

Path Animation - With HTML, path animations can be a little trickier without the use of special code (such as DHTML or JavaScript) or an external animation program (such as Flash). Feel free to try using one of these more advanced methods. However, if you cannot manage to create a path animation this way, you may instead create a custom animated GIF. If you choose this option your animation should have at least 5 frames. When you are finished, include all of the individual images on your page as well as the completed animation.

Submitting your Activity

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:

  • Flash - fla(animation.fla)
  • PowerPoint - ppt or pptx (animation.ppt or animation.pptx)
  • HTML editor - htm or html (animation.htm or animation.html)
  • Other programs - swf or other supported export formats (animation.swf)

After you have saved the file, go to the student interface and submit your assignment for grading. Click here if you need additional information regarding submission of your assignment.

Assignment: Animation Activity
Points:
15

Grading Criteria:

  • Main screen includes a menu containing at least three separate buttons with mouseover effects.
  • Each button on the main screen leads to a new screen.
  • One of the new screens contains a frame-based animation, such as an animated GIF.
  • One of the screens contains a frame-based animation featuring an object or block of text moving across the screen.
  • The third screen contains an animation of the student's choosing.
  • Each screen includes a button that leads back to the main screen.
  • If using PowerPoint, the show does not advance except through the use of the buttons.
  • Student's name included somewhere on the main screen.