Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Design > Adobe Creative Suite

  • Print
  • + Share This
This chapter is from the book

This chapter is from the book

Character Movement

You can move the character in two ways: by checking for user interactions every time the playhead advances a frame (30 times per second in the case of this game), or by using listeners, which are more processor-friendly. Let's look at the Key Listener code.


All input devices can have a listener in Flash. The mouse and keyboard objects both have methods to determine when the user is interacting with them. Listeners can also determine when the Stage has been resized, when a text field's content has changed, or when the user's cursor has changed focus.

  1. Go to the first frame of the listener layer and type this script:

    Listing 5.11

    //Create a listener for keypresses.
    onKeyDown = function () {
    // Use Switch to check for four possible valid key presses
      switch (Key.getCode()) {
      case Key.UP :
       characterName.puffin_mc._rotation = 0;
       if (inMotion == false) { characterName.puffin_mc.gotoAndPlay("rtTurn");	}
       inMotion = true;
       mc_move(0, -speed, bounds);
       collision(playerc.x, playerc.y);

    The Key listener that is being used here is a method that executes whenever a key is pressed, regardless of the user's focus.


Using listeners saves computer cycles and speeds up the game by only running character animation routines and collision detection while the user is pressing a key.

The switch statement replaces multiple if-else commands, retrieving the code of the key pressed by the user and comparing it to four potential values (UP, RIGHT, DOWN, and LEFT). You must type these directions in caps because they are Key object constants that correlate to the numerical values of the keys.

  1. Type the following code right after the break; statement:

    Listing 5.12

      case Key.RIGHT :
       characterName.puffin_mc._rotation = 90;
       if (inMotion == false) { characterName.puffin_mc.gotoAndPlay("rtTurn");  }
       inMotion = true;
       mc_move(speed, 0, bounds);
       collision(playerc.x, playerc.y);
      case Key.DOWN :
       characterName.puffin_mc._rotation = 180;
       if (inMotion == false) { characterName.puffin_mc.gotoAndPlay("ltTurn"); }
       inMotion = true;
       mc_move(0, speed, bounds);
       collision(playerc.x, playerc.y);

    The line of code characterName.puffin._rotation = 0; and the one that follows it animate the character—turning it in the proper direction based on the arrow key being pressed, and beginning the walking animation while the key remains pressed. These actions send the puffin movie clip to various frame labels that control its motion.

    The puffin avatar has three frame labels: ltTurn, still, and rtTurn.

Figure 5.16Figure 5.16

Remember: The characterName variable is just a reference to the longer cell.player path.

  1. Pass the proper direction variables so that the character moves when the user presses one of the arrow keys. Insert this script right after the last break; statement:

    Listing 5.13

      case Key.LEFT :
       characterName.puffin_mc._rotation = 270;
       if (inMotion == false) { characterName.puffin_mc.gotoAndPlay("ltTurn");  }
       inMotion = true;
       mc_move(-speed, 0, bounds);
       collision(playerc.x, playerc.y);
       default :
       trace("no case tested true");
    // After the proper motion has been processed, reset the coords position so the collision detection can take place on the next keypress.
    //onKeyUp tell the character to stop its walking animation
    onKeyUp = function () {
      inMotion = false;

Figure 5.17Figure 5.17

This code calls the move() function and passes variables in the proper direction to make the character move. The distance covered is based on the speed variable. The position of the speed parameter in this move function is based on the motion direction; a positive speed value in the x position moves right, and a positive speed value in the y position moves down. The respective negative values move up and left. The break command exits the switch command and allows the Flash player to check for a new key press.

Each time a key is pressed, the variables record the position of the puffin on the Stage.

The following figure shows the code for the Listener layer.

Figure 5.18Figure 5.18

The much shorter onKeyUp function stops all character animation except for the blinking eyes and alerts the Flash player to the fact that the character is no longer in motion. You have to keep track of the motion status of the puffin; otherwise, it would either play the walk animation constantly or never display it at all.

Now that you have defined the methods for the motionListener object, you can assign this object to the Key listener.

Now whenever the player presses an arrow key, the character moves through the forest.

  1. Save your work.

  • + Share This
  • 🔖 Save To Your Account