Flashのアニメーションは、「キーフレームアニメーション（フレームアニメーション）」と「トゥイーンアニメーション」に分けられます。作品の多くは、この2つの手法を必要に応じて組み合わせながら作られています。
第1回でご紹介したCS4のモーショントゥイーンは、ステージ上のモーションパスを制御したり、タイムラインのトゥイーンスパンを編集して、詳細な設定が可能になっています。CS3までのモーショントゥイーンでは手作業もしくはキーフレームアニメーションの手法を組み合わせないと実現不可能だった複雑なモーションも容易に作成することができます。さらに、新しく搭載された「モーションエディタ」によって、動画の表現を増幅するだけではなく、アニメーションワークを飛躍的に効率化することが可能になりました。
今回は、このモーションエディタについて解説していきたいと思います。
モーションエディタって難しい？
モーションエディタは、デフォルトのワークスペースの下部に配置されており、タブで［タイムライン］と切り替えます。After Effectsや3次元のアニメーションソフトなどではお馴染みのグラフエディタですが、触れるのが初めての人にとっては、何をどうしてよいのかわからないと思います。以前参加したCS4の勉強会では、（モーションエディタについて）以下のような反応がありました。
たしかに、タイムラインの操作で大半のアニメーションワークをこなしていたデザイナーさんにとっては、難解なイメージがあるかもしれません。一見、タイムラインにちかいインターフェイスになっていますが、縦の並び（行）はレイヤーではありません。X、Y、Z（基本モーション、回転、伸縮）、カラー効果、フィルタ、イージングなどのプロパティです。グラフの領域に表示されている線は「プロパティ曲線」と呼ばれ、プロパティキーフレームを追加したり、（X、Y、Z以外では）ベジェ曲線をコントロールするように編集していきます。
プロパティ曲線を編集すると、ステージ上のオブジェクトがどのように変化するのか見ていきましょう（以下の手順は、書籍のPart-4 Lesson-1 STEP03「基本モーションの［Y］プロパティを編集する」と同じ作業です）。
- ［基本モーション］の［Y］をクリックしてプロパティを展開する
- フレームインジケータを12フレームにあわせる
- プロパティ曲線を右クリック（Macは［Control］＋クリック）して、［キーフレームを追加］を選ぶ
- 追加したキーフレームを上方向にドラッグする
ビデオ1 モーションエディタのプロパティ曲線を編集する
基本モーションの［Y］プロパティでプロパティキーフレーム（コントロールポイント）を追加し、上方向にドラッグすると、ステージ上のオブジェクトは下方向に移動することがわかります。
- 基本モーションの［Y］プロパティでY座標（垂直方向）の値を変更できる
- プロパティキーフレーム（コントロールポイント）を上方向にドラッグすると、ステージ上のオブジェクトは下方向に移動する
- 下方向にドラッグすると、ステージ上のオブジェクトは上方向に移動する
では、基本モーションの［X］プロパティを編集すると、どうなるでしょう？
［Y］プロパティと同じように試してみましょう。以下のような結果になるはずです。
- 基本モーションの［X］プロパティでX座標（水平方向）の値を変更できる
- プロパティキーフレーム（コントロールポイント）を上方向にドラッグすると、ステージ上のオブジェクトは右に移動する
- 下方向にドラッグすると、ステージ上のオブジェクトは左に移動する
まずは、モーションエディタのグラフ編集によってステージ上のオブジェクトをどう制御できるのか理解しておきましょう。
イージングを適用してみよう
モーションの加速・減速の効果を適用する「イージング」機能は、プロパティインスペクタで設定することができますが、モーションエディタを使えば、スプリングやバウンス、のこぎり波など、複雑なモーションを簡単に適用することが可能です。CS3までのモーショントゥイーンでは、大量のキーフレームが必要になる複雑な動きを数ステップの操作で実現します。
それでは、実際にやってみましょう。
まず最初に、オブジェクトが左から右へ移動するアニメーションを作成しておきます。
ビデオ2 オブジェクトが左から右へ移動するモーショントゥイーンの作成
このアニメーションに特殊なイージング効果「スプリング」を適用してみましょう。スプリングは、コイル状のバネを引っ張って、離したようなモーションです。この動きをステージ上のモーションパスで実現するのは（不可能ではありませんが）大変です。
モーションエディタを使えば、以下の手順で簡単に適用することができます。
- モーションエディタのフレームインジケータを1フレームにあわせる
- 一番下の［イージング］のプロパティを表示する
- 右端の［＋］アイコンをクリックして、イージングリストから［スプリング］を選ぶ
- 基本モーションの［X］プロパティをクリックして展開する
- ［イージングなし］をクリックして、メニューから［スプリング］を選ぶ
ビデオ3 イージングリストの［スプリング］を基本モーションの［X］プロパティに適用する
いかがでしょう？ バネを引っ張って離したような動きになっていますよね。
この効果だけでは、たんなるサンプルでしかありませんが、アニメーションの中の特殊効果として組み込むことで、表現の幅がグッと広がっていきます。
ビデオ4 ［スプリング］効果の応用例
まとめ
モーションエディタは、高機能ツールですから段階的に使い方のレベルを上げていく必要があります。また、グラフ編集についても試行錯誤を繰り返しながら、勘を身につけていくことになるでしょう。できれば、いきなり仕事で実践！ではなく、遊び感覚でさわってみることをお奨めします。
さて、次回は「モーションプリセット」を取り上げます。基本的な使い方と自分だけの（モーション）ライブラリ構築について解説する予定です。
