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]。
- レッスン「オブジェクトをくの字に動かす」
- シェイプを描いてシンボルに変換する
- インスタンスをステージの右上にドラッグする
- モーショントゥイーンを作成する
- 最終フレームにフレームインジケータをあわせて、ステージ上のインスタンスを左方向にドラッグする
- フレームインジケータを12フレーム目にあわせる
- インスタンスの上にマウスカーソルをあわせて下方向にドラッグする
アニメーションを再生すると、ステージ上のオブジェクトがくの字に移動します。新しいモーショントゥイーンでは、1つのインスタンス、1つのキーフレーム、そして2つのプロパティキーフレームで構成されます。では次に、このアニメーションの動きを曲線に変更して、再生時間を短くしてみます。
-
- ツールパネルのダイレクト選択ツールを選び、モーションパスの12フレームのポイントにマウスカーソルをあわせる
- Altキー(MacはOption)を押しながら右方向にドラッグする。ハンドル(方向線)を引き出す
- トゥイーンスパンの最後にマウスカーソルをあわせて、左方向にドラッグし、18フレームにあわせる
直線から曲線の動きに変わりました。さらに、アニメーションの再生時間が短くなりました。
これをクラシックトゥイーンで作成すると、3つのキーフレームが必要になりますが、直線の動きから曲線に変えるのは容易なことではありません。ガイドレイヤーを使って大幅な修正を実行する必要があるかもしれません。また、トゥイーンスパンを短くすると、中間のキーフレームを手作業で調整しなければなりません。新しいモーショントゥイーンは、自動的に補正されますので、再生時間や動きのタイミングを調整しやすい仕様になっています。
まとめ
キーフレームごとに異なった動きの絵を描いていくキーフレームアニメーションは、人間が作業の大半を実行する最もベーシックなアニメーションです(パラパラ漫画ですね)。新しいモーショントゥイーンは、オブジェクトベースです。動かしたい絵(オブジェクト)に対して、位置や伸縮、傾斜、回転、色、特殊効果などを指定しながら、自分の意図した表現に近づけていく作業だと捉えてください。インバースキネマティックや3Dなどの新機能は、オブジェクトベースのアニメーションで機能します。デジタルビデオや3Dグラフィックスの編集に近いのかもしれません。
手描きで味わいのあるアニメを作りたければ、キーフレームアニメーションが中心のオーサリングになるでしょう。モーショングラフィックやインターフェイスデザインであれば、オブジェクトベースの作業が効率的です。実現したい表現にあわせて、手法を選択すればよいと思います。新しいモーショントゥイーンは、 CS3までの機能では困難だった表現が可能になります。最初は取っ付きにくいと思いますが、習得後はFlashワークの新たな可能性を探求するのが楽しくなるでしょう。
さて、次回は新機能「モーションエディタ」を活用したアニメーション作業の効率化について解説していきたいと思います。