アプリケーションは通常、1 つのキーまたは一連のキーに応答して何らかのアクションを実行します。Ctrl + q キーを押すとアプリケーションが終了するのはその一例です。Flash Player はベースとなるオペレーティングシステムの基本的なキー組み合わせ機能をすべてサポートしていますが、開発者が任意のキーまたはキーの組み合わせをオーバーライドまたはトラップしてカスタムアクションを実行することも可能です。

キーボードイベントの処理

場合によっては、キーをグローバルにトラップし、ユーザーがアプリケーションのどこを操作しているかにかかわらず、そのキーストロークをアプリケーションで認識してアクションを実行することが必要な場合があります。Flex は、ユーザーがボタンの上にマウスを移動している場合も、フォーカスが TextInput コントロール内にある場合も、グローバルにキーボードイベントを認識します。

グローバルなキープレスの一般的な処理方法は、KeyboardEvent.KEY_DOWN または KeyboardEvent.KEY_UP イベントのリスナーをアプリケーション上に作成することです。アプリケーションコンテナのリスナーは、フォーカスがブラウザコントロール内またはブラウザの外側でなくアプリケーション内にあるかぎり、キーが押されるたびにトリガされます。ハンドラ内では、KeyboardEvent クラスの charCode プロパティや keyCode プロパティを使用してキーコードまたは文字コードを検査します。次に例を示します。

<?xml version="1.0"?>
<!-- events/TrapAllKeys.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="initApp()">
  <mx:Script><![CDATA[
     private function initApp():void {
        application.addEventListener(KeyboardEvent.KEY_UP, keyHandler);
     }

     private function keyHandler(event:KeyboardEvent):void {
           trace(event.keyCode + "/" + event.charCode);
     }
  ]]></mx:Script>

  <mx:TextInput id="myTextInput"/>

</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

この例を実行するには、まず、アプリケーションの内側で TextInput コントロールなどをクリックして、それにフォーカスを設定する必要があります。

UIComponent を拡張するクラスはすべて keyUp イベントと keyDown イベントを送出するので、フォーカスが各コンポーネントにあるときに押されたキーをトラップすることもできます。次に例を示します。

<?xml version="1.0"?>
<!-- events/TrapKeysOnTextArea.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:Script><![CDATA[
     private function keyHandler(event:KeyboardEvent):void {
           trace(event.keyCode + "/" + event.charCode);
     }
  ]]></mx:Script>

  <mx:TextInput id="my_input" keyUp="keyHandler(event)"/>
  
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

keyCode プロパティと charCode プロパティについて

keyCode プロパティと charCode プロパティを使用することで、どのキーが押されたかを判断し、その結果として他のアクションをトリガできます。keyCode プロパティは、キーボードのキーの値に対応する数値です。charCode プロパティは、現在の文字セットにおけるそのキーの数値です。デフォルトの文字セットは UTF-8 で、ASCII をサポートしています。キーコード値と文字値の主な違いは、キーコード値がキーボードの特定のキーを表すのに対し、文字値は特定の文字を表すことです。キーコード値では、キーパッドの 1 はキーボードの一番上の行の 1 とは異なりますが、キーボードの 1 と ! を生成するキーは同じです。文字値では、「R」と「r」は区別されます。

キーとキーコードのマッピングはデバイスやオペレーティングシステムによって異なります。ASCII 値については、ActionScript マニュアルに掲載されています。

次の例では、押しているキーの文字値とキーコード値を示します。この例を実行するときは、始める前にアプリケーション内にフォーカスを置く必要があります。

<?xml version="1.0"?>
<!-- charts/ShowCharAndKeyCodes.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="init()">
  <mx:Script><![CDATA[
     import flash.events.KeyboardEvent;

     private function init():void {
        ti1.setFocus();
        this.addEventListener(KeyboardEvent.KEY_DOWN, trapKeys);
     }
            
     private function trapKeys(e:KeyboardEvent):void {
        ta1.text = String(e.toString());
        
        l1.text = numToChar(e.charCode) + " (" + String(e.charCode) + ")";
        l2.text = numToChar(e.keyCode) + " (" + String(e.keyCode) + ")";
     }
    
    private function numToChar(num:int):String {
        if (num > 47 && num < 58) {
            var strNums:String = "0123456789";
            return strNums.charAt(num - 48);
        } else if (num > 64 && num < 91) {
            var strCaps:String = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
            return strCaps.charAt(num - 65);
        } else if (num > 96 && num < 123) {
            var strLow:String = "abcdefghijklmnopqrstuvwxyz";
            return strLow.charAt(num - 97);
        } else {
            return num.toString();
        }
    }        
  ]]></mx:Script>

  <mx:TextInput width="50%" id="ti1"/>
  
  <mx:Canvas id="mainCanvas" width="100%" height="100%">
     <mx:Form>
        <mx:FormItem label="Char (Code)">
           <mx:Label id="l1"/>
        </mx:FormItem>
        <mx:FormItem label="Key (Code)">
           <mx:Label id="l2"/>
        </mx:FormItem>
        <mx:FormItem label="Key Event">
           <mx:TextArea id="ta1" width="500" height="200" editable="false"/>
        </mx:FormItem>
     </mx:Form>
  </mx:Canvas>      
                
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

KeyboardEvent ハンドラの条件演算子を使用して、特定のキーまたはキーの組み合わせを受け取ることができます。次の例では、Shift キーと q キーの組み合わせをリッスンし、両方のキーが同時に押されたときにブラウザウィンドウを閉じます。

<?xml version="1.0"?>
<!-- events/TrapQKey.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="initApp()">
  <mx:Script><![CDATA[
     private function initApp():void {
        application.addEventListener(KeyboardEvent.KEY_UP,keyHandler);
        // Set the focus somewhere inside the application.
        myCanvas.setFocus();
     }

     //This function quits the application if the user presses Shift+Q.
     private function keyHandler(event:KeyboardEvent):void {
        var bShiftPressed:Boolean = event.shiftKey;
        if (bShiftPressed) {
           var curKeyCode:int = event.keyCode;
           if (curKeyCode == 81) { // 81 is the keycode value for the Q key
            // Quit the application by closing the browser using JavaScript.
            // This may not work in all browsers.
            var url:URLRequest = new
            URLRequest("javascript:window.close()");
            navigateToURL(url,"_self");             
           }
        }
     }
  ]]></mx:Script>

  <mx:Canvas id="myCanvas"/>

</mx:Application>

このアプリケーションは、ブラウザで実行するときにフォーカスを持つ必要があります。これにより、アプリケーションはキーボードイベントをキャプチャできます。

KeyboardEvent の優先度について

コントロールとその親の両方に対して keyUp または keyDown イベントリスナーを定義した場合は、イベントバブリングにより、コンポーネントごとにキーボードイベントが送出されます。両者の違いは、KeyboardEvent オブジェクトの currentTarget プロパティが異なる点だけです。

次の例では、アプリケーション、my_vbox コンテナ、my_textinput コントロールが 3 者とも keyUp イベントを keyHandler() イベントリスナー関数に送出します。

<?xml version="1.0"?>
<!-- events/KeyboardEventPrecedence.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="initApp()">
  <mx:Script><![CDATA[
     private function initApp():void {
        application.addEventListener(KeyboardEvent.KEY_UP, keyHandler);
        my_vbox.addEventListener(KeyboardEvent.KEY_UP, keyHandler);
        my_textinput.addEventListener(KeyboardEvent.KEY_UP, keyHandler);

        // Set the focus somewhere inside the application.
        my_textinput.setFocus();
     }

     private function keyHandler(event:KeyboardEvent):void {
           trace(event.target + "(" + event.currentTarget + "): " + event.keyCode + "/" + event.charCode);
     }
  ]]></mx:Script>

  <mx:VBox id="my_vbox">
     <mx:TextInput id="my_textinput"/>
  </mx:VBox>

</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

出力を調べると、KeyboardEvent オブジェクトの target プロパティが同じ値のままであることがわかります。このプロパティは、イベントの元々のディスパッチャ（この場合は my_textinput）を参照するからです。しかし、currentTarget プロパティは現在のノードがバブルしているものによって変わります（この場合は、my_textinput から my_vbox に変わり、アプリケーション自体に変わります）。

イベントリスナーの呼び出し順序はオブジェクト階層によって決まります。addEventListener() メソッドが呼び出された順序ではありません。子コントロールの方がその親より先にイベントを送出します。この例では、キーが押されるたびに、TextInput コントロールが最初にイベントを送出し、その次に VBox コンテナ、最後にアプリケーションがイベントを送出します。

基本オペレーティングシステムまたはブラウザによって認識されるキーまたはキーの組み合わせを処理するとき、通常はオペレーティングシステムまたはブラウザが先にイベントを処理します。例えば Microsoft Internet Explorer では、Ctrl + w キーを押すとブラウザウィンドウが閉じます。Flex アプリケーションで Ctrl + w キーをトラップしても、ActiveX Flash Player がイベントに応答する機会を得る前にブラウザが閉じるので、Internet Explorer ユーザーはそれに気付きません。

キーボードに関連したマウスイベントの処理

MouseEvent クラスとすべての MouseEvent サブクラス（ChartItemEvent、DragEvent、ItemClickEvent、LegendMouseEvent など）は、次のプロパティを備えています。これらを使用して、イベント発生時に特定のキーが押されていたかどうかを判断できます。

次の例では、ユーザーが Shift キーを押しながらマウスボタンを押したかどうかに基づいて、Button コントロールを削除します。

<?xml version="1.0"?>
<!-- events/DetectingShiftClicks.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="initApp()">
  <mx:Script><![CDATA[
     import mx.controls.Button;
  
     private function initApp():void {
        var b1:Button = new Button();
        b1.label = "Button 1";
        
        var b2:Button = new Button();
        b2.label = "Button 2";        
  
        b1.addEventListener(MouseEvent.CLICK, removeButtons);
        b2.addEventListener(MouseEvent.CLICK, removeButtons);
  
        addChild(b1);
        addChild(b2);
     }

     private function removeButtons(event:MouseEvent):void {
        if (event.shiftKey) {
           removeChild(Button(event.currentTarget));
        } else {
           event.currentTarget.toolTip = "You must hold the shiftkey down to delete this button.";  
        }
     }
  ]]></mx:Script>

</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。