Jody Hall

My interest in Flash started mostly because of a Jib-Jab cartoon ("This Land") in 2004. I'm the author of a feature I call "Mazoons," which are a combination of mazes and cartoons. In 2002, I even had a book published, "Super Silly Mazes." I'm not a professional programmer, but making my mazes interactive by programming them with Flash became a hobby/obsession of mine, to the point where I have now learned more than I bargained for. Lately I'm working on a new website about Flash and Actionscript 3.0 called The Flash Connection.

View all articles by Jody Hall
We’ll add the code to wrap the screen to KeyMover's "moveClip" function.

First, however, go back to the fla file and make sure that the registration point of the ball MovieClip is in the upper left hand corner, as our programming statements in the class are going to assume that. If it's not, double-click the MovieClip in the library to edit it. All of the contained graphics should be selected automatically, but if not, make sure you select them all. Then, in the align panel (press CRTL-K for the panel if it's not already around), make sure the "to stage" button is selected. In the first row of buttons, click the align left and align top buttons. Done! Go back to scene 1, and we'll leave the fla file for now.

Now, back to the moveClip function in our KeyMover class. Let’s take on the right arrow key first. The logic goes like this: If the user is pressing the right arrow key, and if the _clip’s x property exceeds the width of the screen, change the _clip’s x property to the left side of the screen (which would be 0), minus the width of the _clip. The width of the screen is contained in stage.stageWidth. As before, we’ll use the _clip’s stage property to get a reference to the stage:
if (rightArrow) {
    _clip.x += speed;
    if (_clip.x > _clip.stage.stageWidth) {
        _clip.x = -(_clip.width);
    }
}

Save the class, go back to the fla and test the movie. You’ll get screen wrapping when you hold down the right arrow key. Pretty cool, eh? The coding for all the other arrow keys follow similar logic. Here's the entire KeyMover class, inlcuding the revised moveClip function, which now provides screen wrapping in all four directions:
package com.mysite.keyboard{
    import flash.display.MovieClip;
    import flash.events.KeyboardEvent;
    import flash.ui.Keyboard;
    import flash.events.Event;
    public class KeyMover {
        private var _clip:MovieClip;
        private var rightArrow:Boolean;
        private var leftArrow:Boolean;
        private var upArrow:Boolean;
        private var downArrow:Boolean;
        private var speed:uint = 10;
        public function KeyMover(clip:MovieClip) {
            _clip = clip;
            _clip.stage.addEventListener(KeyboardEvent.KEY_DOWN, keyPressed);
            _clip.stage.addEventListener(KeyboardEvent.KEY_UP, keyReleased);
            _clip.stage.addEventListener(Event.ENTER_FRAME, moveClip);
        }
        private function keyPressed(event:KeyboardEvent) {
            if (event.keyCode == Keyboard.RIGHT) {
                rightArrow = true;
            }
            if (event.keyCode == Keyboard.LEFT) {
                leftArrow = true;
            }
            if (event.keyCode == Keyboard.UP) {
                upArrow = true;
            }
            if (event.keyCode == Keyboard.DOWN) {
                downArrow = true;
            }
        }
        private function keyReleased(event:KeyboardEvent) {
            if (event.keyCode == Keyboard.RIGHT) {
                rightArrow = false;
            }
            if (event.keyCode == Keyboard.LEFT) {
                leftArrow = false;
            }
            if (event.keyCode == Keyboard.UP) {
                upArrow = false;
            }
            if (event.keyCode == Keyboard.DOWN) {
                downArrow = false;
            }
        }
        private function moveClip(event:Event) {
            if (rightArrow) {
                _clip.x += speed;
                if (_clip.x > _clip.stage.stageWidth) {
                    _clip.x = -(_clip.width);
                }
            }
            if (leftArrow) {
                _clip.x -= speed;
                if (_clip.x < -(_clip.width)) {
                    _clip.x = _clip.stage.stageWidth;
                }
            }
            if (upArrow) {
                _clip.y -= speed;
                if (_clip.y < -(_clip.height)) {
                    _clip.y = _clip.stage.stageHeight;
                }
            }
            if (downArrow) {
                _clip.y += speed;
                if (_clip.y > _clip.stage.stageHeight) {
                    _clip.y = -(_clip.height);
                }
            }
        }
    }
}


That concludes the KeyMover class. There are, of course, other refinements that could be made. For example, I usually prefer to use the Timer class instead of the ENTER_FRAME event to provide continuous action, as you can create motion that’s smoother and way less dependent on the movie’s frame rate, especially if you also use the TimerEvent class's updateAfterEvent() method. But I wanted to keep this tutorial fairly simple and basic, and if you want to, you can go on to create that. Or, hit me up for the class file, and I’d be glad to share it with you.

If you’ve made it this far in the tutorial, and you’ve actually created the two useful classes outlined above (TestClass doesn't count, haha!), here’s a little side benefit for you:. In your fla file that you used for KeyMover, let’s make the ball a member of both of the classes we’ve made. Change the code in the first frame of the fla to this:

import com.mysite.keyboard.KeyMover;
import com.mysite.mouse.ClipDragger;
var keyMover:KeyMover = new KeyMover(ball);
var clipDragger:ClipDragger = new ClipDragger(ball);


Test the movie. You’ll find that now the ball movie clip is being controlled by both classes! You can click and drag the MovieClip, and you can also move it around with the arrow keys. How cool is that? The MovieClip is totally separate from the code that controls it, and it’s being controlled by two separate blocks of code simultaneously!

I hope you’ve enjoyed this tutorial, and I hope I’ve helped spark your imagination as to the potential of using classes in your programming. Because this is truly just the tip of the iceberg! Happy coding!