Essential ActionScript 3.0 PHẦN 7 doc

// Create the triangle var triangle:Sprite = new Sprite ; // ...elsewhere in the class, define the listener private function mouseMoveListener e:MouseEvent:void { trace"mouse move"; } A

Trang 1

event target when the event is dispatched The “Default behavior” column lists FlashPlayer’s native response to the event The “Bubbles” column indicates whether theevent 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 handlesthe event Finally, the “Notes” column lists important information regarding theevent’s use.

Spend a little time getting to know Flash Player’s mouse events by perusingTable 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 systemfocus: MouseEvent.MOUSE_MOVE, MouseEvent.MOUSE_OVER, MouseEvent.MOUSE_OUT,

trig-gered when Flash Player has system focus only

Location matters

With one exception, mouse events are not dispatched when the user lates the mouse outside Flash Player’s display area The exception: if the userpresses the primary mouse button within Flash Player’s display area and thenreleases it outside Flash Player’s display area, MouseEvent.MOUSE_UP is dis-patched To be notified when the mouse pointer leaves Flash Player’s displayarea, register for theEvent.MOUSE_LEAVE event, as discussed in the later section

manipu-“Flash Player-Level Input Events.”

Vector graphics ignored in main-class instance

Mouse interactions with vector content drawn via the instance variablegraphics

of a swf file’s main class do not trigger mouse events However, mouse

interac-tions with vector content drawn via the instance variablegraphicsof 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

Trang 2

Events later in this chapter.

The InteractiveObject that was clicked or activated

Trang 3

Mouse pointer moved onto a display object.

The InteractiveObject onto which the mouse pointer moved

When target is a SimpleButton

Trang 4

display object or any of its descendants.

The InteractiveObject that registered the event listener being executed

used while Flash Player has system focus.

The InteractiveObject under the mouse pointer when the scrolling device was used

Trang 5

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 thedesired 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 targetobject

4 Finally, register the function from Step 3 with either the event target (for targetphase notification) or with one of the event target’s ancestors (for capture orbubbling 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 eventconstant for mouse clicking isMouseEvent.CLICK

2 Next, we create a function, clickListener( ), that will be notified ofMouseEvent.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

want to know when the theTextField is clicked, so we’ll need to register ourevent listener with eithertheTextField 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.

Trang 6

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 variabletriangle

// Create the triangle

var triangle:Sprite = new Sprite( );

// 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 objectthat is not on the display list However, such listeners will not be triggered unless oruntil 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";

trace("Mouse was clicked");

}

Trang 7

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,triangleis added to the display list so itcan 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-registrationcode for theMouseEvent.MOUSE_MOVEevent as a template To help get you started, here’sthe code required to register an event listener for theMouseEvent.MOUSE_DOWNevent (thefirst event listed in Table 22-1):

// Add this event-registration code to the class constructor

Example 22-2 Handling MouseEvent.MOUSE_MOVE over a triangle

package {

public class MouseMotionSensor extends Sprite {

public function MouseMotionSensor ( ) {

// Create the triangle

var triangle:Sprite = new Sprite( );

Trang 8

// 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 aMouseEvent.CLICKevent 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

object is partially obscured by a TextField object,textfield When clickListener( ) is

triggered, it movescircle 10 pixels to the right

Example 22-3 A mouse event listener registered with a partially obscured object

package {

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";

Trang 9

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

is obscured bytextfield, thencircledoes not receive theMouseEvent.CLICKtion and, hence, does not move to the right

notifica-It is, however, possible to forcetextfieldto ignore all mouse events, thus allowing

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

When an InteractiveObject instance’smouseEnabledvariable is set tofalse, 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:

// Register to be notified when the user clicks circle

circle.addEventListener(MouseEvent.CLICK, clickListener);

}

// Handles MouseEvent.CLICK events targeted at circle.

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

Trang 10

ThelocalX andlocalY variables give the mouse pointer’s position in the event get’s coordinate space (i.e., relative to the event target’s top left corner) Meanwhile,

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 {

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

// 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 + ")");

}

Trang 11

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 theActionScript 3.0 code for a custom mouse pointer The example combines many ofthe techniques we learned so far in this book In particular, the example relies on the

StageDetector class covered in the section “Custom Event.ADDED_TO_STAGE and

Event.REMOVED_FROM_STAGE events” in Chapter 20 The example alsoincludes two techniques we haven’t yet learned about: coordinate conversion andpost-event screen updates Crossreferences to supporting information are supplied inthe code comments

Example 22-5 A custom mouse pointer

// A display class that replaces the mouse pointer with a new graphic.

// When a CustomMousePointer object is added to the display list,

// it automatically hides the system pointer and begins following

// its location When a CustomMousePointer object is removed from the

// display list, it automatically restores the system mouse pointer.

public class CustomMousePointer extends Sprite {

// Constructor

public function CustomMousePointer ( ) {

// Create a blue triangle to use as the custom mouse pointer

// Register to be notified when this object is added to or removed

// from the display list (requires the custom helper class,

// Handles StageDetector.ADDED_TO_STAGE events

private function addedToStageListener (e:Event):void {

// Hide the system mouse pointer

Mouse.hide( );

// Register to be notified when the system mouse pointer moves

// over, or leaves Flash Player's display area

stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveListener);

Trang 12

stage.addEventListener(Event.MOUSE_LEAVE, mouseLeaveListener); }

// Handles StageDetector.REMOVED_FROM_STAGE events

private function removedFromStageListener (e:Event):void {

// Show the system mouse pointer

Mouse.show( );

// Unregister for mouse events with the Stage instance

stage.removeEventListener(MouseEvent.MOUSE_MOVE, mouseMoveListener); stage.removeEventListener(Event.MOUSE_LEAVE, mouseLeaveListener); }

// Handles Event.MOUSE_LEAVE events

private function mouseLeaveListener (e:Event):void {

// When the mouse leaves Flash Player's display area, hide the // custom pointer Otherwise, the custom mouse pointer and the system // mouse pointer will be shown on the screen at the same time Spooky visible = false;

}

// Handles MouseEvent.MOUSE_MOVE events

// When the mouse moves, update the 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

// The MouseEvent.MOUSE_MOVE has fired, so the system pointer

// must be within Flash Player's display area Therefore, make sure // the custom mouse pointer is visible (it might have been hidden // because the system pointer left Flash Player's display area) // This code is unfortunate here it rightfully belongs in an

// Event.MOUSE_ENTER event, but no such event exists in

Trang 13

Example 22-6 shows a simple example class that demonstrates the use of the

CustomMousePointer class shown in Example 22-5.

Reader exercise: Try following the thread of execution that starts in the

CustomMousePointerDemo constructor from Example 22-6 and ends with the cation of the CustomMousePointer class’s instance method addedToStageListener( )

invo-method You should eventually find yourself mentally executing the code in the

StageDetector class from Chapter 20, which will help you become more intimate

with the display API and the display list To help you get started, here are the firstseven steps in the execution thread:

1 Create a new CustomMousePointer object.

2 Run constructor method for the CustomMousePointer object created in Step 1.

3 Draw a blue triangle in the CustomMousePointer object.

4 Create a new StageDetector object, passing the CustomMousePointer object to its

constructor

5 Invoke StageDetector object’s setWatchedObject( ) method, passing the CustomMousePointer object as its only argument.

6 Assign the CustomMousePointer object to the StageDetector object’s

7 The watchedObject.stage variable is null (because the CustomMousePointer object is not currently on the display list), so set the StageDetector object’s

You can take over from here have fun!

Example 22-6 A demonstration class showing the use of CustomMousePointer

package {

// Demonstrates the use of the CustomMousePointer class

public class CustomMousePointerDemo extends Sprite {

private var pointer:CustomMousePointer;

// Constructor

public function CustomMousePointerDemo ( ) {

// Create a new CustomMousePointer object and add it to the display

// list The act of adding the CustomMousePointer object to the

// display list automatically replaces the system mouse pointer with

// the CustomMousePointer object.

pointer = new CustomMousePointer( );

addChild(pointer);

}

Trang 14

Mentally executing code is a good way to understand how a program

works and a nutritious part of a healthy programming diet.

Handling Mouse Events “Globally”

Flash Player defines no truly global mouse events However, by registering for mouse

events with the Stage instance, we can handle mouse interaction no matter where it

occurs within Flash Player’s display area For example, the following code registers

mouseMoveListener( ) with the Stage instance forMouseEvent.MOUSE_MOVE events:

package {

public class GlobalMouseMotionSensor extends Sprite {

public function GlobalMouseMotionSensor ( ) {

stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveListener);

}

trace("The mouse moved.");

public class GlobalMouseDownSensor extends Sprite {

public function GlobalMouseDownSensor ( ) {

stage.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownListener);

}

private function mouseDownListener (e:MouseEvent):void {

trace("The primary mouse button was pressed.");

Trang 15

When a mouse-button press occurs over an “empty” region of Flash Player’s displayarea (i.e., where no program-created display object resides), the event is targeted at

the Stage instance When a mouse-button press occurs over any other display object,

the event is targeted at that object Hence, by checking the event target within

mouseDownListener( ), we can write code that responds specifically to mouse-button

presses over empty regions of Flash Player’s display area The following application,

CircleClicker, demonstrates the technique When the user clicks an empty region of Flash Player’s display area, CircleClicker draws a randomly sized and colored circle But when the user clicks a circle, CircleClicker removes that circle from the screen.

package {

public class CircleClicker extends Sprite {

public function CircleClicker ( ) {

stage.addEventListener(MouseEvent.CLICK, clickListener);

}

// If the event target is the Stage instance

if (e.target == stage) {

// draw a circle

drawCircle(e.stageX, e.stageY);

} else {

// otherwise, the event target must be a Sprite object

// containing a circle, so remove it

removeChild(DisplayObject(e.target));

}

public function drawCircle (x:int, y:int):void {

var randomColor:int = Math.floor(Math.random( )*0xFFFFFF);

var randomSize:int = 10 + Math.floor(Math.random( )*150);

var circle:Sprite = new Sprite( )

Trang 16

Focus Events

When an object has keyboard focus, it acts as the logical recipient of all keyboard

input and becomes the target of all keyboard-input event dispatches An object cangain keyboard focus either programmatically (via theStage class’s instance variable

However, in order to gain keyboard focus, an object must be an instance of a class

that inherits from InteractiveObject Furthermore, in Flash Player, only one object

can have keyboard focus at a time

For brevity, the term “keyboard focus” is normally shortened to

“focus.”

Focusing Objects Programmatically

To focus an object programmatically, we assign that object to the Stage instance’s

For example, the following code creates a Sprite object and then immediately focuses

it (it assumes thatsomeDisplayContainer is on the display list):

var rect:Sprite = new Sprite( );

Focusing Objects with the Keyboard

To focus an object via the keyboard, the user presses the Tab key or arrow keys.However, in order for an object to receive focus via those keys, it must be part of

Flash Player’s tab order The tab order is the set of all objects on the display list that

can potentially receive focus via the keyboard The tab order also determines thesequence in which objects receive focus when the user presses the Tab key

There are two distinct tab orders in Flash Player: the automatic tab order and the

custom tab order The automatic tab order is Flash Player’s default tab order, used

when no custom tab order is defined The automatic tab order includes the followingobjects:

Trang 17

• Instances of TextField that are on the display list and have theirtypevariable set

• Instances of Sprite or MovieClip that are on the display list and have their

• Instances of SimpleButton that are on the display list

When the automatic tab order is in use, and the user presses the Tab key, focusmoves away from the currently focused object to the next object in the automatic taborder The sequence of Flash Player’s automatic tab order is determined by the loca-tions of the objects it contains, proceeding visually from left to right, then top to bot-tom (regardless of the position of those objects in the display hierarchy)

In contrast to the automatic tab order, the custom tab order is a program-defined

tab-order including an arbitrary sequence of objects whose tabIndexvariable is set to anonnegative integer The following types of objects can be included in the customtab order:

• Instances of TextField whosetype variable is set toTextFieldType.INPUT

• Instances of Sprite, MovieClip, or SimpleButton

When at least one object currently on the display list has atabIndexvariable set to 0

or greater, the custom tab order is used, and pressing the Tab key causes objects to

be focused according to theirtabIndexvalue, from lowest to highest For example, ifthe currently focused object has a tabIndexvalue of 2, and the Tab key is pressed,then the object withtabIndex3 is focused If the Tab key is pressed again, the object

the object with the lower depth comes first in the tab order Objects without anexplicitly assignedtabIndex value are excluded from the tab order

Regardless of whether the automatic tab order or the custom tab order is currently in

use, when an instance of the Sprite, MovieClip, or SimpleButton class is focused with

the Tab key, then the user can subsequently use the four arrow keys to change focus

to an object located in a specific direction (up, down, left, or right)

To exclude an object from the automatic or custom tab order, we set itstabEnabledvariable tofalse Objects with_visibleset tofalseare automatically excluded fromthe tab order To exclude all of a given display-object container’s descendants fromthe automatic or custom tab order, we set itstabChildren variable tofalse

By default, Flash Player displays a yellow rectangle around Sprite, MovieClip, or SimpleButton instances when they are focused via the keyboard To disable the yel-

low rectangle for an individual object, we set its focusRect variable to false To

disable the yellow rectangle for all objects, we set the Stage instance’sstageFocusRectvariable tofalse Note that the value of thestageFocusRectvariable is not reflected

by the focusRect variable of individual objects However, setting an individualobject’sfocusRect variable overrides thestageFocusRect variable’s setting

Trang 18

Focusing Objects with the Mouse

Just as the user can assign keyboard focus using the Tab key or the arrow keys, theuser can also assign focus by clicking an object with the primary mouse button

However, by default, only SimpleButton and TextField instances can be focused with the mouse To allow the user to focus a Sprite or MovieClip instance with the mouse,

we use one of the following approaches:

• Set the instance’sbuttonModevariable totrue(while ensuring that itstabEnabledvariable is not explicitly set tofalse)

• Set the instance’stabEnabled variable totrue

• Assign a nonnegative integer to the instance’stabIndexvariable (while ensuringthat itstabEnabled variable is not explicitly set tofalse)

For example, the following code creates a Sprite object that receives keyboard focus

Furthermore, when the tabEnabledvariable of a Sprite, MovieClip, or SimpleButton

instance is explicitly set to false, then that instance cannot be focused with the

mouse Likewise, when a Sprite, MovieClip, or SimpleButton instance is a descendant

of a container whosetabChildrenvariable is set tofalse, then that instance cannot

be focused with the mouse However, due to a Flash Player bug, a TextField object

whose tabEnabled variable is explicitly set to false can still be focused with the

mouse Likewise, due to the same bug, a TextField object that is a descendant of a

container whose tabChildren variable is set to false can still be focused with themouse

Handling descendant focus through a single ancestor

To instruct ActionScript to treat a display object container and all of its descendants

as a group that can receive focus via a single mouse click, follow these steps:

Trang 19

1 Enable mouse-based focusing for the container by setting the container’s

nonnegative integer

2 Disable mouse interaction for the container’s children by setting the container’s

Flash Player’s Focus Events

When an application’s keyboard focus changes to a new object (as described in theprevious three sections), Flash Player dispatches one or more focus events describingthe change Table 22-2 lists Flash Player’s built-in focus-event types For each type of

event, the “Event type” column lists the FocusEvent-class constant that indicates the

event type’s official string name The “Description” column describes the specificuser action that triggers the event The “Target” column lists the object that serves asthe event target when the event is dispatched The “Default behavior” column listsFlash Player’s native response to the event The “Bubbles” column indicates whetherthe event has a bubbling phase Finally, the “Datatype of object passed to listenerfunction” column specifies the datatype of the object passed to the listener functionthat handles the event

Trang 20

Focus has been gained by a given object.

The object that gained focus (Use the FocusEvent

Focus has been lost by a given object.

The object that lost focus (Use the FocusEvent

User has attempted to change focus via the keyboard.

The currently focused object (Use the FocusEvent

Flash Player changes the focus Can be canceled via the

User has attempted to change focus via the mouse.

The currently focused object (Use the FocusEvent

Flash Player changes the focus Can be canceled via the

Trang 21

As Table 22-2 indicates, theFocusEvent.FOCUS_INandFocusEvent.FOCUS_OUTevents areused to detect when an object has gained or lost focus By the time those two events aredispatched, the change in focus has already occurred By contrast, theFocusEvent.KEY_

object is about to gain or lose focus, but has not yet gained or lost it An applicationtypically uses the FocusEvent.KEY_FOCUS_CHANGE and FocusEvent.MOUSE_FOCUS_CHANGEevents to prevent the user from changing focus via the keyboard or mouse, perhaps inorder to force the user to interact with a specific part of the interface, such as a modaldialog box

As with mouse events, Flash Player defines no truly global focus events However, by

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 {

public class GlobalFocusSensor extends Sprite {

public function GlobalFocusSensor ( ) {

// Create text fields

var field1:TextField = new TextField( );

// Handle all FocusEvent.FOCUS_IN events in this application

private function focusInListener (e:FocusEvent):void {

Trang 22

Focus events can also be handled by listeners registered with the event target or withany of the event target’s display ancestors Example 22-8 shows an application that

creates an input TextField that, once focused, cannot be unfocused until at least

three characters have been entered Similar code is often found in applications thatvalidate input entered via fill-in forms, such as a login screen or a product orderform

// Set the background color of the focused TextField object to green

// Demonstrates how to handle FocusEvent.FOCUS_IN events for a single

// object Creates a TextField that, once focused, cannot be unfocused

// until at least three characters have been entered.

public class ObjectFocusSensor extends Sprite {

private var namefield:TextField;

private var passfield:TextField;

public function ObjectFocusSensor ( ) {

// Create text fields

namefield = new TextField( );

Trang 23

Keyboard-Input Events

Flash Player dispatches keyboard-input events when the user presses or releases thekeys on a keyboard Broadly speaking, keyboard input events are typically used totrigger a response from either the application as a whole or from a specific interfaceelement For example, pressing the “S” key might trigger a global “save user data”command while pressing the Down Arrow key might select an item in a specificmenu component

Keyboard-input events that trigger application-wide commands are typically

han-dled globally, by listeners registered with Flash Player’s Stage instance By contrast,

keyboard-input events that trigger a specific interface-element response are typicallyhandled by listeners registered with the object that currently has keyboard focus

Flash Player’s keyboard-input events are intended for use when

devel-oping keyboard-controlled applications but are not suitable for

responding to textual input in TextField objects To respond to

section “Text-Input Events.”

Table 22-3 lists Flash Player’s built-in keyboard-event types For each type of event,

the “Event type” column lists the KeyboardEvent-class constant that indicates the

event type’s official string name The “Description” column describes the specificuser action that triggers the event The “Target” column lists the object that serves asthe event target when the event is dispatched The “Default behavior” column lists

// Add text fields to the display list

// Handles all focus change events targeted at namefield

private function focusChangeListener (e:FocusEvent):void {

if (e.target == namefield && namefield.text.length < 3) {

trace("Name entered is less than three characters long");

Trang 24

Flash Player’s native response to the event Unlike mouse events and focus events,keyboard events have no default behavior The “Bubbles” column indicates whetherthe event has a bubbling phase Finally, the “Datatype of object passed to listenerfunction” column specifies the datatype of the object passed to the listener functionthat handles the event.

Note that keyboard events are not dispatched unless Flash Player has system focus To benotified when Flash Player gains or loses system focus, register for theEvent.ACTIVATE

Events”)

Global Keyboard-Event Handling

As with mouse events and focus events, Flash Player defines no truly global

key-board events However, by registering for keykey-board events with the Stage instance,

we can handle all keyboard interaction whenever it occurs while Flash Player has tem focus Example 22-9 demonstrates the technique, showing a simplified class thatdisplays a debugging message whenever a key is pressed

sys-Table 22-3 Flash Player Keyboard Events

Event type Description Target

Default behavior Bubbles

Datatype of object passed to listener function

KeyboardEvent.KEY_DOWN Key depressed Either the

InteractiveObject

with keyboard focus or, if no object is focused,

the Stage

instance

KeyboardEvent.KEY_UP Key released Either the

InteractiveObject

with keyboard focus or, if no object is focused,

the Stage

instance

Example 22-9 Handling keyboard events globally

package {

public class GlobalKeyboardSensor extends Sprite {

public function GlobalKeyboardSensor ( ) {

// Register to be notified whenever a key is pressed

Trang 25

Object-Specific Keyboard-Event Handling

As described in Table 22-3, when no object has keyboard focus, the Stage instance is the target of all keyboard event dispatches By contrast, when an InteractiveObject

instance has keyboard focus, that instance is the target of all keyboard events patched by Flash Player

dis-Hence, to respond to keyboard input that is directed at a particular object, we ter listeners with that object Example 22-10 demonstrates, showing an application

regis-that creates two Sprite objects,rect1andrect2 Whenrect1is focused, and a key ispressed, the application movesrect1to the right Whenrect2is focused, and a key

is pressed, the application rotatesrect2

stage.addEventListener(KeyboardEvent.KEY_DOWN, keyDownListener);

}

// This function is invoked whenever a key is pressed while

// Flash Player has system focus

private function keyDownListener (e:KeyboardEvent):void {

trace("A key was pressed.");

public class ObjectKeyboardSensor extends Sprite {

public function ObjectKeyboardSensor ( ) {

// Create the rectangles

var rect1:Sprite = new Sprite( );

Trang 26

Now that we know how to detect when the user presses or releases a key on the

key-board, let’s explore how to determine which key was pressed or released.

Determining the Most Recently Pressed or Released Key

Flash Player assigns an arbitrary numeric identifier, known as a key code, to all

detectable keys on the keyboard To determine the key code for the most recently

pressed or released key, we retrieve the value of the KeyboardEvent class’s instance

variable keyCode within a KeyboardEvent.KEY_UP or KeyboardEvent.KEY_DOWN listenerfunction, as shown in Example 22-11

// Register rectangles for keyboard events

rect1.addEventListener(KeyboardEvent.KEY_DOWN, rect1KeyDownListener);

rect2.addEventListener(KeyboardEvent.KEY_DOWN, rect2KeyDownListener);

}

// Executed when rect1 has focus and a key is pressed

private function rect1KeyDownListener (e:KeyboardEvent):void {

Sprite(e.target).x += 10;

}

// Executed when rect2 has focus and a key is pressed

private function rect2KeyDownListener (e:KeyboardEvent):void {

// Displays the key code for any key pressed.

public class KeyViewer extends Sprite {

private var keyoutput:TextField;

public function KeyViewer ( ) {

keyoutput = new TextField( );

keyoutput.text = "Press any key ";

Trang 27

To detect the pressing or releasing of a specific key, we compare that key’s key code

to the value of the KeyboardEvent class’s instance variable keyCode within a

followingKeyboardEvent.KEY_DOWNlistener function detects the pressing of the Escapekey by comparing its key code, 27, to the value ofkeyCode

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

con-stants of the flash.ui.Keyboard class Hence, the preceding code would normally be

written as follows (notice the use of the Keyboard class’s static variable ESCAPE inplace of the literal value 27):

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 writing expressions that detect the pressing or releasing of a key that is not

included among the flash.ui.Keyboard constants, always follow these steps:

1 Run the KeyViewer application from Example 22-11 on a computer with the

operating system and keyboard of the target user

2 Press the desired key

3 Record the returned key code in a constant

4 Use the constant from Step 3 when detecting the pressing or releasing of thedesired key

// Display the key code for the key that was pressed

keyoutput.text = "The key code for the key you pressed is: "

Trang 28

For example, suppose we wish to detect the pressing of the “A” key on a computer

running Mac OS with a U.S English keyboard We run KeyViewer and press the A key In response, the KeyViewer application displays the key code 65 We then record that key code in a constant of a custom class, perhaps named KeyConstants,

as follows:

public static const A_KEY:int = 65;

Then, to detect the pressing of the A key, we use the following code:

public static const A_KEY:int = 65;

public function AKeySensor ( ) {

Note that theKeyboardEventclass’s instance variablekeyCodeis 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 SystemEnvironment➝ IME class in Adobe’s Programming ActionScript 3.0

Enter key To distinguish between these multiposition keys, we use the KeyboardEvent

Trang 29

class’s instance variable keyLocation, whose value indicates a logical position,

expressed as one of the four constants defined by the flash.ui.KeyLocation class (LEFT,

show-ing aKeyboardEvent.KEY_DOWNlistener function that outputs one debugging message forthe pressing of the left Shift key and another for the pressing of the right Shift key:

if (e.keyCode == Keyboard.SHIFT) {

if (e.keyLocation == KeyLocation.LEFT) {

trace("The left Shift key was pressed");

} else if (e.keyLocation == KeyLocation.RIGHT) {

trace("The right Shift key was pressed");

}

Detecting Multiple Simultaneous Key Presses

To detect the pressing of the Shift key or the Control key (Command key on

Macintosh) in combination with any other key, we use the KeyboardEvent class’s

instance variables shiftKey and ctrlKey within a KeyboardEvent.KEY_DOWN listenerfunction For example, the following simple application detects the pressing of thekey combination Control+S (Command+S on Macintosh):

package {

public class CtrlSSensor extends Sprite {

public static const S_KEY:int = 83;

public function CtrlSSensor ( ) {

}

if (e.keyCode == CtrlSSensor.S_KEY

&& e.ctrlKey == true) {

trace("Ctrl+S was pressed");

}

In the standalone and web browser plug-in versions of Flash Player,

ActionScript cannot detect the pressing of the Alt key (or, for that

mat-ter, the F10 key).

To detect the simultaneous pressing of two or more arbitrary keys other than theShift key and the Control key, we must manually track each key’s current state The

Trang 30

following code demonstrates the technique, showing an application that displays adebugging message when the Left arrow key and the Up arrow key are both down.Similar code might be used to steer a car or a spaceship diagonally in a video game.

package {

import flash.ui.*;

// Detects the simultaneous pressing of the Up Arrow and Left Arrow keys

public class UpLeftSensor extends Sprite {

// Tracks the state of the Up Arrow key

// (true when pressed; false otherwise)

private var upPressed:Boolean;

// Tracks the state of the Left Arrow key

// (true when pressed; false otherwise)

private var leftPressed:Boolean;

public function UpLeftSensor ( ) {

// Register for keyboard events

stage.addEventListener(KeyboardEvent.KEY_UP, keyUpListener);

}

// Handles KeyboardEvent.KEY_DOWN events

// Make a note of whether the Up Arrow key or Left Arrow

// key was pressed

// If the Up Arrow key and the Left Arrow key are both pressed

if (upPressed && leftPressed) {

// take some application-specific action, such as steering a

// spaceship diagonally and up and to the left

trace("Up Arrow key and Left Arrow key are both pressed");

}

// Handles KeyboardEvent.KEY_UP events

private function keyUpListener (e:KeyboardEvent):void {

// Make a note of whether the Up Arrow key or Left Arrow

// key was released

Trang 31

Mouse Events and Modifier Keys

Just as ActionScript offers a convenient way to check whether the Shift or Controlkeys 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 patch To determine whether the Shift key or the Control key is depressed during a

dis-mouse-input event dispatch, we use the MouseEvent class’s instance variables

exam-ple, the following code outputs a debugging message when a mouse click occurswhile the Shift key is depressed Similar code might be used in a drawing program toconstrain the dragging of an object to the horizontal or vertical axis

package {

public class ControlClickSensor extends Sprite {

public function ControlClickSensor ( ) {

Determining the Character Associated with a Key

Earlier we learned how to determine the key code for the most recently pressed orreleased key To retrieve the actual character associated with the most recently

pressed or released key, we check the value of the KeyboardEvent class’s instance

variablecharCode within aKeyboardEvent.KEY_UPorKeyboardEvent.KEY_DOWN listenerfunction

When a U.S English keyboard is used,charCodeindicates the ASCII character code

of the character that logically corresponds to the most recently pressed or releasedkey In some cases, the charCode value for a single key has two potential values,depending on whether or not the Shift key is depressed For example, the charactercode for the key marked “S” on a U.S English keyboard is 115 when the Shift key isnot depressed, but 83 when Shift is depressed For keys that display characters with

no ASCII value,KeyboardEvent.charCode has the value 0

When a non-U.S English keyboard is used,charCode indicates the ASCII charactercode for the equivalent key on a U.S English keyboard For example, on a Japanesekeyboard, the key in the U.S English “A” position displays the glyph , but

Trang 32

charCodestill returns either 97 or 65 (ASCII’s “a” and “A”, respectively)—not 12385(the Unicode code point for ).

To convert a character code into an actual string, we use the String class’s instance method fromCharCode( ) Example 22-12 demonstrates the technique by updating the KeyViewer class (presented earlier in Example 22-11) to display the character

associated with the most recently pressed key

The result of running the KeyViewer application from Example 22-12 and pressing

the key marked “S” on a U.S English keyboard is:

The key code for the key you pressed is: 83

The character code for the key you pressed is: 115

The character for the key you pressed is: s

The result of running the KeyViewer application from Example 22-12 and pressing

the Shift key in combination with the key marked “S” on a U.S English keyboard is:

The key code for the key you pressed is: 83

The character code for the key you pressed is: 83

The character for the key you pressed is: S

Example 22-12 Retrieving a pressed key’s key code and character code

// Displays the key code and character code for any key pressed.

public class KeyViewer extends Sprite {

private var keyoutput:TextField;

public function KeyViewer ( ) {

keyoutput = new TextField( );

keyoutput.text = "Press any key ";

keyoutput.text = "The key code for the key you pressed is: "

Trang 33

As with the KeyboardEvent class’s instance variable keyCode, charCode is not ported when an input method editor is in use, and is not intended as a means ofreceiving textual input To retrieve textual input, we use theTextEvent.TEXT_INPUT

sup-event in conjunction with a TextField object, as described in the next section.

Text-Input Events

Flash Player dispatches text-input events in the following situations:

• When the user adds new text to an input text field

• When the user activates an “event:”-protocol hypertext link in a text field (byclicking the link)

• When a text field is scrolled, either programmatically or by the user

Table 22-4 lists Flash Player’s built-in text-input fsevent types For each type ofevent, the “Event Type” column lists the class constant that indicates the event type’sofficial string name The “Description” column describes the specific user action thattriggers the event The “Target” column lists the object that serves as the event tar-get when the event is dispatched The “Default behavior” column lists Flash Player’snative response to the event The “Bubbles” column indicates whether the event has

a bubbling phase Finally, the “Datatype of object passed to listener function” umn specifies the datatype of the object passed to the listener function that handlesthe event

Trang 35

Like mouse events, keyboard events, and focus events, a text-input event can be dled by listeners registered with the event target or with any of that target’s displayancestors In the coming sections, however, we’ll focus solely on using listeners regis-tered with the event target.

han-Let’s take a closer look at the four events in Table 22-4

The TextEvent.TEXT_INPUT and Event.CHANGE Events

the user Specifically, the following techniques for entering text can trigger the

• Pressing a key on the keyboard

• Pasting text via keyboard shortcuts or Flash Player’s built-in context menu(accessed via a secondary mouse click)

• Speaking into speech recognition software

• Composing text content with an input method editor

to an input text field and provides the application with an opportunity to eitherthwart or allow that attempt The TextEvent.TEXT_INPUT event offers a convenientway to accessing the text content being added to a text field before it is actuallyadded to that text field By contrast, theEvent.CHANGEevent indicates that a user’sattempt to add new text to an input text field has succeeded, and that Flash Playerhas finished updating the text field’s content accordingly

The generalized code required to register a listener with a TextField object for the

theTextField.addEventListener(TextEvent.TEXT_INPUT, textInputListener);

The generalized event-listener code required for aTextEvent.TEXT_INPUT listener is:

private function textInputListener (e:TextEvent):void {

}

To prevent user-entered text from appearing in a TextField, we use the Event class’s instance method preventDefault( ), as follows:

private function textInputListener (e:TextEvent):void {

// Stop user-entered text from appearing

e.preventDefault( );

}

To access the text entered by the user, we use the TextEvent class’s instance variable

text, as follows:

// Output a debugging message showing the user-entered text

trace(e.text);

Trang 36

TheTextEvent.TEXT_INPUTevent might be used to auto-format user input in a fill-inform application, as shown in Example 22-13 In the example, all text entered into

an input text field is converted to uppercase Similar code might be used in the ping address” section of an online product-order form

“ship-Now let’s turn to theEvent.CHANGEevent The generalized code required to register a

listener with a TextField object for theEvent.CHANGE event is as follows:

theTextField.addEventListener(Event.CHANGE, changeListener);

The generalized event listener code required for anEvent.CHANGE listener is:

private function changeListener (e:Event):void {

public class UppercaseConverter extends Sprite {

private var inputfield:TextField;

public function UppercaseConverter ( ) {

inputfield = new TextField( );

// Triggered whenever the user attempts to add new text to inputfield

// Prevent the user-supplied text from being added to the text field

// Set the insertion point (caret) to the end of the new text, so

// the user thinks they entered the text

var newCaretIndex:int = inputfield.caretIndex + e.text.length;

inputfield.setSelection(newCaretIndex, newCaretIndex);

}

Trang 37

TheEvent.CHANGEevent might be used to synchronize the content of two text fields,

as shown in Example 22-14 The example shows an excerpt from a hypotheticalpanel widget containing labeled photos For simplicity, the example includes onephoto label only, without its corresponding image The code uses Event.CHANGEtokeep the panel’s title bar updated to match the name of the currently selected photo.For review, the code also uses the FocusEvent.FOCUS_IN and FocusEvent.FOCUS_OUTevents to update the panel title when the user changes focus in the application

Example 22-14 Synchronizing two TextField objects

package {

public class PhotoPanel extends Sprite {

private static const defaultTitle:String =

"Photo Viewer [No photo selected]";

private static const defaultPhotoName:String =

"Enter Photo Name Here";

private var title:TextField;

private var photoname:TextField;

public function PhotoPanel ( ) {

// Create the TextField object for the panel's title bar

title = new TextField( );

// Create a title TextField object for an individual photo

photoname = new TextField( );

Trang 38

photoname.addEventListener(FocusEvent.FOCUS_IN, photoFocusInListener); photoname.addEventListener(FocusEvent.FOCUS_OUT,

photoFocusOutListener);

// Register with the stage for focus out events

stage.addEventListener(FocusEvent.FOCUS_OUT, panelFocusOutListener); }

// Triggered whenever new text is added to photoname

private function changeListener (e:Event):void {

// The photo's name changed, so update title to match photoname's text

// Triggered whenever photoname gains focus

private function photoFocusInListener (e:FocusEvent):void {

// If the photo hasn't been named yet

// Triggered whenever photoname loses focus

private function photoFocusOutListener (e:FocusEvent):void {

// If the user didn't enter a name for the photo

// Triggered whenever any object loses focus

private function panelFocusOutListener (e:FocusEvent):void {

// If no object is currently focused

Trang 39

The Event.SCROLL Event

TextField object: scrollH, scrollV, maxscrollH, or maxscrollV In other words, the

maxi-The generalized code required to register a listener with a TextField object for the

theTextField.addEventListener(Event.SCROLL, scrollListener);

The generalized event listener code required for aEvent.SCROLL listener is:

private function scrollListener (e: Event):void {

}

Typically, theEvent.SCROLLevent is used to synchronize a scrollbar interface with thecontent of a text field, as shown in Example 22-15 The scrollbar in the example hasthe following features:

• Can be applied to any TextField object

• Can be dragged by the mouse to scroll a text field vertically

• Automatically updates in response to changes in the text field’s size, content, orscroll position

For the sake of simplicity, however, the scrollbar does not include up and downscrolling buttons Example 22-15 uses many of the techniques we’ve learned in thischapter and also contains some techniques that we have not yet studied; whereappropriate, crossreferences to supplemental topics are provided

Example 22-15 Using Event.SCROLL in a scrollbar implementation

// A simple draggable scrollbar that automatically updates its size

// in response to changes in the size of a specified text field.

// Usage:

// var theTextField:TextField = new TextField( );

Trang 40

// var scrollbar:ScrollBar = new ScrollBar(theTextField);

// someContainer.addChild(scrollbar);

public class ScrollBar extends Sprite {

// The text field to which this scrollbar is applied

private var t:TextField;

// The current height of the text field If the text field's height // changes, we update the height of this scrollbar.

private var tHeight:Number;

// The background graphic for the scrollbar

private var scrollTrack:Sprite;

// The scrollbar's draggable "scroll thumb"

private var scrollThumb:Sprite;

// The scrollbar's width

private var scrollbarWidth:int = 15;

// The minimum height of the scrollbar's scroll thumb

private var minimumThumbHeight:int = 10;

// A flag indicating whether the user is currently dragging the

// scroll thumb

private var dragging:Boolean = false;

// A flag indicating whether the scrollbar should be redrawn at the next // scheduled screen update

private var changed:Boolean = false;

// Constructor.

// @param textfield The TextField object to which to apply

// this scrollbar.

public function ScrollBar (textfield:TextField) {

// Retain a reference to the TextField to which this

// Create the scrollbar background

scrollTrack = new Sprite( );

scrollTrack.graphics.lineStyle( );

scrollTrack.graphics.beginFill(0x333333);

scrollTrack.graphics.drawRect(0, 0, 1, 1);

addChild(scrollTrack);

// Create the draggable scroll thumb on the scrollbar

scrollThumb = new Sprite( );

Tiêu đề	Essential ActionScript 3.0 PHẦN 7 doc
Trường học	University of Example
Chuyên ngành	Computer Science
Thể loại	Tài liệu hướng dẫn
Năm xuất bản	2023
Thành phố	Hà Nội

Định dạng
Số trang	94
Dung lượng	344,99 KB