連載  /  

Animate CCでLINEアニメスタンプ制作 (4) トゥイーンアニメで動きを作る

BY 公開

Adobe Animate CCはイラストからアニメーションまで制作できるツールです。前回の記事では「コマアニメ」の制作方法を紹介しましたがご覧いただけたでしょうか。ここからはアニメーションの制作に役立つ「トゥイーン」機能を解説します。

トゥイーンを作成しよう

トゥイーンは始点と終点を指定すると、その間を移動するアニメーションを自動的に作ってくれる機能です。今回は、キャラクターが左側から右側へ移動するアニメーションの実現に利用します。トゥイーンを適用する単位はシンボルです、そこで、まずキャラクターをシンボル化する作業から始めましょう(シンボルについては第3回の「シンボルに変換しよう」にも解説があります)。

トゥイーンを見据えたシンボルの整理

キャラクターが水平方向へ駆け抜けていく動きを作ってみましょう。いまは「シーン1」のタイムラインにキャラクターのイラストの部品が配置されています。これらをまとめてシンボルに変換して、全体の構造を整理していきます。

①レイヤー名をクリックしてタイムラインの全てのレイヤーを選択します。右クリックから[レイヤーのカット]を選択します。

animatecc_anim_tween_0

これでタイムラインは空の状態になります。カットしたタイムラインは新しいシンボルの中にペーストして使います。

②メニューバーから[挿入]→[新規シンボル]を選択してキャラクター用のシンボルを作成します。[新規シンボルの作成]ウインドウが表示されたら、名前の欄に「Ninja」(任意)と記入し、種類を「グラフィック」にして「OK」をクリックします。

animatecc_anim_tween_1

③「Ninja」シンボルのタイムラインが表示された状態になります。「レイヤー1」のラベルを選択したら右クリックでコンテキストメニューを表示して、[レイヤーのペースト]を選択します。

animatecc_anim_tween_2

以上の手順によって「シーン1」にあったタイムラインを「Ninja」シンボルに移すことができました。下の図のようなタイムラインが表示されていれば成功です。

animatecc_anim_tween_2_2

ライブラリとシンボルの活用

ここで「シーン1」に戻るとタイムラインが空になっています。これは操作の間違いではありません。先程作成した「Ninja」シンボルは[ライブラリ]パネル内に保存されています。[ライブラリ]パネル内の「Ninja」シンボルをドラッグ&ドロップしステージに配置しましょう。

animatecc_anim_tween_2_3

シンボルを配置する場合は、整列パネルを使うと便利です(下図の①をクリックするか、メニューバーから[ウィンドウ]→[整列]を選択すると表示されます)。Ninjaシンボルが選択された状態で、[ステージを基準]をチェックしたら水平方向と垂直方向の中央揃えをクリックすれば、シンボルがステージ中央に配置されます。

animatecc_anim_tween_seiretsu

トゥイーンの作成

さていよいよトゥイーンの作成です。「シーン1」の20フレーム目で右クリックをして、[キーフレームの挿入]を選択します。

animatecc_anim_tween_4

すると20フレーム目にキーフレームが出現し、1フレーム目との間は灰色のフレームが出現します。

animatecc_anim_tween_5

1フレーム目と20フレーム目で異なる座標にシンボルを配置しましょう。1フレーム目ではステージの左端に、20フレーム目ではステージの右端に、それぞれキャラクターの位置を変更します。

animatecc_anim_tween_6

1フレーム目と20フレーム目の間で右クリックし、[クラシックトゥイーンの作成]を選択します。「トゥイーン」というのは英語の「Between」から派生した用語です。2つのキーフレームの間を補間することが語源となりました。

animatecc_anim_tween_8

すると灰色だったフレームが青くなり、1フレーム目と20フレーム目の間には矢印が出現します。これはトゥイーンが適用された状態を示します。試しにタイムラインを動かすと、キャラクターが連続して移動することがわかります。

animatecc_anim_tween-1

トゥイーンでは、キーフレーム間の位置の他にも、スケール・角度・透明度など異なるパラメーターを連続して変化させる機能があります。また、移動するパスを指定することも可能です。

加減速の設定

このトゥイーン機能には加減速(Animate CCでは「イージング」といいます)を設定することもできます。動きの緩急を設定することで、より現実的な表現に近づきます。次の手順でイージングを設定しましょう。

①1フレーム目を選択します。

animatecc_anim_tween_10

②[プロパティ]パネルのイージングを設定します。数値を-100(加速)〜+100(減速)の間で設定できます。標準は0で加速も減速もしない、等間隔な動きになります。

animatecc_anim_tween_11

イージングが0のアニメと、-100のアニメを比較してみましょう。後者のアニメは出だしがゆっくりで、徐々にスピードを挙げていく動きとなります。イージングの設定でアニメーションの雰囲気が変わりますので、気に入った動きになるように調整してみてください(ここまでのサンプルファイルは「ninja-tween.fla」)。

animatecc_tween_ease_none
イージング「0」のトゥイーン
animatecc_tween_ease_in
イージング「-100」のトゥイーン

回転のモーションの作成

次にキャラクターの腕を動かすモーションを作ってみましょう。レイヤー「HandRight」と「HandLeft」をそれぞれシンボルに変換します。キャラクターの腕は付け根を基点として、円弧を描くように動かしたいと思います。完成イメージは次のようなものです(サンプルファイルは「ninja-arm.fla」)。

animatecc_anim_transform_0

腕の付け根を基点として動かすためには、「変形点」を利用します。Animate CCの変形点は、トゥイーンにより回転や拡大・縮小させるときに中心となる点を指します。下の図のステージ上の白い丸の点が「変形点」です。

animatecc_anim_transform_1

変形点は標準ではシンボルの中央に設定されますが、[自由変形ツール]を使うと、変形点の場所を変えられます。このサンプルでは、変形点を腕の付け根に設定しました。

animatecc_anim_transform_2

右腕を回転させるため、レイヤー「HandRight」の1フレーム目と10フレーム目と20フレーム目にキーフレームを作成し、クラシックトゥイーンを設定します。そして、10フレーム目だけ、異なる腕の角度となるように編集します。今回は10フレーム目で右腕を前に振り出した状態にしてみましょう。1フレーム目と20フレーム目は同じ状態にしておくと、ループ再生時にスムーズにつながります。

animatecc_anim_transform_3

10フレーム目を選択した状態で、[自由変形ツール]を使って、角度を調整しましょう。または[変形]パネルを使って、角度を調整してもいいでしょう。調整したら、タイムラインを再生すると腕の回転を確認できます。下の図は[変形]パネルで角度を指定しているところです。

animatecc_anim_transform_4

おまけ:曲線に沿って移動するモーションの作成

Animate CCでは曲線(パス)に沿って移動するモーションを作成できます。直線的ではない柔らかい動きや遠近の表現などに利用できます。完成イメージは次のようなものです(サンプルファイルは「ninja-guide.fla」)。

animatecc_anim_guide_0

この動きを作るには、クラシックトゥイーンを含むレイヤーのレイヤー名の箇所を右クリックし、[クラシックモーションガイドを追加]を選択します。

animatecc_anim_guide_1

クラシックトゥイーンレイヤーの上にモーションガイドレイヤーが追加されます。クラシックトゥイーンレイヤーの名前がインデントされますが、この状態がモーションガイドレイヤーが適用されていることを示します。

animatecc_anim_guide_2

モーションガイドレイヤー(上図では「ガイド :ninja」のレイヤー)を選択し、ペンツールなどでパスを描画します。このパスは曲線の編集のために用いるものなので、線のカラーや太さは自由に設定しても大丈夫です。

animatecc_anim_guide_3

トゥイーンするオブジェクトをドラッグして最初のフレームの線の先頭および最後のフレームの線の最後に吸着させます。吸着させるときには、変形点がパス上に合わさるようにドラッグします。このサンプルでは遠近を演出するために、拡大するトゥイーンも設定しています。

animatecc_anim_guide_4

この状態でアニメーションを再生すると、グループやシンボルがモーションパスに沿って移動します。

animatecc_anim_guide_6

作成が終わったら、ガイドレイヤーの目の部分をクリックして見えない状態にしておきましょう(PNG出力時にガイドレイヤーも表示されてしまうため)。

animatecc_anim_guide_5

まとめ

トゥイーンとイージングを使えば、なめらかなモーションの制作に役立ちます。2つのキーフレームをつなげるだけなので、再編集が容易なのもメリットです。コマアニメとトゥイーンアニメを使い分けることで更に表現の幅を広げることができることでしょう。ここまでのサンプルファイルは次のボタンからダウンロードできます。次回はAnimate CCからAPNGファイルを作成する手順を解説します。

  AUTHOR

池田 泰延

株式会社 ICS / 代表取締役 / FlashやHTML5のテクニカルディレクターとして数々のプロモーションサイトやSNSゲームの制作に関わる。筑波大学の非常勤講師も勤めている。著書に「HTML5 インタラクティブ表現ガイド」(技術評論社)、「Stage3Dプログラミング」(ワークスコーポレーション刊)など多数。