In this tutorial video
I'll teach you how to create a side-scrolling animation with a parallax background effect to show depth
Now just a forewarning. This is a really basic way of doing this technique
And it's great for you to do it this way first
So you'll learn what parallax scrolling is and how to create it and control the length and the time of motion tweens
But there are more
Sophisticated ways of doing a side-scrolling game and a parallax background and this might not even work for something complicated like a game
but those involve
ActionScript, and they involve creating movie clips with two different copies of the graphics that are gonna automatically loop together
so for this video
We're just doing the basic technique if you need something more sophisticated
You're gonna have to find some of that resources on YouTube or Adobe's Learning Channel
Okay, so parallax effect is basically saying that
Different things move at different speeds and that shows us depth so when we're looking at a side-scrolling game
And we're looking at the background versus the foreground the foreground the running ground that the character might be jumping and smashing and running on
That's going at a pretty good speed to match the character speed and then every other
piece or artwork behind
It is a little bit slower the further away it gets from us the slower it gets
So when we're looking at the moon it is barely moving and this gives us a really great depth
So let's see how to do this
The first thing is you should download some tile sets or create your own assets
We use the tile sets from gameart2d.com he has a bunch of freebies on this particular website
He has a bunch of sprites for sprite animation and my youtube channel does have sprite
animation videos if you want to create your character for this side scrolling animation
And then we have the tile sets and I'm using the graveyard tile set and a bunch of other user interface items
He also has a lot of stuff that you can purchase that has more features than what you get in the free ones
So make sure to check that out
Okay, so let's see how this was built before we actually start trying to build it so the first thing is, I'll go ahead and turn this off
So we can simplify what we're seeing is we have our stage size
And I use YouTube video dimensions in all of my animation projects in case I want to export them to video
so this one is 1280 by 720 one step below the first high-definition dimension, so
Then with the background
What you want to do is you want to make sure it's at least the width of the stage actually you can't do
parallax scrolling unless, it's
More than the width of the sage
So I shouldn't say at least
But you want it to be a little bit bigger or wider than the stage so that it has room to move from left to
right it doesn't need a lot because the very background is going to move pretty slow because it's far away from the viewers face, so
In this instance I also like to give it some wiggle room on the top and the bottom in case the character needs to jump
Or needs to drop down so that I can move it up and down as needed
Then we have the middle ground now, you don't have to have the middle ground
Oops I forgot to turn the background so this is a middle ground
So you don't have to have a middle ground, but by having more layers. I only have three, but just by having three
It's gonna show that parallax effect much more you can have two you can have five you can have ten
Just make sure that the closer it is to the foreground the faster
It is and the further away it gets from that it's gonna go slower, and they should go in percentages
So let's say the running ground is a hundred percent speed then make sure the next layer is like eighty percent and then
67 percent and then 53 percent and then maybe thirty percent and maybe ten percent
So I know that's kind of a lot of numbers thrown out there
But you just want to make sure that they're all as they move further back
They're going much slower than the one previously okay, so the middle ground size
we're gonna do this by length of the graphic so
It's gonna move really slow the background because it only has this much wiggle room to move left to right
Then we have this middle ground with trees and as you can see it's about two
twice the length of the stage so as
That moves from left to right and it lines the right edge up with the right edge of the stage
This is gonna go much faster because it has
more in which to move
Then we have our
final one
which is the running ground and the running ground is the longest one of all so it goes all the way out here and
If we scroll left to right. I'll show you how long it gets so it's about three
Maybe three and a half sizes
or a three and a half the length of the stage so you can make that as longer as short as you want to it's
Totally up to you
All right
so what we did with this if we want to see the
Movement of it is on the first frame you want everything on the left
side of the or the left edge of every graphic
To line up with the left side of the stage so as you can see on frame one
They're all kind of starting from the same left point then as it moves down the keyframe and we move it over
We can see that the running ground is moving much faster
because it's already way further out than the middle ground and then in the background so just because of the nature of the
Objects the link that they are they're automatically going to move faster or slower because of their length okay
so the first frame the left edge of each graphic lined up with the left side of the stage and
By the last frame and this makes it so that all the motion tweens can end at the same time
So I told you this is going to be a more simplified version of this background, so it's not as sophisticated
But this is much easier for people to understand the first time they're doing this
So for the last keyframe the very right edge of all the graphics
matches up with the right edge of the stage
So this is why we had to do different links so that they could each move faster or slower
So going back here
that's the basic technique all you have to do for each layer is convert them to a movie clip add a
Motion tween and then move them down, so let's see how we do that
I'll go ahead and create a new document again. I created 1280 by 720
For a YouTube dimension, and I'm choosing actionscript 3.0
now when you do this you can import your graphics by going to file import to stage or library or
You can get into your grave art graveyard assets and just pop them in there once I do that
It's it really important that you name your layers and keep them as organized as possible
And I'm going to zoom out so I more space for myself, and this is quite a bit bigger
And it doesn't really let me see all the graveyard which I really liked of this graphic
So I'm gonna make it a little bit smaller again
I want to give myself some top and bottom wiggle room and definitely some right and left wiggle room
So we'll probably do about there, and I want to keep the moon
That looks pretty good alright, so what I need to do with this is this graphic this background
Graphic should be converted to a movie clip, so we'll do convert to symbol call this, MC background
That makes it able to be motion tween and we're gonna see that in the next project
I have a mid build one so that you can see how to do all the motion tweens
So he also gives you all these different objects in pink files
Be careful not to import the PSD or the vector files that he gave you
We just want to put the objects in here for right now, and you can again
Just drag those and see I already made a mistake. Let me undo ooh
Hmm
okay, so let me highlight all those and
shift-click the background and do edit
Cut because you want to make sure the background is on its own layer by itself so this one. I will call it extras and
Then do edit paste in place
So these extras are the ones that you're going to build everything from so you can just spread them out
you don't want to take these and use them in your actual project because
What if you want to use more than one Bush or more than one box or?
More than one skull so what I do when I drag these up
Here is I hold the alternate option?
And I drag it up and as you do that it creates a duplicated copy so that you can keep the original assets there
so then you're going to want to pull in all of your tiles and bones and
once you do that it looks kind of really stacked and if I
Click and select and pull these out. You can see that these are each kind of puzzle pieces
That you have to put together
Down here and kind of line up and you can see on game art to decom how these all kind of work together
But they're all the exact same size so that they can line up and you can build your own world your own unique game
Even if you use the same tiles that I had you can mil build your own unique running ground
So I don't really have a lot of time in this tutorial video to show you
Me actually building my running ground but basically when we come in here
I will turn on that running ground as you can see we have all of our different
Objects that I've already created and all's we did for this and this probably isn't gonna line up very well
But I just wanted to show you how it would work so for this one
I'm gonna look through all my pieces that I built together and
I'm gonna grab that and do alt drag and try to line it up
And I don't know why that one is so darn big it is big. I don't like it
it's this one alright so alt drag and
bring that in there and you might need to zoom in and really try to line it up and
If it doesn't work use the arrow keys
nudge things so that one's not quite lining up, but
Okay, so you get the the idea?
I'm not gonna do it perfectly right now because we don't have time for that and
That one doesn't look like it lines up perfectly
so I'm going to go ahead and hit delete and
go back and look for my other tile set so it's probably going to be this one, so I'll alt drag that one and
Pull it up here. All right, so that gives me a good curve in which it can start moving up
And then I want to grab these two and alt drag up here
Okay, so this is not quite gonna line up because for some reason I think those tiles have been stretched out and transformed so just
know that yours probably won't do that or probably look right but
Okay, so that is my running ground now what we need to do is we need to make sure everything is on the right layer
So if I turn off the extras layer you can see all the ones I just built are on that extras layer
So what I can do is highlight any of those objects even if they were on the right layer
you can highlight and do edit cut and
Then go to the right layer click on the frame of the right layer and do edit paste in place
That'll put them in the exact same spot
But now all the running ground items are on the running ground layer and all of the extras are on the extra layer
so I'll lock and hide the extra layer and
We've already done the background. We've created
It as a movie clip
So now what we need to do for the running ground is we need to make this a movie clip so in order to do
this we're gonna highlight and
Make sure you click like highlight everything so just drag a marquee around every single object and then go to modify
Convert to symbol and call this MC
Running ground or whatever you want to call it
So I already have MC running ground when I first built this so I'll go ahead and just call this two because it won't let
Me have two with the same name so click OK and now that movie clip is able to be animated
So let's go ahead and do that with the middle ground trees
We'll hide that for a second make sure everything else is locked marquee select everything in that middle ground
modify convert to symbol
MC middle ground and I'll put two again because this will be my second version of this
All right, so last but not least we need to
Actually animate these so we can turn off those extras
And we're gonna do one at a time here so with the background. We will unlock it
Select it go to insert motion tween and on the first frame
We want it to be left edge flush with the stage and at the very last frame
We want to have the right edge flush with this stage, so if we zoom in on this one
We can make this a little bit smaller, okay
Let's move out a little bit more okay, so by this point
I want to move it over to the left now make sure you don't go up and down so if you hold shift
It'll prevent you from moving up and down
And then you can line up the right edge with the right side of the stage
So there is my basic motion for the background
So let's do it with each one of these so I'll click the middle ground well unlock it first
click that middle ground insert motion tween and
By this point in time again. I'm gonna hold shift as I move it to the left
And I'm gonna have it stick out a little bit from the right edge of the stage just so we don't get any weird
gaps happening okay last but not least we will change the running ground so frame 1
Click that object well unlock it again click that object insert
Mmm
All right insert motion tween
All right, so frame 1 it has the left edge flush with the left edge of the stage
And then by the end I want to hold shift and move this all the way down
So that it's pretty much flush with the right edge with a little bit of hang off there. Just in case
Alright, so that's pretty much the entire technique
Let's do a command return or control enter to see it, and you'll see it's absolutely crazy fast
That's because we only had 24 frames
This is 24 frames per second so our animation is one second long
To alleviate this we can make this longer by clicking on one of the motion tweens hold shift and then click
Click and click back again on that first motion tween so it's going to highlight all three tweens now you can drag
this out - whatever frame makes sense to you so if I go to
160 I can try it again and see if it's too fast if it's still too fast do the same thing and
Stretch it out until I get a good pace, but now I have that parallax scrolling side scrolling animation
With that great depth effect through the parallax that we have created with basic graphics and the length of those graphics