円を描くように動くアニメーションを作りたい

作りたいもののイメージは
http://www.jitenjiten.com/yasai/
にあります。

最初は、ただモーションガイドレイヤーで円を書いてその上を動かすだけの簡単なアニメーションだと思っていたのですが、円の場合、普通のモーションガイドレイヤーのように、スタート地点と終着点の２点では動かないことに気づきました。仮に終着点の図を少し左にずらしても、一週回ってそこで止まるのではなく、ただちょこっと左に動くだけです。

そこで（説明が難しいので時計の針で表現します）、中継点を入れて、スタート（１２時）、中継点（５時）、終着点（１０時）の３点で動かしたのですが、そうすると１２時から右回りに５時まで行って、１０時には行かず、来た道を通って１２時に戻ってしまいました。

説明が長くてすいません。

要するに円の上をキレイに動くアニメーションの作り方を教えてください。どうぞお願いします。

No.3 ベストアンサー 回答者： sassakun 回答日時： 2007/07/15 14:19

>中継点を入れて、スタート（１２時）、中継点（５時）、

> 終着点（１０時）の３点で動かしたのですが、

12時 ３時 ６時 ９時 12時 のように
もっと中継点を増やせばできると思いますが...。

それだけで終わるのも何ですから，
「私がするのならばこうする。」
という方法を回答します。


＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

Flash は発想次第です。
また，ActionScript や モーショントゥイーンに限らず，ムービークリップを活用することです。

ムービークリップを活用すれば Flash で並大抵のことができます。
ムービークリップを活用できなければ，ActionScript や モーショントゥイーン をいくら頑張っても面白い物を簡単に作れません。
私が思うに，「ムービークリップを制する者が Flashを制す。」です。


ステージ上に「トマト」の絵を描いたとします。
次にその「トマト」をムービークリップに変換します。
ムービークリップに変換するときに，少し「基準点」に気をつけて見てください。
ムービークリップに変換するとき「シンボルに変換」パネルが出てきますが，
とりあえず基準点を「中央」にします。

　----------------------
　　　基準点(R)：□□□
　　　　　　　　　　 □■□
　　　　　　　　　　 □□□
　----------------------

本当はどこでも良いのですよ。
注意して見るだけのことです。

そして，そのムービークリップを選択すると，
「トマト」の中央に ＋ 印ができて，「ト＋ト」状態に見えます。
これで，そのムービークリップの基準点は ＋ 印の場所にあるということが確認できます。

その 「ト＋ト」 状態のムービークリップをダブルクリックして，ムービークリップ内のタイムラインの編集に入ります。
「ト＋ト」 状態のムービークリップの中には「トマト」の絵があるわけですが，
このトマトの絵全体を選択して，上の方に持っていきます。

　-------------------
　　　　　「トマト」



　　　　　　＋　←基準点
　-------------------

そして，
「トマト」の絵以外の部分をダブルクリックして，ドキュメント（メインムービーのタイムライン）の編集に戻ります。

そして，トマトのあるタイムラインのレイヤーの編集に移ります。
「トマト」のあるレイヤーを例えば 31フレーム にします。

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　31
　レイヤー 筆・・|●//////////////////////[]|


その フレーム31 もキーフレームに変換します。

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　31
　レイヤー 筆・・|●////////////////////[]|●|

あと，フレーム11 と フレーム21 もキーフレームに変換します。

　　　　　　　　　　　　　　　 11　　　　　21　　　　　 31
　レイヤー 筆・・|●////[]|●////[]|●////[]|●|

フレーム11 のトマトムービークリップを選択して，
「修正」→「変形」→「伸縮と回転」を選択し，
「伸縮と回転」パネルで　回転(R) を 120 度 にして「OK」します。
これで，基準点を中心に 120度 右回りした位置にトマトが来ます。

また，フレーム21 のトマトムービークリップを選択して，
「修正」→「変形」→「伸縮と回転」を選択し，
「伸縮と回転」パネルで　回転(R) を 240 度 にして「OK」します。
これで，基準点を中心に 240度 右回りした位置にトマトが来ます。

あとは，
レイヤーの フレーム1 ～ 30 を選択し，モーショントゥイーンさせれば，
トマトが基準点を中心にきれいに 360度 回転します。

このままでは，
0 度のトマトが，最初のフレームと最後のフレームで２回登場するため，
ループさせたときにアニメーションがカクッとなります。

そこで，上のようにモーショントゥイーン を付けた後に フレーム30 もキーフレームにします。

　　　　　　　　　　　　　　　11　 　　　21　　 　　30 31
　レイヤー 筆・・|●>--->●>--->|●>--->●|●|

そして，フレーム30 を「フレームの削除」で削除します。

　　　　　　　　　　　　　　　11　 　　　21　　　 　30
　レイヤー 筆・・|●>--->●>--->|●>--->●|

これでキレイに回るトマトができます。



＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

別法です。
面倒な場合は動かすのに ActionScript を使います。

「トマト」をムービークリップに変換して，
ムービークリップ内でトマトを上にずらすところまでは同じです。
ここまでは同じ↓。

　-------------------
　　　　　「トマト」



　　　　　　＋　←基準点
　-------------------

このあと，
ドキュメント（メインムービーのタイムライン）の編集に戻ります。
そして，戻った状態で，トマトを選択し，つぎのようなスクリプトをトマト自体に書きます。
----------------------------
onClipEvent (enterFrame) {
this._rotation += 5;
}
----------------------------

上の 5 を変えると回転するスピードの調節ができます。
上のスクリプトでは，１フレーム進む時間ごとに 5 度ずつ右回りをさせるというスクリプトです。



モーショントゥイーンでもActionScriptでも，やることは同じですね。
ActionScriptの方が，作成が簡単なだけです。
また，上の場合，
トマトが大きく回転するとともに，トマトの絵自体も回転してしまいますね。

トマトをずっと上向きにしたい場合などは，
ムービークリップの中の「トマト」の絵をさらにムービークリップに変換します。
ムービークリップの入れ子状態です。

　_root
　　└ムービークリップ
　　　　　　└ムービークリップ - トマト

そして，
大きくまわる外側のムービークリップの中のムービークリップを，
反対方向に回転させれば，トマトの向きは変わりません。

そういうことまでいろいろ考えると，ActionScript の方が簡単でしょうね。
でも，原理は同じです。

この回答へのお礼

早速のご回答（そしてなんとも丁寧な！）ありがとうございます！
早速試したところできました！！！！
とくに下の方法のほうがスムーズにできて（上は30コマ目から戻るときに一瞬止まってしまう）、例のサイトと全くおんなじ方法で同じように動かせました。感激です。
本当にありがとうございました！

お礼日時：2007/07/15 15:39

No.4 回答者： gura_ 回答日時： 2007/07/15 15:13

　ご参考に↓

http://hakuhin.hp.infoseek.co.jp/main/as/move.ht …

No.2 回答者： noname#77303 回答日時： 2007/07/15 13:57

こちらの参考URLを応用すればできると思います。

参考URL：http://www2.netwave.or.jp/~light/cunt-t.html

No.1 回答者： noname#39970 回答日時： 2007/07/15 13:20

円を半分に割る。

中継点がどうではなく円弧を２つ用意するという意味