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

(6) 反転

 変形の一種「反転」は使いようによっては面白い動きを作ることが出来る。 基本的には、縦、あるいは、横方向が逆になるだけなのだが、これを連続的に動かすと3Dタイプの回転が得られる。 また、他の動きと組み合わせることによりいろんなエフェクトを作ることが出来る。 ここでは、基本的なアニメーション作りの勉強を進める。

3Dスピン(回転) 

 横反転、あるいは、縦反転を設定してトゥイーンを作成し、それを連続再生すると、3次元的に回転しているように見える。 しかし、反転を1回のみ設定して繰り返し再生すると、下の左側に示した例のように、裏側に向いてきた画像が表画像に反転してまたアニメーションが始まるようになる。 そこで、2回続けて横反転させると、右例のような自然なスピンが出来上がる。 右例の作成方法を説明する。

(1)ステージに画像を読み込み配置する
(2)FRAME1で右クリック「モーショントウイーンを作成」する
(3)FARME19、38にキーフレームを挿入する
(4)FRAME19をクリックし「修正」「変形」「横反転」をクリック
(5)二つのトゥイーンのプロパティーで両方とも「回転」「時計回り」0回に設定





  

 上の例で、FRAME数を小さくすれば、スピン速度が上がるのは言うまでもない。 また、FRAME19の変形で、「縦反転」を選べば縦方向のスピンが作成される。 さらに、表面裏面に異なった画像が貼り付けてあるような場合のスピンは(下右例)、以下のように作成する。 なお、下左例は上右例と同じであるが、スピードを上げたのと、滑らかにスピンさせている。


(1)ステージに数字2を描いた画像を配置する
(2)FRAME1を右クリックして「モーショントウイーンを作成」
(3)FRAME10、19にキーフレームを挿入
(4)FRAME1、19で「横反転」、それぞれのトゥイーンで「時計回り」「回転0」
(5)FRAME19でthis.gotoAndPlay("1");  を記述(前節回転参照)
(6)レイヤーを追加、数字5を描いた画像を数字2の画像の上に重ねて配置
(7)FRAME10、19にキーフレームを挿入
(8)FRAME10で「横反転」、それぞれのトゥイーンで「時計回り」「回転0」
(9)FRAM5、15にキーフレームを挿入、FRAME10のキーフレームを削除、FRAME6に空のキーフレームを挿入
  (この手順は、5の画像を画面から消すためであり、最初と最後に2の画像の上にのって姿を現すようにしている)
(10)FRAME19でthis.gotoAndPlay("1"); をアクションパネルに記述

ひらひらひらり 

 反転を使ってスピンさせながら、下に移動させると、木の葉が落ちていくようなエフェクトを出すことが出来る。 縦、横反転や傾斜などを組み合わせると違った効果が出せる。 以下に簡単な例を示す。

 

 各アニメーションの設定:
 (1)キーフレームを1,10,19
    FRAME10:縦反転
 (2)キーフレームを1,10,19
    FRAME10:横反転
 (3)キーフレームを1,10,19
    FRAME10:横反転+回転45度
 (4)キーフレームを1,5,10,15,19
    FRAME:5:縦反転、10:横反転、15:縦反転

 なお、(1)(2)(3)については各モーションとも、回転は時計回り、0回を設定。
 (4)については、自動を設定。

HOME   お勉強総リスト