Essential ActionScript 3.0 PHẦN 7 doc

Mouse-Input Events | 533 event target when the event is dispatched. The “Default behavior” column lists Flash Player’s native response to the event. The “Bubbles” column indicates whether the event has a bubbling phase. The “Datatype of object passed to listener function” col- umn specifies the datatype of the object passed to the listener function that handles the event. Finally, the “Notes” column lists important information regarding the event’s use. Spend a little time getting to know Flash Player’s mouse events by perusing Table 22-1. Here are a few general issues to bear in mind as you review the table: System focus The following events are triggered even when Flash Player does not have system focus: MouseEvent.MOUSE_MOVE, MouseEvent.MOUSE_OVER, MouseEvent.MOUSE_OUT, MouseEvent.ROLL_OVER, and MouseEvent.ROLL_OUT. All other mouse events are trig- gered when Flash Player has system focus only. Location matters With one exception, mouse events are not dispatched when the user manipu- lates the mouse outside Flash Player’s display area. The exception: if the user presses the primary mouse button within Flash Player’s display area and then releases it outside Flash Player’s display area, MouseEvent.MOUSE_UP is dis- patched. To be notified when the mouse pointer leaves Flash Player’s display area, register for the Event.MOUSE_LEAVE event, as discussed in the later section “Flash Player-Level Input Events.” Vector graphics ignored in main-class instance Mouse interactions with vector content drawn via the instance variable graphics of a .swf file’s main class do not trigger mouse events. However, mouse interac- tions with vector content drawn via the instance variable graphics of any other instance of InteractiveObject or its subclasses do trigger mouse events. Default behavior not cancelable Flash Player’s default behavior cannot be prevented for any type of mouse event. Immediate screen updates To refresh the screen immediately after handling any mouse event, use the MouseEvent class’s instance method updateAfterEvent( ). For complete details, see the section “Post-event Screen Updates” in Chapter 23. 534 Table 22-1. Flash Player mouse events Event type Description Target Default behavior Bubbles Data type ofbjectpassed to listener function Notes MouseEvent.MOUSE_DOWN Primary mouse button depressed while mouse pointer is over Flash Player’s display area. The InteractiveObject under the mouse pointer when the mouse button was depressed If target is a SimpleButton, downState is dis- played. If target is TextField with selec- tion enabled, selec- tion begins. Not cancelable. Yes MouseEvent MouseEvent.MOUSE_UP Primary mouse button released while mouse pointer is over Flash Player’s display area. The InteractiveObject under the mouse pointer when the mouse button is released If target is a SimpleButton, its overState is dis- played. If target is a TextField with selec- tion enabled, selec- tion ends. Not cancelable. Yes MouseEvent MouseEvent.CLICK Primary mouse button depressed and then released over the same InteractiveObject. Or, the user activates a SimpleButton, Sprite, or MovieClip instance via the space or Enter key. See the section “Focus Events later in this chap- ter. The InteractiveObject that was clicked or activated None Yes MouseEvent 535 MouseEvent.DOUBLE_CLICK Two MouseEvent. CLICK events occur in rapid successionoverthe same InteractiveObject. The InteractiveObject that was double- clicked If target is a TextField with selec- tion enabled, the word under the pointer is selected. Yes MouseEvent • Triggered only if the programmer first sets the target’s doubleClickEnabled variable to true. • In a double-click sequence, the first click triggers MouseEvent. CLICK ; the second trig- gers M.ouseEvent. DOUBLE_CLICK . • Double-click speed is operating-system deter- mined. MouseEvent.MOUSE_MOVE Mouse pointer moved while over Flash Player’s display area. The InteractiveObject under the mouse pointer when the mouse pointer moved If target is a TextField being selected,selectionis updated. Not can- celable. Yes MouseEvent MouseEvent.MOUSE_OVER Mouse pointer moved onto a display object. The InteractiveObject onto which the mouse pointer moved When target is a SimpleButton, if pri- mary mouse button is down, upState is displayed; if pri- mary mouse button is up, overState is displayed. Not cancelable. Yes MouseEvent • Not triggered for Stage instance. • Use MouseEvent. relatedObject to access the InteractiveObject previ- ously under the mouse pointer. Table 22-1. Flash Player mouse events (continued) Event type Description Target Default behavior Bubbles Data type ofbjectpassed to listener function Notes 536 MouseEvent.MOUSE_OUT Mousepointermovedoff of a display object. The InteractiveObject off of which the mouse pointer moved If target is a SimpleButton, upState is dis- played. Not cancel- able. Yes MouseEvent • Not triggered for Stage instance. • Use MouseEvent. relatedObject to access the InteractiveObject now under the mouse pointer. MouseEvent.ROLL_OVER Mouse pointer moved onto a given InteractiveObject or one of its descendants. The InteractiveObject that registered the event listener being executed None No MouseEvent • Not triggered for Stage instance. • Use MouseEvent. relatedObject to access the InteractiveObject previ- ously under the mouse pointer. MouseEvent.ROLL_OUT Mouse pointer had pre- viously moved onto a givenInteractiveObjector one of its descendants, but isnolongeroverthat display object or any of its descendants. The InteractiveObject that registered the event listener being executed None No MouseEvent • Not triggered for Stage instance. • Use MouseEvent. relatedObject to access the InteractiveObject now under the mouse pointer. MouseEvent.MOUSE_WHEEL Mouse’s scrolling device used while Flash Player has system focus. The InteractiveObject under the mouse pointer when the scrolling device was used If target is a TextField, it scrolls. Not cancelable via the Event class’s instance method preventDefault( ), but see Notes column. Yes MouseEvent • To prevent scrolling for text fields, set target’s mouseWheelEnabled to false. Table 22-1. Flash Player mouse events (continued) Event type Description Target Default behavior Bubbles Data type ofbjectpassed to listener function Notes Mouse-Input Events | 537 Registering for Mouse Events Here’s the general procedure for registering an event listener for a mouse event: 1. Based on the “Description” column in Table 22-1, find the constant for the desired event type in “Event type” column. 2. Create a listener function with a single parameter whose datatype is MouseEvent. 3. Consult the “Target” column in Table 22-1 to determine the event’s target object. 4. Finally, register the function from Step 3 with either the event target (for target phase notification) or with one of the event target’s ancestors (for capture or bubbling phase notification). Most mouse events are handled by listeners regis- tered with the event target (i.e., the object that conceptually received the input). Let’s apply the preceding steps to an example. Suppose we want to register a listener function to be notified when the following TextField object is clicked: var theTextField:TextField = new TextField( ); theTextField.text = "Click here"; theTextField.autoSize = TextFieldAutoSize.LEFT; theTextField.border = true; theTextField.background = true; theTextField.selectable = false; Here are the steps to follow: 1. Based on the “Description” column in Table 22-1, we determine that the event constant for mouse clicking is MouseEvent.CLICK. 2. Next, we create a function, clickListener( ), that will be notified of MouseEvent.CLICK events. We’re careful to set clickListener()’s parameters datatype to MouseEvent. private function clickListener (e:MouseEvent):void { trace("Mouse was clicked"); } 3. Next, according to the “Target” column in Table 22-1, we find that the target of a MouseEvent.CLICK event dispatch is the InteractiveObject that was clicked. We want to know when the theTextField is clicked, so we’ll need to register our event listener with either theTextField or one of its display ancestors. 4. For this example, we’ll register clickListener( ) directly with the target TextField object, theTextField, as follows: theTextField.addEventListener(MouseEvent.CLICK, clickListener); As a result of following the preceding steps, our clickListener( ) method executes whenever the user clicks theTextField. Example 22-1 shows the code from the pre- ceding steps in the context of a simple class, ClickableText. 538 | Chapter 22: Interactivity That was pretty painless. Let’s try another example. The following code registers mouseMoveListener( ) to be executed whenever the mouse moves while the mouse pointer is over the Sprite object referenced by the variable triangle. // Create the triangle var triangle:Sprite = new Sprite( ); triangle.graphics.lineStyle(1); triangle.graphics.beginFill(0x00FF00, 1); triangle.graphics.moveTo(25, 0); triangle.graphics.lineTo(50, 25); triangle.graphics.lineTo(0, 25); triangle.graphics.lineTo(25, 0); triangle.graphics.endFill( ); triangle.x = 200; triangle.y = 100; // Register with triangle for MouseEvent.MOUSE_MOVE events triangle.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveListener); // elsewhere in the class, define the listener private function mouseMoveListener (e:MouseEvent):void { trace("mouse move"); } As the preceding code shows, listeners can register for mouse events with an object that is not on the display list. However, such listeners will not be triggered unless or until the object is subsequently added to the display list. Example 22-1. Handling the MouseEvent.CLICK event package { import flash.display.*; import flash.text.*; import flash.events.*; public class ClickableText extends Sprite { public function ClickableText ( ) { var theTextField:TextField = new TextField( ); theTextField.text = "Click here"; theTextField.autoSize = TextFieldAutoSize.LEFT; theTextField.border = true; theTextField.background = true; theTextField.selectable = false; addChild(theTextField); theTextField.addEventListener(MouseEvent.CLICK, clickListener); } private function clickListener (e:MouseEvent):void { trace("Mouse was clicked"); } } } Mouse-Input Events | 539 An object cannot receive input-event notification unless it is on the display list. Example 22-2 puts the preceding triangle code in the context of a .swf file’s main class, MouseMotionSensor. In the example, triangle is added to the display list so it can receive mouse-event notifications. The basic listener-definition and event-registration code shown in Example 22-2 can be applied to any event in Table 22-1. Reader exercise: Try adding new code to Example 22-2 that registers event listeners for each of the events listed in Table 22-1. Use the listener-definition and event-registration code for the MouseEvent.MOUSE_MOVE event as a template. To help get you started, here’s the code required to register an event listener for the MouseEvent.MOUSE_DOWN event (the first event listed in Table 22-1): // Add this event-registration code to the class constructor triangle.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownListener); Example 22-2. Handling MouseEvent.MOUSE_MOVE over a triangle package { import flash.display.*; import flash.events.*; public class MouseMotionSensor extends Sprite { public function MouseMotionSensor ( ) { // Create the triangle var triangle:Sprite = new Sprite( ); triangle.graphics.lineStyle(1); triangle.graphics.beginFill(0x00FF00, 1); triangle.graphics.moveTo(25, 0); triangle.graphics.lineTo(50, 25); triangle.graphics.lineTo(0, 25); triangle.graphics.lineTo(25, 0); triangle.graphics.endFill( ); triangle.x = 200; triangle.y = 100; // Add the triangle to the display list addChild(triangle); // Register with triangle for MouseEvent.MOUSE_MOVE events triangle.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveListener); } private function mouseMoveListener (e:MouseEvent):void { trace("mouse move"); } } } 540 | Chapter 22: Interactivity // Add this listener-definition code to the class body private function mouseDownListener (e:MouseEvent):void { trace("mouse down"); } Mouse Events and Overlapping Display Objects By default, when a mouse event occurs over two or more overlapping InteractiveObject instances, Flash Player targets the event at the visually front-most instance only. Objects behind the front-most object are not notified of the event. For example, if a TextField object visually overlaps a Sprite object, and the user clicks the TextField object, then Flash Player dispatches a MouseEvent.CLICK event targeted at the TextField object only. The Sprite object is not notified that the mouse click occurred. Example 22-3 shows a simple application that demonstrates the preceding “TextField over Sprite” scenario. The application’s main class, ClickSensor, registers a MouseEvent.CLICK listener, clickListener( ), with a Sprite object, circle. The Sprite object is partially obscured by a TextField object, textfield. When clickListener( ) is triggered, it moves circle 10 pixels to the right. Example 22-3. A mouse event listener registered with a partially obscured object package { import flash.display.*; import flash.events.*; import flash.text.*; public class ClickSensor extends Sprite { public function ClickSensor ( ) { // Create the circle var circle:Sprite = new Sprite( ); circle.graphics.beginFill(0x999999, 1); circle.graphics.lineStyle(1); circle.graphics.drawEllipse(0, 0, 100, 100); // Create the TextField object var textfield:TextField = new TextField( ); textfield.text = "Click here"; textfield.autoSize = TextFieldAutoSize.LEFT; textfield.x = 30; textfield.y = 30; textfield.border = true; textfield.background = true; // Add circle to the display list addChild(circle); // Add textfield to the display list, in front of circle addChild(textfield); Mouse-Input Events | 541 Figure 22-1 shows the output of the code in Example 22-3. When the ClickSensor application runs, if the user clicks the visible portion of circle, then circle moves to the right. But if the user clicks a portion of circle that is obscured by textfield, then circle does not receive the MouseEvent.CLICK notifica- tion and, hence, does not move to the right. It is, however, possible to force textfield to ignore all mouse events, thus allowing circle to detect mouse clicks even where it is obscured by textfield. To force textfield to ignore all mouse events, we set its mouseEnabled variable to false,as follows: textfield.mouseEnabled = false; If the preceding line of code were added to ClickSensor’s constructor method, then all mouse clicks over any portion of circle, whether visible or not, would cause circle to move to the right. When an InteractiveObject instance’s mouseEnabled variable is set to false, it receives no mouse-input event notifications. Instead, mouse event dispatches are targeted at the next highest mouse-enabled InteractiveObject instance on the display list. Finding the Mouse Pointer’s Position As we learned earlier, when Flash Player triggers a mouse-event listener-function, it passes that function a MouseEvent object. That MouseEvent object indicates the mouse pointer’s current position with the following instance variables: • localX and localY • stageX and stageY // Register to be notified when the user clicks circle circle.addEventListener(MouseEvent.CLICK, clickListener); } // Handles MouseEvent.CLICK events targeted at circle. private function clickListener (e:MouseEvent):void { trace("User clicked: " + e.target); DisplayObject(e.target).x += 10; } } } Figure 22-1. ClickSensor output Example 22-3. A mouse event listener registered with a partially obscured object (continued) Click here 542 | Chapter 22: Interactivity The localX and localY variables give the mouse pointer’s position in the event tar- get’s coordinate space (i.e., relative to the event target’s top left corner). Meanwhile, the stageX and stageY variables give mouse pointer’s position in the Stage instance’s coordinate space (i.e., relative to the Stage instance’s top left corner). Example 22-4 demonstrates the use of localX, localY, stageX, and stageY. In the example, we create a TextField object, add it directly to the Stage instance, and then position it at coordinate (100, 100). When the user clicks the TextField object, we output the location of the mouse pointer relative to both the TextField object (i.e., the event target) and the Stage instance. For example, if the user clicks 10 pixels to the right and 20 pixels down from the TextField object’s top left corner, then the out- put is: Position in TextField's coordinate space: (10, 20) Position in Stage instance's coordinate space: (110, 120) Here’s the code: Example 22-4. Finding the mouse pointer’s position package { import flash.display.*; import flash.events.*; import flash.text.*; public class MousePositionChecker extends Sprite { public function MousePositionChecker ( ) { // Create the TextField var textfield:TextField = new TextField( ); textfield.text = "Click here"; textfield.autoSize = TextFieldAutoSize.LEFT; textfield.x = 100; textfield.y = 100; // Add textfield to the display list, as a direct child of // the Stage instance stage.addChild(textfield); // Register with textfield for click events textfield.addEventListener(MouseEvent.CLICK, clickListener); } // When textfield is clicked, display the mouse pointer position private function clickListener (e:MouseEvent):void { // Mouse pointer position relative to the TextField object trace("Position in TextField's coordinate space: (" + e.localX + ", " + e.localY + ")"); // Mouse pointer position relative to the Stage instance trace("Position in Stage instance's coordinate space: (" + e.stageX + ", " + e.stageY + ")"); } } } [...]... rect1.graphics.beginFill(0x0000FF); rect1.graphics.drawRect(0, 0, 75 , 75 ); rect1.tabEnabled = true; var rect2:Sprite = new Sprite( ); rect2.graphics.lineStyle(1); rect2.graphics.beginFill(0x0000FF); rect2.graphics.drawRect(0, 0, 75 , 75 ); rect2.x = 200; rect2.tabEnabled = true; // Add the rectangles to the display list addChild(rect1); addChild(rect2); Keyboard-Input Events | 5 57 Example 22-10 Handling keyboard events for... keyCode is not supported when an input method editor (IME) is in use For information on IMEs, see the flash.system.IME class in Adobe’s ActionScript Language Reference and Flash Player APIs ➝ Client System Environment ➝ IME class in Adobe’s Programming ActionScript 3.0 Multilocation keys On some keyboards, certain individual key codes represent keys that occur in multiple places on the keyboard For...By updating the position of an object in response to changes in the mouse position, we can make that object appear to follow the mouse Example 22-5 shows the ActionScript 3.0 code for a custom mouse pointer The example combines many of the techniques we learned so far in this book In particular, the example relies on the StageDetector class covered in the section... listener function For example, the following KeyboardEvent.KEY_DOWN listener function detects the pressing of the Escape key by comparing its key code, 27, to the value of keyCode private function keyDownListener (e:KeyboardEvent):void { if (e.keyCode == 27) { trace("The Escape key was pressed"); } } The key codes for all control keys and numeric keypad keys can be accessed via constants of the flash.ui.Keyboard... static variable ESCAPE in place of the literal value 27) : import flash.ui.Keyboard; private function keyDownListener (e:KeyboardEvent):void { if (e.keyCode == Keyboard.ESCAPE) { trace("The Escape key was pressed"); } } Key codes are language and operating-system dependent For a list of the key codes for the keys on a U.S English keyboard, see: http://livedocs.macromedia.com/flash/8/main/00001686.html When... registering for focus events with the Stage instance, we can handle all focus changes that occur within Flash Player Example 22 -7 demonstrates the technique, showing an application that creates two TextField objects, and sets their background color to green whenever they are focused Example 22 -7 Handling focus events globally package { import flash.display.*; import flash.events.*; import flash.text.*; public... else if (e.keyCode == Keyboard.LEFT) { leftPressed = false; } } } } 562 | Chapter 22: Interactivity Mouse Events and Modifier Keys Just as ActionScript offers a convenient way to check whether the Shift or Control keys are down during a keyboard-input event dispatch, ActionScript also enables you to check whether the Shift or Control keys are down during a mouse-input event dispatch To determine whether... position of the custom mouse // pointer to match the position of the system mouse pointer // (For information on converting points between coordinate spaces, // see DisplayObject.globalToLocal( ) in Adobe's ActionScript // Language Reference) var pointInParent:Point = parent.globalToLocal(new Point(e.stageX, e.stageY)); x = pointInParent.x; y = pointInParent.y; // Request post-event screen update so that... stage.addEventListener(FocusEvent.FOCUS_IN, focusInListener); } // Handle all FocusEvent.FOCUS_IN events in this application private function focusInListener (e:FocusEvent):void { Focus Events | 553 Example 22 -7 Handling focus events globally (continued) // Set the background color of the focused TextField object to green TextField(e.target).backgroundColor = 0xFF00FF00; // Set the background color of the TextField... StageDetector object’s setWatchedObject( ) method, passing the CustomMousePointer object as its only argument 6 Assign the CustomMousePointer object to the StageDetector object’s watchedObject instance variable 7 The watchedObject.stage variable is null (because the CustomMousePointer object is not currently on the display list), so set the StageDetector object’s onStage variable to false You can take over from . ); triangle.graphics.lineStyle(1); triangle.graphics.beginFill(0x00FF 00, 1); triangle.graphics.moveTo(25, 0) ; triangle.graphics.lineTo( 50, 25); triangle.graphics.lineTo (0, 25); triangle.graphics.lineTo(25, 0) ; triangle.graphics.endFill(. triangle.graphics.beginFill(0x00FF 00, 1); triangle.graphics.moveTo(25, 0) ; triangle.graphics.lineTo( 50, 25); triangle.graphics.lineTo (0, 25); triangle.graphics.lineTo(25, 0) ; triangle.graphics.endFill(. rect:Sprite = new Sprite( ); rect.graphics.lineStyle(1); rect.graphics.beginFill(0x 000 0FF); rect.graphics.drawRect (0, 0, 1 50, 75 ); someDisplayContainer.addChild(rect); someDisplayContainer.stage.focus