表示オブジェクトのフィルター処理の例:Filter Workbench

Flash Player 9 以降、Adobe AIR 1.0 以降

Filter Workbench は、イメージやその他のビジュアルコンテンツに様々なフィルターを適用し、同じ効果を ActionScript で生成するために使用できる結果コードを表示するユーザーインターフェイスを備えています。 このアプリケーションは、様々なフィルターを試すためのツールを提供するだけではなく、次の操作も行います。

  • 様々なフィルターのインスタンスの作成

  • 表示オブジェクトに対する複数のフィルターの適用

このサンプルのアプリケーションのファイルを入手するには、www.adobe.com/go/learn_programmingAS3samples_flash_jp を参照してください。 Filter Workbench アプリケーションファイルは Samples/FilterWorkbench フォルダーにあります。このアプリケーションは次のファイルで構成されています。

ファイル

説明

com/example/programmingas3/filterWorkbench/FilterWorkbenchController.as

フィルターを適用するコンテンツの切り替え、コンテンツへのフィルターの適用など、アプリケーションの主な機能を提供するクラス。

com/example/programmingas3/filterWorkbench/IFilterFactory.as

各フィルターファクトリクラスによって実装される一般的なメソッドを定義するインターフェイス。 このインターフェイスは、FilterWorkbenchController クラスが個々のフィルターファクトリクラスとやり取りするときに使用する一般的な機能を定義します。

com/example/programmingas3/filterWorkbench/ フォルダー:

BevelFactory.as

BlurFactory.as

ColorMatrixFactory.as

ConvolutionFactory.as

DropShadowFactory.as

GlowFactory.as

GradientBevelFactory.as

GradientGlowFactory.as

それぞれが IFilterFactory インターフェイスを実装するクラスのセット。 これらの各クラスは、1 種類のフィルターの値を作成し、設定するための機能を提供します。 アプリケーションのフィルタープロパティパネルは、これらのファクトリクラスを使用して特定のフィルターのインスタンスを作成し、FilterWorkbenchController クラスがこのインスタンスを取得して、イメージコンテンツに適用します。

com/example/programmingas3/filterWorkbench/IFilterPanel.as

アプリケーションでフィルター値の操作に使用されるユーザーインターフェイスパネルを定義するクラスによって実装される、一般的なメソッドを定義するインターフェイス。

com/example/programmingas3/filterWorkbench/ColorStringFormatter.as

数値で表したカラー値を 16 進数の String 形式に変換するメソッドが含まれるユーティリティクラス。

com/example/programmingas3/filterWorkbench/GradientColor.as

値オブジェクトとして機能し、GradientBevelFilter と GradientGlowFilter の各カラーに関連付けられた 3 つの値(カラー、アルファ値、比率)を 1 つのオブジェクトに結合するクラス。

ユーザーインターフェイス(Flex)

FilterWorkbench.mxml

アプリケーションのユーザーインターフェイスを定義するメインファイル。

flexapp/FilterWorkbench.as

メインアプリケーションのユーザーインターフェイスの機能を提供するクラス。このクラスは、アプリケーション MXML ファイルのコードを実装したクラスとして使用されます。

flexapp/filterPanels フォルダー:

BevelPanel.mxml

BlurPanel.mxml

ColorMatrixPanel.mxml

ConvolutionPanel.mxml

DropShadowPanel.mxml

GlowPanel.mxml

GradientBevelPanel.mxml

GradientGlowPanel.mxml

1 つのフィルターのオプションを設定するために使用する各パネルの機能を提供する MXML コンポーネントのセット。

flexapp/ImageContainer.as

画面上に読み込まれたイメージのコンテナとして機能する表示オブジェクト。

flexapp/controls/BGColorCellRenderer.as

DataGrid コンポーネントのセルの背景色を変更するために使用するカスタムセルレンダラー。

flexapp/controls/QualityComboBox.as

フィルターパネルの品質設定に使用できるコンボボックスを定義するカスタムコントロール。

flexapp/controls/TypeComboBox.as

フィルターパネルの種類設定に使用できるコンボボックスを定義するカスタムコントロール。

ユーザーインターフェイス(Flash)

FilterWorkbench.fla

アプリケーションのユーザーインターフェイスを定義するメインファイル。

flashapp/FilterWorkbench.as

メインアプリケーションのユーザーインターフェイスの機能を提供するクラス。このクラスは、アプリケーション FLA ファイルのドキュメントクラスとして使用されます。

flashapp/filterPanels フォルダー:

BevelPanel.as

BlurPanel.as

ColorMatrixPanel.as

ConvolutionPanel.as

DropShadowPanel.as

GlowPanel.as

GradientBevelPanel.as

GradientGlowPanel.as

1 つのフィルターのオプションを設定するために使用する各パネルの機能を提供するクラスのセット。

各クラスには、メインアプリケーション FLA ファイルのライブラリ内に、名前がクラスの名前に一致する関連付けられた MovieClip シンボルもあります(例えば、シンボル「BlurPanel」は BlurPanel.as で定義されたクラスにリンクされています)。ユーザーインターフェイスを構成するコンポーネントは、これらのシンボル内部に配置され、名前が指定されます。

flashapp/ImageContainer.as

画面上に読み込まれたイメージのコンテナとして機能する表示オブジェクト。

flashapp/BGColorCellRenderer.as

DataGrid コンポーネントのセルの背景色を変更するために使用するカスタムセルレンダラー。

flashapp/ButtonCellRenderer.as

DataGrid コンポーネントのセルにボタンコンポーネントを含めるために使用するカスタムセルレンダラー。

フィルターされたイメージコンテンツ

com/example/programmingas3/filterWorkbench/ImageType.as

このクラスは、アプリケーションがフィルターを読み込んで適用できる 1 つのイメージファイルの種類と URL が含まれる値オブジェクトとして機能します。 このクラスには、使用可能な実際のイメージファイルを表す定数のセットも含まれます。

images/sampleAnimation.swf,

images/sampleImage1.jpg,

images/sampleImage2.jpg

アプリケーションでフィルターが適用されるイメージやその他のビジュアルコンテンツ。

様々な ActionScript フィルターの使用

Filter Workbench アプリケーションは、様々なフィルター効果を試し、その効果に関連する ActionScript コードを生成する際に役立つように設計されています。 このアプリケーションを使用すると、ビットマップイメージや Flash が作成するアニメーションなどのビジュアルコンテンツが含まれる 3 つの 異なるフィルターから選択し、選択したイメージに 8 つの異なる ActionScript フィルターを個別に、または他のフィルターと組み合わせて適用できます。このアプリケーションには次のフィルターが含まれます。

  • ベベル(flash.filters.BevelFilter)

  • ぼかし(flash.filters.BlurFilter)

  • カラーマトリックス(flash.filters.ColorMatrixFilter)

  • 畳み込み(flash.filters.ConvolutionFilter)

  • ドロップシャドウ(flash.filters.DropShadowFilter)

  • グロー(flash.filters.GlowFilter)

  • グラデーションベベル(flash.filters.GradientBevelFilter)

  • グラデーショングロー(flash.filters.GradientGlowFilter)

イメージと、そのイメージに適用するフィルターを選択すると、選択したフィルターに固有のプロパティを設定するためのコントロールが含まれるパネルが表示されます。 例えば、次のイメージは、ベベルフィルターが選択されたアプリケーションを示しています。

フィルタープロパティを調整すると、プレビューがリアルタイムで更新されます。 1 つのフィルターをカスタマイズして適用ボタンをクリックし、別のフィルターをカスタマイズして適用ボタンをクリックすることにより、複数のフィルターを適用することもできます。

アプリケーションのフィルターパネルにはいくつかの機能と制限があります。

  • カラーマトリックスフィルターには、明度、コントラスト、彩度、色相など、イメージの一般的なプロパティを直接操作するためのコントロールのセットが含まれます。 さらに、カスタムカラーマトリックス値を指定できます。

  • ActionScript を使用した場合にのみ利用できる畳み込みフィルターには、頻繁に使用される畳み込みマトリックス値が含まれます。カスタム値を指定することもできます。 ただし、ConvolutionFilter クラスには任意のサイズのマトリックスを指定できますが、Filter Workbench アプリケーションは、最も一般的に使用されるフィルターサイズである固定の 3 x 3 マトリックスを使用します。

  • 置き換えマップフィルターとシェーダーフィルターは ActionScript だけで利用可能であり、Filter Workbench アプリケーションでは使用できません。

フィルターインスタンスの作成

Filter Workbench アプリケーションには、フィルターを作成するために各パネルによって使用されるクラスのセットが、使用可能なフィルターごとに 1 つずつ含まれます。 フィルターを選択すると、そのフィルターパネルに関連付けられた ActionScript コードが、適切なフィルターファクトリクラスのインスタンスを作成します (これらのクラスは、その目的が他のオブジェクトのインスタンスを作成することであり、実際の工場が個別の製品を製造することと類似しているので、「ファクトリクラス」と呼ばれます)。

パネルのプロパティ値を変更すると、パネルのコードがファクトリクラスの適切なメソッドを呼び出します。各ファクトリクラスには、パネルが適切なフィルターインスタンスの作成に使用する固有のメソッドが含まれます。 例えば、ぼかしフィルターを選択すると BlurFactory インスタンスが作成されます。 BlurFactory クラスには、希望の BlurFilter インスタンスを作成するために合わせて使用される 3 つのパラメーター blurXblurYquality を受け入れる modifyFilter() メソッドが含まれます。

private var _filter:BlurFilter; 
 
public function modifyFilter(blurX:Number = 4, blurY:Number = 4, quality:int = 1):void 
{ 
    _filter = new BlurFilter(blurX, blurY, quality); 
    dispatchEvent(new Event(Event.CHANGE)); 
}

これに対して、畳み込みフィルターを選択した場合は、そのフィルターによって柔軟性が大幅に向上し、その結果、制御するプロパティが増えます。 ConvolutionFactory クラスでは、フィルターパネルで別の値を選択すると、次のコードが呼び出されます。

private var _filter:ConvolutionFilter; 
 
public function modifyFilter(matrixX:Number = 0,  
                                                matrixY:Number = 0,  
                                                matrix:Array = null,  
                                                divisor:Number = 1.0,  
                                                bias:Number = 0.0,  
                                                preserveAlpha:Boolean = true,  
                                                clamp:Boolean = true,  
                                                color:uint = 0,  
                                                alpha:Number = 0.0):void 
{ 
    _filter = new ConvolutionFilter(matrixX, matrixY, matrix, divisor, bias, preserveAlpha, clamp, color, alpha); 
    dispatchEvent(new Event(Event.CHANGE)); 
}

いずれの場合でも、フィルター値が変化すると、ファクトリオブジェクトが Event.CHANGE イベントを送出し、フィルターの値が変更されたことをリスナーに通知します。フィルターされたコンテンツに実際にフィルターを適用する FilterWorkbenchController クラスは、そのイベントを待機して、フィルターの新しいコピーを取得し、フィルターされたコンテンツにそのコピーを再度適用する必要がある時期を確認します。

FilterWorkbenchController クラスは、各フィルターファクトリクラスに固有の詳細情報を認識する必要はありません。フィルターが変更され、フィルターのコピーにアクセスできるようになったことだけを認識する必要があります。これをサポートするために、アプリケーションの FilterWorkbenchController インスタンスがそのジョブを実行できるように、フィルターファクトリクラスが提供する必要がある動作を定義するインターフェイス、IFilterFactory がアプリケーションに含まれます。IFilterFactory は、FilterWorkbenchController クラスで使用される getFilter () メソッドを定義します。

function getFilter():BitmapFilter;

getFilter() インターフェイスメソッドの定義では、特定の種類のフィルターではなく、BitmapFilter インスタンスを返すことを指定しています。BitmapFilter クラスは、特定の種類のフィルターを定義するものではなく、 すべてのフィルタークラスを構築する際の基礎となるクラスです。 各フィルターファクトリクラスは、getFilter() メソッドの特定の実装を定義し、このメソッドで、構築したフィルターオブジェクトへの参照を返します。例えば、ConvolutionFactory クラスの簡略化したソースコードを次に示します。

public class ConvolutionFactory extends EventDispatcher implements IFilterFactory 
{ 
    // ------- Private vars ------- 
    private var _filter:ConvolutionFilter; 
    ... 
    // ------- IFilterFactory implementation ------- 
    public function getFilter():BitmapFilter 
    { 
        return _filter; 
    } 
    ... 
}

ConvolutionFactory クラスによる getFilter() メソッドの実装では ConvolutionFilter インスタンスが返されますが、getFilter() を呼び出すどのオブジェクトも、必ずしもそれを認識していません。ConvolutionFactory が従う getFilter() メソッドの定義に応じて、いずれかの ActionScript フィルタークラスのインスタンスである任意の BitmapFilter インスタンスを返す必要があります。

表示オブジェクトに対するフィルターの適用

前に説明したように、Filter Workbench アプリケーションは FilterWorkbenchController クラスのインスタンス(以降は「コントローラーインスタンス」と呼ぶ)を使用します。このインスタンスが、選択したビジュアルオブジェクトに対するフィルターの適用という実際のタスクを実行します。コントローラーインスタンスがフィルターを適用するには、その前に、フィルターの適用先のイメージまたはビジュアルコンテンツを認識しておく必要があります。 イメージを選択すると、アプリケーションは FilterWorkbenchController クラスの setFilterTarget() メソッドを呼び出し、ImageType クラスで定義された定数の 1 つで渡します。

public function setFilterTarget(targetType:ImageType):void 
{ 
    ... 
    _loader = new Loader(); 
    ... 
    _loader.contentLoaderInfo.addEventListener(Event.COMPLETE, targetLoadComplete); 
    ... 
}

その情報を使用して、コントローラーインスタンスは指定のファイルを読み込み、その後に _currentTarget という名前のインスタンス変数に保存します。

private var _currentTarget:DisplayObject; 
 
private function targetLoadComplete(event:Event):void 
{ 
    ... 
    _currentTarget = _loader.content; 
    ... 
}

フィルターを選択すると、アプリケーションはコントローラーインスタンスの setFilter() メソッドを呼び出し、関連するフィルターファクトリオブジェクトに対する参照をコントローラーに渡し、_filterFactory という名前のインスタンス変数に保存します。

private var _filterFactory:IFilterFactory; 
 
public function setFilter(factory:IFilterFactory):void 
{ 
    ... 
     
    _filterFactory = factory; 
    _filterFactory.addEventListener(Event.CHANGE, filterChange); 
}

前述のように、コントローラーインスタンスは、指定されたフィルターファクトリインスタンスの固有のデータ型を認識せず、オブジェクトが IFilterFactory インスタンスを実装することだけを認識します。つまり、getFilter() メソッドを持っており、フィルターが変更されたときに changeEvent.CHANGE)イベントを送出するということです。

ユーザーがフィルターパネルでフィルターのプロパティを変更すると、コントローラーインスタンスでは、コントローラーインスタンスの filterChange() メソッドを呼び出すフィルターファクトリの change イベントを介して、フィルターが変更されたことが認識されます。 そのメソッドは、次に applyTemporaryFilter() メソッドを呼び出します。

private function filterChange(event:Event):void 
{ 
    applyTemporaryFilter(); 
} 
 
private function applyTemporaryFilter():void 
{ 
    var currentFilter:BitmapFilter = _filterFactory.getFilter(); 
     
    // Add the current filter to the set temporarily 
    _currentFilters.push(currentFilter); 
     
    // Refresh the filter set of the filter target 
    _currentTarget.filters = _currentFilters; 
     
    // Remove the current filter from the set 
    // (This doesn't remove it from the filter target, since  
    // the target uses a copy of the filters array internally.) 
    _currentFilters.pop(); 
}

表示オブジェクトに対するフィルターの適用は applyTemporaryFilter() メソッド内部で行われます。最初に、コントローラーがフィルターファクトリの getFilter() メソッドを呼び出して、フィルターオブジェクトに対する参照を取得します。

var currentFilter:BitmapFilter = _filterFactory.getFilter();

コントローラーインスタンスには _currentFilters という名前の Array インスタンスがあり、ここには、表示オブジェクトに適用されたすべてのフィルターが保存されています。次に、新たに更新されたフィルターを配列に追加します。

_currentFilters.push(currentFilter);

次に、このコードがフィルターの配列を表示オブジェクトの filters プロパティに割り当て、このプロパティが実際にフィルターをイメージに適用します。

_currentTarget.filters = _currentFilters;

最後に、この最後に追加したフィルターはこの時点でも「稼働中」のフィルターなので、表示オブジェクトに永続的に適用してはなりません。したがって、_currentFilters 配列から削除されます。

_currentFilters.pop();

このフィルターを配列から削除しても、フィルターされた表示オブジェクトには影響はありません。これは、表示オブジェクトが、filters プロパティに適用されたときにフィルター配列のコピーを作成し、元の配列ではなく、その内部配列を使用するからです。したがって、フィルターの配列に対して行われたすべての変更は、配列が表示オブジェクトの filters プロパティに再び割り当てられるまでは、表示オブジェクトに影響を与えません。