Help Files and Tutorials for Computer Users
Game Tutorial

Home
Start by opening a new Flash document. Select the Modify menu and set the Document Properties to 650 px X 400 px and the default frame rate of 12 fps. Leave the background colour as white. Click OK.

Zoom out until you can see the entire stage.

 

Fig. 1

 

Right-click or double-click the Layer name and re-name it to game.

Next, create a button:

  • Draw a rectangle with the Rectangle Tool
  • Type "Click to Play" with the Text Tool
  • Drag the text over top of the rectangle

 

Fig. 2


Using the Arrow Tool, drag a box completely around the text and rectangle. With both selected go to Modify --> Convert to Symbol and select Button.

Select Export for ActionScript.

Name the button btnPlay.

Fig. 3


If Properties is not displayed go to Window --> Properties, or click the black arrow beside the word Properties at the bottom of the screen.

In the lower left corner of the screen, (green arrow), type "begin" in the Frame name box.

On the Timeline at the top of the screen, (red arrow), right-click the game Keyframe and insert about four more frames. You should see the word begin appear with a small red flag beside it.

Fig. 4


Right-click on Frame 6 and insert a Blank Keyframe. Insert four more frames, (not Keyframes). Name this frame play.

Right-click on Frame 11 and insert a Blank Keyframe. Insert four more frames, (not Keyframes). Name this frame lose.

The buttons you create will allow the program to jump from one frame to another. Most of the game activity will take place in the "play" frame.

Fig. 5

Right-click in the Layers area and add a new layer.  Name it background.

Right-click on Frame 6 of the new background layer and add a Blank Keyframe.

The keyframe will extend all the way to Frame 15, but we don't want that. Right-click anywhere between Frame 5 and 15 and delete the extra frames so that it ends at Frame 10.

Fig. 6


With Frame 6 of the background layer selected, go to File --> Import --> Import to Library and select the image you are going to use for you game background.

If you don't see the Library at the right side of the screen, go to Window --> Library, or click Ctrl + L.  You should see your imported background image, as well as the button you previously created.

Click here to download a 'field' image.

Fig. 7


Drag the image from the Library onto the canvas. Line it up with the canvas as close as you can, then "fine-tune" it with the X and Y position coordinates at the lower left of the screen as shown by the red arrow.

If your image doesn't fit exactly, you can change it's dimensions with the W and H settings, but these changes should be minimal, or your image may appear "skewed".

Fig. 8


Select Frame 11 of the game Layer. Refer to Fig. 2 and Fig. 3 if you need help. The button caption will read "Restart".

Using the Arrow Tool, drag a box completely around the text and rectangle. With both selected go to Modify --> Convert to Symbol and select Button.

Select Export for ActionScript. Name the button btnRestart.

Feel free to customize your captions and buttons as you see fit.

Make sure the button is selected and type "btnRestart" in the Instance Name, (red arrow).

 

Fig. 9


Select Frame 1 in the game Layer, then select the Action panel, (or click F9). Make sure that game: Frame 1, (begin) appears under Current Selection.

Type in the code as shown below. Remember that the "//" are for comments.  Use comments to remind yourself what is happening in each area of the ActionScript.  You can also use // to temporarily "turn off" lines of code that you may be experimenting with.

Fig. 10

This selection tells the program that when the button named "btnPlay" is clicked, it should go to a Frame named "play". In other word, when the user click the button that say's  Click to Play , you will advance to Frame 5 and run whatever code comes up there. (We haven't put anything in there yet).

You should be able to test what you have so far. Go to Control --> Test Movie, or click Ctrl + Enter keys.

* If it doesn't work, go back to Frame 1 on the game layer and make sure btnPlay appears in the Instance Name at the bottom of the screen.


Home

Click to continue...