Penn State Learning Design Community Hub

The Best Choice .... according to the experts

Boag,
2002 – "Animation can be a very powerful tool capable of communicating complex
ideas. It is often much easier to show somebody how something works then
to try and explain it."

1. Use animations to show changes over time or three-dimensional structure (Nielsen 1995, Najjar 1998)
2. Animations should transition slowly instead of rapidly changing (Nielsen 1995).
3. Add stop and replay controls to allow users to pause animations or replay them as needed.
4. A single quick animation can attract attention (Rieber 1990), but continuous animation can be distracting (Nielsen 1995).
5. Interactive animations (where students control settings) allow for increased practice (Rieber 1990)
6. Some research studies reported a significant effect on student achievement
   of instruction that is supplemented with animation strategies.
7. Search Learning Object Repositories like the Penn State Multimedia Teaching Object archive for freeware educational animations.
8. Accessibility accomodations include
   
   1. Text description action in animation as needed
   2. Avoid continuous looping animations (looping distracts some students)
   3. Avoid rapid movement (too rapid can trigger seizures)

Rationale

Motion Based Usage

Najjar, 1998 – "To communicate motion-based information that changes continuously over time, when it is important to show how the information changes over time, animation or video appear to be [the] best [choice].

Three-Dimensional Use/Slow Pace

Nielsen, 1995 – "Since the computer screen is two-dimensional, users can never get a full understanding of a three-dimensional structure by a single illustration, no matter how well designed. Animation can be used to emphasize the three-dimensional nature of objects and make it easier for users to visualize their spatial structure. The animation need not necessarily spin the object in a full circle: just slowly turning it back and forth a little will often be sufficient"

Single Animation

Nielsen, 1995 – "Animated text should be drawn by a one-time animation (e.g., text sliding in from the right, growing from the first character, or smoothly becoming larger) and never by a continuous animation since moving text is much harder to read than static text. The user should be drawn to the new text by the initial animation and then left in peace to read the text without further distraction."

Basic Information

Definition of animation

animation – a sequence of frames (or images) that, when played in order at sufficient speed, presents a smoothly moving image like a film or video. An animation can be digitized video, computer-generated graphics, or a combination. (Scala 1993-2006).

When you include animation in instruction, consider

• Consider your learning objectives when
  • Are non-interactive animations the best way to present a concept? Do you need to show a process over time or a three-dimensional object?
  • Are interactive animations needed to help students practice a concept?
• If animation is needed, examine different animation
  types for appropriate criteria.
• Make sure to include appropriate activities, comments or questions with the animation so students know what to focus on.

Design for Audience Considerations

Rieber (1990) presented three design recommendations
for the use of animated visuals in instructional materials:

1. Animation should be used only when its attributes are needed in the instruction.
2. It may be difficult for novice learners to attend to the cues and details provided by animation.
3. Animations contribute to computer-based instruction by providing animation
   strategies that facilitate interaction between students and the instruction.

Different Animation Types

Here are some other factors to consider when choosing an animation. Decide whether you need:

1. Viewing Three Dimensional Objects – These animations move around and among objects to provide a sense of perspective. These animations can also focus on relative size, speed of an object, or how it moves in relation to other objects.
2. Motion over Time – These animations stress changes over time. Examples include time lapse to illustrate a flower opening or the operation of a machine in real time.
3. Drawing Attention – Simple "pulses", "fades" or "slides" can draw users' attentions to key portion of a content or to a change in information.
4. Interactive Animations – These animations add buttons or fields which allow users to change settings. Interactive animations are a good way to help students understand the effect of different settings or parameters on a process.

Simple Controls – Simple controls such as Pause, Stop and Replay are recommended for most animations so that users can focus on different aspects in different viewings.

Finding Animations

In recent years, many academic institutions and consortia have been placing educational animations for other educators to use.

The Penn State Multimedia Teaching Object archive includes animations and links to learning object repositories.

Creating Animations

Unfortunately, creating quality animations remains time consuming. If you need to create your animation, the following tips are suggested.

1. It's often most efficient to hire or contract an animation specialist – Most animation programs such as Flash, Java, and others take significant time to learn.
2. Remember to storyboard your animation carefully so that you or others can program it more quickly. Keep in mind that complex animations may be better for learners already
   familiar with the basics in a given topic.
3. Test out prototype animations with your target
   population of learners.
   • Test in your campus lab
   • Test in multiple browsers (e.g. Firefox, Safari, Internet Explorer)
   • Test in multipe platforms (e.g. Windows, Macintosh)
   • Recruit student testers from home machines (e.g. for extra credit)
4. Use version control to ensure that the most recent version of the animation is tested then implemented.

Accessibility

If you include an animation on an official Penn State Web page, then you need to include the following accessibility accomodations

1. Animations needed to present content should also include a non-animated, text- based alternative accessible to screen readers. Text with still images could also be beneficial for users who have cognitive difficulties processing animations.
   Note: Animations use for drawing attention or "decoration" do not need a text description.
2. Avoid automatic or looped animations, blinking and scrolling. These are distracting and, if incorrectly implemented, could trigger an epileptic seizure or headaches for some users.
3. Animations with sound should have synchronized captions or a text transcript.

Online Animation Formats

Flash

A popular program for creating different animations is Flash. The benefits of Flash are

1. Flash files are usually compatible with Windows and Macintosh
2. Flash is flexible enough to add simple player controls (e.g. Pause, Replay) and more complex interactivity.
3. Flash files are smaller than comparative video files.
4. Flash can be used for illustration so both still illustrations and animations can be in the same style.

Drawbacks are

1. Huge learning curves (greater than for scanning photos, recording podcasts or creating Web pages)
2. Accessibility difficult to build in. Text transcriptions are recommended for accessibility purposes.

Gif89 Animations

This is a special type of GIF file which combines multiple images in one file. This
is very much the same as cel-based animation, where each frame in the
animation is slightly different from the one preceding it. When the GIF
document is viewed, the multiple images display, quickly and in succession,
and produce a streaming animation.

These are the easiest to create, but are continuously looping, and so should be displayed in a separate window (as in the example below).

View Walking Penn State Lion (New Window)

Eight Still Frame Images of Walking Lion

Frame 1	Frame 2	Frame 3	Frame 4	Frame 5	Frame 6	Frame 7	Frame 8

Just like other GIF files, the number of colors and amount of noise in
the frames affect the overall file size. If you have a 100-frame animation
with each frame totaling 5K, your animated GIF will be 500K. It simply
multiplies in size according to how many frames you create and the file
size of the individual frame of artwork. The beauty of animated GIFs is
that they require no plug-ins, and the authoring tools to create them
are often free and easy to learn.

If you need sound in addition to motion, you cannot use an animated GIF
by itself. Instead, you may want to consider other animation alternatives,
such as Flash, or even video.

Java

In the past Java was a popular tool used to develop interactive animations. Unfortunately, it remains difficult to program an application compatible on both Windows and Macintosh.

Maya

This is a program used by major film studios to create realistic three-dimensional objects and scenes. At this date, exporting final animations is extremely CPU intensive and time consuming.

Other three-dimensional modelling/animation programs include "Bryce" (landscapes), "Poser"(people), "Swift 3D" (simple illustrations) and others.

References

Additional Links

• Adobe Deisgn Center Value of Multimedia in Learning
• Penn State Multimedia Teaching Objects
• Learning Object Repositories

Penn State Flash Tutorials

• Flash Animations
• Flash Interactivity