Hey everybody what's going on this is Caleb with slopes dot com and in this video we're going to add
in some animated stickers which is just super duper fun.
I'm going to show you how to add AP Engy as well as GIF animations and we can also test them and we
can view them in our simulator.
So go ahead and pull open your X code project and this is where we left off last time we we added a
number of static images into our sticker pack and go ahead and also pull open your assets folder here
and go into the stickers folder.
Then click on animated and we have two different folders.
We're going to begin with GIF because they are just the easiest to explain at first and then we'll go
into PNB.
So go ahead and click on gif there.
And as you can see we have some gifs here we have Magic Jack and we have steamboat Markee we can add
both of these in something to know about gifts that they have to be less than five hundred twelve kilobytes.
So that's pretty small but they do show up fairly small on the phone so it's OK.
So go ahead and all we need to do to add in animated gifs is really just drag and drop.
That's the only thing that you need to know about gifts anyway.
And we're not allowed to preview them or test them in the project here but we can build and run it to
the simulator.
So let's go ahead and do that.
Make sure everything went in easily and that it works fine.
So go ahead and just let it build let it open on its own.
And we should be able to scroll down and see our animated gifs.
There you go.
So they're working.
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
effect.
And I can just drop it wherever I want.
Now the thing is if there is no message to append to it just disappears.
So let's send an image.
And this waterfall looks pretty majestic.
So let's go ahead and enter our sticker pack.
And sometimes if you enter it a second time you have to close it and reopen it.
But I can say wow.
This waterfall.
It's magic.
And I can drop it on just like that.
Animated stickers.
Boom done.
Super easy.
Can of course add in my static ones as well and just send these individually sort of like gifts that
you would send on you know other messaging apps.
So very very cool gifts are really easy you just drag and drop them.
You know if you create your own gifts you can add those just by dragging and dropping them in super
easy.
So next we're going to talk about a.p N-G.
So go ahead and start the project from running and go back to the Finder or go back to your folder here
and select a PNB.
And we have four different animated stickers that we can choose from.
We have a car a character a coin and a yellow car.
So let's go ahead and first we're going to talk about the car OK because we have a bunch of different
images here.
And as you can see if I scroll down you can tell that this animation just makes the car spin in a circle
which is pretty cool.
Now in order to add an animated sticker pack we need to do something special cause watch what happens
if I select them all and drag them in it adds each one as a static sticker.
Undo that we don't want that to add an animated sticker.
You need to right click go to add assets and new sticker sequence because if you think about it in animation
it's just a sequence of frames.
So click new sticker sequence and you can drag and drop images to add frames.
Now there are multiple ways you can do this but the easiest way I found is just to drag and drop all
of them right on frame 1.
And it makes a list of all the frames from a to z.
Now if you want to see what this looks like you'll notice there's a little play button that shows up
and you can click on it and see the animation.
It automatically creates an animation based on the frames and it loops it.
OK that's pretty sweet.
It does come in with just the name sticker sequence so I'm just going to call this car.
And there we go.
That's an animated PNB that you need to.
That's what you need to know about adding those.
I don't know if you noticed this but in the simulator.
When we pull open messages again and pull open our app the static images here appear on the top because
this actually goes in crop in numerical order.
So if we have if we want the animated ones to appear first we need to drag them so that they're at the
front.
And so in order to move them I'm going to actually just drag them and move them up to the front just
that way they're easy to access and the animated ones should be first.
I think just because they're more engaging and a little more fun.
But now we can go ahead and we can add a new sticker sequence.
And I'm actually going to you know just from the get go move it up to the front.
And now all we have to do is go back to our folder and we just need to drag in our Frayne's.
Let's drag in the yellow car.
There we go.
Let's test that out.
Looks awesome.
And I'm going to rename it yellow car.
All right do it again right click add assets and I'm going to go ahead and move it to the front and
let's go back to the finder.
Let's add in our character here.
Now this is the one that I was telling you about remember this used to be a sprite sheet where there
were all the images on one single image.
I'll show you how to deconstruct that later.
But look what it does if I go through them quickly.
It's going to just simulate this character running which is pretty cool.
Kind of a cute little guy there.
And I'm going to drag it on and let's test it.
Nice There we go there's our animation and we'll just call this guy character because he's quite a character
and we have one more to add.
So right click new sticker sequence.
Drag it up to right there I'll just put it in front of the character that's fine and find the empty
sticker sequence.
And we're going to drag on our last set of assets which is this coin.
It's a nice spinning coin animation.
So there we go.
That looks awesome.
And if I click play you'll see it rotates nicely.
Gives us this cool animated spinning coin effect.
And let's actually rename that to coin.
All right.
So we now have four well six animated stickers and we have quite a few other static stickers we can
view the animations here we can test them out just by clicking the play button which is pretty sweet.
And I think we should build and run this to make sure our HPN G files show up properly.
So go ahead and build and run this.
One thing to know this is sort of a side note but all assets here all of these need to be exactly the
same size so each of these are 128 pixels by 128 pixels.
If they're not it just simply won't work.
It will show the first frame and then it will just freeze so it won't animate.
And I actually had trouble with this originally because the format that it came in as was basically
the image was as big as the art.
So as these got skinnier the height was the same but the width was getting smaller smaller smaller bigger
bigger bigger.
So they weren't all the same.
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
exact size.
And I'll show you how to do that as well in future video.
But let's go check out the sim.
Let's go ahead and try to load our sticker app and it's saying unable to load.
That's weird.
So you know what if you have problems what I have found helps if you actually stop it from running and
then go back into message choose a message and then you select the little triple dots here.
You can actually swipe and delete your sticker app and I'm going to get rid of my sample sticker pack
there so that is like a clean install and sometimes when you add animated stickers it needs a clean
install for it to properly update.
So here we go.
Sticker pack is installed and it's about to open up.
I believe maybe we have to click on it here.
OK.
Oh there we go.
OK so it updated.
And oh yeah.
Look at that.
We have our animations.
They look so good.
We have our little running guy there coin our car as well as our team of slopes gifts.
So let's go ahead and let's maybe drop in an image here.
That looks pretty cool.
Maybe hey it's pay day.
Don't spend it all in one place.
Some nice advice there from my guess boss who's messaging me that I just got paid.
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
animation here.
Ooh.
So cool.
Drag and drop it.
And oh yeah.
Look at that we have an animated sticker dragging and dropping right on their super super cool.
Actually kind of like this little character.
I'm going to have him running to the water.
Look at that.
As message jobs are so fun guys.
Very very cool stuff.
That's how you add gif animated stickers as well as creating an aping sequence.
Now there is an app that you can download for your Mac called motion and it will let you generate these
AP injuries very easily.
If you want to design your own.
Other than that you can just design gifs using whatever you know program that you normally would use
to create a GIF.
And guys I not even kidding this is how easy it is to create an I message sticker app.
It's amazing to me that more people have not done this because it's so easy and so fun to kind of add
a personal flair to your own to your own stickers which is pretty neat.
So that is how you add animated stickers to your XCode project and in the next video.
I'm going to show you how you can create your own stickers using sketch 3.
So let's head over to the next video and let's check it out.