Actionscript 2.0 ve 3.0 Tween Class ile Animasyon Teknikleri
Ercan Altuğ YILMAZ Tarih: 12/10/2008 Yorum: 10 adet
Okunma : 2738 Tutanlar: Bu yazıyı 3 kişi tuttu.
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
- 3: Animasyon süresi (saniye cinsinden)
- true : Animasyonu saniye bazlı hesaplanacağı (false olursa frame bazlı hesaplar)
Actionscript 3.0 :
import fl.transitions.Tween;
import fl.transitions.TweenEvent;
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....
Merhabalar ;
Her animasyon için ayrı tween tanımlanız gerekir. Aşağıdaki gibi bir örnek olabilir mesela.
var basla1:Tween; basla1 = new Tween(daire1mc, "x", Back.easeIn, 200, 400, 1, true);
var basla2:Tween; basla2 = new Tween(daire2mc, "y", Back.easeIn, 200, 400, 1, true);
Bende sorunsuz çalışıyor.
hocam bende moviclip 3 tane filan var..3 ü de aynı anda tween oluyor bazen flashtayken pek sorun olmuyor ama explorerda açınca yada mozillada tekleme oluyor sanki animasyon duruyor 1-2 frame atlayıp tekrar devam ediyor gibi..bayadır uğraşıyorum bir türlü çözemedim..
aklımdayken Bir tanede kaynak site veriyim http://www.monkeyflash.com/flash/tween-class/
burada çok güzel anlatmış twenn class'ı.
Sizi bulmuşken bir soru daha sorayım.konuyla alakasız..
4 tane butonum var bunlardan birine basıldığı zaman diğerleri çalışacak kendisi artık çalışmaz olacak pasif olacak önceden enabled yapınca oluyordu ama as3 te yemiyor bir türlü.Acaba onun ayrı bir kodu mu var??
teşekkürler ilgilendiğiniz için
Merhaba Kerim ;
Flashmonkey güzel anlatmış flashlı uygulaması özellikle,türkçe de bir kaynak lazımdı. Teşekkürler.Ben explorerda da denedim 5 tane tween runtime sorun olmadan çalışıyor aslında artısıda budur ama senin bilgisayardan olabilirmi acaba ?
Soruna gelince 2.0 da butonların üzerine ya da frame'e fonksiyonla kodlarımızı yazdığımızdan dediğin gibi enabled=false ise butonu deaktivie edebiliyorduk ancak 3.0 da biliyorsun addEventListener ile eventlistenerlarla ekliyoruz removeEventListener ile kaldırabiliyorsun.
dugme_btn.addEventListener(MouseEvent.CLICK,tiklandi) function tiklandi (Evt:MouseEvent) { trace("tıkladın") }
dugme_btn.removeEventListener(MouseEvent.CLICK,tiklandi)
Mouse imlecini de kaldırmak istersen :
dugme_btn.useHandCursor=false
işini görecek biliyorsundur. ;)
Kolay gelsin...
Hocam bu kod aklıma gelmişti (remove listener) ama şöyle düşününce herbiri için yapınca baya bişey yazmam gerekiyordu o yuzden bu kodu arka plana bıraktım . son çare yani ama napalım başka yolu yoksa öyle yapacaz..
Siteyi başka bilgisayarlarda denedim yine takılma oldu çok enteresan bazen takılıyor özellikle ilk açtığımda. sayfa yenileyince takılma ortadan kalkıyor birde upload edip deneyeceğim bakalım ne olacak...
teşekkürler ilgilendiğiniz için..
sAOL USTA
Tweenadi.onMotionFinished()
sahnemde olan mc nin surekli loop halinde olmasını istiyorum.
var animasyon:Tween = new Tween(screen, "_y", None.easeIn,234, -400, 30, true);
bu sekilde -400e kadar gidip duruyor. nasıl başa alabilirim?
Tweenadi.onMotionFinished() = function() {
trace("Animasyon tamamlandı") }
ile tamamlandığı çekiliyor.Ayrıca
Tweenadi.yoyo() ile de geri çekebiliyorsun. Loop yapmak gibi bişi yok anca setinterval ile belli bir saniye ile hep yaptıracaksın sanırım ve tweenadı da dinamik olursa belki olur..
kolay gelsin..
Hocam x ve y hareketini tek mc ye vermek istiyorum. Bir Tıkla x ve y değelerine göre kaydırmak istiyorum. Teşekkürler şimdiden
Elinize saglik cok isime yaradi, bu arada soru soran arkadaslara bi kac kucuk notta ben duseyim;
cok sayida tween kullaniyor iseniz ve tweende donma yasiyor iseniz tek yapmaniz gereken, lokalden degil, var myTween:Tween; kismini fonksiyonunuzun disina tasimak.
ornegin siniflari import ederken tween inizi hemen importlarin altina bu sekilde tanitip, arkasindan fonksiyonu yazarsaniz benim de basimi bayagi agritan bir illetten kurtulmus olursunuz:)
Loop icinde myTween.looping = true; seklinde bir uygulama yapabilirsiniz ama hic kullanisli degil. Tavsiyem bi kac hesaplama yapip eventlistener ile movie nin bittigi yerde tekrar baslatmaniz. Orngin;
var hareket:Tween;
hareket= new Tween(myMC,"x",Strong.easeOut,0,350,2,true);
hareket.addEventListener(TweenEvent.MOTION_FINISH, restart);
function restart(event:TweenEvent):void {
hareket.continousTo(0,2);
}
Makale
İlişkili makale bulunamadı.
Haber
İlişkili haber bulunamadı.
Etkinlikler
Toplantı
Özgür Yazılım ve Linux Günleri '10
Özgür Yazılım ve Linux Günleri '10
İstanbul Bilgi Üniversitesi Bilgisayar Bilimleri Bölümü ve Linux Kullanıcıları Derneği'nin 9 yıldır düzenlemekte oldukları etkinlikler bu yıl `Özgür Y...
Kategori:
Toplantı
Kimler Burada? 
Son 1 dakika içinde MMIstanbul' da 58 (50 kayıtlı, 8 ziyaretçi) kullanıcı varmış. Login durumda olanlar aşağıda:
MMIstanbul Blog'undan
Blog Bölümü Blogevi.com'a Taşınıyor
Selam arkadaşlar MMIstanbul'da , tasarımcı ve programcıların blog yazılarını "feedleyerek" MMIstanbul okurlarını MMIstanbul dışın ...
7.500'üncü üyemiz Cem Koç!
Neler Yapılabilir?
500 Hatası Hakkında!
Reklam, MMIstanbul ve Yeni Projeler (Durumumuz Bu Tarzında)











hocam ben bu tween leri ayrı ayrı movie cliplere kullandığım zaman animasyonlarda tekleme oluyor bazen kendi kendine duruyor bunun sebebei nedir acaba biliyormusunuz..(Mesela 1 movi clibimin hem x hem y hemde alphasını bu kodlarla hareketlendiriyorum 2.movi clibimi de aynı şekilde..ama bazen tekliyor bazende duruyor)