Görüntüleme nesnesi örneği: SpriteArranger

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

SpriteArranger örnek uygulaması, ActionScript 3.0'ı Öğrenme bölümünde ayrıca açıklanan GeometricShapes örnek uygulamasına göre geliştirilmiştir.

SpriteArranger örnek uygulaması, görüntüleme nesneleriyle ilgili birçok kavramı gösterir:

  • Görüntüleme nesnesi sınıflarını genişletme

  • Görüntüleme listesine nesneler ekleme

  • Görüntüleme nesnelerini katmanlama ve görüntüleme nesnesi kaplarıyla çalışma

  • Görüntüleme nesnesi olaylarını yanıtlama

  • Görüntüleme nesnelerinin özelliklerini ve yöntemlerini kullanma

Bu örneğin uygulama dosyalarını edinmek için bkz. www.adobe.com/go/learn_programmingAS3samples_flash_tr. SpriteArranger uygulama dosyalarını Examples/SpriteArranger klasörü içinde bulabilirsiniz. Uygulama aşağıdaki dosyaları içerir:

File

Açıklama

SpriteArranger.mxml

veya

SpriteArranger.fla

Flash (FLA) veya Flex (MXML) içindeki ana uygulama dosyası.

com/example/programmingas3/SpriteArranger/CircleSprite.as

Ekranda daire oluşturan bir Sprite nesnesi türünü tanımlayan bir sınıf.

com/example/programmingas3/SpriteArranger/DrawingCanvas.as

GeometricSprite nesnelerini içeren bir görüntüleme nesnesi kabı niteliğindeki tuvali tanımlayan bir sınıf.

com/example/programmingas3/SpriteArranger/SquareSprite.as

Ekranda kare oluşturan bir Sprite nesnesi türünü tanımlayan bir sınıf.

com/example/programmingas3/SpriteArranger/TriangleSprite.as

Ekranda üçgen oluşturan bir Sprite nesnesi türünü tanımlayan bir sınıf.

com/example/programmingas3/SpriteArranger/GeometricSprite.as

Ekrandaki bir şekli tanımlamak için kullanılan Sprite nesnesini genişleten bir sınıf. CircleSprite, SquareSprit ve TriangleSprite öğelerinin her biri bu sınıfı genişletir.

com/example/programmingas3/geometricshapes/IGeometricShape.as

Tüm geometrik şekil sınıfları tarafından uygulanacak yöntemlerin tanımlanmasına yönelik temel arabirim.

com/example/programmingas3/geometricshapes/IPolygon.as

Birden çok kenarı olan geometrik şekil sınıfları tarafından uygulanacak yöntemleri tanımlayan bir arabirim.

com/example/programmingas3/geometricshapes/RegularPolygon.as

Şeklin merkezi etrafında simetrik olarak konumlandırılmış eşit uzunlukta kenarlara sahip bir geometrik şekil türü.

com/example/programmingas3/geometricshapes/Circle.as

Bir daireyi tanımlayan geometrik şekil türü.

com/example/programmingas3/geometricshapes/EquilateralTriangle.as

Eşit kenar bir üçgeni tanımlayan bir RegularPolygon alt sınıfı.

com/example/programmingas3/geometricshapes/Square.as

Kareyi tanımlayan bir RegularPolygon alt sınıfı.

com/example/programmingas3/geometricshapes/GeometricShapeFactory.as

Belirli bir tür ve boyutta şekiller oluşturulması için "fabrika yöntemini" içeren bir sınıf.

SpriteArranger Sınıflarını Tanımlama

SpriteArranger uygulaması, kullanıcının ekrandaki "tuvale" çeşitli görüntüleme nesneleri eklemesine olanak sağlar.

DrawingCanvas sınıfı, kullanıcının, üzerine ekran şekilleri ekleyebileceği bir görüntüleme nesnesi kabı türü olan bir çizim alanı ekler. Bu ekran şekilleri, GeometricSprite sınıfının alt sınıflarından birinin örnekleridir.

DrawingCanvas sınıfı

Flex'te, Container nesnesine eklenen tüm alt görüntüleme nesnelerinin, mx.core.UIComponent sınıfının alt öğeleri olan bir sınıfa ait olması gerekir. Bu uygulama, SpriteArranger.mxml dosyasındaki MXML kodunda tanımlandığı gibi, DrawingCanvas sınıfının bir örneğini mx.containers.VBox nesnesinin bir alt öğesi olarak ekler. Bu miras alma işlemi, DrawingCanvas sınıfı bildiriminde şu şekilde tanımlanır:

public class DrawingCanvas extends UIComponent

UIComponent sınıfı, DisplayObject, DisplayObjectContainer ve Sprite sınıflarından miras alır ve DrawingCanvas sınıfındaki kod, bu sınıfların yöntemlerini ve özelliklerini kullanır.

DrawingCanvas sınıfı Sprite sınıfını genişletir ve bu miras, DrawingCanvas sınıfı bildiriminde şu şekilde tanımlanır:

public class DrawingCanvas extends Sprite

Sprite sınıfı, DisplayObjectContainer ve DisplayObject sınıflarının bir alt sınıfıdır ve DrawingCanvas sınıfı, bu sınıfların yöntemlerini ve özelliklerini kullanır.

DrawingCanvas() yapıcı yöntemi, bir Rectangle nesnesi olan bounds öğesini ayarlar ve bu özellik daha sonra tuvalin anahattının çiziminde kullanılır. Ardından, şu şekilde initCanvas() yöntemini çağırır:

this.bounds = new Rectangle(0, 0, w, h); 
initCanvas(fillColor, lineColor);

Aşağıdaki örnekte de gösterildiği gibi, initCanvas() yöntemi, argüman olarak yapıcı işlevine iletilen DrawingCanvas nesnesinin çeşitli özelliklerini tanımlar:

this.lineColor = lineColor; 
this.fillColor = fillColor; 
this.width = 500; 
this.height = 200;

Daha sonra initCanvas() yöntemi, DrawingCanvas sınıfının graphics özelliğini kullanarak tuval çizen drawBounds() yöntemini çağırır. graphics özelliği, Shape sınıfından miras alınır.

this.graphics.clear();         
this.graphics.lineStyle(1.0, this.lineColor, 1.0); 
this.graphics.beginFill(this.fillColor, 1.0); 
this.graphics.drawRect(bounds.left - 1,  
                        bounds.top - 1,  
                        bounds.width + 2, 
                        bounds.height + 2); 
this.graphics.endFill();

DrawingCanvas sınıfının şu ek yöntemleri, uygulamayla etkileşime bağlı olarak çağrılır:

GeometricSprite sınıfı ve alt sınıfları

Kullanıcının tuvale ekleyebildiği her görüntüleme nesnesi, GeometricSprite sınıfının şu alt sınıflarından birinin örneğidir:

  • CircleSprite

  • SquareSprite

  • TriangleSprite

GeometricSprite sınıfı, flash.display.Sprite sınıfını genişletir:

public class GeometricSprite extends Sprite

GeometricSprite sınıfı, tüm GeometricSprite nesneleri için ortak olan bir çok özelliği içerir. Bunlar, işleve iletilen parametreler esas alınarak yapıcı işlevinde ayarlanır. Örneğin:

this.size = size; 
this.lineColor = lColor; 
this.fillColor = fColor;

GeometricSprite sınıfının geometricShape özelliği, şeklin matematiksel özelliklerini tanımlayıp görsel özelliklerini tanımlamayan bir IGeometricShape arabirimini tanımlar. IGeometricShape arabirimini uygulayan arabirimler, ActionScript 3.0'ı Öğrenme bölümünde açıklanan GeometricShapes örnek uygulamasında tanımlanmıştır.

GeometricSprite sınıfı, GeometricSprite öğesinin her bir alt sınıfındaki geçersiz kılma tanımlarında daha fazla işlenen drawShape() yöntemini tanımlar. Daha fazla bilgi için, ilerleyen bölümlerde bkz. "Tuvale görüntüleme nesneleri ekleme".

GeometricSprite sınıfı ayrıca şu yöntemleri sağlar:

Tuvale görüntüleme nesneleri ekleme

Kullanıcı Şekil Ekle düğmesini tıklattığında, uygulama, DrawingCanvas sınıfının addShape() yöntemini çağırır. Aşağıdaki örnekte gösterildiği gibi, GeometricSprite alt sınıflarından birinin uygun yapıcı işlevini çağırarak yeni bir GeometricSprite öğesini başlatır:

public function addShape(shapeName:String, len:Number):void 
{ 
    var newShape:GeometricSprite; 
    switch (shapeName) 
    { 
        case "Triangle": 
            newShape = new TriangleSprite(len); 
            break; 
 
        case "Square": 
            newShape = new SquareSprite(len); 
            break; 
 
        case "Circle": 
            newShape = new CircleSprite(len); 
            break; 
    } 
    newShape.alpha = 0.8; 
    this.addChild(newShape); 
}

Her yapıcı yöntemi, drawShape() yöntemini çağırır, bu da uygun vektör grafiğini çizmek için sınıfın graphics özelliğini (Sprite sınıfından miras alınan) kullanır. Örneğin, CircleSprite sınıfının drawShape() yöntemi şu kodu içerir:

this.graphics.clear(); 
this.graphics.lineStyle(1.0, this.lineColor, 1.0); 
this.graphics.beginFill(this.fillColor, 1.0); 
var radius:Number = this.size / 2; 
this.graphics.drawCircle(radius, radius, radius);

addShape() işlevinin ikinci satırı ile sonuncu satırı arasındaki satırlar, görüntüleme nesnesinin alpha özelliğini (DisplayObject sınıfından miras alınan) ayarlar, böylece tuvale eklenen her görüntüleme nesnesi biraz daha saydam olduğundan kullanıcı bunun ardındaki nesneleri görebilir.

addChild() yönteminin son satırı, zaten görüntüleme listesinde bulunan DrawingCanvas sınıfı örneğinin alt öğe listesine yeni görüntüleme nesnesini ekler. Bu da, yeni görüntüleme nesnesinin Sahne Alanı'nda görüntülenmesini sağlar.

Uygulamanın arabirimi iki metin alanı içerir: selectedSpriteTxt ve outputTxt. Bu metin alanlarının metin özellikleri, tuvale eklenmiş veya kullanıcı tarafından seçilmiş olan GeometricSprite nesneleri hakkındaki bilgilerle güncellenir. GeometricSprite sınıfı, aşağıdaki gibi, toString() yöntemini geçersiz kılarak bu bilgi raporlama görevini işler:

public override function toString():String 
{ 
    return this.shapeType + " of size " + this.size + " at " + this.x + ", " + this.y; 
}

shapeType özelliği, her bir GeometricSprite alt sınıfının yapıcı yönteminde uygun değere ayarlanır. Örneğin, toString() yöntemi, DrawingCanvas örneğine henüz eklenmiş olan bir CircleSprite örneği için şu değeri döndürebilir:

Circle of size 50 at 0, 0

DrawingCanvas sınıfının describeChildren() yöntemi, for döngüsünün sınırını ayarlamak için numChildren özelliğini (DisplayObjectContainer sınıfından miras alınan) kullanarak tuvalin alt öğe listesi üzerinden döngü oluşturur. Bu, aşağıdaki gibi, alt öğelerin her birini listeleyen bir dize oluşturur:

var desc:String = ""; 
var child:DisplayObject; 
for (var i:int=0; i < this.numChildren; i++) 
{ 
child = this.getChildAt(i); 
desc += i + ": " + child + '\n'; 
}

Sonuçta elde edilen dize, outputTxtmetin alanının text özelliğini ayarlamak için kullanılır.

Görüntüleme nesnelerini tıklatıp sürükleme

Kullanıcı bir GeometricSprite örneğini tıklattığında, uygulama, onMouseDown() olay işleyicisini çağırır. Aşağıda gösterildiği gibi, bu olay işleyicisi, GeometricSprite sınıfının yapıcı işlevindeki fare basılı olaylarını dinleyecek şekilde ayarlanmıştır:

this.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown);

onMouseDown() yöntemi daha sonra GeometricSprite nesnesinin showSelected() yöntemini çağırır. Bu yöntem nesne için ilk defa çağrılıyorsa, yöntem selectionIndicator adında yeni bir Shape nesnesi oluşturur ve aşağıdaki gibi kırmızı bir vurgu dikdörtgenini çizmek için Shape nesnesinin graphics özelliğini kullanır:

this.selectionIndicator = new Shape(); 
this.selectionIndicator.graphics.lineStyle(1.0, 0xFF0000, 1.0); 
this.selectionIndicator.graphics.drawRect(-1, -1, this.size + 1, this.size + 1); 
this.addChild(this.selectionIndicator);

onMouseDown() yöntemi ilk defa çağrılmıyorsa, aşağıdaki gibi, yöntem, selectionIndicator şeklinin visible özelliğini (DisplayObject sınıfından miras alınan), ayarlar:

this.selectionIndicator.visible = true;

hideSelected() yöntemi, önceden seçilen nesnenin visible özelliğini false değerine ayarlayarak bu nesnenin selectionIndicator şeklini gizler.

onMouseDown() olay işleyicisi yöntemi ayrıca şu kodu içeren startDrag() yöntemini (Sprite sınıfından miras alınan) çağırır:

var boundsRect:Rectangle = this.parent.getRect(this.parent); 
boundsRect.width -= this.size; 
boundsRect.height -= this.size; 
this.startDrag(false, boundsRect);

Bu, boundsRect dikdörtgeni tarafından ayarlanan sınırlar içinde kullanıcının seçili nesneyi tuval etrafında sürüklemesine olanak sağlar.

Kullanıcı fareyi serbest bıraktığında, mouseUp olayı gönderilir. DrawingCanvas öğesinin yapıcı yöntemi, şu olay dinleyicisini ayarlar:

this.addEventListener(MouseEvent.MOUSE_UP, onMouseUp);

Bu olay dinleyicisi, GeometricSprite nesneleri için değil, DrawingCanvas nesnesi için ayarlanır. Bunun nedeni, GeometricSprite nesnesi sürüklenirken, fare serbest bırakıldığında bu nesnenin başka bir görüntüleme nesnesinin (başka bir GeometricSprite nesnesi) arkasında kalabilmesidir. Ön plandaki görüntüleme nesnesi, fare basılı olmama olayını alır ancak kullanıcının sürüklemekte olduğu görüntüleme nesnesi bu olayı almaz. DrawingCanvas nesnesine dinleyici eklenmesi, olayın her zaman işlenmesini sağlar.

onMouseUp() yöntemi, GeometricSprite nesnesinin onMouseUp() yöntemini çağırır, bu da daha sonra GeometricSprite nesnesinin stopDrag() yöntemini çağırır.

Görüntüleme nesnesi katmanlamasını yeniden düzenleme

Uygulamanın kullanıcı arabirimi, Geriye Taşı, Aşağı Taşı, Yukarı Taşı ve Öne Taşı etiketli düğmeleri içerir. Kullanıcı bu düğmelerden birini tıklattığında, uygulama DrawingCanvas sınıfının karşılık gelen yöntemini çağırır: moveToBack(), moveDown(), moveUp() veya moveToFront(). Örneğin, moveToBack() yöntemi şu kodu içerir:

public function moveToBack(shape:GeometricSprite):void 
{ 
    var index:int = this.getChildIndex(shape); 
    if (index > 0) 
    { 
        this.setChildIndex(shape, 0); 
    } 
}

Bu yöntem, DrawingCanvas örneğinin (this) alt öğe listesinde 0 dizin konumuna görüntüleme nesnesini yerleştirmesi için setChildIndex() yöntemini (DisplayObjectContainer sınıfından miras alınan) kullanır.

moveDown() yöntemi benzer şekilde çalışır, tek farkı, DrawingCanvas örneğinin alt öğe listesinde görüntüleme nesnesinin dizin konumunu 1'er 1'er azaltmasıdır:

public function moveDown(shape:GeometricSprite):void 
{ 
    var index:int = this.getChildIndex(shape); 
    if (index > 0) 
    { 
        this.setChildIndex(shape, index - 1); 
    } 
}

moveUp() ve moveToFront() yöntemleri, moveToBack() ve moveDown() yöntemlerine benzer şekilde çalışır.