Çizim API`lerini Kullanmak (1)

2.Bölüm --->

Flash-MX versiyonuna kadar çizgi ve dolgu gibi şekiller ancak dosyanın hazırlandığı tasarım aşamasında araçlar kutusundaki elemanlarla oluşturulabiliyordu. Bu versiyonla beraber şekil ve çizimleri runtime(çalışma anında) oluşturma şansına kavuşulmuştur.Runtime şekiller oluşturmak için kullanılan metotlara Çizim API`leri denir.

Uygulamalar bölümünde de anlatılan Boya Tahtası çalışması büyük ölçüde bu metotlarla oluşturulmuştur. Çalışmada fare sol tuşuna basarak ayarladığınız özellikte çizim yapabilirsiniz.

Kullanılan kodlar:

lineStyle() , moveTo() , lineTo() , curveTo() , clear() , beginFill() , beginGradientFill() , endFill() olmak üzere 8 tanedir.

Çizim API`leri 3 sayfa olarak anlatılacaktır.( Çizgi oluşturma yöntemleri, dolgu oluşturma yöntemleri ve örnek çalışmalar)

1- ÇİZGİ OLUŞTURMA YÖNTEMLERİ:

lineStyle(çizgi_kalınlığı,renk,alfa); şeklinde kullanılır. Çizginin stilini ayarlamak için kullanılır.Çizgi kalınlığı için 0 ile 255 arası bir değer seçilir. Renk parametresinde ise rengin hexadecimal değeri kullanılır. örneğin kırmızı renk için 0xFF0000 yazılır. Alfa alanına çizimin şeffaflığını ayarlamak için 0 ile 100 arası bir değer yazılır. Tam solid renk kullanmak isterseniz 100 değerini kullanmalısınız.

moveTo(x,y); Çizimin ilk başlayacağı noktanın koordinatlarını verir. x ve y alanına çizimin ilk başlatılacağı x ve y koordinatları yazılır.Bu komutu kullanmadan da çizime başlayabilirsiniz. Flash böyle bir durumda x ve y değerinin sıfır olarak belirlendiği sahnenin sol üst köşesinden çizimi başlatır.

lineTo(x,y); Çizginin başlangıç noktasından sonra ilerleyeceği koordinatları verir.Bu komutu birden fazla kullanarak kare,üçgen,dikdörtgen gibi geometrik şekiller oluşturabilirsiniz. Bir örnekle açıklayalım.

Flash programını açıp 1.kareye şu komutları atayınız:

_root.createEmptyMovieClip( "ucgen", 1 );
with (_root.ucgen){
lineStyle( 5, 0xff00ff, 100 );
moveTo( 50, 50 );
lineTo( 100,100 );
lineTo( 0,100 );
lineTo( 50, 50 );
}

veya aynı kodları şu şekilde de yazabilirsiniz:

_root.createEmptyMovieClip( "ucgen", 1 );
_root.ucgen.lineStyle( 5, 0xff00ff, 100 );
_root.ucgen.moveTo( 50, 50 );
_root.ucgen.lineTo( 100,100 );
_root.ucgen.lineTo( 0,100 );
_root.ucgen.lineTo( 50, 50 );

Filmi test ettiğinizde sahnede bir üçgen gözlenecektir.Bu tür çizimlerde ilk komut sanal kalemin yerine geçecek boş bir film klibi oluşturmaktır._root.createEmptyMovieClip( "ucgen", 1 ); Parametre olarak bu klibe ucgen instance name`i atanmıştır ve klip 1.level derinliğine yerleştirilmiştir.Derinlik en az 1 olmalıdır.0 değeri verilirse sahnede mevcut olan diğer semboller kaybolacak yerini oluşturulan bu boş klibe bırakacaktır. Daha sonraki kodlarla çizginin stili ayarlanır. Başlangıç noktası olarak x=50 ve y=50 koordinatları seçilmiştir. Buradan ilk ilerleme noktası 100,100, buradan 0,100 noktasına ilerler ve son olarak başlangıç noktası olarak seçilen 50,50 noktasına ilerleyerek üçgeni tamamlarlar. Alttaki grafiği inceleyebilirsiniz:

curveTo(eğim_x,eğim_y,bitiş_x,bitiş_y); lineTo komutu ile sadece düz çizgiler oluşturulur.Eğimli çizimler için curveTo komutuna ihtiyaç vardır. eğim_x ve eğim_y değerleri çizginin eğim yapacağı kontrol noktasını belirler. x ve y değerleri ise çizginin bitiş noktasıdır. Bir örnekle açıklayalım:

Flash`ın 1.karesine şu kodları yazıp filmi test edin:

_root.createEmptyMovieClip( "parabol", 1 );
with (_root.parabol){
lineStyle( 5, 0xff00ff, 100 );
moveTo( 50, 50 );
curveTo( 100,100,50,150 );
}

Sağa eğim yapan vertikal düzlemde bir eğri elde edeceksiniz. Bunu grafikle açıklayalım:

Grafide de görüldüğü gibi curveTo komutunun ilk 2 parametresi eğimin yapılacağı x ve y değerini kontrol etmektedir.

clear(); Yapılan çizimleri silmek istediğinizde kullanacağınız kod grubudur. Flash programını açıp 1.kareye yukarıdaki parabol kodlarını yazalım:

_root.createEmptyMovieClip( "parabol", 1 );
with (_root.parabol){
lineStyle( 5, 0xff00ff, 100 );
moveTo( 50, 50 );
curveTo( 100,100,50,150 );
}

Bu parabol instance name`ine sahip bir çizim oluşturacaktır. Sahneye bir buton yerleştirip şu komutu atayın:

on(release){
_root.parabol.clear();
//parabol oluşturulan çizime atanan isimdir
}

Filmi test ettiğinizde parabol çizimi gözlenir.Butona bastığınızda ise bu çizim silinecektir. Sayfanın en üst kısmındaki boya tahtası çalışmasındaki sil butonu bu kod ile çalışmaktadır.

Çizgi kodları bunlardan ibarettir. Dolgu kodları olan beginFill() , beginGradientFill() , endFill() bir sonraki sayfada açıklanacaktır.

2.Bölüm --->