こんにちは、赤堀堂馬です。第1回、第2回とAnimeEffectを動かす前の準備段階を解説してきました。今回はいよいよ、レイヤー分けしたPSDにアニメーションをつけます。 自分の描いた絵を簡単に動かしてみたいと思っている方は、使い方さえ覚えれば簡単なのでぜひやってみてくださいね。 解説動画を作ってみたので、下記の解説を読んでだいたいを把握した後に、実際どのようにキーを打っているのか理解するために動画を見ることをオススメします。 %3Ciframe%20width%3D%221271%22%20height%3D%22715%22%20src%3D%22https%3A%2F%2Fwww.youtube.com%2Fembed%2FgYoAneZYCBc%22%20title%3D%22%E3%80%90%23animeeffect%20%E3%80%91%E8%87%AA%E5%88%86%E7%B5%B5%E3%81%8B%E3%82%89%E3%82%A2%E3%83%8B%E3%83%A1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%82%92%E4%BD%9C%E3%82%8D%E3%81%86%22%20frameborder%3D%220%22%20allow%3D%22accelerometer%3B%20autoplay%3B%20clipboard-write%3B%20encrypted-media%3B%20gyroscope%3B%20picture-in-picture%3B%20web-share%22%20allowfullscreen%3D%22%22%3E%3C%2Fiframe%3E 回転を使って頭を動かしてみようAnimeEffectsを開いて、まずはファイルから新規プロジェクトを作成します。初期ソースのところにレイヤー分けをしたPSDファイルを選択します。 左下のターゲットドックにレイヤーが表示されます。 頭部がゆらゆらと動くようにしたいと思うので、左上の十字のマークを押して、その下の丸ボタンを押します。中心点が変な位置になると思ったように回転ができないので、回転するときは中心点を見定めることをオススメします。 中心点が決まったら、丸ボタンの横の→を押して必ず回転にチェックマークを入れて動かします。回転させるとキーフレームが打たれます。頭部の回転が終わったら、その動きに合わせて後ろ髪も回転させます。 回転はなんとなく回転させるよりも数値を揃えたほうがきれいであり、小数点を切り上げたほうがわかりやすいです。なので、プロパティドックにある回転を展開し、角度を-10とわかりやすく入力しました。頭を動かしていない時は0、右に動かした場合は10になります。 キーフレームのキーを選択して右クリックし「キーをコピーする」を押します。その後右クリックして「キーを貼り付ける」を押すと、同じ動きが別の箇所にコピペできます。何度も繰り返し同じ動きをする場合は、キーのコピペを使うと時短になるでしょう。 また、何も動かしていない状態をキーに打ち込むことを必ず忘れてはいけません。でないと、変形させすぎて形が崩れ、Ctrl+zで戻りきれない場合、元々合った形を再現することは難しいからです。 透明度を使ってまばたきをさせる まばたきをさせるために、以下のようにレイヤーを分けました。 右まつげ右まつげ閉じ右瞳右白目 まばたきはプロパティドッグにある「不透明度」を使うことでできます。まず、まつげと白目と瞳の不透明度を0にして、まつげ閉じの不透明度を1にします。するとまつげと白目と瞳が透明になって消えて、右まつげ閉じだけが残ります。 このままだと目がすーっと消えていくようになってしまうので、不自然にならないように先程打ったキーの直前にまつげと白目と瞳の不透明度を1、まつげ閉じの不透明度を0に設定します。ぱっちりとまばたきをさせたいので、目を閉じた直前の目のキーの部分を全部選択し、直後にキーを貼り付けます。 まばたきをさせたいところに、先程作ったまばたきのキーのセットをコピペしていきます。左目も同じようにやっていきます。 透明度を設定して口や文字を動かす透明度を設定することで、まばたきだけでなく、口を動かしたり、文字を点滅させることも可能です。 口開け口閉じ口三角 上記のように差分を用意しておき、透明度を設定することで目とあわせてイキイキとした表情を生み出すことができます。 また、Now Loading...の文字やzzzの文字の場合、1文字ずつレイヤー分けをしておいたので、透明度を設定することで1文字ずつゆっくりと出せます。 移動とボーンを使ってメガネを動かそう 三角の口を用意したので、びっくりしたような感じにするためメガネを下にズリ降ろします。このままだと耳にかけているメガネの部分が耳から外れてしまうので、ツールドックの骨マークを押して、ボーン構築の+ボタンを押し、ボーンを入れたいところをクリックして点を打ちます。そして、必ずボーン構築の右から3番目のボタンを押し、可動領域を設定しましょう。次に、ツールドックの骨の横のマークを押します。ボーンを入れた箇所が動かせるようになっているので、不自然にならないよう動かしましょう。 拡縮を使ってバーを動かそう バーは以下のようにレイヤー分けをしています。バー中（動く部分です）バー外（枠です） ターゲットドックにあるバー中を選択し、まずプロパティドックにある移動を選択します。移動の重心をバーの一番左に来るように設定し、次に拡縮を選択します。 割合1が100%の状態なので、0.7などバー中が枠の中でいったりきたりするように設定していきます。 ループ素材にしたかったので、満杯に届きそうで届かない感じで終わらせました。 ボーンを設定して髪の毛を揺らす髪の毛は以下のようにレイヤー分けしています。前髪横髪後ろ髪頭の揺れに合わせて髪の毛が揺れるようにボーン設定をします。メガネのときと同じです。ツールドックの骨マークを押して、ボーン構築の+ボタンを押します。そして動かしたい部分をクリックしていきます。 次に、右から三番目の円形のボタンを押し、可動領域を設定していきます。打った点を横にドラッグすると赤く領域が表示されるので、設定していきましょう。動かしたくないところは設定しません。 横髪、後ろ髪も同じように設定し、頭の動きに合わせてボーンを動かしていきます。わかりにくかったら顔の部分を非表示して編集しましょう。少しいびつですが、あとでなんとかします。 メッシュ機能と自由変形で1枚絵の背景を動かそう せっかくなので背景を動かします。ツールドックの三角マークのメッシュ構築を押します。次にプロパティドックの画像を選択し、リソースを背景、メッシュ単位を20に設定しました。 上のレースの部分が、寝ていると垂れて、目を開けると元通りになるようにします。ツールドックのメッシュ構築の横にある自由変形を選択、マウスでぐいっと下にドラッグすると画像のメッシュの部分がへこみ、下に引っ張られます。 自由変形で髪の毛の変なところを調整しよう髪の毛がどうがんばっても少しガタガタになってしまったので、自由変形を使って調整します。ツールドックから自由変形を選択し、髪の毛が変に出ているところが中に収まるよう外からぐいっと押してあげます。 耳にかけている紙の部分がおかしいので、それも自由変形で直します。 指定の形式で出力する編集が全て終わったら一度名前をつけてプロジェクトを保存します。次に指定の形式で出力を選択し、MP4を選択します。 パラメーターは途中から再生させたいなど、こだわりが特にない場合はOKを押して書き出しをします。AnimeEffectで動画の出力を行うには、「FFmpeg」が必要となります。第1回目の記事にてダウンロードの方法を解説していますのでよろしければ「こちら」を御覧ください。 まとめ3回にわたってAnimeEffectの解説をしてきました。AnimeEffectは使い方さえ覚えれば、ミニキャラががんばれーって手を振ったり、女の子が飛び跳ねてハートマークが乱舞するなど簡単なアニメーションを作ることができます。ディスコードのスタンプのGIFや動くラインスタンプをAnimeEffectで作成するのもオススメです。イラストだけもかわいいけど、動いたらさらにかわいく魅力が増すでしょう。絵が描けない人の場合は、絵師に依頼するか、AI画像生成でイラストを作成し、ちょっと大変ですがそれをレイヤー分けすればアニメーションをつけることができます。ぜひ試してみてください。