Creating animated GIFs can be an engaging educational exercise. Students can be challenged to use a computer to draw a series of related, progressive images that, when blended together, create animation.
Twenty-five years ago the Graphics Interchange Format (GIF) was created to display images using less than 256 colours. Long before applications such as Flash, iMovie, Photo Story 3, Voki, YouTube or Xtranormal were developed, the only way moving images could be displayed on a web page was through the creation of an animated GIF.
[An animated GIF welcoming readers to the New Year]
I admit that I thought I was fairly familiar with the way in which animated GIFs were created. In fact, in October 2000, I wrote a rather detailed article about the process entitled “Get Animated … with Ulead’s GIF Animator Lite Edition”. Students were eager to use Microsoft Paint to create a series of progressive images that were assembled into an animated GIF.
I still remember a major time-saving tip that Don Bellamy, a talented graphic artist, shared with me. The gist of his recommendation was:
To save time when creating animated GIFs, always start with the finished slide/image and work backwards. You can erase components while creating new slides in reverse, faster than you can draw new slide additions working in the forward manner.
The animated growing flower GIF, at right, is composed of five different slides or images. Without Don’s influence, I would have begun the animation process by creating the first slide/image of the pot. Next I would have added the sprouting plant component and saved it as the second slide or image. Successive slides would have included leaves growing off the stem in both directions culminating with the flower bloom as the fifth and last image. However, I found it to be much easier and faster to start with the finished image of the blossoming flower which was saved as slide 5. Then I worked backwards erasing, in turn, the flower (slide 4); left leaf (slide 3); right leaf (slide 2); sprout (slide 1) leaving only the flower pot. When these slides were reassembled (in the forward, numerical progression) using the “GIF Animator” Windows freeware, the result was the animated rose that you see displayed.
Likewise the final slide, in the above New Year’s welcoming animated message, was created with the complete message. The “working backward” procedure used was to:
- Complete the final message – saved as “ani-NewYears-40.jpg” (with its arbitrarily high-numbered file name)
- Erase final exclamation mark – save resulting image as “ani-NewYears-39.jpg”
- Erase “adventure” – save resulting image as “ani-NewYears-38.jpg”
- Continue the process, erasing one word at a time, while saving the resulting image with its next lower file number
- Erase the large red “0”, as the second last image, and save the image as “ani-NewYears-20.jpg”
- Erase the large red “2” and save the resulting blank yellow rectangle (with the lowest slide/image number as “ani-NewYears-19.jpg”
The resulting 20 “ani-NewYears-##” images were imported into the GIF Animator software, and like all animated GIF creation software, were imported in ascending order of numerical slide/images from lowest file number (with the least detailed display) to the highest file number which displays the final, complete illustration. One can modify the exposure time of each slide/image in the animation software and when the final GIF is assembled, it can be opened in any browser to view the animation effect. This was the animated GIF process of which I was familiar.
Animation in the 21st Century
Now, we fast forward about 12 years where I am re-introduced to animated GIFs in an on-line Digital Storytelling “DS106” course. Right away, I realized that my knowledge of how to create animated GIFs had not kept up-to-date. As instructors, Jim Groom and Alan Levine, challenged us by not only creating animated GIFs from images but also by creating animated images from movies, television, and home videos. Not to be outdone, other DS106 instructors and students went wild demonstrating their “animated” creativity. In fact, as I explored the animated GIFs from DS106 this past Summer and Fall terms, I began to feel the excitement to signup for another DS106 session which officially starts January 14, 2013. In order that you can experience the creativity and positive learning environment fostered through DS106, I encourage you to explore the links, blog posts, and comments shared by the following amazing individuals:
- Spreadsheet Invasion: Animating Pong – Jim Groom
- Photo it Like the Peanut Butter – Alan Levine
- Animated Comic Book Cover – I’m Free At Last – Jim Groom
- It’s a great day for sporting GIFs – Hockey – Rowan Peter
- Salivating Over Animated GIFs – Michael Branson Smith
- Return of the Animated GIF Day! – Ben Rimes
- DS106 GIFFEST – Alan Levine
- Multi Frame GIF Story: Beaker’s Hair – Andrew Forgrave
- Merry GIFmas to All! – Ben Rimes
- Keep Clicking Those Ruby GIF Slippers – Alan Levine
However, the best part about the creativity demonstrated by these “GIF masters” is that, as part of the DS106 learning community, they shared the processes they went through to accomplish their animation. I think that as educators we need to ask our students to reflect and share the processes/hangups that they encounter when learning. It can definitely be a window into their comprehension and, better yet, provide us with important feedback into out teaching.
Take care & keep smiling 🙂