FLASHのお勉強　ーモーショントウイーンー

（５）　回　転

往復（振り子）回転　

　画像を回転させ角度を変えて見せるアニメーションも多用されているが、ここでは振り子のように、＋−同じ角度を往復する回転の作成方法を述べる。

　（１）回転させる画像を読み込む。
　（２）画像をシンボル(ムービークリップ)に変換する。
　（３）FRAME 1右クリック「モーショントゥイーンを作成｣
　（４）FRAME１０、１９にキーフレームを挿入
　（５）「修正」｢変形｣「収縮と回転」をクリックして回転角度を設定する
　　　　FRAME 1、FRAME19：+120度、　FRAME10：-120度
　（６）２つのトゥイーンについてプロパティインスペクターで以下を設定
　　　　FRAME1-10　：イージング：100、回転：反時計回り、0回
　　　　FRAME10-19：イージング：100、回転：時計回り、0回
　以上は、+-120度の回転について述べたが、60度回転の場合には、（６）の回転は自動設定でよい。　回転は180度を境に、小さい角度が優先される。

連続回転　

　アニメーションの醍醐味のひとつがオブジェクトの連続回転である。　ここでは、画像(イメージ)を連続回転させる方法について述べる。　この画像を回転させるときにいくつかのコツと言うか注意点がある。　そのひとつは回転がギクシャクしてしまうということであり、もうひとつは回転数をある程度上げると、視覚的には逆回転しているように見えてしまうと言うことである。
　また回転させる方法にもいくつか方法があるが、今回は最も簡単な方法について述べる。

　（１）ステージに回転させる画像を読み込む
　（２）FRAME１右クリック、「モーショントゥイーンを作成」
　（３）FRAME20にキーフレームを挿入
　（４）FRAME10（どこでもよい)でクリックし、
　　　　プロパティインスペクタを表示
　（５）中央下部「回転」で時計回り、1回を設定

　ここまでの設定では、FRAME1と20が同じ位置で2回表示されることになり、左のモーションのように、一瞬止まったように見えてしまう

　これを回避するには、FRAME２０での回転体の回転位置をドラッグして若干戻し、FRAME1に滑らかにつなぐように調節する方法がよく使われる。　この方法も簡便でよいが、滑らかな回転にするために何度か調節を繰り返さなければならない。　ここでは簡単確実に滑らか回転させる手法について述べる。　すなわち、FRAME20にFRAME1に移動し再生せよという命令（アクションスクリプト）を記述する方法である。　すると、FRAME20の実行はスキップしてFRAME１が実行されるので連続状態が続くことになる。（上例右側)　なお、実際の動きは、ムービープレビューかパブリッシュプレビューでないと見られないので注意。

回転を滑らかに見せるためのアクションスクリプトの記述法
　上記（１）〜（５）までの設定に続き、
　（６）FRAME20をクリックし、ビヘイビアパネル（画面右側に表示されていなければ、「ウインドウ」「開発パネル」「ビヘイビア」にチェックを入れ表示させる)のビヘイビアの追加ボタンをクリック
　（７）「ムービークリップ」「フレームまたはラベルに移動して再生を開始｣をクリック
　（８）｢相対｣にチェックを入れ、開始フレームを１に設定
　（９）FRAME20にａの文字が入りアクションスクリプトが追加される。

　なお、この手順で作成されたスクリプトは、
　　this.gotoAndPlay("1");
　と言う単純なもので、thisと言うのは今実行されているモーショントゥイーンを意味する。"１"はFRAME１のこと。
　したがって、ビヘイビアパネルを使わないで、この記述をFRAME20をクリックして、アクションパネルの記述欄に直接書き込んでもよく、同じ結果が得られる。

　次の難問は、回転速度の問題。　回転する速度を上げるために1回転させるFRAME数を小さくすると、あるフレーム数から小さくなると、逆回転に転じかえって遅くなり、最終的にはとまって見えるようになる。　また、トゥイーンのプロパティーで回転数を上げていったときも同様である。　

　以下に、時計回り1回転を設定したときの、FRAME数の影響を例示する。　FRAME数が17のときを境に視覚的には逆回転に転じているのが分かる。　赤いポイントを見ると、確かに時計回りに回っていてFRAME数が小さいほど早く回転しているのだが。

　この傾向は、プロパティーインスペクターで回転数を大きくしていったときも同様に起こる。　それでは、もっと高速で回転をさせたい時はどうするかというと、フレームレートを高くする方法がある。　フレームレートを高くしても逆回転の発生は起こるのだが、順回転でより高速回転という領域を確保することが可能である。　ただし、この場合、ドキュメント（ファイル)全体のフレームレートが上がるので、全てをそのレートにあわせた設定が必要となる。

全部アクションスクリプトで書く　

　アクションスクリプトについてはいずれ解説しなければならないと思っているが、回転させるスクリプトは簡単なので、ここに付け加えておく。　これで書くと格段に効率や見栄えがよくなるわけではないが、どうせ滑らか回転にするためにアクションスクリプトを使うのであれば、この方法を取るのがいいかもしれない。　なお、このスクリプトで書いても回転速度を上げると逆回転に転ずるのは同様に起こる。

　（１）ステージにイメージを読み込み配置する
　（２）イメージをシンボル(ムービークリップ)に変換する
　　　　(このとき変換ウインドウにある基準点の設定を中心にしておく)
　（３）このシンボルを選択し、アクションパネルの記述部に以下のスクリプトを書き込む
　　　　onClipEvent (enterFrame) {
　　　　this._rotation += 10;
　　　　}

　ここで、+=10は時計方向に10度ずつ傾くと言うこであり、数字を大きくすると回転速度が上がる。

＜本ページに使った用語の説明＞　　

＜追記＞　アクションスクリプトで回転を止める。

　上記アクションスクリプトの記述で回転しているオブジェクトの回転を止める方法を追記する。　この方法は、onCLipEvent(enterframe) で動いているモーションを止めるのに共通して使える方法であり、flag を立てて、モーションの実行、停止を判断させるものである。　SAMPLEでは、マウスのロールオーバーで回転が止まり、ロールアウトで再び回転が始まる。

　以下のスクリプトを、回転オブジェクトを選択して書き込む。

onClipEvent (load) { flag = 0; }
on (rollOver) { flag = 1; }
on (rollOut) { flag = 0; }
onClipEvent (enterFrame) {
if ( flag == 0 ) {
this._rotation += 10; }　}