Mouse Tracking - 08MouseTracking.fla

This example keeps track of the mouse position. This is useful for games and drawing graphics.

It also introduces some new Flash Movie concepts. The movie has three frames. In frame one, the mouse position is displayed and if the mouse is in the top left corner, the movie jumps to frame three and stops. Here is the code for frame one.

  // FIND OUT WHERE THE MOUSE CURSOR IS AND
  // DISPLAY THE POSITION ONTO THE mouseX
  // AND mouseY DYNAMIC TEXT CONTROLS.
  mouseX = _root._xmouse;
  mouseY = _root._ymouse;

  // IF THE X POSITION IS LESS THAN TEN
  // AND THE Y POSITION IS LESS THAN TEN
  // JUMP TO FRAME THREE AND STOP.
  if ((_root._xmouse < 10) && (_root._ymouse < 10))
  {
      gotoAndStop(3);
  }

The movie is set to play at twelve frames per second so it jumps to frame two almost immetiately. Frame two has one line of code telling the movie to jump back to frame one. This loop runs continuously at twelve frames per second. Each time the movie plays frame one, the mouse position is displayed. The mouse position is also tested to see if the movie should jump to frame three.

  // JUMP BACK TO FRAME ONE AND 
  // PLAY THE MOVIE AGAIN
  gotoAndPlay(1);

Frame three contains a button with this code attached to it. If the button is pressed, the movie jumps back to frame one and restarts.

on (release)
{
    _root.gotoAndPlay(1);
}

Here is the movie.

Here is the downloadable source code.

1. Start up Flash.
2. Create a new Flash document.
3. Save the file as 08MouseTracking.fla.

Set up your Flash MX environment like this ...

4. Insert two new blank Keyframes. This gives you the three frames you need for this movie.
   
   
5. Select frame one.
6. Select the rectangle tool and choose some colours.
   Then place a rectangle onto your canvas.
   Press Ctrl+A to ensure the entire rectangle (including its edges) is selected.
   Enter numbers into the X, Y, Width and Height property boxes to make the rectangle exactly fill the canvas.
   X and Y should be zero. W (width) should be the same as the canvas width and H (height) should be the same as the canvas height.
   
   
7. Select Frame One.
   Position two dynamic text controls.
   Set their Var parameters to mouseX and mouseY.
   Make sure the colour of the text is different to the background colour!
   
   
8. Make frame two look the same as frame one ...
   Use the mouse to point to Frame One as shown above.
   Right click and choose Copy Frames.
   Point to Frame Two.
   Right click and choose Paste Frames.
   
   
9. Select Frame Three.
   Double click the button to place it onto frame three.
   Use the arrow tool and re-position the button.
   Make sure the button is selected.
   Open the Actions - Movie Clip view.
   Add some code to the button on Frame Three.
   
   
   
   Here is the code ...
   
   

   // JUMP BACK TO FRAME ONE AND // PLAY THE MOVIE AGAIN gotoAndPlay(1);

10. Select Frame Two
    Enter the code to make the movie loop.
    
    
    
    Here is the code ...
    
    

    // JUMP BACK TO FRAME ONE AND // PLAY THE MOVIE AGAIN gotoAndPlay(1);

11. Select Frame One
    Enter the code to display the mouse X and Y positions.
    
    
    
    Here is the code ...
    
    

    // FIND OUT WHERE THE MOUSE CURSOR IS AND // DISPLAY THE POSITION ONTO THE mouseX // AND mouseY DYNAMIC TEXT CONTROLS. mouseX = _root._xmouse; mouseY = _root._ymouse; // IF THE X POSITION IS LESS THAN TEN // AND THE Y POSITION IS LESS THAN TEN // JUMP TO FRAME THREE AND STOP. if ((_root._xmouse < 10) && (_root._ymouse < 10)) { gotoAndStop(3); }

Here is the example movie. The mouse X and Y positions are displayed.

You can download the source code.

Task

Learn the techniques of working with more than one movie frame and be able to re-create this movie without notes. (not easy).