アニメーションを作る方法

目次

 1 アニメーションを作る基本的な流れ

 2 タイムライン設定する(プレビューウィンドウ)

 3 タイムライン設定する(パーツ画像ウィンドウ)

 4 タイムライン設定する(タイムラインウィンドウ)

 5 簡易アニメーション補間を使用する


 1 アニメーションを作る基本的な流れ 

ぷりおアニメーカーは、パラパラ漫画の要領で、フレームをNo.0から順に高速でパラパラすることでアニメーションさせます。

各フレームのタイムライン設定を編集して、各パーツ画像を変形させて各フレームを作っていくことで、アニメーションを作成していきます。

基本的には、要所要所のフレームのみを自分で変形させ、間のフレームはアニメーション補間で自動的に変形させる方法をとっていきます。

上の例ですと、フレームNo.2のみ自分で変形して編集し、No.1とNo.3は簡易アニメーション補間で変形させています。

▲一番上に戻る


 2 タイムライン設定する(プレビューウィンドウ) 

プレビューウィンドウの操作ボタンを長押しすることで、タイムライン設定を編集し、パーツ画像を変形できます。

通常は全てのパーツ画像を操作しますが、タイムラインウィンドウのをクリックしてパーツ画像を選択することで、選択したパーツ画像のみを操作することもできます。

▲例えばこのようにパーツ画像番号1のleg_r.pngを選択すると…

▲選択したパーツのみを操作ボタンで変形できます。

 

 ・参考【プレビューウィンドウの詳細】

▲一番上に戻る


 3 タイムライン設定する(パーツ画像ウィンドウ) 

パーツ画像ウィンドウからも数値入力でタイムライン設定を編集できます。

編集したいパーツ画像の設定画面を開き、タイムライン設定の部分の数値を編集していきます。

数値を編集したら適用ボタンをクリックすると、編集が適用され、プレビューにも反映されます。

★数値の入力の仕方

 ・拡縮:拡大率の設定で、デフォルトは「1」です。2倍にする時は「2」、0.5倍にする時は「0.5」と入力します。Xは幅の拡大率、Yは高さの拡大率です。

 ・移動:基本設定の表示位置からの移動距離で、デフォルトは「0」です。Xは横の移動で、正の数字だと右に、負の数字だと左に移動します。Yは縦の移動で、正の数字だと下に、負の数字だと上に移動します。単位はpxです。

 ・回転:回転する角度で、デフォルトは「0」です。例えば、右に45度傾ける場合は「45」、左に45度傾ける場合は「-45」と入力します。

 ・不透明度:不透明度の設定で、デフォルトは「1」です。「0~1」の範囲で設定します。「0」で完全な透明、「1」で完全な不透明、「0.5」などで半透明になります。

 ・表示ページ:表示するページの設定で、デフォルトは「0」です。パーツ画像が「横に並んだスプライト画像」の場合に設定する項目です。そうでない場合は特に設定は不要です。【表示ページについて】

 

 ・参考【パーツ画像ウィンドウの詳細】

▲一番上に戻る


 4 タイムライン設定する(タイムラインウィンドウ) 

タイムラインウィンドウで、編集したい箇所を右クリックしてタイムライン設定の編集をクリックすると、数値入力によるタイムライン設定ができます。

▼ドラッグすると複数の箇所を選択して、まとめてタイムライン設定を編集することもできます。

▼編集したい部分だけ入力して、代入するをクリックすると

▼選択した範囲を一気に編集できます。

▲編集された部分はへと変化しています。

 

 ・参考【タイムラインウィンドウの詳細】

 ・参考【タイムライン設定の編集の詳細】

▲一番上に戻る


 5 簡易アニメーション補間を使用する 

タイムラインウィンドウの簡易アニメーション補間を使うと、フレームとフレームの間のアニメーションを自動で作成できます。

▼例えば下の状態は、フレームNo.4だけ編集済みの状態です。

▼つまり、フレームNo.0~3は静止状態で、No.4でいきなり変形する状態です。

▼そこで、フレームNo.1~3の全パーツ部分をドラッグして、右クリックし、簡易アニメーション補間をクリックすると…

▼このようにフレームNo.1~3の動きが、前後のフレームの動きを補完するように、自動で編集されます。

これでアニメーションが滑らかになりました!

ちなみに簡易アニメーション補間では、補間タイプが減速になっています。
つまり最初は動きが大きく、徐々に動きが減っていくように補間されます。

減速以外の補間タイプを使用したい場合は、簡易ではないアニメーション補間の方をクリックすると、補間タイプなどを設定してアニメーションを作成できます。

なお、減速以外には等速加速があります。

 ・参考【アニメーション補間の詳細】

▲一番上に戻る