Quick and dirty animation

I was asked how I did the animation of building the desks on my personal blog.

The camera was set up on a tripod in the corner of the room. It wasn’t set to automatically take pictures; instead I set it to its 10-second timer and periodically took pictures, generally when I was about to do something. So in a sense the pictures are all posed, and apart from the varying light outside you can’t tell that it took quite a few hours to put the first desk together, followed by a gap of a couple of days before the second one was done.

Unfortunately the camera got moved a bit while doing the second desk. I also forgot until later to take a picture of the completed desks, and by that point the tripod had been put away, so that last shot is handheld, and askew from the others. It was late, and I couldn’t be arsed lining it up exactly. Close enough.

I ended up not using some of the pictures, discarding many of those that had nobody in them, because I thought it would look better to see people moving around in each shot, rather than flashing in and out of view.

To do the animation, I considered what formats would work best for appearing on the blog page (rather than in a separate player or as a download). This ruled out using MovieMaker (which for online-use produces WMV only, so wouldn’t be playable on anything other than Windows). Animated GIF might have been quite economical bandwidth-wise, since much of each frame didn’t change, but I don’t have any good tools for that. Besides, GIF for photos sucks. MPEG compression would work a treat for something like this, but I didn’t have the time nor energy to properly explore that.

I ended up with Flash, using an old copy of Swish that came as a magazine freebie. (I have an old copy of Flash sitting around somewhere, but I never took the time to properly learn it). I’d previously used Swish for the toxiccustard.com 404 page and “Wanky Flash intro”, and while it isn’t as flexible as fully-fledged Flash, it’s not bad for simple stuff, and very easy to learn.

Swish was formerly installed on one of my old computers, and though the version I used (1.5.2) is discontinued, to my surprise I was able to re-download it from the Swish website and resurrect my old freebie licence via their web site. Full points to Swish for that.

All the frames were resampled in Photopaint to 400×300, and saved with some heavy JPEG compression to keep the filesize down to 15kb or so per frame. Plenty of artefacts, but who cares when each would be displayed for less than a second. I did use less compression on the first and last frames, which are displayed for longer. Again, properly using the newest Flash movie-playback features would probably have made possible much better compression, but no time Bellamy, no time!

Loaded a few of the pictures into Swish, and set them up to appear/hide every 4 frames (at 12 frames a second, so three pictures per second). I tried a few different options to get a speed I was happy with; fast enough that the whole thing isn’t too long and is interesting (I hope), and provides comic effect. But also slow enough that you can see some of the detail, such as hiding behind the polystyrene, and holding the beer bottle. The kids having a light-sabre fight with polystyrene didn’t quite work, as one of them was out of shot.

I noticed later that Swish lets you set the number of frames per second, making it dead easy to change the overall speed. Which would have avoided some fiddling. Oh well.

The final SWF Flash file came out at 450Kb or so, which shouldn’t be too slow to start up, even on dialup connections. Not that the speed of playback is critical anyway in this case.

I’m quite happy with the end effect, and people who saw it appeared to enjoy it too.

2 thoughts on “Quick and dirty animation

Comments are closed.