jump to navigation

#10-Creating Low Threshold Animations for Teaching and Learning

July 24, 2002

LTA Overview

Teachers know that many concepts are best presented using supporting visual materials, especially for certain types of learners. In a traditional classroom, these may include photographs, line drawings, diagrams, schematics, graphs, and charts. For many concepts, however, movement is an integral part of understanding a given concept or material. For example, the following concepts are all better understood with the incorporation of movement:

  • the trajectory of a cannon ball shot out of a cannon
  • the foot fall pattern for different gaits of a horse
  • how the painting of a picture progresses
  • the movement of troops during the historic battle of Gettysburg
  • the dance a bee may complete after returning from a foraging trip

Credits

Nancy Bowers
Instructional Support Specialist
Idaho State University
bowernanc@isu.edu

 

There are literally thousands of examples where animations may be used to enhance learning. Many of you have probably seen the marvelous animations that may be created using Flash, a Macromedia product. Flash allows you to create fairly sophisticated animations and interactive exercises, yet the learning curve may be rather steep for most people. The software is also rather expensive and may be out the price range for many faculty.

This week’s low threshold application for creating animations uses fairly easy to learn software which is also inexpensive (or even free). This LTA will show you how to create your own animations using GIF Builder, shareware that runs on the Macintosh platform. Similar animation programs exist for PCs. Most users will want to be able to display their animations online, so this LTA also includes some basic instructions on how to insert your animation into a webpage.

LTA Level

This LTA is geared to towards mainstream faculty with an intermediate level of technological expertise.

LTA Outcomes

By working through this LTA, the user will be able to create simple animations that are capable of conveying more information than a traditional static picture.

Skills Required to Complete the LTA

You will need to have a certain level of comfort working with a number of different pieces of software and equipment. Specifically, you will need to be able to scan the material you want to present. You will also need to be able to use a graphics program, such as the one that comes free when you buy a scanner, or something like Adobe Photoshop. In these programs, you will need to be able to crop and modify your files. You should also be able to create webpages either from scratch or using a web editor (such as Netscape’s free Composer). The instructions presented here are for a Mac program, but similar animation programs exist for the PC.

Hardware/Software Required to Complete the LTA

Hardware

For the specific instructions provided here, you will need a Macintosh computer that runs the necessary software listed below. However, if you obtain the necessary PC animation software, you may create animations using a PC as well. You will also need to have access to a scanner; a color one is preferable.

Software
  • Graphics software that integrates with your scanner, or
  • Graphics program for editing scanned images
  • GIFBuilder (for Macs) or PC alternative (e.g., GIFmation, GIF Animator)
  • Internet Browser (e.g., Netscape, Internet Explorer)
  • HTML Editor or some way for creating webpages

Content Materials

You will need visual materials that relate to the concept you are presenting, such as either a single picture that can be broken up into parts (e.g., hydrologic cycle, kinetic/potential energy) or a series of pictures that can be combined into one (shark jaw, teleost jaw).

LTA Procedure – Summary

Creating animations can be as easy or complex as you want to make them. The ease depends on the material that you start with and the amount of manipulation that is necessary. The process though can be broken down into four basic steps:

  • Scanning the material that you want to animate
  • Manipulating your graphics files to be used to create your animation
  • Creating your animation
  • Embedding your animation into your online instructional material

LTA Procedure – Detailed

Scanning the material

For the purpose of this LTA, we will use an animation example from an ichthyology course I teach. The figure that we will animate illustrates the protrusible jaw of teleost fishes. The original line drawing was scanned from the course text book (Helfman, G.S., B.B. Collette, D.E. Facey. 1997. The Diversity of Fishes, p.187. Blackwell Science, Malden) and saved as a GIF file:

lta10a.gif

You’ll note that this is a series of six static images designed to illustrate jaw movement. We will use this image to create our animation. Please respect fair use when it comes to selecting the material that you choose to use.

Manipulating your Graphics Files

A graphics program was used to cut the single file into six separate files, using the angle of the lower jaw as a frame of reference to keep all files the same size (125 x 100 pixels). The three main jaw bones in each of the frames were color coded at the same time:

lta10b.gif

Creating the Animation

For this LTA, instructions for creating animations will be based on the Macintosh-based software program, GIF Builder, although as mentioned, there is equivalent software for the PC.

Open GIF Builder and select New from the file menu. An empty frames window will appear (see below). If it doesn’t, you may need to click on Window from the menu at the top, and then click on Frames Window. The same is true for the Preview Frame and the Colors Frame.

lta10c.gif

Click on File and choose Add Frame. Find the file that you want to be the first frame of your animation and add it. As each file is added, they are listed in the frame window. Continue with the remaining frames until they have all been added. If you need to reorder the frames, click on the frame name and drag to where you want it. When you are done, the frames window should look like that below:

lta10d.gif

Once you have added all of your frames, there are a number of Options you may set for each frame. The most important one for this animation is the Interframe Delay. This is the amount of elapsed time between frames. If you want the time delay to be constant between frames, highlight all of the frames and click on and then choose Interframe Delay in the Options menu. The Interframe Delay dialog box is displayed:

lta10f.gif

You should usually avoid the option “as fast as possible”, because it can go really too fast on modern computers. For this animation, I choose 40/100.

The only other setting used for the jaw animation, was setting the number of times the loop was repeated. To set this option, choose Loop under the Options menu and click how ever many times you want the animation to run before it stops. Alternatively, you may choose Forever. If you choose to stop the animation after a certain number of loops, you’ll want to add a note on your page that tells your viewers that they may replay the animation by reloading their browser. You may preview your animation by choosing Start in the Animation menu.

Embedding the Animation in a Webpage

Regardless of the number of files that you used to generate your animation, the end result is a single GIF file. Animated GIFs get put into HTML pages just like any other graphic and you can use GIFBuilder to provide you with the HTML code. Here is how to add your animation to a webpage:

  1. Do not close GIFBuilider, but open up your HTML source file and determine where you would like to place your animation.
  2. Go back to GIFBuilder and click on Edit and then Copy HTML Image Tag.
  3. Return to your HTML page where your animation should be and click Paste.

Alternatively, you may add the GIF to your webpage via an HTML Editor. Then use a browser to open the page to determine if you are satisfied with the location and running of your animation. You may edit your animation settings by opening GIFBuilder, clicking on File and then Open.

Below is the final product of the animation we just created.

lta10g.gif

Comments»

No comments yet — be the first.

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: