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

This tutorial will build on the previous two parts and introduce the principles behind screen wrapping e.g. if an item was to disappear of the left-hand side of the screen it will appear on the right-hand side.

Tutorial
To make things a bit more interesting we are going to make the actual 'play' area we are going to use a lot smaller than our movie size.
Apart from this we are really just going to work with what we already know.
So first we will create 2 shapes - one will be our character and the other will be our play area. Convert them into separate movie clips and name them appropriately.
Place them on separate layers and name the instance of your 'play' area - I called mine 'stage'. I also used a mask for my stage layer just to make things a bit tidier. If you want to see it without the mask just delete that layer.
Once again we will select our ball and add the following code:

onClipEvent (load) {
// sets our variables
movement = 5;
ballRadius = this._width / 2;
stageBounds = _root.stage.getBounds(_root);
}

We use the getBounds instruction to find the position of the four extremes of our stage. As the stage doesn't move we only need to do this once therefor we it in the onClipEvent (load) instruction.
The only new clever bit we will use is just recycle the various points of our stage as you will see in the next bit:

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.xMax <= stageBounds.xMin) {
this._x = stageBounds.xMax + ballRadius;
}
this._x = this._x - movement;
}
}

This checks, as before, if our ball has past the left-hand side of our stage.
If it has it makes its new position the right extremity of our stage (adding the balls radius just to make the animation a bit smoother).
The complete code for our ball is -

onClipEvent (load) {
// sets our variables
movement = 5;
ballRadius = this._width / 2;
stageBounds = _root.stage.getBounds(_root);
}
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.xMax <= stageBounds.xMin) {
this._x = stageBounds.xMax + ballRadius;
}
this._x = this._x - movement;
}
// looks for the right arrow key being pressed
if (Key.isDown( 39 )) {
if (ballBounds.xMin >= (stageBounds.xMax - ballRadius)) {
this._x = stageBounds.Xmin - ballRadius;
}
this._x = this._x + movement;
}
// looks for the up arrow key being pressed
if (Key.isDown( 38 )) {
if (ballBounds.yMax <= (stageBounds.yMin + ballRadius)) {
this._y = stageBounds.yMax + ballRadius;
}
this._y = this._y - movement;
}
// looks for the down arrow key being pressed
if (Key.isDown( 40 )) {
if (ballBounds.yMin >= (stageBounds.yMax - ballRadius)) {
this._y = stageBounds.yMin - ballRadius;
}
this._y = this._y + movement;
}
}

Because we have made everything quite generic you could now resize the size of our stage and the code will work (just remember to resize the size of the mask). This is the beauty of making all of your code more dynamic and less fixed.

Download Flash File