ムービーを操作する方法について

質問

毎度お世話になります。
当方アクションスクリプト初心者です。

こちらのページをご覧いただきたいのですが、
（※「CONCEPT MOVIE」ボタンから、「SMALL」「LARGE」どちらかを選択してください。）
http://www2.nissan.co.jp/LAFESTA/B30/0412/CONCEPT/main1.html

このイメージムービーのように、再生・一時停止・停止や、バーをドラッグして
好きな位置に移動したりする仕組みのものを作りたいと思っています。

どうぞよろしくお願いします。

回答No.3

noname#35109 · ベストアンサー

＃１、２です。

>> ドラッグ中は停止状態にしたいのですが、
>> どのようにすれば良いのでしょうか？

と書かれていますがドラッグ中は停止状態なのですが…
と言うよりドラッグ中はドラッグによってアニメーションは前に行ったり後に行ったり動きますが，
ドラッグ後，マウスを停止させるとアニメーションも停止しますよ。
ムービークリップの中にムービークリップを入れて動かしたり，
ActionScriptで動かしているものは止まりません。

何でしたら，on (press)の所
-----------------
on (press) {
_parent[mov].stop();
this.startDrag(true, l_point, this._y, r_point, this._y);
this.onMouseMove = function() {
now_frm = Math.round((this._x-l_point)*move_spd);
_parent[mov].gotoAndStop(now_frm);
};
}
----------------

上のように　２行目　_parent[mov].stop();
を入れてみますか。
結果はあまり変わらないような気もしますが。

あと，午前中件で調べていたら，何やらこんなページを発見しました。
「イベントハンドラメソッドはdeleteで消せ!」
http://f-site.org/articles/2004/05/22140833.html

う～ん，最後まで読むと結局どっち？？？
という感じになりますが，
このメインの方の意見の通りにすると，最後のかたまりの２行目は

delete this.onMouseMove;

が良いということなのでしょうね。
かなり前に，onEnterFrame を消したいとき，
this.onEnterFrame = undefined;
と
this.onEnterFrame = null;
のどちらにすべきか悩んだことがあって，そのときGoogleで検索して，
this.onEnterFrame = null;　の方がヒット件数が多かったので，以降同じような場所で null を使うようにしていたのですが，
本当は，delete this.onMouseMove; が良いのかもしれません。

ちょっとずつ訂正すると，「結局どれ？」となるので，最初から全文を書くと次のようになります。

--------------------------
onClipEvent (load) {
//アニメＭＣのインスタンス名の設定（"" 内は可変）
mov = "mc_movie";
//バーのインスタンス名の設定（"" 内は可変）
bar = "mc_bar";
l_point = _parent[bar]._x;
r_point = l_point+_parent[bar]._xscale*2;
this._x = l_point;
}
onClipEvent (enterFrame) {
total_frm = _parent[mov]._totalframes;
move_spd = total_frm/(_parent[bar]._xscale*2);
this._x = l_point+(_parent[bar]._xscale*2)/total_frm*_parent[mov]._currentframe;
}
on (press) {
_parent[mov].stop();
this.startDrag(true, l_point, this._y, r_point, this._y);
this.onMouseMove = function() {
now_frm = Math.round((this._x-l_point)*move_spd);
_parent[mov].gotoAndStop(now_frm);
};
}
on (release, dragOut) {
delete this.onMouseMove;
_parent[mov].play();
stopDrag();
}
--------------------------

最後のかたまりの１行目を上のように

on (release, dragOut)

とした場合は，「目盛り 兼 コントローラー」の ┃(線)　の横に大きめに透明な塗りを作ってください。
こんな感じ↓かもっと広く。

┌──┳──┐
│透明┃透明│
└──┻──┘

でないと，「目盛り 兼 コントローラー」がマウスの動きについて行けなくなったとき，
dragOut になってしまいます。

最初に書いた　on (release)　では透明部分も少なくでき，問題ない場合もありますが，
「目盛り 兼 コントローラー」がムービーの縁に近い所にあった場合，
マウスをプレスしたまま，マウスをムービー外に出す可能性が大きくなります。
マウスをプレスしたまま，マウスをムービー外に出すと delete (this.onMouseMove); が効かなくなります。
従って，　on (release, dragOut) 　で　「目盛り 兼 コントローラー」の横の透明部分を増やすのが無難かもしれません。

お礼

大変わかりやすくご説明いただき、本当にありがとうございました！

なるほど、透明な塗りがミソなんですね（＾＾）/
全て上手くいきました！

またご迷惑をお掛けすることもあると思いますが、
そのときはどうぞ宜しくお願いいたします。

回答No.2

noname#35109

＃１です。

>>マウスアップしてもドラッグした状態と同様に
>>mc_movieが目盛りにくっ付いてきてしまいます・・・。

ということですが，
スクリプトの最後のかたまり

-------------------------
//マウスアップしたときの処理
on (release) {
　　　this.onMouseMove = null;
　　　_parent[mov].play();
　　　stopDrag();
}
-------------------------

が原因だとおもいます。

this.onMouseMove = null;

が働いていないわけです。
この部分の１行目

on (release) {
　　　↓
on (release, dragOut) {

と変更してみてください。 dragOutする可能性があることを忘れていました。

お礼

早速ご回答いただきありがとうございます！
無事マウスアップ時には動作しないようになりました！

お手数お掛けしますが、最後に１点だけお教えください。

現在ですと、目盛りmcを押した状態でも、
目盛りmcとmc_movieが再生され続けてしまいます。

これを、ドラッグ中は停止状態にしたいのですが、
どのようにすれば良いのでしょうか？

質問攻めで申し訳ありません・・・！
宜しくお願いいたします。

回答No.1

noname#35109

一応，スクリプトをコピペするだけで汎用的に使えるようなものを考えてみました。
ロード状況を示すバー（バーの伸び縮み）は，今回，考慮していません。
スライドバーを左右に動かすとＭＣ（ムービークリップ）のムービーのフレームをコントロールする部分だけです。

　～完成予想図～～～
　┌────┐
　│ムービー │　←インスタンス名：mc_movie
　│　 (ＭＣ) │
　└────┘
　 ╋━━━━　←インスタンス名：mc_bar
　 ↑目盛り 兼 コントローラー

◎ 用意する物
　(1)　アニメーションするＭＣ
　　　仮インスタンス名：mc_movie
　(2)　スライドバーのバーの部分
　　　仮インスタンス名：mc_bar
　(3)　目盛り 兼 コントローラー（ＭＣ）
　　　インスタンス名：特に不要

◎ (1)～(3)の各説明

(1)　アニメーションするＭＣ
　１つのムービークリップ内にコントロールしたいアニメーションムービーを作ってください。
　アニメーションさせる方法は，モーショントゥイーンなどタイムラインを使ったアニメーションにしてください。フレーム数は任意でかまいません。
　コントローラーではＭＣ内のフレームの動きを制御するので，ActionScriptで動かすアニメーションには対応していません。
　作成できたら，一応，仮のインスタンス名を mc_movie にしてください。後で変更可です。

(2)　スライドバーのバーの部分
　(1)で作ったＭＣの横幅くらいに合わせたバーを書いてください。単なる線でもかまいません。バーの長さや装飾も後に変更できるので適当で良いです。
　バーを作ったらそれをムービークリップシンボルに変換してください。
　変換したらムービークリップの基準点（中心の丸いもの）を線の左端に動かしてください。
　（「修正」→「変形」→「自由変形」などで，中央の○が動かせます。）　
　作成できたら一応，仮のインスタンス名を mc_bar にしてください。後で変更可です。

(3)　目盛り 兼 コントローラー
　　┃←こんな感じのものを作ってください。単なる縦の短い線でもかまいませんが，その場合動き出すとマウスで捕まえにくいので，周りに 20×20ピクセル以上の透明な塗りを書いた方が良いです。正方形の透明な塗りの中央に┃(線)を引く感じがいいです。
　できた「目盛り 兼 コントローラー」は，(2)で作ったバーの横当たりに置いてください。バーに近ければどこでも良いです。
　メインはこの「目盛り 兼 コントローラー」です。この「目盛り 兼 コントローラー」に以下のようなスクリプトを書けば出来上がりです。

---コピペ可-----------------------

onClipEvent (load) {
//アニメＭＣのインスタンス名の設定（"" 内は可変）
mov = "mc_movie";
//バーのインスタンス名の設定（"" 内は可変）
bar = "mc_bar";
l_point = _parent[bar]._x;
r_point = l_point+_parent[bar]._xscale*2;
this._x = l_point;
}

onClipEvent (enterFrame) {
total_frm = _parent[mov]._totalframes;
move_spd = total_frm/(_parent[bar]._xscale*2);
this._x = l_point+(_parent[bar]._xscale*2)/total_frm*_parent[mov]._currentframe;
}

on (press) {
this.startDrag(true, l_point, this._y, r_point, this._y);
this.onMouseMove = function() {
now_frm = Math.round((this._x-l_point)*move_spd);
_parent[mov].gotoAndStop(now_frm);
};
}

on (release) {
this.onMouseMove = null;
_parent[mov].play();
stopDrag();
}

-------------------------------

「スライドバーのバーの部分」のインスタンス名と「アニメーションするＭＣ」のインスタンス名を他の名前にしたいときは
mov = "mc_movie";　と　bar = "mc_bar";　の部分を各名称に合わせればそれで使えます。
アニメーションの長さや大きさ(縦横サイズ)は全てスクリプト内でキャッチするようにしてあるので，他に変える場所はとくにありません。
この，「目盛り 兼 コントローラー」を取っておけばどこでも使い回せると思います。

※loadMobieなどで読み込んだムービーにも対応していると思います。
　 mc_movieを小さめのMCにして，_rootのタイムラインに，
　 loadMovie("○○.swf", "_root.mc_movie");
　 などと書けば外部SWFが読み込めます。
　 ただしロードされた割合でバーは伸び縮みはしません。

◎　上記スクリプトの説明

---全角空白があるためそのままコピペは不可---
onClipEvent (load) {

　　　//アニメＭＣのインスタンス名の設定
　　　mov = "mc_movie";

　　　//バーのインスタンス名の設定
　　　bar = "mc_bar";

　　　//バーの左端ポイントの座標を取得
　　　l_point = _parent[bar]._x;

　　　//バーの長さを取得
　　　r_point = l_point+_parent[bar]._xscale*2;

　　　//この「目盛り 兼 コントローラー」をバーの左端座標にセット
　　　this._x = l_point;
}

//アニメMCのフレームよってこのMCの位置を変える部分
onClipEvent (enterFrame) {

　　　//アニメMCのフレーム数を取得
　　　//（loadMovie対応のためここに書いています）
　　　total_frm = _parent[mov]._totalframes;

　　　//アニメMCのフレーム数/バーの長さを計算
　　　//（loadMovie対応のためここに書いています）
　　　move_spd = total_frm/(_parent[bar]._xscale*2);

　　　//このMCの位置を変える
　　　this._x = l_point + (_parent[bar]._xscale*2)/total_frm*_parent[mov]._currentframe;
}

//このMCの位置によってアニメMCのフレームを変える部分
on (press) {

　　　//ドラッグできる座標を限定
　　　this.startDrag(true, l_point, this._y, r_point, this._y);

　　　//このMCが動くとその座標によってアニメMCを制御
　　　this.onMouseMove = function() {
　　　　　　now_frm = Math.round((this._x-l_point)*move_spd);
　　　　　　_parent[mov].gotoAndStop(now_frm);
　　　};
}

//マウスアップしたときの処理
on (release) {
　　　this.onMouseMove = null;
　　　_parent[mov].play();
　　　stopDrag();
}
-----------------

説明がうまくありませんがこんな感じでできます。
　//（loadMovie対応のためここに書いています）
の部分は本来上の，onClipEvent (load) {}　の方に入れるべきですが，
loadMovieを使用した場合，それではうまく値が得られないので，
onClipEvent (enterFrame) {} に入れています。

その他難しいスクリプトは使っていません。
各プロパティを変数化して四則演算しているだけなので，よく見ればわかると思います。

こんなような感じで考えて行けば，
他にも「MCのスクロールバー」や，
「オブジェクトの拡大縮小バー」など色々できます。

===============================

ちなみに一時停止ボタンや再生ボタンは簡単ですよね。

---一時停止ボタン---------
on (release) {
_root.mc_movie.stop();
}
-----------------------

---再生ボタン------------
on (release) {
_root.mc_movie.play();
}
-----------------------

こんな感じでできます。
さらにちなみに，

---早送りボタン------------
on (press) {
this.onEnterFrame = function() {
_root.mc_movie.gotoAndPlay(_root.mc_movie._currentframe+2);
};
}
on (release, dragOut) {
this.onEnterFrame = null;
}
-----------------------

---早巻き戻しボタン-------
on (press) {
this.onEnterFrame = function() {
_root.mc_movie.gotoAndStop(_root.mc_movie._currentframe-2);
};
}
on (release, dragOut) {
this.onEnterFrame = null;
_root.mc_movie.play();
}
-----------------------

みたいな感じです。

お礼

大変分かりやすくご説明いただきありがとうございます！

早速コピペで試したのですが、
マウスアップしてもドラッグした状態と同様に
mc_movieが目盛りにくっ付いてきてしまいます・・・。

シーン１にmc_movie、mc_bar、目盛りmcをそれぞれ別レイヤーに配置し、目盛りmcにお教えいただいたアクションを貼り付けた形です。

色々試してみたのですが原因がわからず、
お手数ですが再度お力をお貸しください。。

尚、遅れましたが、当方ＭＸ2004 proを使用しております。