Gün geçtikçe ya da daha büyük projelerde çalışmaya başladığınız zaman flash içerisinde kullandığınız metotların sizin için yeterli olmadığını, belli bir süre sonra daha yaratıcı ve iyi işler çıkarabilmek için kod bilginizin biraz daha artması gerektiğini düşünmeye başlayabilirsiniz bu noktada gerek yaratıcılık olsun, gerek gereksinim olsun ya da sadece kullandığınız dosyanın boyutlarını düşürmek adına olsun flash içerisindeki çizim apisini kullanabilirsiniz. Tabii sadece merakınızdan dolayı da olabilir.

Çizim apisi (Drawing API) , flash içerisinde dinamik olarak vector tabanlı şekiller çizmenize olanak sağlar. Tabii sadece bununla da kalmayıp yarattığınız çizimler ile animasyon yapabilir, yaratıcılıkta çok iyi iseniz sadece çizim apisini kullanarak bir web sitesi oluşturabilirsiniz.

Grafik Sınıfı (Graphics class)

Her bir Shape, Sprite ve MovieClip objesinin graphics özelliği vardır. Grafik sınıfı düz hatlar, çizgiler, şekiller çizebilmek için metot ve özellikleri taşıyan bir sınıf. Burada vurgulamak istediğim çizim yaparken seçeceğiniz obje (Shape, Sprite, MovieClip).Eğer sadece şekil çizmek istiyorsanız shape seçmenizde fayda var. Shape, Sprite ve Movie Clibe göre daha iyi performans ve daha az yer kaplayacaktır. Ama eğer objenin içine çizim harici bir şeyler eklemek istiyorsanız tercihiniz Sprite olmalıdır. Spriteları timeline ı olmayan movieClipler gibi düşünebilirsiniz. Kısacası;

-sadece çizim ise Shape
-çizim + eklenecek objeler ise Sprite
-çizim + eklenecek objeler + timeline ise Movie Clibi 

kullanmanız tavsiye edilir.

Çizgiler ve Eğriler (Lines and Curves)

Yapılan bütün çizimler düz çizgi ve eğriler ile yapılmaktadır. Her ne kadar şekiller birbirinden farklı olsa da bütün çizimler işin yapılması gereken temel işlemler var.

• İlk olarak çizim stili belirlemek, çizgini kalınlığı rengi, varsa dolgu rengi vb.
• İkinci olarak çizimin başlangıç yeri
• Üçüncü olarak çizmek istediğiniz şekil, ya da birebir Mouse ile çizim
• Dördüncü ise tabii gerekliyse dolgu rengini bitirmek

Koordinat sistemi

Kod bölümüne geçmeden önce koordinat sisteminden bahsetmek istiyorum. Alışageldiğimiz 2 boyutlu koordinat sistemi yatay X ve dikey Y olarak ölçülür. Bu koordinat sistemine göre x sıfır ve y sıfır merkezde yer alıyor. Aşağıdaki şekilde de görebileceğiniz gibi bu koordinat düzlemine göre x sıfırdan sağa gittikçe pozitif sola gittikçe negatif, y sıfırdan yukarıya çıktıkça pozitif aşağıya indikçe negatif oluyor.

Flash ta ise bu biraz farklı, flash video ekranlarının koordinat sistemini temel aldığı için x sıfır ve y sıfır sol üst köşede yer almaktadır.X koordinatı aynı şekilde standart sisteme göre ama y sıfır dan aşağıya indikçe pozitif yukarıya çıktıkça negatif oluyor, yani normal y koordinat düzleminin tersi.

Koordinat sistemini anlatmamın sebebi çizimlerde ortaya çıkacak karışıklıkları kaldırmak içindi. Şimdi kod bölümüne geçebiliriz.

lineStyle()

lineStyle metodu ile çizimin rengini çizgi boyutunu alphasın vb özellikleri kullanmanıza yardımcı oluyor.Eğer sadece çizim kalınlığını ve rengini belirlemek istiyorsanız

lineStyle(3, 0xff6600);

bu kod yeterli olacaktır. Ama gelişmiş özelliklerden yararlanmak istiyorsanız istediğiniz özelliği parametre olarak line style metoduna eklemeniz yeterli.Ama ben genede kısa bir şekilde lineStyle özelliklerini anlatamaya çalışacağım.

lineStyle(thickness:Number, color:uint = 0, alpha:Number = 1.0, pixelHinting:Boolean = false, scaleMode:String = "normal", caps:String = null, joints:String = null, miterLimit:Number = 3)

thickness : çizgi kalınlığı. 0 ile 255 arası bir değer girilmesi gerekiyor.

color : çizgi rengi, 16 lık sayı sistemi ile renkleri girmeniz gerekiyor(hex). Default olarak 0×000000;

alpha : rengin alphasını ayarlıyor. Default olarak 1,0

pixelHinting : default olarak false. Bu değeri true yaptığınız taktirde çizimlerinizin kenarları ve çizgiler daha iyi kalitede çıkacaktır.Tabii buda render süresini arttırıyor.

scaleMode : Çizimlerin scale modunu ayarlıyor. Default olarak Normal geliyor.NONE, VERTICAL ve HORIZANTAL seçimleri yer alıyor.

caps : Yapmış olduğunuz çizimin başlangıç ve bitiş kenarlarının nasıl olacağını belirliyor. NONE,ROUND,SQUARE seçenekleri yer alıyor.

joints : Yapmış olduğunuz çizimin Dönüş noktalarının nasıl olacagını belirliyor. MITER,ROUND,BEVEL

miterLimit : Bu seçeneği sadece join style daki miter seçili ise ayarlıya biliyorsunuz. Default numarası 3.Mesela bir üçgen düşünün bir köşesi 45 açıdan küçükse kenarı kesiyor.

moveTo()

Çizimin başlangıç koordinatlarını belirlemenize yardımcı olur.Eğer başlangıç koordinatlarını belirlemezseniz x ve y değerini sıfır olarak alacaktır.

lineTo()

lineTo metodu ile düz çizgiler çizmemize yardımcı oluyor. Sadece x ve y parametresini göndererek çizgimizi çizmiş oluyoruz.

İlk olarak yeni bir Shape oluşturup bunu ekrana ekliyoruz. Daha sonra çizime başlıyoruz.

var myShape:Shape = new Shape();
addChild(myShape);
//Çizim stilini belirliyoruz, çizgi kalınlığı 3 çizgi rengi 0xff6600
myShape.graphics.lineStyle(3, 0xff6600);
//Çizgimizin başlangıç yerini belirliyoruz. İlk olarak x koordinatı sonra ise y koordinatı
myShape.graphics.moveTo(100,100);
//Çizginin bitiş noktalarını belirliyoruz. İlk olarak x koordinatı sonra ise y koordinatı
myShape.graphics.lineTo(300,100);

Şekilde de görüldüğü gibi moveTo komutu ile x 100 ile y 100 komutunda çizimi başlatıyoruz.lineTo komutu ile x 300 e ve y 100 koordinatlarına bir çizgi ekliyoruz. Eğer moveTo metodunu kullanmasaydık yani çizim için herhangi bir başlangıç noktası belirlemeseydik, otomatik olarak çizim x sıfır y sıfırdan başlayacaktı.

curveTo()

curveTo metodu ile eğriler çizebiliyoruz. Bir çemberin dörtte biri gibi düşünebilirsiniz. lineTo metodundan farklı olarak burada 4 parametre yolluyoruz;

curveTo(controlX, controlY, anchorX, anchorY); control noktaları eğimi belirliyor, anchorlar ise varış çizginin bitiş noktasını.

var myShape:Shape = new Shape();
addChild(myShape);
myShape.graphics.lineStyle(3, 0xff6600);
myShape.graphics.moveTo(100, 100);
myShape.graphics.curveTo(175, 125, 200, 200);

drawCircle();

Daire çizmenize yardımcı oluyor.drawCircle 3 adet parametre kabul ediyor ;x, y ve radyan.

var myShape:Shape = new Shape();
addChild(myShape);
myShape.graphics.lineStyle(3, 0xff6600);
myShape.graphics.drawCircle(150,150,50);

drawEllipse()

Elipse çizmenize yardımcı oluyor. Daire ile elipse arasındaki fark, daire de tek bir radyan olduğu için tam bir daire çıkıyor.Ellipse te ise genişlik ve yüksekliği siz tanımladığınız için şekli istediğiniz gibi çıkarabiliyorusnuz. 4 adet parametre alıyor; x ,y, genişlik, yükseklik.

var myShape:Shape = new Shape();
addChild(myShape);
myShape.graphics.lineStyle(3, 0xff6600);
myShape.graphics.drawEllipse(100,100,200,150)

drawRect()

Dikdörtgen çiziyor.4 adet parametre alıyor.x,y, genişlik, yükseklik.

var myShape:Shape = new Shape();
addChild(myShape);
myShape.graphics.lineStyle(3, 0xff6600);
myShape.graphics.drawRect(100,100,100,100);

drawRoundRect()

Elipse ve diktdörgen birleşimi sonucu ortaya çıkan, kenarlarını yuvarlatabileceğiniz bir dikdörtgen.6 adet parametre alıyor; x ,y, genişlik, yükseklik, elipsin genişliği, elipsin yüksekliği.

var myShape:Shape = new Shape();
addChild(myShape);
myShape.graphics.lineStyle(3, 0xff6600);
myShape.graphics.drawRoundRect(100,100,100,100,30,30);

beginFill() ve endFill()

Çizdiğiniz şekillerin içerisini doldurmanıza yarayan bir metod.İki adet parametre alıyor; renk ve alpha değeri.endFill() ise beginFiil metodu kapatmak için, yani şeklin için doldurmayı bitirdikten sonra kullanmanız gereken kod. Kullanmadığınız taktirde şeklin içini doldurmayabilir.

var myShape:Shape = new Shape();
addChild(myShape);
myShape.graphics.lineStyle(3, 0xff6600);
myShape.graphics.beginFill(0×000000, 0.6)
myShape.graphics.drawCircle(150,150,50);
myShape.graphics.endFill();

beginBitmapFill()

Çizilen şeklin içini belirlenen bir resim ile dolduruyor.Resimi kütüphaneden linkage id ile çekiyor.4 adet parametresi var, resim adı, matrix, tekrar, ve smooth.

var myShape:Shape = new Shape();
addChild(myShape);
myShape.graphics.lineStyle(3, 0xff6600);
myShape.graphics.beginBitmapFill(new image(100,100), null, true, false);
myShape.graphics.drawRect(100,100,100,100);
myShape.graphics.endFill();

beginGradientFill();

Çizilen şeklin içini gradient vererek dolduruyor. Parametreleri;

Type : gradient çeşidini : GradientType.LINEAR ya da GradientType.RADIAL

Colors : renkler belirleniyor. Array olduğu içiçn birden çok renk seçilebiliyor.

Alphas : seçilen renklerin alphaları, renk sayısı kadar alpha olması gerekiyor.

Ratios : aradaki renk geçişini sağlıyor.

Matrix : createGradientBox yaratıyorsunuz. Soldan sağa parametreler ; genişlik, yükseklik, yön, tx, ty (tx:ratios arasındaki geçişin x eksenine göre mesafesi . ty: ratios arasındaki geçişin y eksenine göre mesafesi)

Not: Aşağıdaki örnekte matrixi tam olarak bu şekilde ayarlamadım. matrixi biraz daha geniş verdim. Herhangi bir yanlış anlaşılma olmaz umarım.

spreadMethod :Verilen renklerin yayılma şekli.parametreleri; SpreadMethod.PAD SpreadMethod.REFLECT SpreadMethod.REPEAT

interpolationMethod :eklenen renklerin ara değerlerini buluyor. parametreleri: InterpolationMethod.LINEAR_RGB ve InterpolationMethod.RGB

focalPointRatio : gradientin odak noktasını belirliyor.Default değeri 0.Eğer değeri 1 çıkartırsa gradient çemberinin kenarına denk gelecektir.Maksimum değer 1dir.

var myShape:Shape = new Shape();
addChild(myShape);
var fillType:String = GradientType.LINEAR;
var colors:Array = [0xffffff, 0xff66600];
var alphas:Array = [0, 1.0];
var ratios:Array = [0×00, 0xFF];
var matrix:Matrix = new Matrix();
matrix.createGradientBox(200, 300, 300, 300, 0);
myShape.graphics.beginGradientFill(fillType, colors, alphas, ratios, matrix);
myShape.graphics.drawRect(100,100,100,100);

lineGradientStyle()

Çizgiye uygulanan gradientidir. Yukarıdaki özelliklerle aynı şekilde çalışıyor.

var myShape:Shape = new Shape();
addChild(myShape);
var fillType:String = GradientType.LINEAR;
var colors:Array = [0xffffff, 0xff66600];
var alphas:Array = [1, 1.0];
var ratios:Array = [0×00, 0xFF];
var matrix:Matrix = new Matrix();
matrix.createGradientBox(200, 300, 300, 300, 0);
myShape.graphics.lineStyle(5)
myShape.graphics.lineGradientStyle(fillType, colors, alphas, ratios, matrix);
myShape.graphics.drawRect(100,100,100,100);

clear()

Clear metodu ile çizilen her şeyi ekrandan temizleyebilirsiniz.Clear metodunu kullandıktan sonra yeniden çizim yapmak istiyorsanız kesinlikle lineSytle yeniden tanıtmanı gerekecektir.Aksi taktirde herhangi bir şey çizmeyecektir.

Ve son olarak basit bir çizim uygulaması.

Çizim uygulamasına buradan ulaşabilirsiniz.

http://enginyoyen.com/blog/tr/index.php/cizim-api/

Kaynak kodları buradan indirebilirsiniz.

http://enginyoyen.com/blog/tr/wp-content/uploads/2007/11/drawingapi.rar

Umarım yardımcı olmuştur.

Kolay Gelsin

Engin Yöyen!