ants Lab.

時間を制御するには

前回は雑然としたソースコードをリファクタして、次のように2分割してみました。

• 見た目を決める部分を.MXMLファイルに記述する
• MXMLの<mx:Script>タグにイベントハンドラを直接記述せず、.ASファイルにまとて記述する

今回書いてみるコードもこれら2つのルールを適用させましょう。今回は、.MXMLファイルにはイベントにメソッドをアタッチする部分のみ記述し、アタッチされるメソッドは.ASファイルに記述します。

今回追加するのはタイマーで一定時間が経過したら何らかの見た目の変化を発生させる機能とします。実装すべき機能は、①一定時間のタイマーを設定する、②タイマーのイベントで駆動するメソッドを作る、③タイマーを開始するイベントをMXMLタグ内に指定する――となります。

まずタイマーを設定する①を記述していきましょう。ActionScript 2ではJavaScript時代から使われているsetIntervalを利用していましたが、ActionScript 3ではsetIntervalクラスの使用が推奨されません。その代わりActionScript 3ではTimerクラスが用意されているので、今回はこちらを利用します。ではさっそく.ASファイルへの追加部分のスケルトンを作ってみます。

Timerクラス利用のための追加メソッド
public function timerStart():void{
  var delay:Timer = new Timer(2000);
}
public function delayHandler(evt:TimerEvent):void{
  delay.start();
}


これでメソッドのスケルトンは完成です。timerStart()メソッドはTimerクラスの新規インスタンスを作成し、そのオブジェクト インスタンスが2000ミリ秒（つまり2秒）でTimerEvent.TIMERイベントを発生させることになります。timerStart()メソッド内のdelayインスタンスにアタッチされるイベントハンドラです。引数のevtは、今回はイベントハンドラ内では使用しませんが、明示しておきます。また、Timer()クラスのインスタンスは、かならずstart()メソッドを呼んで開始させましょう。忘れがちです（汗

では、delayオブジェクトにイベントハンドラをアタッチしてみましょう。コードは次のように変化します。

イベントハンドラのアタッチ
public function timerStart():void{
  var delay:Timer = new Timer(2000);
  delay.addEventListener(TimerEvent.TIMER,delayHandler);
}
public function delayHandler(evt:TimerEvent):void{
  
}


この追加によって、delayインスタンスのTimerEvent.TIMERイベント発行によりdelayHandler()メソッドが実行されるようになりました（イベントハンドラ メソッドの参照をaddEventListener()メソッドの第2引数にしていることに注意）。

ここでtimerStart()メソッドから手を離して、イベントハンドラを作っていきましょう。前回利用したtestBtn01 mx:Button（ボタン）インスタンスのラベルが変化するようなイベントハンドラにしてみます。

イベントハンドラ内の記述
public function delayHandler(evt:TimerEvent):void{
  if(testBtn01.label=="Test"){
    testBtn01.label="Event";
  }else{
    testBtn01.label="Test";
  }
}


赤い文字色にした部分が、イベントハンドラでの処理です。ボタン（testBtn01）のラベルが「Test」の場合には「Event」に、「Event」の場合は「Test」に書き換えています。特に難しい処理はしていません。

Flex Builderでデバッグするには……

がしかし、イベントモデルは何かとコーディングのミスを起こしがちです。ここで、Flex Builderに備わっているデバッグ機能を利用してみることにしましょう。

イベントハンドラ内の記述
public function delayHandler(evt:TimerEvent):void{
  trace("event handler called ("+testBtn01.label+").");
  if(testBtn01.label=="Test"){
    testBtn01.label="Event";
  }else{
    testBtn01.label="Test";
  }
}


trace();を利用して、デバッグ メッセージをFlex Builder内に表示できます（デバッグ プレーヤが必要）。

さらに手の込んだデバッグを行うには、ソースコードのデバッグしたい行の行番号左にあるグレー部分でクリックして、ブレーク指定します。そのうえでデバッグを開始すると、ブレークを指定した行まで実行が進んだ段階で、画面が切り替わります。

このような方法で、追いかけにくいイベントハンドラ内のコードを簡単にデバッグできます。ぜひ試してみてください。それでは次回は、いよいよGIZMOの簡単な機能から使ってみましょう。

Let's Flex！

■今回作ったサンプルのMXMLとAS、SWFなど

FlexSample04.zip