ダイアログボックス

Flashで優れたエフェクトを簡単に実現

Rafiq R. Elmansy

Flash®の以前のバージョンでは、アニメーションに現実的なモーションエフェクトを与えるためのモーショントゥイーンが難しく、面倒でした。イーズイン/イーズアウト機能は便利でしたが、自然な模倣のためにフレームごとの多数のシェイプやモーショントゥイーンを作成することが必要であったために、複雑なアニメーションではその限界が明らかでした。

Flash Professional 8では、カスタムイーズイン/イーズアウトにより、この作業が容易になっています。この新しい機能により、トゥイーンをより細かく制御できるグラフを利用できます。提供される速度曲線を使用することにより、モーショントゥイーンを特定のフレームごとに正確に制御できます。さらに、カスタムイーズイン/イーズアウト機能では、各シンボルプロパティのカスタム速度曲線を独立して適用するためのオプションが提供されます。

Flash Professional 8のこのイージング機能により、再生するのも楽しい素晴らしいモーショントゥイーンエフェクトを簡単に制作できるようになりました。

この記事では、イーズイン/イーズアウトのグラフを理解するために、興味深いアニメーションエフェクトを作成する具体例を取り上げます。また、カスタムイージングプロパティと、複数のイージングエフェクトの適用について説明します。

要件
このチュートリアルを完了するには、Flash Professional 8のインストール、および画面左の「リソース」セクションの「ダウンロード」から実習ファイルをダウンロードすることが必要です。

また、Flashの基礎知識と、イージングおよびモーショントゥイーンの実用的な知識が必要です。

Flashのカスタムイージング

Flashには、アニメーションのイージングを制御するいくつかの手段が提供されています。第１の方法では、プロパティインスペクタのイージングスライダを使用します。これは、Flashの以前のバージョンで使用した方法です。第２の方法は、モーショントゥイーンアニメーションでのみ使用可能なカスタムイーズイン/イーズアウトダイアログボックスを使用することです。（第３の方法では、Tweenクラス/イージングメソッド、または独自の式を含むActionScriptを使用します）。

イージングスライダの隣にある「編集」ボタンをクリックすると（まず、モーショントゥイーンを含むタイムラインのフレームをクリックする必要があります）、カスタムイーズイン/イーズアウトダイアログボックスに位置、回転、伸縮、色、フィルタなど、モーショントゥイーン中に変更されるシンボルプロパティを独立して制御できるグラフが表示されます。

注:シンボルにカスタムイージングを適用した場合、プロパティインスペクタにイージング値が表示されます。

カスタムイーズイン/イーズアウトダイアログボックスには、次の機能が含まれます。

• 次節で説明するように、イーズイン/イーズアウトグラフにより、コントロールポイントを通じて曲線を編集することで、トゥイーンのイージングを制御できます。
• 「すべてのプロパティに対して同じ設定を使用する」オプションでは、すべてのオブジェクトプロパティについて、１つの曲線設定が使用されます（デフォルトで選択されます）。
• 「すべてのプロパティに対して同じ設定を使用する」オプションの選択を解除した場合は、プロパティポップアップメニューが有効になります。これにより、シンボルの位置、回転、伸縮、色、およびフィルタの各プロパティについて個別に曲線設定を指定できます。
• 「再生」および「停止」ボタンにより、アニメーションの曲線エフェクトをプレビューできます。
• 「リセット」ボタンにより、速度曲線がデフォルト位置に戻ります。

この記事では、Flash 8のイージング機能のうち、最も強力なイーズイン/イーズアウトグラフに焦点を当てます。

イーズイン/イーズアウトグラフについて

イーズイン/イーズアウトグラフは、簡単に使用できます。水平軸はムービーのフレームを表し、垂直軸はアニメーション（トゥイーン）の変化のパーセンテージを表します。速度曲線上のコントロールポイントを使用してアニメーションを制御します。曲線をクリックすることによりポイントを追加できます。また、ポイントを選択してDeleteキーを押すことによりポイントを削除できます。

各コントロールポイントには、タンジェントポイントと呼ばれる２つのハンドルがあります。これらのタンジェントポイントを移動することにより、速度曲線の形式を制御できます（図１参照）。これは、得られるトゥイーンアニメーションの平滑性に影響します。

図１ カスタムイーズイン/イーズアウトグラフ

グラフのさまざまな部分を詳細に見ることでそのしくみを理解しましょう。トゥイーンの速度は、速度曲線の傾斜に影響されます。大きな傾斜を持つ曲線の垂直部分は高速なアニメーションを表すのに対し、小さな傾斜の水平部分は低速なアニメーションを表しています。図２では、アニメーションの速度曲線は大きな傾斜値で始まり、水平方向に近づきながら、最終的に再び大きな傾斜で終わります。

図２ アニメーションの速度曲線傾斜のエフェクト

次のデモを再生し、アニメーションで図２の速度曲線傾斜のエフェクトを確認してください。

前述したように、タンジェントポイントは速度曲線の傾斜に影響します。急勾配の曲線は、衝突する２つの金属球など、衝突をシミュレートするのに適した鋭く高速なアニメーションを生成します。この例については、後ほど説明します。

緩やかな曲線は、低速な移動に適したスムーズなアニメーションを生成します。図３では、反対の境界との最初の衝突が星の高速なアニメーション軌道を示す鋭いアニメーションポイントであるのに対し、速度曲線の緩やかな部分はステージ中央に星が低速で戻る起動を生成します。

図３ 速度グラフのタンジェントポイント

次のデモを再生し、アニメーションで図３のタンジェントポイントのエフェクトを確認してください。

この例では、グラフのポイント場所がトゥイーンのパーセンテージを示します。高い値のポイントの後、低い値のポイントを挿入すると、トゥイーンがより少ないパーセント値に戻ります。図３の低いポイントは、モーショントゥイーンが最終的なエフェクト（100%パーセント）に達した後、トゥイーンの30%まで戻ることを示しています。

アニメーションエフェクトを作成するためのイージンググラフの使用

次の例では、２つの金属球の衝突をシミュレートしています。以前のFlashのバージョンでは、必要な結果を得るためにさまざまなモーショントゥイーンおよびキーフレームを操作する必要がありました。しかしご覧のように、シンボル（金属球）ごとに、１つのモーショントゥイーンでのみエフェクトを実行できるようになります。

この例のエフェクトを作成するには、以下の手順に従います。

1. MetalBall.flaの例の金属球シンボルを作成し、ステージに配置します。
2. 金属球シンボルインスタンスを複製し、それぞれを異なるレイヤーに配置します。
3. アニメーションの最初のキーフレームでは、図４で示す金属球シンボルを配置します。変形ポイントは、図の通りです。

図４ 最初のアニメーションキーフレーム内のシンボルの配置

4. フレーム50では、図５に従って、もう１つのキーフレームを作成し、金属球シンボルを配置します。

図５ フレーム50内のシンボル位置

5. 両方のシンボルに対応する１つのモーショントゥイーンを作成し、その内部のフレームを選択します。
6. プロパティインスペクタで、イージングスライダの隣にある「編集」ボタンをクリックします。
7. カスタムイーズイン/イーズアウトダイアログボックスで、図６のグラフのように速度曲線を編集します。
8. ダイアログボックスの「再生」ボタンをクリックしてアニメーションをプレビューします。次のアニメーションのように表示されるはずです。

図６ 速度曲線の編集

次のデモを再生し、カスタムイーズイン/イーズアウト設定を使用するサンプルモーショントゥイーンアニメーションを確認してください。

複数のイージングエフェクトの適用

カスタムイーズイン/イーズアウトダイアログボックスで、「すべてのプロパティに対して同じ設定を使用する」オプションはデフォルトオプションです。ただし、このオプションの選択を解除することにより、各オブジェクトのプロパティを独立して制御できます。この場合、プロパティポップアップメニューが有効になり、シンボルプロパティリストごとに個別に速度曲線が提示されます。

次のリストは、プロパティポップアップメニューに表示されるプロパティと、各プロパティが速度曲線にどのように影響するかを示しています。

• 位置 モーショントゥイーンを通じたアニメーションシンボルの位置に影響します。
• 回転 図３のサンプルのようなアニメーションシンボルの回転に影響します。
• 伸縮 アニメーションシンボルのサイズに影響します。
• カラー アニメーションインスタンスに適用されるカラートランジションのイージング設定を指定します。
• フィルタ アニメーションシンボルに適用されるフィルタに影響します。

シンボルプロパティごとに速度曲線を作成している場合は、１つのシンボルに対して複数のイージングエフェクトが適用されます。次の例では、星のインスタンスの位置プロパティおよびフィルタプロパティに対して、さまざまなイージング設定を適用する方法を示しています。

図７および８のように、２つのイージング設定（位置プロパティおよびフィルタプロパティ）が適用された星のアニメーションを表示するために次のデモを再生します。

図７内の速度曲線は、モーショントゥイーン全体にわたる星の位置のイージング設定を示します。

図７ 星のアニメーションの位置プロパティに対するイージング設定

図８内の速度曲線は、モーショントゥイーン全体にわたる星に適用されるぼかしフィルタのイージング設定を示します。

図８ 星のアニメーションに適用されるBlurフィルタのイージング設定

上から落下したボールがバウンドする次の例では、伸縮およびフィルタの速度曲線に異なるイージング設定を適用しました（図９および10）。

次のデモを再生してください。伸縮プロパティおよびぼかしフィルタについて、２つの異なるイージング設定の適用されたバウンドするボールのアニメーションが表示されます。

伸縮設定（図９を参照）はバウンドするボールのエフェクトを作成するのに対し、フィルタ設定（図10を参照）はアニメーションの最後のぼかしを作成しています。

図９ バウンドするボールのアニメーションには、伸縮プロパティのイージング設定が適用されています。

図10 バウンドするボールのアニメーションに適用されるぼかしフィルタのイージング設定

次のステップ

自然なアニメーションエフェクトを模倣してみてください。また、速度曲線のその他の設定も試してみてください。簡単なモーショントゥイーンを作成し、カスタムイーズイン/イーズアウトダイアログボックスを開いて、速度曲線を編集してみます。こうした変更がアニメーションにどのように影響するか確認してください。

以下の記事は、イージングについておよびアニメーションエフェクトを作成するためにイージングを使用する方法について理解するために役立ちます。

• Flash 8によるキャラクターデザインとアニメーション："2.5D"アニメーションのテクニック
• Flashアニメーション習得ガイド：モーショントゥイーンに対するイージングの適用とカスタムイーズインおよびイーズアウト
• Using the Tween and Transition Classes in Flash MX 2004*