In this tutorial you'll extend the side-scrolling game that you started in the last tutorial. You'll improve the physics and add some animations.

1. Open your game in Flash
2. Eliminate the actionScript you wrote last time and add the following.

   var xmov=0;		// velocity in x direction is initially 0
   var ymov=0;		// velocity in y direction is initally 0
   var acceleration=1; 	// acceleration constant
   
   onEnterFrame=function () {
   //  check for input and adjust acceleration
   	if (Key.isDown(Key.RIGHT)) {
   		xmov += acceleration;
   	}
   
   	if (Key.isDown(Key.LEFT)) {
   		xmov -= acceleration;
   	}
   
   	if (Key.isDown(Key.UP)) {
   		ymov -= acceleration;
   		}
   	if (Key.isDown(Key.DOWN)) {
   		ymov += acceleration;
   	}
   
   //  this is where gravity should go
   //  this is where friction should go
   
   //  now move the background in the opposite direction of the ball
   //  so it looks like the ball is moving
   	bg._x -= xmov;
   	bg._y -= ymov;
   	
   }
   

   In this code the variables xmov and ymov are the speed in the x and y directions of the circle. Initially they are 0 but they increase and decrease depending on the user input.
   
   Test your game using the arrow keys to move the circle. The arrow keys now control the circles speed!
3. At this point the ball can fall below the horizon. Let's add the same hack we used last time to detect collisions. First add the following line at the top of the actionScript.

   var height = bg._y;
   

   After the line

   bg._y -= ymov;
   

   add the following.

   if (bg._y < height) {
   	bg._y = height;
   }
   

   Test out your game. The ball should now stop at the horizon.
4. Now we'll add gravity!. Replace the line

   //  this is where gravity should go
   

   with the following:

   //  add gravity
   	if (bg._y > height) {
   		ymov += gravity;
   	}
   

   Finally, add the following at the top of the actionScript:

   var gravity=0.5;  // acceleration due to gravity is 0.5 pixels/frame
   

   Test your game. Use the up arrow to make the circle rise above the horizon. If you stop pressing the arrow keys the circle will fall back to the horizon.
5. Now we'll add friction when the ball is rolling on the horizon. Replace the line

   //  this is where friction should go
   

   with the following:

   addFriction();
   

   This is a function call. Flash will look for this function and run its code. Add the function shown below to the bottom of your actionScript file.

   function addFriction(){
   
   	if (bg._y == height) {	// if the ball is on the horizon, add friction
   		if (xmov > 0) {  // the ball is moving to the right
   			xmov -= friction;  // slow the ball down
   			if (xmov <0)  {	   // but don't make it change directions
   				xmov = 0;
   			}
   		}
   		if (xmov < 0) {  // the basll is moving to the left
   			xmov += friction;  // slow the ball down
   			if (xmov > 0) {  // but don't change directions
   				xmov = 0;
   			}
   		}
   	}
   		
   }
   

   This function checks to be sure the ball is on the horizon then slows it down. The last thing we have to do is add the definition of friction. Copy the following line to the top of your actionScript.

   var friction=0.5;  // deceleration due to friction is 0.5 pixel/frame
   

6. Next we'll make the ball squash when it hits the horizon. First edit the circle movie clip symbol. Do the following:
   1. Create to more layers. Name the top layer labels and the second scripts. Rename the layer containing the circle "circle."
   2. Click on the first frame of the labels layer. Name the Frame "fixed".
   3. Select the first frame of all three layers then right click and insert frame.
   4. Select the second frame of the scripts layer, right click, and convert to key frame. Open the action script window. Add the following to the actionScript window:

      gotoAndPlay("fixed");
      

   5. Select the third frame of all three layers, right click, and insert key frame.
   6. Select the third frame of the label layer. Name the Frame "squash."
   7. Select the fourth frame of all three layers, hit F5 twice.
   8. Select the sixth frame of all three layers, right click and insert key frame.
   9. Select the fourth frame of the circle layer, convert to key frame. Select the circle and its boundary, choose modify->transform->scaled. Move top of circle down so it looks squashed.
   10. Now convert the fifth frame of the circle layer to a key frame. Copy the third frame to the fifth.
   11. In the sixth frame of the script layer add the following code:

       gotoAndPlay("fixed");
       

   12. Now replace the lines

       bg._y -= ymov;
       if (bg._y < height) {
       	bg._y = height;
       } 
       

       with the following

       if (bg._y != height || ymov < 0) {
       		bg._y -= ymov;
       		// collide if necessary with the horizon
       		if (bg._y < height) {
       			bg._y = height;
       			circle.gotoAndPlay("squash");
       			
       		}
       	}
       

   Test your game. The circle should squash when it hits the horizon.
   13. Now we'll make it bounce! First let's add a damping factor. In Scene 1, click on frame 1 of the script layer. Add the following to the top of your action script.

       var damping = .75;	// damping factor
       

       Next, go to the circle movie clip symbol and click on final frame of the script layer. Change the line

       gotoAndPlay("fixed");
       

       to the following

       _parent.ymov *= -_root.damping;
       gotoAndPlay("fixed");
       

       Note that the "_parent." prefix means, tells Flash to you the ymov and damping defined one level above!