Temelde harekete eden birçok şey insanoğlunun etkisini çekmiştir. Mesela çocuklar ilk defa gördükleri hareket eden bir nesneyi dikkatle izlerler, belki hepsi değil ama çoğu öyledir, en azından benim gördüğüm kadarıyla. Bu sistem aslında yetişkinlerde de aynıdır, mesela güzel animasyonlarla süslenmiş bir siteye girdiğimizde dikkatimizi neyin nasıl hareket ettiği çeker. Aslında kimse bu eylem için bir çaba harcamaz ama beyin bu işleve öyle alışmıştır ki, her şeyi kendiliğinden yapar. Mesela yürümek için düşünmemiz gerekmez, yürüme eylemini gerçekleştirirken nasıl adım atacağınızı düşünmezsiniz, çünkü bunu zaten biliyorsunuzdur.

Peki, gerçek hayatta sorunsuz bir şekilde yaptığımız her şeyi programlama da yapabilirmiyiz? Flash içerisinde bir nesneyi hareket ettirmek için neye ihtiyaç duyarız? Bu nesneye nasıl yön veririz, nesnenin harekete başlayacağı ve duracağı noktası neresidir? Bu hareket noktalarının sınırları nelerdir? Hareket hızı nedir?

Sorulacak olan soruda sınır olmadığı gibi, cevaplamanın da bir den çok farklı yöntemi vardır. Bu makalede temel olarak flash içerisinde fizik ile animasyon temellerini anlatacağım.

Hareket bir nesnenin bulunduğu konumdan başka bir konuma doğru belirli bir kuvvet uygulanarak zamana karşı yer değiştirmesidir. Animasyon ise harekettir. Bir animasyonun gerçekleşmesi için belirli bir hareketin olması gereklidir. Yani, nesne belirli bir zaman içerisinde yer değiştirdikçe, animasyon gerçekleşir.

Newton birinci yasası eylemsizlik ile ilgilidir. Eylemsizlik yasasına göre bir cisme dışarıdan bir kuvvet etki etmediği sürece ya sürekli olarak aynı yerde durur ya da sabit bir hızla doğrusal hareketini gerçekleştirir.

Bunu biraz açıklayalım, düz bir zeminde duran bir topa herhangi bir kuvvet uygulanmayana kadar top hareketsizdir, herhangi bir eylemi gerçekleştirmemektedir. Topa kuvvet uygulandığında ise top kuvvetin uygulandığı yönün aksine doğru hareket eder;

Topa kuvvet uyguladığı andan itibaren top harekete geçer, harekete geçen top uygulanan kuvvet miktarı, topun ağırlığı, rüzgar, yer çekimi gibi etkenler dahil edilerek belirli bir süre hareket eder.

Peki, bu işlemi flash içerisinde nasıl yapabiliriz, yani bir topu flash içerisinde nasıl hareket ettirebiliriz. Bunun için iki yol var aslında birincisi frameler yardımıyla animasyonu gerçekleştiririz. Her bir frame topun bulunduğu farklı bir koordinatı yerleştiririz. Swf dosyasını export ettiğimizde her bir frame sırayla çalışır ve biz topun hareketine şahit oluruz. Bu bir animasyondur.

Birinci yol yani framelerle animasyon yapmak güzel bir yol aslında ama eksileri çok, hata yaptığınızda geri dönüşünüz çok zor, işlemleri tekrar tekrar yapmanız gerekir, her şeyi sil baştan oluşturmak tabi ki zor. İkinci yöntem ise kodlarla animasyon yapmak, kodlarla animasyon yapmak bana göre hem daha zevkli hem daha kolay. Çoğu kişiye ilk başta zor gelebilir, ama alıştıkça daha kolay ve daha hızlı bir şekilde yapmak istediğiniz işlemleri gerçekleştireceksiniz. Şimdi aynı şekilde flash içerisine topumuzu nasıl animasyon uygulayabileceğimize bakalım. Aşağıdaki örnekte butona tıkladığınızda topun hareket ettiğini görüyorsunuz.

Not: Uygulamaya bu adresten ulaşabilirsiniz.

Kodlar;

//Butona olay dinleyicisi ekliyoruz
start_ball.addEventListener(MouseEvent.MOUSE_DOWN, startBall);
//butuna tıklandığında aşağıdaki fonksiyon ile topun hareketi için yeni bir olay dinleyicisi ekliyoruz.
function startBall(e:MouseEvent):void {
    //topun x değerine 15 vermemizin sebebi tekrar butuna tıkladığımızda başa dönmesini istememiz.
    ball_mc.x = 15;
    //Hızı tekrar 20 olarak ayarlıyoruz
    speed =20;
    this.addEventListener(Event.ENTER_FRAME, moveTheBall);
}
//hızımızı berliliyoruz
var speed:Number =20;
//Topun hareket etmesini sağlayan Fonksiyon
function moveTheBall(e:Event):void {
    //topun koordinatını belirliyoruz
    ball_mc.x += speed;
    //Top sahnedeki x koordinat değeri 450 sayısını geçerse eğer olay dinleyicisini kaldırıyoruz
    //Böylece top sahnenin dışına çıkmamış oluyor
    if (ball_mc.x<450) {
        this.removeEventListener(Event.ENTER_FRAME, moveTheBall);

    }
}

Bu örneğin nasıl çalıştığına dönersek eğer, ENTER_FRAME olayı ile her frame yenilendiğinde moveTheBall fonksiyonu devreye giriyor. Fonksiyon içerisinde ise topun o anki x koordinatına 20 eklenerek yeni x koordinatı belirleniyor. Böylece topun sürekli hareketi sağlanıyor. Topun sahnedeki x koordinat değeri 450 sayısını geçerse eğer olay dinleyicisini kaldırıyoruz, buda animasyonun durmasına neden oluyor.Burada bizim hareket yönümüz x koordinatı bu y koordinatı da olabilir. Hatırlarsanız biraz önce hareketin kuvvetin aksi yönde olduğunu söylemiştim. Flash içerisinde bu yapı yok aslında yani gerçek bir kuvvet yok, bizim yukarda yaptığımız animasyon da topa bir kuvvet uygulamadık, sadece x pozisyonu değiştirdik, bunu sürekli hale getirdiğimizde ise animasyon meydana gelmiş oldu. Tabii bu bunu gerçekleştiremeyiz anlamına gelmez. Flash içerisinde de gerçek fizik kurallarını uygulayabilirsiniz. Basitten başlayalım mesela yukarıdaki örneğimizi bir hız örneği olarak görebilirsiniz, sabit hızda ilerleyen bir top. Gerçek hayatta bir topa vurduğunuzda top hızla hareket eder, daha sonra yavaşlar ve durur. Peki, aynı mantığı flash içerisinde nasıl yapacağız? Dikkatli düşünürseniz eğer topun ilerledikçe yavaşladığını yani hızının düştüğünü anlayabilirsiniz. Yani tek yapmamız gereken topun hızını düşürmek. Aşağıdaki örnekte butona tıkladığınız zaman ilk önce top normal hızıyla başlıyor daha sonra bu hız giderek düşüyor.

Not: Uygulamaya bu adresten ulaşabilirsiniz.

Kodlar;

//Butona olay dinleyicisi ekliyoruz
start_ball.addEventListener(MouseEvent.MOUSE_DOWN, startBall);
//butuna tıklandığında aşağıdaki fonksiyon ile topun hareketi için yeni bir olay dinleyicisi ekliyoruz.
function startBall(e:MouseEvent):void {
    //topun x değerine 15 vermemizin sebebi tekrar butuna tıkladığımızda başa dönmesini istememiz.
    ball_mc.x = 15;
    //Hızı tekrar 20 olarak ayarlıyoruz
    speed =20;
    this.addEventListener(Event.ENTER_FRAME, moveTheBall);
}
//hızımızı belirliyoruz
var speed:Number =20;
//yavaşlama ivmesini berliliyoruz.
var ax:Number =0.4;
//Topun hareket etmesini sağlayan Fonksiyon
function moveTheBall(e:Event):void {
    //Hızdan ivmeyi çıkarıyoruz
    speed -= ax;
    //topun koordinatını belirliyoruz
    ball_mc.x += speed;
    //Top sahnedeki x koordinat değeri 450 sayısını geçerse eğer olay dinleyicisini kaldırıyoruz
    //Böylece top sahnenin dışına çıkmamış oluyor
    if (ball_mc.x<450) {
        this.removeEventListener(Event.ENTER_FRAME, moveTheBall);
    }
}

Kodlarda ise pek bir değişiklik yok aslında sadece, ivme için ax adlı bir değişken oluşturuyoruz, bu değişkene verdiğimiz değer frame her yenilendiğinde hızdan belirli bir değer düşürüyor, böylece topumuz yavaşlamış oluyor.

Peki, şimdiye kadar sorunumuz yok, ya yer çekimi, biz yer çekimini hiç hesaba katmadık, bir topu havadayken bıraktığınızda top yere düşer, yere düşme sebebi yer çekimidir. Ünlü hikâyeyi hepiniz bilirsiniz Isaac Newton bir elma ağacının altında otururken, başına bir elma düşür ve "Bingo" yer çekiminin kafasına şekillenmesine neden olmuştur. Peki, nedir yer çekimi? Yer çekimi kısaca yeryüzündeki cisimleri yere(ya da merkeze) doğru çeken bir kuvvettir. Şimdi bu kuvveti flash içerisinde nasıl hayata geçirebileceğimize bakalım.

Baştan başlamak gerekirse yer çekimi için öncelikle bir yerimiz(taban) olması gerekiyor. 550×400 ölçülerinde bir sahneniz var, bu sahnede y koordinatında tabanımızı 350 olarak ayarlıyoruz. Peki, sizce yer çekimini nasıl oluşturabiliriz? Biraz önce yaptığımız örnekte ne yaptığımızı hatırlarsanız, topa belirli bir hız veriyorduk, sonra bu hızdan ivmeyi çıkararak yavaşlatıyorduk. Top belirlediğimiz noktaya geldiğinde ise animasyonu durduruyorduk. Şimdi bizim y koordinatında tabanımız 350.Yani topumuz 350 piksele geldiğinde yere çarpıp yukarıya doğru geri gidecek. Yani topun düşüş hızı eksi olacak. Burası çok önemli topun hızı eksi olduğunda top tekrar yukarıya doğru hareket edecek. Tabii şunu unutmamak gerekir hala bir ivmemiz var ve bu ivme iki tarafta da çalışıyor, hem yukarıya doğru hem aşağıya doğru. Aşağıdaki örnekte butona tıkladığınız zaman nasıl çalıştığını göreceksinizdir.

Kodlar;

function moveTheBall(e:Event):void {
    //Hıza ivme ekliyoruz
    speed += ay;
    //topun yeni konumunu bekliyoruz
    ball_mc.y += speed;
    //eğer topun y değeri+topun yüksekliği floor değerini geçerse
    //diğer bir deyişle top yere ulaştığında hızı sıçrama değer ile çarpıp
    //hızı negatif yapıp topun yukarıya çıkmasını sağlıyoruz.
    if (ball_mc.y + ball_mc.height < floor) {
        //Topun floor değerini geçmemesini sağlıyoruz.
        ball_mc.y = floor - ball_mc.height ;
        //hızı ters çeviriyoruz.eğer negatif se pozitif, pozitif se negatif yapıyoruz
        speed *= bounce;
        //sıçrama sayısını bir arttırıyoruz
        i++;
    }
    //Sıçrama sayısı 14 eşit olduğunda olay dinleyicisini kaldırıyoruz.
    if (i==14) {
        this.removeEventListener(Event.ENTER_FRAME, moveTheBall);
    }
}

Şimdilik bu kadar, yukarıdaki örneklere benzer birçok örnek geliştirilebilir. Bu makaledeki esas amacım temelleri vermekti. Örneklere bir den çok etken ekleyebilirsiniz, rüzgar, sürtünme vb..

Kaynak Kodlar

Kolay Gelsin Engin Yöyen