Animation Tutorial 3: Animating a science-related image sequence (NOAA Satellite images)

Developed by B. H. Giza, copyright B. H. Giza © 2009.

Standards

Audience

Purpose

Objectives

Planning

Materials

Step 1

Step 2

Step 3

Satellite Links

Glossary

Summing Up

National Educational Technology Standards for Teachers (2008):

2. Design and Develop Digital-Age Learning Experiences and Assessments
Teachers design, develop, and evaluate authentic learning experiences and assessment incorporating contemporary tools and resources to maximize content learning in context and to develop the knowledge, skills, and attitudes identified in the NETS-S. Teachers:

  • a: design or adapt relevant learning experiences that incorporate digital tools and resources to promote student learning and creativity.

Texas Pedagogy and Professional Responsibility, EC-12:

TEXAS PEDAGOGY AND PROFESSIONAL RESPONSIBILITIES (EC-12) STANDARD III

The teacher promotes student learning by providing responsive instruction that makes use of effective communication techniques, instructional strategies that actively engage students in the learning process, and timely, high-quality feedback.

Texas TEKS §126.12.

Technology Applications (Computer Literacy), Grades 6-8
(5) Information acquisition. The student acquires electronic information in a variety of formats, with appropriate supervision.
The student is expected to:

  • (A) identify, create, and use files in various formats such as text, bitmapped/vector graphics, image, video, and audio files;

Texas Technology Teacher Standards

Standard VIII. The digital graphics/animation teacher has the knowledge and skills needed to teach the Foundations, Information Acquisition, Work in Solving Problems, and Communication strands of the Technology Applications Texas Essential Knowledge and Skills (TEKS) in digital graphics/animation...
Teachers of Students in Grades 8-12 The beginning teacher of digital graphics/animation is able to:
Foundations

  • 8.2s use the vocabulary related to digital graphics and animation software;

  • 8.8s distinguish between and use the animation techniques of path and cell animation;

Back to the top

Audience for this lesson

The target audience for this activity is grades 6-8 science teachers and prospective teachers. It also applies to teachers working toward Texas EC-12 Educational Technology Certification and the Master Technology Teacher Certification.

Back to the top

Purpose of this Activity

The purpose of this activity is to help teachers develop student-centered animations using NOAA satellite images from the Internet and a cross-platform, open-source6 tool: The GIMP3 (Gnu Image Manipulation Program, version 2.2). In doing so, students will also be exposed to a number of remote-sensing and Environmental science concepts at levels that are appropriate for the middle school science classroom.

Introduction

The potent GIMP image editor has the capacity to import many graphic file formats, including the common Internet JPG file format which is used by NOAA5 to publish satellite images on the World Wide Web. The GIMP can import these images as a sequence and assemble the image sequence into an animation. With the free (open-source3) GIMP Animation Package installed, even more power is available to the user, including the ability to create more sophisticated animations - but that is for another, more advanced tutorial.

What can a classroom teacher do with this kind of project? Here are some ideas:

  • In science, they can use it to explore phenomena in our natural world which take place over a time span greater than can be observed in a class period - or that occur at times or at scales that are not easily observed without the assistance of technology. The "satellite image animation" example seen below is an example of this.

  • In language arts they can use it to build a collaborative story-telling exercise - a group of students work together to plan and generate a stop motion animation that illustrates a concept in language arts, science, or other content area. in adding to a drawing, elaborating and extending it in turn. This builds technology skills, cooperative learning process skills, and the ability to plan and execute procedures in technology.

A Sample Exercise: Creating the NOAA Satellite Images Animation

Back to the top

Objectives for this lesson

The objectives for this lesson are:

  • The teacher will be able to use a graphics program (GIMP) to integrate a sequence of image files into an animation.

  • The teacher will be able acess US governement agency satellite and radar images and integrate them into a lesson.

Back to the top

Planning for this lesson

Prior to attempting this lesson, the teacher should download or obtain (1) the GIMP (Gnu Image Manipulation Program), and (2) the Animation image file sequence, install them into a folder on a Windows computer and make sure that the software work on the machines that will be used for the activity (including testing the browser to ensure that the computer can access the images and play GIF format files).

Animation is an effective way of addressing multiple modes of learning in students - as well as a powerful tool for teaching how graphics and video are related. Animation is also one of the most important ways to show how motion in film is actually an illusion generated by the way our eyes acquire information (in discrete images) and how our brain processes it. For more advanced audiences, this activity may be extended to provide analogies to many "continuous" processes which are actually made up of swiftly changing discrete components...from the "frames" of a digital music file, to the packets of information on a network.

  1. Versions of the GIMP for any of the common operating systems can be obtained from http://www.gimp.org. We shall be using the "Portable" version for Windows this tutorial. It can be downloaded from http://portableapps.com/apps/graphics_pictures/gimp_portable If you install it to a USB drive, then you may later drag its installed directory to the desktop of a Windows machine and it will work from that location as well. Of course, the teacher should always test it in advance to see if the portable (directory copy) works for you on a particular machine.

  2. The image file sequences used in this tutorial are goestpac.zip and goestatl.zip (4 to 5 MB each), a series of color water vapor JPG4 format images obtained from the NOAA GOES satellite imagery locations on October 27 2008. The compressed folders contain a sequence of JPG format images of the Pacific and Atlantic from the geostationary GOES5 satllites (East and West). There is also an entire page of images from the Hurricane Paloma event on November 9 and 10, 2008 and from Hurricane Rick on October 19 - 22, 2009 that may be useful.

Back to the top

Materials for this lesson

The materials for this lesson are:

  • A relatively modern computer running Mocrosoft Windows XP or Vista which has a USB drive and/or an Internet connection for obtaining and installing the software and image files. It must have a working sound card. For our animation generation we shall be using the GIMP Portable, which will run from a USB drive, or can be copied onto the desktop of a modern Windows computer without the need for "Administrative" rights for installation.

Back to the top

Steps

Steps (activity summary).

For the purposes of this tutorial, we shall use the Windows XP operating system, but GIMP software is available for other modern operating systems, including Macintosh OSX and Linux KDE/Gnome systems.

  • Step 1: First we shall access the NOAA satellite websites and explore their image sequences. We shall save a few images, but noting that they refresh in intervals of 30 minutes (or so), we shall use a previously saved image sequence to develop our animation.

  • Step 2: Using GIMP we shall import and edit a sequence of images for our animation, and export it as an animated GIF format file.

  • Step 3: Using a modern web browser we shall import our gif animation file and explore aspects of our world that are made easier to view through the animation imagery.

  • Summing Up

Back to the top   |   Back to the "steps" list

Step 1

Opening an image sequence in the GIMP

GIMP Portable splash screen

GIMP main menu

GIMP Open as layers command

Open the GIMP. Assuming that you already have a set of images in a directory, and that they are appropriately (sequentially) named and are the same size and file format, you may use the GIMP's FILE: Open as Layers Command sequence to navigate to your images in their directory. Select the oldest image in your sequence as your base image and "multiple select" the rest of the images by using the SHIFT-Select procedure (holding down the shift key while touching the first and last image in a series).

GIMP Open as layers navigation window

GIMP open as layers command

We shall be importing our images into GIMP as a stack of layers.

You may use the image window's File command to perform a number of other operations. Note: you now have two separate and moveable GIMP windows - first, a Tool Palette Window, and second, an Image Window that displays the image and provides a number of menu items which contain functions for work on the image (File, Edit, Select, View, Image, Layer, Tools, Dialogs, and Filters). In recent versions of the GIMP you may view or restore any hidden or closed window you may use the GIMP's Window menu to restore a "Dock" (a moveable window).

Back to the top   |   Back to the "steps" list

Step 2

Working with our Animation images as a "stack of layers"

      GIMP open as layers command

We have added our image sequence into GIMP as a stack of layers using the Image Window's FILE: Open as Layers command. We may "multiple select" more than one image by using the SHIFT-Select procedure (holding down the shift key while touching the first and last image in a series) or the CONTROL-Select to choose or de-select a set of images one at a time.

GIMP Open as layers navigation window

The Navigation window used by the GIMP is derived from Linux and Unix traditions, and has a different look and feel from the navigation windows Windows or Macintosh users are familiar with. The left-most "Places" window shows disks and directories (which can be double-clicked to enter), the top shows the path to the directory you are in (for example, these images are in a directory at C:\graphics\satfotos-goes-east\goeswest-tpac_water-vapor_pacific). The central window shows the files in a particular directory. On the right there is a preview window that may be used to display a small preview of any partivcular graphic file. You may use commands from the lower portion of the window to filter for any particular file type, or all graphic file types (as in the example above)

GIMP layers dialog command

Once we have imported the first (oldest) image in our sequence, we shall add the rest as a stack of layers. The Dialogs: Layers command will open a new moveable window, the Layers Palette. This palette contains a number of tools for performing operations related to layers (such as re-ordering a layer or layers, working with opacity or transparencies, or modes (properties) for any particular layer, etc.)

You will see your stack of images (stack of layers) in the Layers dialog box. This tutorial does not delve into all the features of layers, but the GIMP is a powerful graphics editor, and much of its power is in the operations that may be performed on files in the layer palette.

GIMP Layer dialog box

Now that our stack of image have been imported, we can use the layer palette to re-order them, or delete one, etc. We can test our animation with the animation tools that are available from GIMP's Filters: Animation: Playback command.

GIMP Animation Preview command

The animation playback window has the standard player controls with buttons to start, pause, step-through, and rewind an animation. If there is a glitch or things don't look the way you desire, you may re-order or remove individual layers with the Layer palette. Your oldest layer should be on the bottom, and newest on the top.

GIMP animation playback window

Back to the top   |   Back to the "steps" list

Step 3

Saving our animation as a GIF format file


The GIMP can export in a large number of graphics file formats, including the popular and well-supported 2GIF file format. GIFs can support animation, although the number of colors is restricted, and this older file format lacks some of the detail of some newer file types (e.g.: PNG and JPG). GIMP also has a lesser known, native file format (XCF) that can be used to save a project with all the layers and properties intact, so that you may exit and re-open the file where you left off. But this tutorial is about creating GIF animation, so we shall use the "File: Save As" command sequence to name and specify where to save our file. (For the purposes of this tutorial we shall name it "satimages01.gif"). The Save As window gives you another specialized navigation window, and some subtle plus and minus signs at the bottom of the window that may be used to expand the list of file type and save location options.

GIMP Save As window

Once you choose "Save" in GIF format you are presented with a smaller "Export as GIF" properties window. We want to make sure that all our images are displayed in an animation sequence so make sure that the button for Save as Animation is selected. Once we select that button and continue via the Export button we are presented with another properties window that permits us to set our frame rate in milliseconds (we shall choose 500 milliseconds, or half a second per frame). Don't be surprised if your GIF file is VERY large (too large in MB file size for practical use in a webpage). we have not optimized or re-sized the image. There are ways to greatly reduce the file size, but we shall save that for another tutorial. You may use your favorite web browser to open and view your animation. Here is a link to an optimized and re-sized (smaller) version of the one used in this tutorial.

GIMP GIF properties window 1

GIMP GIF export properties window 2

Back to the top   |   Back to the "steps" list

Summing Up

Summing up: Animations in other educational contexts.

Although the tutorial above focuses on a variation of "gif" animation in which a series of photographs is integrated into a moving image graphics file format, there are a host of other useful ways to use animation in the classroom. For example, in some other related activities, the "GIMP Animation" activity available from this link, the free and open source Gnu Image Manipulation Program and the popular open source TuxPaint graphics program are used to create GIF3 animation which can be displayed in all common web browsers. In the "Skeeter" Multimedia Microscope Animation activity available from this link, the free and open-source VirtualDub Program, the free and open-source Audacity audio editor, and a low-cost, popular digital microscope tool program are used to create a multimedia Video animation which can be played with common media players or imported into presentations.

Back to the top

Glossary

1Animation:

CEL Animation (and the related form known as STOP-MOTION ANIMATION) are among the most traditional approaches to creating an illusion of motion in film. Cel animation is the form used in hand-drawn cartoon animation found in film and television up through the 1980s ("Cel" is short for cellulose - the substance originally used for the transparency upon which a character is drawn - because much of the image is transparent, images can be superimposed on a background). In Cel animation drawings are produced in a sequence with one drawing after another displayed in rapid succession as frames in video sequence. Stop-motion animation works in a similar fashion, except that a model is photographed over and over with small changes to position giving an illusion of motion when the frames are combined into a continuous video. In recent years, computer processing has enhanced the ability of an alternative approaches such as PATH ANIMATION and CGI ANIMATION, with extensive use of computer graphics. MonkeyJam can import images in JPG or PNG format that have been created by either CEL animation or Stop Motion Animation techniques (and others). For more extensive information on stop motion or other animation techniques, see the Brick Films Resource pages at: http://www.brickfilms.com/resources.php

2GIF:

GIF (Graphic Image File format) is a proprietary and widely supported graphics file format that in its most common form incorporates sequential display of layers, permitting animated display. It is limited to no more that 255 colors, and is most often used for simple cartoon-like animation.

3GIMP:

GIMP (The Gnu Image Manipulation Program) is an open-source graphics editor that compares favorably in power and capability with such expensive, proprietary graphics editors as Adobe PhotoShop, or Corel Draw. GIMP is rapidly becoming one of the top image manipulation programs in the world, and it and its source code are available as a free download for all the major operating systems from http://www.gimp.org .

4JPG:

The JPG (or JPEG) graphics file format is a common image file format that is used for detailed images on the Word Wide Web. It can be compressed at a range of quality and file sizes, and is supported by all the common browsers. It is used to display high quality images in up to 16 million colors, but does not generally support animation in its common form. For more information see the Wikipedia image file formats page at: http://en.wikipedia.org/wiki/Image_file_formats

5NOAA (The National Oceanographic and Atmospheric Administration):

NOAA, the National Oceanographic and Atmospheric Administration, is a United States government agency that studies our Earth and in particular the air and water systems of our world and the activities that impact them. Its home page is http://www.noaa.gov. This tutorial uses Satellite imagery that NOAA makes freely available from the NOAA websites listed below, especially images from the GOES Satellite (Geostationary Operational Environmental Satellite), including the Atlantic and Pacific GOES satellites.

6Open-Source:

By its very nature, open-source software is ideal for the educational environment. It differs from proprietary licensing by requiring that the software be provided at no-cost, and that it remain freely alterable, so that it can be adapted or improved as needed. The source code that makes up the software is transparently available along with the software, so that any member of the programming community may examine it for bugs, and improve or adapt it without violating intellectual property rights. The key provisions in this case are:
1. Free Redistribution
The license shall not restrict any party from selling or giving away the software as a component of an aggregate software distribution containing programs from several different sources. The license shall not require a royalty or other fee for such sale.
2. Source Code
The program must include source code, and must allow distribution in source code as well as compiled form. Where some form of a product is not distributed with source code, there must be a well-publicized means of obtaining the source code for no more than a reasonable reproduction cost -- preferably, downloading via the Internet without charge. The source code must be the preferred form in which a programmer would modify the program. Deliberately obfuscated source code is not allowed. Intermediate forms such as the output of a preprocessor or translator are not allowed. Source: OSI (2008). The Open Source Definition, Version 1.9. The Open Source Initiative, Inc. Retrieved January 12, 2008 from http://www.opensource.org/docs/definition.php.

7PNG:

PNG (Portable Networks Graphics) is an open-standard graphics file format that incorporates file compression and millions of colors (as the JPG format does), as well as hidden text comments, and layers (as the GIF format does). The PNG file format was developed for modern web browsers and is slowly becoming more popular as a graphics format for cross-platform image editing. Many Earth science and satellite images on the web are in PNG format (or JPG format).

Back to the top

Satellite Image Links

Back to the top

  |  

Back to Education Technologies Home

   |  

Back to Dr. Giza's UTEP Home Page

   |  

This lesson and all of its screen-capture images were developed by and are copyrighted by B. H. Giza, Ph.D. © 2008. NOAA and United States government agency images are in the public domain as noted on their respective websites. Last updated November 9, 2009 - as of November 2009 this tutorial is under re-design to match the menus found in the latest update of the GIMP.