AfterEffects（アフターエフェクト）を使用して、illustratorで作成したキャラクター（落書きくん）を歩かせるアニメーションの作成です。
今朝【AfterEffects】で作成した「歩く落書き君」。
イラレで作った落書きレベルのキャラクターが歩くアニメーションです。
チュートリアル動画は明日１２時にアップ予定なので見てね。#AfterEffects#アフターエフェクト#落書きが歩く pic.twitter.com/ZWRIgLugy0
— RYUJI@動画作成/レタッチ/ブログ/を楽しむ (@r_chapter8) February 13, 2020
illustratorでキャラを作成
illustratorで「頭」「体」「右手」「左手」「右足」「左足」とそれぞれのパーツに分けてキャラクターを作成します。
レイヤーはそれぞれに分けておきます、
AfterEffectsを起動させ読み込む
illustratorを開いたままAfterEffectsを起動
させます。
新規コンポジションを作成。
背景を読み込みタイムラインに配置。
【Ctrl】＋Ｉキーを押しファイルを読み込みます。
【読み込みの種類】を【コンポジション】に変更し【読み込み】。
読み込んだファイルをダブルクリック。
タイムラインにそれぞれのレイヤーで表示されます。
【Shift】＋クリックですべてのレイヤーを選択し、
【Ctrl】＋Ｃでコピーします。
【コンポ１】のタイムラインに切り替え、
【Ctrl】＋Ｖでペーストします。
「アンカーポイントツール」で稼働させる関節を作成
「頭」
レイヤーを選択。
【アンカーポイントツール】を選択。
アンカーポイントを頭の付け根に移動させ配置します。
「左足」レイヤーを選択。
アンカーポイントを左足の付け根に配置。
「左手」レイヤーを選択。
アンカーポイントを左手の付け根に配置。
「体」レイヤーを選択。
アンカーポイントを体中央付近へ配置。
「右足」レイヤーを選択。
アンカーポイントを左手付け根あたりに配置。
「右足」レイヤーを選択。
アンカーポイントを右足の付け根に配置。
これで各パーツの可動するポイントが作成されました。
右から左に移動する設定
タイムラインの【親とリンク】を「頭」「左手」「左足」「右手」「右足」すべての親を「体」に紐づけておきます。
【レイヤー】メニュー【新規】から【ヌルオブジェクト（Ctrl+Alt+Shift+Y）】を選択。
「体」レイヤーの【親とリンク】を【ヌル１】に設定。
タイムラインのインジケーターを「０」にして、
【ヌル１】レイヤ【トランスフォーム】から【位置】にキーフレームを設定。
【位置】数値を変更し画面の右（歩き始める位置）に「落書きくん」が見切れるまで移動させます。
インジケーターを「６」秒まで移動させます。
【位置】の数値を画面左（歩き終わる位置）まで移動。
これで「落書きくん」が右から左へと移動するアニメーションができました。
手足を動かす設定
インジケーター「１」秒へ移動。
＊「０」からでもいいんですが、見切れて動きが確認できないので「１」から設定しています。
「左足」レイヤー【トランスフォーム】から【回転】にキーフレームを設定。
【回転】の角度を変更。
左足が設定したアンカーポイントを中心に可動します。
一歩前に出る位置に設定。
インジケーター「0,00,01,10」（１０フレーム）移動させます。
【回転】の角度変更。
左足が後ろの位置へ行くまで回転させます。
インジケーター「0,00,01,20」（１０フレーム）移動。
一番目のキーフレームを選択し、
【Ctrl】＋Ｃ（コピー）し【Ctrl】＋Ｖ（ペースト）します。
コピーされました。
これで左足が「一歩前に出る」⇒「一歩後ろに下がる」⇒「一歩前に出る」の動きができました。
１０フレーム刻みにキーフレーム設定していきます。
インジケーター「0,00,02,00」へ移動させ前に設定した２つのキーフレームをドラッグで選択。
【Ctrl】＋Ｃ（コピー）し【Ctrl】＋Ｖ（ペースト）します。
コピペされました。
さらにインジケーター「0,00,02,20」（二つのキーフレームがコピペされたので２０フレーム）へ移動。
そのまま【Ctrl】＋Ｃ（コピー）し【Ctrl】＋Ｖ（ペースト）します。
インジケーター「0,00,03,10」（二つのキーフレームがコピペされたので２０フレーム）へ移動。
そのまま【Ctrl】＋Ｃ（コピー）し【Ctrl】＋Ｖ（ペースト）します。
これをどんどん繰り返していき「６」秒超えるところ（落書きくんが画面左から見切れるまで）まで設定します。
次に「１」秒以内にも設定。
インジケーター「0,00,00,20」に移動し２つ先のキーフレームを選択。
【Ctrl】＋Ｃ（コピー）し【Ctrl】＋Ｖ（ペースト）します。
コピペされました。
インジケーター「0,00,00,10」へ。
２つ先のキーフレームを選択し【Ctrl】＋Ｃ（コピー）し【Ctrl】＋Ｖ（ペースト）。
これを繰り返し「０」まで設定します。
これで左足のアニメーションができました。
この要領で右足も同様に設定していきます。
インジケーター「１」秒に移動。
【回転】にキーフレームを設定。
【回転】の角度を調整。
左足の動きと逆になるように回転させます。
インジケーター「0,00,01,10」へ移動。
【回転】の角度を調整。
右足が左足と逆になるように。
インジケーター「0,00,01,20」へ。
２つ前のキーフレームを選択し【Ctrl】＋Ｃ（コピー）し【Ctrl】＋Ｖ（ペースト）。
インジケーター「0,00,02,00」へ。
手前２つのキーフレームをドラッグで選択し【Ctrl】＋Ｃ（コピー）し【Ctrl】＋Ｖ（ペースト）。
左足同様に進めていきます。
「１」秒以内の部分も同様に設定。
これで両足のアニメーションが作成されました。
両手も同じやり方で設定。
体に歩行時の揺れを作成
インジケーター「１」秒へ移動させ、
「体」レイヤー【トランスフォーム】から【位置】にキーフレームを設定。
インジケーター「0,00,01,05」（５フレーム）移動させます。
【位置】の数値を１０程度低くします。
インジケーター「0,00,01,10」へ移動し、
２つ前のキーフレームを選択【Ctrl】＋Ｃ（コピー）し【Ctrl】＋Ｖ（ペースト）。
体も同じようにコピペしていきます。
これで歩くアニメーションが完成です。
最後に好みで足音をつければＯＫです。一歩づつ「ふにゅ」っとなるように設定しています。
今朝【AfterEffects】で作成した「歩く落書き君」。
イラレで作った落書きレベルのキャラクターが歩くアニメーションです。
チュートリアル動画は明日１２時にアップ予定なので見てね。#AfterEffects#アフターエフェクト#落書きが歩く pic.twitter.com/ZWRIgLugy0
— RYUJI@動画作成/レタッチ/ブログ/を楽しむ (@r_chapter8) February 13, 2020
動画チュートリアル
まとめ
手順は同じような工程の繰り返しだけなので複雑そうに見えて非常に簡単です。
illustratorを開いたまま作業をすれば、各パーツの位置をillustratorで修正、保存でAfterEffectsと同時されているので修正がすぐに反映されます。
また、画像データでも各パーツに分ければ同様に動かすこともできますので。
