MouseEvent - Events for Mouse

Actionscript Course

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:

• CLICK - is triggered when the user presses and releases the main mouse button over an object in the Flash presentation
• DOUBLE_CLICK - is triggered when a double-click is executed on the recorded object. This object must have the doubleClickEnabled property set to true
• MOUSE_DOWN - detects the moment when the left mouse button is pressed (without being necessary to release the click)
• MOUSE_UP - executes the event when the click is released
• MOUSE_MOVE - the event is triggered each time the mouse pointer is moved over an objects
• MOUSE_OUT - the event is executed when the mouse leaves the objects area or the area of any of its "child elements"
• MOUSE_OVER - is triggered when the mouse enters the area of the monitored object or of any "child element"
• MOUSE_WHEEL - event is dispatched when a mouse wheel is spun over a monitored object in the Flash Player
• ROLL_OUT - it's similar to MOUSE-OUT, the difference is that the event is triggered only when the mouse completely leaves the object's area, while, the MOUSE_OUT event is thrown each time the mouse leaves the area of any child object of the display object container.
• ROLL_OVER - is similar to MOUSE-OVER, the difference is that the event is triggered when the mouse enters the objects area, while, the MOUSE_OVER event is thrown each time the mouse enters the area of any children of the monitored object

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.
   
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.

• localX - the horizontal coordinate at which the event occurred relative to the containing sprite
• localY - the vertical coordinate at which the event occurred relative to the containing sprite
• stageX - the horizontal coordinate, reported to the upper left corner of the stage
• stageY - the vertical coordinate, reported to the upper left corner of the stage

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:
   
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.

<ul>
 <li>http://coursesweb.net/html/</li>
 <li>http://coursesweb.net/css/</li>
</ul>

.some_class {
  display: list-item;
}

var obj = {
 "courses": ["php", "javascript", "ajax"]
};
var jsonstr = JSON.stringify(obj);
alert(jsonstr);    // {"courses":["php","javascript","ajax"]}

$strhtml = '<body><div id="dv1">CoursesWeb.net</div></body>';
$dochtml = new DOMDocument();
$dochtml->loadHTML($strhtml);
$elm = $dochtml->getElementById("dv1");
echo $elm->nodeValue;    // CoursesWeb.net