第三章 スライドショーとプリローダーの作成 - 4

Actionscriptによるタイマー処理

次に自動スライドショーの再生・停止の部分を作成します。play_btnが押されると、2秒ごとに次の写真に変わるようにするのですが、このように一定のタイミングで処理を行う場合は、タイマー処理を使います。

定期的に処理を実行させる(タイマー処理)

まずはplay_btnが押されたときの処理を確認しておきます。

play_btnが押されたときの処理

  1. play_btnを非表示
  2. stop_btnを表示
  3. スライドショーを開始(2秒ごとに自動で次の写真に変更)

1~2の表示・非表示の切り替えは、先に出てきた_visbleプロパティの設定で行います。3つ目の"次の写真に変更"という部分は、前述のskip_btnに記述した関数set_next_pictを実行します。あとはこの関数を2秒ごとに自動で実行されるようにします。

ActionScriptでのタイマー処理

ActionScriptには、定期的に指定した関数を実行するsetIntervalというメソッドが用意されています。setIntervalメソッドは次の公式で実行します。

setIntervalメソッド

タイマーID = setInterval(関数名,間隔)

タイマーID

タイマーIDには、タイマーを止める際に必要なタイマーを識別するためのID(Number型)が入ります。

間隔

タイマーの間隔をミリ秒単位で指定します。1秒ごとに実行するのなら1000、2秒なら2000、0.5秒なら500になります。

タイマーを開始する

play_btnが押されたら、関数set_next_pictを2秒間隔で実行するようにします。setIntervalで開始した処理のタイマーIDは、変数TimerIDに代入しておきます。記述するコードは下記になります。

play_btnに記述

play_btnの_visibleプロパティにfalse、stop_btnにはtrueを代入して、2つのボタンの表示を切り替えています。そしてsetIntervalで2秒間隔で、関数set_next_pictを実行しています。setInterval関数で開始したタイマーIDは、変数Timer_idに代入しています。

タイマーを停止する

次にstop_btnが押されたときの処理です。

stop_btnが押されたときの処理

  1. play_btnを表示
  2. stop_btnを非表示
  3. スライドショーを停止

1~2はplay_btnの逆の設定になります。3のスライドショーをとめるためには、タイマー処理を止める必要があります。setIntervalで開始したタイマーを止めるためには、clearIntervalメソッドを使います。

clearIntervalメソッド

clearInterval(タイマーID)

引数はsetIntervalで取得したタイマーIDです。タイマーIDは変数TimerIDに代入されていますので、変数timerIDを指定します。これでスライドショーが停止します。記述するコードは下記になります。

stop_btnに記述

play_btnのときと同様に、2つのボタンの表示を切り替えています。そしてclearIntervalメソッドでタイマーを停止しています。

この時点でプレビューすると、play_btnでスライドショー開始、stop_btnで停止するようになりました。

各カテゴリボタンへの追加

上記の時点では、自動スライドショーの途中で、右上の各カテゴリボタンが押すと、各カテゴリの0枚目の写真が表示されるのですが、その次は1枚目ではなく、変数Active_pictに代入されている数値の写真に変わります。

これを回避するために、写真のカテゴリを変更するときは、各カテゴリに移動するだけでなく、変数Active_pictに0を代入するように、各カテゴリのボタンに記述します。

"山"のボタンに記述

他の4つのボタンも同様です。

この時点でプレビューすると、自動スライドショーの途中で、各カテゴリに変更したときも0枚目から順番に表示されるようになりました。