3 キーボードとマウス Page13-18

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 ク
ラスで定義されています。
サンプル）　押されたキーを表示する例
import flash.events.KeyboardEvent;
import flash.ui.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 + "］");
}
Page 13 Flex 3 開発のポイント ecobioinfo.com
2010.10.28-31 All rights reserved
サンプルの実行結果（Ｆ１を押した場合）
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 に設定されます。
サンプル）　マウスでクリックされた Label コントロールにフォーカスを設定する例
（Label にイベントを設定して、currentTarget を処理する）
import flash.events.MouseEvent;
// 初期処理
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);
}
Page 14 Flex 3 開発のポイント ecobioinfo.com
2010.10.28-31 All rights reserved
サンプル）　Canvas 内にある Image 上のマウスクリックされたオブジェクトを消去する例
（Canvas にイベントを設定して、その上にある Object を処理する）
--- 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 );
}
selectedObject = null;
}
Page 15 Flex 3 開発のポイント ecobioinfo.com
2010.10.28-31 All rights reserved
3-3 マウス右クリック、コンテキストメニュー
マウス右クリックで表示されるコンテキストメニューは ContextMenu で制御できます。デフォルトの
メニューを制御するにはプロパティbuiltInItems に設定します。builtInItems には loop, play, print,
quality, zoom などのプロパティがあり、それぞれ true , false を設定します。デフォルトのメニューを
外すには hideBultInItems 関数を使います。　（たたし、hideBultInItems で「設定」のメニューは外
せません。また、デバッガモードでは「デバッガ」と「再描画領域を表示」が表示されます。）
カスタムメニューを追加するには customItems 配列に push 関数を使って ContextMenuItem の
インスタンスを設定します。 Flex の MXML で定義したオブジェクトでは、既定のコンテキストメ
ニュー contextMenu プロパティに設定します。カスタムメニューが選択されると ContexMenuEvent
の MENU_ITEM_SELECT イベントが発生するので、イベントハンドラを設定して処理します。
サンプル）　マウス右クリックで表示されるメニューを初期設定で変更する例
import flash.ui.ContextMenu;
import flash.ui.ContextMenuItem;
import flash.events.ContextMenuEvent;
// 初期処理
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("メニュー１が選択された");
}
実行結果
Page 16 Flex 3 開発のポイント ecobioinfo.com
2010.10.28-31 All rights reserved
3-4 マウスカーソル
マウスカーソルは CursorManager で制御できます。 CursorManager クラスの Static 関数
setBusyCursor, removeBusyCursor の各関数で実行中を表す時計カーソルが設定・消去できます。
CursorManager クラスの setCursor 関数を使ってカスタムカーソルを作成することもできます。
また、マウスカーソルは各クラスのプロパティで変更できる場合もあります。例えば、各表示オブ
ジェクトで buttonMode プロパティを設定した場合には、オブジェクト上にカーソルが来た時にボタ
ンを押す時の指ボタンカーソルとなります。リモーティングの RemoteObject では showBusyCusor
関数で処理中の時計カーソルが設定できます。
サンプル）　カスタムカーソルの例（Image 上で使用するカーソルを Sprite で作る）
--- ActionScript でのマウスカーソル描画クラスを作る
import flash.display.Sprite;
// Sprite を継承してカスタムカーソルを描画するクラスを作る
public class CustomCursor extends Sprite
{
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);
}
}
Page 17 Flex 3 開発のポイント ecobioinfo.com
2010.10.28-31 All rights reserved
--- カスタムカーソル生成と消去の方法
（Image のインスタンス mainImg にカスタムカーソルを描画する）
private var cursorId:int = -1;
// カーソル生成（CustomCursorクラスをClassクラスのインスタンスとして設定する）
var myClass:Class = CustomCursor;
cursorId = mainImg.cursorManager.setCursor(myClass);
// カーソル消去（カーソル生成時の戻り値のカーソルＩＤをパラメータとする）
mainImg.cursorManager.removeCursor(cursorId);
実行結果
サンプル）　指カーソルの例（オブジェクトにボタンと同様の処理をさせる設定）
private function init(): void
{
// キャンバス 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;
// ボタンモードを設定
}
}
}
Page 18 Flex 3 開発のポイント ecobioinfo.com
2010.10.28-31 All rights reserved

Download Report