Flash: Keyboard and Mouse Movement

**chili5** · 08-27-2009, 09:18 AM

Keyboard Movement

My last tutorial was on Graphic Primitives. Now we are going to look at how to make graphics move. I'm also going to show you how to draw stuff on the stage, convert it to a symbol and use ActionScript code to make it do something.

Open up Flash and go to Window to create a new document. We need to show the toolbox so you have the tools you need to draw something. Press Ctrl-F2 to make the toolbox appear. If you have used paint then most of this will be visible to you. I like to draw faces so I am going to draw a smiley face.

You can draw whatever you want. At this point you need to use these tools to draw something on the stage. My drawing is shown below:

Now, press V and you will have the selection tool selected. You will now select everything that is part of your drawing. Then you are going to right click on it and go down to convert to symbol. In the bottom corner is a button that says "advanced". You need to click on that.

The two things you need to do is change the name of the symbol and check Export for ActionScript.I am going to call mine Smiley. You can leave th4e class name the same. Just note what it is. You need to know the class name for your ActionScript code. In the popup click Okay.

You now have the Smiley set up for use in ActionScript code. You now can clear your stage. The rest of what we are going to do is in the action script code. Go to frame1 in layer1 and press F9. This will open the Actions panel.

Adding a Symbol via AS

First we need to create an instance of the class. Then we will set a location and add it to the stage.

Code:

var smiley:Smiley = new Smiley();

That is all you need to create a new Smiley. Now we can set a location and add it to the stage.

Code:

smiley.x = 20;
smiley.y = 20;

stage.addChild(smiley);

First we set the smiley to appear at (20,20) and then we add it to the stage. Note, you do not have to include stage you could just use addChild but I find it makes more sense to say what we are adding the smiley to.

When you run the movie now, you should see a smiley on the stage.

Adding an Event Listener

We need an event listener, to listen for a key press. We will add the event listener to the stage so when the user presses a key the smilye will move.

Add this code:

Code:

stage.addEventListener(KeyboardEvent.KEY_DOWN,move);

When a key is pressed the move function is called.

Here is the move function:

Code:

var nKey:int = e.keyCode;
	
	switch (nKey) {
		case Keyboard.LEFT:
			smiley.x -= 5;
			break;
		case Keyboard.RIGHT:
			smiley.x += 5;
			break;
		case Keyboard.UP:
			smiley.y -= 5;
			break;
		case Keyboard.DOWN:
			smiley.y += 5;
			break;
	}

This code takes the key code (an integer that represents which key was pressed) and checks it against the four directions. We then change the x and y coordinates to make the smiley move.

This isn't really difficult and it makes sense when you read it. However, this concept is what you would use in a game of some sorts.

Mouse Movement

We are going to do one more thing and that is mouse movement. When the user moves the mouse we are going to show the mouse coordinates on the screen.

Add a label to the stage, call it lblMouse. Using the properties window make the width 200 and in the components inspector (remove all the text). The label should appear empty. Now, we need to add an event listener to the stage to listen for mouse movements.

Code:

stage.addEventListener(MouseEvent.MOUSE_MOVE,mouseMove);

Whenever the mouse moves over the stage (basically forever) we call the mouseMove function.

This simply updates the label to show the coordinates of the mouse.

Code:

function mouseMove(e:MouseEvent):void {
	lblMouse.text = "X: " + String(mouseX) + " Y: " + String(mouseY);
}

That briefly covers the concepts in getting user input with the keyboard and mouse. These are crucial for games. Thankfully, Flash and ActionScript make it so easy.

You can see the file product here.