アクセシビリティ
アドビ
サインイン プライバシー My Adobe

モーションエディタの利用

Learn Flash CS4 Sorry, this page is not available

Broken link?

Send us an e-mail.

このURLは存在しません。

日本語のホームページ にお戻りください。

他のサイトのリンクでこのページにたどりついた場合はそのサイトの
ウェブマスターにリンクが壊れている旨をお伝えください。

Error returned: 404

You may wish to try one of the following links:

作成日:
19 Dec 2008
ユーザレベル:
中級, 上級
製品:
Flash CS4 以上

モーションエディタを利用してトゥイーンを詳細にコントロールする方法について学ぶことができます。イージングのカーブをコントロールすることで、トゥイーンを詳細にコントロールすることができます。

Alertこのコンテンツを視聴するには Flash が必要です

今すぐ無償Flash Playerをダウンロード!

Flash Player を入手


必要条件

このチュートリアルのデモンストレーションと同じ操作を行うには下記のソフトウェアが必要です。

Adobe Flash Professional CS4

サンプルファイル

lrvid4057_fl.zip (ZIP, 665K)

前提として必要な知識

アニメーションとモーショントゥイーンの中級知識

モーションエディタの利用

Adobe Flash CS4 Professionalは、モーショントゥイーンの操作が大幅に改善されました。

モーションエディタの利用

「モーションエディタ」を使えば、アニメーションにおける個々のプロパティをコントロールすることができます。

  1. タイムラインの中にある自動車のモーショントゥイーンを選択します。「モーションエディタ」を利用するときは、はじめにタイムラインの中のモーショントゥイーンを選択しておかなければいけません。
  2. モーショントゥイーンを選択したら、次に「モーションエディタ」タブをクリックします。モーションエディタ内ではアニメーションをプロパティごとに見ることができます。一番上には、このアニメーションのXとY のプロパティがあります。

    モーションエディタ

    図 1: モーションエディタ
  3. 再生ヘッドをクリックしドラッグすると、あたかもタイムライン上で見ているのと同じようにアニメーションをプレビューすることができます。また、再生ヘッドの移動にあわせて、個々のプロパティ上の数字が変化して行くことを確認することができます
  4. アニメーションの始めに戻ります。
  5. プロパティ値スライダーを使うと、プロパティ値を変更することができます。

    プロパティ値スライダー

    図 2: プロパティ値スライダー

    ノート: Xのプロパティ値を変更したい場合は、Xのスライダーをクリックしてドラッグします。右へドラッグすると車は右方向へ移動し、左へドラッグすると車は左方向へと移動します。

その他のプロパティの変更

「モーションエディタ」は 単にX、Y プロパティを操作できるだけではなく、アニメーション化する全てのプロパティを操作できます。

  1. 「モーションエディタ」を下へスクロールして伸縮 Xと伸縮Yを見つけます。もし車を左へ移動するたびに拡大したいのであれば、始めに伸縮 X, 伸縮 Yのプロパティを使って車を縮小します。
  2. リンクの設定・解除はモーションエディタ内にある「リンク」アイコンを使って行うことができます。
  3. 車を縮小するためには、数字をクリックして左方向へドラッグします。この操作で、アニメーションが車を縮小した状態で始まり、最後では拡大するようになります。

    リンクアイコン

    図 3: 「リンク」アイコン
  4. クリック、もしくはドラッグして、再生ヘッドをアニメーションの最後に移動します。次に、数字をクリックし、伸縮スライダーを右方向へドラッグします。
  5. 再生ヘッドを少しずつ移動させながら、アニメーションをプレビューしてみましょう。

カラーエフェクトの設定

モーションエディタでは、更にアルファのようなカラーエフェクトを入れることもできます。

  1. 再生ヘッドを開始から1/3の時点へ移動して、次にモーションエディタをスクロールし、カラー効果エリアを表示させます。
  2. カラー効果エリアで、プラスボタンをクリックし、設定したい色調エフェクトを選びます。ここでは「アルファ」を選択します。

    色調エフェクトでアルファを選択

    図 4: 色調エフェクトで「アルファ」を選択

    ノート: 「アルファ」はオブジェクトの透明度を設定します。「アルファ」を変化させることで生き生きしたアニメーションを作成できます。

  3. アニメーションの開始時点ではアルファ値は0となっていなければならないので、再生ヘッドを開始時点に移動させてから、アルファに表示されているスライダーをドラッグして数値を0にします。
  4. 再生ヘッドをアニメーションの1/3部分まで移動させます。
  5. プロパティキーフレームを作成し、そこに「アルファ」プロパティが入るようにします。ボタンをクリックすると、プロパティキーフレームは黒の四角で表示されます。

    キーフレームを追加

    図 5: キーフレームを追加
  6. アニメーションの最後までスクロールします。Control キー(Windows)またはCommand キー(Macintosh)を押しながら、キーフレーム上の最後のキーフレームをクリックします。すると、プロパティキーフレームが四角で表示されます。
  7. アルファスライダーをドラッグする操作だけではなく、このキーフレームをクリックして、上下にドラッグし、移動させることでも数値を調整することができます。

    アルファプロパティキーフレームをドラッグ

    図 6: アルファプロパティキーフレームをドラッグ
  8. このままドラッグをして、数値が100%と表示されるまで続けます。これで車はフェードインして表示されるようになります。
  9. 「制御」から「ムービープレビュー」を選択し、このアニメーションをプレビューします。

イージングの追加

イージングを追加して、さらにアニメーションを改善してみましょう。

  1. 選択されたイージングドロップダウンメニューを使って、追加したいイージングを選択します。イージングのデフォルトオプションは、「イージングなし」か「シンプル(低速)」の2つです。「シンプル(低速)」を選択すると、アニメーションに対して基本的なイージングが提供され、アニメーションの終盤にかけて速度を落としたり上げたりすることができます。
  2. X 、Yプロパティとも「シンプル(低速)」を選択し、モーションエディタを下にスクロールしてイージングのセクションを表示させます。

    シンプル(低速)を選択

    図 7: シンプル(低速)を選択
  3. イージングセクションでは、「シンプル(低速)」の数値をクリックしながら右方向へドラッグさせて数値を最大にします。

    減速するアニメーション

    図 8: 減速するアニメーション
  4. 最大にすることで、アニメーションの終盤に向けて、遅く変化します。

その他のリンク

Creative Commons License
この記事は、Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported Licenseのもと提供しています。

著者について

Sorry, this page is not available

Broken link?

Send us an e-mail.

このURLは存在しません。

日本語のホームページ にお戻りください。

他のサイトのリンクでこのページにたどりついた場合はそのサイトの
ウェブマスターにリンクが壊れている旨をお伝えください。

Error returned: 404

You may wish to try one of the following links: