Animation Tutorial 1: Animating an Image Sequence, with the GIMP part 1

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

Texas Pedagogy and Professional Responsibility, EC-4:

TEXAS PEDAGOGY AND PROFESSIONAL RESPONSIBILITIES (EC-4) 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.

National Educational Technology Standards for Teachers:

II: PLANNING AND DESIGNING LEARNING ENVIRONMENTS AND EXPERIENCES.
Teachers plan and design effective learning environments and experiences supported by technology. Teachers:

• E: Apply productivity/multimedia tools and peripherals to support personal productivity, group collaboration, and learning throughout the curriculum.

Texas TEKS §126.3.

Technology Applications, Grades 3-5
(7) Solving problems. The student uses appropriate computer-based productivity tools to create and modify solutions to problems.
The student is expected to:

• (A) use software programs with audio, video, and graphics to enhance learning experiences;

• (B) use appropriate software to express ideas and solve problems including the use of word processing, graphics, databases, spreadsheets, simulations, and multimedia; and

• (C) use a variety of data types including text, graphics, digital audio, and video.

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;

The target audience for this activity is EC-4 teachers and prospective teachers. It also applies to teachers working toward Texas EC-12 Educational Technology Certification.

The purpose of this activity is to help teachers develop student-centered animations using two cross-platform, open-source⁴ tools: TuxPaint⁶, and the GIMP³ (Gnu Image Manipulation Program, version 2.2).

Introduction

The charming TuxPaint drawing program has a very simple, child-friendly interface. One of its features is that it automatically saves its images in PNG ⁵ ("Portable Networks Graphic") format, with an automatic file name generated from the date and time of the file save. This simplifies things considerably (the user is never presented with a "Save As" dialog). The images are saved into the "Userdata" subdirectory of the main TuxPaint directory. In a normal Windows installation that location would be C:\Program Files\TuxPaint\userdata\saved. This file save location (and other settings) may be modified with the Config.exe utility provided with recent Windows versions of TuxPaint. On Macintosh OSX, look in the user's library folder in Applications Support/Tux Paint/saved^*. One serendipitous result of this file-naming feature is that a user can easily save images into a file sequence, perfect for integrating into an animation. With each change or addition to the drawing, new files will be created, all with sequential names.

The potent GIMP image editor has the capacity to import the PNG file format, and assemble the image sequence into an animation. With the free (open-source⁴) GIMP Animation Package installed, even more power is available to the user, including the ability to import or export video in animation format - but that is for another, more advanced tutorial.

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

• They can use it to build a collaborative story-telling exercise - a pair of students can alternate in adding to a drawing, elaborating and extending it in turn. This builds technology skills, cooperative learning process skills, and can be utilized in may kinds of language arts or other content areas - limited only by the imagination of the teacher -- or their student (see this link for a similar activity incorporating webcams).

The objectives for this lesson are:

• The teacher will be able to use TuxPaint to generate a sequence of image files.

• The teacher will be able use the GIMP to import a TuxPaint image sequence and transform them into a GIF animation.

Prior to attempting this lesson, the teacher should download or obtain TuxPaint and the GIMP, install them and make sure that they work on the machines that will be used for the activity. Students should be already familiar with the TuxPaint and GIMP user interfaces prior to beginning this lesson.

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.

The materials for this lesson are:

• A relatively modern computer capable of running Windows XP for Microsoft operating systems, Mac OSX for Apple, and Gnu or KDE version 2 and above on Linux).

• An installed version of the TuxPaint and GIMP software packages. (This tutorial was created with GIMP for Windows version 2.2).

Steps (activity summary).

For the purposes of this tutorial, we shall use the Windows XP operating system...but the process is similar on Macintosh or Linux machines.

• Step 1: First we shall open TuxPaint and create a new (blank) image. Then we will use the various paint and image manipulation tools to create a simple graphic. Every few moments we shall save our image as a separate file.

• Step 2: Then, once we have completed our image we shall open the GIMP image editor, import all of the TuxPaint images as a "stack" of layers, one image stacked on top of the other (oldest below, newest on top).

• Step 3: Once we have loaded all of the images we may save, or export the stack as a single ²GIF format graphic image.

• Step 4: The GIF format is commonly used to create animations that may be displayed by web browsers, and in this case we may use a web browser to open and view our GIF animation.

• Summing Up

TuxPaint image creation

This image depicts a TuxPaint image, early in the draw-save sequence.

Each time the user adds to the image they should save it as a new file (use the SAVE: No, save a new file command). Depending on how smooth you want your animation to be, you may save more often - but the greater the number of images, the larger the file size of the final animation. Combining a sequential set of drawings in this way is the basis of the CEL ANIMATION ¹ technique. When the individual images are displayed in rapid succession they provide the illusion of movement.

GIMP image import

Once we have created our TuxPaint image sequence, we shall import them and "stack" them into a single animation image file with the GIMP graphics program. Open the Gimp, and once it has fully loaded, use the "FILE: OPEN" command to browse to the folder (directory) in which your series of TuxPaint images is stored.

The FILE: OPEN command gives you a browse dialog window that you may use to select and load the first of your image sequences. GIMP's browse dialog has a preview window that assists in this process.

After the GIMP loads an initial image, a new window containing the image is diplayed. This window has its own set of menus, including a FILE menu.

Once you have loaded your first image, use the image display's FILE command to import additional frames or images as layers with the "FILE: Open as Layer" command. Keep adding images as layers, one-by-one, until you have "stacked" all of your TuxPaint images into a series of layers, with the oldest (or first image) on the bottom, and the last one on the top.

Gimp image conversion and export

Once you have your stack of images assembled as layers you may save, or export them as a GIF animation by using the image window's "FILE: SAVE AS" command, and choosing GIF as the file type. Because your image may have a large number of layers (each in itself a separate image), this process may take some time.

At any point during the process you may see or adjust your "stack" by opening the LAYERS Window with the image window's "DIALOGS: LAYERS" command.

GIMP's FILTERS: ANIMATION command sequence has a number of tools for viewing or enhancing your animation (for example, giving you control over such things as how quickly your animation plays).

GIMP's FILTERS: ANIMATION: PLAYBACK option lets you preview your animation). Because GIMP's native XCF file format also supports layers (and animation) while preserving the original number of colors and detail, you may wish to save and work with your image in XCF format before finally saving (and reducing it) to its final GIF image form.

Viewing your image.

To view your animation, simply load it in your browser (All the modern browsers will load an individual GIF image). You may also write a simple web page to "contain" your GIF. This is easy to do using a tool such as the NVu web editor.

The final TuxPaint-GIMP animation, resized and optimized for web display - 20KB in size.

Summing up: Gimp animations in other educational contexts.

Although the tutorial above focuses on a variation of "cel" animation in which a series of drawings is displayed, there are a host of other useful ways to use animation in the classroom. For example, in the "SKEETER" activity available from this link, a digital microscope and a frame-grabbing utility have been used to acquire a series of images of a mosquito larva in pondwater. VirtualDub, a free and open-source video-editor has been used for this. In the "Skeeter" activity the free software was used to assemble a multimedia video animation that permits the viewer to observe several hours of the behavior of the larva in a few seconds of animation. Finally, In the Satellite Image Animation available from this link the GIMP and free NOAA satellite images are used to create animations that empower young people to explore their world with new tools.

¹CEL Animation:

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, it 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 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 alternative approaches such as PATH ANIMATION and CGI ANIMATION to create illusion, with extensive use in the photography of three-dimensional models and the integration of computer graphics.

²GIF:

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.

³GIMP:

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 .

⁴Open-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 (2005). The Open Source Definition, Version 1.9. The Open Source Initiative, Inc. Retrieved January 12, 2005 from http://www.opensource.org/docs/definition.php.

⁵PNG:

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.

⁶TuxPaint:

TuxPaint is an open-source drawing program that integrates sound and other child-friendly features. It and its source-code are freely available as a download from http://www.newbreedsoftware.com/tuxpaint