Animasyon Sınıfı (Tween Class)

Posted by Selçuk in ActionScript 3.0 on 12 24th, 2009 | no responses

Merhaba bu dersimizde basit Tween Animasyonlarını kodlarla yapmayı öğreneceğiz.AS3 de Tween Sınıfı bize program üzerinden elle yaptığımız Motion Tween gibi basit animasyonları kodlarla kolayca yapmamızı sağlar.Bu derste de projelerinizde kullanmak için ihtiyacınız olan tüm bilgileri vermeye çalışacağız.Öncelikle hemen Tween ile yapılmış bir örnek görelim ve derse geçelim ;

Bu derste göreceğimiz başlıklar ;

1. Tween Sınıfının basit kullanımı
2. Tween Eventlerinin kullanımı
3. Birleşik Tweenler

1-Tween Sınıfının Basit Kullanımı

Tween sınıfını uygulamanızda kullanabilmeniz için flash dosyanıza import etmeniz gerekmektedir ;

//Tween Sınıfını import edelim.
import fl.transitions.Tween;
//Animasyonlar için animasyon sınıfını import edelim
import fl.transitions.easing.*;

Not : import ederken kullandığımız “*” işareti o sınıf içerisindeki tüm öğeleri import eder.

Sahneye yeni bir kare çizelim boyutları 45×45 olsun ve bunu MovieClip’e çevirelim ;

Şimdi bu kare MovieClip’inin instance Name’ine kare adını verelim.

Öncelikle Tween Event Tanımlama Şeklini Görelim ;

var animasyon:Tween = new Tween(obj,prop,func,begin,finish,duration,useSeconds);

animasyon = Tanımlanmamış isimdir uygulama içerisinde iki tane olamaz!

obj = Animasyon uygulanacak objenin ismi.

prop = Animasyon uygulanacak özellik.

func = Animasyon türü.

begin = Başlangıç değeri.

finish = Bitiş değeri.

duration = Animasyon süresi.

useSeconds = Animasyon görünürlüğü.

Şimdi çizdiğimiz kareye x değerini değiştirdiğimiz bir animasyon ekleyelim ;

kodlar ;

import fl.transitions.Tween;
import fl.transitions.easing.*;
var animasyon:Tween = new Tween(kare,"x",Regular.easeOut,120,400,3,true);

Kodlar da Animasyon Türü easing sınıfının içerisindeki elemanlardan biri olmalıdır.Değiştireceğimiz özelliği String yani tırnak işaretleri içerisinde yazmalıyız.Karenin x konumunu 120 den 400 ‘e 3 saniyede çıkmasını sağladık.Ve animasyon görünürlüğünü true yaparak animasyonun görünmesini sağladık.

Sonradan Animasyonda bir özelliği değiştirmek için Tween isminin yukarıda yazdığımız özelliklerinden herhangi birini kullanabilirsiniz.Örneğin animasyonun bittiği noktayı 400 den 200′e düşürelim ;

import fl.transitions.Tween;
import fl.transitions.easing.*;
 
var animasyon:Tween = new Tween(kare,"x",Regular.easeOut,120,400,3,true);
animasyon.finish = 200;

Animasyonu Test Movie yaptığınızda değiştirdiğiniz özelliğin başarılı olduğunu göreceksiniz…

2-Tween Eventlerinin Kullanımı

Tween Eventlerinide kullanabilmemiz için öncelikle bunu da transitions sınıfı içerisinden import etmemiz gerekmektedir ;

import fl.transitions.Tween;
import fl.transitions.TweenEvent;
import fl.transitions.easing.*;

Daha sonra yukarıdaki animasyonumuzu bu bölüm içinde oluşturalım sahnede bir kare isimli movieClip’imiz olmalı ve kodlarımız şu şekilde ;

import fl.transitions.Tween;
import fl.transitions.TweenEvent;
import fl.transitions.easing.*;
 
var animasyon:Tween = new Tween(kare,"x",Regular.easeOut,120,400,3,true);

Şimdi dersin en başında gösterdiğimiz animasyonun benzerini yapalım.İlk animasyonumuz bittiğinde karemizin eski yerine dönmesini ve sonra da tekrar 400′e çıkmasını sağlayalım ;

import fl.transitions.Tween;
import fl.transitions.TweenEvent;
import fl.transitions.easing.*;
 
var animasyon:Tween = new Tween(kare,"x",Regular.easeOut,120,400,3,true);
 
//Animasyonun bittiğini anlamamız için Event Ekleyelim
animasyon.addEventListener(TweenEvent.MOTION_FINISH,ilkanimasyonbitti);
 
//ilkanimasyonbitti fonksiyonumuza ikinci animasyonu ekleyelim
function ilkanimasyonbitti(evt:TweenEvent):void
{
	var animasyon2:Tween = new Tween(kare,"x",Regular.easeOut,400,120,3,true);
 
	//Şimdi bu animasyon bittiğinde tekrar ilk animasyonu yapmasını sağlayalım
	animasyon2.addEventListener(TweenEvent.MOTION_FINISH,ikincianimasyonbitti);
	function ikincianimasyonbitti(evt:TweenEvent):void
	{
		animasyon.start();
	}
}

Kodlarda önce ilk animasyonun bittiğini anlamak için Tween Event içerisinden MOTION_FINISH eventini kullandık. daha sonra fonksiyonumuzun içerisine ikinci animasyonumuzu yazdık ve hemen altına ikinci fonksiyonu çağırdık ve başlattık.İkinci fonksiyona da ilk animasyonu başlatmasını söyledik böylece ilk animasyon bittiğinde tekrar ilk fonksiyon çalışacaktır.Bu sayede bir döngü şeklinde sürekli gidip gelmesini sağlamış olduk ;

Tween Eventleri ;

• MOTION_CHANGE = Tween Öğesi değiştiğinde ve ekran güncellendiğini gösterir.
• MOTION_FINISH = Animasyonun bittiğini gösterir.
• MOTION_LOOP = Tween öğesinin baştan itibaren döngü modunda oynatılmaya yeniden başladığını gösterir.
• MOTION_RESUME = Animasyonun tekrar oynatıldığını gösterir.
• MOTION_START = Animasyonun başladığını gösterir.
• MOTION_STOP = Animasyonun durduğunu gösterir.

—————–

• start = Animasyonu başlatır.
• stop = Animasyonu durdurur.

3-Birleşik Tweenler

Aynı anda birden fazla Tween Efekti kullanabilirsiniz.En basit örnek bir objenin çapraz gitmesidir.Aynı oluşturduğumuz karemizi çapraz olarak ilerletmeye çalışalım ;

import fl.transitions.Tween;
import fl.transitions.TweenEvent;
import fl.transitions.easing.*;
 
var animasyon:Tween = new Tween(kare,"x",Regular.easeOut,120,400,3,true);
var animasyon2:Tween = new Tween(kare,"y",Regular.easeOut,180,300,3,true);

Bitirirken bu dersimizde bir de ödevimiz var …

Sağ-sol ve bir tanede çapraz buton oluşturup bunlara basınca karenin gitmesini sağlayın. Yaptıktan sonra aşağıdaki kodlardan ve swfden kontrol edebilirsiniz …

———————–>Ödev Sonucunda olması gerekenler

Kodlama ;

import fl.transitions.Tween;
import fl.transitions.TweenEvent;
import fl.transitions.easing.*;
 
capraz.addEventListener(MouseEvent.CLICK,oynat1);
function oynat1(evt:MouseEvent):void
{
	var animasyon:Tween = new Tween(kare,"x",Regular.easeOut,120,400,3,true);
	var animasyon2:Tween = new Tween(kare,"y",Regular.easeOut,180,300,3,true);
}
sag.addEventListener(MouseEvent.CLICK,oynat2);
function oynat2(evt:MouseEvent):void
{
	var animasyon:Tween = new Tween(kare,"x",Regular.easeOut,120,400,3,true);
}
sol.addEventListener(MouseEvent.CLICK,oynat3);
function oynat3(evt:MouseEvent):void
{
	var animasyon:Tween = new Tween(kare,"x",Regular.easeOut,400,120,3,true);
}

SWF ;