This Flash example counts the number of orange buttons the user clicks on, and when that number reaches 4, it moves the timeline to the "Win" frame. If the user clicks on any blue button, the software immediately sends the timeline to the "Lose" frame.

the timeline and graphics

Before coding, you need to create the timeline and graphics elements so you have something to work with and a place to put the code.

• a layer for the actions, and layers for the graphics
• on the first frame
  • add a label of "start" so the code can return to this frame
  • a title & instructions
  • 6 orange buttons, 6 blue buttons - to keep things simple, make these buttons rather than movieClips. Note: When creating a new application that has many of the same elements, it's a good idea to start with just a few until you are sure the code and design are really going to work. Often, after some experimentation, you will find you want to take a different approach, and have to redo things.
• create a keyframe at frame 5
  • add a label of "win" so the code can return to this frame
  • a title telling the user they won
  • a button to go back to the start
• create a keyframe at frame 10
  • add a label of "lose" so the code can return to this frame
  • a title telling the user they lost
  • a button to go back to the start

   

creating the script : 

step by step

The first step in creating this small game is defining the basic logic of the interaction. Something like this:

1. When the movie starts
   1. stop the timeline (so the movie doesn't move on to the win or lose frames)
   2. set a counter to 0
2. Each time the user clicks on an orange circle
   1. increment the counter by 1
   2. if the counter is greater than or equal to 4, goto the "win" frame
   3. for extra credit, change the alpha property of the clicked circle to zero to make it disappear, and be disabled. Note that only movieClips have the alpha property, so you'll have to change the buttons to movieClips which means the code changes to access the counter variable (e.g. _root.scorecount).
3. If the user clicks on a blue circle
   1. go immediately to the "lose" frame
4. From either WIN or LOSE frames, allow the user to start the game over again

and build up the script

Now that we have the basic logic established, we can start solving each part one at a time.

the counter

Usually, initializations are put in the first frame of the movie, in an Actions layer. First, the code needs to stop the main timeline so we stay on the frame where the game it. Then you need define the counter variable, and create a statement that initializes it to zero.

stop();
var scoreCount = 0;

the counter

We want the counter to be incremented every time the user clicks on an orange button. The click is an event, so this means we need an event handler on the button to react to the user's click. The code to do this looks like this:

on (release) {
    scoreCount = scoreCount + 1;
}

There are simpler ways to do this increment:

scoreCount += 1;   // add the amount on the right to the operand on the left side
scoreCount++;      // add 1 to the variable

Where should this code go? Well, what object(s) do we want to increment the counter? That's where the code should go. I.e. in each orange button.

to see if the counter is greater than or equal to 4

After the counter is incremented, we want to check to see if the counter is 4 or greater. This is done with a conditional.

if (scoreCount >= 4) { code_to_run_if_true }

the WIN frame

If the counter is >= 4, we want to move the timeline to a frame with the wining text on it. The best way to do this is by labeling the winning frame. We'll label it "win". So now the conditional statement becomes:

if (scoreCount >= 4) {
    gotoAndPlay("win");
}

together

We need to put the above code fragments into one set of statements:

1. event handler
2. counter increment
3. conditional

All of this code together would look like this:

on (release) {
    scoreCount++;
    if (scoreCount >= 4) {
        gotoAndStop("win");
    }
}

the LOSE frame, if the user clicks on a blue button

We need to handle what happens when the user clicks on a blue button, which is to send them directly to the LOSE frame. So on each blue button, our event handler looks like

on (release) {
    gotoAndStop("lose");
}

by returning to the start frame

On the WIN and LOSE frames, we need a button that returns the user to first frame where the game starts. This looks like:

on (release) {
    gotoAndStop("start");
}

the code with functions

Rather than putting the same code on every button, it would be better to centralize the code in one place. This is especially helpful if we want to make a change in how things work (e.g. change the number of buttons to click to win). To do this, we would use a function, and call the function from each button.

Like variable initialization, a common place to put the function definitions is in the first frame of the movie. So we could create a function like this:

function scoreIt() {

    scoreCount++;
    if (scoreCount >= 4) {
        gotoAndStop("win");
    }

}

This takes the same code we had in each button, and collects it inside a function. Now the only code we need to put in the orange buttons is the following:

on (release) {
    scoreIt();
}

all materials on this web site © copyright 2004, Philip van Allen