フィルター

フィルターの概要

フィルター(グラフィックエフェクト)を使用すると、テキスト、ボタン、およびムービークリップに質の高い視覚効果を追加できます。Animate に固有の機能として、モーショントゥイーンを使って、適用するフィルターをアニメーション化することができます。

Animate ブレンドモードを使用すると、複合イメージを作成できます。「複合」とは、複数の重なるオブジェクトの透明度またはカラーインタラクションを変化させるプロセスです。ブレンドモードでは、オブジェクトとイメージの透明度に関する制御も可能になります。Animate ブレンドモードを使用することで、ハイライトやシャドウの下にあるイメージの詳細が透けて見えるようにすることや、彩度の低いイメージの彩度を上げることができます。

アニメーションフィルターについて

タイムラインでフィルターをアニメーション化できます。トゥイーンによって結合された個々のキーフレーム上のオブジェクトは、中間フレーム上でトゥイーンされた、対応するフィルターのパラメーターを持ちます。一方のフィルターに対応する同じタイプのフィルターがトゥイーンの反対側にない場合は、一致するフィルターが自動的に追加され、アニメーションシーケンスの最後にもエフェクトが適用されるようになります。

トゥイーンの一方の端にフィルターがないことや、フィルターの適用順序が異なることに起因するモーショントゥイーンの誤動作を防ぐために、Animate によって次の処理が行われます。

  • フィルターが適用されたムービークリップにモーショントゥイーンを適用する場合、トゥイーンの反対側にキーフレームを挿入すると、ムービークリップの最後のフレームには、トゥイーンの開始フレームと同じフィルターが同じ重ね順で自動的に適用されます。

  • 異なるフィルターが適用された 2 つの異なるフレームにムービークリップを配置し、フレーム間にモーショントゥイーンを適用する場合、最も多くのフィルターを持つムービークリップが Animate によって最初に処理されます。次に Animate では、最初のムービークリップに適用されたフィルターが 2 番目のムービークリップに適用されたフィルターと比較されます。一致するフィルターが 2 番目のムービークリップに見つからない場合、パラメーターのない、既存のフィルターのカラーを持つ「ダミー」のフィルターが Animate によって生成されます。

  • 2 つのキーフレーム間にモーショントゥイーンがある場合、一方のキーフレームでオブジェクトにフィルターを追加すると、トゥイーンの反対側のキーフレームに達したときに、Animate によってムービークリップに自動的にダミーフィルターが追加されます。

  • 2 つのキーフレーム間にモーショントゥイーンがある場合、一方のキーフレームでオブジェクトからフィルターを削除すると、トゥイーンの反対側のキーフレームに達したときに、対応するフィルターが Animate によってムービークリップから自動的に削除されます。

  • モーショントゥイーンの最初と最後のフレーム間でフィルターパラメーターが一致せずに設定されている場合、最初のフレームに適用されたフィルター設定が Animate によって補間フレームに適用されます。「ノックアウト」、「シャドウ(内側)」、「光彩(内側)」、および「グラデーション光彩」と「グラデーションベベル」のタイプの設定がトゥイーンの最初と最後で異なっていると、一貫性の問題が発生します。

    例えば、ドロップシャドウフィルターを使ってモーショントゥイーンを作成し、トゥイーンの最初のフレームにノックアウトのあるドロップシャドウが適用され、最後のフレームにシャドウ(内側)が適用されていると、モーショントゥイーン内でフィルターの使用法に一貫性がないため、Animate によって設定が修正されます。この場合、Animate によってトゥイーンの最初のフレームで使用されたフィルター設定(ノックアウトのあるドロップシャドウ)が適用されます。

フィルターと Flash Player のパフォーマンスについて

オブジェクトに適用するフィルターのタイプ、数および品質は、再生時に SWF ファイルのパフォーマンスに影響を与えます。オブジェクトに適用するフィルターの数が多いほど、作成した視覚効果を正しく表示するために Adobe® Flash® Player で必要となる計算処理の回数が増えます。Adobe® では、1 つのオブジェクトに適用するフィルターの数が多くなりすぎないようにすることをお勧めしています。

各フィルターには、適用されたフィルターの強さと品質を調整できるコントロールが含まれています。低い設定を使用すると、処理速度の遅いコンピューターでもパフォーマンスが向上します。様々なコンピューターで再生するためのコンテンツを作成する場合や、ユーザーが使用できるコンピューターの処理能力がわからない場合は、再生のパフォーマンスを最大化するために、品質レベルを「低」に設定します。

Pixel Bender フィルターについて

Adobe Pixel Bender™ は Adobe によって開発されたプログラミング言語で、これにより Animate および After Effects で使用するフィルター、効果、ブレンドモードをカスタマイズすることができます。Pixel Bender は独立したハードウェアで、様々な GPU および CPU アーキテクチャで自動的に効率よく実行できるようになっています。

Pixel Bender 開発者は、ファイル拡張子 pbj を持つテキストファイルに Pixel Bender コードを記述して、そのコードを保存してフィルターを作成します。書き込まれると、Pixel Bender フィルターはどの Animate ドキュメントでも使用できるようになります。ActionScript® 3.0 では、フィルターを読み込んでそのコントロールを使用することができます。

ActionScript でのピクセルベンダーの操作について詳しくは、『ActionScript 3.0 開発ガイド』を参照してください。

Lee Brimelow 氏は、自身のブログ(http://theflashblog.com/?cat=44)でピクセルベンダーの有益な例をいくつか示しています。

次のビデオチュートリアルは、Animate でのピクセルベンダーフィルターの使用方法を解説しています。

フィルターの操作

Animate CC の拡張機能

オブジェクトに新しいフィルターを追加するたびに、プロパティインスペクターでそのオブジェクトに適用されたフィルターのリストにフィルターが追加されます。1 つのオブジェクトに複数のフィルターを適用することも、以前に適用したフィルターを削除することもできます。テキスト、ボタン、ムービークリップ、コンポーネントおよびコンパイルされたクリップオブジェクトに対してのみフィルターを適用できます。

フィルター設定ライブラリを作成すると、同じフィルターまたはフィルターのセットをオブジェクトに対して簡単に適用できます。Animate では、フィルター/プリセットメニューのプロパティインスペクターの「フィルター」セクションに作成したフィルタープリセットが保存されます。

Flash Professional CS6 および以前のバージョンでは、フィルターの適用先は、ムービークリップシンボルとボタンシンボルのみに制限されていました。Animate CC では、コンパイルされたクリップとムービークリップコンポーネントにもフィルターを適用できるようになりました。これにより、1 つ(または 2 つ)のボタンをクリックすることで、コンポーネントに様々なエフェクトを直接追加して、アプリケーションの概観をさらに改善できます。Flash CS6 では、コンポーネントにフィルターまたは他のエフェクトを追加するために、ムービークリップシンボル内にフィルターやエフェクトを「ラップ」する必要がありました。具体的には以下のとおりです。

  1. ステージ上にコンポーネントを作成または追加します。
  2. コンポーネントを右クリックし、「シンボルに変換」を選択します。
CS6(および以前のバージョン)では、シンボル内にコンポーネントをラップした後で、フィルターや様々な種類のエフェクトを追加できました。ただし、これは 1 つの回避策にすぎず、推奨されるベストプラクティスではありません。
 
Animate CC では、プロパティパネルで使用できる「フィルター」、「カラー効果」および「表示設定」の各オプションを直接使用して、コンポーネントに様々なフィルターを追加できます。強化されたこの主要な機能を理解するために、次の例を取り上げます。
 
ボタンコンポーネントへのベベルフィルターの追加
 
  1. コンポーネントパネルからステージ上にボタンを作成または追加した後で、ボタンを選択します。
  2. プロパティパネルで、「フィルター」セクションにあるドロップダウンリストの ボタンをクリックし、ベベルフィルターを選択します。ベベルフィルターのプロパティと値が表示されます。
  3. 必要なプロパティの値を変更、または適切な値を設定します。例えば、「ぼかし - 水平」、「ぼかし - 垂直」「強度」、「シャドウ」などです。値の設定と同時に、選択したボタンにエフェクトが反映されるのを確認できます。
プロパティインスペクターの「フィルターの追加」メニュー

フィルターの適用または削除

  1. フィルターを適用または削除するテキスト、ボタン、またはムービークリップを選択します。
  2. プロパティパネルの「フィルター」セクションで、次のいずれかの操作を行います。

    • フィルターを追加するには、 ボタンをクリックして、フィルターを選択します。目的の外観を得るまで、様々な設定を試すことができます。

    • フィルターを削除するには、適用されたフィルターのリストで削除するフィルターを選択し、フィルターを削除ボタン をクリックします。プリセットは、削除することや名前を変更することもできます。

フィルターのコピーとペースト

  1. フィルターのコピー元になるオブジェクトを選択し、フィルターパネルを選択します。
  2. コピーするフィルターを選択し、 ボタンをクリックします。ドロップダウンリストで、「選択したフィルターをコピー」をクリックします。すべてのフィルターをコピーするには、「すべてのフィルターをコピー」を選択します。

  3. フィルターを適用するオブジェクトを選択し、 ボタンをクリックします。ドロップダウンリストで、「フィルターをペースト」をクリックします。

オブジェクトへのプリセットフィルターの適用

  1. プリセットフィルターを適用するオブジェクトを選択して、「フィルター」タブを選択します。
  2. ボタンをクリックし、ドロップダウンを開きます。

  3. ドロップダウンリストの下部にある、利用できるフィルターのリストから、適用するプリセットフィルターを選択します。

注意:

オブジェクトにプリセットフィルターを適用すると、選択したオブジェクトに現在適用されているフィルターが、プリセットで使用されているフィルターに置き換えられます。

オブジェクトに適用されたフィルターを有効または無効にするには

  1. デフォルトでは、すべてのフィルターが有効になっています。フィルターリスト内のフィルターを無効にするには、フィルター名の横にある アイコンをクリックします。フィルターを有効にするには、フィルター名の横にある X ボタンをクリックします。

    注意:

    リスト内にある他のフィルターの有効状態を切り替えるには、フィルターリストで Alt キー(Windows)または Option キー(Mac OS)を押しながら有効化アイコンをクリックします。Alt キーを押しながら アイコンをクリックすると、選択したフィルターが有効になり、リスト内の他のフィルターがすべて無効になります。

オブジェクトに適用されたすべてのフィルターを有効または無効にするには

  1. ボタンをクリックし、ドロップダウンから「すべてを有効にする」または「すべてを無効にする」を選択します。

    注意:

    リストのすべてのフィルターを有効または無効にするには、フィルターリストで Ctrl キーを押しながら有効化アイコンまたは無効化アイコンをクリックします。

プリセットフィルターライブラリの作成

フィルター設定を、ムービークリップやテキストオブジェクトに簡単に適用できる既定のライブラリとして保存します。他のユーザーにフィルター設定を配布して、プリセットフィルターを共有します。フィルター設定ファイルは、次の場所にある Animate の Configuration フォルダーに保存されている XML ファイルです。

 

  • Windows および Windows 8 の場合:C:\Users\username\AppData\Local\Adobe\Flash CC\language\Configuration
  • (Flash Professional CS6 および以前のバージョンのみ)Windows XP:C:\Documents and Settings\username\Local Settings\Application Data\Adobe\Flash CS6\language\Configuration\Filters\filtername.xml
  • (Flash Professional CS6 おおび以前のバージョンのみ)Windows Vista:C:\Users\username\Local Settings\Application Data\Adobe\Flash CS6\language\Configuration\Filters\filtername.xml
  • Macintosh:Macintosh HD/Users/username/Library/Application Support/Adobe/Flash CC/language/Configuration/Filters/filtername.xml

既定の設定でのフィルターライブラリの作成

  1. オブジェクトにフィルターを適用します(複数可)。

  2. ボタンをクリックし、新しいフィルターを追加します。

  3. フィルターを選択して ボタンをクリックし、「プリセットとして保存」を選択します。

  4. プリセットに名前を付けて保存ダイアログボックスにフィルター設定の名前を入力し、「OK」をクリックします。

プリセットフィルターの名前の変更

  1. ボタンをクリックし、新しいフィルターを追加します。

  2. フィルターを選択し、 ボタンをクリックします。「プリセットを編集」をクリックします。

  3. 修正するプリセット名をダブルクリックします。

  4. 新しいプリセット名を入力し、「OK」をクリックします。

フィルタープリセットの削除

  1. ボタンをクリックし、新しいフィルターを追加します。

  2. フィルターを選択し、 ボタンをクリックします。

  3. 「プリセットを編集」をクリックします。

  4. プリセットを編集ダイアログで、削除するプリセットを選択し、「削除」をクリックします。

フィルターの適用

ドロップシャドウの適用

「ドロップシャドウ」フィルターは、面に影を落とすオブジェクトの外観をシミュレートします。

「ドロップシャドウ」フィルターが適用されたテキスト

クラシックトゥイーンのあるドロップシャドウの使用例については、Animate サンプルページ(www.adobe.com/go/learn_fl_samples_jp)を参照してください。サンプル zip ファイルをダウンロードして解凍し、Graphics¥AnimatedDropShadow ディレクトリに移動します。

  1. ドロップシャドウを適用するオブジェクトを選択します。
  2. プロパティインスペクターの「フィルター」セクションで、 ボタンをクリックし、「ドロップシャドウ」を選択します。

  3. フィルター設定を編集します。
    • ドロップシャドウの幅と高さを設定するには、「ぼかし - 水平およびぼかし - 垂直」の値を設定します。
    • シャドウの暗さを設定するには、「強度」の値を設定します。数値が高いほど、影は暗くなります。
    • ドロップシャドウの品質レベルを選択します。「高」は、ガウスぼかしの品質レベルとほぼ同じです。「低」は再生パフォーマンスを最大にします。
    • シャドウの角度を設定するには、値を入力します。
    • オブジェクトからのシャドウの距離を設定するには、「幅」の値を設定します。
    • ソースオブジェクトをノックアウト(非表示)にし、ノックアウトイメージ上にドロップシャドウのみを表示するには、「ノックアウト」を選択します。
    • オブジェクトの境界内にシャドウを適用するには、「シャドウ(内側)」を選択します。
    • オブジェクトを非表示にし、そのシャドウのみを表示するには、「オブジェクトを隠す」を選択します。「オブジェクトを隠す」を使用すると、リアルなシャドウをより簡単に作成できます。
    • カラーピッカーを開いて、シャドウカラーを設定するには、カラーコントロールをクリックします。

傾斜したドロップシャドウの作成

「ドロップシャドウ」フィルターを傾斜させた、よりリアルな外観のシャドウの作成例

  1. 傾斜させるシャドウ付きオブジェクトを選択します。
  2. ソースオブジェクトを複製します(編集/複製)。
  3. 複製したオブジェクトを選択し、自由変形ツールを使って傾斜します(修正/変形/回転と傾斜)。
  4. 複製したムービークリップまたはテキストオブジェクトに「ドロップシャドウ」フィルターを適用します (複製したオブジェクトにドロップシャドウが含まれていた場合は、既に適用されています)。
  5. フィルターパネルで、「オブジェクトを隠す」を選択して、シャドウを表示したまま複製したオブジェクトを隠します。
  6. 「修正」メニューから、重ね順/ひとつ背面へを選択して、複製したオブジェクトとそのシャドウを複製元のオブジェクトの背後に配置します。
  7. 「ドロップシャドウ」フィルターの設定と傾斜したドロップシャドウの角度を調整し、目的に合った外観を作成します。

ぼかしの適用

「ぼかし」フィルターを適用すると、オブジェクトのエッジと細部が滑らかになります。オブジェクトにぼかしを適用すると、そのオブジェクトが他のオブジェクトの背後にあるように見せたり、オブジェクトが動いているように見せることができます。

「ぼかし」フィルターが適用されたテキスト

  1. ぼかしを適用するオブジェクトを選択し、フィルターを選択します。
  2. ボタンをクリックし、「ぼかし」を追加します。

  3. 「フィルター」タブで次のようにフィルター設定を編集します。
    • ぼかしの幅と高さを設定するには、「ぼかし - 水平」および「ぼかし - 垂直」の値を設定します。
    • ぼかしの品質レベルを選択します。「高」は、ガウスぼかしの品質レベルとほぼ同じです。「低」は再生パフォーマンスを最大にします。

光彩の適用

「光彩」フィルターを使用すると、オブジェクトのエッジの周囲全体にカラーを適用できます。

グローフィルターが適用されたテキスト

  1. 光彩を適用するオブジェクトを選択し、フィルターを選択します。
  2. ボタンをクリックし、「光彩」を追加します。

  3. 「フィルター」タブで次のようにフィルター設定を編集します。
    • 光彩の幅と高さを設定するには、「ぼかし - 水平」および「ぼかし - 垂直」の値を設定します。
    • カラーピッカーを開いて、光彩カラーを設定するには、カラーコントロールをクリックします。
    • 光彩のシャープネスを設定するには、「強度」の値を設定します。
    • ソースオブジェクトをノックアウト(非表示)にし、ノックアウトイメージ上にグローのみを表示するには、「ノックアウト」を選択します。
    「グロー」フィルターと「ノックアウト」オプションの使用例

    • オブジェクトの境界内にグローを適用するには、「グロー(内側)」を選択します。
    • 光彩の品質レベルを選択します。「高」は、ガウスぼかしの品質レベルとほぼ同じです。「低」は再生パフォーマンスを最大にします。

ベベルの適用

ベベルを適用すると、オブジェクトにハイライトを適用し、背景上で曲げられたように見せることができます。

べベルが適用されたテキスト

  1. ベベルを適用するオブジェクトを選択し、フィルターを選択します。
  2. ボタンをクリックし、「ベベル」を追加します。

  3. 「フィルター」タブで次のようにフィルター設定を編集します。
    • べベルのタイプを設定するには、タイプメニューからべベルを選択します。
    • ベベルの幅と高さを設定するには、「ぼかし - 水平」および「ぼかし - 垂直」の値を設定します。
    • ポップアップカラーパレットから、ベベルのシャドウとハイライトカラーを選択します。
    • 幅に影響を与えずにベベルの透明度を設定するには、「強度」の値を設定します。
    • ベベルエッジがキャストするシャドウの角度を変更するには、「角度」の値を設定します。
    • ベベルの幅を定義するには、「幅」に値を入力します。
    • ソースオブジェクトをノックアウト(非表示)にし、ノックアウトイメージ上にベベルのみを表示するには、「ノックアウト」を選択します。

グラデーション光彩の適用

グラデーション光彩を適用すると、光彩の面全体にグラデーションカラーの光彩の外観を作成できます。グラデーション光彩では、アルファ値 0 を持つ 1 つのカラーをグラデーションの先頭に指定する必要があります。このカラーの位置は移動できませんが、カラーを変更することはできます。

グラデーショングローが適用されたテキスト

  1. グラデーション光彩を適用するオブジェクトを選択します。
  2. プロパティインスペクターの「フィルター」セクションで、 ボタンをクリックし、「グラデーショングロー」を選択します。

  3. 「フィルター」タブで次のようにフィルター設定を編集します。
    • タイプポップアップメニューで、オブジェクトに適用するベベルのタイプを選択します。
    • 光彩の幅と高さを設定するには、「ぼかし - 水平」および「ぼかし - 垂直」の値を設定します。
    • 幅に影響を与えずに光彩の透明度を設定するには、「強度」の値を設定します。
    • 光彩がキャストするシャドウの角度を変更するには、「角度」の値を設定します。
    • オブジェクトからのシャドウの距離を設定するには、「幅」の値を設定します。
    • ソースオブジェクトをノックアウト(非表示)にし、ノックアウトイメージ上にグラデーションのみを表示するには、「ノックアウト」を選択します。
    • 光彩のグラデーションカラーを指定します。グラデーションには、相互にフェードアウト(ブレンド)し合う複数のカラーが含まれます。グラデーションの先頭に対して選択するカラーをアルファカラーと呼びます。
    • グラデーションのカラーを変更するには、グラデーション定義バーの下にあるカラーポインターのいずれかを選択し、グラデーションバーのすぐ下に表示されるカラースペースをクリックして、カラーピッカーを表示します。これらのポインターをスライドすると、グラデーションでそのカラーのレベルと位置が調整されます。
    • グラデーションにポインターを追加するには、グラデーション定義バーまたはその下をクリックします。最大で 15 色のトランジションを持つグラデーションを作成するには、最大で 15 色までポインターを追加します。グラデーションのポインターの位置を変更するには、グラデーション定義バーに沿ってポインターをドラッグします。ポインターを削除するには、グラデーション定義バーの下にドラッグします。
    • グラデーション光彩の品質レベルを選択します。「高」は、ガウスぼかしの品質レベルとほぼ同じです。「低」は再生パフォーマンスを最大にします。

グラデーションベベルの適用

グラデーションベベルを適用すると、背景の上にオブジェクトが持ち上げられたように見せて、ベベルの面全体にグラデーションカラーを表示できます。グラデーションベベルでは、アルファ値 0 を持つ 1 つのカラーをグラデーションの中央に指定する必要があります。

  1. グラデーションベベルを適用するオブジェクトを選択します。

  2. プロパティインスペクターの「フィルター」セクションで、 ボタンをクリックし、「グラデーションベベル」を選択します。

  3. 「フィルター」タブで次のようにフィルター設定を編集します。

    • タイプポップアップメニューで、オブジェクトに適用するベベルのタイプを選択します。

    • ベベルの幅と高さを設定するには、「ぼかし - 水平」および「ぼかし - 垂直」の値を設定します。

    • ベベルの幅に影響を与えずにベベルの滑らかさを変更するには、「強度」に値を入力します。

    • 光源の角度を設定するには、「角度」に値を入力します。

    • ソースオブジェクトをノックアウト(非表示)にし、ノックアウトイメージ上にグラデーションベベルのみを表示するには、「ノックアウト」を選択します。

    • ベベルのグラデーションカラーを指定します。グラデーションには、相互にフェードアウト(ブレンド)し合う複数のカラーが含まれます。中央のポインターは、グラデーションのアルファカラーを制御します。アルファポインターのカラーを変更することはできますが、グラデーションでそのカラーの位置を変更することはできません。

      グラデーションのカラーを変更するには、グラデーション定義バーの下にあるカラーポインターのいずれかを選択し、グラデーションバーのすぐ下に表示されるカラースペースをクリックして、カラーピッカーを表示します。グラデーションでそのカラーのレベルと位置を調整するには、これらのポインターをスライドします。

      グラデーションにポインターを追加するには、グラデーション定義バーまたはその下をクリックします。最大で 15 色のトランジションを持つグラデーションを作成するには、最大で 15 色までポインターを追加します。グラデーションのポインターの位置を変更するには、グラデーション定義バーに沿ってポインターをドラッグします。ポインターを削除するには、グラデーション定義バーの下にドラッグします。

カラー調整フィルターの適用

カラー調整フィルターで、選択したオブジェクトのコントラスト、明度、彩度、色相などのカラー属性をより細かく制御できます。

  1. カラーを調整するオブジェクトを選択します。
  2. プロパティインスペクターの「フィルター」セクションで、 ボタンをクリックし、「カラー調整」を選択します。

  3. カラー属性の値を入力します。属性と対応する値は次のとおりです。

    コントラスト

    イメージのハイライト、シャドウ、および中間トーンを調整します。

    明度

    イメージの明るさを調整します。

    彩度

    カラーの強さを調整します。

    色相

    カラーの階調を調整します。

  4. すべてのカラー調整を 0 にリセットし、オブジェクトを元の状態に戻すには、リセットフィルターをクリックします。

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

法律上の注意   |   プライバシーポリシー