今回は一枚絵から作成出来る、キャラが歩いてるアニメーションを作成する方法を紹介します。

キーフレームを使ってアニメを作るので何枚も絵を描く必要がなく、お手軽にアニメを作ることが出来ます。

動画版もありますのでよろしければ御覧ください

ポイント

アニメ初心者の方は書かれている工程を一つも飛ばさない様にした方が挫折する確率が低くなります。

アニメーション作成はイラスト作成と違い、一個飛ばすだけで何も動かなくなるので、慎重に作業をした方が成功しやすいです。

下記の講座は私が前回制作した講座です。

今回の講座でも初心者でもアニメ制作が出来る内容になっていますが、下記の講座の方が基礎的な内容になっています。

もしよろしければ合わせてご覧ください。

キャンバスの新規作成

まずファイル>新規作成でキャンバスを新規作成します。

作品の用途　の項目でアニメボタンを押し、

 

原稿サイズ1200×1080 72dpi

タイムライン

フレームレート10

再生時間50

 

でファイルを作成して下さい。

アニメ用のキャンバスが新規作成されました。

次にレイヤーウインドウにある　レイヤー1 を削除して アニメーションフォルダ のみの状態にしてください。

次にフォルダを作りましょう。

アニメーションフォルダーを複製して、このような状態のレイヤー構成になる様にして下さい。

下図のように、アニメーションフォルダ名をそれぞれ「人物」と「背景」に変更して下さい。

タイムラインウインドウを開きます。ウインドウ>タイムラインを押します。

タイムラインが表示されました

今回はこの様なイラストを使って歩くモーションを作っていきます。

絵を描くのが面倒な人は下記の女の子の画像を使用してアニメ制作の練習をしてみて下さい。

---

キャンバスに画像を表示させる

背景:1 > 1 のフォルダに任意の背景画像を入れます。

この時1のフォルダにきちんと任意の画像が入っているか確認しましょう。

フォルダに画像が入っていない場合キャンバスに表示されない可能性があります。

タイムラインウインドウの背景フォルダを選択して下さい。

背景フォルダを選択した状態で下記画像に記されているボタンをクリックします。

ポップアップされたウインドウを注視し、「1」を選択してokを押します。

キャンバスに画像が表示されました

人物を表示させるために上記に書いた作業をもう一度繰り返します。

人物:1 > 1 フォルダに人物の一枚絵を入れて下さい。

下図のようなレイヤー構成になる様にして下さい。

先程背景を表示させる行程でもやりましたが、下図に記した部分を押せば人物が表示されます。

キャンバスに画像を表示する行程がうまく出来ない場合はこちらの講座を見てみて下さい。

手順がもう少しく書いてあります。

キーフレームを設定する

ここからキャラをキーフレームで動かす作業に入ります。

その前にキーフレームというものについて少し解説します。

キーフレームとは

例えば、キャラクターが手を振るシーンを作るとき、手の最初の位置と最後の位置をキーフレームとして設定します。

そうすると、ソフトウェアがその間の動きを自動的に作成してくれて、スムーズなアニメーションができます。

上記の様な事が出来る便利な機能がキーフレームです。

 

それでは本題に戻ります。

まずツールウインドウでオブジェクトツールを選択して下さい。

キーフレームの有効化

タイムラインのウインドウを注視します。

人物フォルダを選択します。

下図に示した部分をクリックします。

このボタンは、レイヤーのキーフレームを有効化　するボタンです。

これでレイヤーのキーフレームの有効化が出来ました。

 

 

キーフレームを有効化すると、画像で示されている様な十字が出て来ます。

十字が出ない場合、ツールウインドウでオブジェクトツールを選択してるかしっかり確認して下さい。

これで歩きモーションを簡単に作成する準備が整いました。

歩きモーションをキーフレームを用いて作る

下記の図に示した部分のあたりをクリックしましょう。

つまり、1フレーム目を選択する様にして下さい。

基本的にここまでの作業で一回もタイムライン内を触ってない場合はデフォルトでこの様な状態になってます。

しかし、少しでもタイムラインに触れてしまうとこの様な状態から崩れてしまうので注意してください。

 

下記2枚目の画像をよく見て自分の作業画面と差異がないかよく確かめて下さい。

初心者の場合、少しでも異なる位置にバーがあるだけでもアニメが正常に動かない可能性があります。

キャンバス画面に戻り十字部分を移動させましょう。

十字の部分はオブジェクトツールで移動可能です。

キャラクターの真ん中辺りに合わせる様にしましょう。

十字マークを起点として画像が動きますので十字マークを合わせる事は重要な工程です。

ポイント

この時点でしっかり十字をキャラクターに合わせる様にして下さい。後から十字をキャラクターに合わせるのは失敗の素となります。

注意！

キーフレームを有効化すると絵を描く事が不可能になります。

再度絵を描きたい場合はキーフレームの有効化を解除して下さい。

十字をオブジェクトツールで移動させるとタイムラインウインドウに下図の様なマークが現れます。

次に下記の部分をクリックして赤い棒を移動させましょう。

フレーム数で言うと31フレーム目です。

 

 

次に現在オブジェクトツールを選択している状態なのを確認します。

その状態でツールプロパティウインドウを見て下さい。

拡大率の項目があるかと思います。

拡大率を横 105 縦105に設定して下さい。

下記の図に書いてある様に赤い棒をタイムラインの最初(1フレーム目)に戻し、三角の再生ボタンを押して動きの確認をして下さい。

人物が時間経過とともに大きく表示されることが確認できるかと思います。

上下に動く動作の作成

次に、歩行の際の上下に揺れ動く動作の作成をします。

フォルダを新規作成し、中に　人物　フォルダを収納します。

背景フォルダは収納しないように注意してください。

この様なレイヤー構成になる様にして下さい。

レイヤーウインドウは新規作成したフォルダを選択した状態のままにしておいてください。

そのままタイムラインウインドウを注視して下さい。

下図の②にしるした部分をクリックして下さい。赤い棒を1フレーム目に戻します。

次に③にしるした部分を押して、キーフレームを有効化させて下さい。

上記の手順で、「人物フォルダ」と「フォルダ」に二重でキーフレームをかけることが出来ます。

便利なので覚えておくと後々便利です。

 

 

先程の手順で、再度キャンバスに十字キーが現れたと思います。

十字部分をキャラの中心部に移動させましょう。

タイムラインウインドウの「フォルダ」項目に注目すると、キーフレームが打たれた事が確認できるかと思います。

後はツールオプション上でキャラを上下にタイミングよく揺れさせれば、歩いているアニメーションの完成です。

タイムラインにキーフレームを追加していきます。

下図の様に、赤い棒を任意のフレームに合わせます。

下図の「click」と書かれた部分にあるボタンを押せばキーフレームが追加されます。

 

赤い棒を動かしながらキーフレームボタンを押して、キーフレームを下図の様に13個ポチポチと追加してください。

下図の様にキーフレームを追加出来たら成功です。

分かりやすいように今から操作するキーフレームを黄色で塗りました。

下図で示した黄色く塗ったキーフレームのプロパティをいじって、画像を上下に動かす動作を作っていきます。

黄色で示したキーフレームのどれか一つをクリックして下さい。ツールはオブジェクトプロパティを選択したままにしておいて下さい。

ツールプロパティウインドウを注視して下さい。

ツールプロパティウインドウの中にある　位置　y の値をこれから変えて行きます。

現在のyの値から17px加算して下さい。

つまり現在yの値が540の場合、557にして下さい。

これを下図の黄色で示してあるキーフレーム全部に設定して下さい。( 位置　y を557pxに変更)

青色のキーフレームは何も手をつけなくて大丈夫です。

これで歩く際の上下に揺れるモーションを作成する事が出来ました。

タイムラインの秒数調整

次にタイムラインの秒数を調整します。

タイムラインウインドウを注視して、　３点リーダーを押し、タイムライン　＞　設定変更　を開きます。

終了フレーム　を30に設定します。

再生ボタンを押して動画を再生してみましょう

下記の様に動いていれば歩きモーションの作成成功です。

注意！

キーフレームはタブレットで再生する場合非常に重たくてフリーズする場合があります。

その場合は、ファイル　> アニメーションのエクスポートを選択し、ムービーファイルを保存します。

書き出したムービーファイルを見て動画の確認をしてみて下さい。

この講座のポイントとしては、人物が手前に歩いてくる時の徐々に拡大するキーフレームと、歩く際の上下に揺れるキーフレームを別々に設定してある所です。

キーフレームを2重に重ねがけする事で後からの微調整を容易にできる様に工夫がしてあります。

---

応用編

差分の画像を一枚追加することにより更に歩きモーションがリアルに表現出来ます。

画像を追加するやり方はこちらの講座に書いてあります。