Buy Generic Alprazolam - No Prescription DrugStore

Designery nerdy things.

Prototyping Animations with Keynote

by admin on April 3, 2014, 5 comments

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. Shootout Animation 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, 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. Keynote Animations 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. Keynote animations 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. keynote animations 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. Keynote Magic Move 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. Keynote Animation - Starting with one circle, Build In the Fly animation to enter the canvas. Keynote Animation - 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. Keynote Animation - 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. Keynote Animation 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!

5 thoughts on “Prototyping Animations with Keynote

  1. Nice post! I love how fast you can create awesome little animations! You can change the resolution in the document settings on the right! (It’s in Dutch, but you will figure it out i think!)
    https://www.dropbox.com/s/o1kfovx6f6ogqjs/Screenshot%202014-04-04%2002.09.21.png

    I never paid the 8,99 for Keynote for iOS and i’m really curious about the viewing of animations in the app. Does anyone know how this works in the iOS version, the way it views the animation? The HTML, PDF exports are all not working well for a interactive prototype.. But maybe in the official iOS app, it wil work.

  2. Thanks!

    I haven’t tried out the iPhone version of Keynote, so I’m not sure about it’s capabilities. I do think it would be harder to make what I made in the phone, as I copy and pasted many vectors directly from illustrator. But maybe its something to explore for simple animations.

  3. Awesome stuff! Would be cool to get this loaded into our invisionapp install so we can get the sharing and commenting part too.

  4. Thanks Jenni! Great write-up.

    You may have bumped into this by now, but you can change the canvas size in Keynote via the ‘Slide Size’ dropdown in the Document Inspector. Catch is, resizing the doc will try to ‘helpfully’ resize any items that already exist on any pages. Usually works best to either 1) specify the size at the outset, or 2) group all the items on the page before resizing doc, or 3) throwing hands in air and creating a new doc at the correct size and copying-pasting items over. In any case, hopefully it’s less work than runing it through PS to crop.

    I’ve also found the ‘Record Slideshow…’ option to be handy to time slide transitions manually, when needed. The Quicktime Export than uses this recording for the output.

  5. Yes, Sander (previous commenter) has pointed this out to me, so I’ve updated the post with some cross outs. I didn’t know about the re-sizing issue after you’ve already created something. This is good stuff to know, thanks!

Comments are closed.