サンプルの 実 行 結 果 (F1を 押 した 場 合 ) Keyboard イベントのプロパティ shiftkey, ctrlkey, altkey はそれぞれ true でキーが 押 されている 状 態 を 表 します 尚 charcode の 値 は 英 語 キーボードの 値 です 例 えば

3 キーボードとマウス

　操作性を重視したインタラクティブなアプリケーションを作るにはキーボードやマウスの処理は必

須です。Flex の既存のコンポーネントでもかなり高度な処理が可能ですが、ActionScript でキー

ボードイベントやマウスイベントを使えばより高度な入力処理を自由に作れます。

3-1 キーボードイベント

　ウィンドウのコンポーネントにフォーカスがある状態でキーボードを押すと、キーボードイベントが

発生します。キーボードイベントは KeyboardEvent クラスで KEY_DOWN, KEY_UP が定義され

ています。 押されたキーは

KeyboardEvent クラスの keyCode で、押された文字は charCode で獲

得できます。例えば、

CapsLock が Off の状態で 'A' のキーが押された場合は keyCode=65 （'A'の

キーが押された）

charCode=97（小文字の 'a' が入力された）となります。SHIFT が押された場合は、

keyCode=16、charCode=0　となります。ファンクションキーなどの特殊キーのコードは Keyboard ク

ラスで定義されています。

　　　　 サンプル）　

private function init(): void

{

// TODO テスト用　キーボードイベントを設定

addEventListener(KeyboardEvent.KEY_DOWN, reportKeyDown); }

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

private function reportKeyDown(event:KeyboardEvent):void { var c:String = ""; // 押されたキーを文字列に変換 switch(event.keyCode) { case Keyboard.SHIFT: c = "SHIFT"; break; case Keyboard.CONTROL: c = "CONTROL"; break; default : if(event.keyCode >= Keyboard.F1

&& event.keyCode <= Keyboard.F12) { // ファンクションキーコードは連続しているので c = "F" + (event.keyCode - Keyboard.F1 + 1); } else { // キャラコードを文字列にする c = String.fromCharCode(event.charCode); } break; } // 押されたキーを表示 Alert.show("押されたキー: " + c + " ［キーコード: " + event.keyCode + " キャラクターコード: " + event.charCode + "］");

　　　　　　サンプルの実行結果（Ｆ１を押した場合）

　Keyboard イベントのプロパティ shiftKey, ctrlKey, altKey はそれぞれ true でキーが押されている

状態を表します。

　尚、charCode の値は英語キーボードの値です。例えば Shift + 8 は日本語キーボードでは '(' で

すが、

charCode の値は '*' となります。また、IME などの日本語漢字変換が実行されている状態

では

charCode の値は保証されません。

3-2 マウスイベント

　マウス操作ではマウスイベントが発生します。マウスイベントは MouseEvent クラスで CLICK,

MOUSE_DOWN, MOUSE_UP, MOUSE_MOVE, MOUSE_OVER, MOUSE_OUT などが定義さ

れています。マウスがクリックされると MouseEvent の target プロパティにマウスカーソルの下の

InteractiveObject のインスタンスが設定されます。ただし、target の値は必ずしもイベントリスナーを

登録したオブジェクトとは限りません。イベントリスナーで Event オブジェクトをアクティブに処理し

ているオブジェクトは

currentTarget に設定されます。

　　　　 サンプル）　

private function init(): void

{

// Label にマウスイベント設定

myLabel.addEventListener(MouseEvent.CLICK, textClick); }

// ラベルコントロールがクリックされたら呼び出される

private function textClick(event:MouseEvent): void {

// クリックされたラベル

var selectedText:Label = event.currentTarget as Label; if(selectedText == null) { return; // ラベルでない場合は処理しない } // フォーカスを設定 selectedText.drawFocus(true); }

　　　　 サンプル）　

--- 　MXML　Canvas と Image を定義

<mx:Canvas id="mainCanvas" x="120" y="47" width="466" height="242" backgroundAlpha="1.0" backgroundColor="#FFFFFF">

<mx:Image id="mainImg" width="466" height="242"

alpha="1.0" x="0" y="0"/> </mx:Canvas>

--- 　ActionScript でのマウスイベント処理 （mainImg に Sprite が描画されているとする）

private var selectedObject:Sprite = null;// 選択された図形 Sprite オブジェクト private function init(): void

{

//　Canvas のインスタンスにイベントを設定

mainCanvas.addEventListener(MouseEvent.CLICK, canvasClick); }

//　マウスクリックで呼び出される

private function canvasClick(event:MouseEvent): void {

//　マウスポインタの下のオブジェクト

var objDel:DisplayObject = event.target as DisplayObject; if((objDel == null) || (objDel == this.mainImg) || (objDel == this.mainCanvas)) { return; // 消去対象でないので終了 } //　マウスポインタの下のオブジェクトが Sprite なら消去対象 if((objDel as Sprite) != null) {

selectedObject = objDel as Sprite;

Alert.show("消去してよろしいですか？", "確認",

(Alert.YES | Alert.NO), null,

deleteFromImage, null, Alert.YES); }

// Label の場合

// 通常、イベントはUITextFiledから発生するのでその親（Label）を処理 var lb:Label = event.target.parent as Label;

（以下同様に削除処理をする）

}

//　確認メッセージで YES が押されたら Image 上の Sprite を消去 private function deleteFromImage(event:CloseEvent):void {

if(event.detail == Alert.YES) {

mainImg.removeChild( selectedObject ); }

3-3 マウス右クリック、コンテキストメニュー

　マウス右クリックで表示されるコンテキストメニューは

ContextMenu で制御できます。デフォルトの

メニューを制御するには プロパティbuiltInItems に設定します。builtInItems には loop, play, print,

quality, zoom などのプロパティがあり、それぞれ true , false を設定します。デフォルトのメニューを

外すには hideBultInItems 関数を使います。　（たたし、hideBultInItems で「設定」のメニューは外

せません。また、デバッガモードでは「デバッガ」と「再描画領域を表示」が表示されます。）

　カスタムメニューを追加するには customItems 配列に push 関数を使って ContextMenuItem の

インスタンスを設定 します。

Flex の MXML で定義したオブジェクトでは、既定のコンテキストメ

ニュー

contextMenu プロパティに設定します。カスタムメニューが選択されると ContexMenuEvent

の MENU_ITEM_SELECT イベントが発生するので、イベントハンドラを設定して処理します。

　　　　 サンプル）　

private function init(): void {

// このウィンドウのデフォルトメニューを外す this.contextMenu.hideBuiltInItems(); // メニューを追加

var item:ContextMenuItem = new ContextMenuItem("メニュー追加１"); this.contextMenu.customItems.push(item); // イベント設定 item.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, MyMenuItemHandler); } // 追加メニューの実行

private function MyMenuItemHandler(event:ContextMenuEvent):void

{

Alert.show("メニュー１が選択された"); }

3-4 マウスカーソル

　マウスカーソルは CursorManager で制御できます。 CursorManager クラスの Static 関数

setBusyCursor, removeBusyCursor の各関数で実行中を表す時計カーソルが設定・消去できます。

CursorManager クラスの setCursor 関数を使ってカスタムカーソルを作成することもできます。

　また、マウスカーソルは各クラスのプロパティで変更できる場合もあります。例えば、各表示オブ

ジェクトで buttonMode プロパティを設定した場合には、オブジェクト上にカーソルが来た時にボタ

ンを押す時の指ボタンカーソルとなります。リモーティングの

RemoteObject では showBusyCusor

関数で 処理中の時計カーソルが設定できます。

　　　　 サンプル）　

{

private var bgColor:uint = 0x00000000; // 色は黒

private var arrowLen:int = 17; // カーソルのサイズ

private var arrowWidth:int = 5; // 矢印の山のサイズ

// コンストラクタでカーソル描画する public function CustomCursor() {

this.drawArrow(); }

// 上下に山のある矢印を描く

private function drawArrow():void {

graphics.clear();

var arrowLoc:Number = arrowLen / 2.0; graphics.lineStyle(2, bgColor, 1.0); // 縦線 graphics.moveTo(arrowLoc-4 , 0); graphics.lineTo(arrowLoc-4 , arrowLen); graphics.moveTo(arrowLoc+4 , 0); graphics.lineTo(arrowLoc+4 , arrowLen); // 上　山型 graphics.moveTo(arrowLoc-arrowWidth-4, arrowWidth); graphics.lineTo(arrowLoc-4, 0); graphics.lineTo(arrowLoc+arrowWidth-4, arrowWidth); // 下　山型 graphics.moveTo(arrowLoc-arrowWidth+4, arrowLen-arrowWidth); graphics.lineTo(arrowLoc+4, arrowLen); graphics.lineTo(arrowLoc+arrowWidth+4, arrowLen-arrowWidth); } }

--- カスタムカーソル生成と消去の方法

（Image のインスタンス mainImg にカスタムカーソルを描画する） private var cursorId:int = -1;

// カーソル生成（CustomCursorクラスをClassクラスのインスタンスとして設定する） var myClass:Class = CustomCursor;

cursorId = mainImg.cursorManager.setCursor(myClass);

// カーソル消去（カーソル生成時の戻り値のカーソルＩＤをパラメータとする） mainImg.cursorManager.removeCursor(cursorId);

実行結果

　　　　 サンプル）　

{ // キャンバス mainCanvas にあるテキスト（Labelコントロール）をボタンモードへ setButtonModeToText(mainCanvas, true); } // キャンバスの Label にボタンモードを設定する関数 //　　Labelの場合、子コンポーネントの UITextFiled からマウスイベントが発生するので //　　UITextFiledからのマウスイベントは削除しておく

private function setButtonModeToText(can:Canvas, mode:Boolean):void {

var children:Array = can.getChildren();

for(var i:int = 0 ; i < children.length ; i++) {

// Canvas の子コンポーネントが Label ならボタンモードにする

var obj:Label = children[i] as Label; if(obj != null) { obj.mouseChildren = (! mode);// 子から発生するイベント削除 obj.buttonMode = mode; // ボタンモードを設定 } } }