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- DOLGU OLUŞTURMA YÖNTEMLERİ:
Çizgi oluşturma metotları ile fareyi sanal bir kalem olarak kullanıp çizgi oluşturabilir veya kare,üçgen gibi geometrik şekiller oluşturabilirsiniz. Bu şekiller dolgu içermediklerinden sahnede yerleştirildikleri alanda arkaplanda ne varsa gözlenecektir. Dolgu içeren şekiller oluşturmanız için ek kodlara ihtiyaç vardır. Bunlar beginFill() , beginGradientFill() ve endFill() komutlarıdır. kodlara geçmeden evvel dolgu türlerinden bahsetmekte yarar var. Flash ile 2 tür dolgu oluşturulur.
a- Solid Dolgular: Tek renk kullanılan dolgulardır. Bu tür bir çalışmada dolguya katabileceğiniz tek özellik saydamlık oranını değiştirmekten ibaret olacaktır.
b- Gradient Dolgular: Geçişken,kademeli veya dereceli dolgular da denilir. Bu tür dolgularda 2 veya üzerinde renk kullanabilirsiniz. 2 tür gradient dolgu vardır
-Linear Dolgu: Doğrusal geçişli dolgulardır.
-Gradient Dolgu: Dairesel geçişli dolgulardır.
Kodlarla renkler arası geçiş tayf eni, dolgunun yatay düzlemle yaptığı açı ve saydamlık değerleri ayarlanabilir. Şimdi kodlara gözatabiliriz.
beginFill(renk,saydamlık): Solid dolgular için kullanılan bir komuttur. Renk alanına kullanılacak rengin hexadecimal kodu, saydamlık alanına 0 ile 100 arasında değişen bir alfa değeri yazılır.
beginFill(0xFF00FF,100); şeklinde. Saydamlık değeri opsiyoneldir. Bir alfa değeri ile renkte saydamlık oluşturmak istemiyorsanız bu parametreyi kullanmayabilirsiniz. beginFill(0xFF00FF); gibi. Bu durumda flash alfa değerini 100 olarak kabul eder.
endFill(): Bir dolgunun tamamlandığını gösteren bir komuttur.bu komutu kullanmadan dolgu oluşturamazsınız.Hem beginFill hem de beginGradientFill komutundan sonra kod grubunu endFill() ile kapatmanız şarttır.
beginGradientFill("dolgu_tipi","renkler","saydamlıklar","oranlar","matrix") : Geçişken dolgular oluşturmaya yarayan bu kod grubunun anlaşılması diğerlerine göre daha zordur. Çünkü mevcut parametrelerin de alt parametreleri mevcuttur. Parantez içindeki koda ait parametreleri sıra ile inceleyelim.
dolgu_tipi: Linear veya radial olarak 2 seçeneğiniz vardır. Bu dolguların görüntüsüne ait grafikler önceden sunulmuştu.
renkler: Bu alanda dolguda kullanılacak renklerin hexadecimal değeri yazılır. Birden fazla renk kullanılacağından bu kodları önce bir diziye almak ve bu dizi elemanları olarak kod içinde kullanmak çok daha uygun olacaktır.örneğin çalışmada 4 renk kullanılacaksa önce bir dizi oluşturulur ve değerler bu diziye eleman olarak atanır:
renkler_array=[0xFF0000,0x00FFFF,0x620086,0x0000FF]; şeklinde. Bu dizinin nasıl kullanılacağı daha sonra tanımlanacaktır.
saydamlıklar: Dolguda kullanılacak renklere uygulanacak alfa değerlerini içerir. Bunu da bir diziye atayalım:
saydam_array=[100,90,100,80];
oranlar: Renklerin biribirine geçişinin ornaını ayarlar. 0 ile 255 arası bir değer verilir. Yine bir dizi oluşturalım:
oran_array=[255,255,125,125];
matrix: En karışık parametre budur. 6 alt grup içerir.
matrix Type:Bu alana daima "box" stringi yazılmalıdır.
x: Gradient renklerin yatay pozisyondaki koorninatıdır.
y: Gradient dolgunun dikey pozisyondaki koordinatıdır.
w: Dolgunun genişliği
h: Dolgunun yüksekliği
r: Dolguya uygulanacak dönüş açısı.Bu değer radyan cinsinden verilir. Bu değer kafanızı karıştırıyorsa ve derece olarak kullanmak isterseniz bir dönüşüm dizini oluşturmalısınız.Şu dizini kullanabilirsiniz:
rotasyon=(istenilen_açı/180)*Math.PI;
Tüm bu açıklamalardan sonra bir gradient dolgu için şöyle bir dizin yazılır:
rotasyon=(45/180)*Math.PI;
matrixOzellikleri = {matrixType:"box", x:-10 , y:-30 , h:150 , w:150 , r: rotasyon}
Burada matrixType herzaman yazılması gerektiği gibi box olarak belirlenmiştir. x değeri -10 alındığından dolgunun yatay konumunun şeklin en solunda 10 piksel daha dış kısmında , y değeri -30 olarak atnadığından dolgunun şeklin dikey konumunun 30 piksel üstünden oluşmasını sağlıyoruz.h ve w değerleri 150 piksel olduğundan dolgunun yüksekliği ve eni bu değere eşitlenir.Son olarak r değeri olarak 45 derece ataması yapılıyor.Burada kullanılan rotasyon fonksiyonu önceden anlatıldığı gibi bu dizinin üstünde oluşturulmalıdır.Dolgu 45 derece sağa rotasyon yapacaktır. Basit bir örnek verelim:
Flash programını açın ve 1.kareye şu komutu vererek filmi test edin:
_root.createEmptyMovieClip( "gradient", 1 );
with ( _root.gradient ) {
renkler = [ 0xFF0000, 0x0000FF];
alfalar = [ 100, 100];
oranlar = [ 0, 255];
rotasyon=(45/180)*Math.PI;
matrix = { matrixType:"box", x:10, y:10, w:70, h:70, r:rotasyon };
beginGradientFill( "linear", renkler, alfalar, oranlar, matrix );
moveTo(10,10);
lineTo(10,100);
lineTo(100,100);
lineTo(100,10);
lineTo(10,10);
endFill();
}
Test sonucunu yukarıdaki bilgilerle beraber değerlendiriseniz bu karmaşık kodu çok daha iyi yorumlayabilirsiniz. Artık bir sonraki sayfamızda örneklere geçebiliriz.
3- ÖRNEK ÇALIŞMALAR:
Üçgen oluşturma:
Flash programını açın ve 1.kareye alttaki kodları yazıp filmi test edin:
_root.createEmptyMovieClip( "ucgen", 1 );
with (_root.ucgen){
lineStyle( 5, 0xff00ff, 100 );
moveTo( 50, 50 );
lineTo( 100,100 );
lineTo( 0,100 );
lineTo( 50, 50 );
}
Daire oluşturma:
daireCiz = function(r, x, y) {
c.moveTo(x+r, y);
a = Math.tan(22.5 * Math.PI/180);
for (var aci = 45; aci<=360; aci += 45) {
var sonx = r*Math.cos(aci*Math.PI/180);
var sony = r*Math.sin(aci*Math.PI/180);
var cx =sonx + r*a*Math.cos((aci-90)*Math.PI/180);
var cy =sony + r*a*Math.sin((aci-90)*Math.PI/180);
c.curveTo(cx+x, cy+y, sonx+x, sony+y);
}
}
_root.createEmptyMovieClip("c", 1);
c.lineStyle(3, 0xFFFFFF, 100);
c.beginFill(0x666666, 100);
daireCiz(80, 100, 50);
c.endFill();
Solid dolgu oluşturma:
_root.createEmptyMovieClip( "kare", 1 );
with ( _root.kare ) {
beginFill(0xFFCC00,80 );
moveTo(10,10);
lineTo(100,10);
lineTo(100,100);
lineTo(10,100);
lineTo(10,10);
endFill();
}
Gradient dolgu oluşturma:
_root.createEmptyMovieClip( "gradient", 1 );
with ( _root.gradient ) {
colors = [ 0xFF0000, 0x0000FF];
alphas = [ 100, 100];
ratios = [ 0, 255];
rotasyon=(45/180)*Math.PI
matrix = { matrixType:"box", x:10, y:10, w:70, h:70, r:rotasyon };
beginGradientFill( "linear", colors, alphas, ratios, matrix );
moveTo(10,10);
lineTo(10,100);
lineTo(100,100);
lineTo(100,10);
lineTo(10,10);
endFill();
}
Çizgilere animasyon uygulama:
_root.createEmptyMovieClip("cizgi",1);
_root.cizgi._x=100;
_root.cizgi._y=100;
with(_root.cizgi)
{
lineStyle(1,0x006699);
for(i=0; i<360; i+=10) {
acı = i * (Math.PI/180);
moveTo(0,0);
lineTo(100*Math.cos(acı),100*Math.sin(acı));
}
}
_root.cizgi.onEnterFrame = function(){
this._rotation+=1;
};
Değişik bir çalışma için alttaki linkteki oscilloscope adlı örneği inceleyebilirsiniz. Burada da çizim için benzer kodlar kullanılmıştır: