Get Animated in the New Year

Activity, Bits and Bytes, DS106, How To, Professional Development Add comments

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.

Background
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.

  2013 animated NEW YEAR
[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. Animated RoseNext 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:

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 :-)

Tagged with: | | |

4 Responses to “Get Animated in the New Year”

  1. Ben Says:

    Sweet, I’m considered a GIF Master! Does that entitle me to any privileges with the powers that run the internet? :)

    Thanks for the walk down memory lane; having been a presence on the WWW since the early AOL days, I remember all of the wonderful animated GIFs, but I had never thought about the creation process until recently. It certainly has changed with the advent of web video and digital media, but there’s certainly still a good place for the type of GIFs you mastered back in 2000, and I plan on making many of them for a course I’ll be facilitating in the near future. Thanks for the lead on the ULead GIF Animator.

  2. admin Says:

    Ben … Not only are you a “GIF Master” but you are also such an inspiring educational blogger. I have learned much from you and have found your posts and comments to be extremely motivating. In fact my next post is motivated in many ways by the animated GIF you created of pouring cream into your coffee on your “Return of the Animated GIF Day!” That image caused me to reflect and think about how I might work on capturing video from digital media to create an animated GIF.

    Perhaps the following links will be of use to you in your up-coming animation course.“S.O.A.R. Students’ Original Animated Resource” showcases some elementary student creativity and my April 2007 newsletter focuses on animation in the classroom. If you are working with educators who are using Windows computers, they can still download “GIF Animator Lite Edition” freeware (GALE10.exe) off my “Bits and Bytes Freebie Request Page”.

    Take care & keep smiling :-) Brian

  3. Jim Groom Says:

    I’m with Ben, the walk to memory lane here of GIFs 12 years ago is awesome. I just proposed a paper on the theory behind GIFs, and this snapshot of what was is really useful to contextual the thinking, as usual you rule. It is exciting to think you’ll be back at ds106—you are amazingly generous with your commentary and your posts are always brilliantly reflective—I look forward to the start of the semester. Alan’s UMW students just got another great resource.

  4. admin Says:

    Jim … I appreciate such kinds words coming from a “GIF master” like yourself. Thanks to you and your DS106 colleagues, I have learned so much! Our family was at a destination wedding in Mexico (without Internet and DS106 access) last Spring . In hindsight, I realize that during that time, I must have missed some key aspects of how to extract video to use in animated GIFs. However, my next post will demonstrate my first steps into this new adventure.

    Kudos to you and your DS106 colleagues on the re-vamp of the web site. it appears to be much cleaner, organized and more inviting to both potential “DS106-ers” as well as returning members. I know, first-hand, how much work and effort goes into designing efficient web pages and your team EXCELS! When it looks good and operates efficiently at aggregating all participant input, it is a true gem.

    Lastly, I want to thank you and the DS106 facilitators for exposing me to my first MOOC learning environment. Not only have I enrolled in DS106 again, I also just signed up for the Educational Technology & Media MOOC. With the learning opportunities shared in both forums, it should be a “wild ride”!

    I recently came across this post entitled “11 Spellbinding Animated GIFs To Hypnotize You”. Perhaps it will be motivating to you as well as any readers. All the best!

    Take care & keep smiling :-) Brian

Leave a Reply

 

WP Theme & Icons by N.Design Studio
Entries RSS Comments RSS Log in