Bu dersimizde, movieclip'in, mouse'un hareketine gore dönme açısını değiştiren ve mouse'un konumuna doğru hızlanarak ivmeli hareket yapmasını sağlayan formula inceleyeceğiz.

Resimde de görüldüğü gibi, movieclip'imiz (MC olarak kullanacağım), mouse'un bulunduğu yere gore açısını ayarlayacak ve mouse'a doğru hızlanarak hareket edecek. Öncelikle oluşturduğunuz MC'nin görsel olarak doğru davranabilmesi için, MC'yi oluştururken "Registration" noktasını doğru belirlemeniz gerekmektedir. Çünkü, actionscript ile transform işlemlerinin odak noktası, "registration" noktası olacaktır. Yukarıdaki "1. hali" durumundaki MC'yi düşünürsek, registration notkası üst orta bölgesi olmalıdır ki doğru görsellik yakalayalım. (Tavsiye :Ok işareti oluşturacaksanız, movieclip oluşturmadan once, yatay ve sağ yönü gösterdiği şekilde konumlandırıp (başlangıç yatay sıfır olması açısından) ve registration noktasını ise sağ orta nokta seçmelisiniz.)

Yapacağımız işlem aslında 2 adet. Öncelikle, MC'nin yönünü, mouse'a doğru çevirmek. Yani "MC.rotation" özelliğine bir değer atamamız gerekecek. Objeleri döndürmek için kullanılan özelliğin "rotation" olduğunu bildiğinizi düşünmeme rağmen tekrar hatırlatmak istedim. Peki, rotation değeri ne olacak açı hangisi ? Hemen bu soruya cevap verelim. Öncelikle grafik üzerinde, mouse ve MC'nin konumuna ve birbirlerine gore duruşlarının oluşturduğu üçgene bakalım.

Not : Mouse'un ilgili andaki x ve y koordinatlarını "mouseX ve mouseY" ile elde ederiz. Bu özellikleri direk olarak kullanabiliriz. Hiçbir ön eke gerek yoktur. (Local koordinatlar dışında ki bu konumuz değil şu an) Yukarıdaki resimden de görüldüğü gibi, mouse'un ve MC'nin kesik çizgileri 90 derecelik bir açı ile duracak şekilde birleştirdiğimizde, dik açılı ücgen elde etmiş oluruz. Bu system, genelde tüm geometric işlemlerde kullanılmaktadır. 2 objenin birbiri ile açısal veya mesafe ilişkisi var ise (burada mouse ve MC ikilisi bulunuyor.) Bizim ihtiyacımız olan açı, baloncuk ile gösterilen nokta olacaktır. Bu açı bir ücgenin iç açılarından 1 tanesi olduğuna gore, açıyı hesaplamak için sadece 2 kenarın uzunluğunu bulmam yeterli olacaktır. Mouse ve MC'nin konumlarını bir koordinat düzleminde gösterecek olursak, aşağıdaki gibi bir görüntü ortaya çıkacaktır.

Yukarıdaki resimde hangi kenarlarını elde edebileceğim açıkça görülmektedir. Üçgenin kesik çizgilerle çizilmiş olan kenarlarını rahatlıkla bulabilirim. Daha once "Geometri Animasyon -I" ' de işlediğim pisagor bağıntısı burada da kullanılabilir. Ama pisagor bağıntısı, üçgenin kırmızı çizgi ile çizilmiş olan (hipotenüs) kenarının uzunluğunu verir. Şu an hipotenüs ile hiçbir işimiz yok. Çünkü bizim tek amacımız, gösterilen açıyı bulmak. Bu açıyı hesaplayabilmek için ise, üçgenin 2 kenarını elde etmek. Hangi kenarlarını daha rahat elde ederim sorusunun cevabı ise, kesik kırmızı çizgilerin olduğu kenarlar olacaktır.

Sanırım yukarıdaki resim ile, daha önceki dersimizden, kenarların nasıl bulunacağınız anlamış oldunuz. Burada yapmamız gereken işlem şudur. Yatay kenarı (dx) bulmak için, MC'nin ve mouse'un x koordinatlarının farkını almak. Buda bize doğal olarak üçgenin kesik kırmızı çizgili yatay kenarının uzunluğunu verecektır. Aynı şekilde, dike kenarı bulmak için (dy), MC'nin ve mouse'un y koordinatlarının farkını almak gerekecektir. Bu sonuç da bize, kesik kırmızı çizgili olan dikey kenar uzunluğunu vermiş olacak. Şimdi buraya kadar anlattıklarımı actionscript olarak belirtelim. Öncelikle, sahnenize resimde görülen türden bir movieclip çizdiğinizi ve instancename'ini de "MC" verdiğinizi düşünelim . Sonra keyframe'I seçip yazmaya başlayalım. Sonuçta rotation da bir animasyon olduğundan dolayı, bir süreklilik var demektir. MC bulunduğu rotation değerinden, mouse'a gore dönmesi gereken rotation değerine animasyon yaparak dönmesi gerekiyor. Bu da MC'nin açısını artırmak veya azaltmak demektir. Süreklilik varsa "ENTER_FRAME" eventini kullanmak en mantıklı çözüm olacaktır. Hemen event'imizi ve event'in çalıştıracağı fonksiyonu oluşturalım.

Artık , yukarıda bahsettiğimiz üçgenin iki kenar uzunluğunu bularak işe başlayabiliriz. Yapacağımız adımlar.

1. Önce kenarlar uzunluklarını bul . Bu kenarlara dx ve dy diyebiliriz.

2. Sonar bu kenarları kullanarak ihtiyaç olan açıyı elde et. 1. Adım

Yukarıddaki resimde, dx ve dy uzunluklarını, mouse ve MC nin koordinatlarını farkını alarak elde ettik. 2. Adım Elimizde üçgenin dik kenarlarının uzunlukları bulunuyor. Bu değerleri kullanarak açı elde etmek için, tanjant (atan()) fonksiyonunu kullanacağız. Atan() fonksiyonu bizden açı bekler, fakat bizde açı değil 2 adet kenar var. Zaten istedğimiz açıyı bulmak. Açıyı vererek kenar uzunluğunu değil, kenar uzunluklarını vererek açı elde etmemiz gerekiyor. Actionscript içerisinde bunu rahatlıkla hesaplayabiliriz.

Math.atan(değer:Number)  açı bekler ve uzunluk döndürür.[/color]

Math.atan2(dy,dx)  kenar uzunluklarını bekler ve açı döndürür.[color=#4682B4]

Burada bizim ihtiyacımız olan sizinde tahmin ettiğiniz gibi Math sınıfı içerisindeki, atan2() fonksiyonu olacaktır. Dikkat edilmesi gereken konu ise, dönecek olan açının radian cinsinden oluşu ve rotation da kullanacağımız açının cinsi ise derece olacaktır. Arada bu dönüşümü unutmamamız gerekiyor. Şimdi gerekli bilgileri yerine koyarak actionscript'imize devam edelim.

Şu an , dx ve dy'yi hesapladık. (3. ve 4. satırlar) Bu uzunlukları kullanarak, MC'nin o andaki durumu ile mouse'un durumuna gore olan açı farkını atan2() ile hesapladık.(5. satır) Radyan olarak bulunan açıyı derece cinsine dnüştürdük (6. Satır.) MC'nin rotation değerine açı değerimizi atayarak rotation işlemini tamamlamış olduk. (7. satır) Şimdi 2. Işleme gelelim. MC'yi mouse'a doğru döndürdüğümüze gore, şu an kalan işlem, mouse'a doğru ivmelenerek hareket etmesi olacak. Mouse'a gore hareket etmek sözünden çıkan sonuç, açı kullanarak doğrusal hareket işlemi yapmak demektir. İvmeyi, yani gittikçe hızlanmasını da sağlarsak işlemimiz bitmiş olucak. Açı kullanarak doğrusal hareketi "Geometrik Animasyon - I" dersinde işledim bu sebeple direk olarak formula yazarak devam edeceğim. Yine de hatırlatayım, açı kullanarak doğrusal hareketin temelde anlamı, bir objenin x ve y koordinatlarının aynı anda belirli katsayılar ile artırılması anlamına gelmektedir. Belirli bir açıda hareket ettirmek için, X ve Y hangi oranlarda artırmak gerekir bunu bulmak uzun işlem olduğundan dolayı. X katsayısı için Cos(aci) ve Y katsayısı için de Sin(aci) fonksiyonlarını kullanmamız gerekecek. (radian açı kullanılmalıdır.) Şimdi actionscript kodlarımızı biraz daha geliştirelim.

8. ve 9. satırlarda atan2() ile elde ettiğim radian açısını kullanarak, MC'nin X nin ne kadar bir oranla artacağını ve Y'sinin ne kadar bir oranla artacağını elde etmiş olduk. Bu değerler, MC'nin X ve Y değerlerine eklenerek hareketi sağlamış olacağız. Fakat ivmelenme istediğimiz için, hareketin hızlanarak meydana gelmesi gerekiyor. Eğer direk olarak ivmeX ve ivmeY'yi MC'nin X ve Y'sine eklersek, ivmelenme meydana gelmeyecek ve sabit hızda hareket oluşacaktır. ivmeX ve ivmeY olarak bulduğumuz değerlerin oranı değişmesin ( açıya sadık kalabilmek için bu şarttır.) ama değerleri katlanarak artsın sorusuna cevap bulmamız gerekiyor. Bunu da pratik olarak çözmek gayet basittir. Öncelikle x ve y için, başlangıç değeri sıfır olan 2 adet değişken oluştururuz. Ivme değerlerini MC'nin x ve y sine eklemektense, bu yeni oluşturacağımız 2 adet değişkene ekleriz ve daha sonar dab u eni değişkenleri MC' nin x ve y değerlerine ekleriz. Aklınız karışmış olabilir bu cümleden. Hemen mantığınız görelim. ivmeX ve ivmeY açı sabit kaldığı sürece aynı kalacaktır. 1,1,1,1,1,…. gibi, Fakat, vX ve vY gibi, ilk değerleri sıfır olan değişkene ivmeleri ekleyip, sonra MC' nin değerlerine eklersem durum şu olacaktır. 1, 1+1, 2+1,3+1….. gibi bir mantıkla MC' ye eklenecek değerler katlanarak gidecektir. İşte bu değerler MC'yi gittikçe hızlanan bir hareket yaptıracaktır. Not: vX ve vY olarak tanımlanacak değişkenler, değerleri artması gerektiği için, fonksiyon dışında tanımlanmalıdır.

Satır 1 ve satır 2'de, söyledğimiz gibi ivmelenme hareketini sağlayacak değişkenler tanımlandı. 12 ve 13. satırlarda ise elde edilen ivme sabitleri bu değişkenlere "ekleniyor" . 14 ve 15 .satırlarda ise artık, elde edilen son değerler MC'ye ekleniyor.

İşlemimiz bu kadar.

İyi çalışmalar

Ersin Şengül.