Flash içerisinde bir objeye basit bir animasyon uygularken, mesela bir objeyi x 0 koordinatından x 150 koordinatına hareket ettirmek istediğimizde, obje hareketinin başlangıç, bitiş noktalarını ve frame sayısını belirleriz.Bunu 15 frame de yaptığımızı düşünürsek her frame için obje 10 pixel sağa kayacaktır.Ve bunun saga kayma hızı flashın frame rate hızına bağlıdır.Bu kayma hareketinin tamamı belli bir zaman içerisinde ve tekrarlanarak devam eder ve bu sırada görsel bir ilizyon oluşturmuş olursunuz.

Peki bu animasyonu actionscript ile yapmayı düşündüğünüzde nasıl bir sistem kullanırsınız? Bunu birden çok yolla deneyebilirsiniz.for loop, while, ENTER_FRAME, tween sınıfı bu sınıf ve metodların tamamı ile bu işlemi gerçekleştirebilirsiniz.Ben bu makalede timer sınıfının nasıl kullanılacağını ve bu sınıflarla nasıl animasyon yapılabileceğini açıklayacağım.

Timer sınıfı Timer sınıfı zaman tabanlı uygulamalar geliştirmeniz için gerekli tüm fonksiyonelliği sağlar.Timer sınıfı kısaca kullanıcının belirlediği bir süre zarfı içerisinde daha doğrusu süre zarfı sonunda belli bir kodu tetiklemesi için kullanılır. Aşagıdaki örnekte timer sınıfı fonksiyonu her saniye tetikleyecek şekilde ayarlandı. Aşağıda sırayla bu sınıfı nasıl kullanacağınıza görebilirsiniz.

// ilk olarak utils paketini import etmemiz gerekiyor.
import flash.utils.*;
// Yeni bir timer objesi yaratıyoruz ve 1000 ms ayarlıyoruz
var myTimer:Timer = new Timer(1000);
//Timer için olay dinleyicisi ekliyoruz
myTimer.addEventListener('timer', timerFunction);
//Timer başlatıyoruz
myTimer.start();
fonksiyon her bir saniyede bir çağırılacak
function timerFunction(event:TimerEvent)
{
    trace('Geçen süre  ' + myTimer.currentCount);
}

Şimdi sırada ise bu sınıf yardımı ile nasıl animasyon yapabiliriz sorusu geliyor?Aslında hiç zor değil normal for loop döngüsü yerine timer sınıfını kullanacağız, döngü tamamlandıktan sonrada timer ı durduracağız.Aşağıdaki örneklerde ayrıca tweener sınıfıda kullandım.Bu sınıfın kullanımı çok basit, ve flash ın içerisindeki tween sınıfından daha avantajlı.Tweener sınıfının linkini sayfanın sonunda bulabilirsiniz.Aşağıdaki iki örnekte de kütüphanede bulunan bir öğenin sahneye Timer sınıfını kullanarak animasyon ile gelmesi anlatmaya çalıştım.ilk örnekte kütüphaneki logoyu ekrana daire şeklinde aralıkları eşit bir şekilde sırayla nasıl yerleştiğini ikinci örnekte ise yine kütüphanedeki öğenin ekrana rastgele bir şekilde nasıl geldiği hakkında bir fikriniz olmuş olacak.

ilk Örnek

//gerekli sınıfları import ediyoruz
import flash.utils.*;
import caurina.transitions.*;
// Yeni bir timer objesi yaratıyoruz ve 1000 ms ayarlıyoruz
var myTimer:Timer = new Timer(60);
//Timer için olay dinleyicisi ekliyoruz
myTimer.addEventListener('timer', timerFunction);
// Timer başlatıyoruz
myTimer.start();
//Sayım için bir değişken yaratıyoruz
var i:uint;
//kütüphanedeki air logosunu çagırıyoruz.
var airL:airLogo = new airLogo();
//logoların tamamını tutmak için bir movieclip ekliyoruz
var holder:MovieClip= new MovieClip();
addChild(holder)
holder.x=stage.stageHeight /2 ;
holder.y=stage.stageWidth /2;
var currentDegrees:Number = 0;
var radius:Number =180;
//fonksiyon her bir saniyede bir çağırılacak
function timerFunction(event:TimerEvent) {
//i değişkeni 15 eşit olana kadar işlemi devam ettiriyoruz
if (i!=12) {
//Logoyu sahneye ekliyoruz
airL = new airLogo();
holder.addChild(airL);
//logoyu ekranın ortasına yerleştiriyoruz
airL.x= 0 ;
airL.y=0;
//dairenin derecesini her seferine 360/12 derece arttrıyoruz
//Buradaki currentDegrees logunun yerleşeceği yeri belirliyor.Bizim bunu 12ye bölmemizin sebebi ise
//ekrana 12 adet logo eklemek istememiz.Bu sayede her bir logu arasındaki ölçü eşit olacaktır
currentDegrees += 360/12;
//Radyanı hesaplıyoruz yukardaki dereceyi getRadiains() fonksiyonuna yolluyoruz
var radians:Number = getRadians(currentDegrees);
//logunun gideceği x ve y pozizyonu için iki değişken yaratıyoruz
//Değişkenlere vereceğimiz x ve y koordinatlarını Math.sin ve Math.cos metodlarıyla buluyoruz.
//unutmamıanız gerekn bırsey var; eğer buna benzer bir çalışma yapacaksanız ;
//Math.sin her zaman x koordinatının değerini Math.cos her zaman y koordinayıın değrini size döndürecektir
var xt:Number = Math.sin(radians) * radius;
var yt:Number = Math.cos(radians) * radius;
//Tweener sınıfını kullanarak logoyu sahneye belirlediğimiz x ve y koordinatlarına gitmesini saglıyoruz
Tweener.addTween(airL, {time:3, x:xt, y:yt, ease:'easeOutQuad'});
//logolar için olay dinleyicileri ekliyoruz,Mouse logoların üzerine geldigin büyümesi ve küçülmesi için
airL.addEventListener(MouseEvent.ROLL_OVER, getBiger);
airL.addEventListener(MouseEvent.ROLL_OUT, getSmaller);
//i değişkenini değerini arttırıyoruz.
i++;
} else {
//i değişkeni 15 eşit olduğunda burası timer ı durduruyoruz.
myTimer.stop();
//mouse üzerine tıkladıgımızda ekrandaki logoları silmesi için olay dinleyicisi ekliyoruz
holder.addEventListener(MouseEvent.MOUSE_DOWN, clearAll);
}
}
//Mouse logunun üzerine geldiginde, logoyu büyütüyoruz
function getBiger(e:MouseEvent) {
Tweener.addTween(e.target, {time:1,scaleX:1.5,scaleY:1.5, ease:'easeOutQuad'});
}
//Mouse logunon üzerinden çıktığında logoyu küçültüyoruz
function getSmaller(e:MouseEvent) {
Tweener.addTween(e.target, {time:1,scaleX:1,scaleY:1, ease:'easeInQuad'});
}
//radyan hesaplaması yaptıgımız fonksıyon
// ' Math.PI * 2 ' iki yarı dairenin birleşmesi demek yani bir tam daire
//yani Math.PI = 180 derecedir.
function getRadians(degrees:Number):Number {
return degrees * Math.PI / 180;
}
//Ekrandaki logoları temizleyen fonksiyon
function clearAll(e:MouseEvent) {
//for döngüsüyle ekrandaki leri teker teker kaldırıyoruz
//15den aşağıya doğru gitmemizin sebebi ise ekrandaki
//objeleri sondan başlayarak kaldırmamız gerektiği
for (i=12; i>0; i-) {
holder.removeChildAt(i-1);
}
// i değerini sıfır yapıyoruz
i=0;
//olay dınleyicimizi kaldırıyoruz
holder.removeEventListener(MouseEvent.MOUSE_DOWN, clearAll);
//timer tekrar başlatıryoruz boylece logolar yeniden dizilmiş oluyor
myTimer.start();
}

ikinci Örnek

//gerekli sınıfları import ediyoruz
import flash.utils.*;
import caurina.transitions.*;
// Yeni bir timer objesi yaratıyoruz ve 1000 ms ayarlıyoruz
var myTimer:Timer = new Timer(250);
//Timer için olay dinleyicisi ekliyoruz
myTimer.addEventListener('timer', timerFunction);
// Timer başlatıyoruz
myTimer.start();
//Sayım için bir değişken yaratıyoruz
var i:uint;
//kütüphanedeki air logosunu çagırıyoruz.
var airL:airLogo = new airLogo();
//fonksiyon her bir saniyede bir çağırılacak
function timerFunction(event:TimerEvent) {
//i değişkeni 15 eşit olana kadar işlemi devam ettiriyoruz
if (i!=15) {
//Logoyu sahneye ekliyoruz
airL = new airLogo();
addChild(airL);
//logoyu ekranın sag alt köşesine yerleştiriyoruz
airL.x= stage.stageHeight ;
airL.y= stage.stageWidth ;
//logunun gideceği x ve y pozizyonu için iki değişken yaratıyoruz
//Değişkenlere vereceğimiz x ve y koordinatlarını randomBetween fonksiyonundan çağırıyoruz
var xt:Number = randomBetween(25, 400);
var yt:Number = randomBetween(25, 400);
//Tweener sınıfını kullanarak logoyu sahneye döndürerek x ve y koordinatlarına gitmesini saglıyoruz
Tweener.addTween(airL, {time:4, x:xt, y:yt,rotation:Math.random()*720, ease:'easeOutQuad'});
//logolar için olay dinleyicileri ekliyoruz,Mouse logoların üzerine geldigin büyümesi ve küçülmesi için
airL.addEventListener(MouseEvent.ROLL_OVER, getBiger);
airL.addEventListener(MouseEvent.ROLL_OUT, getSmaller);
//i değişkenini değerini arttırıyoruz.
i++;
} else {
//i değişkeni 15 eşit olduğunda burası timer ı durduruyoruz.
myTimer.stop();
//mouse üzerine tıkladıgımızda ekrandaki logoları silmesi için olay dinleyicisi ekliyoruz
this.addEventListener(MouseEvent.MOUSE_DOWN, clearAll);
}
}
//Mouse logunun üzerine geldiginde, logoyu büyütüyoruz
function getBiger(e:MouseEvent) {
Tweener.addTween(e.target, {time:1,scaleX:1.5,scaleY:1.5, ease:'easeOutQuad'});
}
//Mouse logunon üzerinden çıktığında logoyu küçültüyoruz
function getSmaller(e:MouseEvent) {
Tweener.addTween(e.target, {time:1,scaleX:1,scaleY:1, ease:'easeInQuad'});
}
//iki sayı arası rastgele numara bulmamıza yarayan fonksiyon
function randomBetween(a:Number, b:Number):Number {
return a + Math.floor(Math.random() * b - a + 1);
}
//Ekrandaki logoları temizleyen fonksiyon
function clearAll(e:MouseEvent) {
//for döngüsüyle ekrandaki leri teker teker kaldırıyoruz
//15den aşağıya doğru gitmemizin sebebi ise ekrandaki
//objeleri sondan başlayarak kaldırmamız gerektiği
for (i=15; i>0; i-) {
removeChildAt(i-1);
}
// i değerini sıfır yapıyoruz
i=0;
//olay dınleyicimizi kaldırıyoruz
this.removeEventListener(MouseEvent.MOUSE_DOWN, clearAll);
//timer tekrar başlatıryoruz boylece logolar yeniden dizilmiş oluyor
myTimer.start();
}

Buna benzer sayısız sayıda örnek yapabilirsiniz.Tek yapmanız gereken klasiğin dışına çıkarak farklı yöntemler uygulamak. Umarım yardımcı olmuştur.

Not:Animasyonlara buradan ulaşabilirsiniz http://www.stayupdatedonweb.com/

Tweener Sınıfı http://code.google.com/p/tweener/

Kaynak Kodlar http://stayupdatedonweb.com/wp-content/uploads/2007/12/timerclass.rar

Kolay Gelsin Engin Yöyen!