Egrisel Hareketler:

Buraya kadar gördügümüz teorik trigonometriden sonra artik yavas yavas bu bilgileri pratige dönüstürebiliriz. Sinüs egrisini eminim daha önce de duymussunuzdur. Fakat bu egri tam olarak ne ise yarar ? Bize ne fayda saglar ? Simdi asagidaki resmi kisaca inceleyelim:

Resimde de gördügünüz gibi sinüs egrisi bize 0'dan 360 dereceye kadar olan tüm acilarin sinüs degerini veren egridir. Acilari radyan olarak kullanacagimiza göre :

Math.sin(0)=0, Math.sin(Math.PI/2)=1, Math.sin(Math.PI)=0, Math.sin(Math.Pi*3/2)=-1, Math.sin(Math.PI*2)=0 olacaktir.

Hala bu sacma degerler ne isimize yarayacak diye düsünüyorsaniz hareketlenmenin zamani gelmis demektir. top adinda bir movieclip olusturun ve linkage ismine top verin, sahnenin bos oldugundan emin olun. Asagidaki kodlari sahnenizin ilk Frame'ine yerlestirin:

var top:MovieClip=this.attachMovie("top","top",1);
var aci=0;
var aralik=100;
top._x=Stage.width/2;

function onEnterFrame(){
top._y=Stage.height/2+Math.sin(aci)*aralik;
aci+=.1;
}

Öncelikle kodlardan kisaca bahsedelim: ilk önce topu sahnenin ortasina yerlestirdik, onEnterFrame blogunda ise topun y koordinatlarini Math.sin(aci) olarak verdik, bu fonksiyon bize 1 ve -1 arasinda degerler verecegi icin topun gidip gelmesini istedigimiz aralik ile carptik. Topun sahnenin ortasinda gidip gelmesini istedigimiz icin de bu y degerini denklemimize ekleyerek top._y=Stage.height/2+Math.sin(aci)*aralik; satirini elde etmis olduk, daha sonra aci degerini her onEnterFrame fonksiyonu cagirildiginda (yani benim örnegimde saniyede 30 defa) 0.1 arttirarak topun pozisyonunu degistirdik. Hazirlamis oldugumuz animasyon asagida:

Hos bir animasyon oldu degil mi ? Matematik dersinde bizlere sorun cikarmaktan baska bir ise yaramayan sinüs fonksiyonunun yaptiklarina bakin :) Burada bilmeniz gereken önemli nokta sudur: Sinüs fonksiyonu bizlere sadece hareket vermekle kalmaz, farkli animasyonlarda da kullanilabilir. Örnegin büyüyüp kücülen bir nesne düsünün, nesnenizin _xscale ve _yscale özelliklerine yukarida yazmis oldugumuz denklemi uygulayin.. Bu animasyonu burada göstermiyorum, kendiniz yapmaya calisin, eminim sinüs fonksiyonunu kullandikca cok hos animasyonlar olusturacaksiniz..

Simdi de topumuz oldugu yerde gidip gelmek yerine biraz hareketlensin.. Asagidaki örnekte animasyonu baslatmaniz icin bir buton olusturdum, tikladiginizda top belirledigimiz hiz ile saga dogru hareket edecektir, saga dogru hareketi saglamak icin her onEnterFrame komutu cagirildiginda top'un x koordinatini 1 pixel arttiriyoruz, bunun disinda aralik degerini 50'ye düsürdüm, diger kodlar yukaridaki örnekle ayni..

dugme.onRelease = function()
{
dugme._visible = false;
_root.attachMovie("top", "top", 1);
var aci = 0;
var aralik = 50;
var hiz = 1;
top._x = 0;
top._y = Stage.height / 2;
_root.onEnterFrame = function()
{
top._y = Stage.height / 2 + Math.sin(aci) * aralik;
top._x += hiz;
aci += .1;
};
};

Yalnizca sinüs fonksiyonu kullanarak yapabilecekleriniz neredeyse hayal gücünüzle sinirli diyebilirim. Konuyla ilgili son bir örnek daha vermek istiyorum. Bu sefer Flash'daki adi Drawing API olan benim deyimimle cizdirme animasyonu olusturalim. Yukarida görmüs oldugunuz animasyonu biraz degistirdim ve asagidaki kodlar ortaya cikti :

dugme.onRelease = function()
{
dugme._visible = false;
var aci = 0;
var aralik = 50;
var ymerkez = Stage.height / 2;
var xhiz = 1;
var yhiz = 0.05;
var x = 0;
lineStyle(2, 0, 100);
moveTo(x, ymerkez);

onEnterFrame = function ()
{
x += xhiz;
y = ymerkez + Math.sin(aci) * aralik;
aci += yhiz;
lineTo(x, y);
};
};

Cizdirme de ne oluyor diyebilirsiniz, bu konuyu ilerleyen derslerde anlatmayi düsünüyorum, simdilik genel bilgi olmasi acisindan su kadarini söyleyebilirim. Öncelikle lineStyle(cizgiKalinligi, RGBrenkDegeri, cizginin_alphaDegeri) komutuyla cizgi özelliklerini belirliyorsunuz, ve daha sonra hayali bir robota komut veriyorsunuz. Söyle ki; moveTo(x,y) : elindeki kalemi götür ve ekrandaki bu verdigim x ve y koordinatlarindaki noktaya yerlestir.

lineTo(x,y) : kalemi yerlestirdigin noktadan bu verdigim noktaya cizgi ciz.

Genel olarak bu kadar bilgi yeterli sanirim, kodlarin geri kalani yukaridaki örneklerdekilerle ayni. Fakat dikkatinizi ceken birsey olmus olabilir, bu örnekte xhiz, yhiz ve ymerkez gibi fazladan degiskenlerimiz var.

Kod yazma konusunda ilerledikce isler icinden cikilmaz hale gelecektir, bu yüzden belli basli sabitlerinizi kodlarinizin üstünde bir yerde farkli degiskenlere (bunlara ilgili isimler vererek) atayin. Daha sonra animasyonu düzenlemek istediginizde, örnegin bir topun hizini degistirmek istediginizde nerdeydi bunun hizina verdigim deger diye aramaniza gerek kalmaz. Yukarida belirlediginiz degiskenlerin degerlerini degistirmeniz yeterli olur.

Simdi yukarida yazdigimiz kodlar ne ise yariyor onu görelim:

Bir sonraki derste, olusturdugumuz bu sinüs denklemlerine kosinüs denklemleri de ekleyerek sonuclarini inceleyecegiz. Takip ettiginiz icin tesekkürler..