|
| setInterval()を利用した連打測定Flash Adobe Flash CS3 Professionalを使用してサンプルを作成しています。 |
フレームレートではなくミリ秒で実行する「setInterval()」
 |
2. 今回の制作フローは以下の通りになります。
・ テキストボックスの内容と連打カウントの変数を初期化する
・ 連打回数を測定しリアルタイムに表示する
・ 1秒間経ったら測定を終了して結果画面に移動する
・ 一定時間経ったらリトライボタンを表示する
3. レイヤー「action」の1フレーム目に以下のActionscriptを記述してください。
stop();
myText.text = "Ready?";
resultText.text = "";
myCount = 1;
button.onPress = function(){
_root.gotoAndStop(2);
}
1行目でフレームの再生を停止しています。2行目でボタンの上のテキストボックスである「myText」に「Ready?」という文字を表示させ、押したら始まることを意識させています。
3行目は同様ですが、結果用のテキストボックス「resultText」の中身に空を代入し初期化しています。
4行目では連打回数を測定する変数「myCount」を初期化しています。今回は「Ready?」ボタンをクリックした場合も「1」カウントとして含みましたので、代入する数値は「1」となります。
以降の関数では配置されているボタン「button」をクリックした場合、2フレーム目に移動して静止するという記述です。
4. レイヤー「action」の2フレーム目に以下のActionscriptを記述してください。
stop();
myText.text = myCount + "連打";
myInterval = setInterval(finishGame,1000);
function finishGame(){
_root.gotoAndPlay(3);
clearInterval(myInterval);
}
button.onPress = function(){
myCount ++;
myText.text = myCount + "連打";
updateAfterEvent();
}
1行目でフレームの再生を停止し、このフレームで連打を測定していきます。2行目でテキストボックス「myText」に連打回数を測定する変数と文字列の初期表示をさせています。
3行目の「setInterval()」が今回のキモです。Flashのフレームレートの設定は実はあまり厳密な時間で再生している訳ではありません。アニメーションやActionscriptの実行、実行されるPCの速度、ブラウザとプラグインの相性等さまざまな要因で遅延が発生します。フレームレート「1」でも1フレームが「1.3秒」くらいになったりするのです。そこで、ある程度厳密に「ある秒数経過したら実行したい」という場合はこの「setInterval()」を利用します。「setInterval()」の引数は「setInterval( 実行する関数 , ミリ秒)」となっていて、この場合、「1000ミリ秒(1秒)経過した場合、関数「finishGame」を実行する」という意味になります。
次の関数「finishGame()」では、実行された際にフレームを進め再生を開始させると同時に「clearInterval()」を実行し、先程の「setIntarval()」を解除しています。引数には今回のように「clearInterval(myInterval)」と名前を入力してください。
最後の関数は、ムービークリップ「button」に対する「onPress」イベントを指定しています。最初に連打回数を測定する変数「myCount」をカウントアップし、ボタンの上にあるテキストボックス「myText」へリアルタイムに連打回数を表示させています。最後の行の「updateAfterEvent()」は今回のように、フレームレートより早くイベントが実行される場合に画面の表示を行うものです。
5. レイヤー「action」の3フレーム目に以下のActionscriptを記述してください。
button.onPress = null; myText.text = "Finish!"; resultText.text = "あなたの連射速度\n" + myCount + "連打/秒";1行目では計測後連打しても何も起こらないよう一時的に「onPress」イベントの実行を停止しています。
2・3行目ではそれぞれのテキストボックスに測定結果を表示させています。
6. レイヤー「action」の20フレーム目に以下のActionscriptを記述してください。
stop();
myText.text = "Retry?";
button.onPress = function(){
_root.gotoAndStop(1);
}
フレーム20までは連打終了後、ユーザが連打を止めるまでの間を開けています。今回は1つのボタンが押される場面によって違う機能を持たせるというものですので、これにより、連打終了後、即「Retry?」ボタンを押すことを防止しています。以降はボタン上のテキストボックスの表記を「Retry?」に変更し、おされた場合1フレーム目から再び再生するという機能に変更してあります。
これで完成です！
完成したファイルをダウンロード
基本的にFlashの再生はフレームレートに依存します。それはアニメーションもActionscriptでもそうですが、今回ご紹介した「setInterval()」を使えばミリ秒単位で比較的厳密なタイミングで関数の実行が可能です。とは言え、ありとあらゆる実行のタイミングをミリ秒で管理すると制作者の頭の中はパニックですよね…。普段はFlashらしくフレームという概念を最大限意識して、必要なときだけ「setInterval()」を使うといった形がスタンダードと言えると思います。使い所によっては非常に便利なものですので、是非習得してください！
