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,
outputTxt
metin 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.
|
|
|