Tween Class ile Animasyon Teknikleri

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….

Reklamlar

Bir Yanıt to “Tween Class ile Animasyon Teknikleri”

  1. Tahir GENÇTOĞ Says:

    hocam çok yararlı bir makale gerçekten.Bunlarla neler yapılır neler 😀

Bir Cevap Yazın

Aşağıya bilgilerinizi girin veya oturum açmak için bir simgeye tıklayın:

WordPress.com Logosu

WordPress.com hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap /  Değiştir )

Google+ fotoğrafı

Google+ hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap /  Değiştir )

Twitter resmi

Twitter hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap /  Değiştir )

Facebook fotoğrafı

Facebook hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap /  Değiştir )

Connecting to %s


%d blogcu bunu beğendi: