Flash：ActionScript3.0で、動物ルーレットをTweenerで回してストップさせるボタンを追加する１(1/3)
この記事は３部作になっています。
以前、ひたすら回り続ける動物ルーレットをFlash・ActionScript3.0を使って作ってみました。
今回は、そのルーレットの回転にTweenerを使用して、回転スタート・ストップと、指定した絵柄でストップさせるボタンを追加してみるテストを行いました。
準備
動物ルーレットは１列にしてみます。
５つの動物のインスタンスが含まれる１列のシンボルを作成して、そのシンボルをステージに配置。インスタンス名を「line1」とするところまでは、以前と同じです。
ここまでは「Flash：ActionScript3.0で、インスタンスの中に配置したインスタンスを取得してみる」を参照してください。
今回のテスト用に、適当なフォルダを用意しておきます。
また、Tweenerアニメーションを使うので、Tweenerライブラリのファイル・フォルダをコピーしておきます。
Tweenerの準備については、「Flash：ActionScript3.0でTweenerのテスト」を参照してください。
スタート・ストップボタンのシンボルを作成し、インスタンスを配置する
ルーレットの回転を制御するため、スタート・ストップと、指定絵柄で止めるボタンを作っておきます。
シンボルの追加には色々な方法がありますが、今回は「ライブラリ」で「新規シンボルを追加」として「ボタン」という名前の「ムービークリップ」のシンボルを作成します。
シンボル「ボタン」の編集モードで四角を描いて、プロパティで色・サイズ調整。上メニューより[ウィンドウ]→[整列]として整列ウィンドウを出して、「ステージを基準」に垂直・水平揃えをします。
例では、オレンジの四角を幅（W：Width）を100px・高さ（H：Height）を70pxとして中央に配置してみました。
編集モードが「シーン１」などになっている場合、ライブラリにある「ボタン」という名前のシンボルをダブルクリックすることで、シンボル「ボタン」の編集モードに移行します。
同様に「スタート」という文字を入力して、中央に配置してください。
この時、文字（のバウンディングボックス）が先ほど描いた四角からはみ出ないように調整してください。
ルーレット停止中は「スタート」を表示させ、ルーレット回転中は「ストップ」を表示させる仕様にしたいと思います。
今回はフレームを移動して表示の切り替えてみます。
現在のシンボルのフレーム１にラベルを「start」という名前の付けます。
次に「ストップ」を作っていきます。
シンボルのフレーム２以降の適当なフレームを右クリックして「キーフレームを挿入」としてください。
例ではフレーム１０にキーフレームを作成してみました。
先ほどと同様に、キーフレームを挿入したフレームに「stop」というラベルをつけておきます。
このフレームはストップ用なので、「スタート」となっている文字を「ストップ」に打ち変えます。
このままでは、フレームが順番に再生されてしまう（スタートとストップの文字が高速で点滅する状態）ので、「start」ラベルをつけたフレームに「stop();」とアクションを記述しておきます。
「stop」ラベルをつけたフレームにも同様に「stop();」とアクションを記述しておきます。
指定絵柄で止めるボタンの準備
次にルーレットを指定の絵柄で停止させるためのボタンを作っておきます。
スタートボタンを作ったのと同じ要領で、「ブタボタン」のムービークリップシンボルを作成してください。
（ブタ絵柄で止めるボタンにします）
このシンボルはスタート・ストップの切り替えが必要ありません。
ラベルも何もなしです。ボタンの絵を描くだけにします。
指定絵柄で止めるボタンの準備
次にルーレットを指定の絵柄で停止させるためのボタンを作っておきます。
スタートボタンを作ったのと同じ要領で、「ブタボタン」のムービークリップシンボルを作成してください。
（ブタ絵柄で止めるボタンにします）
作ったボタンを配置する
作成した「スタート・ストップ」「ブタボタン」のムービークリップシンボルをステージ上に配置します。
シーン１（メインのタイムライン）で、ライブラリから「ボタン」「ブタボタン」をドロップして持ってきます。
まだインスタンスには名前がありませんので、それぞれのインスタンス名を「startstop」「butastop」と、名前を付けておきます。
これで準備が整いました。
次回は、ActionScript3.0で仕上げていきます。
この記事は３部作になっています。
