Görüntüleme nesnelerini maskeleme

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

Başka bir görüntüleme nesnesinin içeriklerinin görünebildiği bir delik oluşturmak için, bir görüntüleme nesnesini maske olarak kullanabilirsiniz.

Maskeyi tanımlama

Bir görüntüleme nesnesinin başka bir görüntüleme nesnesi için maske olacağını belirtmek üzere, maske nesnesini, maskelenecek görüntüleme nesnesinin mask özelliği olarak ayarlayın:

// Make the object maskSprite be a mask for the object mySprite. 
mySprite.mask = maskSprite;

Maskelenen görüntüleme nesnesi, görüntüleme nesnesinin maske olarak hareket eden tüm opak (saydam olmayan) alanları altında gösterilir. Örneğin, şu kod, 100 x 100 piksel kare kırmızı içeren bir Shape örneği ve 25 piksel yarıçapında mavi bir daire içeren Sprite örneği oluşturur. Daire tıklatıldığında, karenin maskesi olarak ayarlanır, böylece karenin gösterilen tek bölümü, dairenin düz bölümü tarafından kaplanan kısımdır. Başka bir deyişle, yalnızca kırmızı daire görünebilir olur.

// This code assumes it's being run within a display object container 
// such as a MovieClip or Sprite instance. 
 
import flash.display.Shape; 
 
// Draw a square and add it to the display list. 
var square:Shape = new Shape(); 
square.graphics.lineStyle(1, 0x000000); 
square.graphics.beginFill(0xff0000); 
square.graphics.drawRect(0, 0, 100, 100); 
square.graphics.endFill(); 
this.addChild(square); 
 
// Draw a circle and add it to the display list. 
var circle:Sprite = new Sprite(); 
circle.graphics.lineStyle(1, 0x000000); 
circle.graphics.beginFill(0x0000ff); 
circle.graphics.drawCircle(25, 25, 25); 
circle.graphics.endFill(); 
this.addChild(circle); 
 
function maskSquare(event:MouseEvent):void 
{ 
    square.mask = circle; 
    circle.removeEventListener(MouseEvent.CLICK, maskSquare); 
} 
 
circle.addEventListener(MouseEvent.CLICK, maskSquare);

Maske olarak hareket eden görüntüleme nesnesi sürüklenebilir, dinamik olarak yeniden boyutlandırılabilir, tek bir maske içinde ayrı şekiller kullanabilir ve bu nesneye animasyon uygulanabilir. Maske görüntüleme nesnesinin mutlaka görüntüleme listesine eklenmesi gerekmez. Ancak, Sahne Alanı ölçeklendiğinde maske nesnesinin ölçeklenmesini istiyorsanız veya maske ile kullanıcı etkileşimini (örn. kullanıcı tarafından denetlenen sürükleme ve yeniden boyutlandırma) etkinleştirmek istiyorsanız, maske nesnesinin görüntüleme listesine eklenmesi gerekir. Maske nesnesi, görüntüleme listesine eklendiği sürece, görüntüleme nesnelerinin gerçek z dizininin (önden arkaya sıralama) önemi yoktur. (Maske nesnesi, maske olarak görüntülenmek dışında ekranda görüntülenmez.) Maske nesnesi birden çok kare içeren bir MovieClip örneğiyse, zaman çizelgesinde tüm kareleri oynatır; maske nesnesi maske görevi görmeseydi de bu durum aynı olacaktır. mask özelliğini null değerine ayarlayarak bir maskeyi kaldırabilirsiniz:

// remove the mask from mySprite 
mySprite.mask = null;

Bir maskeyi, başka bir maskeyi maskelemek için kullanamazsınız. Bir maske görüntüleme nesnesinin alpha özelliğini ayarlayamazsınız. Maske olarak kullanılan bir görüntüleme nesnesinde yalnızca dolgular kullanılır; konturlar yok sayılır.

AIR 2

Maskeli görüntüleme nesnesi cacheAsBitmap ve cacheAsBitmapMatrix özellikleri kullanılarak önbelleğe alınmışsa maske, maskeli görüntüleme nesnesinin alt öğesi olmalıdır. Benzer şekilde, maskelenmiş görüntüleme nesnesi önbelleğe alınmış bir görüntüleme nesnesi kabının alt öğesiyse, hem maske hem de görüntüleme nesnesi o kabın alt öğesi olmalıdır. Maskelenmiş nesne birden fazla önbelleğe alınmış görüntüleme nesnesi kabının alt öğesiyse, maske görüntüleme listesindeki maskelenmiş nesneye en yakın önbelleğe alınmış kabın alt öğesi olmalıdır.

Aygıt fontlarını maskeleme hakkında

Bir aygıt fontunda ayarlanan metni maskelemek için görüntüleme nesnesi kullanabilirsiniz. Bir aygıt fontunda ayarlanan metni maskelemek için görüntüleme nesnesi kullandığınızda, maskeleme şekli olarak maskenin dikdörtgen sınırlama kutusu kullanılır. Başka bir deyişle, aygıt font metni için dikdörtgen olmayan bir görüntüleme nesnesi maskesi oluşturursanız, SWF dosyasında görüntülenen maske, maskenin kendi şekli değil, maskenin dikdörtgen sınırlama kutusunun şeklidir.

Alfa kanalı maskeleme

Alfa kanalı maskeleme, burada gösterildiği gibi hem maske hem de maskelenen görüntüleme nesneleri bitmap önbelleğe almayı kullandığında desteklenir:

// maskShape is a Shape instance which includes a gradient fill. 
mySprite.cacheAsBitmap = true; 
maskShape.cacheAsBitmap = true; 
mySprite.mask = maskShape;

Örneğin, alfa kanalı maskelemenin bir uygulaması, maskelenen görüntüleme nesnesine uygulanan bir filtreden bağımsız olarak maske nesnesinde bir filtre kullanılmasıdır.

Aşağıdaki örnekte, Sahne Alanı'na harici bir görüntü dosyası yüklenir. Bu görüntü (daha net olmak gerekirse, yüklenen Loader örneği), maskelenen görüntüleme nesnesidir. Görüntünün üzerine bir oval degrade çizilir (kenarlardaki saydama ortadan düz siyah soldurma); bu alfa maskesi olacaktır. Her iki görüntüleme nesnesinde bitmap önbelleğe alma etkindir. Oval, görüntü için bir maske olarak ayarlanır ve daha sonra sürüklenebilir duruma getirilir.

// This code assumes it's being run within a display object container 
// such as a MovieClip or Sprite instance. 
 
import flash.display.GradientType; 
import flash.display.Loader; 
import flash.display.Sprite; 
import flash.geom.Matrix; 
import flash.net.URLRequest; 
 
// Load an image and add it to the display list. 
var loader:Loader = new Loader(); 
var url:URLRequest = new URLRequest("http://www.helpexamples.com/flash/images/image1.jpg"); 
loader.load(url); 
this.addChild(loader); 
 
// Create a Sprite. 
var oval:Sprite = new Sprite(); 
// Draw a gradient oval. 
var colors:Array = [0x000000, 0x000000]; 
var alphas:Array = [1, 0]; 
var ratios:Array = [0, 255]; 
var matrix:Matrix = new Matrix(); 
matrix.createGradientBox(200, 100, 0, -100, -50); 
oval.graphics.beginGradientFill(GradientType.RADIAL, 
                                colors, 
                                alphas, 
                                ratios, 
                                matrix); 
oval.graphics.drawEllipse(-100, -50, 200, 100); 
oval.graphics.endFill(); 
// add the Sprite to the display list 
this.addChild(oval); 
 
// Set cacheAsBitmap = true for both display objects. 
loader.cacheAsBitmap = true; 
oval.cacheAsBitmap = true; 
// Set the oval as the mask for the loader (and its child, the loaded image) 
loader.mask = oval; 
 
// Make the oval draggable. 
oval.startDrag(true);