アド企画 制作部
アド企画 制作部
 

Flash:ActionScript3.0で、動物ルーレットをTweenerで回してストップさせるボタンを追加する1(1/3)

Flash:ActionScript3.0で、動物ルーレットをTweenerで回してストップさせるボタンを追加する1(1/3)

以前、ひたすら回り続ける動物ルーレットをFlash・ActionScript3.0を使って作ってみました。

今回は、そのルーレットの回転にTweenerを使用して、回転スタート・ストップと、指定した絵柄でストップさせるボタンを追加してみるテストを行いました。

準備

動物ルーレットは1列にしてみます。

5つの動物のインスタンスが含まれる1列のシンボルを作成して、そのシンボルをステージに配置。インスタンス名を「line1」とするところまでは、以前と同じです。

ここまでは「Flash:ActionScript3.0で、インスタンスの中に配置したインスタンスを取得してみる」を参照してください。

20160125b_a

20160125b_b


今回のテスト用に、適当なフォルダを用意しておきます。
また、Tweenerアニメーションを使うので、Tweenerライブラリのファイル・フォルダをコピーしておきます。

Tweenerの準備については、「Flash:ActionScript3.0でTweenerのテスト」を参照してください。

20160125b_c

スタート・ストップボタンのシンボルを作成し、インスタンスを配置する

ルーレットの回転を制御するため、スタート・ストップと、指定絵柄で止めるボタンを作っておきます。

シンボルの追加には色々な方法がありますが、今回は「ライブラリ」で「新規シンボルを追加」として「ボタン」という名前の「ムービークリップ」のシンボルを作成します。

20160125b_d

20160125b_e


シンボル「ボタン」の編集モードで四角を描いて、プロパティで色・サイズ調整。上メニューより[ウィンドウ]→[整列]として整列ウィンドウを出して、「ステージを基準」に垂直・水平揃えをします。
例では、オレンジの四角を幅(W:Width)を100px・高さ(H:Height)を70pxとして中央に配置してみました。

20160125b_f

編集モードが「シーン1」などになっている場合、ライブラリにある「ボタン」という名前のシンボルをダブルクリックすることで、シンボル「ボタン」の編集モードに移行します。


同様に「スタート」という文字を入力して、中央に配置してください。
この時、文字(のバウンディングボックス)が先ほど描いた四角からはみ出ないように調整してください。

20160125b_g


ルーレット停止中は「スタート」を表示させ、ルーレット回転中は「ストップ」を表示させる仕様にしたいと思います。
今回はフレームを移動して表示の切り替えてみます。


現在のシンボルのフレーム1にラベルを「start」という名前の付けます。

20160125b_h


次に「ストップ」を作っていきます。
シンボルのフレーム2以降の適当なフレームを右クリックして「キーフレームを挿入」としてください。
例ではフレーム10にキーフレームを作成してみました。

20160125b_i


先ほどと同様に、キーフレームを挿入したフレームに「stop」というラベルをつけておきます。

20160125b_j


このフレームはストップ用なので、「スタート」となっている文字を「ストップ」に打ち変えます。

20160125b_k

このままでは、フレームが順番に再生されてしまう(スタートとストップの文字が高速で点滅する状態)ので、「start」ラベルをつけたフレームに「stop();」とアクションを記述しておきます。

20160125b_m

「stop」ラベルをつけたフレームにも同様に「stop();」とアクションを記述しておきます。

20160125b_n

指定絵柄で止めるボタンの準備

次にルーレットを指定の絵柄で停止させるためのボタンを作っておきます。
スタートボタンを作ったのと同じ要領で、「ブタボタン」のムービークリップシンボルを作成してください。
(ブタ絵柄で止めるボタンにします)


このシンボルはスタート・ストップの切り替えが必要ありません。
ラベルも何もなしです。ボタンの絵を描くだけにします。

20160125b_l

指定絵柄で止めるボタンの準備

次にルーレットを指定の絵柄で停止させるためのボタンを作っておきます。

スタートボタンを作ったのと同じ要領で、「ブタボタン」のムービークリップシンボルを作成してください。
(ブタ絵柄で止めるボタンにします)

20160125b_p

作ったボタンを配置する

作成した「スタート・ストップ」「ブタボタン」のムービークリップシンボルをステージ上に配置します。
シーン1(メインのタイムライン)で、ライブラリから「ボタン」「ブタボタン」をドロップして持ってきます。

まだインスタンスには名前がありませんので、それぞれのインスタンス名を「startstop」「butastop」と、名前を付けておきます。

20160125b_o


これで準備が整いました。

次回は、ActionScript3.0で仕上げていきます。