It’s crazy town right now with animation tools. There’s many out there that get the job done, some better than others. There’s still a learning curve for some of the better programs. Scott Hurff has a great post summarizing all of the animation tools out there. The thing to remember with prototyping, you want to be able to just make it fast and move on. You don’t want to be spending a week figuring out Quartz Composer or After Effects, especially if you don’t have a week. (But if you do, these are amazing tools to know) I’ve even used Flash, because I know it, but I’ve also had to record a video of my screen with my phone once cause it wouldn’t #!$*&^% export smoothly. So that’s when I started looking for other options.
I’d heard of people using Keynote for prototyping screen flows and I knew Keynote had upped their game on animations recently. So I decided to check it out. There’s no custom animations, so everything is kinda canned. But it gets the idea across better than waving your arms and making noises like a trained monkey, and that’s all I needed it to do. I don’t want to spend my time perfectly crafting an animation if the developer is just going to have to recreate it again anyways. (But if you do want to create something that the developer can just import into XCode, I would check out the beta of Flux cause it does just that.)
One of my complaints with Keynote is you’re limited to the canvas size being in landscape and there isn’t a way to choose the exact size you want. BUT I’ve figured out recently that not only does Keynote export smoothly into a Quicktime movie, but Photoshop also opens Quicktime movies. This part is kinda annoying but it works. Export a Quicktime movie from Keynote, which saves it as a .mp4 file. You have to then open the .mp4 in Quicktime and resave it as a .mov file. Next you have to do the drag-the-.mov file-to-the-Photoshop-icon thing to open, rather than a native File > Open, because it weirdly doesn’t give you the option to open a .mov file that way. Photoshop allows you to crop the .mov file and export it back into .mov or an animated .gif. Super annoying but super helpful.
**Update: I was told you can set a custom size, therefore eliminating this step. But its good info to know if you do need to crop movies in the future.**
Alright, now that I’ve said all this, I want to show you the guts of a keynote animation that I made and hopefully give you the gist on how to easily do this yourself. You can download my Keynote file here, so you can physically tear it apart like a tiny scavenger.
What I’ve prototyped is this game animation below. (The full version didn’t gif out completely, so here’s the full movie file too) It’s a simple shoot out style game that has characters coming in and out, jumping up and down. It’s a now abandoned idea, but it got the message across to the developer on how to treat the individual objects and the timing.