Türkiye Online Medya Araştırması
Profili Göster

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

aç-kapa İçeriğin rss beslemesi kullanımda değil Yorumlar

Profili Göster
Kerim DOKSAN 12/10/2008

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)

Profili Göster
Ercan Altuğ YILMAZ 13/10/2008

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.

Profili Göster
Kerim DOKSAN 13/10/2008

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

Profili Göster
Ercan Altuğ YILMAZ 13/10/2008

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

Profili Göster
Kerim DOKSAN 13/10/2008

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

Profili Göster
sahin yeşilyurt 10/12/2008
Profili Göster
levent kaya 23/03/2009

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?

Profili Göster
Ercan Altuğ YILMAZ 23/03/2009

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

Profili Göster
cinar foto 8/09/2009

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

Profili Göster
burak sarac 14/12/2009

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);


}

yeni üyelik | şifremi unuttum

aç-kapa 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ı

aç-kapa Yarışma 3. Uluslararası Ekslibris Yarışması: İstanbul 2010

3. Uluslararası Ekslibris Yarışması: İstanbul 2010

İstanbul Ekslibris Dernegi, Feyziye Mektepleri Vakfı ve Işık Üniversitesi, kitaplar için mülkiyet işareti olarak kabul edilen ve üzerinde estetik dege...
Kategori: Yarışma

aç-kapa Konferans Yeni Medya ve Etkileşim Konferansı 2010 - Marmara Üniversitesi

Yeni Medya ve Etkileşim Konferansı 2010 - Marmara Üniversitesi

Generally speaking, the term "New" brought about debates. We try to open up and elucidate the term "New" along with "Interact...
Kategori: Konferans

aç-kapa Konferans 3. Uluslararası Gelecek İçin Öğrenme Alanında Yenilikler Konferansı 2010: e-Öğrenme

3. Uluslararası Gelecek İçin Öğrenme Alanında Yenilikler Konferansı 2010: e-Öğrenme

Konferans ile ilgili ayrıntılı bilgiye aşağıdaki bağlantıdan ulaşabilirsiniz: http://www.futurelearning.org.tr/katilim_cagrisitr.pdf ...
Kategori: Konferans

üyeler Son Kahramanlar...

stats Kimler Burada? web stats

Son 1 dakika içinde MMIstanbul' da 58 (50 kayıtlı, 8 ziyaretçi) kullanıcı varmış. Login durumda olanlar aşağıda:

lightblue ...

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)

coldfusion mysql ubuntu
 
sponsor adobe istanbul