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.
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. Then I start animating things. For lots of things that need to slide in an out, you might want to create shape panels on either side of the phone image to cover up all of your animation trickery. This might be good to add at the very end, as you'll have to Bring to Front
each time you do something.
If you're not familiar with Keynote animations (alot has changed in the new version too), this is will a brief overview.
There are three basic animation tabs:Build In
, 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. 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 Start 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
I hope this helps you get started, feel free to ask me questions on twitter