スタートボタンでアニメーションを再生させよう
ボタンの活用方法
「ボタン」シンボルは、アクションスクリプトを実行させるためのスイッチの役割をしているため、ユーザーがクリックすることで何かが起こるという仕組みを作りたい時に役に立ちます。
今回は、「ボタン」シンボルを使って、アニメーションの「スタートボタン」を設置してみましょう。
「スタートボタン」を設置する事で、見る側が好きな時にアニメーションを再生させる事ができ、常にループ再生させておく必要もありません。
「ボタン」シンボルの仕組み
「スタートボタン」でアニメーションを再生させる方法は、「ボタン」シンボルの独特のタイムラインであるステータスの一つ、「ダウン」を使用する事でも出来ますが、その場合はただ単に「ムービークリップ」を再生させる事しか出来ません。
ここではもう一歩踏み込んで、簡単なアクションスクリプトを使用した方法を説明したいと思います。
アクションスクリプトを使用した場合は、アニメーションの再生を開始させる「スタートボタン」以外にも、再生中にいつでも途中で動きを止められる「一時停止ボタン」や、再生中にいつでも最初からスタートさせる事ができる「再スタートボタン」などを設置する事もでき、より細かいアニメーションの管理が可能となります。
下記に、カピバラ！アニメーションスタジオ自慢の「カピバラ！プレーヤーVer.5.963」があります。
実際にボタンを操作してみて、アニメーションの再生をどのような感じで管理する事が出来るのかを確認してみましょう。
このflaファイルをダウンロードする(zip)それぞれの「ボタン」にどのようなアクションスクリプトを記述するかを説明する前に、まずはボタンの上にマウスカーソルが重なった時や、ボタンを押した時に、ボタンの形が変化する仕組みを説明したいと思います。
ボタンを作成しよう
イラストのシンボル化（ムービークリップ、ボタン、グラフィック）のしくみの項目でも少し書きましたが、「ボタン」シンボルには他のシンボルとはちょっと違った独特のタイムラインがあり、「アップ」「オーバー」「ダウン」「ヒット」の4つのステータスからなっています。
このうち「アップ」は通常配置してある状態のイラストです。
上のswfファイルの「スタートボタン」を例に挙げると、何もしていない、黄色地にグレー文字の状態の事です。
マウスカーソルを重ねた時の状態である「オーバー」はグレー文字が赤文字に変わった時の状態の事です。
クリックした時の状態である「ダウン」は、ボタンがちょっと右下にずれる状態の事です。
この3つのステータスにそれぞれ違うボタンのイラストを配置しておけば、その時のマウスカーソルの状態によって、ボタンの形が変化するというわけです。
4つ目の「ヒット」はマウスカーソルを合わせたときにボタンとして反応する範囲を指定できる機能です。
何も指定しなければ、ボタンのイラスト自体がマウスに反応するエリアとなります。
ただし、テキストをそのままボタンにする時に注意しなければならないことは、テキストの「文字部分」はボタンとして認識されますが、文字の隙間から見える「背景部分」はボタンとして認識されません。
テキストをそのままボタンとして使用する場合は、認識エリアが非常に細く、押せそうでなかなか押せないボタンになってしまうのです。
この場合は必ず「ヒット」でボタンとして認識するエリアを指定しましょう。
フレームにアクションスクリプトを書いてみよう
アニメーションの再生を操作するためには、どこにどのようなアクションスクリプトを記述すればよいのでしょうか？
まず基本的な事として、Flash を設置したページが開かれた時に、勝手にアニメーションが再生されないように、最初の1フレーム目に、アニメーションの動きを停止させておくアクションスクリプトを記述しなければなりません。
ここでは、アクションスクリプトを記述するためだけの専用レイヤーを、仮に「action」という名前で作ることとします。
「action」レイヤーの1フレーム目に空白キーフレームを挿入し、空白キーフレームを選択した状態のままアクションパネルを開きましょう。
そこに、タイムラインの再生を停止させておくためのアクションスクリプトを
というふうに記述します。
これで、1フレーム目でアニメーションの動きを停止させておく仕組みができました。
「action」レイヤーの空白キーフレーム部分に「a」という文字が記入され、このフレームにアクションスクリプトが記述されているという事が、タイムライン上で確認できます。
ボタンにアクションスクリプトを書いてみよう
それでは、いよいよ3つのボタン「スタート」「一時停止」「再スタート」にそれぞれの動きをさせるアクションスクリプトを記述します。
まずは「スタートボタン」を選択した状態でアクションパネルを開き、
play();
}
と記述します。
これは、「ボタンを押すと再生を開始しなさい」という意味のアクションスクリプトなので、これでスタートボタンはあっさり完成しました。
次に、「一時停止ボタン」を選択した状態でアクションパネルを開き、
stop();
}
と記述します。
これは、「ボタンを押すと再生を停止しなさい」という意味のアクションスクリプトなので、これで一時停止ボタンもあっさり完成しました。
最後に、「再スタートボタン」を選択した状態でアクションパネルを開き、
gotoAndPlay(2);
}
と記述します。
これは、「ボタンを押すと2フレーム目から再生しなさい」という意味のアクションスクリプトです。
1フレーム目にはアニメーションの動きを停止させておくアクションスクリプトが記述してあるので、わざわざ2フレーム目を指定する訳ですね。
これで、再スタートボタンもあっさりと完成してしまいました。
アニメーションが最後まで再生されると、再生ヘッドが自動的に1フレーム目に戻るようになっているので、そこでまた再生はストップされ、一番最初の状態に戻ります。
例えば、2回目以降はループ再生するようにしたいと思ったら、アニメーションの終わる一番最後のフレームに空白キーフレームを作り、アクションパネルに
と記述すればよいという事になります。
アニメーションが終了し、最後のフレームまで来たら自動的に2フレームから再生が開始されます。
結構簡単にアニメーションを再生させるボタンを作る事が出来たと思いますが、いかがでしょう？
Flash と同じように、もう一度人生を再スタート（中学生ぐらいから）させる事が出来るボタンを簡単に作る事が出来たら楽しいでしょうね。（あっもちろん頭の中身は今のままで！）
まぁ、それは無理なので、せめて Flash の中だけでもいろいろな動きをさせるボタンを作って遊んでみましょう！