Building An Interactive Hockey Game

You will need this file to complete this actionsripting project.

In this movie, we will script the hockey stick to play an animation as if it is being drawn back. When the cursor is released, the hocky stick will snap back into place, simulating a quick swing. Double click on the hockey stick to see the reset frame and the scrub the timeline to see how the swing works.

On themain stage you will see the puck_mc which will be scripted, and a button at what would be considered a point of impact where the stick will hit the puck.

1. First we need to initialize the variables we will use. The variables and their functions are as follows:

Initialize variables:

var power:Number;
var hitAmount:Number;
var trackMouse:Boolean;
var mouseStart:Number;
var mouseEnd:Number;

2. Click on the button. We need to add an event handler for when the button is pressed. When the button is pressed, we want the puck to reset its position, reset power, and the powerlevel_txt text, as well as reset hitamount. Since pressing the button will start the process, we also want to turn on a switch, trackMouse, by setting it to the boolean true value. When this switch is on, we need to measure where the mouse is, and where it goes, so we will set mouseStart to the _mouse position (x position of the mouse)

Button actions:

on (press) {
puck_mc._x = 555;
puck_mc._y = 135;
power = 0;
powerlevel_txt.text = power;
hitAmount = 0;
trackMouse = true;
mouseStart = _root._xmouse;
}

3. We need to add an additional action to the button. We want the button to trigger the swinging of the hockey stick. Add the following script to the bottom of the button's action script.

on (dragOut) {
stick_mc.gotoAndPlay ("swing");
}

4. As the mouse moves to the right, we then must be able to handle a release of the mouse that will trigger the hockey stick striking the puck. Add this script below the last:

on (releaseOutside) {
stick_mc.gotoAndStop ("reset");
mouseEnd = _root._xmouse;
hitAmount = mouseEnd - mouseStart;
trackMouse = false;
}

5. Now it's time to set the Puck actions. Click on the puck_mc instance on the stage. Setup an onClipEvent(enterFrame) event, since enterFrame events run at the same as the frame rate of the movie. In this movie, our frame rate is 20 frames per second so the onClipEvent(enterFrame) event handler will play 20 times a second. Add the following script which, when hitAmount is greater then 3, the puck_mc will move left, with a decreasing _x property.

puck_mc actions

onClipEvent (enterFrame) {
  if (_root.hitAmount > 3) {
    this._x = this._x - 10;
    _root.hitAmount = _root.hitAmount - 3;
  }
}

5. We then can set this movie clip to report power if our boolean trackMouse variable reports true. Add the following to the scripts on the puck.

onClipEvent (mouseMove) {
   if (_root.trackMouse == true) {
    _root.power = _root._xmouse -_root.mouseStart;
    _root.powerlevel_txt.text = _root.power;
   }
}

6. Test your movie. It will do as we set out to do. Review your scipts. I have created a podcase of this type of script posted at http://www.globalipod.com (coming soon)

The adventurous can keep score depending on the value of mouseEnd (conditional statements) and counting 10 rounds to accumulate a final score. This I am leaving for another tutorial.:)