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

第3回 モーションプリセットで自分だけのライブラリを作ろう!

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

Flash CS4に搭載された「モーションプリセット」は,モーション(motion)プリセット(preset)ですから,前もってセットされている動きをステージ上のオブジェクトに適用できる機能,もしくは自分で設定した動きを記録・再利用できる機能のことです。

今回は,このモーションプリセットの活用方法について解説していきます。

モーションプリセットは,タイムラインエフェクトとは違う

Adobe社のサイトでFlash CS4の製品ページを見ると,「基本的なモーショントゥイーンをワンクリックで作成」「新しいアニメーションツール群で編集作業がさらに効率化」といった見出しが目につきます。

一押しの新機能として紹介されており,アニメーション作業の「効率化」が強調されています。最適化されたアニメーションツール群を見ると,以下の4つの新機能が列挙されています。

  • オブジェクトベースのアニメーション
  • モーションパス
  • モーションエディタ
  • モーションプリセット

「モーションプリセットって,タイムラインエフェクトみたいな機能でしょ」などと思っていませんか?

たしかに,タイムラインエフェクトもアニメーション作業を効率化するために搭載された機能でしたね(※タイムラインエフェクトはMX2004から搭載された機能。CS4では廃止されました。タイムラインの制御が重たくて,作業の効率化には貢献できなかった機能かもしれません)。

一見すると,モーションプリセットも同じような印象を持たれてしまいそうですが,大きく異なるのは(トゥイーンが,キーフレームではなくオブジェクト自体に適用される)オブジェクトベースのアニメーションに最適化されたツールになっていることです。これで,アニメーションワークの効率化につながるモーションの再利用が可能になったわけです。

以下のビデオは,MX2004を使っていた頃,タイムラインエフェクトを駆使して作るはずだったアニメーションです。いろいろ試行錯誤しましたが,あまりにもパフォーマンスが悪くて挫折してしまいました(結果的に,通常のモーショントゥイーンで作成しました)。

ビデオ1 Flashで作成したアニメーション(CS4でHDビデオに変換してYouTubeにアップしています)

このビデオのような長いアニメーションをデザインするとき,モーションプリセットが活用できないか考えてみました。複数のモーションの組み合わせで作られているため,基本となるモーションを登録しておけば再利用によって大幅に効率化されます。これは実際に試さなくても想像できる利点でした。

実は,もっと大きなメリットがあったのです。それは,「調整」の容易さです。複雑な設定をしたアニメーション・シーンを調整するときに,絶大な効果を発揮します。たとえば,トゥイーンスパンを短くして,動きの速さを部分的に調整したい場合,CS3までのモーショントゥイーンだと(中間のキーフレームも調整しなければならないため)大きな作業が発生してしまいますが,CS4だとドラッグするだけで終了します(プロパティキーフレーム間も自動調整してくれます)。

一発適用して完成!というわけにはいきません。こまかい調整を何度も繰り返して,作品のクオリティが上がっていきますから,エディティングのユーザビリティが高いというのは大きな利点だと言ってよいでしょう。

モーションプリセットの使い方

モーションプリセットの使い方はとても簡単です。すでに30種類のモーションが登録されていますので,実際に適用してみましょう。

それでは,「ウェーブ」をステージ上のオブジェクトに適用してみます(書籍のPart-2 Lesson-5 STEP02「モーションプリセット「ウェーブ」を適用する」と同じです)。

  1. ステージ上のオブジェクトをクリックして選択しておく
  2. モーションプリセットの「ウェーブ」を選択し[適用]ボタンをクリックする
  3. 適用されたオブジェクトの位置を調整する
  4. 適用されたオブジェクトの大きさを調整する
  5. 全体を見ながら,もう一度オブジェクトの位置を調整する

ビデオ2 モーションプリセット「ウェーブ」を適用する

※画面のテロップが読みにくい場合は、ビデオの画面内をクリックしてください(大きなサイズのビデオで確認できます)。

重要なポイントは,「適用後」の編集です。モーションプリセットを適用した後に,位置の変更や伸縮を実行してアニメーション全体を調整するとき,操作手順が多かったり,Flashの動作が重たくなるようでは作業に支障が出てしまいます。CS4のモーショントゥイーンではモーションパスが表示され,オブジェクトとは別に伸縮や回転などを実行することができるようになっています。この仕様によって,柔軟性や表現のバリエーションを容易につくり出すことが可能になっています。

著者プロフィール

境祐司(さかいゆうじ)

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

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

著書

コメント

コメントの記入