| 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:
|
|||
|
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. |
||||
|
|
||||
|
||||
