Let's play Animate 09 シェイプトゥイーンで動作を調整

シェイプトゥイーンは図形を展開と考えると分かりやすいです。複数の図形でも可能です。

Adobe Animate

フレーム1に円を作成してからフレーム100に移動してF6でキーフレームを設定後・・・

キーフレームのないフレームを右クリックし、シェイプトゥイーンを選びます。ここでは100フレーム目の円の色を変更しました。

この段階の処理結果です。

中間地点となる50フレーム目にF6でキーフレームを入れで円を変形します。

この段階の処理結果です。

更に25フレーム目の変形している円を削除し、位置と色を変更した別のシェイプを配置。

続けて、75フレーム目の変形している円を削除し、位置と色を変更した別のシェイプを配置。

この段階の処理結果です。こんな感じで自由度高くアニメーションか出来ます。

Let's play Animate 08 モーショントゥイーンで動作を調整

クラシックモーションガイドとは考え方が異なる、モーショントゥイーンで動作を調整します。もちろんライブラリーでも利用可能です。

Adobe Animate

前回（07）のライブラリーデータを利用しますが、ライブラリーの設定は特に指定はありません。

ステージに移動し、フレーム1へライブラリのデータをドラッグ配置します。続けて終了地点としてフレーム100を選択して［挿入］＞［タイムライン］＞［フレーム］を実行します。F5でも出来ます。

ここで、最初と最後のフレーム以外を右クリックして表示されるメニューから［モーショントゥイーン］を選びます。

これでタイムラインの帯の色がオレンジ色になります。あとは・・・

そのままランニングマンを希望する終了地点へ移動させます。これで最低限の動作が設定できます。

ここから、動作を調整したいフレームに移動し・・・

自由変形ツールにて位置調整またはサイズ調整や回転などを設定します。

フレームの数だけ調整可能です。

幾つでも自由に設定できます。

修正したいときは設定shしたキーフレームの位置で右クリックし、キーフレームの削除を削除または修正が可能です。

モーショントゥイーンもペンツールでキーフレームのポイントを［アンカーポイントの切り替えツール］で調整することでカーブに変更することも出来ます。

上は処理結果です。

Let's play Animate 07 ライブラリーでクラシックトゥイーンを設定する手順（2）

ライブラリーでクラシックトゥイーンを設定する手順（その2）を整理しました。

Adobe Animate

前回と異なり、今までの手順と同じで、Illustratorのレイヤ−毎にファイルを分けます。ライブラリーに読み込んだときの違いは上の様になります。

ライブラリーのレイヤーごとに右クリックして［シンボルに変換］をクリックします。ショートカットはF8です。クリックして名称設定を行うと新たにシンボルとして個別設定されます。

動きのない導体以外を全てシンボルに変更します。

あとはフレーム4箇所にキーフレームを追加し、それぞれのフレームで動作を設定します。

2箇所目のキーフレームの設定

3箇所目のキーフレームの設定

4箇所目のキーフレームの設定

5箇所目のキーフレームの設定

最初と2箇所目のキーフレーム缶が1フレーム少ないのは、ループの関係です。これもも正確にはオカシイのですが、誤差の範囲になるので実質問題ないです。

次にそれぞれのキーフレームの間を右クリックっして［クラシックトゥイーンを設定］をクリックします。

導体は鵜上の様にし、クラシックトゥイーンは設定しません。

最後に最初にライブラリーに読み込んだデーターをステージにドラッグ配置して任意のキーフレーム間でクラシックトゥイーンを設定すれば完成です。

上は処理結果です。

Let's play Animate 06 ライブラリーでクラシックトゥイーンを設定する手順（1）

ライブラリーでクラシックトゥイーンを設定する（その2）手順を整理しました。

Adobe Animate

今までの手順と異なり、Illustratorでパーツ毎にファイルを分けます。ライブラリーに読み込んだときの違いは上の様になります。なお、色違いで全てのパーツをグループ化した他のデータも作成します。

ライブラリーに全てのパーツを読み込んだ状態。

最初に、グループ化した色違いのパーツをクリックして編集状態にしてから・・・

レイヤーを設定して各パーツをドラッグ配置します。

ドラッグが完了したら、グループ化した色違いのパーツに合わせて書くパーツを配置します。

続けて書くパーツの中心点を調整してからキーフレームを設定すれば・・・

キーフレーム間にF6でクラシックトゥイーンを設定できます。胴体部分は動きがないのでクラシックトゥイーンの設定は必要ありません。

最後にグループ化した色違いのパーツのレイヤーを削除します。これでグループ化した色違いのパーツのレイヤーは、それ以外のパーツで構成された状態になります。

クラシックトゥイーンを設定できない、Illustratorで1ファイルのデータを使った状態。それぞれのアニメーション結果の違いは・・・

Illustratorで1ファイルのデータを使った状態

Illustratorでパーツ毎にデータを使った状態

違いを確認しやすいように、100フレーム間のアニメーションに設定したので滑らかの動きを確認できました。

なお、今までのようにIllustratorで1ファイルのデータを使った状態から処理する方法もあります。ソレは次回整理します。

Let's play Animate 05 ライブラリーの動作調整はケースバイケース

ライブラリーの動作調整はケースバイケースですね。

Adobe Animate

今までと同じ流れでライブラリーに読み込んだIllustratorデーターの各パーツにキーフレームを設定します。ただし、今回はキーフレームの間隔を1-7-13-19としています。

それぞれのポーズは上図のようになっています。

ライブラリーからステージにドラッグ配置し1フレームから100フレームまでのクラシックトゥイーンによるアニメーションに設定します。

この段階で［ファイル］＞［書き出し］＞［アニメーションGIFを書き出し］で書き出した結果です。ライブラリーでのキーフレームの間隔が長いので、動作がカクカクになってしまいます。

ここで、ライブラリーにもどり、キーフレームの設定を［クラシックトゥイーン］にしたいところですが、そのためには全てのパーツを個別にライブラリーに登録する必要が出るので、少々面倒です。

次に［シェイプトゥイーン］なら出来そうですが、回転を伴う変化なので形状が壊れてしまうために現実的ではありません。

そこで［フレーム単位のアニメーションに変換］にて何フレーム毎なのかを設定します。ここでは3フレーム毎に設定しました。設定後に新規設定されたキーフレームの動きを前後のキーフレームの中間位置に調整します。

この段階で［ファイル］＞［書き出し］＞［アニメーションGIFを書き出し］で書き出した結果です。改善結果を確認できます。