Introduction

To this point in the course we’ve been discussing web graphics. Now we turn to the topic of multimedia. We’ll begin our study of multimedia with a discussion of animation–making objects move and change on screen. There are several ways to accomplish animation on the web, and for this class we will explore a couple of ways to make them.

Let me set some historical groundwork to set the stage of early animation. The modern zoetrope was invented around 1833 but wasn’t very popular until the 1860s. It was (and still is) a form of entertainment, exploiting our persistence of vision, the blending together of still images in rapid succession to give the illusion of movement. Strips of painted paper were placed inside a drum with narrow windows cut into the side. The viewer spins the drum and looks inside at the painted frames to see the illusion of movement. The word   comes from the Greek, “zoe’ meaning life, and “troops’ meaning turn — in essence it is a wheel of life.

Fast forward to 1872 where we encounter Eadweard Muybridge, a British photographer and one of the first people to study motion capture. He pioneered photographic studies in motion and motion picture projection. In 1872 he was hired by the then governor of California,  Leland Stanford, to settle a bet he had made with a friend. Both were fans of horse racing, and the governor even had his own horses. He and his friend could not agree whether or not a horse’s feet were ever off the ground entirely for a moment while the horse was galloping. Stanford thought there was indeed a moment that the horse is essentially airborne. Mouybridge devised a way to photograph a galloping racehorse to settle the bet for the Governor. 1878 he began more in-depth studies of both animal and human locomotion.

GIF Culture and Animation

Jump ahead almost one hundred years to 1987 where we encounter Steve Wilhite. He was employed by Compuserve where he created the released the GIF (Graphics Interchange Format) image format, which was the first color image format. GIFs can display 256 unique colors and have the ability to support multiple image frames within the same file. It should be noted that he is very clear that the work “GIF’ is to be pronounced “JIF’, like the peanut butter. Personally, I choose to ignore this.

The 1990s were filled with animations of dancing babies, bananas, and cliche under construction signs. Around this time we also started noticing the disembodies heads of chuckling smiley faces silently invading our inboxes, tucked within the signatures of emails. The early GIFs were silly, and even a little trashy and by the end of the decade they had firmly embedded themselves as part of popular culture. This was made official in 2000 by the Simpsons episode “The Computer Wore Menace Shoes,’ where Homer creates his first web page decorated entirely with animated GIFs. At their height, the old school GIFs had become cliche and annoying.

Over the years the Web 1.0 GIF seemed to fall out of vogue, that is until recently. PBS has produced a short documentary (in the true spirit of the GIF) as part of their  Off Book  series. It recounts some of the historical baggage of the GIF and how people are using the format today. They note that as the curtain of Web 1.0 was drawing to a close , animated GIFs were just as rapidly becoming passé. But something happened. The social platforms of Web 2.0 began making the acts of creating, sharing, and discussing easier than it had ever been before on the Web. Sites like Reddit and Tumblr began greasing the wheels for the return of the GIF, only this time they were smarter and more diverse than they had ever been.

TODAY

Follow the timeline up to today and you will find that the animated GIF is enjoying a refined renaissance as remixers, artists, journalists and even learners push the GIF format far beyond its conventional boundaries.  Not only are there more places to put these moving pictures, there are a plethora of methods and tools to create them.

GIFs have made so much of a comeback that in 2012 the word “GIF’ was made an official word. The US wing of Oxford University Press voted it their word of the year, noting that it had become, “a tool with serious applications including research and journalism.’ This re-invigoration of the medium has yielded amazing examples its application.

REMIXERS

It isn’t hard to see why  GIFs are so popular. The format has a low barrier for participation. Making them is fairly easy and there are many free tools available to do so. I find it fascinating how quickly and effectively they can embody the language of pop culture and engage viewers. Because of this we see a large number of people remixing each others work from all over the Web. Do you remember Muybridge’s animal locomotion studies? In 2006 someone transformed them into animated GIFs — but that wasn’t the end. Someone else remixed that idea:

at-at locomotion study

There are plenty of other remix examples I can post here, but instead, I will list my favorites below and give you the opportunity to visit the creators’ websites to enjoy their entire body of works.

  • Kevin Weir’s historical mashups remix the culture of the internet with some very early photography:  https://fluxmachine.tumblr.com/
  • ScorpoinDagger remixes old paintings, many from the early Renaissance, with pop culture to create quite witty animated collages: https://scorpiondagger.tumblr.com
  • The GIF Connoisseur remixes the work of other GIF remixers by placing the gentleman from Norman Rockwell’s painting “The Connoisseur’ in front of the works.

ARTISTS

Transitions, eternal looping, and subtle animated details emerge as a new tools for artists. They are capturing moments in time and selecting particular aspects of those moments to continue forever in the loop, while the rest of the image is frozen eternally. This makes for some visually compelling work.

An animated gif of a slow motion fire in a barrel stove.
Looking for west – Gif by Lockie at Totesyourmate

JOURNALISTS

It turns out that GIFs are perfect for quickly illustrating sequential processes and summing up concepts in a visually succinct way. Since all browsers display GIFs natively no additional media plugins are required to view them making them very low overhead not only for viewing but also for understanding.

  • The NPR Planet Money article, “How a Used Bottle Becomes a New Bottle, in 6 Gifs,’ relies heavily on moving images to provide additional context for the details of an article on the process of recycling.
  • This example isn’t formal journalism as much as it is marketing, but I’m mentioning it because it was so effective in catching my eye. As I scanned over the details of the Kickstarter Polar Pen project I wasn’t willing to commit time to watching their pitch video because it was too long at the time. As I continued scrolling down the page I noticed their Magnetic Pen Demo, a GIF that features three additional uses for this pen all in the same looping image. Instantly I understood the versatility and multiple applications for this pen. In fact, I got so excited that I went back and watched their video.

INSTRUCTION

GIFs are well suited for illustrating sequential processes. Many explanations we may want to share with others do not require all the time involved in shooting a video or creating a screencast. Sometimes these explanations can be most effectively conveyed in just a handful of frames, free of audio narration, excessive bandwidth usage, and extraneous media players.

  • 15 GIFs that show how things are made. No additional explanation is required to understand these processes (more or less).
  • As proof that animated GIFs are not difficult to create, I submit to you the student work in ds106. These students create their own work with the aid of a handful of tutorials available on the site, and minimal intervention of the instructors. In the process they learn to manipulate images and video with either paid or free software. They also must consider the message they want to convey and distill it down to a few seconds before optimizing the final product for the web. It is a comprehensive activity that touches on multiple digital literacy skills.

Instruction is one of the areas I want to see animated GIFs used more. As I mentioned before, not every visual explanation requires the overhead of streaming video. In fact, in cases where embedding streaming video is often flaky, such as our WordPress Multi-user installation which supports a number of our courses, GIFs may help alleviate some such problems. I realize it certainly isn’t a cure-all solution, but one that is worth considering in some cases.

GIFs are a form of media that is able to inhabit an ambiguous space that is neither photo nor video,   yet has characteristics of both. It is a sort of short-form visual communication of sorts that allows a moment to exist just barely beyond the snap of a camera shutter in the case of a photograph in the case of some. Other GIFs are frank, illustrative moments that loop to indefinitely convey the essence of an idea. Their versatility has kept the format relevant for over twenty years on the Web, and few other technologies can claim that distinction. I look forward to seeing how people to continue to evolve their use of GIFs

Objectives

In this lesson you will:

  • familiarize yourself with the vocabulary of animation
  • experiment with timelines and tweens
  • explore the Adobe Edge Animate (Flash) interface
  • practice using the drawing tools in Adobe Edge Animate
  • compare various types of web animation

Reading

We will spend the next two weeks on the topic of animation, and spend time making animation using a couple of different tools – Adobe Edge Animate and Photoshop. Of course, there is other software and other apps for composing animation, but these are the two I recommend for this class. If you find these interesting, you may wish to continue your study beyond this course. Achieving proficiency with animation will take significantly longer than two weeks!

Reading Assignment

Lecture

ADOBE EDGE ANIMATE (FORMERLY FLASH)

Flash uses the metaphor of a motion picture: flash projects are called movies and objects to be included in the movie are placed on a stage. Flash uses a timeline to enable movement over time; the timeline is divided into small segments called frames. You can read more at the Adobe Animate online help site. You may find these pages particularly helpful toward understanding how to use the timeline to create animation:

DRAWING TOOLS

Flash includes basic drawing tools common to all graphics software, but it has a couple of “oddities” in the way it handles drawn objects. Most notably, flash considers stroke and fill as separate objects. To see this for yourself, draw a rectangle with both a stroke and a fill. Using the selection tool (black arrow), click on the center of the rectangle and drag to move it. You’ll find that the fill moves with your cursor, but the stroke remains in its original position.

Flash makes a distinction between regular drawing tools and primitive drawing tools. Primitive rectangles and primitive ovals remain editable: after drawing with these tools you can still access the options in the properties panel to change the object you’ve drawn. Regular rectangles and ovals do not allow you to change properties after drawing the object, but they do allow you to reshape the object using the selection tool.

You’ll find more helpful information on these pages:

CREATING TWEENS

The word “tween” is shorthand for “in between.” It’s the name flash gives for smooth transitions of shape, position, size, and color. If you draw an object in one keyframe and alter it in a later keyframe, a flash tween will interpolate a smooth transition from the first state to the second state of the object. There are two kinds of tweens: shape tweens and motion tweens. Explore the links below for details:

TUTORIALS

CINEMAGRAPHS

Cinemagraphs are all about controlling an aspect of time in a video to draw attention to a particular detail. They begin as recorded video, usually of a scene with repetitive motion. Next, just a small area of the video is selected to play over time, thus drawing attention to that particular movement. It can be a very deliberate and impactful form of expression when done well.

You may see these hybrid morsels of media featured in artists’ portfolios or as vehicles for marketing on platforms such as Instagram, where short-form video is commonly shared and viewed.

TUTORIALS

Supplemental Material

TOOLS & TUTORIALS

If you are interested in creating your own animated GIFs beyond what we will cover in this class, I’ve linked some of the better tutorials I’ve come across.

Looking Forward

Please review and become familiar with the concepts of animation over this next week. This week is all about research. No homework is due this week, but the more research you do this week, the easier next week’s assignment will be.

If you want to explore Edge animate further, practice the concepts and techniques used in the in-class activity so that you feel comfortable drawing with Adobe Edge Animate, using the library, and creating both motion and shape tweens.

OR

If you want to explore cinemagraphs further, spend time looking at examples and think about how you might capture your own video to create a cinemagraph. Many tutorials describe using Photoshop and those are the sorts of tutorials I will be pointing you to next week.