ウェブ、ショウジン

Flashムービー(トゥイーンアニメーション)に停止と再生の開始(リプレイ)ボタンを実装

2012-2-2
Category
未分類

Flashは年に一度触れるかどうかで、こんな超初歩的なものでもまた忘れて苦労しそうなので残しておく。

複数の画像をスライドショー的にアニメーション。テキストも。

一度はjQueryに変更したのだけれども、どうしてもFlashがいいらしいクライアントの意向に従って。

Acrion Scriptは全然わからないので画像が切り替わる(フェードイン、フェードアウトの繰り返し)のは「モーショントゥイーン」で。メンテナンス性を考えると全然スマートじゃないけど、今すぐとなるとこれでしか対応できないので。

モーショントゥイーンは、CS5になってから(なのか?)これまでのものとは勝手が違っているようなので(以前やった感覚ではできなかった)実際に選択するのは「クラシックトゥイーン」。恥ずかしながら、ここでいきなり5分ほどつまづいた( ゚д゚)

クラシックトゥイーンを使って画像、テキストが切り替わっていくアニメーションはもうできたとして、このままだと延々と繰り返し再生、ループ再生を続けるので、これを適当なフレームで停止させ、リプレイボタンのクリックによって再生の再開をするように設定する。ここからが本題。

デモページ

止めたいフレームを右クリックで「アクション」を選択。

「アクション – フレームウィンドウ」の右上にある「コードスニペット」をクリック。

コードスニペット>タイムラインナビゲーションから「このフレームで停止」を選んでダブルクリック。

Flash // このフレームで停止

すると、Action Script用のレイヤー「Actions」というのが作成され、該当フレームにスクリプトが記述される。

stop();だけだけど( ゚д゚)

/* このフレームで停止
Flash タイムラインは、このコードが挿入されたフレームで停止 / 一時停止します。
ムービークリップのタイムラインの停止 / 一時停止にも使用できます。
*/

stop();

これで指定のフレームでムービーの再生は停止するようになったので、このフレームに再生を再開するためのボタンを配置する。

とくにボタンを作るのが面倒だったので、透明画像をFlashムービーのドキュメントサイズで作成して、画面全体を再生再開のためのボタンにする。

透明画像をステージに配置したら、この画像を右クリックで「シンボルに変換」を実行。適当に名前をつけて「ボタン」としてシンボルに変換。

シンボルに変換したら、これでこのボタンに「アクション」を割り当てられるので、再度画像を右クリックで「アクション」を選択。

また「アクション – フレーム」ウィンドウの右上の「コードスニペット」から「コードスニペット>タイムラインナビゲーション」を選択して、「クリックして特定のフレームに移動し、再生」をダブルクリック。

インスタンス名を適当に設定してOK。

すると、Actionsレイヤーの該当フレームにスクリプトが追加される。

/* クリックして特定のフレームに移動し、再生
特定のシンボルインスタンス上でクリックすると、再生ヘッドがタイムラインの指定フレームに移動し、そのフレームから再生が継続されます。
メインタイムラインまたはムービークリップタイムライン上で使用できます。

手順 :
1. 以下のコード内の数値 5 を、シンボルインスタンスのクリック時に再生ヘッドが移動するフレームの番号に置き換えます。
*/

replay.addEventListener(MouseEvent.CLICK, fl_ClickToGoToAndPlayFromFrame);

function fl_ClickToGoToAndPlayFromFrame(event:MouseEvent):void
{
	gotoAndPlay(5);
}

Flashアプリケーション側が差し込んでくれたコメントどおりに、ボタンをクリックすると再生を開始するフレームをコードの最後のgotoAndPlayの引数で指定して保存。

あとはパブリッシュして書き出されたswfファイルを使えばよい。

swfファイルの読み込み、表示はSWFObjectを使用。
SWFObjectを使ってFlash(swfファイル)を表示する

Flashムービー(トゥイーンアニメーション)に停止と再生の開始(リプレイ)ボタンを実装、の『デモページ』

Categories

Tag Cloud

AdMob Android Apache centos CodeIgniter EC-CUBE facebookアプリ facebookページ feed Firefox Flash google googleanalytics htaccess iPad iPhone JavaScript lamp mobile nginx ogp pear php plugin rollover rss sendmail setting smarty ssh Titanium Mobile Titanium Studio tutorial ubuntu vim VirtualBox vmware vps Windows WordPress xampp youtube さくらインターネット アクセス解析 カスタム投稿