Table of Contents - Vol. 23 No. 4 - April 2007

It has been stated that ....

 "In golf, as in life, it is the follow through that makes the difference."
                                                                                           - Unknown

To follow up on this "difference" thought, the Editor has decided to consider a change of format for this issue. Rather than share a collection of various articles of interest, this issue will focus on the theme of animation and how it can be used to facilitate learning in the classroom. Although readers can benefit from viewing this issue in it's traditional "hard copy" paper format, on-line viewing is recommended in order to experience the animation displays.

1. Claymation gets you "animated"
   This introductory, two page, segment describes the innovation and learning that took place at a workshop entitled "Celebrating the Art of Animation" that Brian Metcalfe recently facilitated.
2. Animation Bounce Activity #1
   Using GIF Animator Lite Edition freeware, educators are challenged to produce an animation that displays a ball inside a rectangular frame bouncing off each wall.
3. How to display an animated-GIF
   Did you know that Microsoft Word can be used to showcase animated-GIFs?
4. Animation Perspective Activity #2
   Learn how to use MS Paint and this "bowling alley" activity to create frames which can be assembled into an animation to represent a 3-D illusion.
5. "Star-Dot-Star" to the Rescue
   Readers who want to transfer camera images in JPG format into GIF Animator LE will welcome this "work-around" to help avoid "disappearing pictures".
6. "Curriculum Navigator" can identify where animation might support learning
   Want to know where animation activities can support the K-12 curriculum? Investigate the search techniques in "Curriculum Navigator" and learn where animation might be most effectively used.
7. Creative Claymations
   This section provides tips on how to set up a digital camera and how to improve claymation figures.
8. How to use "Photo Story 3" as an animation tool
   Using "Photo Story 3" as an animation assembly application requires reducing each slide's duration and removing the built-in panning and zooming effects.
9. How can one add a callout (speech or thought bubble) to a photo?
   Learn how to use PowerPoint to add callouts to any image.
10. Samples of Claymation Creativity
    On-line readers can marvel at the creativity of our educators.

Claymation gets you "animated"

by Brian Metcalfe - Technology Education

Recently I had the opportunity to facilitate a workshop entitled "Celebrating the Art of Animation". I was so fortunate to work with educators who were so very talented and who were willing to risk-take and collaborate while trying different techniques as they engaged in learning. In this article, I will attempt to capture the excitement and share the various tips and strategies that were so freely shared as teachers "walked the walk" and looked at animation, and the curriculum, through the eyes of students.

Let me begin by giving credit to other educators. The Manitoba Association for Computing Educators (ManACE) offers, during the winter months, a series of Technology Information Nights in which educators gather for a pizza supper and hear three 30 minute presentations on different aspects of how technology can be used to enhance education. A few months ago, I was fortunate to attend a session at Kelvin High School where Roland Buduhan of St. John's-Ravenscourt School presented an overview on a variety of animation and multimedia techniques. At the end of his presentation, I asked if he would be willing to share some of his resources with me as I knew that I would be conducting a future workshop on animation. I think that, like me, Roland believes in sharing resources with teachers in order that students ultimately benefit. He shared with me a CD of resources that I used for the basis of my animation workshop. Likewise, I contacted Steve Broda-Milian, of Fort Rouge School, who sent me an example of a claymation animated-GIF that he created with students when he taught at Weston School in 2000. In addition, thanks should be extended to Keith Strachan at Cecil Rhodes and Wendy Groot, then of Luxton School, who fostered animation in their classrooms and submitted student-created animated-GIFs to the "Students' Original Animated Resources" (S.O.A.R.) site at: http://www.wsd1.org/soar/  However, in order for a workshop, an activity, or a lesson using Information Communication and Technology (ICT) to be successful, one cannot simply use someone else's resources unchanged. One must "make them your own" and become active in the process by applying the following rule:

Don't just adopt it - adapt it.

My plan of action for the day-long workshop was to explore the animation process and focus on creating computer animations in the morning without the need for a digital camera. In the afternoon, participants would explore storyboarding, create claymation figures out of plasticine, and repeatedly take digital pictures after moving some aspect of the scene. Educators would then create a stop-motion animation from the manipulated images.

We discussed that students could create animations with software applications which cost no money. Microsoft or MS Paint, which automatically comes installed on all Windows computers, is used for creating a series of individual pictures or frames which have a slight change between successive images. A second product is used to assemble or "stitch" the series of frames into an animated-GIF or "show". In the morning, we chose to assemble the MS Paint-created images into an animated-GIF using the GIF Animator Lite Edition (GALE) freeware which was offered as a freebie in the May '98 issue of "Bits and Bytes". In the afternoon, we shifted to storyboarding and creating creatures with plasticine which were captured on digital cameras. These images were then transferred to computers where some participants imported them into GIF Animator Lite Edition for "silent movies". Other educators used Windows "Photo Story 3", which is a free download for Windows XP users, to create an animated "video" with background music.

The workshop began by examining the "Literacy with Information and Communication Technology (ICT) Across the Curriculum" poster to help educators identify descriptors that might be met through an animation activity. Participants discussed how an animation or claymation project could be used, not only to introduce technology into the classroom, but also to encourage cooperative learning and the use of multiple intelligences. Animation activities reinforce Literacy with ICT as students may be engaged in both the "Gathering and Making Sense" as well as the "Produce to Show Understanding" big ideas. The workshop continued by showcasing a  variety of student- and teacher-created animations. For example, on-line readers may click on the image at the right to see how Steve Broda-Milian involved his entire class while teaching at Weston School. Each Grade 3/4 student was challenged to made a figure of themselves out of clay. Steve decorated the inside of a box (in which duplication paper is delivered) to look like the school gym. For each picture, four students arranged the figures according to a storyboard while another student took each picture. These images, together with strategically placed title or text frames, were assembled using GIF Animator Lite Edition. On-line readers are encouraged to click the above image to examine the animation creativity of students.

When I was in the classroom, I always tried to plan activities that would cause students to "stretch". By that I mean, I was often able to ask a student, who was problem-solving a mathematics scenario, such questions as "Did you consider this option?";  "I wonder what would happen if .."; or "Is that the only way of solving this problem?" By asking or extending a procedure, I was, in my own way, trying to get students to take more ownership for their own learning.

When the following image, from page 17, of the "Literacy with ICT Across the Curriculum" publication was shared with participants at the animation workshop, educators began to see how animation activities could be enhanced and how students could take on more responsibility for their own learning when strategic questions were asked. To help readers of this article, I will identify ways in which animation activities might be enhanced by asking strategic questions that will be marked with a question mark icon.

Animation Bounce Activity #1
Participants began their "hands-on" portion by using MS Paint to draw a thick rectangular boundary around a 640 x 480 pixel picture. Using the circle and fill tools, a ball was placed inside the boundary. This picture was saved as a bitmapped default image named "ball01.bmp". Next the MS Paint Select tool was used to capture the ball and move it slightly towards one of the walls. The new image was "Saved As" "ball02.bmp". The move and "Save As" procedures were repeated sufficiently to simulate the path of the ball bouncing off at least three walls of the rectangular frame demonstrating rebounding according to the angles of reflection. Educators were encouraged to repeat the process until they had between 24 - 30 individual frames which happens to be the number of frames that movie camera and television display in a single second!

Next participants moved to GIF Animator LE freeware (which on our Divisional hard drive image is found under the "Viewers & Converters" sub-menu). Using the "Layer-> Add Images" menu items, and navigating to the series of bitmap (BMP) images created in MS Paint, users soon learned to either click the first "ball01.bmp" image and "shift-click" the last ball entry to "Open" or load all the images at once. Others found that the shortcut "Ctrl-A" selected all the images rather than having to repeatedly "Open" each bitmap image one at a time. Next educators played with the delay feature to make the animation more realistic and learned how to save the compilation as an animated-GIF image.

It was then suggested that to indicate that an animated-GIF was finished, one should "fade to black". Participants returned to MS Paint and created an empty 640 x 480 pixel frame which they filled with the black colour and saved as "black.bmp". At the same time "red.bmp", "blue.bmp" and "yellow.bmp" were created. Once participants learned how to import a black.bmp into the existing animation, move it to the end of the series of slides and increase it's delay (so that it effectively indicated the end of the animation), the workshop participants took ownership for their own learning by investigating the following questions:

   What could students do to create a title
       for their bouncing animation?

   Is there any way one could "animate" the title?

Click the image at right to see how Nadine Horsman, a Grade 6 - 8 educator at David Livingstone School, met the challenge.

How to display an animated-GIF?
Several years ago, educators who wished to showcase animated-GIFs (outside the preview option within GIF Animator LE), would paste the animated GIF into an HTML page and view it in a browser. However fewer educators today are familiar with HTML tags so an alternative way of demonstrating the animation needs to be found.

Believe it or not I now use Word to showcase animated-GIFs. This technique is so simple that students can use it without needing to learn anything about web page design. The steps are as follows:

   1.   Create an animated-GIF and save it to your hard drive.
   2.   Copy the animated-GIF file from your hard drive.
   3.   Start up Microsoft Word.
   4.   Paste the animated-GIF near the top of the blank Word "Document1".
   5.   The first image of the animated-GIF will be displayed.
   6.   To see the full animated effect, click on the "File -> Web Page Preview" menu items.

If you want to share this animated-GIF with others, I create a table of two rows in the blank "Document1" Word file. Next I paste the animated-GIF into the top row of the table and then I enter the following instructions "To view this animated-GIF, click the “File -> Web Page Preview” menu items." in the bottom row of the table. The last step is to save this Word document with a descriptive filename. Now one can share creativity by e-mail by sending off the animated-GIF embedded in a Word file with instructions for the recipient. Readers can see how Anne Le from River Elm embedded her animated-GIF in a Word file by clicking and opening this link.

Animation Perspective Activity #2
For this second activity, educators were instructed to open the "alley.bmp" image shown on the right into MS Paint. They were challenged to create an animated-GIF which gives a 3-D illusion of a ball rolling towards the pins in a bowling alley. However, rather than save the series of frames as bitmaps, educators were instructed to save all MS Paint manipulated images in this activity in the more compressed JPG format in a folder called "bowling". So the starting image was saved as "alley01.jpg". Next the MS Paint Select tool was used to capture the bowling ball. Clicking on the Image -> Stretch/Skew menu items allowed the participants to reduce the Horizontal and Vertical Stretch factors by an appropriate percentage. Once the ball was reduced slightly in size, it was positioned further up the alley or closer to the pins. This new image was saved, in the JPG format, as "alley02.jpg". The process was repeated until the ball reached the pins.

Next participants started GIF Animator LE and clicked on the "Layer -> Add Images" menu items and navigated to the folder where all the "alley" JPG images were saved. Imagine the horror, when users were unable to find these JPG files!

   Where are my "alley" JPG files?

   Why is the "bowling" folder empty?

Questions such as these prompt a very important "teachable moment". GIF Animator LE is freeware and although it states in the "Add Images" window that the "Files of type:" are "All Formats", it is only designed to automatically display bitmap or BMP files.

"Star-Dot-Star" to the Rescue
As more and more students engage in claymation activities using GIF Animator LE, they will face the above "disappearing files" phenomenon when they try to "Add Images" of the digital camera's standard JPG files. Let me make it clear ... the files are not lost! GIF Animator LE does not automatically display any files other than BMPs so the JPGs seem to disappear. To help display images such as JPGs, one must follow the steps below when using GIF Animator LE:

   1.  In GIF Animator LE, prepare to load images by clicking on the "Layer -> Add Images".
   2.   In the "Add Images" window, navigate to the folder containing the JPGs.
   3.   Don't be alarmed that no images (other than BMPs) appear.
   4.   In the "File name:" field type the three characters *.* followed by the <Enter> key.
   5.   This "star-dot-star" is an old DOS "wild card" command. The first star (or asterisk) tells the
         computer to display all file names. The last asterisk says display all file name extensions
         including JPG, BMP, GIF, DOC. etc. The "dot" or period is just the separator
         between the filename and it's three character extension code.
   6.   If you follow these steps, all image type files will magically appear and you can proceed
         to "Add Images" into the GIF Animator LE freeware.

Once this "work around" was shared with the educators in the workshop, they then proceeded to import the JPG "alley" images into GIF Animator LE. In fact, some teachers suggested that students who finish this "bowling" activity quicker than their classmates may want to be challenged to take more responsibility and might respond favourably to a teacher who asks:

   I wonder if you can display pins that may be knocked down by the ball?

   If this was a 10-pin ball, could you add the three finger holes to each ball?

   If the 10-pin ball was rolling, would the three finger holes always be in the same position?

On-line readers are encouraged to click the previous bowling alley graphic to examine how Anne Le, the librarian at River Elm School, demonstrated her creativity by extending this animation activity.

"Curriculum Navigator" can identify where animation might support learning
During the animation workshop, we discussed various topics that students might choose to illustrate through animations including the food chain, the water cycle, plant growth, cell division, and simple machines. However as I was writing this article I thought that there may be a way that technology could quickly identify a variety of curricula areas where animation techniques could prove beneficial.

I pointed my browser to the Manitoba Education, Citizenship and Youth's "Curriculum Navigator" website at: http://www3.edu.gov.mb.ca/cn/index.jsp Any Manitoba teacher can create an account and gain access to customizable lesson plans, supporting resources and curriculum-matched websites. This very complex database has a wealth of student exemplars, black line masters together with integrated instructional and assessment strategies.

I logged in and on the welcome screen, I clicked on the "Create Learning Experiences" link. On the next screen, under the "Essential Criteria" heading, I clicked on the underlined last word in the phrase "To search strategies by phrase, click here". On the "Strategy Search" page, I entered in the "Phrase to search for:" field, the word "animation" (without quotes). Next I checked off all six subjects including English Language Arts, Mathematics, Physical Education / Health, Social Studies, Science and Aboriginal languages. To ensure that I missed no opportunity to find where "animation" might apply, I checked all grade levels from Kindergarten to Senior 4. After pressing the "Search" button and waiting for the system to search all of its database records, I was presently surprised when I received seven pages containing 114 strategies, like the examples below that contained the word "animation" and linked to specific lessons in various subjects including every grade level from 2 through 8:

Science - Grade 2 - States of Solids and liquids
Using animation software or animation features of multimedia presentation software, students animate the transformation of water from solid to liquid or liquid to solid with the addition or removal of heat energy.

Science - Grade 3 - Electrostatic Charges and Static Electricity
Using animation software or animation features of multimedia presentation software, students create an animation illustrating how electrostatically-charged materials may be attracted or repelled.

ELA - Grade 4 - Fantasy
Students create a multimedia presentation about a fantasy story or novel. Students include features such as digital pictures, text, hyperlinks, pop-up windows, animation, and sound to enhance their creations.

Mathematics - Grade 5 - Decimals: Meaning and Comparison
Using graphics software or animation software, students show 0.6 and 0.63 of a set, and write them as fractions.

ELA - Grade 6 - Cartooning
Using graphics animation software, students develop an animation of their favourite comic character and share with class.

Science - Grade 7 - Centre of Gravity, Internal and External Forces on Structures
Using animation software or animation features of presentation software, students animate the affect of internal or external forces acting upon a structure or the affect on a structures stability of changes in the location of it's centre of gravity.

Science - Grade 8 - Characteristics and Properties of Fresh and Salt Water
Using animation software or animation features of presentation software students animate the journey of a cargo ship as it travels from Thunder Bay, Ontario, loaded with prairie grain destined for European markets. It will travel through the Great Lakes and down the St. Lawrence River and then enter the Atlantic Ocean. Students animate where the waterline on the ship would be (how high or low the ship floats in the water) as it travels through each of the bodies of water. Students explain why these differences occur.

Creative Claymations
After exploring a variety of storyboarding templates, the teachers were eager to start creating creatures out of plasticine. We used old linoleum floor tiles to help protect the desks as the teachers cut and shaped their plasticine creatures and supporting objects. It was recommended that the feet of claymation figures should be made large in order to support the creature between digital shots. One web site that I visited recommended that if your claymation creature is going to have its extremities move a great deal, it is best to create a wire frame armature to support the plasticine. My sketch suggests that the black 20 gauge wire (.81 mm or .032" in diameter) can be twisted to form a skeleton. On this framework, or armature, one can apply the "red" clay as illustrated. If the creature waves frequently, the wire frame in the arms and hands helps to keep the plasticine intact as you manipulate the creature prior to each camera shot.

Before the first digital picture was taken it is very important to have all camera batteries fully charged and to reduce the digital camera's resolution or picture size to the smaller 640 x 480 pixels. Although a 3 megapixel camera can take pictures as large as 2048 x 1536 pixels, it is strongly recommended that one reduce the image size so that many more of the smaller claymation pictures can be stored within your digital camera memory and the resulting animations do not really need to exceed the 640 x 480 size. Failure to adjust the camera settings at this time will force photographers to utilize the "batch conversion" process in the IrfanView freeware application to resize all of the larger claymation images to the recommended smaller 640 x 480 pixel size.

It is very important, particularly if you are going to use "Photo Story 3" as your animation application, to make certain that all pictures are taken in "landscape mode" where the width (640 pixels) is greater than the height (480 pixels). This important step will ensure that the user does not have to "Remove any black borders" after importing the images into "Photo Story 3". 

Workshop participants found the use of tripods extremely beneficial. Each cameras was mounted on a tripod in the recommended "landscape mode" and once the creatures were positioned in front of the diorama or backdrop, the photographer zoomed in so as to frame all the important areas. This zoom setting was maintained throughout all shots and all adjustments on the tripod were locked. One might want to take a test shot to see if room lighting is adequate otherwise one may need to use the flash. If you choose to use the flash, do so for all pictures. All that was left was for the photographer to take a picture, make a small adjustment to the creature(s) and/or setting and repeat, until all aspects of the storyboard were captured.  

When all claymation pictures were taken, they were transferred from the camera to a "claymation" folder on the computer using a USB cable. At this point some educators chose to import all the JPG claymation photos into GIF Animator LE to create a 640 x 480 animated-GIF. Others who wanted to explore how background music could be added to animation, chose to explore "Photo Story 3" which is freeware for computers running the Windows XP operating system. 

How to use "Photo Story 3" as an animation tool
Workshop participants in the morning learned how to import pictures from MS Paint into GIF Animator LE, adjust the timing, add titles and end slides, save the compilation as an animated-GIF and showcase the result. Those wishing to explore another animation creation application were shown how to import claymation pictures into "Photo Story 3", adjust the timing, add titles, save the modifiable project (in a ".wp3" format), add background music and preview the animation prior to saving the result in its compiled (".wmv") format.

"Photo Story 3" is a powerful storytelling application that has an automatic panning and zooming feature, known as the "Ken Burns Effect". Also in order that the viewer can appreciate the still pictures in the presentation, each image is displayed for a default setting of 5 seconds. Although GIF Animator LE can reduce the duration of each picture to as little as 1/100 of a second, "Photo Story 3" cannot reduce the display of each image less than 1 second. In addition "Photo Story 3" has the software automatically pan and zoom and these features need to be removed to showcase animations. Educators who have used "Photo Story 3" as an animation compilation tool, follow these steps:

   1.   Import all claymation images into the timeline.
   2.   Enter any titles over top of images as desired.
   3.   Rather than "Narrate your picture and customize motion", one can right click on each image
         in the timeline. Click the "Customize Motion -> Motion" menus.
         On the "Motion and Duration" tab, place a checkmark in the "Specify start and end position
         of motion". Make certain to drag the left hand image borders outwards to capture the
         entire frame. You are successful when the left hand image dimensions state 640 x 480 pixels.
   4.   Next click to place a checkmark beside "Set end position to be the same as start position".
         This process eliminates the Ken Burns zooming and panning effects on this picture.
   5.   In the "Duration" section, click on the radio button to the left of "Number of seconds
         to display the picture" and reduce the default 5 seconds to 1 second since an image
         in "Photo Story 3" cannot be displayed for less than 1 second.
   6.   Once the first slide has had the motion eliminated and the time reduced, one will be prompted
         to save the changes. One can then quickly advance through the slides by clicking
         the ">" button to advance to the next slide on the right and save as instructed.
   7.   Click the "Save project" button to save this modifiable working file in a ".wp3" format.
   8.   One can click the "Preview" button to see if the duration for certain slides needs changing.
   9.   Click the "Next" button to move to the "Add background music screen".
   10. Click the slide in the timeline where you want the background music to start.
   11. Click the "Create Music" and then select the Style, Band, Mood, Tempo, and Intensity.
   12. Click the "Play" button to hear your background music selection & "OK".
   13. Click the "Preview" button to showcase your animation with accompanying music.
   14. Click the "Save Project" button to save latest animation updates.
   15. Click the "Next" button to move to the "Save your story screen" and when you click "Next"
         again your modifiable animation "project" (in .wp3 format) will be compiled into
         a compressed un-editable Windows Media Video (in .wmv format) which can be showcased
         in Windows Media player 10.

Educators wishing more detailed information on using the various options within "Photo Story 3" may wish to download a Word document that I created entitled "Digital Storytelling Using Photo Story 3" from: http://www.wsd1.org/digitalstorytelling/resources/supplementary/photostory-handout.doc

How can one add a callout (speech or thought bubble) to a photo?
Animation creativity can be enhanced in some cases by the addition of a speech or thought bubble.

   1.   A simple way to add a callout to any picture is to start PowerPoint.
   2.   Click on the View->Toolbars->Drawing menu items
         to turn on the Drawing toolbar.
   3.   In PowerPoint, click the "Insert->Picture-> From
         File" menu items.
   4.   Navigate to the image to which you want to add
         a callout and insert it into the PowerPoint slide.
   5.   Drag the corners of the picture outwards so as to fill
         the PowerPoint boundary frame.
   6.   With the Drawing toolbar turned on, click on
          the AutoShapes->Callouts menu items.
   7.   Decide on a speech or thought bubble callout.
   8.   Position your cursor on the picture and drag open
         the callout.
   9.   Resize callout and enter appropriate text in a large,
         bold, font for easy reading
   10. Click on the callout to make it active and drag the
         bottom yellow node to an appropriate position near
         the creature's mouth (for a speech bubble) or brain
         (for a thought bubble).
   11. Once satisfied, click File->Save As menu options.
   12. Navigate to an appropriate folder but DO NOT save
         as a PowerPoint "presentation".
   13. Click the "down arrow" to the right of
         "Save as type:" field and scroll down.
   14. Select "JPEG File Interchange Format (*.jpg)".
   15. Name the file appropriately (e.g. callout.jpg)
         and click "Save" button.
   16. When prompted "Do you want to export every slide ...", click on "Current Slide Only".
   17. Open GIF Animator LE or "Photo Story 3" and import the created "callout image".
   18. Position this new "callout image" appropriately in the animation or timeline sequence.
   19. Increase the time duration for this "callout image" so that audience gets adequate time
         to read the contents of the callout.
   20. Save your animation compilation and share your creativity.

Samples of Claymation Creativity
In order to better appreciate the creativity of our workshop participants, I thought that our on-line readers would enjoy clicking on selected animations that were created during our "Celebrating the Art of Animation" workshop.

The Encyclopaedia of Informal Education states that "Animation means, literally, to breathe life into some thing."

To all those creative educators who attended our "Celebrating the Art of Animation", thank you for "breathing life" into our learning experience and making the day extremely memorable.

Return to the "Bits and Bytes" Web Page
Return to the Winnipeg School Division Web Page