Prototyping Animations with Keynote

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.)

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.

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.

The first thing you have to do is slice all the individual graphics that you need to import into the project (which with keynote is easy as dragging the file onto the artboard as you need them, yay easy!). You can also copy and paste illustrator vectors. I start with a phone background that already has the background graphic/color, title and status bar. I also resize the document to the size of the iPhone. Click Document on the top left, and select Custom Slide Size under Slide Size. There you can manually type in an iPhone size you want to present. Then I start animating things.

If you’re not familiar with Keynote animations, this is will a brief overview.

There are three basic animation tabs: Build In, Action, and Build Out. Each object you place can have any or all of these applied to them. Build In is how the object appears on the canvas, Action is what the object does while hanging out there. Build Out is how the object leaves the canvas. With each of these options, you can set the duration, tell it when to start as well as set a delay of when it starts. There’s a long list of animations to choose from and a really nice way to preview each option after choosing the animation.

Each of these animation tabs has a window with the Build Order, think of this like your layers palette in photoshop. Layers are each animation and the order goes from top to bottom. After you have set an animation to your object, it will appear in the Build Order.

This is where you set the time when one animations starts compared to another animation. There’s three options to choose how to Start the animation: On Click is more for presentations, it lets you start an animation by clicking on a mouse or the arrow key. With Build means the animation with go with the build, at the same time as on the layer on top of it. After Build means the animation starts after the layer above. Pretty self explanatory. There’s also the option to Delay the time of each of these operations. A good way to use this is for Build 2 to start With Build 1, but to delay it by 5 secs, instead of waiting for the animation to finish. As you start animating, you’ll start to notice how much you want to speed things up. This is a good trick to do that.

In the third slide (below) of the example keynote, the animation gets pretty layered and complex. The canvas gets cluttered and hard to read. This is really where the Preview button gets used alot to understand what is going on. I wish there was a way to show/hide some Build Layers in this instance.

You can also animate the transitions. If you click on an individual slide (the left panel), the transition options show up. The most useful is Dissolve, the coolest one is the Magic Move. The transition of the dark grey background with the blue background moving up from the bottom was made with Magic Move. You can download the keynote file here to check it out. Magic Move figures out which items have moved on each slide and then tries to tween them. It works sometimes, when it doesn’t is when I rely on Dissolve.

The strongest feature that Keynote has to offer is in the Action panel. The Move action lets you draw a line where you want the object to move with dead simple easing (ease in, out, both or none). If you have used Flash, it’s like doing a motion tween but even easier. You can also throw in a Scale action. The animation below shows off a mix of the Move action and Scale action. You can download the Keynote sample here.

- Starting with one circle, Build In the Fly animation to enter the canvas.

- Select the Action tab, Add an Effect and choose the Move action. The Circle defaults to move off to the side and the Build Order defaults to On Click. You can grab the second “moved” circle Shape (I’m calling it Shape B) and place it where you want. The circle Shape B in the Build Order will need to change to After Build 1. You can also pull on the red line between circle Shape A and B and curve it, add points and really make it wiggle, instead of just going in a straight line.

- You can keep adding more Move/Scale actions until all of your movements are set. If you want multiple circles moving around like in my animation, I would set up all the movements of the first circle, then add each one individually. The second circle will follow With Build under every step. This is where it comes in handy to import your own graphics so you can tell which graphic is which, unlike mine. I’ve added labels here to illustrate the order of the 4 moving circles in my animation. The line division shows where the animation changed to start After Build, instead of With Build.

In the image below, Build 5 begins an animation. Then Build 6,7,8 are set to animate With Build 5. Build 9 starts a new animation and will be set to start After Build 8.

Also, if you dig around online, some people have made things you can drag into the keynote that are already animated. One that was helpful with the game was this countdown timer from iPresentee.

I hope this helps you get started, feel free to ask me questions on twitter or email!