2D Flash Game Tutorial

• 1

  Create a Flash FLA file. Start Adobe Flash Professional. Create a coordinate practice file. Select "File" from the main menu and then select "New." Save your flash project as an FLA file. Name it "coordinateSystem" Select the .FLA extension option in the "Save File As" dialog box.

• 2

  Set the stage size. Select "Window" and "Properties." Select the "Edit" button in the properties panel located within the publish subpanel. Position your cursor in the stage width text box and type in 400. Position your cursor in the stage height text box and type in 500.

• 3

  Open the "Actions" editor. Select "Window" and "Action." Code a text field called coordinates. Place it on the flash stage at coordinates (0,0). Assign a border to it by setting the border property to true. Use the "addChild" method to place the text field on the stage.

  var coordinates:TextField = new TextField();

  coordinates.x = 0;

  coordinates.y = 0;

  coordinates.border = true;

  addChild(coordinates);

• 4

  Code a mouse coordinate text field. Write action script code to continually read the coordinates of the position of the mouse on the stage. Add an event listener to the stage that calls a function called "movemouse" every time the mouse button is held down. Write the code such that the text field, created in the last step will display the x and y coordinates of the mouse every time the mouse moves.

  stage.addEventListener(MouseEvent.MOUSE_MOVE, movemouse)

  function movemouse(event:MouseEvent): void {

  coordinates.text = mouseX.toString() + ", " + mouseY.toString();

  }

Test the Code

• 5

  Check the code's syntax. Visually proof it for typing errors. Check it again with the built-in flash syntax checker. Select the "Check Syntax: icon, the blue check mark, from the action's editor menu. Correct any syntax errors that are reported in the "output" window.

• 6

  Check compiled code for errors. Select "Window" and "Test Movie." Correct any compilation errors, if any, that appear in the output window.

• 7

  Verify that the correct mouse coordinates are displayed.

  Move the mouse to the very far left-hand, upper corner on the stage. Observe that the textField displays a value near (0,0).

  Move the mouse to the very far right-hand upper corner on the stage. Observe that the text field displays a value near (0,500).

  Move the mouse to the far right-hand lower corner on the stage. Observe that the text field displays a value near (400,500).

  Move the mouse the far right-hand lower corner on the stage. Observe that the text field displays a value near (0, 500).