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

第2回モーションエディタでアニメーションワークを効率化しよう!

Flashのアニメーションは、⁠キーフレームアニメーション(フレームアニメーション⁠⁠」と「トゥイーンアニメーション」に分けられます。作品の多くは、この2つの手法を必要に応じて組み合わせながら作られています。

第1回でご紹介したCS4のモーショントゥイーンは、ステージ上のモーションパスを制御したり、タイムラインのトゥイーンスパンを編集して、詳細な設定が可能になっています。CS3までのモーショントゥイーンでは手作業もしくはキーフレームアニメーションの手法を組み合わせないと実現不可能だった複雑なモーションも容易に作成することができます。さらに、新しく搭載された「モーションエディタ」によって、動画の表現を増幅するだけではなく、アニメーションワークを飛躍的に効率化することが可能になりました。

今回は、このモーションエディタについて解説していきたいと思います。

モーションエディタって難しい?

モーションエディタは、デフォルトのワークスペースの下部に配置されており、タブで[タイムライン]と切り替えます。After Effectsや3次元のアニメーションソフトなどではお馴染みのグラフエディタですが、触れるのが初めての人にとっては、何をどうしてよいのかわからないと思います。以前参加したCS4の勉強会では、⁠モーションエディタについて)以下のような反応がありました。

  • 難しそう
  • 数学的
  • 操作が直感的ではない

たしかに、タイムラインの操作で大半のアニメーションワークをこなしていたデザイナーさんにとっては、難解なイメージがあるかもしれません。一見、タイムラインにちかいインターフェイスになっていますが、縦の並び(行)はレイヤーではありません。X、Y、Z(基本モーション、回転、伸縮⁠⁠、カラー効果、フィルタ、イージングなどのプロパティです。グラフの領域に表示されている線は「プロパティ曲線」と呼ばれ、プロパティキーフレームを追加したり、⁠X、Y、Z以外では)ベジェ曲線をコントロールするように編集していきます。

プロパティ曲線を編集すると、ステージ上のオブジェクトがどのように変化するのか見ていきましょう(以下の手順は、書籍のPart-4 Lesson-1 STEP03「基本モーションの[Y]プロパティを編集する」と同じ作業です⁠⁠。

  1. [基本モーション][Y]をクリックしてプロパティを展開する
  2. フレームインジケータを12フレームにあわせる
  3. プロパティ曲線を右クリック(Macは[Control]+クリック)して、⁠キーフレームを追加]を選ぶ
  4. 追加したキーフレームを上方向にドラッグする
ビデオ1 モーションエディタのプロパティ曲線を編集する

基本モーションの[Y]プロパティでプロパティキーフレーム(コントロールポイント)を追加し、上方向にドラッグすると、ステージ上のオブジェクトは下方向に移動することがわかります。

  • 基本モーションの[Y]プロパティでY座標(垂直方向)の値を変更できる
  • プロパティキーフレーム(コントロールポイント)を上方向にドラッグすると、ステージ上のオブジェクトは下方向に移動する
  • 下方向にドラッグすると、ステージ上のオブジェクトは上方向に移動する

では、基本モーションの[X]プロパティを編集すると、どうなるでしょう?

[Y]プロパティと同じように試してみましょう。以下のような結果になるはずです。

  • 基本モーションの[X]プロパティでX座標(水平方向)の値を変更できる
  • プロパティキーフレーム(コントロールポイント)を上方向にドラッグすると、ステージ上のオブジェクトは右に移動する
  • 下方向にドラッグすると、ステージ上のオブジェクトは左に移動する

まずは、モーションエディタのグラフ編集によってステージ上のオブジェクトをどう制御できるのか理解しておきましょう。

イージングを適用してみよう

モーションの加速・減速の効果を適用する「イージング」機能は、プロパティインスペクタで設定することができますが、モーションエディタを使えば、スプリングやバウンス、のこぎり波など、複雑なモーションを簡単に適用することが可能です。CS3までのモーショントゥイーンでは、大量のキーフレームが必要になる複雑な動きを数ステップの操作で実現します。

それでは、実際にやってみましょう。

まず最初に、オブジェクトが左から右へ移動するアニメーションを作成しておきます。

ビデオ2 オブジェクトが左から右へ移動するモーショントゥイーンの作成

このアニメーションに特殊なイージング効果「スプリング」を適用してみましょう。スプリングは、コイル状のバネを引っ張って、離したようなモーションです。この動きをステージ上のモーションパスで実現するのは(不可能ではありませんが)大変です。

モーションエディタを使えば、以下の手順で簡単に適用することができます。

  1. モーションエディタのフレームインジケータを1フレームにあわせる
  2. 一番下の[イージング]のプロパティを表示する
  3. 右端の[+]アイコンをクリックして、イージングリストから[スプリング]を選ぶ
  4. 基本モーションの[X]プロパティをクリックして展開する
  5. [イージングなし]をクリックして、メニューから[スプリング]を選ぶ
ビデオ3 イージングリストの[スプリング]を基本モーションの[X]プロパティに適用する

いかがでしょう? バネを引っ張って離したような動きになっていますよね。

この効果だけでは、たんなるサンプルでしかありませんが、アニメーションの中の特殊効果として組み込むことで、表現の幅がグッと広がっていきます。

ビデオ4 ⁠スプリング]効果の応用例

まとめ

モーションエディタは、高機能ツールですから段階的に使い方のレベルを上げていく必要があります。また、グラフ編集についても試行錯誤を繰り返しながら、勘を身につけていくことになるでしょう。できれば、いきなり仕事で実践!ではなく、遊び感覚でさわってみることをお奨めします。

さて、次回は「モーションプリセット」を取り上げます。基本的な使い方と自分だけの(モーション)ライブラリ構築について解説する予定です。

おすすめ記事

記事・ニュース一覧