AEでちょうちょが飛ぶイラストアニメ
みなさん、こんにちは。
株式会社FORKの、webデザイナーのNorishioです。
聞いてください･･･！気がついたら知らない間に７月も末だったんです！
ビックリですよね･･･。いや、もうホラーかと思いました(゜-゜)やらなきゃいけないことほぼ終わっていなくて･･･((T_T)ｶﾅｼｲｷﾓﾁｦﾊﾞﾈﾆｶﾞﾝﾊﾞﾘﾀｲﾄｵﾓｲﾏｽ･･･。
さて今回の記事では、
先日上げたInstagram動画の作り方をざっくりまとめたいと思います。
０１ パーツわけ
今回もパーツわけを見ていきたいと思います。
今回のパーツわけはこんな感じです。↓
動く花は１個１個分けていますが･･･花と茎で分けてはいませんし、ちょちょは羽の部分で分けたりせずこちらも同様に１枚絵です。①動かない１枚絵をベースに、②花を盛り付け④キャラを入れ･･･さいごに③ちょうちょがくる。ざっくり４層構造になっています。それとキャラはほぼ動きませんが、まばたきの差分を２枚つけています。
今回はinstagramのサイズより少し大きめの2000×2000で作っています。
AEに読み込んだ際に、psdのレイヤー構造をそのまま持ってこれるので（レイヤー効果は反映されない）パーツごとにレイヤーは統合してくださいね！
０２ アニメーション
花の動きは茎や花の付け根にアンカーポイントを移動し、回転の動きを左右につけます。花の回転の動きは弱めにつけるぐらいが自然にふわふわゆれている感じになるのでおススメです。私の動画だと大体３度と０度でゆれています。このへんは個々で揺れるタイミングをずらしたり、弱くしたりするとより自然な感じになります。
ちょうちょの動きはこちらのTORAERAさんの動画を参考にさせていただきました！
①ちょうちょは半分でマスクを切る
※アンカーポイントをオブジェクトの真ん中の位置に移動させる
②上のレイヤーを複製し、マスクを反対側に切る
③３Dレイヤーにする
④片方のレイヤーのy軸の回転のストップウォッチをAltでクリックし、🌀マークをもう片方のレイヤーのy軸の回転にドラッグでつなぐ
⑤アニメーションの記述の先頭に-（マイナス）をつける
これで左右反対方向に羽が動く
⑥羽の羽ばたきをキーフレームアニメーションでつける
⑦ヌルオブジェクトを作成
⑧ちょうちょのレイヤー２つを🌀マークでヌルオブジェクトに親子付けする
⑨ちょうちょの向きを決める（正面～横など）
⑩画面上のちょうちょの移動をつくる（上下の動きやちょうちょの向きも一緒に変更させたりする）
０３ まとめ
いかがでしたでしょうか。
ちょうちょの動きなど初心者向けのチュートリアル紹介ですが、ちょうちょの種類のバラエティをつくったり、飛び方の動きを変えたり止まったまま羽だけ動くものなど分けてみるとそれなりに見ごたえがあるのではないでしょうか･･･？ぜひぜひみなさまの創作活動に生かしてみてください～！
以上動画部でした！
▼動画部ではほかにもAEやPrなど動画に関する記事を書いています。
FORKのインスタやマガジンもよろしくお願いいたします～('ω')ノ
FORKの公式アカウント
▶インスタはこちら ▶マガジンはこちら
7月のインスタはカワイイがテーマでした。
毎月テーマごとの各デザイナーのアウトプットをぜひお楽しみください！
フォロー・スキ・いいね大歓迎です(*´з`)ノ
noteではサイトレビューのマガジンもあります！
FORKはweb制作の会社です～📢