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

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

この記事を読むのに必要な時間:およそ 1.5 分

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座標(水平方向)の値を変更できる
  • プロパティキーフレーム(コントロールポイント)を上方向にドラッグすると,ステージ上のオブジェクトは右に移動する
  • 下方向にドラッグすると,ステージ上のオブジェクトは左に移動する

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

著者プロフィール

境祐司(さかいゆうじ)

インストラクショナル・デザイナー[Instructional Designer]として学校,企業の講座プラン,教育マネジメント,講演,書籍執筆などの活動をおこなう。2000年より情報デザイン関連のオンライン学習実証実験を始める。現在,教育デザイナー育成を目的としたフォーラムを立ち上げるため準備中。著書に「速習Webデザイン Flash CS4」(技術評論社),「Webデザイン&スタイルシート逆引き実践ガイドブック」(ソシム)などがある。

URLhttp://admn.air-nifty.com/monkeyish_studio/

著書

コメント

コメントの記入