Bu dersimde size kendi yazdığım bir sınıfı tanıtıcam. Bu sınıf timeline kullanmadan animasyon yapmanıza yardımcı oluyor :)

Bu sınıfla ile hazırlanmış en başarılı örnek Kahraman Teaser çalışmasıdır.

Neden Motion Tween varken kod kullanalımki? Bence en büyük neden boyuttur. Mesela Kahraman çalışmasının boyutu 17kb. JPEG screenshotı bile 20kb :)

İkinci bir neden ise kodlar ile hazırlanan bir animasyonun dinamik olmasıdır. Mesela siz bir topu bir yere götürüyorsunuz, normalde bu hareketin yavaş olması için daha fazla frame, daha hızlı olması için daha az frame kullanırsınız. Ama kodlarla ile hazırlarsanız sadece bir sayıyı değiştirmeniz yeterlidir.

Bu kısa bilgilerden sonra dersimize geçebiliriz :)

TimeLine.as:

package {
    ////////////////////////////////////////////
    //@ Yazar: Yağız Gürgül                   //
    //@ İstediğiniz gibi kullanabilirsiniz :) //
    ////////////////////////////////////////////
    import flash.events.Event;
    import flash.display.Shape
    //
    public class TimeLine  {

        //@Public vars:
        public var loop:Boolean=false;
        public var totalFrames:int;
        public var currentFrame:int;

        //@Privates vars:
        private var keyFrames:Array;
        private var holder:Shape
        private var i:int;
        private var version:String = "1.0";
        //
        public function TimeLine(_totalFrames:int=-1,autoStart:Boolean=true){
            holder=new Shape();
            totalFrames=_totalFrames;
            currentFrame=0;
            keyFrames=new Array();
            //
            if(autoStart) {
                start();
            }
        }
        //
        public function start():void {
            holder.addEventListener(Event.ENTER_FRAME,render);
        }
        public function stop():void {
            holder.removeEventListener(Event.ENTER_FRAME,render);
        }
        public function reset():void {
            holder.removeEventListener(Event.ENTER_FRAME,render);
            currentFrame=0;
        }
        public function clear():void {
            keyFrames = new Array();
            reset();
        }
        public function addKeyFrame(k:uint,f:Function):void {
            keyFrames[k]=f;
        }
        public function render(e:Event):void {
            if(currentFrame==totalFrames) {
                if(loop) {
                    currentFrame=0;
                }else{
                    stop();
                }
            }
            if(keyFrames[currentFrame]!=null) {
                keyFrames[currentFrame]();
            }
            currentFrame++;
        }
        public function toString():String {
            return "[TimeLine v: "+version+" ]";
        }
    }
}

Dosayı bir klasör içine kaydedin.

Yeni bir AS3 dosyası açın ve şu kodları yazın:

var zaman:TimeLine = new TimeLine(100);
trace(zaman);

Bu .fla dosyasını TimeLine.as dosyasının yanına kaydedip test edin. Şöyle bir yazı göreceksiniz: [TimeLine v: 1.0 ]

Yani TimeLine sınıfını çağırdık. Herhangi bir sorun yok :)

Şimdi kodlarımız şu şekilde olsun:

var zaman:TimeLine = new TimeLine(200);
trace(zaman);

zaman.addKeyFrame(0,getir);
zaman.addKeyFrame(100,gotur);

function getir() {
    trace("getir bakalim");
}
function gotur() {
    trace("gotur bakalim");
}

zaman.addKeyFrame(); fonksiyonu TimeLine üzerine keyframe ekliyoruz. İlk parametre frame numarası ikinci parametre ise o frame üzerine gelince çağırılacak fonksiyondur.

Ben bu örnekte 0. frame üzerine getir fonksiyonunu, 50. frame üzerine gotur fonksiyonunu koydum.

Bu satırların hemen altında ise o iki fonksiyonum duruyor. Çalışmayı test ettiğinizde önce şu yazıyı:

[TimeLine v: 1.0 ]
getir bakalim

Biraz sonra ise:

[TimeLine v: 1.0 ]
getir bakalim
gotur bakalim

yazılarını görüceksiniz. 0. frame üzerine eklediğimizden ve TimeLine 0. frame’den başladığından ilk önce getir bakalim gördük.Daha sonra TimeLine 50. frame üzerine geldiğinde ise gotur bakalim gördük.

Aslında tüm bu çalışmayı TimeLine sınfı kullanmadan, Timer ile bir id atarak da yapabilirdik ama daha uzun olurdu. Gördüğünüz gibi TimeLine sınıfı işinizi kolaylaştırıyor.

Biraz da görsel bir örnek yapalım. Mesela ortama bir kare çizin. Bunu movieclip haline getirin. Bunun instance name = kare_mc olsun.Ben bu kareyi sahneye getirip götürmek istiyorum. Bu noktada imdadımıza Flash CS3 ile gelen Tween sınıfı yetişiyor.

Frame kodumuz:

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

var zaman:TimeLine = new TimeLine(200);
trace(zaman);

zaman.addKeyFrame(0,getir);
zaman.addKeyFrame(100,gotur);

function getir() {
    trace("getir bakalim");
    new Tween(kare_mc,"x",Elastic.easeOut,-200,100,3,true);
}
function gotur() {
    trace("gotur bakalim");
    new Tween(kare_mc,"x",Elastic.easeOut,100,1000,3,true);
}

getir fonksiyonu içine bir Tween satırı ekledim.Bu Tween satırı ile karemiz x kordinatında -200’den 100 noktasına geliyor.

gotur fonksiyonundaki Tween satırı ile de karemiz x kordinatında 100’den 1000 noktasına geliyor.

Çalışmayı test edince önce karemiz sahneye geliyor daha sonra ise sahneden gidiyor. Eğer bu hareketin sürekli olmasını istiyorsanız kodlarınıza şu satırı ekleyin zaman.loop=true;

Bu dersin ekinde TimeLine sınıfı ile hazırlanmış iki örnek bulabilirsiniz.

Sınıf hakkında bilgiler:

Sınıf Adı: TimeLine

Property

• loop: zamanın sürekli tekrarlanmasını belirler. true veya false değeri alabilir. Defult olarak false’tur.
• totalFrames: zamanın toplam süresini belirler. Eğer -’li değer verirseniz zaman sürekli ilerler. +’lı değer verirseniz zaman o değere geldiğinde ya durur ya da başa sarar.
• currentFrame: zamanın o anki değerini verir. Buna değer atıyarak isterseniz zamanı geri veya ileri alabilirsiniz.

Method

• TimeLine(_totalFrames:int=-1,autoStart:Boolean=true) – Sınıfın temelidir diyebiliriz. İlk parametre zaman uzunluğunu belirler.Defult olarak -1’dir. Eğer buraya değer girmesseniz zaman sürekli ileri gider. İkinci parametre ise construct’ı yazınca zamanın başlayıp başlamicağını belirler. Defult olarak false’tur.
• start():void – Zamanı başlatır.
• stop():void – Zamanı durdurur.
• reset():void – Hem zamanı durdurur hem de zamanı başa alır.
• clear():void – Tüm eklenmiş keyFrame’leri temizler
• addKeyFrame(k:uint,f:Function):void – zaman üzerine keyFrame eklemeye yarar. İlk parametre frame numarasıdır. İkinci parametre ise zamanın o frame üzerine gelince çağıracağı fonksiyondur.