• ホーム
• 購読申込
• ヘルプ
• アーカイブ

アニメーターのためのFlash CS4（1）
モーショントゥイーン

Flash CS4では、アニメーターに向けた新機能が数多く追加されています。今号から2回に渡って、タイムライン派アニメーターとして長年Flashを使いこなしているA.e.Suckさんが、新機能のノウハウを解説してくれます。第一回目は、刷新された「モーショントゥイーン」です。

私はFlashでアニメーションを作り続けて10年以上になりますが、フレームアニメやトゥイーンアニメでタイムライン上にアニメーションを制作していくという昔ながらのスタイルを続けています。そう、10年前とほとんど変わっていないんです。そんなタイムライン派アニメーターがFlash CS4をどう使うのか？　さっそく始めてみたいと思います。

別モノ？　モーショントゥイーン！

さて、CS4のいくつかの新機能のうち、最も興味をひかれたのが、新しくなったモーショントゥイーンです。Flash史上、最大の事件と言っていいでしょう。ここで、モーショントゥイーンの変遷をおさらいしておきます。
FutureSplash Animatorでは「Interpolation」と呼ばれていました。回転、伸縮、モーションガイド、簡易イージングの機能がすでに備わっていました。

日本語化されたFlash 2では、名称が「モーショントゥイーン」に変わっただけで、操作も機能もまったく同じでした。

Flash 3ではトゥイーンはフレームプロパティとして扱われるようになり、シェイプトゥイーンが加わりました。回転には方向や回数がオプションで指定できるようになりました。

Flash 4ではシンボルの同期とガイドへの吸着が加わりました。

Flash 5ではインターフェイスが一新され、コンパクトなタブ型パネルから設定できるようになりました。またメニューに「モーショントゥイーンを作成」が追加され、簡単にトゥイーンを作る方法も提供されました。

Flash MXではパネルからプロパティインスペクタに移行し、MX2004にそのまま受け継がれました。Flash 8 Professionalではカスタムイージングが追加され、メリハリの効いたモーションを設定できるようになり、CS3に引き継がれました。

このように、インターフェイスこそ変わってはいますが、8で可能になったイージング編集を除けば、機能的な進化はなかったのです。というのも、2Dアニメ作成機能としては、これ以上望むものはないほど洗練されていたからです。しかし、開発者はさらなる進化を求め、トゥイーンの仕組み自体を見直すことにしたのでしょう。それがCS4の新しいモーショントゥイーンです。

従来のトゥイーンと大きく異なるのは、キーフレームという概念がなく、プロパティはインスタンスではなくトゥイーン内のフレームが持つことでしょう。また、ステージではモーションのパスが表示され、点で示されたフレームの間隔でイージングの様子も確認でき、視覚的にわかりやすくなっています。
操作はこれまでの「モーショントゥイーンを作成」とほぼ同じですが、トゥイーンそのものが1つのオブジェクトとして扱われるようになったので、従来トゥイーンの機能アップではなく、まったくの新機能なのです。そのため、下位互換はありません。新しいモーショントゥイーンを含むFLAをCS3形式で保存しようとすると、「モーションオブジェクトが失われます」というアラートが表示されます。

このまま保存すると、トゥイーンのオブジェクトはキーフレームに変換されてしまうので、CS3との互換を保つ必要があるなら気を付けてください。

モーショントゥイーンを作成してみる

では実際に作成してみましょう。前述したように「モーショントゥイーンを作成」と同じですが、ステージ上のシェイプやグループのコンテキストメニューからも選ぶことができるようになりました。

ただし、シェイプやグループのままモーショントゥイーンを作成すると、シンボルの基準点が左上になってしまう上、シンボル名も勝手に付けられてしまいます。また、テキストブロックもコンテキストメニューから「モーショントゥイーンを作成」が選べるようになりましたが、シンボル化はされません。モーショントゥイーンを作成する前に、予めシンボルに変換しておくことをお勧めします。

さて、ステージには黄色い鳥のインスタンスに登場してもらいました。

この鳥に見覚えがある方は、Flash歴が長いですね。そうです、FutureSplash AnimatorのサンプルライブラリからアニメーションシンボルのBirdさんに来ていただきました。まさかバージョン10で飛ぶことになるとは、本人も思ってもみなかったでしょう。インスタンスのビヘイビアはグラフィックでもムービークリップでも構いませんが、ここではシンボル内のアニメーションが表示されるグラフィックインスタンスにしてみます。鳥をステージの端に配置し、インスタンスのコンテキストメニューから「モーショントゥイーンを作成」を選びます。

レイヤーはモーションレイヤーとなり、モーショントゥイーンが設定されました。タイムラインは1秒の長さに延長されます。レイヤー1のアウトラインカラーは本来黄緑ですが、見えにくいため赤に変更してあります。

最終フレームで、インスタンスを右に移動させます。モーションパスと相当するフレームがレイヤーのアウトラインカラーで表示されます。

モーションパスは選択ツールでドラッグしてカーブにすることはできますが、S字にすることはできません。ダイレクト選択ツールなら、ベジェハンドルを使った編集が可能です。

手描きのパスを適用することもできます。別レイヤーに鉛筆ツールで描いた線をコピーします。

カレントレイヤーをモーションレイヤーにしてペーストすると、モーションのパスが置き換えられます。便利でしょう？　従来のトゥイーンではモーションガイドを変更したらインスタンスを吸着し直す必要がありましたが、吸着はすべて自動です。モーションパスも別レイヤーの線や別のトゥイーンにコピペができます。

最後にトゥイーンスパンを調整しましょう。トゥイーンの左端を右にドラッグして空舞台を作ります。トゥイーンの後には空白キーフレームを挿入し、空舞台とします。これで画面を横切るBirdさんになります。

モーションエディタを使ってみる

モーショントゥイーンのイージングはこれまでと同様、プロパティパネルで設定できます。加速する時は[-100]、減速する時は[100]にします。[-100]の場合はフレームが進むごとに移動の間隔が広くなっていきます。

この簡易イージングではモーションのメリハリが弱いと感じたならば、モーションエディタを使用します。プロパティパネルでイージング設定をしていなければ、各プロパティには「イージングなし」が、そうでない場合は「シンプル（低速）」が選ばれています。

一番下の「イージング」欄で、+をクリックするとプリセットされたイージングを簡単に追加できます。メリハリを強調したモーションにしたければ、（高速）か（最速）がついたものを選びましょう。例えば、この鳥の動きにふさわしいイージングは「停止と開始（最速）」でしょうか。

このイージングを基本モーションに割り当てます。あとは、モーションパスに示されたフレームの間隔を見ながら、イージング値を調節します。「停止と開始」はインが加速してから減速、アウトが減速してから加速です。

クラシックトゥイーンは健在なり

このように一新されたモーショントゥイーンですが、従来のモーショントゥイーンは廃止されたわけではありません。クラシックトゥイーンとして、Flashの伝統が守られているのです。拍手～。

残念ながらフレームプロパティパネルからこの機能にアクセスすることはできません。フレームのコンテキストメニューから「クラシックトゥイーンを作成」を選択しましょう。

いったんクラシックトゥイーンを設定したら、フレームプロパティパネルでイージングなどのオプションが設定できます。また、鉛筆アイコンをクリックするとカスタムイージングが可能になります。

モーショントゥイーンかクラシックトゥイーンか

モーショントゥイーンは新機能、従来のモーショントゥイーンはクラシックトゥイーンと、ややこしいのですが、両方あるとどちらのトゥイーンにすべきか悩んでしまうかもしれません。用途や目的、制作手法に応じて、ということになるんでしょうが、両者が別物であるということを思い出してください。新しいモーショントゥイーンでは、動きの始めと終わりを決めてからその間を補完していくという、一般的なアニメ制作法はあてはまりません。ですから、計画的に作り込んでいくというよりは、ざっくり作って後で調整していくというスタイルになるのではないでしょうか。また、1トゥイーンにつき1インスタンスのため、複数のキーフレームを持てないので、トゥイーン内でシンボルを入れ替えたり、グラフィックインスタンスの再生モードを変更したりすることはできません。モーションエディタはトゥイーンの詳細な制御ができるものの、使いやすいと言える域には至っていないように感じます。アニメーター的には、クラシックトゥイーンの方がわかりやすく、自由度が高いと感じています。そこで、今からFlashアニメーションを始めたい人、手っ取り早く動かしたい人、ムービークリップ派の人はモーショントゥイーンを、昔ながらのアニメ手法やグラフィックインスタンスにこだわりがあったり、CS3以下のユーザとやりとりする必要があったりする人はクラシックトゥイーンを選ぶとよいでしょう。

‹ 戻る