# AE格闘記

## はじめに
　これは、筆者ろろとAEとの戦いを記録するものです。
できた動画はこちらです。著作権的に限定公開です。
{%youtube 29n9Ecmc4hk %}
自分のやり方はバリバリ初心者！なものですが、きっと誰かの参考になると信じています。
一つ伝えるとすれば、**生半可に足を突っ込むことはよくない**、ということです。

>## 第１節：戦いの始まり
>そもそも、なぜ戦うことになったのか。思い返せばきっかけは半年前にもなる。Adobe社がCreative Cloudの値上げを実施するとの知らせを聞いた。すでに納税を考えはじめていた自分には、この期を逃す手はなかった。徴税を課さないAviUtilをMacBookで動かし動画を作ることは厳しかった。そして、ついに自分は徴税されることとなった。
納税するからには、戦いが待っていようとも、AEと向き合わなくちゃいけない。
しかし、決意しても、戦いからは長い間逃げてしまっていた…。
>## 第２節：ぱらぱら
>覚悟無く戦場に立ち入って数ヶ月。自分は直接的な戦いから逃げてばかりでいた。いざ戦い、和解を目指そうとしても、言葉も何も分からなかった。結局、音を出す方法すら分からないまま、できたのは手描き動画を作ることだけだった。力で作ることに逃げた。
>
>できたものは動画と呼ベない代物。
もっと理解しなければ和解は掴めない。力ばかりではダメだ…。覚悟を決めたとき、AEとの戦いは激化していった。
次回、第３節：構想

---

ということで、動画を作ります。
## 第３節：構想
11月8日、製作開始です。MVを作るための曲選びをします。データを持っていて、未だ動画が作られていないもので、延々と聴いていられる好きな曲を選びました。
{%youtube 9I5Tu2phI-U %}
まふまふさんのアルバム「神楽色アーティファクト」収録の「マルファンクション」という曲をです。

【マルファンクション】機能不全

主人公が機械化されていく、とか壊れていく感じにしようと決めました。なにかモチーフが欲しくて、「ねじ」にしました。特に理由はありません。
全体の構想は決まりました。

このモチーフ作りにとっても苦労します。。。
## 第４節：シェイプぐるぐる

11月9日。モチーフを決めたはいいけども、またイラストで描いては成長なしです。モーショングラフィックス、やってみましょう。

今まで不思議でした。イラストとして描いたわけでもないのに、どうして動画の中で線が伸び縮みしたり丸がぐるぐる回ったりするのか。

方法は色々とありそうですが、自分は「シェイプレイヤー」を使うことにしました。

以下、もーしょんぐらふぃっくす以外にも必要な基本的なことのメモです。

>レイヤーにはいくつか要素があり、この数値を編集して画面に動きをつけられる。
>例
>・アンカーポイント　レイヤーの位置座標を決めたり、回転の中心になったりする点、だと思う。この点がレイヤーのどのへんになるか決められる
>
>・位置　第四象限の座標軸でレイヤーの位置を決められる
>
>・スケール　%で数字を入れるとレイヤーの大きさが変わる。マイナスの数字も入れられて、マイナスだと裏返る
>
>・回転　角度の数値を入れる。時計回り正でアンカーポイント中心？でぐるぐる回せる
>
>・不透明度　%で数字を入れる。0%でレイヤーが表示されなくなる。便利
>
>ほかにも色々と要素がある。大事なのはこの要素は各々「キーフレーム」を打つことで、各フレームでの数値を決められる。
>例
>１秒のとき　不透明度　0%
>→５秒のとき　100%
>これで、1~5秒でそのレイヤーがフェードインする。

つまり、基本的には
キーフレームを打って
レイヤーの位置座標きめて動かしたりなんだりする
だけしか自分にはまだできなさそうでした。

ひとまずはネジ山の×と○を動かすことに決めます。
機械が壊れてねじが抜けていく感じに、ということでバツは左回りにします。
脳内ではレイヤーをいくつも作れないのに、たくさんのものを動かすことになりました・・・。

## 第５節：凍える右手
11月10日。

キーフレームの間はAEのほうで補完して動かしてもらえますが、そのままの動きだと不自然になりがちです。
位置座標を変化させると、等速で動きます。

これを直すために、登場。グラフエディタ。

数値の変化をグラフで見られます。グラフの線をマウスで引っ張ったりすると、びょーんと曲線にできたりします。(ざっくり）
これで等速でなく、勢いのある動きにできます。
ブレーキがかかるみたいに遅くなる・・・とか・・・

グラフエディタでは「ベジェ曲線」というのを扱うんですね。
自分は未だ和解しておらず、よくわかってません。
キーフレームにくっついた「ハンドル」を伸び縮みさせると、連動して曲線の極大・極小になるところを決められる・・・と思っています。が、細かい作業ですぐに曲線の形が変わってしまうので、違うかもしれません。
ただ、一応なんとなくで使い始めてもグラフエディタは十分有用です。

（ここまででできたものを見せたいけれど動画の載せかたがわからない…）

これだけでは全くMVになりません。素材になるイラストも自分で用意する手前、設計図を作ることにしました。

## 第６節：紙束
全体像を掴むために、絵コンテを作り始めました。いつでも、動画の作業と並行してできるように、A4用紙に描きます。

これ、めちゃめちゃ便利です。

動画の作り方やら演出やらよくわかりませんので、とりあえず曲全体の絵コンテを作ってしまい、これに従って素材も動画も作ることにしました。通学中ずっと曲を聴いて、脳内で画面の想像をします。何度も聴くうちに想像が１つにまとまってくるので、描けるときに絵コンテにレンダリング()します。画面構成とそこで使う素材・演出？をメモります。

ただのやりたいことリストです。

ですが、自分で絵を描いて動画を作る場合は、絵コンテがあったほうがいいと思います。楽です。動画編集が進んでいなくても次のシーンに使う素材を描いておけたり、使い回す画像も決めやすいです。
あと、締め切り間際で追い詰められても、脳死で作れます。

## 第７節：おもいも！！
イントロ、とファイル名をつけられる程度に作業が進みました。
音に合わせて素材を動かします。
作っておいた「ねじ」の素材をイントロに組み込んでいきますが・・・めちゃめちゃ重い・・・

動画を作りながら、プレビューで確認しますが、このプレビューすらできずにAEが落ちまくりました。AEは落ちる直前にコピーを保存して残してくれますが、このコピーがいらないくらい落ちる間隔が短いのです。プレビューで確認したい→落ちる→コピーできる→コピー開く→確認したい→落ちる→コピーできる→コピー開く→確認したい→落ちる・・・

ファイル名が「マルファンクション1_1_1_1_1_1_1.aep」とかになりました。プレビューしなくても少しいじる度に長い読み込みが入って、下手すると落ちました。困ったなあ・・・(ヤドキング)

考えられた原因
その１：スペックが足りない
たぶん**これではない**です。メモリ使用率みるかぎり大丈夫そうです。最大で10/16GBくらい使ってましたが、AE以外には何も使ってませんでした。プレビューする度増える「キャッシュ」データがストレージを圧迫してましたが、これで落ちることはなさそうです。

その２：エフェクト・オブジェクトが多い
毎フレーム数値に合わせて計算して画面に適用する系のエフェクト(例：フラクタルノイズで模様が動く＆オーバーレイで色も変わる）とかは厳しそうです。作っていた「ねじ」のようなまだ動画(mov, mp4)になっていない編集中のファイル（？）「コンポジション」をそのままレイヤーにするのも同じ理由で良くないと思います(よくない)。　あと初心者らしく、むだにレイヤー数多いと思われます。
これの解決のために、レイヤーごとに分離して動画にしてしまうといいみたい・・・です。==[1]==

めちゃめちゃ苦労しましたが、ある程度形になりました。

動画の載せかたわからない・・・(2回目

## 第８節：ンョン
ここまでできてきて、一度ここでAEに負けかけました。疲れちゃいましたね。。。ちょうど早稲田祭お疲れ様飲みかなにかがあって、精神的に一区切り着いてしまいました。

ここで映像を確認すると
タイトルロゴが
「マルファンクンョン」
になっていました・・・。
ロゴはクリスタで描いたもので、フやン、シは近い形になるように、同じ形をコピペして描いてました。
失敗しました。

ということで気を引き締め直して動画を作ります。
タイトルは直しました。

## 第９節：すべて自分でやるということ
気合いを入れ直したはいいものの、手こずっていたのは「イラストを描くモチベの維持」です。なにぶん筆が遅く、素材が必要でも絵のタスクが溜まってしまいました。

しかも、いままでは「使い回す」ということを考えたことがなく、素材としてどう保存するか、も悩んでしまいました。
ここでモチベ維持のために、やりたい部分から書くことにします。どうせ保存形式が煩わしいのなら、「動くことが目に見える」ものを描いた方が楽しいかもしれない。です。(血迷ってます)

ということで、また、「てがきあにめーしょん」です。

## 第１０節：動く絵
力こそパワー

ということで手描きアニメーション作ります。とはいえ、アニメの作り方の知識はゼロです。

わたしがやってるやり方は、面倒かもしれませんが単純です。ご参考までに書いていきますね。

作るアニメーション：手がくるーとする

まず、複雑な動きのアニメーションも簡単な動きの組み合わせ、らしいです。ということで「手の向き(アングル)が変わる」「手の位置が変わる」「手首あたり中心に回転する」の３つに分けて考えます。後ろ２つはAEで画像配置するときに考えられますので、手描きの部分は「手の向きが変わる」ところです。

１：始点の絵を描きます。

描きました。

２：終点の絵を描きます。

描きました。

３：始点と終点のちょうど真ん中になるような絵を描きます。
コツとしては、線画の状態の時に二枚の線画の各パーツのちょうど中央を通るような線を描きます。イメージは角の二等分線・・・？

描きました。

４：１と３、２と３で描いた絵のまん中を描きます。
３とおなじ調子で描きましょう。

５：繰り返します。
繰り返す途中で、「まん中じゃない！」な線画が生まれてしまったら、補うように描いていきましょう。

これだけですね。満足するだけ描きます。
便利のために、連番の名前付けをしてpngで保存します。

ではAEでの作業に移ります。
今回の手は、曲に合わせると大体１秒くらいのカットでした。１４枚描いたので、１枚あたり２フレームずつ表示されるように不透明度のキーフレームを打ちます。0%と100%を各フレームで切り替えるとできます。
「手の位置が変わる」「手首あたり中心に回転する」を実現するために、各画像を配置します。なめらかになるように。。。

配置しました（の画像が出ます）（出ませんでした）

これで不透明度合わせとけば、作った動画の最後みたいに動きます。

同じ方法で目が開く部分も描きます。

## 第１１節：新たな次元
結局手描きで無理やり動かしましたが、動く画を作るのならやりたいことがありました。「カメラ」です。

３Dにレイヤーを配置して、カメラレイヤーの位置を動かすとズームしたり注目する点を変えたりできます。素材を回さなくても、カメラが回れば画面ごと回せます。

ちなみに、うまく使わないと「重い！！」の再来です。

特にやりたかったのは、「一気にズームアウトからのズームイン！」「ピンボケ」「ゆらゆらとまわったりする」演出です。基本的にはキーフレームを打って動かすことになりました。動画のあちこちで使っています。

## 第１２節：マスクとマット
結局まだ仲良くなりきれていないのは「マスク」と「マット」です。どちらも、クリスタでいうクリッピングみたいなことができる機能です。たぶん。

特に、文字の挿入や画面の切り替えで便利に使おうとしてます。
例えば、クリスタでクリッピングされる側の画像のスケールが０になったら、上の画像も見えなくなります。同じような感じで、スケールを０から大きくしていくと、クリッピング（ではないけれど）していた文字が一部分から少しずつ表示されていきます。
下の画像が動くと表示される場所が変わっていきます。

これぐらいしか・・・まだよくわかりません。マットにいくつか種類があって、思ったような表現を作り出すのは偶然の産物、でした。

## 第１３節：じゃばじゃば
なんでもできると聞きました。エクスプレッション。

キーフレームやグラフエディタで制御していた数値は「エクスプレッション」で制御できます。これはjava script,らしいです。

今回、いくつか使いましたが、とっても基本的なものですので例として出します。

例その１
time*300
１秒経つごとに３００ずつ数字が増えます。

例その２
if( time >= 2 && time <= 5 ){
wiggle(2,5);
}else{
value
}

解説します。timeは秒数です。「この動画の３秒以上５秒以下のとき」という意味です。本当はフレーム数で制御しようと思ったのですが、秒数でうまくいったため調べることをサボりました。

wiggle()ですが、多用しました。乱数が生成される関数っぽいです。基本的には数字が大きくなると乱数の大小の幅が大きくなります。カメラの手ブレの再現ができ、なんとなく格好良くなったり不安感をあおることができる、ということだと思います。
周辺減光と相性がいいです。

valueは、「エクスプレッションがなかったら本当はこの数字」にしてくれます。

if文が出てきたように、ちゃんとjava scriptで書けば割となんでもできる、らしいです。みゅーくん様などに聞いてください。

## 第１４節：天才
絵コンテができた時点で「AEとの戦い」＝「絵コンテの再現作業」でしかなくなり、本当に機能理解・技術力だけが必要になってきます。
ここで分かってきたことは、「動画作ってる人みな天才」「自分に天才と言い聞かせ続けること大事」の２点です。

今回の制作期間は１ヶ月未満(知識０スタート)でしたが、根気があればなんとかなりそうです。(なんとかなってるな)ということが自分の動画からわかると嬉しいです。

## 第１５節：先人の話
ここまできて、ちゃんと形にできたのはAE遣いの先人たちの教えのおかげなわけです。twitterやdiscordで騒いでいた時に助けてくださった方々、本当にありがとうございます・・・

後ほど参考にしたURLをたくさん貼ります。（わかりやすいかのコメントもつけるかもです。）（一年後追記：貼って無いね）

以上です。ありがとうございました。参考になれば幸いです。
にしょーくんのあどかれ、読んでね