Teach42

The other night I was scanning through tweets about Phish’s recent concert, and came across the tweet of a certain MusicLoverChick. The tweet was interesting, but what was even more interesting to me was the fact that the gramaphone in her profile pic MOVED. It was subtle, but every second or two, it just thumped a little. And yet, that little bit of motion BLEW ME AWAY. I have been so used to looking at Twitter images as static and motionless, that just the little bit of animation was enough to knock me off my rocker.

Of course, I simply HAD to know how it was done.

After a few searches, I found a couple of sites with decent directions. And it didn’t look that hard at all! Just take an animated GIF and upload it, right? Well, in reality it wasn’t QUITE so simple.

Here’s how I did it.
1) Get your footage. I decided to use a video and started off with a video of Aiden that I had recorded in Qik. Unfortunately, Qik’s download feature is broken right now, but there’s a hidden way to get access to those files still through the RSS feed. If you go to http://qik.com/USERNAME/latest-videos, you’ll get their RSS feed of videos WITH the download links available. Footage obtained.
2) Trim it down. I used QuickTime Pro. Popped open the video and trimmed it down to JUST the part I wanted. Or at least the part I THOUGHT I wanted at the time, but more on that later.
3) Export it as images. Using Quicktime Pro, one of your Export options is Movie to Image Sequence. Choose that and it’ll save your video clip frame by frame as jpg images. My 8 second clip resulted in a couple hundred images.
4) Crop and resize it. This part may be a bit tricky, and might be worth doing prior to step three if you have a video editor that’ll do it. Instead, I grabbed photoshop and created an action that cropped the image down to a square (centered) and then resized it down to 150×150. Then I used the Batch fucntion in Photoshop to resize the entire folder of images at once.
5) Create an Animated GIF from it. While there are dozens of programs that will create animated GIF’s, I took advantage of a free one for the mac: GifFun. All you do is drag in your folder of images, make a few tweaks and then click on Create GIF. One thing to keep in mind though is that you probably want it to have something like 3-5 microseconds between frames, and by default it is set at 20ms. Change that in the program options first, so when you bring in your images, they’ll all be at a nice 5 ms between frames. Then click on Loop Forever and Make GIF and away you go. I haven’t tried any of these yet, but here are 5 online tools for creating animated GIF’s.
6) Trim it down…. AGAIN. The resulting image will be opened in your browser. Just save the iamge to your computer for now. Once you do, check on the file size. Twitter won’t take anything over 700KB, but I found that I had better success in the final step with smaller file sizes. So try to keep it down to around 500kb or smaller. How do you do that? Two ways. In the options for the program, you can reduce the color palette or in GIFFun, click on Minimize Output. Not sure what that does, but it does shrink down the file. you can also remove unnecessary frames from the GIF. So in the eye example, I went from over 200 frames down to a paltry 89 frames. It’s a shorter animation, but the file size requires it. C’est la vie.
7) Upload it. Rinse, repeat. You’re now ready to upload it to Twitter, which unfortunately is the most complicated step in the whole process. First of all, Twitter is not supposed to support animated GIF’s. While that may be their official stance, the site DOES support it…. kinda. You’re able to upload GIF’s as an avatar pic. But animated GIF’s routinely fail. Seems like there’s some faulty code there, and the first 10 times or so that I tried to upload my animation, it failed. I tried in Firefox on the Mac and got the Fail Whale. I tried in Safari and got the same. I tried in Firefox for Windows and no dice. I tried in IE7 for Windows and nada. Then I tried in Opera for Windows……. and SUCCESS! My boy was on the screen bonking his head for all to see.

So what’s the moral of the story here? If you want to upload an animated GIF, you’re going to need to be patient, persistent and may need to try uploading it 30-40 times before it works. If it consistently fails, try tweaking it just a touch. Maybe shrinking it down a little, removing a few frames. And then keep trying to upload it. There’s no magic formula for this part. Just be persistent. When I tried to change it from Aiden bonking his head to my eye blinking, I failed about 40 times before I resized it, failed 10 more times before it finally went through.

One thing to note. Seems that Twitter isn’t happy with their inability to handle animated GIFs well. Supposedly, they won’t be accepting new ones anymore.

There is no plan to remove existing GIF images. You’ll still be able to use JPEG (image/jpeg and image/jpg) and PNG (image/png) images, but new GIF images will no longer be accepted. This code should be ready within the next week.

That was posted on the dev boards on January 29th. Seems they’re running a little bit behind schedule. Point is though, if you’re interested in having an animated avatar, I wouldn’t waste any time. Could be locked out any day now and then the only people who will have them are those that are grandfathered in.

I can’t help but think that as more and more people do this, Twitter is going to look more like the Daily Prophet from Harry Potter. I know some find it distracting, but I love seeing how people express themselves. Look forward to seeing what you come up with!