How to make animations

Lots of people have ask me how I make the little images (animations) that I put in my comments and articles. I thought I would make an article to explain how I do it, though up front I have say I use an iMac and this might not be as easy to do with a PC --- I don't know.

First you have to know what animation is; it is a series of images that when combined create the perception of motion. I am going to make a swinging clock animation to explain this. The first image starts with clock all the way to the left, the second is just a bit to the right ---> on to the right. If you look at the first two images you see that the clock in two position,  but when combined your mind sees them move.

Think of each one of these images as a 'frame' in a movie.

So when you see in the image there is five images,  to make the clock move left you need images 1, 2, 3, 4, 5 and then you go back with 4, 3, 2 (reverse order). The complete loops is: 1, 2, 3, 4, 5, 4, 3, 2. (The easiest animations are simple loops where the end is also the beginning, which is the case with this watch.)

Really you only have five original images, but with the copies you have a total of eight. Now you have to combine those into the animation.

I create the original images with a program called Sketch+. I copy and paste each of the five images into another program called Pixen. I do this so I have a set of 'frames' of the five images. Pixen lets me export those images into a folder. I should point out that  there are other ways to save those five images, but this is  the one I use.

Then, with GiFfun I import the five images from the folder with my clock images. Inside GiFfun I can make the needed copies of images 2, 3, 4. GiFfun is the program that allows me to combine the eight images into one animation. The program has functions that lets you make the frames each have different times. You can also create it as an endless loop or have it loop a certain number of times. The animation I have in this article has two different speeds to give an example of this. The first one is slower and when it gets to the right, it stops for a beat.


Okay, now you have a gif file all ready to post...well sort of. Since gather doesn't accept gifs you have to find someplace on the internet to let your animations be. (how buddhist right). That is someplace to store it. I use photobucket, but there are other services.

Now that you have animations, you can paste them into your comments and articles. To learn about that ----> article on importing images and links