Flash Game - Part 4

Adding the scoring and timer to part 4of the tutorial.

Again, time to open up the old fla. Insert the layers "labels" and "score". The score layer will contain the score and timer, and the labels layer - well, the frame labels. The labels layer is more for easy navigation more than anything else, and it's a good idea to use frame labels when referring to points in your movie, as frame additions and subtractions, won't affect the location you're pointing to. In smaller movies it's not a problem but in larger movies, it can be. Anyway, this is what your layers should look like:

In frame 1 of the labels layer, insert a frame label "start". In frame 2 of the labels layer, press F7 to insert a blank key frame, then insert the label "done".

Click in the first frame of the score layer. In the top left corner of the stage, insert some "static" text saying "Score:", then a dynamic text box next to it, with the Var box set as "score" and the text alignment set to left. Then next to that dynamic text box insert some more static text saying "Time:" and next to that insert a dynamic text box with the Var box set to "counter" and the text alignment set to left:

In the actions layers, click in the first frame and press F9. This should bring up the actions window. There should only be a stop(); there. Underneath this, add:

score = 0;
speedy.resetSpeedy();

resetSpeedy(); resets Speedy when you play the game again. Make sure you have given Speedy the instance name "speedy". You have to use speedy.resetSpeedy(); because the function resetSpeedy() resides in the time line of the movie clip "speedy".

Now, bring up the actions for a character, for example, the gold one. Insert the actions that are in bold:

on (press) {
_root.score += 10;
this.gotoAndPlay("gold1shot");
this.enabled = 0;
}

This adds 10 to the score when you shoot him.

You have to say _root.score, because the score variable exists on the main time line - _root - , not in the time line of the gold character movie clip.

_root.score += 10 is the same as _root.score = _root.score + 10

Note this also works with strings:

var name = "Joe"
name += " Bloggs"

name is now "Joe Bloggs". You can use trace (name); to see the result.

Trace(); is used to display a variable or value, etc. while testing a movie.

If you see me sometimes declare a variable "explicitly" with var, eg:

var name = "Joe"

and sometimes "implicitly" or on the fly, eg:

name = "Joe"

then it's just my sloppy coding. You should try to explicitly declare variables with var as it is good practice, and can avoid certain problems. There are also times when you'd want to use var, for example in "for" loops where you would just want a temporary variable to store the count, etc. - but that's another story.

Add the same code for the remaining characters, except Speedy. For Speedy use _root.score += 50 because you get a bonus for shooting Speedy.

Now, click on the "counter" dynamic text box - you should now be in the score layer. Press F8 to Convert to Symbol. Select Movie Clip and give it the name "timer". Press F9 to bring up the actions window. Enter the following actions:

onClipEvent (load) {
start = getTimer();
startCount = 90;
}
onClipEvent (enterFrame) {
current = (getTimer()-start)/1000;
if (current<startCount) {
elapsed = startCount-current;
counter = Math.floor(elapsed);
} else {
_root.gotoAndStop("done");
}
}

There are various ways of doing a simple count down timer. This is one of them, based on one I saw by Colin Moock. Note, getTimer(); is a built in Flash function that gives you the number of milliseconds elapsed since the movie ran. Try creating a new file and in the first frame put:

trace(getTimer());

and in the second frame put:

gotoAndPlay(1);

then test your movie and you'll see the value returned by getTimer(); increment.

Explanation:

onClipEvent (load) {
start = getTimer();
Gets the value of getTimer(); when the clip loads

startCount = 90;
How much you want to count down from.

onClipEvent (enterFrame) {
current = (getTimer()-start)/1000;
Every frame, current equals the value of getTimer(); subtracted by the starting value of getTimer() (start) divided by 1000 - because the value is returned in milliseconds, you need to convert it to seconds. If you included trace(current) in your code, you'd see the value increment.

if (current<startCount) {
Although the value of current is incrementing, if it's below the startCount value (90) then:

elapsed = startCount-current;
Elapsed equals startCount - 90 - minus the value of current. If you trace(elapsed) you'd see it decreasing like 89.234, 88.127, etc.

counter = Math.floor(elapsed);
Counter - the variable the text box will show - is elapsed, rounded down so the values appear as 89, 88, 87, etc.

} else {
_root.gotoAndStop("done");
If current is not less than startCount (90) then go to the frame labeled "done" on the main time line and stop.

Now, click in frame 2 of the score layer and press F6 to insert a key frame. Delete the "Score:" text, the "Time:" text and the time dynamic text box.

In the centre of the screen enter some text saying "Time up. Your score was:", then underneath that, move the score dynamic text box. Make sure the text alignment for the dynamic text box in this frame, is centred.

Insert some text saying "Play Again", with a button underneath it:

Put these actions on the button:

on (release) {
_root.gotoAndPlay("start");
}

Now if you remember, earlier you added resetSpeedy(); to the actions in the main time line. When you click the button to replay the game - you want speedy to be reset - and the resetSpeedy(); in the onClipEvent(load) in Speedy's actions won't do it, as that only works once, when the clip is loaded. When you restart the game - you're not reloading the Speedy movie clip - it's already loaded - so the onClipEvent (load) actions won't be repeated.

You should have the scoring and the timer working. Next tutorial will be on making bullet holes when you shoot.

Partners Flash Templates Free Web Templates FREE professional web templates Website templates Free Web Templates Graphic Design Tutorial Guide Flash Templates Flash Templates and Web Templates