COPYRIGHT © SONICJAM ALL RIGHTS RESERVED.
2015
2
DEC
CATEGORY:
マッスルタイム
GIFアニメーションを作って脳の筋肉を鍛えよう(応用編)

こんにちは。デザイナーの中山です。
僕は最近まで長期のお休みを頂いて心も身体もリフレッシュさせていただきました!
その勢いで張り切って応用編を皆さまにお届けしたいと思います!
(前回の基礎編はこちら

この応用編では
・スピードグラフ
・グロー
・チョーク
・3D回転
・波形ワープ

の使い方を解説いたします。上記5つはGIFアニメーションを作る上で知っていると色々な事に応用できるので必見です!



スピードグラフ


まずスピードグラフですが、百聞は一見にしかず!
ということで下のサンプルをご覧ください。

muscle3_10.gif
どうですか?
上が何もしていない状態、下がスピードグラフをいじった状態です。

スピードグラフとは簡単に言いますと速度に緩急を付ける機能です。
今回は初速をゆっくり終速を素早くしています。
こういった調整はWEBサイトでもJavaScriptで調整することが多いと思うので一般的になっていますね。
ですがAfter Effectsの良い所はそこを直感的に操作できる事だと思います。

使い方ですが、

muscle3_1.jpg
まず、始点と終点を選択した状態で右クリック→キーフレーム補助→イージーイーズを選択します。

muscle3_2.jpg
その後、赤枠のボタンをクリックして下さい。

muscle3_3.jpg
このようなグラフが出現します。これはデフォルトの状態なのですが何となく使い方が分かりそうですね。

muscle3_4.jpg
そうです!
黄色の部分を左右に引っ張ることによりこのように変化します。この状態では初速は緩やかに、終速に近づくと一気に速度が上がっています。
イラレやフォトショのペンツールに似てるのでとても感覚的に操作できます。
このスピードグラフは基本的には毎回使用するので覚えておきましょう!



グロー


次はグローです。サンプルをご覧ください。

muscle3_11.gif
何となく今話題のスターウォーズにも出てきそうですね!
特に黒バックの時に映えそうなこの演出の使い方は、

muscle3_5.jpg
エフェクト→スタライズ→グローを選択するだけです。
今回は、グローしきい値・グロー半径・グロー強度辺りをいじっております。



チョーク


次はチョークです。このチョークを使用すると有機的な動きを表現することが出来ます。
サンプルをご覧ください。

muscle3_12.gif
プルンッッと出てくる感じが気持ちいいですね!
一見複雑そうなこの動きも実は簡単に作成できてしまうんです。

まずオブジェクトからオブジェクトが出てくるような単純な動きを作成します。
その後、全体にエフェクトを適用するために2つのオブジェクトを「プリコンポーズ」します。
プリコンポーズとは簡単に言いますとフォトショップのスマートオブジェクトのような機能ですね。
※スマートオブジェクトが分からない方はググッてみてください!

muscle3_6.jpg
プリコンポーズの方法は、2つのオブジェクトを選択した状態で右クリック→プリコンポーズを選択するだけです。
このプリコンポーズしたオブジェクトにチョークを適用します。

muscle3_7.jpg
エフェクト→マット→チョークを選択して完了です!
チョークには設定項目は1つだけなのこちらの数値を上げ下げして気持ちいい範囲を設定してみて下さい。
今回は30に設定しております。



3D回転(擬似的な)


次は3D回転です。
こちらもサンプルをご覧ください。

muscle3_13.gif
WEBサイトのローディングでもよく見る動きだと思います。
こちらAfter Effectsの3Dレイヤー機能を使います。

muscle3_8.jpg
画像の赤い部分をクリックします。(デフォルトでは何もマークがついていないと思います)
すると、x軸・y軸・z軸を操作できる項目が出現します。何となく分かってきましたね!
今回はx軸・y軸を回転させて3Dに見せております。
この「0x+180°」となっている所は「回転数+何度回転させるか」という意味で、今回は180°のみの回転という意味です。
これが2x+180°ですと900°の回転ということですね!



波形ワープ


最後は波形ワープです。サンプルをご覧ください。

muscle3_14.gif
波打っていますね!
旗が風でなびいているように見せられたり、お化けみたいなぐにゃぐにゃのオブジェクトも簡単に作成することが出来るんです。
また、弊社実績のSPACE SHOWER NEWSのローディング画面でもこの動きを使っていたりします!

muscle3_9.jpg
使い方も簡単!
エフェクト→ディストーション→波形ワープを選択します。
波形の高さや幅、速度など自由にいじって見てください!
また、色々な図形を使ってみるのも面白いと思います。



まとめ


皆さまいかがでしたでしょうか。
今回の5個の効果だけでも色々なアニメーションに応用できる気がしませんか?
今回ご紹介した以外にもまだまだ簡単に効果が付けられる機能があるので色々試してみると面白いと思います。

WEBサイトのちょっとしたパーツに可愛い・カッコイイGIFアニメーションを使用するだけで印象が大きく変わるとので是非チャレンジしてみてください!



それではまた次回お会いしましょう!
マッスル!マッスル!



Special Thanks:森田(SONICJAM)

CATEGORY

×
CATEGORY
COPYRIGHT © SONICJAM ALL RIGHTS RESERVED.