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 -= 2;
      // If the length of the object is higger than 80 pixels
      // shrinks its length and height by 5
      if(>88) { -= 5; -= 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 "" refers to the element that has triggered the event.
- " -= 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

Which tag defines the clickable areas inside the image map?
<map> <img> <area>
<img src="image.jpg" usemap="#map1">
<map name="map1">
  <area shape="rect" coords="9, 120, 56, 149" href="#">
  <area shape="rect" coords="100, 200, 156, 249" href="#">
Which CSS property defines what is done if the content in a box is too big for its defined space?
display overflow position
#id {
  overflow: auto;
Click on the event which is triggered when the mouse is positioned over an object.
onclick onmouseover onmouseout
document.getElementById("id").onmouseover = function(){
  document.write("Have Good Life");
Indicate the PHP variable that contains data added in URL address after the "?" character.
if(isset($_GET["id"])) {
  echo $_GET["id"];
MouseEvent - Events for Mouse

Last accessed pages

  1. Add and Remove HTML elements and Content with jQuery (17347)
  2. CSS cursor property - Custom Cursors (3102)
  3. Remove / Get duplicate array values - Reset array keys in PHP (5853)
  4. Add Tag to Selected Text in textarea with JavaScript (751)
  5. Add, Change, and Remove Attributes with jQuery (22007)

Top accessed pages

  1. Courses Web: PHP-MySQL JavaScript Ajax HTML CSS Flash-AS3 (45592)
  2. Read Excel file data in PHP - PhpExcelReader (34306)
  3. PHP-MySQL free course, online tutorials PHP MySQL code (34225)
  4. Get Attribute (ID, Class, Name, Title, Src) with jQuery (30806)
  5. PHP PDO - exec (INSERT, UPDATE, DELETE) MySQL (28062)