手のスマホアニメーション みなさんこんにちは、クリエイターのフジです。 今回は、このようなスマホアニメーションを作っていきましょう。 インフォグラフィックスなどの演出に取り入れてみても面白いかなと思います。 では、早速作っていきましょう まずは、コンポを作成しましょう。 名前をスマホアニメーションとします。 FHDサイズで、フレームレートは30.デュレーションは3秒です。 そーしたら、ベースとなる手のイラストのAIファイルを読み込みましょう。 読み込みの種類をコンポジション、フッテージのサイズをレイヤーサイズにし、OKをクリックしましょう。 そーしましたら、手のAIファイルをプロジェクトパネルからタイムラインパネルにドラックして持ってきます。 右クリックから作成、ベクトルレイヤーからシェイプを作成をクリックして、イラレレイヤーをシェイプレイヤーに変えましょう。 作成できたら、イラレレイヤーの方は削除しても大丈夫です。　 次に、手のイラストに線をつけましょう。 グループ1の中のパス1を選択し、追加から線を追加しカラーを黒に変更します。 レイヤー順番によっては、意図しない結果となってしまいますので、今回は塗りよりも線が上にあることを確認してください。 ではさらに準備を進めていきます。 今回のスマホアニメーションにあたって、この手のイラストを親指とそれ以外に分ける必要があります。 イメージとしましては、このように、上のレイヤーから親指、スマホ、親指以外の手という風にレイヤー分けをします。 😐イラストとレイヤーのイラスト では、さっそく手のイラストを二つに分けていきましょう。 まず、この手のレイヤーをCtrlDで複製します。 複製したら、インデックス番号1のレイヤー名をthumb、インデックス番号2のレイヤーをhandに変更します。 レイヤー名変更方法は、レイヤー名を変更したいレイヤーを選択し、enterキーです。 一旦handレイヤーを非表示にします。 つぎに、サムレイヤーを選んだ状態で、パスと検索しましょう。 そして、パス1を選択し、親指以外のパスの頂点を削除しましょう。 パス1ではなく、その下のパスを選択した状態では、パスの頂点の削除はできないので注意しましょう。 これで親指だけのレイヤーが完成しました。 では次に、この手全体のイラストから親指のみを消していきます。 いろんな方法がありますが、今回はトラックマットを使用します。 トラックマットとは、指定したレイヤーの透明度や明るさを利用して、切り抜くことができる機能です。 これだけ聞いても、わからないと思いますので、実際にやっていきましょう。 まず、サムレイヤーをコントロールdで複製し、名前をhandmatに変更し、ラベルカラーをイエローに変更しましょう。 次に、サムレイヤーを一旦非表示にし、さきほど非表示にした、handレイヤーを表示にし、トラックマットのピックウィップを掴んで、ハンドマットレイヤーにドラックして繋げます。 トラックマットのピックウィップがない方は、下のこのスイッチモードをクリックしてみてください。 スイッチモードも無い方は、左下の、このアイコンをクリックしてください。 そーしたら、このクリックしてマットを反転をクリックし、マットを反転をさせます。 これで、手のイラストから親指だけを切り抜くことができました。 トラックマットにつきましては、また詳しい説明動画を出しますので、今は、なんとなく理解できていたら大丈夫です。 これで、親指と親指以外に分けることができました。 ここで、注意したいのが、サムレイヤーを非表示にすると、親指が全て消し切れておらず、少しだけ残ってしまっているのが確認できます。 ですので、サムマットレイヤーの線幅を1ピクセル上げて、切り抜く範囲を1ピクセル広げて、親指部分を綺麗に消します。 そーしましたら、サムレイヤーのパスを調整して、手は完成になります。 次に、手の大きさや角度を調整します。 Ctrl⇧オルトYでヌルを作成します。 名前をc アンダーバー　ハンドとします。 下の三つのレイヤー全てを選択し、親ピックウィップを掴んで、c handレイヤーにくっつけましょう。 先程のトラックマットのピックウィップと親ピックウィップは別物になりますので、混同しないように注意しましょう。 これで、cハンドレイヤーを動かすと、下の三つのレイヤーも同じ動きをするようになりました。 次に、c、handレイヤーのスケールプロパティを開き、スケールを150にします。 回転プロパティを開いて、62度に変更します。 では、メインとなるスマホをシェイプレイヤーで作成します。 Ctrlnで新規コンポジションを作成し、名前をスマホ、幅を500.高さを1000にしてokをクリックします。 そーしましたら、長方形ツールアイコンをダブルクリックしてスマホのベースとなる長方形シェイプを作成し、作成されたシェイプレイヤー1をCtrl Dで複製しましょう。 シェイプレイヤー2の名前をscreen1、シェイプレイヤー1の名前をiPhone1に変更します。 スクリーンレイヤーを展開し、塗りのカラーを白に変更し、サイズを少し小さくしてスマホの液晶画面のようにしていきます。 外枠のスマホ本体の色もお好みで変更してみてください。 最後に、スクリーンレイヤーとiPhoneレイヤーの中の長方形パス1を展開し、角丸の半径を61にしたらスマホは完成です。 スクリーンレイヤーとiPhoneレイヤーを二つ選択し、コントロールcでコピーします スマホアニメーションコンポを展開し、Ctrlブイでペーストします。 Ctrl HOMEで中央に配置します。 Ctrl alt ⇧ ワイでヌルを作成し、 名前をc _iPhoneにします。 スマホのレイヤー二つを選択し、親ピックウィップを掴んで、c-iPhoneにドラックして繋げます。 これで、スマホ全体の動きを制御するヌルを作成できました。 では、スケールを60に変更し、位置をコンポジションパネル内でドラックし調整します。 🙄次に、スマホレイヤー二つを選択し、Ctrlオルト↓キーを2回おして、スマホレイヤーをサムレイヤーの下に持ってきます。 cハンドレイヤーとcアイフォンレイヤーのx位置を調整し、iPhoneを画面中央あたりに持ってきます。 これでスマホアニメーションの準備は整いました。 では、さっそくスマホアニメーションをつくっていきましょう。 まず最初に、手を肘を起点に回転させ、スマホをキャッチするアニメーションをつくっていきます。 回転軸であるアンカーポイント位置を変更します。 cハンドレイヤーを選択し、 ショートカットきーYを押し、アンカーポイントツールに持ち替えます。 アンカーポイントをドラックして、画面左下に持っていきましょう。 これで、肘が曲がるような表現ができるようになりました。 cハンドレイヤーの回転プロパティを展開し、8フレームのところで、ストップウォッチアイコンを押し、キーフレームを打ちます。 HOMEボタンをおし、0フレームのところで再度キーフレームを打ちます。今度は、この菱形マークのところでキーフレームを打ってください。 次に、oフレーム目の回転の値を110にします。再生してみましょう。 これでは、動きが一定速で単調なアニメーションになってしまっています。 キーフレーム二つを選択し、f9を押して、動きに緩急をつけましょう。 再生してみます。 いい感じになりました。 次に、スクリーンレイヤー、スマホレイヤーの二つ選択し、7フレームのところで、Ctrl⇧Vで分割します。 スクリーンレイヤー1、スマホレイヤー1二つを選択し、親ピックウィップアイコンをCtrlを押しながらクリックし親子関係を解除します。 そして、このモグラのアイコンをクリックした後で、今度はこっちのモグラのアイコンをクリックしてレイヤーを隠しましょう。 これは、シャイレイヤーと言って、レイヤー自体は存在しているけど、タイムラインウィンドウでは、隠してくれる便利な機能です。 生産効率UPのために、アニメーションさせないレイヤーはシャイレイヤーにして、隠す習慣をつけましょう。 では、続けて、cハンドレイヤーの回転プロパティにキーフレームを追加していきます。 HOMEボタンを押して0フレーム目に戻り、ページダウンキーを11回押して、11フレーム目の ところで回転を49度にします。 また、7フレーム進めて18フレームのところの回転を62度にします。 この二つのキーフレームもf9を押して緩急をつけましょう。 再生します。 パッと見は、良さそうなのですが、よくみるとスマホをキャッチした瞬間の8フレーム目のところで、一回動きが止まってしまっているのがわかるでしょうか？ これは、f9を押してイージーイーズをかけたことが原因になります。 イージーイーズをかけたところでは、必ず速度は0になってしまうからです。 速度がゼロになる箇所は、動き始めと動き終わり、それから、運動のの向きが変わる瞬間 1.3.4の箇所だけが理想なので修正していきましょう。 　Ctrlnで新規コンポジションを作成し、名前をライントーク、幅を500.高さを1600にしてokをクリックします。 長方形ツールアイコンをダブルクリックし、コンテンツを展開し、サイズを変更します。 縦横比のロックを外し、横を200.縦を50にします。 位置も変更します。 ショートカットキーpを押して、位置プロパティを開き、x 位置を110.y位置を40にします。 シェイプレイヤー1の名前をWhiteに変更し、コントロールdで複製します。 複製された方の位置プロパティを展開し、ストップウォッチアイコンをaltを押しながらクリックしてエクスプレッションを追加します。 このように、エクスプレッションを入力しましょう。 エクスプレッションについては、また別の動画で詳しく説明しますので、今は理解できなくても大丈夫です。 aftereffectsをより便利に活用できる機能とだけ、覚えておいてください。 そして、このエクスプレッションを追加した方のレイヤーを選択し、11回複製します。ショートカットキーはCtrldです。 😲では、さらに準備を進めいてきます まずは、作成します コンポが作成できたら では、次に行きましょう では、次に〜したいので〜します。 転送制御アイコンをクリック トラックマットのピックウィップを トラックマットとは、指定したレイヤーの透明度や明るさを利用して、切り抜くことができる機能です。 反転マットにすると切り抜かれる部分が 反転するのでこのようになります トラックマットに指定したいレイヤーに向かってドラックして線を引っ張ります 🥱今回はここまでです。 次回は、この素材を使って、スマホを操作するアニメーションを作っていきましょう。 ではまたお会いしましょう。 ご視聴ありがとうございました。 　　次に、パスの形を整えていきます。 親指の付け根あたりをズームし、選択ツールに持ち替えてはみ出した線を調整しましょう。 パス操作するにはパスレイヤーではなく、パス1を選択しないと、意図しない結果になるので注意しましょう