TUTORIAL: Building games in Flash 5
Part 2: Scrolling backgrounds.

Author: David Doull
Date: 10/04/01
Download source files: tut2.zip

Step 2: Let's get the ground scrolling.

The ground will scroll to the left of the screen, which is achieved by gradually reducing the x-coordinate of the ground movie clip.

We actually need two copies of the ground movie clip placed next to each other to achieve a smooth scrolling effect. The second copy is sometimes referred to as a buffer. This ensures that the ground always covers the stage. There is a little flash file below that demonstrates this:

press the play button to see it in action.

When the first copy of the ground has moved completely off the left of the stage both copies of the ground are reset back to their start positions.

Duplicate the ground

As shown above, we will need a second copy of the ground movieclip.
Which means we are going to duplicate the ground movie clip. So we will have two copies of the ground movie clip next to each other.

Instead of moving both of these movie clips to create our scrolling, what we will do is put them inside another movie clip (which we will call mainGround) and then we can move this parent movie clip instead of the two ground movie clips. In other words the mainGround movie clip will contain the two copies of the ground and we will just move mainGround instead of moving the two grounds individually.

The first thing we need to is to put the ground movie clip inside another new movie clip.

Select the ground movie clip and create a new movie clip (Insert > Convert to Symbol or F8). Give it the name mainGround and choose movie clip as the behaviour. Then in the instance panel set the instance name of this new movie clip to mainGround (as shown).

So what we now have is the ground movieclip inside of the mainGround movie clip. Why did we do that? Because we will now duplicate the ground movie clip within the mainGround movie clip. Then we will be able to move the two ground movie clips at once by just moving the parent mainGround movie clip. This will be less work for the flash player - as it only has to move one movie clip not two and hence will improve the speed of the scrolling. It seems like extra work for little pay off - but in building flash games the speed of the flash player is very important, so where-ever possible you should reduce the amount of code or movie clip manipulation that flash has to do.

We are now going to add in the clipEvent code for the mainGround movie clip. Select the mainGround movie clip and choose Window > Actions to open up the actions window then type the following.

Type the following code in the actions window.

onClipEvent (load) {

	ground.duplicateMovieClip("ground2", 100);
	ground2._x = ground._x+ground._width;
	groundStartx = this._x;
	groundSpeed=10;

}

This code is contained within a load ClipEvent, so it will be run when the mainGround is first loaded.

The second line of the code makes a duplicate copy of the ground movie clip and gives it the name ground2 and a depth of 100.
The third line sets the x-position of ground2 to the x-position of the original ground plus the width of the ground. This has the effect of locating ground2 exactly to the right of the first ground movie clip.

The fourth line creates a new variable called groundStartx which is equal to the x-position of the the mainGround movie clip. The purpose of this variable is to store the start location of the mainGround movie clip - we will use this variable later.

The fifth line groundSpeed=10; just sets up a new variable called groundSpeed with a fixed value of 10. This will be the number of pixels the ground moves per frame.

onClipEvent(enterFrame) code:

Directly below that type the following code:

onClipEvent (enterFrame) {

	this._x-=groundSpeed;
	if (this._x<= (groundStartx-ground._width)){
		this._x=groundStartx-groundSpeed;
	}


}

This is contained within an enterFrame onClipEvent so it will be run over and over again. Remember that the code within an enterFrame clipEvent is run everytime the movieclip enters a new frame. The mainGround movieclip has just one frame - but it is still constantly entering that one frame.

So what does it do?
The second line: this._x-=groundSpeed; reduces the x-coordinate of the ground by the value of groundSpeed. As we set groundSpeed to 10, then the code moves the mainGround to the left by 10 pixels.

The third line checks to see if the mainGround has moved so far to the left that the first ground movie clip is completely off the stage, if this is true then the fourth line sets the x-coordintate of the mainGround such that it is positioned back where it started.

But what are all those variables about?
this._x is the current x-coordinate of the mainGround.
ground._width is the width of the ground movie clip.
groundStartx is the variable we set up earlier. When the game starts the first ground exactly fills the stage. So this variable stores the x-coordinate at which the first ground fills the stage.

So groundStartx - ground._width is the start x-coordinate minus the width of the ground.

When the first ground is completely to the left of the stage its x-coordinate will be equal to its start x-coordinate minus its width. At this point the second ground will be exactly filling the stage.

When we reset the mainGround back to its start position on the stage we have to also subtract the groundSpeed because the mainGround still needs to be moving left by the amount specified in groundSpeed.

You can now test the scrolling ground. In the flash application the ground movement might look a little strange because in test mode the flash application allows you to see graphics that are off the stage - so test in a browser if you want to see only the stage.

OK, so now you have a nice scrolling ground below your spaceship.
If you haven't got it working you can grab the source file here.

Next >>