寿司職人見習いのりすしくん。
頭にいくらの軍艦巻きを乗せてますが、今回はこのいくらをトゥイーン機能などを使って、アニメーションしてみたいと思います。
作業環境: MacBook Air M1
Adobe Animate 2024 Version24.0.1
Windowsの方は、ショートカットボタンCmd→Ctrl、Option→Altに脳内変換をお願いします。
トゥイーン機能とは?
キーフレーム間をAnimateが自動で補間してくれる機能です。

こちらの記事で紹介している実践チュートリアル「踊る炎」の導入ビデオが、トゥイーン機能を分かりやすく説明していますので、良ければご覧ください。
こちらのAdobe公式チュートリアル動画でもトゥイーン機能を解説しています。
モーショントゥイーンとクラシックトゥイーンの違い
Adobe Animateは「クラシックトゥイーン」、「モーショントゥイーン」、「シェイプトゥイーン」という3つのトゥイーン機能があります。
引用: モーショントゥイーンとクラシックトゥイーン
モーショントゥイーン クラシックトゥイーン 強力でありながら作成が容易で、トゥイーンアニメーションを最大限に制御できます。 クラシックトゥイーンは、作成方法が複雑で、以前のバージョンの Animate で作成されたすべてのトゥイーンを含みます。 トゥイーンをきめ細かく制御できます。 ユーザー固有の機能を提供します。 キーフレームを使用します。 プロパティフレームを使用します。 トゥイーン全体が 1 つのターゲットオブジェクトで構成されます。 同じまたは異なるシンボルを含む 2 つのキーフレーム間でトゥイーンします。 テキストをトゥイーン可能であり、テキストオブジェクトをムービークリップに変換しません。 テキストオブジェクトをグラフィックシンボルに変換します。 フレームスクリプトを使用しません。 フレームスクリプトを使用します。 タイムライン内でトゥイーンの延長やサイズ変更ができ、トゥイーンが単一オブジェクトとして扱われます。 タイムライン内の個別に選択可能なフレームのグループによって構成されます。 モーショントゥイーンスパン全体の長さにわたってイージングを適用します。モーショントゥイーンの特定のフレームをイージングするには、カスタムイージング曲線の作成が必要です。 トゥイーン内のキーフレーム間のフレームのグループにイージングを適用します。 トゥイーンごとに 1 つのカラー効果を適用します。 濃淡とアルファ透明度など、2 つの異なるカラー効果を適用します。 3D オブジェクトをアニメーション化できます。 3D オブジェクトをアニメーション化できません。 モーションプリセットとして保存できます。 モーションプリセットとして保存できません。シンボルを入れ替えたり、グラフィックシンボルのフレーム番号を設定して、プロパティキーフレームに表示できます。
このような記載がAnimateのページにあるのですが…

…私は読んでもよく分かりません

シェイプトゥイーンはこのような感じで(今回は
から )、形や色や大きさなどを補間してくれます。クラシック、モーション、シェイプトゥイーンで動かしてみよう
文章だけだと分かりづらいので、実際に動かしてみましょう。

メニューバーのファイル>読み込み>ステージに読み込み、もしくはイラストを直接ステージにドラッグ&ドロップし読み込みます。
「りすし(寿司職人を目指しているリス)」と「いくら」を読み込み、別々のレイヤーに配置します。
今回は分かりやすいように「いくら」のサイズを、自由変形ツール(ショートカットQ)で大きくしました。


「クラシックトゥイーン」と「モーショントゥイーン」はシンボル化する必要があるので、いくらを選択しF8キーを押しシンボル化します。

24フレーム目でF5キーを押し、フレームの時間を伸ばします。(※24FPSなので1秒)
24フレームでF6キーを押し、キーフレームを挿入します。
1フレームにあるいくらを選択ツール(ショートカットV)で右端に移動し、壁にくっつけます。
その際、いくらは自由変形ツール(ショートカットQ)にて形を変形しつぶします。

1フレームから24フレームのどこでも構わないので右クリックをし、「クラシックトゥイーンを作成」を選択します。

クラシックトゥイーンの完成です。

ちなみにクラシックトゥイーンを使わないと、こんな感じのアニメーションになります。

クラシックトゥイーンでオニオンスキン表示するとこのようになります。
クラシックモーションガイド

直線じゃなくて曲線で動かしたいなぁ
そういう時はクラシックモーションガイドを使いましょう。

選択ツールでクラシックトゥイーンレイヤーを右クリックし「クラシックモーションガイドを追加」を選択します。

クラシックトゥイーンレイヤーの一階層上に、ガイドレイヤーが新しく追加されました。

ガイドレイヤーに鉛筆ツールで上記のような青い線を描きます。(色は何でも良いです)
プロパティパネルのフレームタブの吸着に✔︎があるか確認し、青い線の先頭に、いくらの真ん中にある⚪︎の基準点を吸着させます。

パスに沿って色付けに✔︎を入れてみたところ、いくらの赤に線の青を混ぜたピンク色になってしまいましたので✔︎を外します。

クラシックトゥイーンの最後のフレームでいくらを選択し、青い線の終点に吸着させましょう。

クラシックモーションガイド完成動画はこちら。

ちなみに、このような複雑な線だと吸着してくれず、線の始点から即終点までの動きになってしまいました。
モーショントゥイーンでいくらを動かす

レイヤー上の[+]ボタンをクリックし、新規レイヤーを作成します。
レイヤー名をダブルクリックして名前を「モーショントゥイーン」に変更します。
ライブラリにあるいくらを、1フレーム目にドラッグ&ドロップしてステージに持ってきます。

24フレーム目をクリックし、F5キーを押してフレーム時間を24フレームまで伸ばします。
次に、1〜24フレームのどこでも良いので右クリックし「モーショントゥイーンを作成」を選択します。

青い再生ヘッドを24フレーム目に持っていき、選択ツールを使っていくらを右端に動かし、クラシックトゥイーンの時と同様、自由変形ツールでつぶします。

いくらを動かすと点と線が出てきます。
選択ツールでカーソルを点の近くに持っていくと、カーソルの下にカッコのようなものが出てきます。
カッコのようなものが出てきたら、線が動かせるので動かしてみましょう。ここでは少し上に持ち上げてみます。

モーショントゥイーンアニメーションの完成です!
シェイプトゥイーンを作成

レイヤー上の[+]ボタンをクリックし、新規レイヤーを作成します。
レイヤー名をダブルクリックして名前を「シェイプトゥイーン」に変更します。
シェイプトゥイーンはシンボル化不要です。
シンボル化されていると動かせないので、先ほどシンボル化したいくらは使えません。

ツールバーにある楕円ツールでいくらを描きます。
最初は🔳の「矩形(くけい)ツール」が表示されていると思うので、長押しをするか右クリックをし「楕円ツール」を選択します。
色は左下より変えられます。赤(塗り)、線(オレンジ)にします。
1フレーム目のステージ上でドラッグをし、いくらを描きます。Shiftを押しながらドラッグすると正円が描けます。

24フレーム目を選択し、F6キーを押しキーフレームの挿入をします。
選択ツールで右端にいくらを持っていき、自由変形ツールで変形させます。

レイヤー上で右クリックし、「シェイプトゥイーンを作成」を選択します。

シェイプトゥイーン完成です!
今回の動きだと、ほとんどクラシックトゥイーンと一緒ですね。
モーションプリセットで動きをつけよう
Adobe Animateにはデフォルトで30個のモーションが装備されています。(※Adobe Animate 2024 Version24.0.1)
このモーションプリセットを使っていくらに動きをつけてみます。

レイヤー上の[+]ボタンをクリックし、新規レイヤーを作成します。
レイヤー名をダブルクリックして名前を「モーションプリセット」に変更します。
ライブラリにあるシンボル化したいくらを、1フレーム目にドラッグ&ドロップして再利用しましょう。

メニューバーのウィンドウよりモーションプリセットを選択し、呼び出します。
いくらを選択ツールで選択。
デフォルトプリセットに色々なモーションが入っているので、お好きなモーションを適用しましょう。

今回はデフォルトプリセットの1番先頭にある「ウェーブ」を適用させてみました!

モーションプリセットは楽ですね〜
ちなみにトゥイーンの種類によってフレームの色が変わります。

- クラシックトゥイーン「紫」
- モーショントゥイーン「黄色」
- シェイプトゥイーン「オレンジ」
- モーションプリセット「黄色」
黄色というより黄土色っぽいですね。
動きにイージングをつけよう

オニオンスキンを全フレーム表示にすると動きが分かりやすいです。
動きが一定で単調なのでイージング機能を使いたいと思います。

クラシックトゥイーンのどこか1フレームをクリックします。
プロパティパネルのフレームタブより、エフェクト「Classic Ease」をクリックします。

「イーズインアウト」という最初と最後がゆっくりになるイージング機能をクラシックトゥイーンにつけます。
ダブルクリックで確定です。

オニオンスキン表示にして比較してみます。
上のイージングありのいくらは、真ん中のいくらの枚数が少ないので、真ん中でスピードが速くなっているのが分かります。

完成動画はこちら。

色んなトゥイーン機能で遊んでみてください🎵