Okay. So the first method that I'm going to show you is using Keynote. You might be surprised to learn 1
that Keynote is actually capable of generating really nice animations. 2
So I'm going to show you how to do that very simply. 3
So first we're going to have to Keynote and we're going to click new and then we're going to select 4
a new wide white background click choose. 5
And now we have a brand new presentation. I'm just going to delete everything that's on screen. 6
Now I'm going to paste an image. I'm going to give the presentation a background color just so that we 7
can see this white phone slightly easier. 8
And I'm going to hollow out the center so that it's transparent, so that we'll be able to put our screen 9
in there. 10
Now to do that it's very easy and Keynote is really really useful for this. So just select the image 11
and make sure that you under the Format tab. 12
And then we're going to head into the image tab and you're going to select instant Alpha. 13
Now instant Alpha basically let's you just select and drag and get rid of any of these colored bits so 14
that you can make the entire center see through. So click done. 15
There we go. 16
So now we have a see through phone outline. 17
Now next I'm going to go into Google and I'm going to head over to maps. 18
OK. 19
So I've got Google Maps opened here and I'm just going to take a screenshot of the map area. 20
Now you can also just search in Google for a map area. 21
But on Mac it's quite easy to just hit command control shift and for to take a partial screenshot like 22
this. 23
OK so now I've got my screen shot. 24
I'm going to paste it into here and I'm going to send this to back. 25
So right click on the image and click send to back. 26
So now it's at right at the back of all these layers. 27
Now the next stage is selecting this slide in the in the left hand side here. 28
Now if you don't see this you can just go to View and make sure that the navigator is switched on. 29
Make sure that slide is selected and then hit command c 30
or just simply copy and paste. 31
Now we've got two of the same slides. 32
This is really important. In order for the animations to work in Keynote 33
both slides beginning and end slides need to have the same exact components. 34
Okay. So in this second slide well what's going to happen is that we're going to prototype the effect of 35
zooming and panning in our apps. 36
I'm going to make the app a little bit bigger and then I'm going to pan it over to the left near Regent's 37
Park. 38
Now the next stage is that you can see that this map is actually showing up on the entire screen. 39
So we have to block it out in order to just look at the phone 40
right? 41
So I'm going to go back to the first app. 42
I'm going to insert a square shape. 43
Now I'm going to make that relatively large and change the color to the same as the background and get 44
rid of this drop shadow. 45
Now I'm going to make sure that it covers just about enough of the map and then I'm going to copy and 46
paste and then put it over onto the other side and then have another one paste another one put it down 47
here and paste another one and put it up here. 48
Okay. So now you can see that we've blocked out all of the other parts of the map so that we only see what's 49
relevant. 50
Now this is not much of a prototype. 51
So instead what you have to do is select all four of these covering shapes and then you're going to 52
go to a range. 53
So again under format go to a range and we're going to send it backwards. Not right to the back but just 54
back by one layer. 55
So currently, in terms of layers, right at the back is the map. 56
The second most forward is these blocking strips and the first i.e. most forward is this phone outline. 57
Okay. So now I'm going to select all four of these blocking strips and I'm going to copy it and paste it 58
into this file as well. 59
Now I might need to do a little bit of adjusting just because it's not actually covering up the entire 60
area of the map on screen. 61
So let's just do a little bit of adjusting. Okay cool. 62
So that's done and then we're going to send it backwards again. 63
Now the next thing that I'm going to do is I'm going to copy this slide again and paste another version 64
of it. 65
And in this version I want a pin to drop from the top onto the map. And in order to do that the first 66
thing I have to do is head over and find an image of a pin and I'm just again going to take a screenshot 67
of it or you can copy and paste it in and you can see that there's again all of this white space. 68
So we head over to a format, image, instant Alpha and just click and drag until get rid of all of that 69
white space. And then I'm going to resize it to some sort of reasonable size and let's put it on where we put 70
it. 71
Let's put it on my favorite bar Pearl London. 72
Okay, great! 73
Now it's time for animations. And the first animation that we're going to do is going between this image 74
to this image. 75
So this is the start of the animation and this is the end of the tween animation. 76
And in order to implement that tween animation, all we have to do is select the starting slide which 77
is slide 1 and you head over to animate and you add an effect called Magic move. 78
Now Magic move is literally magic. So you can make a few adjustments by clicking preview and seeing you 79
know, is that too slow? Is too fast? Can I make the duration a little bit faster and make it you know really 80
instant zoom or should I make it a little bit slower so that it's you know at a crawl? 81
It really is up to you. 82
Now I'm going to leave it on about 1.5 seconds. 83
Okay. So that's that. The next thing I want to show you is how do we make this pin drop. 84
And this is way easier than the previous animation. We're just going to select the pin and under animate 85
under build in so showing up, build out is when you make it disappear and action is just when it's ready 86
on screen. 87
So under Build in we're going to add an effect called drop so that we literally just drop the pin onto 88
the placement. 89
Okay. So let's preview our prototype that was created in what, less than five minutes? 90
Let's see how that looks. 91
Okay. 92
So screen 1 93
we've got a zoomed out version of our app and it's centered around what, British Museum? 94
And then you press next 95
and it pans and zooms to the next location on a map. 96
And then you press next again and you get a pin drop. 97
So how simple was that? 98
And it's all with free software from the Mac. 99
So it's actually really easy and quick to prototype with Keynote. 100
The only thing about it that I don't like is that ideally in a graphics package, you want to be able 101
to see all your layers and rearrange them. 102
So in Keynote unfortunately you have to kind of keep in mind which layers at which level and you move 103
them back by telling them to go backwards or forwards or right to the back or at the front. 104
Now that's not ideal. 105
I want to have something like in Photoshop where you see layer 1 which is on top of layer 2 which is 106
on top of layer 3. 107
That would really make it perfect for me. 108
But, you know if you're limited in terms of resources or you don't want to learn yet another graphics 109
package then Keynote can do pretty much most of those prototype animations for you. 110
And it's something that is really cool to mess around with and just try out for yourself. 111
So this is one very easy way of doing prototypes.