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.
- Open a new Flash document ActionScript 3.0
- 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).
- 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.
- 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.
- 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.
- Select a gradient color in the "Fill Color" (for a more visible effect of rotation) and draw a star on the Stage.
- 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.
- 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. - 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 } - 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 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.
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:
- Open a new Flash document, ActionScript 3.0
- 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.
- 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:
- 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; } - Press Ctrl+Enter to test the result. The following Flash presentation will appear:
- 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.localX" and "evt.localY" return the mouse coords relative to the rectangle.
The FLA file with this example can be downloaded from: Mouse coords.