Last year I was very fortunate to have the opportunity to witness Steve Skultety's very creative Grade 9 class at Cecil Rhodes School. These students were using Paint, together with Ulead's GIF Animator Lite Edition "free" software to create animated GIF images to enhance projects that they were producing using Mark Overmars' "Game Maker" software. It was very gratifying to see students use their previous knowledge of one product (Paint) to create animated GIF images (using Ulead's GIF Animator) to enhance the workings of another piece of software (in this case, Game Maker). Their ability to multi-task using two or three applications on their desktop at the same time was extremely proficient. True, other students might be tempted to download a variety of existing images from the world wide web and animate them but it was these students' ability to create animated GIFs "from scratch" using Paint that I felt needed to be shared with other staff and students through this article.

Since "a picture is worth 1000 words", let us begin by examining an animated GIF. Those reading this article in the more traditional "hard copy" format will unfortunately note that the above "Get Animated" title is rather static. In order to appreciate the animation, one needs to view this article through a Netscape or Internet Explorer browser pointed at: http://www.wsd1.org/bitsbytes/0001/bboct00/ 

Those, who witness the animated title on-line, will note that the letters in the word "Animated" seem to slide in from the right in sequence. The steps for creating this sample type of animation, which students can easily construct using Paint and Ulead's GIF Animator Lite Edition, is the focus of this article. 

1. Begin by starting Paint/Paintbrush and define the workspace dimensions.
Select the Image/Attributes menu items. In the "Units" field, select the appropriate measurement unit be it Inches, Centimeters (Cm) or Pixels (pels). Next  enter appropriate values for the Width and Height. In our example, I set the units to Pixels, the Width to 600, and the Height to 35 pixels respectively. However one could just as easily have set the dimension attributes to define a square workspace of 5 x 5 centimeters. Remember it is to your advantage to keep the initial workspace small so that the resulting animated GIF is not a large file which takes more time for displaying on a web page. Likewise students have been disappointed because they have initially created a larger image using Paint/Paintbrush and when they have tried to shrink the resulting animated creation distortion becomes a significant factor. Thus err on the smaller size workspace as one can always use the magnification tool in Paint/Paintbrush to include necessary detail. In fact, the Grade 9 students at Cecil Rhodes School all worked within a 32 x 32 pixel workspace since this was the standard icon size that Game Maker required. However for younger students, set the Paint/Paintbrush attributes to define a workspace of approximately 6.6 x 6.6 cms or 250 x 250 pixels. Students should create within this white workspace.

2. Determine if the animation creation process is to be "assembled" or "dis-assembled".
Users need to understand that an animated image is simply a series of pictures which incorporate slight changes in successive views. Most first-time animators begin drawing their image using the traditional "assembly" process. For example a student might choose to make an animated image of a plant growing by building upon each previous saved image as follows:

1. A flower pot

2. A flower pot with a new shoot breaking the soil

3. A flower pot with a new shoot breaking the soil and a stem with a new leaf on the right

4. A flower pot with a new shoot breaking the soil and a stem with a new leaf on the right and left

5. A flower pot with a new shoot breaking the soil and a stem with a new leaf on the right and left and a flower at the top.

However, this same animation sequence can be created much more quickly for some users who prefer to use, what I have coined, the "dis-assembly" process by working in reverse. I am not an artist so I find it much easier to draw the final complete picture (in this case ROSE5.BMP below). Then I successively use the eraser tool in Paint/Paintbrush to erase portions. For example, after I have erased the complete flower, I re-save the image as ROSE4.BMP. Erasing the left leaf becomes ROSE3.bmp. After the right leave disappears under the eraser, the resulting image is saved as ROSE2.BMP. When all greenery above the lip of the flower pot is erased, then the image is saved as ROSE1.BMP.  Once these five images are assembled in GIF Animator Lite Edition, in the order ROSE1, ROSE2, ROSE3 ... ROSE5 (and "tweaked"), the resulting animated growth of a rose (shown above) is the result. 

==>   ==>   "Assembled" (left to right) by drawing additional components   ==>   ==>
ROSE1.BMP	ROSE2.BMP	ROSE3.BMP	ROSE4.BMP	ROSE5.BMP
<==   <==   "Dis - assembled" (right to left) by erasing successive components   <==   <===

The table above attempts to distinguish between the "assembly" process of animation which works in the traditional way from start to finish (left to right) by using the Paint/Paintbrush tools to add to each successive picture. The "dis-assembly" process of animation works from finished product to the start (right to left) using primarily the Eraser tool in Paint/Paintbrush to remove additional portions from sequential images. It is this "dis-assembly" process, which I used to create the animated "Get Animated" title which I will describe in detail in the following steps.

3. Design the final completed image within the Paint/Paintbrush workspace boundaries.
It is beneficial to select the color of the text at the beginning rather than try to fill each pixel of each letter later. After selecting the appropriate colour, choose the text tool and drag out a text rectangle within the left third of the workspace. Select a font, and size that fills the workspace for better visual impact and enter the title (in this case "Get Animated").

Since I am designing this animated image through the dis-assembly process, it is important that I save the successive files with names in which the numbers decrease (e.g. ROSE5, ROSE4, ROSE3 etc.). The reason for naming the files in decreasing order will become apparent when the bit mapped (BMP) files are imported into GIF Animator Lite Edition.  Unfortunately if one uses the "dis-assembly process", it is hard to predict how many different successive "erased" images will be created. To facilitate this "reversed numbering" file-naming convention, I name my "completed" image with the number 50 and work backward. In this case, successive bit-mapped files of the "Get Animated" image will be called GA50.bmp, GA49.bmp, GA48.bmp, GA47.bmp ... until the last image has been saved. I doubt that students will create any animations which are composed of more than 50 individual component files.

Once the "completed" image is created, select the "File/Save As" menu items and save the file (in this case as GA50.bmp). One can select, from the pull-down menu beside "Save as type:", to save the bit-mapped image as either 24-bit Bitmap (16,777,216 colors), 256 Color Bitmap or 16 Color Bitmap. To reduce the size of the file, which will contribute to a smaller animated GIF image which loads faster over the web, I save most of my animated images as the smaller-sized 16 Color Bitmaps files (except where I require more than 16 colors). 

4. Begin the "dis-assembly" process by erasing or modifying a portion of the completed image.
After saving the 16 Color bitmap file as GA50.bmp, the modification begins. In this case, the "Get Animated" title is created by having the word "Get" remain stationary while the individual letters in the word "Animated" slide in from the right one at a time. Since this animated file is created through the "dis-assembly" process, the next images will be saved with the last letter, the "d", appearing to the right of the remaining "Animate" as illustrated below:

Drag the "Select" tool in Paint/Paintbrush around the last letter in the title word "Animate". Users who have difficulty selecting just the one letter, may wish to chose the "Magnifier" tool to enlarge the title to 2x, 6x or 8x. Remember if you do make an error with Paint/Paintbrush, one can immediately reverse the action by selecting the menu items of  "Edit/Undo" or the short cut keys of <Ctrl + Z>. Once the last letter is selected, in this case the "d", it is dragged about 2 centimeters to the right of the remaining "Get Animate"  title and the resulting image is saved as GA49.bmp as shown below:

5. Modify or erase a component of the previous picture and save the resulting image.
It would have been possible to create an animated title in which each letter at the end of the word "Animate" was simply removed, in turn, and the resulting image saved. Once such images were compiled into an animated GIF using Ulead's GIF Animator Lite Edition, the word "Animate" would simply appear as if it were being spelled out as the next letter in the word magically appears. However in this title, the letters in the word "Animate" are to slide in from the right. For this animation sequence to work, it is important that the component images initially show the last letter as part of the word, then three steps where the last  letter is at increasing distances from the remainder of the word and lastly with the separated letter disappearing completely. Remember as you create these images in the "dis-assembly" process, it is important to save each image using a file-naming convention which uses numbers which decrease from 50 by one at a time. This single letter "extraction process" and the corresponding file naming convention is illustrated by the GA50.bmp, GA49.bmp, GA48.bmp, GA47.bmp, and GA46 images. 

6. Repeat the previous steps, saving successive images, until the last component is erased.
Now that the last letter (the "d") in "Animated" has been successively moved away from the remainder of the word in three steps and eventually deleted, one repeats the same modification and erasing process with the last letter in "Animate" (the "e") as shown below:

Continue the "dis-assembly" process by successively extracting the last letter of the second word, saving the images at three different positions to the right and then with the last letter deleted altogether. If this entire process continues until all the letters in the original word "Animate" are extracted following the procedure above and saved using the decreasing number file-naming convention, one will have 42 image files named GA50.bmp, GA49.bmp, GA48.bmp ... GA11.bmp, GA10.bmp, and GA09.bmp. It is interesting to note that each of these 42 files, which eventually will be part of the resulting animated GIF, is approximately 11K in size for a total of 435K. 

7. Use an animation tool to assemble the individual bit-maps into an animated GIF.
Next one uses animation software to arrange the Paint/Paintbrush individually created bit-maps into an animated sequence. This article will specifically address the procedure using Ulead's GIF Animator Lite Edition which is freeware that has been installed on newer computers in labs over the past several years. Similar steps can be used with other freeware such as Microsoft's GIF Animator.

Regardless of the GIF animation software that you choose to utilize, it is very important to realize that animation is best performed when it runs from start to finish. In fact, most animation sequences are based on the "assembly process". For this reason files need to be imported and arranged in order from start to finish. For example, the previous growing plant illustration should begin with just the flower pot (ROSE1.BMP) and progress through three intermediary images until the last image (ROSE5.BMP) was displayed with the rose. In general, the "assembly" process tends to be a building or adding sequence. On the other hand, if one was to animate theses five images using the "dis-assembly" process starting with the rose (ROSE5.BMP) and proceeding through to the empty pot (ROSE1.BMP), one would see an animated dying or vanishing rose. For this reason it is very important that one considers the order in which  the individual images are arranged during the animation sequence. 

However in our case, the animated title "Get Animated" starts with the word "Get" and the individual letters of the second word, "A  n  i  m  a  t  e  d", slowly slide in from the right. True, this animated title sequence could have been created using the "assembly" process with the word "Get" saved as GA01.bmp, and the three images of the first letter of the second word "A"  (starting with the farthest right) would be saved as GA02.bmp, GA03.bmp and GA04.bmp with the "Get A" being saved as GA05.bmp. Although it might be easier to name successive bit-mapped files by increasing the numerical portion of the file name during the "assembly process", I found that it was too difficult for me to line up the bottoms of the individual letters in "A  n  i  m  a  t  e  d" as they eventually formed the word "Animated". So I choose to use the "dis-assembly" process whereby I was assured that the bottoms of all the letters in "Animated" were perfectly aligned when the Paint/Paintbrush text tool originally created the title. True, I had to do my best to try and align the "d" (and the other individual letters) as it was slowly moved away from the remaining portion of the word "Animate" but the increased separation distance was much more forgiving to any slight misalignment of letters. 

8. Ulead's GIF Animator Lite Edition allows users to import many bit-mapped files quickly
Start GIF Animator Lite Edition and click on the "OK" button (rather than upgrade). Next close the "Startup Wizard" window. If a student is importing a small number of bit-mapped images, one can transfer them into GIF Animator Lite Edition one image at a time by clicking on the "Layer/Add Images ..." pull-down menus. In the "Add Images" window navigate to the folder on your hard drive where you have sorted the previously-created bit-maps, click on the image you wish to transfer to GIF Animator Lite Edition and click on the "Open" button to place this bit-map into the animation sequence below "Global Information". The student then repeats the import process described above to import the remainder of his/her bit-mapped component files.

However, if a student is importing a larger number of files into GIF Animator Lite Edition s/he can do it in one step (provided the images are properly numbered in sequence based on the "assembly" or "dis-assembly" process). One can import a single image or, in our case, 42 bit-maps by clicking on the "Layer/Add Images ..." pull-down menu. In the "Add Images" window navigate to the folder on your hard drive where you have sorted the previously-created bit-maps, and click on the lowest numbered file (in our case GA09.bmp), next use the slider bar at the bottom of the "Add Images" to show the highest numbered file. Hold down the <Shift> key while you click on this last file (in our case GA50.bmp). This "Shift-Click" process automatically highlights all files in the folder between the initial select (Click) and the final selection ("Shift-Click") as illustrated below:

When all files (GA09.bmp through GA50.bmp) have been highlighted using this "Shift-Click" process, one can click the "Open" button to complete the multi-file import into GIF Animator Lite Edition. 

Note that the images will automatically be imported in alphabetical (or numerical) sequence so it is very important so spend time deciding on the naming convention and whether one will use the "assembly" (with it's increasing numbers in the file names) or the "dis-assembly" process (with its descending numbers in each file name) so that when the files are imported they will display the animation correctly.

One can now click on the "Start Preview" button to see how the animation sequence might look. Next click the "Stop Preview" button to edit the time delay on certain images. I want the initial word image "Get" (GA09.bmp) and the final title image "Get Animated" (GA50.bmp) to appear for a longer time than the intermediate steps so that it catches the reader's eye. To do this I select the second frame (GA09.bmp) under "Global Information" and change the default delay from 10 one-hundredths of a second to 100. Similarly I change the delay time to 100 on the last image in the sequence (GA50.bmp) to cause the first and last image in the animation sequence to appear for one second while the intermediate steps flash by at one tenth of a second each. Click on "Start Preview" to see if the change requires additional tweaking. 

9. Save the sequence of bit-mapped images as an animated GIF.
Once you are satisfied with the resulting animated preview, click on the "File/Save As" menu items, navigate to a particular folder for storing your animated GIFs, give the file a name and save it with the default GIF file type. GIF (or Graphic Interchange Format) files were created using a compression scheme that reduced the size of conventional bit-map files into a much smaller sized file for use on the world wide web. In order for web pages to load quickly, it is necessary that the images be small in file size. For example, the table below indicates how GIF Animator Lite Edition imported 42 bit-map files with a total file size of approximately 435 kilobytes and converted it to a single animated GIF file of only 23 kilobytes.

10. View animated GIFs by loading them into your browser.
Unfortunately, because GIFs were initially designed for the world wide web pages, one needs to view them using either Internet Explorer or Netscape browser software to see the animated effects.

• Internet Explorer users must start the browser and click on the "File/Open" menu items. Next click on the "Browse" button and navigate to the folder containing the animated GIF. Modify the import filter by clicking on the down-arrow to the right of "Files of type:" and select GIF files (rather than the default HTML files). Select your animated GIF file and click on the "Open" button to display the resulting animation in Internet Explorer browser.

• Netscape users must start the browser and click on the "File/Open Page" menu items. Next click on the "Choose File" button and navigate to the folder containing the animated GIF. Modify the import filter by clicking on the down-arrow to the right of "Files of type:" and select "All Files (*.*)" (rather than the default HTML files). Select your animated GIF file and click on the "Open" button twice in succession to display the resulting animation in the Netscape browser.

11. Apply the previous information to animating an object rather than letters.
The previous 10 steps provided a mechanism for animating the "Get Animated" title using a "dis-assembly" process. These same steps can be used to animate a hand-drawn image created in Paint/Paintbrush. Many users are unaware of the process by which detail can be added to small Paint/Paintbrush creations. If the user creates an image and clicks on the Magnify tool, s/he is allowed to magnify the image by either 2x (200%), 6x (600%) or 8x (800%). In addition, if the Magnify tool is selected, one can simply click on the initial small image to enlarge it automatically by four times or 400%. If one selects the "View/Zoom" menu items and the "Show Grid" option, it is easy to work on a small object and change the detail one pixel at a time. These tools can help students design images as small as 30 x 30 pixels. The animated GIF at the right, which shows the top view of a car moving North up the screen, was designed using the Magnify tool in Paint/Paintbrush to add detail one pixel at a time.

It was quite simple to animate this car. Once the initial image was created (Ncar1.bmp) it was copied and certain changes were added to the original image using the "assembly process" to create the second image (Ncar2.bmp). The intention was to import these two bit map images into GIF Animator Lite Edition so that when the software cycled between the two images the car would appear to move. 

The top view of this car pointing North is shown in a magnified 400% image to allow the creator to adjust the image pixel by pixel. Note the added changes in the right hand image which help create the motion effect through animation:

• Additional yellow pixels are added to the front lights to give the illusion of bouncing headlights.

• A puff of exhaust is added to the tail pipe

• The alternate pixels (brown and silver) are reversed in each tire image between Ncar1.bmp and Ncar2.bmp When the two images are loaded into GIF Animator Lite Edition and compiled, the tire pixels quickly alternate so that it appears as if the tire treads are turning.

When both images were imported into GIF Animator Lite Edition, by clicking on the "Layer/Add Images ..." pull-down menu, the preview mode was somewhat jerky. To enhance this animation, it was necessary to place a check mark in each of the two frames (Ncar1.bmp &Ncar2.bmp). By selecting the "Edit/Duplicate" (All checked images) menu items, it was possible to choose to duplicate 10 more pairs of images without having to use the "Layer/Add Images" over and over. The "Start Preview" button was clicked, the animation ran so much smoother, and a new animated GIF was saved.

12. Integrate this animation process into one of your classes.
Leslie Gentes, from Sargent Park School, shared with me an innovative way in which she introduced an animation activity using Paint/Paintbrush. This animation project was introduced as an activity for "I Love to Read" week in which Grades 3 - 6 students were involved. Leslie began by reading Mercer Mayer's picture book "There's a Monster in My Closet". She also showed the students other books by Mayer including "There's an Alligator Under My Bed" and "There's Something in the Attic." The students were then instructed to make an animation of a monster coming out of a closet, from under a bed, or coming up the attic stairs. They each made 4-6 different pictures in Paint and then used Ulead's GIF Animator Lite Edition to animate the sequences. The benefit of such an open-ended animation activity was evident as each student's interpretation of a "monster" varied and the creativity demonstrated was outstanding.

13. Share your creativity on the S.O.A.R. web site
Teachers are encouraged to challenge students to use the techniques described in this article to create original animated GIFs using a Paint/Paintbrush 200 x 200 pixel square workspace. Student and staff creations are to be e-mailed as attachments to Brian Metcalfe who will display them on the S.O.A.R. web site at: http://www.wsd1.org/soar