game media . jonah warren

Design Lab 5: Game Media [ Monday 6pm - Rm 908]

instructor: Jonah Warren
email: jonah AT feedtank DOT com
url: http://www.playfulsystems.com/teaching/2006/gamemedia

Keyboard Input, Event Handlers, and HitTest
(September 25th, 2006)

The following program shows you how to use the movie clip's onEnterFrame event handler to repond to keyboard input. The FLA file consists of the following:

A Movie Clip containing a black rectangle placed on the first frame, with an instance name of "box."
The following code on the first frame:

stop();

// creating an event handler (onEnterFrame) for box
box.onEnterFrame = function() {
	// checking to see if the left or right buttons have been pressed
    if(Key.isDown(Key.RIGHT)) {
        box._x += 5;
    }
    if (Key.isDown(Key.LEFT)) {
        box._x -= 5;
    }
}

[ First click inside the rectangle, then press the left and right arrow keys ]

Additional Resources:

Event Handlers for Multiple Movie Clips
[ Download the FLA ]

The following program shows you one way to animate multiple movie clips, using one event handler on the first frame. The FLA file consists of the following:

A Movie Clip in the Library, containing a black rectangle, which is Exported to Actionscript (using the "Linkage..." option in the Library menu. Its Actionscript Identifier is named "box."
The following code on the first frame:

stop();

// creating boxes
var boxes:Array;
boxes = new Array(3);
for(var i=0;i<3;i++) {
	boxes[i] = attachMovie("box", "box" + i, _root.getNextHighestDepth());
	boxes[i]._x = random(200) - 25;
	boxes[i]._y = random(150) - 25;
}

// main loop (gets called over and over again)
onEnterFrame = function() {

	for(var i=0;i<3;i++) {
		// moving boxes down
		boxes[i]._y = boxes[i]._y + 0.5;

		// reseting the boxes once they move off the screen
		if (boxes[i]._y > 150) {
			boxes[i]._y = -25;
		}
	}

}

[ Click refresh in your browser and see how it affects the movie ]

Another way to accomplish the same thing is to use the following code in the first frame (with the same FLA setup). How is this different from the above code?

stop();

// creating a boxes array that holds 3 movieclips
var boxes:Array;
boxes = new Array(3);
for(var i=0;i<3;i++) {
	boxes[i] = attachMovie("box", "box" + i, _root.getNextHighestDepth());
	boxes[i]._x = random(200) - 25;
	boxes[i]._y = random(150) - 25;
}


// creating an event handler (onEnterFrame) for each movieclip in the boxes array
for(var i=0;i<3;i++) {

	boxes[i].onEnterFrame = function() {
		// moving boxes down
		this._y = this._y + 1;

		// reseting the boxes once they move off the screen
		if (this._y > 150) {
			this._y = -25;
		}
	}
}

Additional Resources:

Collision Detection (HitTest)
[ Download the FLA ]

The following program shows you how to the hitTest function to detect if two movie clips are touching:

A Movie Clip containing a black rectangle placed on the first frame, with an instance name of "box."
A Movie Clip containing a large red rectangle placed on the first frame, with an instance name of "box_target."

stop();

// the program's main loop
onEnterFrame = function() {
	// using hit test to see if box and box_target hit each other
	// if they do it, go to a frame labeled "hit" in the box MC
	// otherwise go to a frame called "nohit."
	if(box.hitTest(box_target)) {
		box.gotoAndStop("hit");
		trace("Hit.");
	}
	else box.gotoAndStop("nothit");
}


// creating an event handler (onEnterFrame) for box
box.onEnterFrame = function() {
	// checking to see if the left or right buttons have been pressed
    if(Key.isDown(Key.RIGHT)) {
        box._x += 5;
    }
    if (Key.isDown(Key.LEFT)) {
        box._x -= 5;
    }
}

[ First click inside the rectangle, then press the left and right arrow keys ]

Additional Resources: