Using animation in e-learning.

The trend in both e-learning and traditional Web design is to eliminate the term animation because it brings up images of Saturday morning cartoons. Instead, the industry is referring to animation on a Webpage as motion graphics, and new job titles have been created, such as new media developer or motion graphics designer.

Motion graphics often are very effective if used properly in your e-learning program. Remember, though, that in addition to the complexity of their creation, you may face expensive charges from design studios that specialize in producing high-end animation.

To avoid pitfalls, here is some advice to help you make decisions about animation and some less complicated and inexpensive alternatives to use for your own e-learning creations.

Motion graphic types

The speed of a learner’s Internet connection—high-speed broadband versus a typical telephone modem connection of 56 Kbps—is a significant consideration in e-learning design. In addition, file size delivered to the learner is a vital part of keeping the learner engaged in your e-learning program.

Your e-learning developers are very aware of these limitations and have techniques and software tricks to deliver important e-learning animation without giving up reasonable download times for your learners. Here are some of your options.

Animated GIFs. When you really think about it, animation is just series of still images shown in sequence, like pictures in a flip book. Graphic designers have picked up on this 100-year-old idea by creating a graphic format that allows the browser to rapidly flip through a single file of sequential GIF images on the screen. Voila! Your learner experiences the illusion of motion. This type of animation is called an animated GIF. Most Web browsers recognize these files as just another GIF image and display the image you want without any problems.

An animated GIF is easy to create and modify. Your designer can use free software, called shareware, that can take individual images and combine them into a finished GIF animation. Your developer may use such software tools as the GIF Construction Set for Windows or GIFBuilder for Macintosh.

Advanced graphic design programs, such as Macromedia Fireworks and Adobe Photoshop, include tools for creating animated GIFs. If you own these software programs, creating these GIFs files is probably a capability your designer already understands. Your main job as a trainer is to understand the capability of a GIF and specify its use in your e-learning design.

The major disadvantage of an animated GIF is its file size. Remember, each frame of the animation is a single, complete GIF image. If your animation needs 20 frames, you have created a file of significant size that may be a download problem for your learner. Your designer can offer techniques to reduce the size of these files, but even after the individual images have been optimized, the files sizes are often remarkably large.

Another limitation of an animated GIF file is the degree of animation you can create with the technology. Traditional films are created at a rate of 24 frames per second. A GIF file isn’t going to give you the fluid motion of film. Perhaps you’ve seen an animated GIF in a banner headline on the Internet. You probably noticed that the image on the banner headline didn’t fly or fade in but appeared in sequence across the screen. Smooth fluid motion would require many individual frames, making the finished size unusable on your e-learning project.

Use animated GIFs to illustrate a simple concept or to add some eye-catching decoration your e-learning project. But, don’t overuse these elements because your learner will soon become bored or even distracted by your creative design.

Flash and Shockwave animation. Macromedia’s Flash and Shockwave programs allow you to animate your graphic ideas in bold and amazing ways. In fact, both are considered the industry standards for animating content. Macromedia claims that 97 percent of Web users have access to Macromedia Flash content. And most browsers that your learners likely use already contain the necessary software plug-ins to view Flash content.

Both file formats are powerful in their own ways and offer great flexibility for you and your designer to turn an e-learning vision into reality. One of the greatest advantages of Flash and Shockwave is their ability to play on any browser without the learner needing any additional player software (Windows Media Player or RealOne Player, for example). The ability to use the plug-in and watch the motion graphics is achieved from within the learner’s browser. He or she doesn’t have to do anything extra to view the content—just open the Webpage and enjoy.

The Shockwave plug-in isn’t installed on most systems, however. But if your e-learning is best served by the use of more complex Shockwave animation, the plug-in can be downloaded easily downloaded from the Macromedia Website. When deciding to use Flash or Shockwave for your motion graphics, you need to discuss potential issues with each type of software with your designer.

Flash and Shockwave provide a number of advantages for the user. First, Flash and Shockwave produce relatively small files that download very quickly. In addition, both software programs produce vector images, which your developer can use to create sharp and distortion-free animations. Second, Flash and Shockwave content are very popular in the development community, and your designer is likely to be familiar with the features of the software. Knowledge and experience with these common tools will reduce the overall development time of your project.

Third, the perceived download time for the user is quicker. Flash and Shockwave stream into the learner’s browser. What this means is that the viewer can begin seeing the animation before the entire file is downloaded. The learner will have less time to wait for something to happen; the animation will begin to play before it is completely downloaded. If you have ever watched a movie preview from the Apple Website, you’ve experienced streaming media—the movie preview starts to play in your browser before it has completely loaded.

Which to choose—Flash or Shockwave? Because you’re not a graphics or software expert you may wish to leave this decision to the expert working with you to create your e-learning program. But, understanding more about each program can help with your own e-learning design.

If you’re comparing by prices, Flash creation software is cheaper. Macromedia Director, which creates Shockwave motion graphic files, costs about US$1200, whereas Flash costs about $500. Director is a great tool for CD/DVD creation, but considering that you’re developing for the Web and that most Web browsers already support the Flash plug-in, Flash would probably be the better choice for you.

3-D Web graphics. Three-dimensional (3-D) motion graphics are very expensive to create and implement. Consider using 3-D graphics only if you have the time and budget to handle it. Software to create the models is expensive and often involves other manipulation to make it work in a Web environment.

Nevertheless, 3-D technology can accomplish some amazing feats. Imagine if your learners were able to pick up and manipulate a product as part of the e-learning process. Surgeons can observe simulated surgeries in three dimensions. As a training professional, you will see more of this technology in the years to come, but for right now 3-D animation is still in limited use for e-learning.

3-D animation software comes in many shapes and flavors. There’s software available to animate simple objects in 3-D (like rotating cubes and spheres). 3-D animation software can create and pose human figures in every shape and size. There’s 3-D animation software that can graphically render a complex engineering document or create a photorealistic nature scene. The pricing for these software packages ranges from several hundred to several thousand dollars.

Motion graphics in your e-learning project

Developing motion graphics takes much longer than traditional graphic design and requires a much more detailed script for your developer. There are three main types of motion graphics that you might consider bringing into your e-learning programs: instructional motion graphics, function motion graphics, and cosmetic motion graphics.

Instructional motion graphics explain a series of learning points by adding motion to a static graphic. They’re the most common type of animations you will use. This type of graphic is an integral part of the learning process because it address a specific learning point or objective and then uses motion to help illustrate the concept.

Instructional motion graphics take many shapes and forms. If your e-learning program consists of animation and voiceover audio providing the necessary instructions, your entire e-learning project could be considered to be an instructional motion graphic. You could also add an animated graphic to your e-learning project as an object for your user to click on to animate. You could design the course so that your learner reads a paragraph of text about a topic and then receives instructions to “Click the graphic on the screen.” When clicked, the graphic animates to demonstrate the key concept.

Functional motion graphics. Very similar to functional graphics, functional motion graphics are part of navigational tools. Buttons, lines, and other elements can be animated when the user interacts with them. Buttons can light up and pulsate, lines can blink, and the navigation bar can be picked up and moved to another location on the screen. All these elements are part of the functionality of the e-learning project, but they can be animated to provide additional interactivity for your user.

Cosmetic motion graphics. Cosmetic motion graphics are background animations that can add to the look-and-feel element of the e-learning project. Cosmetic motion graphics might include “mouse chaser”—elements that follow the learner’s mouse around the screen, background animations, or headers that fly in as each page loads. If you have ever used Microsoft PowerPoint and added transitions between the screens or had each line of the text fade in as you talked about it in your presentations, then you have some experience with cosmetic motion graphics.

You’ll probably use very few cosmetic motion graphics in your e-learning project because they can be very distracting to a learner. If the learner has to watch the same transitional animations between screens or have each page header swoosh across the top of the page, the novelty wears off very quickly and the user will tune out and turn off the computer. How many PowerPoint presentations have you laughed through because the creator used too many transitions? Use cosmetic motion graphics when appropriate, but don’t over do it!

Just enough, never too much

The article subtitle—“Just enough, never too much”—is important to remember when creating animation. Overusing either function or cosmetic animations can distract learners and destroy their ability to focus on the content. After all, the eye is automatically attracted to motion. Large sections of text or a challenging concept can completely lose its importance if the background or page header is moving or shaking. Correct answers greeted by a dancing elf quickly lose their impact and humorous effect.

Limit your animations and mostly rely on instructional motion graphics. If your entire program is a series of animations, be sure to allow the user some control over the animation; provide pause, stop, fast forward, or rewind buttons so that the animations can be stopped and started by the user. It’s important to use animation wisely, or not at all.

Just because you have awesome technology at your disposal doesn't mean you have to use it. Remember that the most important element of your e-learning program is learner comprehension and performance improvement on the job.