引き続きAfter Effectsを触る日々を送っております。
目次
トランジッション習作
トランジッショとは画面切り替えのときのエフェクトです。After Effectsに初めからある機能を使ってもいいのですが、今は仕組みややり方を学んでいる段階なので手作業で行きます。
1作目
mooographさんのYoutubeチャンネルより。作業用・完成後のデータも配布されていましたが、動画を見ながら手作業で真似をしていきました。
2作目
YoutubeでAfter Effetcsの解説動画を見倒していたので、海外勢の解説動画もサジェストされるようになりました。そのいくつかを参考にしてトランジッション習作です。
Lottieに書き出す
これは当初からやりたかったことです。しかしAfter Effetcsをある程度理解していないと、どの動きや効果ならLottieに書き出せるのか分からずお手上げでした。今ならできるかーーー？！
3作目
シンプルなローディングアニメーションです。スケール（拡大・縮小）、不透明度、テキストのエフェクトで構成されています。
bodymovinを使用してjson書き出しします。
こちらに書き出したjsonファイルをドラッグして動作を確認します。動いてるからOKかな？
以前の記事を参考にして（記事内容が古くなってるな）・・・
▼コードを貼り付けたのがこちら
動いてる！ やったあ！🙌
4作目
イラストを動かすのにもチャレンジ！
Twitterに背景透過のmp4を投稿すると、背景真っ暗になっちゃいますね。。3作目のときは書き出し用に平面レイヤーで白背景を敷いていたのですが、今回はその作業を忘れてしまってました。
イラレで作成した読み込んだベクトルレイヤーをシェイプに変換せずにjson書き出しまでやって、プレビューでこんな目に。。。
気を取り直してシェイプ変換からやり直しました。
▼コードを貼り付けたのがこちら
成功！ それっぽい〜〜〜〜！🎊
Adobeの勉強はAdobeで！
Adobeさんも、Adobe CCを契約している人なら無料で視聴＆勉強できる各アプリのオンライン動画を用意しています。アメリカ・カナダの動画に日本語字幕を付けたものから、日本のクリエイター登場し身近な「これやりたい！」を学べる講座まで幅広く揃えられています。
私は上記の「Illustratorユーザーのためのモーションデザインことはじめオンライン講座」にトライしては、「？？？ 今なにやったの？？ 真似してやってみよう。……なんとなくできた（理解はできてないから次回には忘れている）」を繰り返していましたが、After Effectsを勉強し直すうちに、徐々に理解が深まってきました。
まだシーズン1を終えた段階ですが、このままs2、s3へと勉強していこうと思います。
5作目
上記講座の中でイージングの説明のために山下大ちゃん先生が作成したいた動画を、自分でも作ってみました。イージングってうろ覚えで曖昧なまま放置してきたんですが、実際にこうして動画を作ることで理解できたような！
6作目
まとめの習作です。テキストの現れ方、トランジッション、アイコンの現れ方など、これまで断片で作成してきた要素をひとまとめで作成してみました。
動画が始まる前のロゴ表示っぽいでしょ！
ところで同じように書き出してTwitterに配置しているつもりなのですが、上はリピートされて下はリピートされない……。何故なんだ。。