ActionScript3.0では,ActionScript2.0以前とは,キーボードの入力を取得する処理が変更されています。以前はKeyクラスに集約されていた処理が,表示リスト内の特定のメンバーのイベント処理に移されました。この処理の利用方法を学習しましょう。

ユーザーの入力をキャプチャする

 ActionScript3.0では,ユーザーがキーボードを操作した際,その入力をキャプチャして利用できます。キーボードによる操作で,ムービーの動きに変化を付けられるというわけですね(図1)。

図1●キーボードの入力をキャプチャ
図1●キーボードの入力をキャプチャ
[クリックすると別ウィンドウでムービーを表示します]

 ユーザーの入力をキャプチャして処理を実行することで,いわゆるタイピング・ゲームや,キーボードで操作するムービー,はたまた,簡単なアプリケーション・ムービーのショートカット機能まで,様々な用途に応用することができます。

キーボードの入力に関するイベント処理はどこで行う?

 ActionScript3.0でキーボードの入力をキャプチャするには,キーボードの入力に関するイベント処理を利用します(表1)。

表1●キーボードの入力に関するイベント
イベント イベント定数 内容
keyDown KeyboardEvent.KEY_DOWN キーボードを押したときに発生する
keyUp KeyboardEvent.KEY_UP キーボードを離したときに発生する
※共にイベントオブジェクトのデータ型は,KeyboardEvent型

 キーボードの入力に関するイベント処理を表す,おなじみの「イベント定数」は,「KeyboardEventクラス」で管理されています。この定数を使って,こちらもイベント処理では定番のaddEventListener関数を使って,イベントと処理を関連付ければ良いわけですね。

 でも,ちょっと待ってください。このキーボードに関するイベント処理は,何に対して関連付ければいいのでしょうか。ActionScript2.0では,Keyクラスというキーボードの処理専用のクラスが用意されていましたが,ActionScript3.0では,Keyクラスは廃止・統合されてしまっています。

 実は,ActionScript3.0では,「表示リスト内の特定のメンバー」に対して,このキーボードの入力に関するイベント処理を割り当てることができるようになっています。特定のメンバーとは,テキスト・フィールド(TextFieldクラス)やボタン(SimpleButtonクラスやButtonクラス),ムービークリップ(MovieClipクラス)に,そしてステージ(Stageクラス)といった,あらかじめ,マウスボタンやキーボードの入力によって,操作することができるように作成されているクラスのインスタンスです。より正確に言うと,「InteractiveObjectクラス」を「継承」しているクラスが,キーボードの入力に関するイベントを扱うことができます。

 継承などの仕組みがよくわからないという方は,とりあえずは,「画面上に表示されている,操作できそうなモノと,ステージ」で,キーボードに関するイベント処理が行える,くらいに考えておいてください。

 ステージ上で,これらのインスタンスに「フォーカスがある時(選択されている時・アクティブになっている時)」にキーボードのキーが押されると,keyDownイベント・keyUpイベントが発生します。

Stageでイベント処理を行ってみよう

 では,実際にイベント処理を作成してみましょう。新規Flashドキュメントを作成し,任意の名前で保存します。ステージ上にひとつ,ダイナミックテキスト・フィールドを作成し,インスタンス名を「message」とします(図2)。

図2●テキスト・フィールドをひとつ配置する
図2●テキスト・フィールドをひとつ配置する

 続いて,タイムラインから1フレーム目を選択し,次のようにコードを記述します。

//ステージにイベント処理を割り当てる
stage.addEventListener(KeyboardEvent.KEY_DOWN, checkKey);
//イベント処理を行う関数
function checkKey(event:KeyboardEvent){
  message.text = "キーコード「" + event.keyCode + "」のキーを押しました。";
}

 コードが記述できたら,パブリッシュしてブラウザで動作を確認してみましょう(図3)。

図3●キーボードの入力を判定するムービー
図3●キーボードの入力を判定するムービー
[クリックすると別ウィンドウでムービーを表示します]

 ムービー内の任意の個所をクリックし,任意のキーを押してみましょう。すると,キーに応じて「キーコード」と呼ばれる数値が表示されることが確認できますね。うまくいかない場合には,日本語入力をオフにして試してみましょう。

 このサンプルのポイントは3点あります。

 まずひとつ目は,「ムービー全体として,とにかくキーを押したら任意の処理を実行したい」という場合には,stage(Stageクラスのインスタンス)に対して,addEventListenerを実行する,という点です。

 以前,第9回で紹介したように,表示リストにはイベント・フローが存在します。その頂点であるstageに対してキーボードに関するイベント処理を割り当てておけば,表示リスト内のどんな場所にフォーカスがあっても,キーボードに関するイベントを拾うことができるわけですね。

 ふたつ目は,keyDownイベント,keyUpイベントの,キーボードに関するイベントに関連付けられる関数へ渡される「イベントオブジェクト」の値を使うと,「どのキーが押されたのか」を判定することができる,という点です。

 以前,第8回で紹介したように,イベント処理には,そのイベントの種類に応じていろいろな情報を関数へと手渡す「イベントオブジェクト」が用意されています。keyDownイベント,keyUpイベントでは,「KeyboardEvent」型のイベントオブジェクトが関数へと手渡されます。このイベントオブジェクトは,次のような情報を保持しています(表2)。

表2●KeyboardEventのプロパティの抜粋
プロパティ 説明
charCode 押された(離された)キーのキャラクタコード(文字コード)。なんという文字なのかを判定するのに利用する
keyCode 押された(離された)キーのキーコード。どのキーなのかを判定するのに利用する
altKey [Alt]キーが押されている場合にはtrue/押されていなければfalse
ctrlKey [Ctrl]キーが押されている場合にはtrue/押されていなければfalse
shftKey [Shift]キーが押されている場合にはtrue/押されていなければfalse
keyLocation 押された(離された)キーボードのキーの場所。ShiftキーやAltキーなどのように,左右にひとつずつ配置してあるようなキーや,テンキーの数値のような複数あるキーのうち,どれが利用されたのかを判定するのに利用する
※このほかにも,target,currentTarget等の基本的なプロパティも用意されています

 イベントオブジェクトの各種のプロパティにアクセスするには,addEventListenerメソッドで関連付けた関数の中で,「イベントオブジェクト.プロパティ名」で利用することができましたね。これらのプロパティを使用することで,イベント発生時に,「どのキーが押されて(離されて)イベントが発生したのか」を知ることができるようになっています。

 最後に3つ目は,キーボード関係のイベント処理を作成したムービーの動作テストを行う時は,パブリッシュして実際にブラウザ等で確認するのが良い,という点です。

 キーボード関係の処理の動きは,[ムービープレビュー]機能で確認しようとすると,ムービープレビュー画面のショートカット機能や,FlashCS3のショートカット機能の判定が優先されることがあり,意図した動作と異なる場合があります。プレビュー画面の[制御]メニューから,キーボードショートカットを無効にすることもできるのですが,それでもやはり,実際にムービーを配信する時と同じように,ブラウザに表示してみてから動作を確認する癖を付けておくと良いでしょう。

 このように,キーボードの入力に応じて任意の処理を実行するには,keyDownイベント,もしくは,keyUpイベントをaddEventListenerメソッドを使って,任意のインスタンスに関連付ければOKです。

この先は会員の登録が必要です。今なら有料会員(月額プラン)登録で5月末まで無料!