1
00:00:07,170 --> 00:00:11,520
Hey everybody what's going on this is Caleb with slopes dot com and in this video we're going to add

2
00:00:11,520 --> 00:00:15,300
in some animated stickers which is just super duper fun.

3
00:00:15,630 --> 00:00:21,480
I'm going to show you how to add AP Engy as well as GIF animations and we can also test them and we

4
00:00:21,480 --> 00:00:23,500
can view them in our simulator.

5
00:00:23,500 --> 00:00:29,070
So go ahead and pull open your X code project and this is where we left off last time we we added a

6
00:00:29,070 --> 00:00:35,400
number of static images into our sticker pack and go ahead and also pull open your assets folder here

7
00:00:35,430 --> 00:00:37,200
and go into the stickers folder.

8
00:00:37,380 --> 00:00:40,930
Then click on animated and we have two different folders.

9
00:00:41,070 --> 00:00:44,940
We're going to begin with GIF because they are just the easiest to explain at first and then we'll go

10
00:00:44,940 --> 00:00:46,410
into PNB.

11
00:00:46,440 --> 00:00:48,900
So go ahead and click on gif there.

12
00:00:48,900 --> 00:00:56,370
And as you can see we have some gifs here we have Magic Jack and we have steamboat Markee we can add

13
00:00:56,370 --> 00:01:03,790
both of these in something to know about gifts that they have to be less than five hundred twelve kilobytes.

14
00:01:03,840 --> 00:01:08,450
So that's pretty small but they do show up fairly small on the phone so it's OK.

15
00:01:08,490 --> 00:01:14,240
So go ahead and all we need to do to add in animated gifs is really just drag and drop.

16
00:01:14,250 --> 00:01:18,500
That's the only thing that you need to know about gifts anyway.

17
00:01:18,540 --> 00:01:24,570
And we're not allowed to preview them or test them in the project here but we can build and run it to

18
00:01:24,570 --> 00:01:25,170
the simulator.

19
00:01:25,170 --> 00:01:26,490
So let's go ahead and do that.

20
00:01:26,580 --> 00:01:30,870
Make sure everything went in easily and that it works fine.

21
00:01:30,870 --> 00:01:34,120
So go ahead and just let it build let it open on its own.

22
00:01:34,500 --> 00:01:38,790
And we should be able to scroll down and see our animated gifs.

23
00:01:38,790 --> 00:01:39,340
There you go.

24
00:01:39,360 --> 00:01:40,540
So they're working.

25
00:01:40,620 --> 00:01:46,350
If I hold down on one it'll peel up and it has this kind of cool you know weight to it I just love that

26
00:01:46,350 --> 00:01:47,130
effect.

27
00:01:47,130 --> 00:01:49,370
And I can just drop it wherever I want.

28
00:01:49,410 --> 00:01:53,490
Now the thing is if there is no message to append to it just disappears.

29
00:01:53,490 --> 00:01:55,130
So let's send an image.

30
00:01:55,290 --> 00:01:57,300
And this waterfall looks pretty majestic.

31
00:01:57,300 --> 00:02:00,350
So let's go ahead and enter our sticker pack.

32
00:02:00,450 --> 00:02:04,270
And sometimes if you enter it a second time you have to close it and reopen it.

33
00:02:04,530 --> 00:02:05,790
But I can say wow.

34
00:02:05,820 --> 00:02:07,210
This waterfall.

35
00:02:07,290 --> 00:02:08,490
It's magic.

36
00:02:08,840 --> 00:02:10,320
And I can drop it on just like that.

37
00:02:10,350 --> 00:02:11,360
Animated stickers.

38
00:02:11,370 --> 00:02:12,660
Boom done.

39
00:02:12,660 --> 00:02:13,920
Super easy.

40
00:02:14,060 --> 00:02:19,590
Can of course add in my static ones as well and just send these individually sort of like gifts that

41
00:02:19,590 --> 00:02:22,310
you would send on you know other messaging apps.

42
00:02:22,320 --> 00:02:27,280
So very very cool gifts are really easy you just drag and drop them.

43
00:02:27,450 --> 00:02:32,040
You know if you create your own gifts you can add those just by dragging and dropping them in super

44
00:02:32,040 --> 00:02:32,700
easy.

45
00:02:33,000 --> 00:02:35,690
So next we're going to talk about a.p N-G.

46
00:02:35,690 --> 00:02:40,950
So go ahead and start the project from running and go back to the Finder or go back to your folder here

47
00:02:40,950 --> 00:02:42,810
and select a PNB.

48
00:02:43,200 --> 00:02:46,680
And we have four different animated stickers that we can choose from.

49
00:02:46,740 --> 00:02:49,970
We have a car a character a coin and a yellow car.

50
00:02:50,310 --> 00:02:56,790
So let's go ahead and first we're going to talk about the car OK because we have a bunch of different

51
00:02:56,790 --> 00:02:57,990
images here.

52
00:02:58,160 --> 00:03:03,120
And as you can see if I scroll down you can tell that this animation just makes the car spin in a circle

53
00:03:03,450 --> 00:03:04,800
which is pretty cool.

54
00:03:04,800 --> 00:03:10,590
Now in order to add an animated sticker pack we need to do something special cause watch what happens

55
00:03:10,590 --> 00:03:16,120
if I select them all and drag them in it adds each one as a static sticker.

56
00:03:16,440 --> 00:03:19,170
Undo that we don't want that to add an animated sticker.

57
00:03:19,170 --> 00:03:25,080
You need to right click go to add assets and new sticker sequence because if you think about it in animation

58
00:03:25,080 --> 00:03:26,660
it's just a sequence of frames.

59
00:03:26,820 --> 00:03:31,650
So click new sticker sequence and you can drag and drop images to add frames.

60
00:03:31,650 --> 00:03:36,540
Now there are multiple ways you can do this but the easiest way I found is just to drag and drop all

61
00:03:36,540 --> 00:03:38,750
of them right on frame 1.

62
00:03:39,240 --> 00:03:43,020
And it makes a list of all the frames from a to z.

63
00:03:43,020 --> 00:03:46,800
Now if you want to see what this looks like you'll notice there's a little play button that shows up

64
00:03:46,800 --> 00:03:49,710
and you can click on it and see the animation.

65
00:03:49,710 --> 00:03:54,240
It automatically creates an animation based on the frames and it loops it.

66
00:03:54,370 --> 00:03:56,060
OK that's pretty sweet.

67
00:03:56,070 --> 00:04:00,690
It does come in with just the name sticker sequence so I'm just going to call this car.

68
00:04:01,110 --> 00:04:02,370
And there we go.

69
00:04:02,370 --> 00:04:05,400
That's an animated PNB that you need to.

70
00:04:05,670 --> 00:04:08,410
That's what you need to know about adding those.

71
00:04:08,580 --> 00:04:11,100
I don't know if you noticed this but in the simulator.

72
00:04:11,280 --> 00:04:19,350
When we pull open messages again and pull open our app the static images here appear on the top because

73
00:04:19,350 --> 00:04:22,300
this actually goes in crop in numerical order.

74
00:04:22,470 --> 00:04:27,960
So if we have if we want the animated ones to appear first we need to drag them so that they're at the

75
00:04:27,960 --> 00:04:28,520
front.

76
00:04:28,530 --> 00:04:33,990
And so in order to move them I'm going to actually just drag them and move them up to the front just

77
00:04:33,990 --> 00:04:37,520
that way they're easy to access and the animated ones should be first.

78
00:04:37,530 --> 00:04:40,650
I think just because they're more engaging and a little more fun.

79
00:04:41,040 --> 00:04:44,450
But now we can go ahead and we can add a new sticker sequence.

80
00:04:44,520 --> 00:04:47,620
And I'm actually going to you know just from the get go move it up to the front.

81
00:04:47,820 --> 00:04:53,000
And now all we have to do is go back to our folder and we just need to drag in our Frayne's.

82
00:04:53,010 --> 00:04:55,450
Let's drag in the yellow car.

83
00:04:55,500 --> 00:04:55,890
There we go.

84
00:04:55,890 --> 00:04:57,360
Let's test that out.

85
00:04:57,360 --> 00:04:58,400
Looks awesome.

86
00:04:58,500 --> 00:05:03,420
And I'm going to rename it yellow car.

87
00:05:03,420 --> 00:05:10,100
All right do it again right click add assets and I'm going to go ahead and move it to the front and

88
00:05:10,100 --> 00:05:11,680
let's go back to the finder.

89
00:05:11,720 --> 00:05:13,940
Let's add in our character here.

90
00:05:14,050 --> 00:05:18,500
Now this is the one that I was telling you about remember this used to be a sprite sheet where there

91
00:05:18,500 --> 00:05:20,810
were all the images on one single image.

92
00:05:20,810 --> 00:05:22,660
I'll show you how to deconstruct that later.

93
00:05:22,670 --> 00:05:24,820
But look what it does if I go through them quickly.

94
00:05:24,920 --> 00:05:27,800
It's going to just simulate this character running which is pretty cool.

95
00:05:27,830 --> 00:05:29,340
Kind of a cute little guy there.

96
00:05:29,450 --> 00:05:32,120
And I'm going to drag it on and let's test it.

97
00:05:33,660 --> 00:05:41,020
Nice There we go there's our animation and we'll just call this guy character because he's quite a character

98
00:05:41,730 --> 00:05:43,050
and we have one more to add.

99
00:05:43,050 --> 00:05:45,720
So right click new sticker sequence.

100
00:05:45,720 --> 00:05:51,600
Drag it up to right there I'll just put it in front of the character that's fine and find the empty

101
00:05:51,900 --> 00:05:53,160
sticker sequence.

102
00:05:53,160 --> 00:05:58,150
And we're going to drag on our last set of assets which is this coin.

103
00:05:58,260 --> 00:06:00,690
It's a nice spinning coin animation.

104
00:06:01,080 --> 00:06:01,770
So there we go.

105
00:06:01,770 --> 00:06:03,030
That looks awesome.

106
00:06:03,030 --> 00:06:06,080
And if I click play you'll see it rotates nicely.

107
00:06:06,210 --> 00:06:08,950
Gives us this cool animated spinning coin effect.

108
00:06:09,180 --> 00:06:13,480
And let's actually rename that to coin.

109
00:06:13,780 --> 00:06:14,300
All right.

110
00:06:14,310 --> 00:06:22,050
So we now have four well six animated stickers and we have quite a few other static stickers we can

111
00:06:22,050 --> 00:06:26,910
view the animations here we can test them out just by clicking the play button which is pretty sweet.

112
00:06:27,120 --> 00:06:32,360
And I think we should build and run this to make sure our HPN G files show up properly.

113
00:06:32,400 --> 00:06:34,110
So go ahead and build and run this.

114
00:06:34,110 --> 00:06:40,410
One thing to know this is sort of a side note but all assets here all of these need to be exactly the

115
00:06:40,410 --> 00:06:45,650
same size so each of these are 128 pixels by 128 pixels.

116
00:06:45,720 --> 00:06:48,030
If they're not it just simply won't work.

117
00:06:48,030 --> 00:06:51,630
It will show the first frame and then it will just freeze so it won't animate.

118
00:06:51,660 --> 00:06:57,360
And I actually had trouble with this originally because the format that it came in as was basically

119
00:06:57,450 --> 00:06:59,670
the image was as big as the art.

120
00:06:59,700 --> 00:07:06,120
So as these got skinnier the height was the same but the width was getting smaller smaller smaller bigger

121
00:07:06,120 --> 00:07:06,710
bigger bigger.

122
00:07:06,840 --> 00:07:07,950
So they weren't all the same.

123
00:07:07,950 --> 00:07:12,960
And it was just a static image so I had to figure out that I had to you know make all of them the same

124
00:07:12,960 --> 00:07:14,050
exact size.

125
00:07:14,070 --> 00:07:16,970
And I'll show you how to do that as well in future video.

126
00:07:17,010 --> 00:07:18,930
But let's go check out the sim.

127
00:07:18,960 --> 00:07:23,570
Let's go ahead and try to load our sticker app and it's saying unable to load.

128
00:07:23,590 --> 00:07:24,510
That's weird.

129
00:07:24,780 --> 00:07:31,480
So you know what if you have problems what I have found helps if you actually stop it from running and

130
00:07:31,480 --> 00:07:36,930
then go back into message choose a message and then you select the little triple dots here.

131
00:07:36,930 --> 00:07:42,000
You can actually swipe and delete your sticker app and I'm going to get rid of my sample sticker pack

132
00:07:42,030 --> 00:07:48,660
there so that is like a clean install and sometimes when you add animated stickers it needs a clean

133
00:07:48,660 --> 00:07:51,210
install for it to properly update.

134
00:07:51,210 --> 00:07:52,410
So here we go.

135
00:07:52,740 --> 00:07:56,840
Sticker pack is installed and it's about to open up.

136
00:07:56,850 --> 00:08:00,360
I believe maybe we have to click on it here.

137
00:08:00,780 --> 00:08:01,300
OK.

138
00:08:02,130 --> 00:08:02,610
Oh there we go.

139
00:08:02,610 --> 00:08:03,560
OK so it updated.

140
00:08:03,590 --> 00:08:04,370
And oh yeah.

141
00:08:04,370 --> 00:08:05,220
Look at that.

142
00:08:05,220 --> 00:08:06,690
We have our animations.

143
00:08:06,690 --> 00:08:08,140
They look so good.

144
00:08:08,310 --> 00:08:13,770
We have our little running guy there coin our car as well as our team of slopes gifts.

145
00:08:13,800 --> 00:08:18,130
So let's go ahead and let's maybe drop in an image here.

146
00:08:18,240 --> 00:08:20,890
That looks pretty cool.

147
00:08:21,270 --> 00:08:25,700
Maybe hey it's pay day.

148
00:08:29,250 --> 00:08:33,050
Don't spend it all in one place.

149
00:08:33,060 --> 00:08:38,500
Some nice advice there from my guess boss who's messaging me that I just got paid.

150
00:08:38,510 --> 00:08:43,320
It's a little weird but anyway hey it's payday don't spend it all in one place let's add in a nice little

151
00:08:43,650 --> 00:08:44,650
animation here.

152
00:08:44,670 --> 00:08:45,080
Ooh.

153
00:08:45,300 --> 00:08:46,470
So cool.

154
00:08:46,590 --> 00:08:47,940
Drag and drop it.

155
00:08:48,140 --> 00:08:48,940
And oh yeah.

156
00:08:48,960 --> 00:08:55,050
Look at that we have an animated sticker dragging and dropping right on their super super cool.

157
00:08:55,120 --> 00:08:56,370
Actually kind of like this little character.

158
00:08:56,370 --> 00:08:59,120
I'm going to have him running to the water.

159
00:08:59,310 --> 00:09:00,090
Look at that.

160
00:09:00,290 --> 00:09:02,400
As message jobs are so fun guys.

161
00:09:02,400 --> 00:09:04,040
Very very cool stuff.

162
00:09:04,050 --> 00:09:10,570
That's how you add gif animated stickers as well as creating an aping sequence.

163
00:09:10,790 --> 00:09:16,470
Now there is an app that you can download for your Mac called motion and it will let you generate these

164
00:09:16,500 --> 00:09:18,460
AP injuries very easily.

165
00:09:18,540 --> 00:09:20,130
If you want to design your own.

166
00:09:20,220 --> 00:09:24,810
Other than that you can just design gifs using whatever you know program that you normally would use

167
00:09:24,810 --> 00:09:25,980
to create a GIF.

168
00:09:26,040 --> 00:09:31,540
And guys I not even kidding this is how easy it is to create an I message sticker app.

169
00:09:31,700 --> 00:09:37,380
It's amazing to me that more people have not done this because it's so easy and so fun to kind of add

170
00:09:37,380 --> 00:09:42,990
a personal flair to your own to your own stickers which is pretty neat.

171
00:09:42,990 --> 00:09:47,930
So that is how you add animated stickers to your XCode project and in the next video.

172
00:09:48,030 --> 00:09:52,080
I'm going to show you how you can create your own stickers using sketch 3.

173
00:09:52,080 --> 00:09:55,340
So let's head over to the next video and let's check it out.