How to Move a Movieclip Left in Actionscript 3

Written by mark stansberry
  • Share
  • Tweet
  • Share
  • Pin
  • Email
How to Move a Movieclip Left in Actionscript 3
Code your keyboard to move movie clips left with ActionScript 3 code. (Jupiterimages/Comstock/Getty Images)

Making an object move when you press an arrow key on your keyboard is an essential operation built into almost every ActionScript 3 game. In fact, there are few games that don't make use of the arrow keys. Coding ActionScript 3 to move a movie clip left with the "left key" arrow key requires that you use "KeyboardEvent" listeners that listen for the left arrow key to be pressed. Additionally, you have to write the code to decrement the movie clip's "x" position property (the horizontal position control) every time the left key is pressed.

Skill level:
Moderate

Other People Are Reading

Things you need

  • Flash Adobe Professional (CS3, CS4 and CS5 versions)

Show MoreHide

Instructions

    Importing Movie Clip Graphics

  1. 1

    Select the "File" menu from Flash's main menu bar. Then select the "Import" menu option from the "File" menu and then the "Import to Stage" option from the "Import" menu options. Select a graphic file (jpeg or gif format) from the directory list that appears. Use a graphic file named "fashionmodel.jpg" for this example.

  2. 2

    Click on the graphic image of the file that has been imported to the Flash stage. Select the "Properties" option from the "Window" option on the main Flash menu bar. Type values in in the "width" and "height" text boxes of the properties dialogue box to scale the size of the graphic image to fit on the Flash stage.

  3. 3

    Select the "Convert to Symbol" option from the "Modify" option on the main Flash menu bar. Check the "Export to ActionScript," and then click the "OK" button on the "Symbol" dialogue box that appears.

  4. 4

    Position your mouse cursor in the "Instance Name" text box in the "properties panel." Type in the instance name "sleeves" in the "Instance Name" textbox.

    Coding

  1. 1

    Type the statement below in the next line of the Actions editor to attach a KeyboardEvent listener (to the stage) that will detect when a key has been pressed and call an event hander that determines which key was pressed. Type the first parameter of the addEventListener method in this code statement as a "KEY_DOWN" event as shown below. Type the second parameter for the addEventListener, the event handler name, as "whichKey"

    stage.addEventListener(KeyboardEvent,KEY_DOWN, which Key)

  2. 2

    Type the "whichKey" event handler function, as listed below, beginning at the next line in the Actions editor. Type the "if" statement in the code so that it checks if the key Code property of the key sent to it is the "left arrow" key. Type the "if" statement such that it moves the "sleeves" object five units to the left every time the left key is pressed (sleeves.x = sleeves.x - 5).

    function which Key(event:KeyboardEvent): void

    {if (event.keyCode = Keyboard.RIGHT){sleeves.x = sleeves.x - 5}}

  3. 3

    Select the "Window" option on the main Flash menu bar and select the "Actions" option to open the Actions edition. Copy the code below and paste it into the Actions editor.

    stage.addEventListener(KeyboardEvent.KEY_DOWN, which Key);

    function which Key(event:KeyboardEvent): void

    {if (event.keyCode == Keyboard.LEFT){sleeves.x = sleeves.x - 5}}

  4. 4

    Click the "TestMovie" option from the "Control" menu on the Flash main menu bar to play the movie and move your movie clip left. Press the left arrow on your keyboard to move the graphic, called sleeves, five pixels to the left after the movie starts. Hold the left arrow key down to watch the image move continuously in 5 pixel increments.

Don't Miss

Filter:
  • All types
  • Articles
  • Slideshows
  • Videos
Sort:
  • Most relevant
  • Most popular
  • Most recent

No articles available

No slideshows available

No videos available

By using the eHow.co.uk site, you consent to the use of cookies. For more information, please see our Cookie policy.