The Animationizer – a free stop-frame animation tool

Stop-frame animation is a method I’ve been using to communicate complex interactions to stakeholders and developers before work starts on a prototype (some examples are here). It’s not suitable for everything, however – choosing which tool you use to do this depends on the project, on how much time you’ve got and on the expectations of your audience.

So here’s what I’ve been using. It’s called The Animationizer and I made it using Processing. And it’s free.

All you need to do is extract the zip file anywhere you like, read the README file (which gives you a guide on how to setup and use it and what bugs to watch out for) then load Animationizer.pde in Processing. When you’re ready, Run The Animationizer by pressing Command-R.

This software is useful for lots of things, so I’d love to hear what you end up using it for. In particular I think it might be helpful for artists looking for a simple tool to make animations with. And if you find yourself struggling to keep your kids occupied at Christmas, I can almost guarantee that this will save the day. Enjoy!

Animating paper prototypes

I’ve spent lots of time lately talking through complex interactions with our coders. It’s tricky. Sketches, wireframes and examples all help, but it’s hard to talk about transitions and movement when you’ve only got static diagrams to illustrate. Discussions take ages. Then, after everyone seems to have agreed on how the feature’s going to work, the developers come back with something close… but no cigar.

A few months ago, I started playing with ideas to make this easier. I wanted a way to show states and transitions, in a format as fast and easy to produce as a rough sketch. So I thought I’d try animating the paper prototypes we’d been working on.

This is one of the first animations, made using a webcam and some capture software I wrote. Here, a new client is completing an application form for a new account. This shows some of the different validation behaviour in the form.

Paper prototype animation from chrisneale on Vimeo.

Then I plugged in a mic and recorded a screencast. Quicktime has a useful feature that lets you play back a video one frame at a time, using the cursor keys. This meant I could easily control the speed of the animation while explaining what was going on. Here’s what I ended up giving the developers:

Paper prototype animation – with voice-over from chrisneale on Vimeo.

The desk is the stage, and the action is framed inside a print-out of an empty browser to give it context. I wanted it to look so simple and sketchy that nobody could possibly confuse it with a design, so I used paper, card and Post-Its to build up the scene and laid a sheet of acetate on top, which I wrote on with OHP pen. There’s a rather crude cardboard mouse-cursor and a rotating paper ‘in progress’ icon.

There are 8 animations in total, each of which illustrates part of a user journey through the form and highlights complex validation behaviour I’d found tricky to explain. I was a bit worried that the developers might think it was gimmicky, but the novelty wore off quickly and they rapidly moved on to focus on the content. Because the videos illustrated a lot of the main ideas, everyone involved was spared long, tedious meetings talking about display conditions and validation behaviour. This was a big win.

The whole process is really quick and, most importantly, fun – developers and stakeholders engage fully even with dry subject matter. Non-techies can get involved too because the animation software only has about 3 buttons. Unlike with Flex or AJAX, there’s no learning curve.

Animation is famous for taking ages, but doing animations like mine is remarkably quick providing you’re tooled up and organised. It took me about half an hour to set the scene, based on some wireframes we’d already done. Then each animation took about 15 minutes. Here’s the rig in our lab:

Stop-frame animation rig

Stop-frame animation rig

I’ll upload the software I used to make this over the next few weeks along with more information on the rig. In short, a Processing script captures images from a high-resolution webcam and strings them together before exporting them as a Quicktime movie.

I’ve really enjoyed using this technique and I’m pleased at how it aids complex discussions. If you try it, I’d love to hear how you get along. Just be careful not to get too distracted by it’s ‘time-lapse’ mode – it’s very appealing if you’re procrastinating.

Update: 12/13/09 – I’ve released the software so you can download it and try it for yourself.