Çizim Kodları İle Dinamik Bir Buton Oluşturmak


Bu bölümde çizim kodlarını kullanarak sadece kodlarla oluşturulmuş dinamik bir buton hazırlayacağız. Çalışmaya başlamadan evvel çizim kodları hakkında net bir bilginiz yoksa önce alttaki sayfayı incelemeniz uygun olacaktır. Kodların ne işe yaradığı , nasıl kullanılacağı hakkında bilginiz olursa bu bölümü yorumlamanız kolaylaşır. Çizim Api`leri için alttaki linki lütfen inceleyiniz:

http://www.flashdersleri.com/html_dosyalar/api.html

Önce butonumuzu görelim:

 

DOSYAYI İNDİR

Uygulama:

Burada yapacağınız tek işlem flash programını açıp alttaki kodları 1.kareye yazmak ve test moduna geçip incelemektir.Alttaki kodların anlamı açıklanacaktır. 1.kareye şu komutları yazıp filmi test edin:

 

dinamik_buton = this.createEmptyMovieClip("dinamik_buton", 1);
/*Butonun x ve y koordinatları oluşturuluyor ve boyutu 2 kat
büyütülüyor*/

with (dinamik_buton) {
_x =100;
_y=100;
_xscale =200;
_yscale=200;
}

//En alttaki siyah gölge hazırlanıyor
with (dinamik_buton) {
var klip = createEmptyMovieClip('klip'+0, 0);
with (klip) {
var matrix = {a:33.15, b:0, d:0, e:33.15, g:-0.6, h:-0.05};
var colors = [0x676767, 0x868686];
var alphas = [83.9215686275, 0];
var ratios = [173, 234];
beginGradientFill("radial", colors, alphas, ratios, matrix);
lineTo(-0.55, -15.55);
curveTo(5.85, -15.55, 10.25, -12.35);
curveTo(14.6, -9.2, 16.05, 2.3);
curveTo(17.45, 13.75, -0.55, 15.55);
curveTo(-7.05, 15.55, -11.6, 11);
curveTo(-16.15, 6.4, -16.15, 0);
curveTo(-16.15, -6.5, -11.6, -10.95);
curveTo(-7.05, -15.55, -0.55, -15.55);
lineTo(0, 0);
endFill();
}

//Bu gölge üzerine yeşil çizim yerleştiriliyor
var klip = createEmptyMovieClip('klip'+1, 1);
with (klip) {
var matrix = {a:37.55, b:0, d:0, e:37.55, g:-0.2, h:4.8};
var colors = [0xD5FFD7, 0x61EF01, 0x1DA400, 0x004A00];
var alphas = [100, 100, 100, 100];
var ratios = [0, 88, 162, 239];
beginGradientFill("radial", colors, alphas, ratios, matrix);
lineTo(11.25, -2.15);
curveTo(11.25, 2.7, 7.8, 6.2);
curveTo(4.3, 9.65, -0.6, 9.65);
curveTo(-5.5, 9.65, -8.95, 6.2);
curveTo(-12.45, 2.7, -12.45, -2.15);
curveTo(-12.45, -7, -8.95, -10.5);
curveTo(-5.5, -14, -0.6, -13.95);
curveTo(4.3, -14, 7.8, -10.5);
curveTo(11.25, -7, 11.25, -2.15);
lineTo(0, 0);
endFill();
}

/*Yeşil çizimin kenarlarının netleşmesi için bu alana
siyah renkli bir içi boş bir daire çizimi yerleştiriliyor*/

var klip = createEmptyMovieClip('klip'+2, 2);
with (klip) {
lineStyle(0.05, 0x000000, 50.1960784314);
moveTo(11.25, -2.15);
curveTo(11.25, 2.7, 7.8, 6.2);
curveTo(4.3, 9.65, -0.6, 9.65);
curveTo(-5.5, 9.65, -8.95, 6.2);
curveTo(-12.45, 2.7, -12.45, -2.15);
curveTo(-12.45, -7, -8.95, -10.5);
curveTo(-5.5, -14, -0.6, -13.95);
curveTo(4.3, -14, 7.8, -10.5);
curveTo(11.25, -7, 11.25, -2.15);
}

/*Yeşil alana parlaklık efekti vermek için beyaz renkli
bir eliptik çizim ekleniyor*/

var klip = createEmptyMovieClip('klip'+3, 3);
with (klip) {
var matrix = {a:19.65, b:0, d:0, e:10.95, g:-0.55, h:-9.95};
var colors = [0xFFFFFF, 0xFFFFFF, 0x2B2B2B];
var alphas = [96.0784313725, 0, 100];
var ratios = [0, 255, 255];
beginGradientFill("radial", colors, alphas, ratios, matrix);
lineTo(8.85, -9.95);
curveTo(8.85, -7.85, 6.1, -6.3);
curveTo(3.3, -4.75, -0.55, -4.75);
curveTo(-4.45, -4.75, -7.2, -6.3);
curveTo(-10.05, -7.85, -10, -9.95);
curveTo(-10.05, -12.2, -7.2, -13.7);
curveTo(-4.45, -15.25, -0.55, -15.25);
curveTo(3.3, -15.25, 6.1, -13.7);
curveTo(8.85, -12.2, 8.85, -9.95);
lineTo(0, 0);
endFill();

}

/*Son olarak ortadaki siyah renkli üçgen ekleniyor*/
var klip = createEmptyMovieClip('klip'+4, 4);
with (klip) {
beginFill(0x000000, 50.1960784314);
lineTo(6.2, -1.85);
lineTo(-5.15, -8.15);
lineTo(-5.15, 4.25);
lineTo(6.2, -1.85);
lineTo(0, 0);
endFill();
}

}

//Butona tıklama kodları buraya yazılacak
dinamik_buton.onRelease=function(){
//Tıklama sonrası kodları yazınız
}

/*Buton üzerine gelindiğinde üçgen rengi değişip
180 derece dönüş yapıyor*/

dinamik_buton.onRollOver=function(){
kutu.text="Fare buton üzerinde !"
klip._xscale=-100;
with (klip) {
beginFill(0xFF0000, 50.1960784314);
lineTo(6.2, -1.85);
lineTo(-5.15, -8.15);
lineTo(-5.15, 4.25);
lineTo(6.2, -1.85);
lineTo(0, 0);
endFill();
}
}

/*Fare buton üzerinden çekildeiğinde üçgen eski yön
ve rengine geri dönüyor*/

dinamik_buton.onRollOut=function(){
kutu.text="Fare buton üzerinden kaldırıldı !"
klip._xscale=100;
with (klip) {
beginFill(0x000000, 50.1960784314);
lineTo(6.2, -1.85);
lineTo(-5.15, -8.15);
lineTo(-5.15, 4.25);
lineTo(6.2, -1.85);
lineTo(0, 0);
endFill();

}
}
//Çalışmanın sonu


Butona atanan kodları saymazsak çizim 5 bölümden oluşmaktadır.Önce kodların en başında olan:

with (dinamik_buton) {
_x =100;
_y=100;
_xscale =200;
_yscale=200;
}

bölümü açıklayalım.

Bir dinamik klip oluşturduğunuzda klibin merkezi, klibin tam orta noktası olur. Klibin x ve y koordinatları bu merkez noktaya göre hesaplanır. Dinamik kliplerde şayet değiştirmezseniz x ve y değeri sıfırdır. Bu durumda film test moduna geçtiğinde merkez nokta sahnenin sol üst köşesinde oluşacağından çizimin ancak sağ-alt 1/4 lük kısmı sahnede gözükecektir.Diğer kısımlar eksi x ve y değeri aldığından sahne dışında kalacaktır. Bunu test etmek için üstte yazdığımız kod grubunu silip filmimizi oynatarak anlatılanları daha iyi yorumlayabilirsiniz._xscale ve _yscale kodları ile oluşturulan çizimin boyutları 2 kat büyütülmüştür. Vectorel çizimlerde boyut büyümesinin görüntüyü bozmadığını zaten biliyorsunuz.

1- En alttaki gölge efektini oluşturmak :

Flash programını açın ve şu kodları 1.kareye yazarak test edin:

dinamik_buton = this.createEmptyMovieClip("dinamik_buton", 1);
/*Butonun x ve y koordnatları oluşturuluyor ve boyutu 2 kat
büyütülüyor*/
with (dinamik_buton) {
_x =100;
_y=100;
_xscale =200;
_yscale=200;
}

//En alttaki siyah gölge hazırlanıyor
with (dinamik_buton) {
var klip = createEmptyMovieClip('klip'+0, 0);
with (klip) {
var matrix = {a:33.15, b:0, d:0, e:33.15, g:-0.6, h:-0.05};
var colors = [0x676767, 0x868686];
var alphas = [83.9215686275, 0];
var ratios = [173, 234];
beginGradientFill("radial", colors, alphas, ratios, matrix);
lineTo(-0.55, -15.55);
curveTo(5.85, -15.55, 10.25, -12.35);
curveTo(14.6, -9.2, 16.05, 2.3);
curveTo(17.45, 13.75, -0.55, 15.55);
curveTo(-7.05, 15.55, -11.6, 11);
curveTo(-16.15, 6.4, -16.15, 0);
curveTo(-16.15, -6.5, -11.6, -10.95);
curveTo(-7.05, -15.55, -0.55, -15.55);
lineTo(0, 0);
endFill();
}
}

Bu komutlar size şu çizimi verecektir.

2- Gölge üzerindeki yeşil alanı oluşturmak:

Yeni bir flash sayfası açıp 1.kareye alttaki kodları yazarak filmi test edin:

dinamik_buton = this.createEmptyMovieClip("dinamik_buton", 1);
/*Butonun x ve y koordnatları oluşturuluyor ve boyutu 2 kat
büyütülüyor*/
with (dinamik_buton) {
_x =100;
_y=100;
_xscale =200;
_yscale=200;
}

with (dinamik_buton) {
var klip = createEmptyMovieClip('klip'+1, 1);
with (klip) {
var matrix = {a:37.55, b:0, d:0, e:37.55, g:-0.2, h:4.8};
var colors = [0xD5FFD7, 0x61EF01, 0x1DA400, 0x004A00];
var alphas = [100, 100, 100, 100];
var ratios = [0, 88, 162, 239];
beginGradientFill("radial", colors, alphas, ratios, matrix);
lineTo(11.25, -2.15);
curveTo(11.25, 2.7, 7.8, 6.2);
curveTo(4.3, 9.65, -0.6, 9.65);
curveTo(-5.5, 9.65, -8.95, 6.2);
curveTo(-12.45, 2.7, -12.45, -2.15);
curveTo(-12.45, -7, -8.95, -10.5);
curveTo(-5.5, -14, -0.6, -13.95);
curveTo(4.3, -14, 7.8, -10.5);
curveTo(11.25, -7, 11.25, -2.15);
lineTo(0, 0);
endFill();
}
}

Bu kodlar şu çizimi oluşturur:

İki grup kod beraberce yazıldığında görüntü alttaki gibidir:

3- Yeşil alanının çevresini netleştirmek için bu alana siyah bir daire eklemek:

Yeni bir flash sayfası açıp şu kodları yazın ve filmi test edin:

dinamik_buton = this.createEmptyMovieClip("dinamik_buton", 1);
/*Butonun x ve y koordnatları oluşturuluyor ve boyutu 2 kat
büyütülüyor*/
with (dinamik_buton) {
_x =100;
_y=100;
_xscale =200;
_yscale=200;
}

with (dinamik_buton) {
var klip = createEmptyMovieClip('klip'+2, 2);
with (klip) {
lineStyle(0.05, 0x000000, 50.1960784314);
moveTo(11.25, -2.15);
curveTo(11.25, 2.7, 7.8, 6.2);
curveTo(4.3, 9.65, -0.6, 9.65);
curveTo(-5.5, 9.65, -8.95, 6.2);
curveTo(-12.45, 2.7, -12.45, -2.15);
curveTo(-12.45, -7, -8.95, -10.5);
curveTo(-5.5, -14, -0.6, -13.95);
curveTo(4.3, -14, 7.8, -10.5);
curveTo(11.25, -7, 11.25, -2.15);
}
}

Görüntü alttaki gibidir:

Bu kodlar diğer kodlarla birleştirildiğinde şu görüntü ortaya çıkar:

4- Çizime ışık yansıması efektini vermek:

Bunun için en üstte beyaz alfa geçişli bir çizim oluşturulur.Flash içinde yeni bir sayfa açıp şu kodları yazıp filmi test edin:

Uyarı=Çizim beyaz renkli olacağından arkaplanı siyah yaparsanız sonucu görebilirsiniz:

dinamik_buton = this.createEmptyMovieClip("dinamik_buton", 1);
/*Butonun x ve y koordnatları oluşturuluyor ve boyutu 2 kat
büyütülüyor*/
with (dinamik_buton) {
_x =100;
_y=100;
_xscale =200;
_yscale=200;
}

with (dinamik_buton) {
var klip = createEmptyMovieClip('klip'+3, 3);
with (klip) {
var matrix = {a:19.65, b:0, d:0, e:10.95, g:-0.55, h:-9.95};
var colors = [0xFFFFFF, 0xFFFFFF, 0x2B2B2B];
var alphas = [96.0784313725, 0, 100];
var ratios = [0, 255, 255];
beginGradientFill("radial", colors, alphas, ratios, matrix);
lineTo(8.85, -9.95);
curveTo(8.85, -7.85, 6.1, -6.3);
curveTo(3.3, -4.75, -0.55, -4.75);
curveTo(-4.45, -4.75, -7.2, -6.3);
curveTo(-10.05, -7.85, -10, -9.95);
curveTo(-10.05, -12.2, -7.2, -13.7);
curveTo(-4.45, -15.25, -0.55, -15.25);
curveTo(3.3, -15.25, 6.1, -13.7);
curveTo(8.85, -12.2, 8.85, -9.95);
lineTo(0, 0);
endFill();
}
}

Görüntü şöyledir:

Diğer kodlarla beraber genel görüntü:

5- Çizimin en üst kısmına bir üçgen ekleme işlemi:

Yeni bir sayfaya kodları yazıp test edin:

dinamik_buton = this.createEmptyMovieClip("dinamik_buton", 1);
/*Butonun x ve y koordnatları oluşturuluyor ve boyutu 2 kat
büyütülüyor*/
with (dinamik_buton) {
_x =100;
_y=100;
_xscale =200;
_yscale=200;
}

with (dinamik_buton) {
var klip = createEmptyMovieClip('klip'+4, 4);
with (klip) {
beginFill(0x000000, 50.1960784314);
lineTo(6.2, -1.85);
lineTo(-5.15, -8.15);
lineTo(-5.15, 4.25);
lineTo(6.2, -1.85);
lineTo(0, 0);
endFill();
}
}

Bu kodlar şu çizimi sunar:

Son olarak tüm kodlar birleştiğinde ana çizimimiz ortaya çıkar:

Sonraki kodlar dinamik buton olaylarıdır:

dinamik_buton.onRollOver=function(){
kutu.text="Fare buton üzerinde !"
klip._xscale=-100;
with (klip) {
beginFill(0xFF0000, 50.1960784314);
lineTo(6.2, -1.85);
lineTo(-5.15, -8.15);
lineTo(-5.15, 4.25);
lineTo(6.2, -1.85);
lineTo(0, 0);
endFill();
}
}

Fare buton üzerine geldiğinde klip._xscale=-100; komutu ile çizim horizontalde 180 derece dönecek ve renk değiştirecektir

dinamik_buton.onRollOut=function(){
kutu.text="Fare buton üzerinden kaldırıldı !"
klip._xscale=100;
with (klip) {
beginFill(0x000000, 50.1960784314);
lineTo(6.2, -1.85);
lineTo(-5.15, -8.15);
lineTo(-5.15, 4.25);
lineTo(6.2, -1.85);
lineTo(0, 0);
endFill();

}
}

Fare buton üzerinden çekildiğinde çizim eski haline döner.

dinamik_buton.onRelease=function(){
//Tıklama sonrası kodları yazınız
}

tıklama yapıldığında olmasını istediğiniz işleme ait kodlar da bu alana yazılırlar.