Görüntüleme nesnelerine filtre uygulama örneği: Filter Workbench

Flash Player 9 ve üstü, Adobe AIR 1.0 ve üstü

Filter Workbench, görüntülere ve başka görsel içeriklere farklı filtreler uygulamak ve ActionScript'te aynı efekti oluşturmak için kullanılabilecek sonuç kodunu görmek için bir kullanıcı arabirimi sağlar. Filtrelerle deneme yapılmasına yönelik bir araç sağlamanın yanı sıra, bu uygulama şu teknikleri de gösterir:

  • Çeşitli filtrelerin örneklerini oluşturma

  • Bir görüntüleme nesnesine birden çok filtre uygulama

Bu örneğin uygulama dosyalarını edinmek için bkz. www.adobe.com/go/learn_programmingAS3samples_flash_tr. Filter Workbench uygulama dosyaları, Samples/FilterWorkbench klasöründe bulunabilir. Uygulama aşağıdaki dosyaları içerir:

File

Açıklama

com/example/programmingas3/filterWorkbench/FilterWorkbenchController.as

Filtrelerin uygulandığı içeriği değiştirme ve içeriğe filtreler uygulama gibi uygulamanın ana işlevlerini sağlayan sınıf.

com/example/programmingas3/filterWorkbench/IFilterFactory.as

Filtre fabrikası sınıflarının her biri tarafından uygulanan ortak yöntemleri tanımlayan arabirim. Bu arabirim, FilterWorkbenchController sınıfının, ayrı ayrı filtre fabrikası sınıflarıyla etkileşim kurmak için kullandığı ortak işlevleri tanımlar.

com/example/programmingas3/filterWorkbench/ klasöründe:

BevelFactory.as

BlurFactory.as

ColorMatrixFactory.as

ConvolutionFactory.as

DropShadowFactory.as

GlowFactory.as

GradientBevelFactory.as

GradientGlowFactory.as

Her biri IFilterFactory arabirimini uygulayan sınıflar kümesi. Bu sınıfların her biri, tek bir filtre türü için değerler oluşturma ve ayarlama işlevlerini sağlar. Uygulamadaki filtre özelliği panelleri, FilterWorkbenchController sınıfının alıp görüntü içeriğine uyguladığı kendi belirli filtrelerinin örneklerini oluşturmak için bu fabrika sınıflarını kullanır.

com/example/programmingas3/filterWorkbench/IFilterPanel.as

Uygulamadaki filtre değerlerini işlemek için kullanılan kullanıcı arabirimi panellerini tanımlayan sınıfların uyguladığı ortak yöntemleri tanımlayan arabirim.

com/example/programmingas3/filterWorkbench/ColorStringFormatter.as

Sayısal renk değerini onaltılık bir String değerine dönüştürme yöntemini içeren yardımcı program sınıfı

com/example/programmingas3/filterWorkbench/GradientColor.as

GradientBevelFilter ve GradientGlowFilter öğesinde her bir renkle ilişkilendirilmiş üç değeri (renk, alfa ve oran) tek bir nesnede birleştirerek bir değer nesnesi görevi gören sınıf

Kullanıcı arabirimi (Flex)

FilterWorkbench.mxml

Uygulamanın kullanıcı arabirimini tanımlayan ana dosya.

flexapp/FilterWorkbench.as

Ana uygulamanın kullanıcı arabirimi için işlevler sağlayan sınıf; bu sınıf, uygulama MXML dosyası için kod arkası sınıfı olarak kullanılır.

flexapp/filterPanels klasöründe:

BevelPanel.mxml

BlurPanel.mxml

ColorMatrixPanel.mxml

ConvolutionPanel.mxml

DropShadowPanel.mxml

GlowPanel.mxml

GradientBevelPanel.mxml

GradientGlowPanel.mxml

Tek bir filtreye yönelik seçenekleri ayarlamak için kullanılan panellerin her biri için işlevler sağlayan MXML bileşenleri kümesi.

flexapp/ImageContainer.as

Ekranda yüklenen görüntü için kap görevi gören bir görüntüleme nesnesi

flexapp/controls/BGColorCellRenderer.as

DataGrid bileşeninde bir hücrenin arka plan rengini değiştirmek için kullanılan özel hücre oluşturucu

flexapp/controls/QualityComboBox.as

Birçok filtre panelinde Kalite ayarı için kullanılabilen birleşik kutuyu tanımlayan özel denetim.

flexapp/controls/TypeComboBox.as

Birçok filtre panelinde Tür ayarı için kullanılabilen birleşik kutuyu tanımlayan özel denetim.

Kullanıcı arabirimi (Flash)

FilterWorkbench.fla

Uygulamanın kullanıcı arabirimini tanımlayan ana dosya.

flashapp/FilterWorkbench.as

Ana uygulamanın kullanıcı arabirimi için işlevler sağlayan sınıf; bu sınıf, uygulama FLA dosyası için belge sınıfı olarak kullanılır.

flashapp/filterPanels klasöründe:

BevelPanel.as

BlurPanel.as

ColorMatrixPanel.as

ConvolutionPanel.as

DropShadowPanel.as

GlowPanel.as

GradientBevelPanel.as

GradientGlowPanel.as

Tek bir filtreye yönelik seçenekleri ayarlamak için kullanılan panellerin her biri için işlevler sağlayan sınıflar kümesi.

Her bir sınıf için ayrıca ana uygulama FLA dosyasının kütüphanesinde, adı sınıfın adıyla eşleşen (örneğin, “BlurPanel” sembolü, BlurPanel.as dosyasında tanımlı sınıfa bağlıdır), ilişkilendirilmiş bir MovieClip sembolü vardır. Kullanıcı arabirimini oluşturan bileşenler, bu semboller içinde konumlandırılıp adlandırılır.

flashapp/ImageContainer.as

Ekranda yüklenen görüntü için kap görevi gören bir görüntüleme nesnesi

flashapp/BGColorCellRenderer.as

DataGrid bileşeninde bir hücrenin arka plan rengini değiştirmek için kullanılan özel hücre oluşturucu

flashapp/ButtonCellRenderer.as

DataGrid bileşeninde bir hücreye düğme bileşeni eklemek için kullanılan özel hücre oluşturucu

Filtre uygulanan görüntü içeriği

com/example/programmingas3/filterWorkbench/ImageType.as

Bu sınıf, uygulamanın yüklenebileceği ve filtrelerin uygulanacağı tek bir görüntü dosyasının türünü ve URL'sini içeren bir değer nesnesi görevini görür. Bu sınıf ayrıca kullanılabilir gerçek görüntü dosyalarını temsil eden bir sabitler kümesini de içerir.

images/sampleAnimation.swf,

images/sampleImage1.jpg,

images/sampleImage2.jpg

Uygulamada filtrelerin uygulandığı görüntüler ve diğer görsel içerikler.

ActionScript filtreleriyle denemeler yapma

Filter Workbench uygulaması, çeşitli filtre efektleriyle deneme yapmanıza ve o efekt için uygun ActionScript kodunu oluşturmanıza yardımcı olmak üzere tasarlanmıştır. Bu uygulama, bitmap görüntüleri ve Flash ile oluşturulan animasyon gibi görsel içerikler barındıran üç farklı dosya arasından seçim yapmanıza ve seçilen görüntüye tek başına veya diğer filtrelerle birilikte sekiz farklı ActionScript filtresi uygulamanıza olanak sağlar. Uygulama şu filtreleri içerir:

  • Eğim (flash.filters.BevelFilter)

  • Bulanıklaştırma (flash.filters.BlurFilter)

  • Renk matrisi (flash.filters.ColorMatrixFilter)

  • Evrişim (flash.filters.ConvolutionFilter)

  • Gölge (flash.filters.DropShadowFilter)

  • Işıma (flash.filters.GlowFilter)

  • Degrade eğim (flash.filters.GradientBevelFilter)

  • Degrade ışıma (flash.filters.GradientGlowFilter)

Kullanıcı bir görüntüyü ve o görüntüye uygulanacak bir filtreyi seçtikten sonra, uygulama, seçilen filtrenin belirli özelliklerinin ayarlanmasına yönelik denetimlerin bulunduğu bir paneli görüntüler. Örneğin, aşağıdaki görüntüde, Eğim filtresi seçilmiş uygulama gösterilmektedir:

Kullanıcı filtre özelliklerini ayarladıkça, önizleme de gerçek zamanlı olarak güncellenir. Ayrıca kullanıcı tek bir filtreyi özelleştirip Uygula düğmesini tıklattıktan sonra başka bir filtreyi özelleştirip Uygula düğmesini tıklatarak birden çok filtre uygulayabilir.

Uygulamanın filtre panellerinde birkaç yeni özellik ve sınırlama vardır:

  • Renk matrisi filtresi, parlaklık, kontrast, doygunluk ve ton gibi yaygın görüntü özelliklerinin doğrudan işlenmesine yönelik denetimler kümesi içerir. Ayrıca özel renk matrisi değerleri de belirtilebilir.

  • Yalnızca ActionScript ile kullanılabilen evrişim filtresi, yaygın olarak kullanılan evrişim matrisi değerleri kümesini içerir veya özel değerler de belirtilebilir. Ancak, ConvolutionFilter sınıfı herhangi boyutta bir matrisi kabul ederken, Filter Workbench uygulaması en yaygın kullanılan filtre boyutu olan sabit 3 x 3 matrisini kullanır.

  • Yalnızca ActionScript'te kullanılabilen öteleme eşleşmesi filtresi ve gölgelendirici filtresi, Filter Workbench uygulamasında kullanılamaz.

Filtre örnekleri oluşturma

Filter Workbench uygulaması, kullanılabilir filtreler için birer tane olmak üzere, filtreler oluşturmak için ayrı ayrı paneller tarafından kullanılan bir sınıflar kümesini içerir. Kullanıcı bir filtreyi seçtiğinde, filtre paneliyle ilişkilendirilmiş ActionScript kodu, uygun filtre fabrikası sınıfının bir örneğini oluşturur. (Gerçek fabrikaların ayrı ayrı ürünler oluşturması gibi, bu sınıfların amacı da diğer nesnelerin örneklerini oluşturmak olduğundan, bu sınıflar fabrika sınıfları olarak bilinir.

Kullanıcı paneldeki bir özellik değerini her değiştirdiğinde, panelin kodu fabrika sınıfındaki uygun yöntemi çağırır. Her fabrika sınıfı, uygun filtre örneğini oluşturmak için panelin kullandığı belirli yöntemleri içerir. Örneğin, kullanıcı Bulanıklaştırma filtresini seçerse, uygulama bir BlurFactory örneği oluşturur. BlurFactory sınıfı, istenen BlurFilter örneğini oluşturmak için birlikte kullanılan şu üç parametreyi kabul eden bir modifyFilter() yöntemini içerir: blurX, blurY ve quality:

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

Diğer yandan, kullanıcı Evrişim filtresini seçerse, bu filtre daha fazla esneklik sağlar ve sonuç olarak denetleme için daha büyük bir özellikler kümesine sahiptir. ConvolutionFactory sınıfında, kullanıcı filtre panelinde farklı bir değeri seçtiğinde şu kod çağrılır:

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

Her iki durumda da, filtre değerleri değiştirildiğinde fabrika nesnesinin, filtrenin değerlerinin değiştiğini dinleyicilere bildirmek için bir Event.CHANGE olayını gönderdiğine dikkat edin. Filtre uygulanmış içeriğe gerçekten filtreleri uygulama işini yapan FilterWorkbenchController sınıfı, ne zaman filtrenin yeni bir kopyasını alması ve ne zaman bunu filtre uygulanmış içeriğe yeniden uygulaması gerektiğinden emin olmak için bu olayı dinler.

FilterWorkbenchController sınıfının, filtre fabrikası sınıfının her birinin ayrıntılarını bilmesi gerekmez—filtrenin değişmiş olduğunu ve filtrenin kopyasına erişebildiğini bilmesi yeterlidir. Bunu desteklemek için uygulama, filtre fabrikası sınıfının sağlaması gereken davranışı tanımlayan IFilterFactory adında bir arabirim içerir, böylece uygulamanın FilterWorkbenchController örneği işini yapabilir. IFilterFactory, FilterWorkbenchController sınıfında kullanılan getFilter() yöntemini tanımlar:

function getFilter():BitmapFilter;

getFilter() arabirim yöntemi tanımının, belirli bir filtre türünü değil bir BitmapFilter örneğini döndürdüğünü belirtmesine dikkat edin. BitmapFilter sınıfı, belirli bir filtre türünü tanımlamaz. Bunu yerine, BitmapFilter öğesi, tüm filtre sınıflarının dayandığı temel sınıftır. Her filtre fabrikası sınıfı, dayandığı filtre nesnesine bir başvuru döndüren getFilter() yönteminin belirli bir uygulamasını tanımlar. Örneğin, aşağıda ConvolutionFactory sınıfının kaynak kodunun kısaltılmış bir sürümü yer almaktadır:

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

getFilter() öğesini çağıran tüm nesnelerin mutlaka bunu bilmesi gerekmese de, ConvolutionFactory sınıfının getFilter() yöntemi uygulamasında bu, ConvolutionFilter örneğini döndürür—ConvolutionFactory öğesinin takip ettiği getFilter() yönteminin tanımına göre bunun herhangi bir ActionScript filtresi sınıfının örneği olabilen bir BitmapFilter örneğini döndürmesi gerekir.

Görüntüleme nesnelerine filtreler uygulama

Daha önce de açıklandığı gibi, Filter Workbench uygulaması, FilterWorkbenchController sınıfının bir örneğini (bundan sonra "denetleyici örneği" olarak ifade edilecektir) kullanır, bu örnek, seçilen görsel nesneye gerçek filtre uygulama görevini gerçekleştirir. Denetleyici örneğinin bir filtreyi uygulayabilmesi için öncelikle filtrenin hangi görüntüye veya görsel içeriğe uygulanması gerektiğini bilmesi gerekir. Kullanıcı bir görüntü seçtiğinde, uygulama, FilterWorkbenchController sınıfında setFilterTarget() yöntemini çağırarak ImageType sınıfında tanımlı sabitlerden birinde iletilir.

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

Denetleyici örneği, bu bilgileri kullanarak belirlenen dosyayı yükler ve yükleme tamamlandıktan sonra dosyayı _currentTarget adında bir örnek değişkeninde saklar:

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

Kullanıcı bir filtre seçtiğinde, uygulama, denetleyici örneğinin setFilter() yöntemini çağırarak denetleyici için _filterFactory adında bir örnek değişkeninde sakladığı ilgili filtre fabrikası nesnesine başvuru sağlar.

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

Önceden açıklandığı gibi, denetleyici örneğinin verilen filtre fabrikası örneğinin belirli veri türünü bilmediğine; yalnızca IFilterFactory örneğini uygulayan nesneyi bildiğine, başka bir deyişle, getFilter() yöntemine sahip olup filtre değiştiğinde change (Event.CHANGE) olayı gönderdiğine dikkat edin.

Kullanıcı, filtrenin panelinde bir filtrenin özelliklerini değiştirdiğinde, denetleyici örneği, denetleyici örneğinin filterChange() yöntemini çağıran filtre fabrikasının change olayıyla bu filtrenin değiştirildiğini fark eder. Daha sonra bu yöntem applyTemporaryFilter() yöntemini çağırır:

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

Görüntüleme nesnesine filtre uygulama işi, applyTemporaryFilter() yönteminin içinde gerçekleşir. İlk olarak denetleyici, filtre fabrikasının getFilter() yöntemini çağırarak filtre nesnesine bir başvuruyu alır.

var currentFilter:BitmapFilter = _filterFactory.getFilter();

Denetleyici örneği, görüntüleme nesnesine uygulanan tüm filtreleri sakladığı, _currentFilters adında bir Array örneği değişkenine sahiptir. Sonraki adım, yeni güncellenen filtrenin bu diziye eklenmesidir:

_currentFilters.push(currentFilter);

Daha sonra kod, filtreleri gerçekten görüntüye uygulayan görüntüleme nesnesinin filters özelliğine filtreler dizisini atar:

_currentTarget.filters = _currentFilters;

Son olarak, bu en son eklenen filtre halen “çalışan” filtre olduğundan, bu filtrenin görüntüleme nesnesine kalıcı olarak uygulanmaması gerekir, bu nedenle de söz konusu filtre _currentFilters dizisinden kaldırılır:

_currentFilters.pop();

Görüntüleme nesnesi, filters özelliğine atandığında filtreler dizisinin bir kopyasını oluşturduğundan ve orijinal dizi yerine bu dahili diziyi kullandığından, bu filtrenin diziden kaldırılması, filtre uygulanan görüntüleme nesnesini etkilemez. Bu nedenle, dizi, görüntüleme nesnesinin filters özelliğine tekrar atanıncaya kadar, filtreler dizisi üzerinde yapılan değişiklikler görüntüleme nesnesini etkilemez.