A game with "Apple Catch" like gameplay. (part 1)

Setting up the game:

  1. Open a new Flash document and make the document setup 600 pixels wide and 400 pixels high. Also set your framerate to 30 frames per second.

  2. Our game will need 4 distinct screens, in this case we need an introduction/splash screen, an instructions screen, a screen for the actual game, and a game over screen. So let's add enough keyframes to our timeline to handle this. At this point we have only one layer on our timeline and four keyframes. Label the first keyframe "introduction", the second keyframe "instruction", the third keyframe "game" and the fourth keyframe "game_over".

    You can change the name of the frame in the Properties panel.

  3. Introduction Screen: Here we'll want a graphic to represent what the game is all about. We will also need some buttons. In this case we will want to have an "Instructions" button, and a "Play Game" button. To create a button, from the main menu, select "insert", then "New Symbol". Now select "button" and give your button a name and hit "OK".

    Now we are inside of our new button. This button will be the "Play Game" button. Each button has four states, however only three are visible when you publish your Flash movie. "Up", Over", "Down" are visible and "Hit" is not.

    The shape that you define in the "Hit" frame is the "clickable" area of that button. Remember, once you've design your first state of the button, you can click that frame in the timeline and copy it and paste it in the other frames/states and then make adjustments to those other states instead of creating it each time. Design the button as you wish, once you've created all four states we are ready to move on and build another button. The next button will be our "instructions" button. Once this button is finished it is time to create a graphic for our introduction screen.
  4. Introduction Screen Graphic(s):: We want to make a graphic that we will later place on our intro screen. From the main menu, select "Insert", then "New Symbol". Select "Graphic" and give it a name and hit "OK".

    Now we are inside of this new graphic element. Design it so it fits the size of your Flash document, 600px wide and 400 px high. Set the x,y origin at 0,0 which means it will be in the top left of your graphic. Name the layer we have now in the graphic "background". Now with the rectangle tool, make a rectangle that is 600px X 400px with the top left at 0,0. This shape can be a solid fill or a gradient. Now, lock the background layer, and add a new layer and start drawing. You can use as many layers you want to help keep track of all the elements in your graphic. For example, a cloud can be on it's own layer, a tree on it's own layer, etc... Also, you can incorporate your title into this graphic. Put that on it's own layer(s).

    Once you've completed this graphic, navigate your way back to the main timeline by clicking on the button (clickable area) labeled "Scene 1"

  5. Placing the Introduction Screen Graphic: In the only layer on your timeline, change it's name to "art". Click on the first frame in the timeline called "intro". Open up your Library and drag the graphic you just created for the intro-screen onto the stage. Align it to the stage by setting it's x and y coordinates to 0,0 (the top left).

    The image to the left only shows the upper left corner of the placed graphic.

    This shows where to adjust the X and Y coordinates.
  6. Adding buttons: Add a new layer to the main timeline and a keyframe in that layer for each frame that exists in the "art" layer. Click on the first frame of the "buttons" layer in the main timeline and drag the "Instructions" and the "Play Game" buttons onto the stage and position them as you wish.

  7. Once you have everything placed on the Introduction Screen ("Play Game" and "Instructions" buttons, your graphic(s) and title treatment as well as any additional information you would like to include, most likely your name so you can take credit for your work.), you are ready to start working on the other three frames on the main timeline and the elements needed for them.
  8. Instructions Screen: Here you will want to create a graphic for the background as well as two buttons. One button will be needed to return to the "introduction" screen, and the other will be to proceed to the "game" screen. When you've finished making these items, drag the buttons onto the stage, but be certain you clicked on the second frame in the buttons layer so everything ends up on the right frame, in the right layer.

    Also, drag the background graphic to the stage and make sure it is on the art layer in the second frame. Now, proceed to the next step.

  9. Game Screen: You will need the following graphic elements; the falling object(s), your background, and your item that you will use to collect the falling objects. Create the background graphic following the same procedure as your Introduction Screen Graphic. Now for the falling object(s) and your object you'll use to collect the following objects use the following method to create them. First, from the main timeline (make sure you are not inside any library item at this time), from the main menu, select "insert", then "New Symbol". Now select "Movie Clip" and give your button a name and hit "OK". Draw each of the objects just as you would draw a graphic item. The only difference between the "Graphic" and "Movie Clip" properties are that a "Movie Clip", which we will refer to as an MC from here on out, can accept code and can have as many frames with nested elements such as sound, other MCs, and graphics. We will get more in depth on this later. Once these items are completed, only drag the background graphic to the stage. be sure you have clicked on the frame 3 of the art layer. Do not do anything with your two MCs yet.

  10. Game Over Screen: Here you will also want to create a background graphic and one button that will be used to return to the "introduction" screen. When these elements are complete, drag them from the library to the stage. Make sure they end up in the correct frames, on the correct layers. Buttons on the buttons layer in the fourth frame.

    Background art will be on the art layer in the fourth frame.

  11. When all of the above steps are complete. We will move on to the next lesson.