The mouse pointer is the most common way through which the user interacts with the Flash presentation.
The events for mouse are different actions performed with the mouse, such as clicking, positioning the pointer over an object or simply moving it. All these actions are named "mouse events" and can be detected by the class MouseEvent.
The type of events for the MouseEvent:


Here's an example with MouseEvent for CLICK, MOUSE_MOVE and MOUSE_DOWN. We create a Flash presentation with 2 Frames, in the first frame a button is added and in the second frame a geometric figure (a star). When the user presses the button, jumps to frame 2, which displays the star. When the mouse is moved over the star, it spins and shrinks, and if the user press the button (MOUSE_DOWN) over the star, jumps to the first frame.
  1. Open a new Flash document ActionScript 3.0
  2. Draw an oval shape on the Stage (or a rectangle), (you can also add a text on the shape, with "Text Tool"). Select the shape and convert it into a Button (from Modify -> Convert to Symbol and for Type choose Button).
  3. Make sure the shape is selected, open the "Properties panel" and add the name buton in the box for "Instance Name". As you can see in the following image.
    Buton - Example MouseEvent
  4. Right-click on frame 2 in the Timeline and choose "Insert Blank Keyframe" (a new empty frame is created), then select the "PolyStar Tool" in the Tools panel.
  5. Click on the Options button in the Properties panel of the "PolyStar Tool", then, for Style choose the option star (to draw a star, you can modify the number of sides from "Number of Sides") and press OK.
  6. Select a gradient color in the "Fill Color" (for a more visible effect of rotation) and draw a star on the Stage.
  7. Convert the star into MovieClip (from Modify -> Convert to Symbol, and for Type choose Movie Clip and press OK), then, in the Properties panel add the name star for this MovieClip instance on the stage.
  8. Create a new Layer in the Timeline (from Insert -> Timeline -> Layer) that will be used to add ActionScript codes.
      - You can give it a specific name (for example: "Actions" or "Scripts"), by double-clicking on its name.
  9. Right-click on Frame 1 in this second Layer, choose Actions, and add the following code in the "Actions panel".
    stop();         // Stops the presentation at frame 1
    
    // Register a mouse event ( CLICK ) for the button instance 
    buton.addEventListener(MouseEvent.CLICK, gotoF2);
    
    // Funtion called by the registered event for 'buton'
    function gotoF2(event:MouseEvent):void
    {
      gotoAndStop(2);        // Jumps and stops at Frame 2
    }
    
  10. Right-click on Frame 2 in this second Layer, choose Actions, and add the following code in "Actions panel".
    // Register a mouse event ( MOUSE_MOVE ) for the star instance
    star.addEventListener(MouseEvent.MOUSE_MOVE, rotate);
    
    // Register another mouse event ( MOUSE_DOWN ) for the star instance 
    star.addEventListener(MouseEvent.MOUSE_DOWN, gotoF1);
    
    // Function called by the event MOUSE_MOVE
    function rotate(evt:Event):void
    {
      // Rotate the object that triggered the event
      evt.target.rotationZ -= 2;
    
      // If the length of the object is higger than 80 pixels
      // shrinks its length and height by 5
      if(evt.target.width>88) {
        evt.target.width -= 5;
        evt.target.height -= 5;
      }
    }
    
    // Function called by the event MOUSE_DOWN
    function gotoF1(evt2:MouseEvent):void
    {
      gotoAndStop(1);        // Jumps and stops at Frame 1
    }
    
      - This is used by Flash when the presentation reaches frame 2.
- The "stop()" instruction in Frame 1, makes the presentation stops at the Frame 1, otherwise it would have continued with the following Frame.
- the expression "evt.target" refers to the element that has triggered the event.
- "evt.target.rotationZ -= 2;" rotates by 2 degrees in Z plane the object that triggered the event.
- This code will display the following Flash presentation. Click on the button, move the mouse over the star, and then click on the star.
To download the FLA file with this example, click: Mouse events.

Mouse coordinates

You can use the MouseEvent object to capture the mouse coordinates in the Flash presentation.
The MouseEvent object has the following properties used to find out the position of the mouse, relative the Stage (upper-left corner) and relative to the element that trigger the mouse event.


Capturing these coordinates, you can execute different instructions depending on the mouse position in the Flash presentation. As you can see in the following example.
Follow these steps:
  1. Open a new Flash document, ActionScript 3.0
  2. Draw a rectangle on the center of the stage and convert it into MovieClip (from Modify -> Convert to Symbol, and for Type choose Movie Clip, and press OK, then in the "Properties panel", add the name rectangle for the instance of this MovieClip.
  3. Choose the "Text Tool" and write above the rectangle: "Coordinates in Stage", and give this text field the instance name txtS.
    Write below the rectangle the text "Coordinates in Rectangle", and give this text field the instance name txtD. As you can see in this image:
    Mouse coordinates
  4. Right-click on frame 1 in the Timeline, choose Actions, and add the following code in "Actions panel":
    // Register a mouse event ( MOUSE_MOVE ) for the rectangle instance
    rectangle.addEventListener(MouseEvent.MOUSE_MOVE, getCoord);
    
    // Function called by the registered event
    function getCoord(evt:MouseEvent):void
    {
      // Add in the txtS instance the coordinates of the mouse relative to the stage
      txtS.text = 'Coordinates in the stage: '+ evt.stageX+ ', '+ evt.stageY;
    
      // Add in the txtD instance the coordinates of the mouse relative to the rectangle
      txtD.text = 'Coordinates in the rectangle: '+ evt.localX+ ', '+ evt.localY;
    
      // Set a ColorTransform instance to change the color
      var  col:ColorTransform  =  rectangle.transform.colorTransform;
    	
      // If the localX coordinate is higger than 90 (pixels) it sets the color to yellow
      // Otherwise, it sets it to green
      if(evt.localX>90) col.color = 0xeded01;
      else col.color = 0x00fe00;
    
      // Apply the ColorTransform instance to rectangle
      rectangle.transform.colorTransform = col;
    }
    
  5. Press Ctrl+Enter to test the result. The following Flash presentation will appear:
    - If you move the mouse over the rectangle, in the text above the rectangle will show the mouse coordinates relative to the top-left corner of the Stage, and in the text below will display the mouse coordinates relative to the top-left corner of the rectangle.
    - Move the mouse cursor over the rectangle to see the effect, its color will change depending on the mouse position, as it is set in the ActionScript code above.
- "evt.stageX", and "evt.stageY" return the mouse coordinates (stored in "evt" object) relative to the Stage.
- "evt.localX" and "evt.localY" return the mouse coords relative to the rectangle.

The FLA file with this example can be downloaded from: Mouse coords.

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which tag create a highlighted bolded text?
<q> <strong> <em>
<p>Address: <strong>http://CoursesWeb.net/</strong> - Tutorials.</p>
Which of these CSS codes displays the text bolded?
text-size: 18px; font-style: italic; font-weight: 800;
#id {
  font-weight: 800;
}
What JavaScript function can be used to call another function multiple times, to a specified time interval?
setInterval() setTimeout() push()
function someFunction() { alert("CoursesWeb.net"); }
setInterval("someFunction()", 2000);
Click on the correctly defined variable in PHP.
var vname = 8; $vname = 8; $vname == 8;
$vname = 8;
echo $vname;
MouseEvent - Events for Mouse

Last accessed pages

  1. Bubbles3 (25088)
  2. Zuma Honey (3507)
  3. Ajax-PHP Chat Script (29240)
  4. Backgammon (5617)
  5. CSS3 - new Background properties (937)

Popular pages this month

  1. Qwop (4286)
  2. Bubbles3 (3791)
  3. Butterfly Kyodai (2697)
  4. Zuma Deluxe (2492)
  5. Backgammon (1288)