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 meta tag provides a short description of the page?
<meta content="..."> <meta description="..."> <meta http-equiv="...">
<meta name="description" content="70-160 characters that describes the content of the page" />
Which CSS property is used to stop the wrapping effect of the "float"?
clear text-align position
#some_id {
  clear: both;
Click on the method which gets an array with all the elements in the document that have a specified tag name.
getElementsByName() getElementById() getElementsByTagName()
var divs = document.getElementsByTagName("div");
var nr_divs = divs.length;
Indicate the PHP function which returns the number of elements in array.
is_[) count() strlen()
$arr =[7, 8, "abc", 10);
$nri = count($arr);
echo $nri;        // 4
MouseEvent - Events for Mouse

Last accessed pages

  1. Mouse Chain (534)
  2. Wake Up The Box 5 (147)
  3. Logic Perspicacity Games (8182)
  4. Desert Car (670)
  5. Linebacker Alley (1502)

Popular pages this month

  1. Qwop (3504)
  2. Flash Games - Free online Games (1602)
  3. Get Attribute (ID, Class, Name, Title, Src) with jQuery (1543)
  4. Courses Web: PHP-MySQL JavaScript Ajax HTML CSS Flash-AS3 (1431)
  5. Drag Racer V3 (1420)