ActionScript 3.0で始めるオブジェクト指向スクリプティング

第13回 キーボードによる操作

この記事を読むのに必要な時間:およそ 3 分

イベントオブジェクトとキーコード

前掲スクリプト1で,キーを押したとき[出力]パネルに表示される情報を,改めて見てみよう。たとえば,左矢印キーを押したときは,つぎのような[出力]になる。これらは,リスナー関数xKeyDown()が引数として受取ったKeyboardEventオブジェクトの情報だ。

[KeyboardEvent type="keyDown" bubbles=true cancelable=false eventPhase=2 charCode=0 keyCode=37 keyLocation=0 ctrlKey=false altKey=false shiftKey=false]

等号=の左辺はKeyboardEventオブジェクトのプロパティで,右辺がその値を意味する※3⁠。今回知りたい,どのキーが押されたかという情報は,keyCodeプロパティが示す。数値37は左矢印キーのキーコードである。KeyboardEventオブジェクトの基本的なプロパティについて,表1に説明を掲げた。

表1 KeyboardEventオブジェクトの基本的なプロパティ

プロパティ:データ型
altKey:Boolean [Alt](Windows)または[option](Macintosh)キーが押されているとtrue、押されていなかったらfalseを返す。
charCode:uint イベントが発生したキー入力のAsccii文字コードを整数で返す。
ctrlKey:Boolean [Ctrl](Windows)または[command](Macintosh)キーが押されているとtrue、押されていなかったらfalseを返す。
currentTarget:Object イベントリスナーが登録され、リスナー関数にイベントを伝えたインスタンスを返す。
keyCode:uint イベントが発生したキーのキーコードを整数で返す。
shiftKey:Boolean [shift]キーが押されているとtrue、押されていなかったらfalseを返す。
type:String 発生したイベント名を文字列で返す。

押されたキーのキーコードを調べるには,KeyboardEvent.keyCodeプロパティを取出せばよい。たとえば,キーコードを[出力]しようとするなら,前掲スクリプト1でリスナー関数xKeyDown()内のtrace()関数の引数を以下のように修正する。これで,各矢印キーなどの,必要なキーコードが調べられるだろう。

trace(eventObject.keyCode);

もっとも,実は文字以外の多くのキーには,Keyboardクラスの定数が定められている。もちろん,定数の値はキーコードの整数だ。しかし,スクリプト中で整数値をそのまま指定するより,定数を使った方が何のキーに対する処理なのかはずっとわかりやすくなる。矢印キーの定数を下表2に掲げる。

表2 Keyboardクラスの矢印キーの定数

定数キー
Keyboard.DOWN 下矢印キー 40
Keyboard.LEFT 左矢印キー 37
Keyboard.RIGHT 右矢印キー 39
Keyboard.UP 上矢印キー 38

キーイベントの受取り方がわかり,押されたキーをどう識別するかも確かめた。すると,お題のキー操作でインスタンスを動かすスクリプトは,もうつくる準備が整った。

※3)
イベントオブジェクトの情報(文字列表現)として[出力]されるのは,すべてのプロパティではない。

矢印キーでインスタンスを移動する

上下左右の矢印キーで,インスタンスをその方向に1ピクセルずつ移動させることにしよう。スクリプトの組立てはこうだ。

インスタンスを移動する関数はxMove()として新たに定義し,押されたキーのキーコードを引数に,リスナー関数xKeyDown()から呼出す。関数xMove()は,渡されたキーコードが上下左右の矢印キーかどうかを判別して,矢印キーだったらその方向にインスタンスの座標を1ピクセル移動する。

前掲スクリプト1のリスナー関数xKeyDown()に修正を加え,新たに関数xMove()を定義したのが,つぎのフレームアクションであるスクリプト2⁠。

スクリプト2 イベントオブジェクトからキーコードを取得してキー定数で判定

// MovieClip: キー操作で動かすインスタンス
stage.addEventListener(KeyboardEvent.KEY_DOWN, xKeyDown);
function xKeyDown(eventObject:KeyboardEvent):void {
  var nKeyCode:int = eventObject.keyCode;
  xMove(nKeyCode);
}
function xMove(nKeyCode:int):void {
  if (nKeyCode == Keyboard.LEFT) {
    x -= 1;
  } else if (nKeyCode == Keyboard.RIGHT) {
    x += 1;
  } else if (nKeyCode == Keyboard.UP) {
    y -= 1;
  } else if (nKeyCode == Keyboard.DOWN) {
    y += 1;
  }
}

リスナー関数xKeyDown()は,引数として受取ったKeyboardEventオブジェクトからKeyboardEvent.keyCodeプロパティの値を取出し,取得したキーコードを関数xMove()に渡して呼出している。関数xMove()は渡された引数を,if/else ifステートメントで上下左右の矢印キーの定数と等価比較して,キーコードがいずれかの定数と一致すれば,インスタンスの座標をその方向に1ピクセル移動する。

[ムービープレビュー]で試してみると,キーボードの上下左右の矢印キーで,インスタンスがその方向に1ピクセルずつ移動するはずだ図3⁠。ところが,ブラウザで確認(たとえば[パブリッシュプレビュー])すると,矢印キーを押してもインスタンスは動かないことがある。それは,ブラウザウィンドウの中で,SWFがフォーカスを持っていないからだ。

図3 キーコードと矢印キーのキー定数と等価比較してインスタンスをその方向に移動する

図3 キーコードと矢印キーのキー定数と等価比較してインスタンスをその方向に移動する

ブラウザウィンドウ内のSWFコンテンツにフォーカスを与えるもっとも簡単で確実な方法は,ユーザーにSWF上をクリックしてもらうことである。コンテンツのナビゲーションを開始する際に,たとえば[スタート]ボタンを置いてクリックさせるなどの工夫が必要とされる。

さて,次回は[shift]キーの組合わせでインスタンスの移動距離を変更し,キーコードの判定をifステートメント以外の構文に書替えてみたい。

今回解説した次のサンプルファイルがダウンロードできます。

著者プロフィール

野中文雄(のなかふみお)

ソフトウェアトレーナー,テクニカルライター,オーサリングエンジニア。上智大学法学部卒,慶応義塾大学大学院経営管理研究科修士課程修了(MBA)。独立系パソコン販売会社で,総務・人事,企画,外資系企業担当営業などに携わる。その後,マルチメディアコンテンツ制作会社に転職。ソフトウェアトレーニング,コンテンツ制作などの業務を担当する。2001年11月に独立。Web制作者に向けた情報発信プロジェクトF-siteにも参加する。株式会社ロクナナ取締役(非常勤)。

URLhttp://www.FumioNonaka.com/

著書