Flash içerisinde, Tween sınıflarını kullanarak, animasyon işlemi kolayca yapılabilir. Ben bu derste, bir eksen de hareket, 2 eksende hareket ve, açı belirterek 2 eksende hareket nasıl oluştururuz sorusuna cevap vermeye çalışacağım. Daha sonraki derslerde, Bu animasyon tekniklerini fizik teknikleri ile karıştırıp, daha profesyonel animasyonlar elde edeceğiz.

Öncelikle yukarıdaki resimde, X, Y ve Z eksenlerinin yönlerini görmektesiniz. Şimdilik, bizim kullanacağımız eksenler, X ve Y eksenleri olacaktır. Birçok farklı animasyon türü bulunmaktadır. Aslında animasyona, programsal olarak; bir objenin, özelliklerindeki değişikliklerin arka arkaya gösterilmesi diyebiliriz. Buradan yola çıkarak, X ekseni üzerinde doğrusal bir hareket yapmak demek, ilgili objenin, X değerini artırmak veya azaltmak demektir.

Hemen bu işlemi inceleyelim. Birçok farklı teknikler kullanabılabiir fakat, en çok tercih edilen yöntem olam "EnterFrame" olayını (event) kullanmak mantıklı olacaktır. Peki bu eventi ne için kullanacağız ?. Baştan da dediğimiz gibi, objenin istediğimiz özelliklerini değiştirecek ve bunu arka arkaya göstereceğiz. Sürekli bir çalışma ortamı sağlamak için, "EnterFrame" eventi uygundur.

Flash filmi içerisinde, "Daire" instanceName’li ( isimli) bir movieclip’imiz olsun.

X ekseninde, doğrusal hareket ettirmek istiyorsak, basitçe, X koordinatını artırmak veya azaltmak yeterli olur demiştik.Şimdi bu işlemi actionscript de hazırlayalım.

Öncelikle, ister movieclip ‘in enterFrame eventini isterseniz, stage’in (sahnenin) enterFrame’ini tetikleyebilirsiniz. Peki aralarında ne fark var ki ?

Flash içerisinde birden fazla aynı anda, enterFrame’ini tetikleme ihtiyacı duyabilirsiniz. Bu tetiklediğiniz enterFrame’lerden 1 tanesini iptal etmek (removeEventListener()) isterseniz,eğer enterFrame ile çalışan işlemlerinizin hepsini, sahneden tetiklediğiniz enterFrame’e bağlamışsanız.

Sahnedekini sildiğinizde, otomatik olarak diğerleri de duracaktır. Bu sebeple, birbirlerinden farklı ve aynı anda sistemler çalıştırıyorsanız, bunları ilgili movieclip’lerin enterFrame’lerine bağlamayı tercih etmeniz doğru olacaktır.

Bu durumda ilgiliMC.removeEventListener(…) yazıp, sadece istediğiniz sistemi durdurabilirsiniz.

Hemen işimize dönelim ve öncelikle enterFrame’imizi tanımlayalım.

Bu satırdan sonra, "DoğrusalHareket" fonksiyonumuzu tanımlayabiliriz.

Fonksiyonumuzu tanımladık, Burada küçük bir not açıklayayım. Bir fonksiyonu, bir event tarafından (Event sınıfı değil, event genel olarak olay anlamındadır.) tetiklenmiş ise, bu ilgili event tarafından, fonksiyona bir parametre gönderilir. Bu parametrenin yapısı objedir. Sınıfı ise ilgili event sınıfının kendisidir. Örneğin,

MouseEvent sınıfı bir fonksiyonu çağırıyorsa     evt:MouseEvent 
KeyboardEvent sınfıı çağırıyor ise       evt:KeyboardEvent

Web service de kullanılan result eventi ise  evt:ResultEvent

Bir datagrid veya list gibi component de bulunan satıra click yapınca tetikleniyorsa (ItemClick)
   evt:ListEvent

….. gibidir.

Artık fonksiyonun içerisinde "Daire" movieclip’inin X koordinatını artıracağımız kodlarımızı yazabiliriz.

Evet artık, enterFrame (Flash filminin FPS hızı kadar, DogrusalHareket fonksiyonunu tetikler.) ile sürekli çalıştırdığımız fonksiyon içindeki "+=" (eşitliğin karşısındaki değer kadar ki bu "1" ‘dir, dairenin X değerini artırır.) operatörü ile, Daire’nin X değerini 1’er 1’er artırmış oluyoruz.

Hemen 3. Satır altına, Y ekseni içinde aynı işlemi yaparsak, 2 eksende doğrusal hareket etmiş oluruz.

Gelelim, açı vererek doğrusal harekete. Öncelikle açı vermek olarak bahsettiğimiz olay gayet basit bir mantık üzerine dayanır. Sinüs ve Cosinüs kafanızı karıştırmaması ve mantığı tam anlamanız açısında tane tane formüle ulaşacağız. Öncelikle unutmamamız gereken yapı , flash içerisinde, Y ekseninin, normalde olduğu yönünün tersi olmasıdır. Yani,

resimde de görüldüğü gibi, Flash içerisinde, Y ekseni ters çevrilmiştir. Dönelim konumuza, Açı kullanarak doğrusal hareketin anlamı şudur: Belirli oranlarda, X ve Y koordinatlarının aynı anda artırılmasıdır. Peki bu ne demekdir ? Örneğin, Daire’nin X değerini "1" ve Y değerini de "1" pixel artırsak. Bu durumda dairenin, hareketi 45 derecelik bir açı ile +X ve +Y yönünde olacaktır.

Biz herhangi bir açı vermeden, sadece X ve Y değerlerini eşit olarak artırdık. Bunun sonucunda, 1 pixel aşağı giderken, 1 pixel de sağa doğru gitme işlemini yaptı. Ve sonucunda 45 derecelik bir açı ile mavi okla belirtilen yönde hareket etti.

Daire.x  +=  5;
Daire.y += 5;

Kod olarak da yukarıdaki gibi eşit değerler verilecektir. 5 rakamını da yazmış olmam, sadece hareket hızını artıracak, ama yönünü değiştirmeyecektir. Çünkü, açısal hareket sadece, X ve Y’nin artırma oranların birbirine göre durumuna bakacaktır.

Bunu şöyle düşünebiliriz. Demek ki "45" derecelik bir açı elde etmek için X ve Y değerlerini eşit artırmak gerekiyor.

Peki, ben +=5 yazacağım yere, 45 dereelik açıyı belirtmek istesem ?.

Açı belirtmeden önce, derece ve radyan durumunu inceleyelim hemen. Öncelikle, derece olarak flash’da işlem yaptıramayız. Flash radyan cinsinden sizden değer bekleyecektir. Yani verdiğiniz açıyı, radyan olarak algılayacaktır. Bu dönüşümü yapmadan direk derece değerini yazarsanız, beklediğiniz sonucu alamazsınız. Bu sebeple

Radyan = açı * Math.PI / 180   

formülü ile radyana çevirmeniz gerekmektedir.

Şimdi devam edelim.

Cos(45) ve Sin(45) birbirlerine eşittir. Demekki ben, ikisinden elde ettiğim değeri, Dairenin X ve Y koordinatına aktarsam, yine bir fark olmayacak, Çünkü, yukarıda da belirttim. Açı vererek hareket ettirmek, artırma derinize değil, X ve Y’nin değerlerinin birbirine göre oranlarıyla belirlenir.

Yukarıdan yola çıkarak, Daire’nin Y koordinatındaki hareketi dikey haraket olduğunu hepimiz biliyoruz. Dikey eksen Y ekseni, Y ekseni ile işlemler Sinüs ile yapılır (basit ve pratik anlamda). Aynı şekilde, X koordinatı ile hareket yatay eksende ve X ekseni üzerinde olmaktadır. X eksenine göre işlemler ise Cosinüs ile yapılacaktır.

Şimdi 45 derecelik açıyla hareketi biraz formülüze edebiliriz.

Evet resimde;

1. Satır da, 45 derecenin karşılığı olan radyan birime çevrilmektedir.

4. satırda, X ekseninde işlem yaptığım için, Cos() kullandım. Ve 45 derecelik açının Cosinüsün aldım. Bu değer, yaklaşık 0.7’dir. Bu sayısı 5 ile çarptım ve sonuç olarak 3.5 pixel değerinde bir artırma meydana geldi.

Aynı şekildei 5. Satır da da Y ekseni ile işlem yapacağım için, Sin() kullandım. Sinüs 45 derece de 0.7 gibi bir rakama denk geleceğinden dolayı, artırma için denge bozulmamış oldu. Yani Y ekseninde de 3.5 pixel artacaktır.

Direk olarak, 3.5 de yazmış olsaydım aynı anlama geliyordu.

Peki neden, Cos. ve Sin.’leri formüle ekledim. Çünkü, 30 derece ile hareket etmesini istesem, Mantık olarak X değerinin biraz daha fazla artırmam gerekiyordu. Mesela, Y değerini 3 artırırsam, X değerini 5 artırmam gerekiyordu. Bu da X tarafına daha hızlı gidecek ve sonuçta belirli bir açı oluşturacak demektir. Bu durum grafikle bakalım;

Grafikte de görüldüğü gibi, 30 derecelik açı elde edebilmek için, X değerini Y değerine göre daha fazla artırmak gerekiyor. İşte bu değerleri bizim düşünmemize gerek yok. Cos ve Sin kullanarak X için artması gereken oranı ve Y için artması gereken oranı yukarıda yazdım formül ile hesaplatmış oluruz.

Cos (30)  yaklaşık 0.8 dir. Sin (30)  ise yaklaşık 0.5’dir. Dikkat ederseniz X değeri için katsayı daha büyüktür. Bu durumda yukarıdaki X daha fazla artırılmalıdır mantığımıza denk gelmektedir.

Formülümüzü artık net yazalım.

Önce, Cos ve Sin ile artırma oranlarını hesaplayıp, daha sonra, İlgili objenin, X ve Y değerlerine ekliyoruz.

Şimdilik bu kadar, Daha sonraki derslerde, konular ilerleyerek devam edecek. İvme, Momentum, Sürtünme v.b. konuları da vakit buldukça ders olarak hazırlamaya çalışacağım.

İyi çalışmalar dilerim. Ersin Şengül