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

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

Step 3: Even better scrolling

In most space games the ground doesn't just keep scrolling. What happens is that the player starts on the far left of the screen, when they get about a third of the way to the right of the screen they stop moving right and the ground starts scrolling. This is also what happens in a lot of platform games. So lets improve the ground scrolling to work like this.

Most of the code for this will be in the spaceship clip events. As the spaceship location will determine when the scrolling starts and stops.

When to start scrolling

Select the spaceship and open the actions window (Window > actions).

Within the onClipEvent(load) code, exactly under the line laserCounter=1; type the following:

scrollx=_root.mainGround.ground._width/3;
scrollStart=false;

The first line sets up a new variable, scrollx. This variable will be the x-coordinate at which the spaceship stops moving right and the ground starts scrolling. We've made it one third of the width of the ground.

The second line sets up another new variable called scrollStart. This variable will be set to true if the ground should be scrolling and false if the ground isn't scrolling.

OK, now what we want to happen is if the spaceship has gone past scrollx then it will stop moving right and the ground will start scrolling. So, we will need to change the code for handling the right arrow key.
The current code should be:

if (Key.isDown(Key.RIGHT)) {
  this._x+=moveSpeed;

replace that with the following:

if (Key.isDown(Key.RIGHT)) {
   if (this._x<scrollx){
        this._x+=moveSpeed;
   } else {
        scrollStart=true;
   }

What we have done is introduce an if statement. If this._x (the current x-coordinate of the spaceship) is less than scrollx then the spaceship x-coordinate is increased - hence it moves right. However if that isn't the case, then we set variable scrollStart to true and don't change the spaceship x-coordinate.

When to stop scrolling

Now, we to need add in a whole new bit of onClipEvent code, dealing with a whole new event.

Underneath all of the clipEvent code for the spaceship (after the last } ) type the following:

onClipEvent (keyUp) {
  if (Key.getCode() == Key.RIGHT) {
      scrollStart=false;
  } 
}

This code introduces a new clipEvent, namely keyUp. This event occurs whenever the player takes their finger off a key. Its useful here because what we want is for the ground to scroll while you are holding the right arrow key down, but to stop scrolling when you take your finger off the right arrow key.

The method Key.getCode() gives the last key that was released. So the if statement see's if the last key that was released was the right key and if that's true then it sets our variable scrollStart to false.

OK, not much more to do now. All we need is to add some code so that the ground actually stops scrolling when scrollStart is false.

Close the spaceship actions window and select the mainGround movie clip.

Open up the actions window for mainGround (Window > Actions).
The current onClipEvent(enterFrame) code should be:

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

Modify the code so it reads:

onClipEvent (enterFrame) {
   if (_root.spaceship.scrollStart==true){
     this._x-=groundSpeed;
     if (this._x<= (groundStartx-ground._width)){
	    this._x=groundStartx-groundSpeed;
      }
   }
}

All that we have done is added in an if statement so that the code to move the mainGround only happens if the variable scrollStart is true.

A Tip: The line if (_root.spaceship.scrollStart==true) could have been written as just if (_root.spaceship.scrollStart)
if statements test a condition to see if its true. Generally they test if one variable is greater than or less than or equal to some other variable. eg: if (x>y). However when testing if something is true you can simplify the code.
So if (x==true) can be written as if (x). This is a really popular programming shortcut and is used quite a lot.
Just remember that if (x) means if x is true .

Finally, set the frame rate of your flash file to 25fps. (Choose Modify > Movie and type 25 in the frames per second box). A frame rate of 25fps should make the scrolling look quite smooth.

Test your movie, you should now find that the ground scrolls when you reach a third of the way across the stage. If you want to skip all the above typing you can download the following fla: tutorial2_partc.fla

Next >>