Tween-TweenLite-Tweener

[Kerem Özdemir]

*
Merhaba sizlere bu gün Tween Engine bahsedeceğim ve örnek bir kaç uygulama ile
harici Tween sınıflarını ve flash içerisindeki Tween sınıfı ile arasındaki
farklılıklara bir bakalım.
*/

// Sahnemize Rectangle tool ile bir dörtgen oluşturunuz...
// dörtgeni seçip F8 tuşuna basınız, çıkan panelde gördüklerinizi sırası ile uygulayın.
// Çıkan bir sonraki uyarı penceresinde OK tuşunu secip devam ediyoruz...

// artık Tween sınıfını uygulayacağımız Movie Clip'bimiz MyClip adı ile ActionScript
// içerisinde rezerv edilmiştir. Bu linkaj ismi ile kütüphanemizden istediğimiz zaman
// çağıra bileceğimiz gibi istediğimiz sayıda da örneğini olusturup kullanmamıza olanak sağlar.
// artık Tween sınıfını uygulayacağımız Movie Clip'bimiz MyClip adı ile ActionScript
// içerisinde rezerv edilmiştir. Bu linkaj ismi ile kütüphanemizden istediğimiz zaman
// çağıra bileceğimiz gibi istediğimiz sayıda da örneğini olusturup kullanmamıza olanak sağlar.

// gerekli tween sınıfını çağırıyoruz.
// ve tween içerisinde kullanacağımız easign fonsiyonu için gerekli sınıfları da cağıralım.
import fl.transitions.Tween;
import fl.transitions.TweenEvent;
import fl.transitions.easing.*;

//kütüphanemizdeki MC'i çağırıyoruz..

var myClip:MyClip = new MyClip();


myClip.x = 10;
// sahnenin dikey olarak ortasında görünmesini istiyorum.
myClip.y = ( stage.stageHeight - myClip.height) / 2;
// ve sahneye ekliyoruz.
addChild(myClip);

myClip.addEventListener(MouseEvent.CLICK, clickHandler);

function clickHandler(e:MouseEvent):void
{
// Tween yöntemi 7 ayrı parametre bekler.
// Obje, properties, function, Number, Number, Number, Boolean
// derler-4.jpg ayrıntılı olarak gösterilmiştir.
var tween1:Tween = new Tween(myClip,"x",Back.easeIn,myClip.x,(stage.stageWidth - (myClip.width + 10)),1.5,true);

// tween1 eklenen olay MOTION_FINISH myClip objesinin hareketi bittikten sonra tetiklenecektir.
tween1.addEventListener(TweenEvent.MOTION_FINISH,endTweenHandler);
}

function endTweenHandler(e:TweenEvent):void
{
trace("End Tween!");
// myClip tween hareketi aksi yönde hareketini tamamlar.
var tween2:Tween = new Tween(myClip,"x",Back.easeIn,myClip.x,10,1.5,true);
}


// burada siz tween yöntemi içerisinde özellik ve yöntemleri değiştirerek kendi animasyonlarınızı olustura bilirsiniz.
// "x" yerine "y" gibi. tabi başlangıç ve bitiş noktalarıda bunlara göre değiştirilmesi gerekir.


// bölüm 2 TweenLite harici sınıfı ile çalışmak
import gs.TweenLite;
import gs.easing.*;
// yeni bir sprite örneği olusturuyoruz


var sprite:Sprite = new Sprite();
sprite.graphics.beginFill(0x00cc00,1);
sprite.graphics.drawRect(0,0,70,60);
sprite.graphics.endFill();

sprite.x = stage.stageWidth - (sprite.width + 10);
sprite.y = myClip.height + 10;

addChild(sprite);

sprite.addEventListener(MouseEvent.CLICK, sClickHandler);


function sClickHandler(e:MouseEvent):void
{
// flash TweenLite aslında ilk 3 parametre yeterli olacaktır.
// ama Tween sınıfı ile karşılaştırıldığında arasındaki farklı yazılımın görünülmesi gerekir.
// dersler-5.jpg ayrıntılı anlatılmıştır.
TweenLite.to(sprite,1.5,{x:10, alpha:.5,ease:Expo.easeIn, onComplete:TweenLiteEnd});
}

function TweenLiteEnd():void
{
trace("End TweenLite!");

TweenLite.to(sprite,1.5,{xstage.stageWidth - (sprite.width + 10)),alpha:1,ease:Expo.easeIn});
}

// bölüm 3 Tweener (caurina) hariçi sınıfı ile çalışmak
import caurina.transitions.*;

// yeni bir sprite örneği olusturuyoruz.
var sprite2:Sprite = new Sprite();
sprite2.graphics.beginFill(0x333333,1);
sprite2.graphics.drawRect(0,0,70,60);
sprite2.graphics.endFill();

sprite2.x = stage.stageWidth - (sprite.width + 10);
sprite2.y = myClip.y + myClip.height + 10;
addChild(sprite2);

sprite2.addEventListener(MouseEvent.CLICK, s2ClickHandler);


function s2ClickHandler(e:MouseEvent):void
{
//dersler-6.jpg ayrıntılı şekilde acıklanmıştır.
Tweener.addTween(sprite2,{x:10,alpha:.5,time:2,transition:"easeOutElastic", onComplete:TweenLiteEnd2});
}

function TweenLiteEnd2():void
{
trace("End Tweener!");

Tweener.addTween(sprite2,{xstage.stageWidth - (sprite.width + 10)),alpha:1,time:2,transition:"easeOutElastic"});
}

/*bu uygulamada TweenLite ve Tweener harici sınıflarına örnek verilmiştir.
Baska proje ve uygulamalarda sıkça görebileceğiniz bu iki sınıfın
kendi örneklerinizi geliştirdikçe kolaylık sağlaması amaçlanmıştır.
Üç ayrı Tween sınıfında da özelliklik ve yöntemler yazılış şekli
itibariyle farklılık gösterir. Ama uygulamada TweenLite ve Tweener sınıfları
Tween sınıfına nazaran kolaylık sağlar. Mevcut uygulamalarda TweenLite ve Tweener
sınıflarında birden co properties eklene bilir ama Tween sınıfında bu 1 tanedir.
properties olarak x,y,alpha,rotation,rotationX ve rotationY gibi özelliklerdir.
bu özellikleri her iki sınıftada virgül ile ayırarak sıralaya bilirsiniz ama Tween
sınıfında bu özellikleri çoğaltmak istiyorsanız yeni bir Tween yaratmanız gerekeçektir.*/

 

[Kerem Özdemir]

source url:http://rapidshare.com/files/281474203/dersler.rar.html

 

[Emre Zengin]

ders için teşekürler, projeyi inceleyeceğim

 

[Abdullah Şahin]

Elinize ve emeğinize sağlık Kerem Bey. Güzel bir ders hazırlamışsınız.

 

[Kerem Özdemir]

Belirtmekte fayda var TweenLite ve Tweener gibi API leri kullanmak için Mevcut Proje klasörünüzde yer alması gerek tıpkı incelemeniz için verdiğim projedeki gibi harici sınıfları kullanamk istiyorsanız gs ve caurina klasörlerinizi bulundurmanız gereklidir.