Movies – the old-school series of images on celluloid –  create a moving image by projecting 24 frames per second on the screen. That number – 24 frames – is a great threshold for our eyes to cooperate with the images, creating the perception of smooth movement.

The standard of quality for hand-drawn animation was, back in the day, set by Disney. That company’s practice was to create discrete images for each of the 24 frames per second. At the same time, they figured out that they could ‘get away with’ shooting ‘in 2’s’ – i.e. working with 12 discrete images per 24-frame set, shooting 24 photos by shooting single images twice. When scenes involved more movement, or detail, they drew 24 frames.

1.

You see digital video codec in the file name at the end of the file – .m4p, .mov, .mp4, .3gp, .mkv, .avi. Codec is a set of rules for “compression and decompression” of audio and video information. Digital video doesn’t display like we think of it displaying, as a series of images.

Gifs *are* a series of images, a bundle that plays back if they are being opened and read by a browser. The rules for how the images are played back are set when you save the animated gif. So. How to get a video clip to be a series of images, when working on a computer?

One tool you can use for this is Mpeg streamclip : http://www.squared5.com/svideo/mpeg-streamclip-mac.html. It’s free, works on Mac or PC, and is a useful video converter [ though this link takes you to the mac download ]. It can do many many things . . . Use the step-by-step directions provided in the downloadable tutorial .pdf to convert your source video to a set of frames.

2.

Working with a sequence of frames in Gimp

Using mpeg stream clip I’ve created a sequence of 100 frames of a black and white animation from a public domain film about bananas. You’ll find a download link at the bottom of this post. This set of frames plays, if played back at 15 frames per second, would equal the smoothness of the original film. My challenge to you is to use that set of files, playing with deleting and doubling frames, and the settings you use to save the .gif, to learn more about how you can speed up, slow down, or play with single frames and have those edits alter the whole. 

This series of tutorials provides great starting points for using Gimp to make gifs. They include the “open as layers” command that you use to open a director of layers as a single image.

Another tutorial includes some screenshots of the menus to use in Gimp.

No matter what you have going on in the stack of layers in that image file, you need to eventually export them as a .gif.

Go to “file” and choose “export”. When the dialogue box opens, give your file a new name and then select the “file type” – chose GIF, then click “save”.

Another dialogue box will open – this one likes to hide underneath other things, look for it!  In that box you can chose between two options – “flatten image” and “save as animation”. Choose “save as animation”.

The other parameters here – shorten the amount of time between frames to make the animation move faster, increase that number to make the animation play more slowly – allow you to fine tune your gif-playback.

Check if your gif animates! Open your file with any browser [ Firefox, Chrome, Safari ].

Enjoy your experimenting! Take notes! & HAVE FUN!

Download the Tutorial as a PDF 

Download .zip file of 100 frames to play with

~ Jessica

css.php