0
1
00:00:00,360 --> 00:00:06,600
Okay. So the first method that I'm going to show you is using Keynote. You might be surprised to learn
1

2
00:00:06,600 --> 00:00:11,190
that Keynote is actually capable of generating really nice animations.
2

3
00:00:11,190 --> 00:00:13,600
So I'm going to show you how to do that very simply.
3

4
00:00:13,680 --> 00:00:18,600
So first we're going to have to Keynote and we're going to click new and then we're going to select
4

5
00:00:18,660 --> 00:00:22,840
a new wide white background click choose.
5

6
00:00:22,890 --> 00:00:27,900
And now we have a brand new presentation. I'm just going to delete everything that's on screen.
6

7
00:00:27,930 --> 00:00:33,270
Now I'm going to paste an image. I'm going to give the presentation a background color just so that we
7

8
00:00:33,270 --> 00:00:35,780
can see this white phone slightly easier.
8

9
00:00:35,820 --> 00:00:42,660
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

10
00:00:42,690 --> 00:00:43,330
in there.
10

11
00:00:43,620 --> 00:00:49,530
Now to do that it's very easy and Keynote is really really useful for this. So just select the image
11

12
00:00:49,590 --> 00:00:52,440
and make sure that you under the Format tab.
12

13
00:00:52,740 --> 00:00:58,010
And then we're going to head into the image tab and you're going to select instant Alpha.
13

14
00:00:58,010 --> 00:01:05,760
Now instant Alpha basically let's you just select and drag and get rid of any of these colored bits so
14

15
00:01:05,760 --> 00:01:10,410
that you can make the entire center see through. So click done.
15

16
00:01:10,410 --> 00:01:10,860
There we go.
16

17
00:01:10,860 --> 00:01:14,950
So now we have a see through phone outline.
17

18
00:01:14,970 --> 00:01:19,560
Now next I'm going to go into Google and I'm going to head over to maps.
18

19
00:01:19,560 --> 00:01:19,850
OK.
19

20
00:01:19,860 --> 00:01:25,630
So I've got Google Maps opened here and I'm just going to take a screenshot of the map area.
20

21
00:01:25,630 --> 00:01:29,700
Now you can also just search in Google for a map area.
21

22
00:01:29,700 --> 00:01:37,890
But on Mac it's quite easy to just hit command control shift and for to take a partial screenshot like
22

23
00:01:38,040 --> 00:01:39,150
this.
23

24
00:01:39,150 --> 00:01:40,980
OK so now I've got my screen shot.
24

25
00:01:41,010 --> 00:01:45,620
I'm going to paste it into here and I'm going to send this to back.
25

26
00:01:45,630 --> 00:01:49,070
So right click on the image and click send to back.
26

27
00:01:49,200 --> 00:01:52,500
So now it's at right at the back of all these layers.
27

28
00:01:52,500 --> 00:01:58,560
Now the next stage is selecting this slide in the in the left hand side here.
28

29
00:01:58,560 --> 00:02:04,410
Now if you don't see this you can just go to View and make sure that the navigator is switched on.
29

30
00:02:04,440 --> 00:02:08,070
Make sure that slide is selected and then hit command c
30

31
00:02:08,190 --> 00:02:10,810
or just simply copy and paste.
31

32
00:02:11,040 --> 00:02:13,190
Now we've got two of the same slides.
32

33
00:02:13,200 --> 00:02:17,620
This is really important. In order for the animations to work in Keynote
33

34
00:02:17,700 --> 00:02:23,820
both slides beginning and end slides need to have the same exact components.
34

35
00:02:24,270 --> 00:02:31,740
Okay. So in this second slide well what's going to happen is that we're going to prototype the effect of
35

36
00:02:31,860 --> 00:02:34,100
zooming and panning in our apps.
36

37
00:02:34,090 --> 00:02:39,600
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

38
00:02:39,600 --> 00:02:39,960
Park.
38

39
00:02:39,960 --> 00:02:45,450
Now the next stage is that you can see that this map is actually showing up on the entire screen.
39

40
00:02:45,450 --> 00:02:50,200
So we have to block it out in order to just look at the phone
40

41
00:02:50,220 --> 00:02:50,490
right?
41

42
00:02:50,490 --> 00:02:52,500
So I'm going to go back to the first app.
42

43
00:02:52,580 --> 00:02:55,260
I'm going to insert a square shape.
43

44
00:02:55,260 --> 00:03:01,950
Now I'm going to make that relatively large and change the color to the same as the background and get
44

45
00:03:01,950 --> 00:03:03,460
rid of this drop shadow.
45

46
00:03:03,690 --> 00:03:13,140
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

47
00:03:13,140 --> 00:03:21,180
paste and then put it over onto the other side and then have another one paste another one put it down
47

48
00:03:21,180 --> 00:03:25,330
here and paste another one and put it up here.
48

49
00:03:25,800 --> 00:03:33,120
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

50
00:03:33,120 --> 00:03:33,690
relevant.
50

51
00:03:33,750 --> 00:03:36,230
Now this is not much of a prototype.
51

52
00:03:36,240 --> 00:03:42,480
So instead what you have to do is select all four of these covering shapes and then you're going to
52

53
00:03:42,480 --> 00:03:43,920
go to a range.
53

54
00:03:43,920 --> 00:03:50,190
So again under format go to a range and we're going to send it backwards. Not right to the back but just
54

55
00:03:50,190 --> 00:03:51,820
back by one layer.
55

56
00:03:52,020 --> 00:03:56,620
So currently, in terms of layers, right at the back is the map.
56

57
00:03:56,700 --> 00:04:05,780
The second most forward is these blocking strips and the first i.e. most forward is this phone outline.
57

58
00:04:05,790 --> 00:04:13,860
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

59
00:04:13,980 --> 00:04:16,590
into this file as well.
59

60
00:04:16,590 --> 00:04:24,810
Now I might need to do a little bit of adjusting just because it's not actually covering up the entire
60

61
00:04:25,710 --> 00:04:27,680
area of the map on screen.
61

62
00:04:27,930 --> 00:04:31,870
So let's just do a little bit of adjusting. Okay cool.
62

63
00:04:31,890 --> 00:04:36,880
So that's done and then we're going to send it backwards again.
63

64
00:04:36,990 --> 00:04:43,620
Now the next thing that I'm going to do is I'm going to copy this slide again and paste another version
64

65
00:04:43,620 --> 00:04:44,410
of it.
65

66
00:04:44,550 --> 00:04:51,870
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

67
00:04:51,870 --> 00:04:58,980
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

68
00:04:59,040 --> 00:05:05,230
of it or you can copy and paste it in and you can see that there's again all of this white space.
68

69
00:05:05,400 --> 00:05:11,790
So we head over to a format, image, instant Alpha and just click and drag until get rid of all of that
69

70
00:05:11,790 --> 00:05:18,990
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

71
00:05:18,990 --> 00:05:19,460
it.
71

72
00:05:19,470 --> 00:05:22,590
Let's put it on my favorite bar Pearl London.
72

73
00:05:22,590 --> 00:05:23,360
Okay, great!
73

74
00:05:23,370 --> 00:05:29,580
Now it's time for animations. And the first animation that we're going to do is going between this image
74

75
00:05:29,940 --> 00:05:31,050
to this image.
75

76
00:05:31,050 --> 00:05:37,170
So this is the start of the animation and this is the end of the tween animation.
76

77
00:05:37,170 --> 00:05:43,290
And in order to implement that tween animation, all we have to do is select the starting slide which
77

78
00:05:43,290 --> 00:05:49,210
is slide 1 and you head over to animate and you add an effect called Magic move.
78

79
00:05:49,260 --> 00:05:55,540
Now Magic move is literally magic. So you can make a few adjustments by clicking preview and seeing you
79

80
00:05:55,540 --> 00:06:02,850
know, is that too slow? Is too fast? Can I make the duration a little bit faster and make it you know really
80

81
00:06:02,910 --> 00:06:08,810
instant zoom or should I make it a little bit slower so that it's you know at a crawl?
81

82
00:06:08,820 --> 00:06:10,130
It really is up to you.
82

83
00:06:10,410 --> 00:06:14,730
Now I'm going to leave it on about 1.5 seconds.
83

84
00:06:14,880 --> 00:06:19,900
Okay. So that's that. The next thing I want to show you is how do we make this pin drop.
84

85
00:06:19,920 --> 00:06:25,350
And this is way easier than the previous animation. We're just going to select the pin and under animate
85

86
00:06:25,410 --> 00:06:31,770
under build in so showing up, build out is when you make it disappear and action is just when it's ready
86

87
00:06:31,770 --> 00:06:32,560
on screen.
87

88
00:06:32,730 --> 00:06:39,040
So under Build in we're going to add an effect called drop so that we literally just drop the pin onto
88

89
00:06:39,090 --> 00:06:40,200
the placement.
89

90
00:06:40,680 --> 00:06:46,250
Okay. So let's preview our prototype that was created in what, less than five minutes?
90

91
00:06:46,290 --> 00:06:47,600
Let's see how that looks.
91

92
00:06:47,640 --> 00:06:47,900
Okay.
92

93
00:06:47,910 --> 00:06:48,960
So screen 1
93

94
00:06:48,960 --> 00:06:55,350
we've got a zoomed out version of our app and it's centered around what, British Museum?
94

95
00:06:55,650 --> 00:06:57,380
And then you press next
95

96
00:06:57,420 --> 00:07:02,120
and it pans and zooms to the next location on a map.
96

97
00:07:02,290 --> 00:07:06,180
And then you press next again and you get a pin drop.
97

98
00:07:06,180 --> 00:07:08,240
So how simple was that?
98

99
00:07:08,260 --> 00:07:10,290
And it's all with free software from the Mac.
99

100
00:07:10,290 --> 00:07:13,620
So it's actually really easy and quick to prototype with Keynote.
100

101
00:07:13,650 --> 00:07:18,720
The only thing about it that I don't like is that ideally in a graphics package, you want to be able
101

102
00:07:18,720 --> 00:07:21,400
to see all your layers and rearrange them.
102

103
00:07:21,510 --> 00:07:28,050
So in Keynote unfortunately you have to kind of keep in mind which layers at which level and you move
103

104
00:07:28,050 --> 00:07:33,150
them back by telling them to go backwards or forwards or right to the back or at the front.
104

105
00:07:33,150 --> 00:07:34,460
Now that's not ideal.
105

106
00:07:34,500 --> 00:07:39,690
I want to have something like in Photoshop where you see layer 1 which is on top of layer 2 which is
106

107
00:07:39,690 --> 00:07:40,800
on top of layer 3.
107

108
00:07:40,860 --> 00:07:43,330
That would really make it perfect for me.
108

109
00:07:43,350 --> 00:07:48,810
But, you know if you're limited in terms of resources or you don't want to learn yet another graphics
109

110
00:07:48,810 --> 00:07:54,320
package then Keynote can do pretty much most of those prototype animations for you.
110

111
00:07:54,510 --> 00:07:59,430
And it's something that is really cool to mess around with and just try out for yourself.
111

112
00:07:59,430 --> 00:08:03,220
So this is one very easy way of doing prototypes.