Beispiel für das Filtern von Anzeigeobjekten: Filter Workbench

Mithilfe der Anwendung „Filter Workbench“ können Sie verschiedene Filtereffekte testen und den entsprechenden ActionScript-Code für die jeweiligen Effekte erzeugen. In der Anwendung haben Sie die Auswahl zwischen drei verschiedenen Dateien mit grafischem Inhalt, einschließlich Bitmapgrafiken und einer mit Flash erstellten Animation. Zudem können Sie acht verschiedene ActionScript-Filter entweder einzeln oder in Kombination mit anderen Filtern auf das ausgewählte Bild anwenden. Die Anwendung enthält die folgenden Filter:

• Geschliffen (flash.filters.BevelFilter)

• Weichzeichnen (flash.filters.BlurFilter)

• Farbmatrix (flash.filters.ColorMatrixFilter)

• Convolution (flash.filters.ConvolutionFilter)

• Schlagschatten (flash.filters.DropShadowFilter)

• Glühen (flash.filters.GlowFilter)

• Farbverlauf-Geschliffen (flash.filters.GradientBevelFilter)

• Farbverlauf-Glühen (flash.filters.GradientGlowFilter)

Wenn ein Benutzer ein Bild und einen auf das Bild anzuwendenden Filter ausgewählt hat, wird ein Bedienfeld mit Steuerelementen angezeigt, über die die spezifischen Eigenschaften des ausgewählten Filters festgelegt werden können. In der folgenden Abbildung ist beispielsweise der Geschliffen-Filter ausgewählt:

Wenn der Benutzer die Filtereigenschaften ändert, wird die Vorschau in Echtzeit aktualisiert. Der Benutzer kann auch mehrere Filter anwenden, indem er einen Filter anpasst, auf die Schaltfläche „Anwenden“ klickt, dann einen anderen Filter anpasst, auf die Schaltfläche „Anwenden“ klickt usw.

Es folgt die Beschreibung einiger Funktionen und Beschränkungen bei einzelnen Bedienfeldern für Filter in der Anwendung:

• Der Farbmatrixfilter enthält mehrere Steuerelemente zur direkten Bearbeitung allgemeiner Bildeigenschaften, z. B. Helligkeit, Kontraste, Sättigung und Farbton. Zusätzlich können benutzerdefinierte Farbmatrixwerte angegeben werden.

• Der Convolution-Filter, der nur bei Verwendung von ActionScript verfügbar ist, enthält mehrere häufig verwendete Convolution-Matrixwerte. Zudem können benutzerdefinierte Werte angegeben werden. Zwar kann bei der ConvolutionFilter-Klasse eine Matrix beliebiger Größe verwendet werden, in der Anwendung „Filter Workbench“ wird jedoch eine feste 3x3-Matrix verwendet (die am häufigsten verwendete Filtergröße).

• Der Verschiebungsmatrixfilter und der Shader-Filter, die nur in ActionScript verfügbar sind, stehen in der Anwendung „Filter Workbench“ nicht zur Verfügung.

Die Anwendung „Filter Workbench“ enthält für jeden der verfügbaren Filter je eine Klasse, die im jeweiligen Bedienfeld zum Erstellen der Filterinstanz verwendet wird. Wenn ein Benutzer einen Filter auswählt, wird mit dem ActionScript-Code, der dem Bedienfeld für den Filter zugeordnet ist, eine Instanz der entsprechenden Factory-Klasse für Filter erstellt. (Diese Klassen werden als Factory-Klassen bezeichnet, da sie zum Erstellen von Instanzen anderer Objekte dienen, ähnlich einer Fabrik (engl. „factory“), in der einzelne Produkte hergestellt werden.)

Bei jeder Änderung eines Eigenschaftswerts im Bedienfeld wird durch den Code des Bedienfelds die entsprechende Methode der Factory-Klasse aufgerufen. Jede Factory-Klasse enthält spezifische Methoden, mit denen im Bedienfeld die entsprechende Filterinstanz erstellt wird. Wenn der Benutzer beispielsweise den Weichzeichnen-Filter auswählt, wird in der Anwendung eine BlurFactory-Instanz erstellt. Die BlurFactory-Klasse enthält eine modifyFilter() -Methode, die drei Parameter akzeptiert: blurX , blurY und quality , die zusammen für die Erstellung der gewünschten BlurFilter-Instanz verwendet werden:

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)); 
}

Wenn der Benutzer dagegen den Convolution-Filter auswählt, der eine viel größere Flexibilität zulässt, ist eine größere Anzahl festzulegender Eigenschaften verfügbar. In der ConvolutionFactory-Klasse wird der folgende Code aufgerufen, wenn der Benutzer im Bedienfeld einen anderen Wert auswählt:

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)); 
}

Bei jeder Änderung der Werte für den Filter löst das Factory-Objekt ein Event.CHANGE -Ereignis aus, um die Listener zu benachrichtigen, dass die Werte des Filters geändert wurden. Die FilterWorkbenchController-Klasse, mit der Filter auf den zu filternden Inhalt angewendet werden, überwacht das Eintreten dieses Ereignisses und ermittelt den Zeitpunkt, zu dem eine neue Kopie des Filters abgerufen und der Filter erneut auf den zu filternden Inhalt angewendet werden muss.

An die FilterWorkbenchController-Klasse müssen nicht die spezifischen Einzelheiten der einzelnen Factory-Klassen für Filter übergeben werden. Es muss lediglich angegeben werden, dass ein Filter geändert wurde, und die Klasse muss auf eine Kopie des Filters zugreifen können. Dazu enthält die Anwendung die IFilterFactory-Schnittstelle, über die das erforderliche Verhalten der Factory-Klassen für Filter definiert wird, sodass die entsprechenden Vorgänge durch die FilterWorkbenchController-Instanz durchgeführt werden können. Die IFilterFactory-Schnittstelle definiert die getFilter() -Methode, die in der FilterWorkbenchController-Klasse verwendet wird:

function getFilter():BitmapFilter;

Beachten Sie, dass in der Definition der getFilter() -Methode angegeben ist, dass kein bestimmter Filtertyp, sondern eine BitmapFilter-Instanz zurückgegeben wird. Mit der BitmapFilter-Klasse wird kein bestimmter Filtertyp definiert. Bei der BitmapFilter-Klasse handelt es sich vielmehr um die Basisklasse, die allen Filterklassen zugrunde liegt. Jede Factory-Klasse für Filter definiert eine spezifische Implementierung der getFilter() -Methode, in der ein Verweis auf das durch die Klasse erstellte Filterobjekt zurückgegeben wird. Es folgt der Quellcode der ConvolutionFactory-Klasse in gekürzter Form:

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

In der Implementierung der getFilter() -Methode durch die ConvolutionFactory-Klasse wird eine ConvolutionFilter-Instanz zurückgegeben, auch wenn dieser Instanztyp für Objekte, die getFilter() aufrufen, u. U. unbekannt ist. Entsprechend der Definition der getFilter() -Methode durch die ConvolutionFactory-Klasse kann eine beliebige BitmapFilter-Instanz zurückgegeben werden, die eine Instanz einer der ActionScript-Filterklassen ist.

Wie bereits erläutert wurde, wird in der Anwendung „Filter Workbench“ eine Instanz der FilterWorkbenchController-Klasse (im Folgenden als „Controller-Instanz“ bezeichnet) verwendet, um Filter auf das ausgewählte Anzeigeobjekt anzuwenden. Damit über die Controller-Instanz Filter angewendet werden können, muss zunächst festgelegt werden, auf welches Bild oder welchen grafischen Inhalt der entsprechende Filter angewendet werden soll. Wenn der Benutzer ein Bild auswählt, wird in der Anwendung die setFilterTarget() -Methode der FilterWorkbenchController-Klasse aufgerufen und eine der in der ImageType-Klasse definierten Konstanten übergeben:

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

Anhand dieser Informationen wird die angegebene Datei durch die Controller-Instanz geladen und nach dem Laden in der Instanzvariable _currentTarget gespeichert:

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

Wenn der Benutzer einen Filter auswählt, wird die setFilter() -Methode der Controller-Instanz mit einem Verweis auf das relevante Factory-Objekt für Filter aufgerufen, das dann in der Instanzvariable _filterFactory gespeichert wird.

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

Wie zuvor beschrieben, erkennt die Controller-Instanz den spezifischen Datentyp der angegebenen Factory-Instanz für Filter nicht. Sie erkennt lediglich, dass das Objekt die IFilterFactory-Instanz implementiert, d. h., dass sie über eine getFilter() -Methode verfügt und ein change -Ereignis ( Event.CHANGE ) auslöst, wenn der Filter geändert wird.

Wenn der Benutzer die Eigenschaften eines Filters im Bedienfeld für den Filter ändert, erkennt die Controller-Instanz die Änderung des Filters durch das change -Ereignis der Factory-Klasse für Filter, bei dem die filterChange() -Methode der Controller-Instanz aufgerufen wird. Diese Methode ruft wiederum die applyTemporaryFilter() -Methode auf:

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(); 
}

Das Anwenden des Filters auf das Anzeigeobjekt erfolgt in der applyTemporaryFilter() -Methode. Die Controller-Instanz ruft zunächst einen Verweis auf das Filterobjekt ab, indem sie die getFilter() -Methode der Factory-Klasse für Filter aufruft.

var currentFilter:BitmapFilter = _filterFactory.getFilter();

Die Controller-Instanz verfügt über die Array-Instanzvariable _currentFilters , in der alle Filter gespeichert sind, die auf das Anzeigeobjekt angewendet wurden. Der neu aktualisierte Filter wird dann diesem Array hinzugefügt:

_currentFilters.push(currentFilter);

Anschließend wird das Filter-Array der filters -Eigenschaft des Anzeigeobjekts zugewiesen, mit der die Filter dann auf das Bild angewendet werden:

_currentTarget.filters = _currentFilters;

Da der zuletzt hinzugefügte Filter bis zum endgültigen Anwenden nur getestet wird, darf er nicht dauerhaft auf das Anzeigeobjekt angewendet werden. Deshalb wird er wieder aus dem _currentFilters -Array entfernt:

_currentFilters.pop();

Das Entfernen des Filters aus dem Array wirkt sich nicht auf das gefilterte Anzeigeobjekt aus, da im Anzeigeobjekt eine Kopie des Filter-Arrays erstellt wird, wenn es der filters -Eigenschaft zugewiesen wird. Dieses interne Array wird dann anstelle des Original-Arrays verwendet. Aus diesem Grund wirken sich Änderungen, die am Filter-Array vorgenommen werden, nur dann auf das Anzeigeobjekt aus, wenn das Array erneut der filters -Eigenschaft des Anzeigeobjekts zugewiesen wird.