In this tutorial you'll start building a simple side scrolling games.

1. Open Flash and start a new Flash movie.
2. First we'll create a simple character for the player to control. Use Insert->New Symbol then select Movie Clip and call it Circle (instead of Symbol 1). In the stage create a filled circle.
3. Go back to the main stage by selecting Scene 1 (above the timeline).
4. Click on the Library pane on the right. (If it is not there, select Window->Library and it should appear.) The Circle movie clip should be available.
5. Drag the icon for the Circle onto the stage. In the properties section name the instance circle.
6. At this point you can test your "game" by selecting Control->Test Movie. You should see a flash movie of your circle!!!
7. OK, so it's not that exciting. Next we'll make the circle move. First, rename the layer containing the circle as circle. Now add a another layer and rename it scripts. Select the scripts layer and then select the Actions pane on the right. It should open a window that you can type in. (If not, use the pulldown menu on the top right of the panel to change to expert mode.) Copy the following code to the window.

   onEnterFrame=function () {
   				   
   	if(Key.isDown(Key.RIGHT)) {
   		circle._x -=3;
   		trace(circle._x);
   	}
   
   	if (Key.isDown(Key.LEFT)) {
   		circle._x +=3;
   		trace(circle_x);
   	}
   
   }
   

8. Test your game now using the left and right arrow keys to move the circle. The "x-position" of the circle will also print out whenever the circle moves.
9. You may want to eliminate the "trace" commands, which cause the messages to print. Or you can put a double slash in front:

   // trace(bg.x);
   

   which comments out the line.
10. Next we'll create the background for the game. Download the file background.JPG. In Flash use Insert->New Symbol then select Movie Clip and name it BG. You'll get a new stage to create the background. Use File->Import to Stage to import the background image. Position the bit map so that the upper left corner of the image is at the center of the stage.
11. Select Scene 1 to return to the main stage. Make a new layer called background. Select the layer then drag the icon for the BG movie clip from the library onto the stage. Call this instance bg. Position the circle so that it is sitting near the left of the background on the horizon. If the background obscures the ball, move the background layer below the circle layer. (In other words, grab the panel where you named the layer and move it down.)
12. Test your game again. The ball should move across the horizon.
13. Now... what you really want to do is keep the ball ball in the center of the screen and make the background move. See if you can figure out how to do that!! (HINT: bg._x is the x-position of the background bit map.)
14. Now let's make the ball jump. First add code so that the ball moves up 5 pixels when the player hits the up arrow. Hint: (Key.UP will be useful. Also, (0,0) is at the top left corner and y increases as you go down!)
15. Test your game. Does the ball rise when you hit the up arrow?
16. Eventually we'll add gravity and collision detection so the ball falls until it hits the horizon. For now we can simulate the effect as follows. Add

    var height = circle._y;
    

    to the top of the actionscript file and the following at the beginning of the OnEnterFrame function:

    	if (circle._y < height) {
    		circle._y +=1;
    	}
    

17. Test out your game.