複数のバナー間で連携するバナーの作り方
Flash側のインターフェースの準備
続いてFlash側のインターフェースの準備を行います。Flashバナーの液面を上昇させるメソッドを、以下のようなActionScriptコードでrefillOne()として公開します。
ExternalInterface.addCallback( "refillOne", refillOne );
内部関数と同名で定義していますが、1番目の引数がJavaScriptから呼ぶときのインターフェースの名前で、2番目の引数はActionScriptコードの関数への参照です。
前ページのようなコードで記述したFlashオブジェクトにはPrototype.jsのメソッドを使うと簡単にアクセスできます。また、その公開メソッドを呼ぶまでのコードは以下のようにたった1行で書けてしまいます。
$("FLASH_BANNER_L").refillOne();
これで準備は完了しました。
右側のバナーの「つぐ」ボタンを押したときの処理は、JavaScriptで用意した、refillOneL()メソッドを呼び出し、その中で、左側のバナーのrefillOne()メソッドを呼び出します。左側のバナーの「つぐ」ボタンを押したときも同様のコードを書きます。
JavaScriptでキー入力イベント処理
連携部分の実装は完成しましたので、仕上げとしてキーボードからのキー入力で「つぐ」と「のむ」のボタンの処理を行うように実装します。
Flash側でキー入力を処理することを考えてみると、複数のFlashオブジェクトがあるので分岐などの無駄が多くなったり、Flashオブジェクトからフォーカスが外れているとキーイベントを取れなかったりなどの問題が予想されますので、JavaScript側で一括処理を行います。
キー入力イベント処理についてもPrototype.jsに便利なイベント処理ハンドラが用意されているので、こちらを使いましょう。
ただし、keydownイベントを処理できるオブジェクトが、ブラウザごとにちょっと違っていますので、次のコードのように書きInternet Explorerだけwindow.documentに割り当てました。
if (Prototype.Browser.IE){
Event.observe( window.document, 'keydown', keydownHandler );
}
else{
Event.observe( window, 'keydown', keydownHandler );
}ブラウザ別の処理分岐が明示的に、かつ簡単にできるのもPrototype.jsの優れている点です。
続いて、keydownイベントが発生したときの処理を行うkeydownHandlerを実装します。引数として渡ってくるイベントオブジェクトのkeyCodeパラメータで処理を判別するのですが、どのキーがどのkeyCodeとなるかは以下のコードで試すと分かると思います。
function keydownHandler( e ){
alert("key["+e.keyCode+"]");
}このイベントハンドラを変更して、それぞれのバナーの公開メソッドを呼び出せば、キー入力処理の実装は完了です。カーソルキーやタブキー、シフトキーなどに割り当てると、ブラウザ操作のユーザビリティを落とすこともありますので注意して処理するキーを選択し、使用してください。
以上の処理をまとめた最終JavaScriptソースとなるbanner.jsを図2に示します。
これで2つのバナーの連携サンプルは実装完了です。
