How to Move an Object With the Arrow Keys in ActionScript 3.0

Use ActionScript 3 to move objects with the up, down, right and left arrow keys.

If you want to create a game with Adobe Flash, you will need to know how to create code that will move graphic objects with the arrow keys. Once you know, you will be able to quickly create all types of Flash games. Moving an object with an arrow key is easy. It only takes four lines of ActionScript 3 (the Flash programming language) code to program an object to move up, down, left or right with the up, down, left and right arrow keys.

Start the Flash program. Click "Flash File(ActionScript 3.0)" from the splash window to create a new file for the AS3 Flash multiple-drop target project.

Import the graphics object you want to move with the arrows. Click the "Import to Library" option in the "File" menu. Select the graphic that you imported and click "Convert to Symbol" in the "Modify" menu to convert the graphic to a movie clip object (so the graphic can be animated). Type the name "object_one" for the symbol in the "name" text box in the "Convert to Symbol" dialog box. Click the "Export for ActionScript" check-box, then "OK" to assign a class name of "object_One" for the graphic symbol.

Select "Actions" from the "Window" menu on the main Flash menu bar to open the ActionScript 3 editor. Position your mouse cursor on the first line of the ActionScript 3 editor. Click your mouse button, and type in the code below to place a copy of the "object_One" graphic on the stage and position it at the flash stage coordinates of (400,400):

var object_to_move:object_One = new object_One(); object_to_move.x = 400; object_to_move.y = 400; addChild(object_to_move);

The var AS3 code makes a copy of the "object_One" library symbol and names it "object_to_move." Attaching the x and y property to "object_to_move" in the second and third lines of code positions the symbol. The "addChild" method places the object on the stage.

Type the code starting at the next line of the ActionScript 3 editor to add an event listener to the Flash stage so that Flash can detect when a key on the keyboard has been pressed, determine if the key pressed is the "UP," "DOWN," "LEFT" or "RIGHT" arrow, and move the object in the appropriate direction (a distance of five pixels) for every press of a arrow key.

stage.addEventListener(KeyboardEvent.KEY_DOWN, whichKey) function whichKey(event:KeyboardEvent): void { if (event.keyCode == Keyboard.LEFT){object_to_move.x = object_to_move.x - 5}; if (event.keyCode == Keyboard.RIGHT){object_to_move.x = object_to_move.x + 5}; if (event.keyCode == Keyboard.UP){object_to_move.y = object_to_move.y - 5}; if (event.keyCode == Keyboard.DOWN){object_to_move.y = object_to_move.y + 5};


When a key is pressed down, the code in the first line will detect it. In response, the code executes the code in the "whichKey" function statement. A set of four conditional statements (if-then statements) are used to detect which arrow key has been pressed, and to move the object five pixels in the direction that the arrow key pressed would indicate.

Mark Stansberry has been a technical and business writer over for 15 years. He has been published in leading technical and business publications such as "Red Herring," "EDN" and "BCC Research." His present writing focus is on computer applications programming, graphic design automation, 3D linear perspective and fractal technology. Stansberry has a Bachelor of Science in electrical engineering from San Jose State University.