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. 追加したキーフレームを上方向にドラッグする

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

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

では，基本モーションの［X］プロパティを編集すると，どうなるでしょう？

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

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

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