6月5日にAdobe Flash CS4 Professionalのビギナー向け解説本「速習Webデザイン Flash CS4」が発売されました。この連載は、書籍の発売記念企画としてお届けします。

書籍の内容と同じテーマを掲載しても面白くありませんので、CS4で大幅に変更されたモーショントゥイーンと関連機能に絞って、詳しく取り上げていきたいと思います。第1回は、Flash CS4の新機能について大まかに解説し、どのようなメリットがあるのか考えていきたいと思います[1]⁠。

新しいモーショントゥイーンの習得は避けて通れない

まず最初にFlash CS4の新機能について確認しておきましょう。以下に主な新機能を列挙しました。

• オブジェクトベースのアニメーション編集
• モーションエディタによる詳細なアニメーション設定
• ボーンツールによるインバースキネマティックの表現
• 3D回転および3D変換ツールによる立体的な表現
• 30種類のモーションを適用できるモーションプリセット
• パターン描画ツール、スプレーブラシツール
• Adobe AIRのオーサリング
• H.264のサポート（Adobe Media Encoder）
• メタデータ（XMP）のサポート

アニメーション関連の機能がかなり強化されていますね。最も注目されているのは、オブジェクトベースの新しいモーショントゥイーンです。CS3までのモーショントゥイーンは、「⁠クラシックトゥイーン」という名称に変更されました。廃止されたわけではありませんが、アニメーション関連の新機能には未対応です。もはやトゥイーンアニメーションを作成するときのオプションの一つでしかありません。もちろん、古いモーショントゥイーン（クラシックトゥイーン）を使い続けることも可能ですが、モーションエディタやモーションプリセット、3D、ボーンなどの強力かつ魅力的な新機能を活かすことができません。

また、他の人とデータをやり取りするときに予期せぬ問題が発生するかもしれません。一からFlash CS4を習得する新しいユーザーは、新モーショントゥイーンをデフォルトの機能として使うことになるでしょう。複数のデザイナーが集まって協業していく場合、新しいモーショントゥイーンとクラシックトゥイーンが混在してしまうと、修正のときに混乱する可能性がありますよね。これからは、オブジェクトベースのモーショントゥイーンがデフォルト、必要に応じてクラシックトゥイーンという使い分けが標準的なワークフローになっていくはずです。タイムラインベースで作業をしてきた人たちにとっては、大変悩ましい問題ですが、新しいモーショントゥイーンの習得を避けて通ることはできません。

モーショントゥイーンとクラシックトゥイーンの違い

CS3までの古いモーショントゥイーンは、キーフレームごとに新しいインスタンスを持たなければなりませんでした。たとえば、右から左へオブジェクトを移動させるには、最低2つのキーフレーム（始点と終点）が必要です。ジグザグに移動させたい場合は、さらに複数のキーフレームが必要になります。新しいモーショントゥイーンは、1つのインスタンスに対して1つのキーフレームと複数のプロパティキーフレームで指定していきます。ステージ上のあきらかな違いは、モーションパスです。ペンツールで描いた曲線をコントロールするようにアニメーションを編集していきますので、CS3以前のFlashにはなかったまったく新しい操作概念だと言ってよいでしょう。

ビデオで比較してみましょう（※音声はありません⁠）⁠。

新しいモーショントゥイーンのメリットとは？

動きを指定するたびにキーフレームを作成しなければならない古いモーショントゥイーンの方が、直観的で覚えやすいかもしれません。特にペンツールの描画や編集が苦手だった人は、学習する前から拒否反応が出てしまうかもしれませんね。がんばって、乗り越えていきましょう。

簡単なレッスンを用意しましたので、実際にやってみてください。手順は以下のとおりです[2]⁠。

レッスン「オブジェクトをくの字に動かす」

1. シェイプを描いてシンボルに変換する
2. インスタンスをステージの右上にドラッグする
3. モーショントゥイーンを作成する
4. 最終フレームにフレームインジケータをあわせて、ステージ上のインスタンスを左方向にドラッグする
5. フレームインジケータを12フレーム目にあわせる
6. インスタンスの上にマウスカーソルをあわせて下方向にドラッグする

アニメーションを再生すると、ステージ上のオブジェクトがくの字に移動します。新しいモーショントゥイーンでは、1つのインスタンス、1つのキーフレーム、そして2つのプロパティキーフレームで構成されます。では次に、このアニメーションの動きを曲線に変更して、再生時間を短くしてみます。

7. ツールパネルのダイレクト選択ツールを選び、モーションパスの12フレームのポイントにマウスカーソルをあわせる
8. Altキー（MacはOption）を押しながら右方向にドラッグする。ハンドル（方向線）を引き出す
9. トゥイーンスパンの最後にマウスカーソルをあわせて、左方向にドラッグし、18フレームにあわせる

直線から曲線の動きに変わりました。さらに、アニメーションの再生時間が短くなりました。

これをクラシックトゥイーンで作成すると、3つのキーフレームが必要になりますが、直線の動きから曲線に変えるのは容易なことではありません。ガイドレイヤーを使って大幅な修正を実行する必要があるかもしれません。また、トゥイーンスパンを短くすると、中間のキーフレームを手作業で調整しなければなりません。新しいモーショントゥイーンは、自動的に補正されますので、再生時間や動きのタイミングを調整しやすい仕様になっています。

まとめ

キーフレームごとに異なった動きの絵を描いていくキーフレームアニメーションは、人間が作業の大半を実行する最もベーシックなアニメーションです（パラパラ漫画ですね⁠）⁠。新しいモーショントゥイーンは、オブジェクトベースです。動かしたい絵（オブジェクト）に対して、位置や伸縮、傾斜、回転、色、特殊効果などを指定しながら、自分の意図した表現に近づけていく作業だと捉えてください。インバースキネマティックや3Dなどの新機能は、オブジェクトベースのアニメーションで機能します。デジタルビデオや3Dグラフィックスの編集に近いのかもしれません。

手描きで味わいのあるアニメを作りたければ、キーフレームアニメーションが中心のオーサリングになるでしょう。モーショングラフィックやインターフェイスデザインであれば、オブジェクトベースの作業が効率的です。実現したい表現にあわせて、手法を選択すればよいと思います。新しいモーショントゥイーンは、 CS3までの機能では困難だった表現が可能になります。最初は取っ付きにくいと思いますが、習得後はFlashワークの新たな可能性を探求するのが楽しくなるでしょう。

さて、次回は新機能「モーションエディタ」を活用したアニメーション作業の効率化について解説していきたいと思います。