A sample game

Time to pull together the things we've learned in this section to build the bee game shown on an earlier page. Open beegame_start.fla (which already has bee and flower movieclips) and save it as beegame_final.fla. The first thing to do when designing a game, or any Flash movie, is to think about what you need. For this game

The bees must be individually addressable (so they must be named movieclip instances)
We must be able to tell when a bee is touching a particular flower (so that flower must be a named movieclip instance)
We need to keep track of the score while the game is running (so we need a variable of type Number on the main timeline)
We want to display the score as the movie is running (so we need a dynamic textfield)
We need to keep track of whether a bee is moving or stopped (so each bee instance will have a boolean variable (property) to indicate that)

Use event handlers to make controls

The first thing to do is set up a control button for one of the bees. To do that, we need one movieclip instance, with code for any of the mouse-related event handlers we looked at on the event handlers page defined. When Flash runs a movie in which any of the mouse-related event handlers for a movieclip instance have been defined, it will make a hand cursor appear over that instance when the user's mouse goes over it, indicating that it is a (button) control.

Add a controls layer, drag an instance of beecontrol onto the stage and name it bee1control_mc. Define the onRollOver and onRollOut event properties for it (by assigning functions to them), to make the control grow when moused over and shrink when moused off. Remember, this code goes in frame 1 of the main movie, not in or on the control movieclip itself! Add an actions layer and put this in it:

// handler for bee1 control on rollover
bee1control_mc.onRollOver = function() {
   // expand to 120% of original size
}

// handler for bee1 control on rollout
bee1control_mc.onRollOut = function() {
   // return to original size
}

Test the movie in the IDE (cmd-Enter, PC: ctrl-Enter) -- you should see the bees flying (because they are movieclips and nothing has told them not to fly), and you should see a hand cursor when you mouse over the control. Even though we have put only comments describing what we want to do in the onRollOver and onRollOut functions, the fact that a function has been declared and assigned to one or more mouse-related event properties of bee1control_mc is enough to let Flash know that it is a (button) control. Let's add the actual code now:

// handler for bee1 control on rollover
bee1control_mc.onRollOver = function() {
   // expand to 120% of original size
   this._xscale = 120;
   this._yscale = 120;
}

// handler for bee1 control on rollout
bee1control_mc.onRollOut = function() {
   // return to original size
   this._xscale = 100;
   this._yscale = 100;
}

A note about Registration point vs Transformation point

When you test the movie, you'll notice that the control expands and shrinks as it should, but it does so from its upper left corner, not from the center. That's because the movieclip was created with an upper left registration point, so we need to change it to be a center registration point. Double-click the control on stage (or the icon in the library) to go into the movieclip's own timeline. Use the align panel as shown in the picture below to center the movieclip's registration point. Test again to see if it works correctly.

Define what will happen when the control is clicked

Set up the framework for the bee control by adding this code to frame 1 of the main timeline:

bee1control_mc.onRelease = function() {
   // check to see if the bee is flying or stopped
   // if stopped, start the bee flying again
   // if not stopped, stop it now and check for a flower hit, 
   // incrementing the score if one occurred
}

Now let's add code for each of the things described in the comments. First, it looks like we need an if/else statement to check whether the bee is flying or stopped, and do something appropriate in either case. We'll add that framework and adjust the comment indentation to match (adding a couple more comments to be a bit more specific):

bee1control_mc.onRelease = function() {
   // check to see if the bee is flying or stopped
   if (bee1_mc.stopped) {
      // start the bee flying again
      // tell the program the bee is flying
   } else {
      // stop it now and check for a hit, 
      // incrementing the score if one occurred
      // tell the program the bee is stopped
   }
}

Before we put the final code in, we need to make sure eveything we'll need is created and named on stage. Add a score layer and put a dynamic textfield in it named score_txt. Make its content 0. Select one of the flower movieclips on stage and name it flower_mc. Two instances of flying bee movieclips are already on stage, with instance names bee1_mc and bee2_mc, so you don't need to do any more with them. Add this line at the beginning of the code:

var score:Number = 0;

to declare a variable on the main timeline named score, of type Number, and assign an initial value of 0 to it.

We're finally ready to put in the code to do what the comments say:

bee1control_mc.onRelease = function() {
   // check to see if the bee is flying or stopped
   if (bee1_mc.stopped) {
      // start the bee flying again
      bee1_mc.play();
      // tell the program the bee is flying
      bee1_mc.stopped = false;
   } else {
      // stop it now and check for a hit, 
      // incrementing the score if one occurred
      bee1_mc.stop();
      if (bee1_mc.hitTest(flower_mc)) {
         score = score + 20;
         trace(score);
      }
      // tell the program the bee is stopped
      bee1_mc.stopped = true;
   }
}

Two things to note in the code we added: we're using a variable named stopped on the bee1_mc timeline to indicate to the movie whether the bee1 movieclip is stopped or playing. We used a method of the MovieClip class, hitTest, to determine whether bee1_mc was touching flower_mc. Check the Flash help (under MovieClip class in the Actionscript Reference) to find information on the syntax for hitTest.

Test the movie and you'll see that we're nearly there. Click the control to stop/start the bee and notice that if you stop it when any part of it is touching any part of (the rectangular border around) the flower that you named flower_mc, the Output panel will show the score being incremented by 20. The only thing that remains is to add a line to update the contents of score_txt whenever the score changes. Replace the trace statement with the following one, which assigns the variable score's value to the text property of score_txt (text is the property that is always used to read from and write data to an instance of the TextField class):

      score_txt.text = score;

That's it! bee1 is now set up to respond exactly as in the game we first showed. You can add a control for bee2, and cut and paste the code above, changing all bee1's to bee2's to make the game work for two bees. In the example game, we had the score increment by 30 for the second bee, just to show that they can be different. Open beegame_final.fla in the class directory (link at right under Files) to see the final game code.