Photoshop Magazin
 


Tween Class Kullanarak Dinamik Animasyon

01 September 2009 | Sayı: Sep 2009
 
1 2 3 4 5
 

Neden Tween Class?
Bu sorunun cevabı çok basit. İş akışımızı hızlandırmak
için. Geleneksel Timeline arayüzüyle
Motion Tween kullanarak yaptığımız bir animasyon basit ve daha hızlı bir çözüm olarak görünse de sahnedeki semboller ve bunların animasyonları iç içe girmeye başladıkça ortalığın ne kadar karışmaya başladığını rahatlıkla görebiliriz.

ActionScript ile yaptığımız animasyonların Timeline bağımlılıkları olmadığı için kendi içinde yaptığımız değişiklikler diğer sembollerin animasyonlarını olumsuz etkilemeyecektir.

Tween Class kullanarak istediğimiz animasyon sonucunu farklı varyasyonlar deneyerek daha hızlı bir şekilde elde edebiliriz.

Sahnemizi Hazırlayalım
•640x320 px boyutlarında, 30 fps hızında bir flash dosyası açalım ve index.fla ismiyle yeni bir proje klasörüne kaydedelim.
•Sahneye 50x50px boyutlarında bir daire çizelim ve seçtikten sonra F8 komutu ile Movie
Clip sembolü haline getirelim, instance name olarak da örnek_mc ismini verelim.
•F9 veya menüden Window>Actions komutuyla
ActionScript yazabileceğimiz paneli açalım.

Tween Class Kullanımı
Tween kelime olarak aradakilerin geçişi anlamına geliyor. Timeline üzerinden Motion Tween kullanarak yaptığımız bir animasyonda nesnenin başlangıçtaki ve bitişindeki hallerini keyfame içinde belirtiyorduk. Motion Tween aradaki geçişi sağlıyordu.

ActionScript ile aynı işlemi daha kontrollü bir şekilde elde edebiliriz. Nesnelerin herhangi bir özelliğini belirttiğimiz süre içinde azaltıp çoğaltabiliriz. Örneğin, nesnelerin şeffaflığını değiştirebilir, sahne üzerinde yeniden konumlandırabilir veya boylarını büyültüp küçültebiliriz. Tween Class’ı öncelikle bulunduğu paketin adresiyle beraber çalıştığımız dosyanın içine çağırmamız gerekir, kullanacağımız

Class’ın kendisini çalışmamızın içine tanıtmadan bu Class’ın özelliklerine veya metodlarına erişemeyiz.

import fl.transitions.Tween;
import fl.transitions.easing.*;
Çağırma işlemini import komutuyla yapıyoruz. Yukarıdaki kodda birinci satır; fl paketinin içindeki, transitions paketinin içindeki, Tween Class’ı çağır anlamına geliyor. İkinci satırda ise Tween Class ile yapacağımız animasyonların kullanacağı ivme çeşitlerini çalışmamıza çağırıyoruz;

fl paketinin içindeki, transitions paketinin
içindeki, easing paketinin içindeki, bütün Class dosyalarını çağır anlamına geliyor. Artık çalışmamız Tween Class’ı ve bütün   ivme Classlarını tanıyor.

Yapmak istediğimiz şey; sahnede bulunan daireyi mouse ile klikleyerek taşımak ve bıraktığımız yerden de sanki ortamda yer çekimi varmış gibi düşmesini sağlamak. Bunun için nesneye olay dinleyicisi eklememiz gerekiyor. Bu sayede programa, nesnenin üzerinde kliklediğimiz zaman ne yapması gerektiğini ve bıraktığımız zaman ne yapması gerektiğini söyleyebiliriz.
örnek_mc.addEventListener(MouseEvent.MOUSE_
DOWN, sürükle);
function sürükle (m:MouseEvent):void {
örnek_mc.startDrag();
}
örnek_mc ismindeki dairemizi mouse düğmesinin basılı olması olayıyla dinlemeye başladık, bu olay gerçekleştiği zaman program sürükle isimli fonksiyonu çalıştıracak. Movie Clip Class’ının startDrag metodu nesneleri çalışan dosyanın içinde taşımamızı sağlıyor. Menüden Control>Test Movie komutuyla uygulamamızı çalıştırıp yaptığımızı deneyelim. Sahnemiz Flash Player içinde çalışır durumda açılacak. Artık mouse ile nesnenin üzerine gelip düğmesine basarsak nesneyi Flash Player içinde taşıyabiliyoruz. Dikkat ederseniz şu anda nesneyi taşımaya başladıktan sonra elimizden bırakamıyoruz. Bunun sebebi henüz programa elimizi mouse düğmesinden çektiğimiz zaman ne yapması gerektiğini söylemedik. ActionScript paneline geri dönüp bu olayı da tanıtalım. Düğmeden elimizi çekmemiz farklı bir olay olduğu için ayrı bir olay dinleyicisine ve bu olayın tetikleyeceği fonksiyona ihtiyacımız var. Yazdığımız kodun altına aşağıdaki satırları ekleyelim.
örnek_mc.addEventListener(MouseEvent.MOUSE_
UP, birak);
function birak (m:MouseEvent):void {
örnek_mc.stopDrag();
}

Uygulamayı şimdi çalıştırırsak mouse ile nesneyi taşıyabildiğimizi ve elimizi düğmeden çektiğimiz zaman da nesneyi bırakabildiğimizi görüyoruz. Elimizi düğmeden çektikten sonra nesnenin aşağı düşmesini sağlayabilmek için birak isimli fonksiyonun içine Tween komutumuzu yazacağız. Ama önce komutun yazılımına bakalım.

new Tween(nesneninAdı, “özellik”, ivme, başlangıç,
bitiş, süre, saniyeKullan);
•Nesnenin Adı: Kullanacağımız nesnenin sahnedeki adı veya nesneyi kod yazarak elde ettiysek nesneyi sakladığımız değişkenin adı. Örneğin; örnek_mc, textKutum_txt, menü Çubuğu
•Özellik: Nesnenin animasyon haline getirilecek özelliği. String data tipiyle yani tırnak içersinde belirtilmeli. Örneğin; “y”, “width”, “alpha”
•İvme: Kullanacağımız ivme efekti. Örneğin; Strong.EaseOut, BounceEaseIn, ElasticEaseInandOut
•Başlangıç: Nesne özelliğinin başlangıç değeri
•Bitiş: Nesne özelliğinin başlangıç değeri
•Süre: Animasyonun süre olarak ne kadar süreceği,
bir sonraki parametreye göre saniye veya kare sayısı
•SaniyeKullan: Buranın değerini true yaparsak bir önceki parametreye yazdığımız değer saniye olarak kabul edilecek, false olması halinde kare sayısı olarak kabul edilecek. Bu bağlamda birak isimli fonksiyonumuzu aşağıdaki şekilde değiştirelim ve tekrar çalıştıralım.

function birak (m:MouseEvent):void {
örnek_mc.stopDrag();
new Tween(örnek_mc,”y”,Bounce.easeOut,örnek_mc.y,270,1,true);
}
Artık nesnemiz bıraktığımız yerden, bizim belirttiğimiz koordinata, belirttiğimiz hızla düşüyor ve ivme olarak da Bounce kullandığımız için zıplıyor. Kullanabileceğimiz altı farklı ivme çeşitinin açıklamalarını aşağıda bulabilirsiniz.


•Regular: Nesnenin animasyon haline getirilen özelliği özel bir ivme efekti kullanmadan belittiğimiz başlangıç değerinden bitiş değerine gidiyor.
•Bounce: Nesnenin özelliği bitiş sayısına ulaştığı zaman bir miktar tekrar geldiği yöne gidecek ve bu işlem belirttiğimiz bitiş değerinde durana kadar her seferinde azalarak devam edecek.
•Back: Nesnenin özelliği bitiş değerine ulaştığı zaman durmayacak fakat bu sefer geldiği yöne geri dönmeden aynı yönde azalarak devam edecek.
•Elastic: Nesnenin özelliği hem Bounce hem de Back yöntemi kullanmışız gibi hareket edecek.
•Strong: Regular ile aldığımız sonucu daha keskin bir şekilde uygulayacak.
•None: Herhangi bir ivme kullanımayacak.Kullanacağımız ivme çeşitlerinin nasıl hızlanıp yavaşlayacaklarını da aşağıdaki ivme metodlarıyla belirtiyoruz.

easeIn: İvme efekti animasyonun başına eklenecek.
easeOut: İvme efekti animasyonun sonuna eklenecek.
easeInOut: İvme efekti animasyonun hem başına hem de sonuna eklenece.
easeNone: Eğer ivme efekti kullanmak istemiyorsak bu metodu kullanıyoruz. Sadece None ivme efektiyle beraber kullanabiliriz. Nesnelerin farklı özelliklerini farklı ivme çeşitleriyle deneyip bunların animasyonunuzda yapacağı
değişiklikleri gözlemleyebilirsiniz.

 

September 2009

 


ActionScript