In this tutorial video we're gonna learn how to create
sprite animation
Using sprites that we've downloaded from gameart2D.com they have a bunch of free sprites that you can download as well
As tile sets to create cool parallax scrolling backgrounds and other game interface
graphics so in this particular tutorial video
I'm gonna download the zombie and the knight because I need a hero and a villain and you never know the zombies could be the
Hero, and the knight could be the villain
It's up to you, and then I'm gonna download the free graveyard tile set just to create a cool parallax background
But in this particular video we're gonna concern ourselves more with the sprites so if I click on this particular sprite
You'll see this which is called our sprite sheet and what it shows is that each sequence, so this is the idol sequence
Includes a number of different poses that when put together in an animated sequence
actually show that
characteristic so for instance this has 10 different images that
when it's put together in animation show the idol sequence so like if somebody is not pressing the
Key on their controller or the key on their keypad and the character is just standing there
It doesn't just stand there frozen. It should do something so whether he's you know slightly
Moving and sort of huffing through his breath. Whatever it may be
We want him to have some sort of movement so that we know that he's active and not frozen and the game is not broken
So we also have walk sequences run sequences attack jump jump attack dead
etc and each one of these we can tie with code to a particular key on your keyboard or a
button on a controller so that when somebody hits a on a controller we can make it attack and every time they hit a
It's gonna run through this sprite sequence
Okay, so after we've downloaded all of these assets in animate CC
We've created a new project, and this is an actionscript 3.0
It's 24 frames per second because we want smooth animation, and I've made it 1280 by 720 and again
You can choose your own stage size
I tend to stick to the YouTube video dimension because those are pretty standard sizes
This one is a good size
But it's right below the high definition size so it's gonna still give me good quality and a good size without being too massive
Alright in this I have a background layer where I've added a ground and a background. It's lame
It doesn't look cool
But I'm gonna add my parallax scrolling
Background later for now this is just placeholders so that I can see the ground in which I want my knight to run
with that created
I locked it down, so I didn't have to change anything or put anything on that layer that could confuse things now
I've already done one of these sequences so we can see what this looks like I'll hit command or control and
return command return or control enter
Depending on if you're Mac or PC
So as you can see we have this walk sequence and this consists of ten different images in a movie clip that when put together
That constant loop is going to create this walk sequence
So if I double click inside of this guy you can see that we are in a movie clip called knight
Walk so, I always try to name it by the character and then the particular sequence
And then we have on frame 1 the first pose frame 2 second third fourth fifth
sixth seventh eighth ninth and tenth okay, so
Let's see how to do this with a new sequence for right now
I'll go ahead and lock and turn off the visibility of the knight walk layer and
Go ahead and create. Let's do knight
attack
Okay
So let's go back over to our downloaded assets and make sure these come as zip file so
extract them on a Mac you'll double click and extract them, and if you're on a PC
I think you right click on the zip file and choose unzip alright
So you see this dragon bones layer?
And it has all the different parts in the original project file
Now if you are doing your own character in Adobe Illustrator
Just make sure that each pose is on its own layer, but they are stacked in
perfect
in a perfect stacking order don't put them side-by-side you want to be right on top of each other and
Make sure that you name them all with the same name of the sequence and then notice that this one has chronological order with
Parentheses for each one make sure you do that
Okay, so I'm gonna find the attack sequence
so I'll click the first one hold shift and click the last one this allows me to grab all 10 of those actions and
Drag them simultaneously into my animate CC project now if yours can't do that for some reason
Remember that you can always go to file import
And choose import to stage and choose all ten of those actions now
It's really important when you do this that you don't start moving all these little 10 sequences around or 10 images around
Because we want to have actually have all of these stacked perfectly the way they are
And we want to put them all into a movie clip
So we're gonna click off and then we're gonna click and drag and I know that seems like like why would you do?
That again because it looks the exact same thing
But what it did last time is it only selected the top one
And it would only put the top pose into the movie clip symbol
And that would cause problems so when you do this make sure to click off and then
Marquee select to grab all of those different poses all ten of them so that they all go into the movie clip
So we'll go up to modify convert to symbol and we're gonna make sure it says movie clip and MC Knight attack
Okay
So once you do that you can double click to get inside of that movie clip and now you can see that
We are in the movie clip of knight attack which is in scene 1, and we only have one layer now again
I'm gonna click off and marquee select to make sure I've selected all of them in that stack right click and choose distribute to layers
When you do that
It's going to automatically distribute all of those poses to their own layer
And then that layer one where everything used to be you can go ahead and click the trash button to delete it alright
So now that we have this all
stacked perfectly
We need to make sure that our attack pose one is on frame one and then our next
Frame our next keyframes are moved in a stacked staggered manner
So to do this, I'll go ahead and click once and then click and drag each
Keyframe so that it creates that staggering so I'm just gonna make sure it goes in a stair step pattern
Alright so each one of these so
we're not working from the top down because frame or pose one is the one we should start with and
Since that's on frame one. That's the one we start with
Okay, drag that down
And then
We can see what this looks like by going back out to scene one now if I turn on the walk
He's gonna kind of be in my way
so I'm gonna go ahead and move this over and now again command return or control enter and
Now you can see that attack sequence now
I've slowed his down by adding a little bit of time, so I'll show you how I did that here
I may not want that for my attack, but I just want to show you what I did with that
So let's go into walk so we can see it, and you can see that the first pose is on frame one
but then on frame one we still have the first pose then on frame two we have the new pose and
We have it last for one extra frame and that kind of slowed it down without making our animation choppy by changing the frame rate
so let's go back into our Knight attack and see how we can do this, so it's just a matter of clicking and dragging and
Creating that extra space, and if you do this you're probably not going to have that extra
keyframe or that extra frame at the end, and I'll show you what that looks like without it and
Then you can see how to fix it okay
All right, so now if we go ahead and do command return
You can see that. He kind of looks like he's in a strobe light because it's missing all those extra frames
So if we come to frame one we can see the pose
We go to frame two and he disappears frame 3 we see post two then he disappears so we to actually have
frame 1 or
Pose one last for two frames and pose to last for two frames and post three last for two frames etc
Three for each one of these I can click here, I can choose right click insert frame
or I can go up to insert timeline frame, or I can just hit f5 on my keyboard if
You have a condensed keyboard you might need to like hit function and then f5 or use the right click
so don't forget to add an extra frame so that it loops properly between this 20th frame back around to the first frame and
It'll look. Good. That way so
command return
And now you should see that attack sequence a little bit slower a little bit smoother now
I probably again wouldn't change that I would probably go back to before where he's a lot faster
Because he's not gonna kill anybody with that kind of slow chop that he's got going on there
But for the walk slowing it down really did help for him
So for the dash or the run sequence if he has one of those I'm not gonna probably slow it down
But the dead sequence, I might slow it down because he's gonna do a dramatic death that takes forever
So each one of these is just a matter of creating each of these sequences
You can create one two three or all of them
And then you just want to combine them in the main timeline animation and we'll see that in sprite animation part two