Actionscriptによるタイマー処理
次に自動スライドショーの再生・停止の部分を作成します。play_btnが押されると、2秒ごとに次の写真に変わるようにするのですが、このように一定のタイミングで処理を行う場合は、タイマー処理を使います。
定期的に処理を実行させる(タイマー処理)
まずはplay_btnが押されたときの処理を確認しておきます。
play_btnが押されたときの処理
- play_btnを非表示
- stop_btnを表示
- スライドショーを開始(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が押されたときの処理
- play_btnを表示
- stop_btnを非表示
- スライドショーを停止
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枚目から順番に表示されるようになりました。