Tween Class ile Animasyon Teknikleri
Yazar : E.Altuğ YILMAZ
Merhaba arkadaşlar ;
Flash içerisindeki Actionscript ile animasyon yeteneklerinizi geliştirecek bazı sınıflar vardır. Bunlardan en önemlisi Tween Class ile bir Movie Klip nesnesini sahnede sadece kod ile çok esnek bir animasyon yaptırabilirsiniz. Esnek derken süresinden,tipine,özelliklerine ve easingine kadar matematiksel olarak karar verebilirsiniz. Ve bir animasyon bitmeden diğeri tekrardan hesaplanarak yürüyen animasyona katılabilir.Bu yazımdaki kodları hem 2.0 hem de 3.0 olarak anlatacağım.
Actionscript 2.0 :
______________________________________________________________________
import mx.transitions.*
import mx.transitions.easing.*
var basla:Tween
basla = new Tween(daire_mc,"_x",Back.easeIn,200,400,1,true)
______________________________________________________________________
Sahnemizde duran daire_mc instance name'ine sahip bir nesneye Tween Class'ı ile bir animasyon yaptırdık. Burada ilk 2 satırda gerekli class isimlerini çalışmaya belirterek import ediyorum.mx versiyonunda gelen bir class oldugundan mx geçiyor bu satırda. 3.satırda ise basla isimli bir tween degiskeni tanımlıyorum.4.satırda da bu basla tween nesnesine Tween class yardımıyla bazı parametreler atıyorum.
daire_mc : animasyonun atanacak olduğu movie klip instance name'i
"_x" : Movie Klip'in hangi property'sinde animasyon yapılacağı (width,alpha,scale..)
Back.easeIn : Animasyon tipi ve ease versiyonu.
200 :Animasyon başlangıç değeri
400 :Animasyon bitiş değeri
1: Animasyon süresi (saniye cinsinden)
true : Animasyonu saniye bazlı hesaplanacağı (false olursa frame bazlı hesaplar)
Actionscript 3.0 :
______________________________________________________________________
import fl.transitions.*;
import fl.transitions.easing.*;
var basla:Tween;
basla = new Tween(daire_mc, "x", Back.easeIn, 200, 400, 1, true);
___________________________________________________________________
Aynı animasyonun 3.0 ile yazılışıda yukarıda.Parametreler aynı olduğundan değişen class isimlerine dikkat etmeniz yeterli olacaktır.
Gelin buradaki Back Tween animasyonu yerine kullanabileceğiniz diğer animasyon tekniklerini sıralayalım ve merak edenler tek tek yazarak denesin anlatmaya çalışmayacağım denedim komik oluyor :)
___________________________________________________________________
Back , Bounce, Circular, Cubic, Elastic, Exponential, Linear, Quadratic, Quartic, Quintic, ve Sine.
___________________________________________________________________
Back ve Elastic çok sık tercih edilenleridir. Gelelim kombine edebileceğiniz animasyon tiplerine bir nokta koyduktan sonra eklenebilen kodla ease tiplerine.
___________________________________________________________________
easeIn , easeOut , easeInOut , easeNone .
___________________________________________________________________
Ease tipleriyle de bu tween animasyonlarının ivmelerine karar verebilirsiniz.Hızlanıp yavaşlayarak animasyonu tamamlayabilir ya da tam zıttı.Yerçekimi ve arayüz geçişlerinde çok lazım olan bir ayar. Back.easeOut veya Elastic.easeInOut gibi kombineler yapabilirsiniz.
Tween animasyonları ile ilgili çok lazım olan bir durumda tween animasyonun metodları. Tween animasyonuna ancak bu metodlarla müdahale edebiliyoruz. Direk bir butonun çalıştıracağı fonksiyon içine yada frame'e yazabilirsiniz.
___________________________________________________________________
Tweenadi.yoyo() : Geri alır.
Tweenadi.fforward() : En sonuna alır.
Tweenadi.start() : Animasyonu sıfırdan başlatır.
Tweenadi.stop() : Animasyonu durdurur.
Tweenadi.nextFrame() : Durdurulmuş animasyonun bir frame sonrasına alır.
Tweenadi.prevFrame() : Durdurulmuş animasyonun bir frame öncesine alır.
Tweenadi.resume() : Durdurulmuş animasyonu kaldığı yerden devam eder.
Tweenadi.rewind() : Durdurulmuş animasyonu kaldığı yerden geri devam eder.
___________________________________________________________________
En son olarakta eğer runtime ziyaretçinin bu tween'e müdahale etmesine izin verdiğiniz (mesela bir oyunda) ancak tween'in tamamlandığında bir fonksiyon çalıştırmak istiyorsunuz (oyun bitti gibi) bunun içinde :
___________________________________________________________________
Tweenadi.onMotionFinished() : Tween animasyonu tamamlandığında.
Tweenadi.onMotionResumed() : Tween animasyonu duraklatıldığında.
Tweenadi.onMotionStarted() : Tween animasyonu başlatıldığında.
Tweenadi.onMotionStopped() : Tween animasyonu durdurulduğunda.
___________________________________________________________________
Faydalı olması dileğiyle....
15/10/08
15/10/08
hocam çok yararlı bir makale gerçekten.Bunlarla neler yapılır neler :D