Movement Using Keyboard Keys

by kirupa   | filed under Flash and ActionScript

While this tutorial exists for Flash 5, the Flash MX version is a slightly more simplified version. Why is it more simplified you ask? In Flash MX the segregation of the button and movie clip has been removed. The barriers preventing complex scripted actions for buttons has been lifted. Buttons in Flash MX now allow you to script events without having to place the buttons inside a movie clip.

In this tutorial, you will learn how to move a yellow ladybug across the animation by using your keyboard keys. Thanks to Macromedia for providing the bug as a graphic in one of their sample FLAs:

[ use your left, right, up, and down arrows to move the yellow bug ]

Creating the Movement:

1. Click here to open an FLA that contains the graphic of the bug. Don't worry, you will add the cool code to make the bug move yourself.
    
2. Once you have opened the keys.fla file you downloaded from the above link, you should see a movie clip with the picture of the bug.
    
4. Select the movie clip of the bug and press F8. The Convert to Symbol dialog box will appear. Select Button and press OK. Your movie clip is now a button.

5. Right click on the button (which you just converted in Step 4) and select Actions. The Actions dialog box will appear. Copy and paste the following code:

                      on (keyPress "<Left>") {

 currentX = this._x;

 this._x = currentX - 2;

 _root.bug._rotation = 270;

}

on (keyPress "<Right>") {

 currentX = this._x;

 this._x = currentX + 2;

 _root.bug._rotation = 90;

}

on (keyPress "<Up>") {

 currentY = this._y;

 this._y = currentY - 2;

 _root.bug._rotation = 360;

}

on (keyPress "<Down>") {

 currentY = this._y;

 this._y = currentY + 2;

 _root.bug._rotation = 180;

}

[ copy and paste the above code into the Actions dialog box ]

8. You are done with the animation! Preview the animation and you should be able to move the bug around the screen by using your left, right, up, and down arrow keys.

ActionScript Explained

Not to leave you in the dark, I will briefly summarize what the major sections of ActionScript stand for.

                    on

  (keyPress

  "<Left>")

  {

  currentX =

  this._x;

  this._x

  = currentX - 2;

  _root.bug._rotation

  = 270;

  }

In the above lines of code I am specifying what to do when the left arrow (<Left>) key is pressed (keyPress). By the naming of the variables, you should be able to establish that I am referring to the X axis. I first take a value of what the current X position is by making the variable currentX equal the current X position (this._x).

The next line deals with actually moving the bug across the screen. I set the current x position to equal the current x position (currentX) subtracted by 2. In the next line, I set the bug's rotation to point left when moving. Unlike conventional geometry, Flash does not always follow the 0, 90, 180, 270, 360 (also 0) rotations.

Look over the remaining lines of code, and you will see that the code is quite self explanatory.  I explain that strange Flash behavior below:
 

	THE TRUTH ABOUT THE Y AXIS
Did you notice that for moving the bug down, I am incrementing the y value? If you did not, here is the line of code for moving the bug down: this._y = currentY + 2; Why would that be? In Flash, the Y axes are reversed. All vertical instances in Flash go contrary to the Cartesian principle by moving down when incremented and moving up when decremented.

You have just completed the tutorial! As always, I have provided the source code for you to take a peek at. Click the download source link below to download the Flash MX Flash File (FLA) for this effect.
 

Just a final word before we wrap up. What you've seen here is freshly baked content without added preservatives, artificial intelligence, ads, and algorithm-driven doodads. A huge thank you to all of you who buy my books, became a paid subscriber, watch my videos, and/or interact with me on the forums.

Your support keeps this site going! 😇