ビギナーのためのFlash CS4 Professional オブジェクトベースアニメーション

第1回新しくなったモーショントゥイーンの可能性を探る!

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にはなかったまったく新しい操作概念だと言ってよいでしょう。

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

ビデオ1 CS3までのモーショントゥイーン(クラシックトゥイーン)を利用した、右から左へオブジェクトを移動させるアニメーションの作成手順
ビデオ2 CS4の新しいモーショントゥイーンを利用した、右から左へオブジェクトを移動させるアニメーションの作成手順

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

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

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

レッスン「オブジェクトをくの字に動かす」
  1. シェイプを描いてシンボルに変換する
  2. インスタンスをステージの右上にドラッグする
  3. モーショントゥイーンを作成する
  4. 最終フレームにフレームインジケータをあわせて、ステージ上のインスタンスを左方向にドラッグする
  5. フレームインジケータを12フレーム目にあわせる
  6. インスタンスの上にマウスカーソルをあわせて下方向にドラッグする
ビデオ3 レッスン「オブジェクトをくの字に動かす」の手順(1~6工程)

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

  1. ツールパネルのダイレクト選択ツールを選び、モーションパスの12フレームのポイントにマウスカーソルをあわせる
  2. Altキー(MacはOption)を押しながら右方向にドラッグする。ハンドル(方向線)を引き出す
  3. トゥイーンスパンの最後にマウスカーソルをあわせて、左方向にドラッグし、18フレームにあわせる
ビデオ4 追加作業の手順(7~9工程)

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

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

まとめ

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

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

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

おすすめ記事

記事・ニュース一覧