Welcome To VertexTemplates.com Flash MX 2004 Tutorials Area - Keyboard Controlled Movement (Part 2)

Introduction
This tutorial will build on part one and introduce the principles behind keeping your movie clip on the stage.

GetBounds(_root)
What we want is the movie clip to continually check if it is leaving our movie area. To do this we will use the getBounds(_root) instruction.
ballBounds = this.getBounds(_root);
This creates a new object called ballbounds that contains the four coordinates of the left extreme (xMin), the right extreme (xMax), the top (yMin) and the bottom (yMax) of our movieclip.

The tutorial
Create a simple shape (a circle or a square). Select the shape and convert to symbol (found under the insert menu or simply press f8).
Name the symbol and select movie clip as behavior.
Select your movie clip and bring up the actions panel and enter (or copy and paste) the following code:

onClipEvent (load) {
// sets our variables
movement = 5;
movieWidth = 550;
movieHeight = 300;
ballRadius = this._width / 2;
}

This sets up our variables - for the dimensions of our stage and also the radius of our movie clip. If your movie clip had different dimensions for its width and height you would set up variables for them.
Now enter this code:

onClipEvent (enterFrame) {
// continually looks for the edges of our ball
ballBounds = this.getBounds(_root);
// looks for the left arrow key being pressed
if (Key.isDown( 37 )) {
if (ballBounds.xMin<= 0) {
this._x = 0 + ballRadius + movement;
}
this._x = this._x - movement;
}
}

Here we introduce the getBounds object. As it is within the onClipEvent (enterFrame) instruction it will continually look for the edges of our movie clip.
The rest is very similar to the code we used in Part 1. The only difference is that we have used an if statement to check whether the movie clip's left edge is on our stage. If it is not it changes the _x coordinate. However if the movie clip's left edge is on the screen it moves the movie clip accordingly.
Here is the complete code:

onClipEvent (load) {
// sets our variables
movement = 5;
movieWidth = 550;
movieHeight = 300;
ballRadius = this._width / 2;
}
onClipEvent (enterFrame) {
// continually looks for the edges of our ball
ballBounds = this.getBounds(_root);
// looks for the left arrow key being pressed
if (Key.isDown( 37 )) {
if (ballBounds.xMin<= 0) {
this._x = 0 + ballRadius + movement;
}
this._x = this._x - movement;
}
// looks for the right arrow key being pressed
if (Key.isDown( 39 )) {
if (ballBounds.xMax >= movieWidth) {
this._x = movieWidth - ballRadius - movement;
}
this._x = this._x + movement;
}
// looks for the up arrow key being pressed
if (Key.isDown( 38 )) {
if (ballBounds.yMin <= 0) {
this._y = 0 + ballRadius + movement;
}
this._y = this._y - movement;
}
// looks for the down arrow key being pressed
if (Key.isDown( 40 )) {
if (ballBounds.yMax >= movieHeight) {
this._y = movieHeight - ballRadius - movement;
}
this._y = this._y + movement;
}
}

The rest of the code replicates what we have explained already but for the other keys.

Next
In part three of our series we will look at screen wrapping.
Click here to Go on to the next Part of Keyboard Controlled Movement>