Timer Sınıfı ve Animasyon

13 Aralık 2007 – 22:09

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.

  1. // İlk olarak utils paketini import etmemiz gerekiyor.
  2. import flash.utils.*;
  3. // Yeni bir timer objesi yaratıyoruz ve 1000 ms ayarlıyoruz
  4. var myTimer:Timer = new Timer(1000);
  5. //Timer için olay dinleyicisi ekliyoruz
  6. myTimer.addEventListener("timer", timerFunction);
  7. //Timer başlatıyoruz
  8. myTimer.start();
  9. fonksiyon her bir saniyede bir çağırılacak
  10. function timerFunction(event:TimerEvent)
  11. {
  12.     trace("Geçen süre  " + myTimer.currentCount);
  13. }

Ş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.İlk ö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.

İlk Örnek

  1. //gerekli sınıfları import ediyoruz
  2. import flash.utils.*;
  3. import caurina.transitions.*;
  4. // Yeni bir timer objesi yaratıyoruz ve 1000 ms ayarlıyoruz
  5. var myTimer:Timer = new Timer(60);
  6. //Timer için olay dinleyicisi ekliyoruz
  7. myTimer.addEventListener("timer", timerFunction);
  8. // Timer başlatıyoruz
  9. myTimer.start();
  10. //Sayım için bir değişken yaratıyoruz
  11. var i:uint;
  12. //kütüphanedeki air logosunu çagırıyoruz.
  13. var airL:airLogo = new airLogo();
  14. //logoların tamamını tutmak için bir movieclip ekliyoruz
  15. var holder:MovieClip= new MovieClip();
  16. addChild(holder)
  17. holder.x=stage.stageHeight /2 ;
  18. holder.y=stage.stageWidth /2;
  19. var currentDegrees:Number = 0;
  20. var radius:Number =180;
  21. //fonksiyon her bir saniyede bir çağırılacak
  22. function timerFunction(event:TimerEvent) {
  23. //i değişkeni 15 eşit olana kadar işlemi devam ettiriyoruz
  24. if (i!=12) {
  25. //Logoyu sahneye ekliyoruz
  26. airL = new airLogo();
  27. holder.addChild(airL);
  28. //logoyu ekranın ortasına yerleştiriyoruz
  29. airL.x= 0 ;
  30. airL.y=0;
  31. //dairenin derecesini her seferine 360/12 derece arttrıyoruz
  32. //Buradaki currentDegrees logunun yerleşeceği yeri belirliyor.Bizim bunu 12ye bölmemizin sebebi ise
  33. //ekrana 12 adet logo eklemek istememiz.Bu sayede her bir logu arasındaki ölçü eşit olacaktır
  34. currentDegrees += 360/12;
  35. //Radyanı hesaplıyoruz yukardaki dereceyi getRadiains() fonksiyonuna yolluyoruz
  36. var radians:Number = getRadians(currentDegrees);
  37. //logunun gideceği x ve y pozizyonu için iki değişken yaratıyoruz
  38. //Değişkenlere vereceğimiz x ve y koordinatlarını Math.sin ve Math.cos metodlarıyla buluyoruz.
  39. //unutmamıanız gerekn bırsey var; eğer buna benzer bir çalışma yapacaksanız ;
  40. //Math.sin her zaman x koordinatının değerini Math.cos her zaman y koordinayıın değrini size döndürecektir
  41. var xt:Number = Math.sin(radians) * radius;
  42. var yt:Number = Math.cos(radians) * radius;
  43. //Tweener sınıfını kullanarak logoyu sahneye belirlediğimiz x ve y koordinatlarına gitmesini saglıyoruz
  44. Tweener.addTween(airL, {time:3, x:xt, y:yt, ease:"easeOutQuad"});
  45. //logolar için olay dinleyicileri ekliyoruz,Mouse logoların üzerine geldigin büyümesi ve küçülmesi için
  46. airL.addEventListener(MouseEvent.ROLL_OVER, getBiger);
  47. airL.addEventListener(MouseEvent.ROLL_OUT, getSmaller);
  48. //i değişkenini değerini arttırıyoruz.
  49. i++;
  50. } else {
  51. //i değişkeni 15 eşit olduğunda burası timer ı durduruyoruz.
  52. myTimer.stop();
  53. //mouse üzerine tıkladıgımızda ekrandaki logoları silmesi için olay dinleyicisi ekliyoruz
  54. holder.addEventListener(MouseEvent.MOUSE_DOWN, clearAll);
  55. }
  56. }
  57. //Mouse logunun üzerine geldiginde, logoyu büyütüyoruz
  58. function getBiger(e:MouseEvent) {
  59. Tweener.addTween(e.target, {time:1,scaleX:1.5,scaleY:1.5, ease:"easeOutQuad"});
  60. }
  61. //Mouse logunon üzerinden çıktığında logoyu küçültüyoruz
  62. function getSmaller(e:MouseEvent) {
  63. Tweener.addTween(e.target, {time:1,scaleX:1,scaleY:1, ease:"easeInQuad"});
  64. }
  65. //radyan hesaplaması yaptıgımız fonksıyon
  66. // " Math.PI * 2 " iki yarı dairenin birleşmesi demek yani bir tam daire
  67. //yani Math.PI = 180 derecedir.
  68. function getRadians(degrees:Number):Number {
  69. return degrees * Math.PI / 180;
  70. }
  71. //Ekrandaki logoları temizleyen fonksiyon
  72. function clearAll(e:MouseEvent) {
  73. //for döngüsüyle ekrandaki leri teker teker kaldırıyoruz
  74. //15den aşağıya doğru gitmemizin sebebi ise ekrandaki
  75. //objeleri sondan başlayarak kaldırmamız gerektiği
  76. for (i=12; i>0; i–) {
  77. holder.removeChildAt(i-1);
  78. }
  79. // i değerini sıfır yapıyoruz
  80. i=0;
  81. //olay dınleyicimizi kaldırıyoruz
  82. holder.removeEventListener(MouseEvent.MOUSE_DOWN, clearAll);
  83. //timer tekrar başlatıryoruz boylece logolar yeniden dizilmiş oluyor
  84. myTimer.start();
  85. }

İkinci Örnek

  1. //gerekli sınıfları import ediyoruz
  2. import flash.utils.*;
  3. import caurina.transitions.*;
  4. // Yeni bir timer objesi yaratıyoruz ve 1000 ms ayarlıyoruz
  5. var myTimer:Timer = new Timer(250);
  6. //Timer için olay dinleyicisi ekliyoruz
  7. myTimer.addEventListener("timer", timerFunction);
  8. // Timer başlatıyoruz
  9. myTimer.start();
  10. //Sayım için bir değişken yaratıyoruz
  11. var i:uint;
  12. //kütüphanedeki air logosunu çagırıyoruz.
  13. var airL:airLogo = new airLogo();
  14. //fonksiyon her bir saniyede bir çağırılacak
  15. function timerFunction(event:TimerEvent) {
  16. //i değişkeni 15 eşit olana kadar işlemi devam ettiriyoruz
  17. if (i!=15) {
  18. //Logoyu sahneye ekliyoruz
  19. airL = new airLogo();
  20. addChild(airL);
  21. //logoyu ekranın sag alt köşesine yerleştiriyoruz
  22. airL.x= stage.stageHeight ;
  23. airL.y= stage.stageWidth ;
  24. //logunun gideceği x ve y pozizyonu için iki değişken yaratıyoruz
  25. //Değişkenlere vereceğimiz x ve y koordinatlarını randomBetween fonksiyonundan çağırıyoruz
  26. var xt:Number = randomBetween(25, 400);
  27. var yt:Number = randomBetween(25, 400);
  28. //Tweener sınıfını kullanarak logoyu sahneye döndürerek x ve y koordinatlarına gitmesini saglıyoruz
  29. Tweener.addTween(airL, {time:4, x:xt, y:yt,rotation:Math.random()*720, ease:"easeOutQuad"});
  30. //logolar için olay dinleyicileri ekliyoruz,Mouse logoların üzerine geldigin büyümesi ve küçülmesi için
  31. airL.addEventListener(MouseEvent.ROLL_OVER, getBiger);
  32. airL.addEventListener(MouseEvent.ROLL_OUT, getSmaller);
  33. //i değişkenini değerini arttırıyoruz.
  34. i++;
  35. } else {
  36. //i değişkeni 15 eşit olduğunda burası timer ı durduruyoruz.
  37. myTimer.stop();
  38. //mouse üzerine tıkladıgımızda ekrandaki logoları silmesi için olay dinleyicisi ekliyoruz
  39. this.addEventListener(MouseEvent.MOUSE_DOWN, clearAll);
  40. }
  41. }
  42. //Mouse logunun üzerine geldiginde, logoyu büyütüyoruz
  43. function getBiger(e:MouseEvent) {
  44. Tweener.addTween(e.target, {time:1,scaleX:1.5,scaleY:1.5, ease:"easeOutQuad"});
  45. }
  46. //Mouse logunon üzerinden çıktığında logoyu küçültüyoruz
  47. function getSmaller(e:MouseEvent) {
  48. Tweener.addTween(e.target, {time:1,scaleX:1,scaleY:1, ease:"easeInQuad"});
  49. }
  50. //iki sayı arası rastgele numara bulmamıza yarayan fonksiyon
  51. function randomBetween(a:Number, b:Number):Number {
  52. return a + Math.floor(Math.random() * b - a + 1);
  53. }
  54. //Ekrandaki logoları temizleyen fonksiyon
  55. function clearAll(e:MouseEvent) {
  56. //for döngüsüyle ekrandaki leri teker teker kaldırıyoruz
  57. //15den aşağıya doğru gitmemizin sebebi ise ekrandaki
  58. //objeleri sondan başlayarak kaldırmamız gerektiği
  59. for (i=15; i>0; i–) {
  60. removeChildAt(i-1);
  61. }
  62. // i değerini sıfır yapıyoruz
  63. i=0;
  64. //olay dınleyicimizi kaldırıyoruz
  65. this.removeEventListener(MouseEvent.MOUSE_DOWN, clearAll);
  66. //timer tekrar başlatıryoruz boylece logolar yeniden dizilmiş oluyor
  67. myTimer.start();
  68. }

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.

Tweener Sınıfı
http://code.google.com/p/tweener/
Kaynak Kodlar
Kolay Gelsin
Engin!

Bu makale ile ilgili olabilecek yazılar



  1. 3 Responses to “Timer Sınıfı ve Animasyon”

  2. Güzel ve cidden çok faydali bir yazı olmuş.
    Teşekkürler

    By Mehmet Ali Güney on Ara 24, 2007

  3. Benim yapamadığım bir nokta var .Bu Caurina tweener sınıfını nerede koymalıyız tam olarak? Fla dosyasının içine koydum ama çalışmadı.Bulunamadı hatasını verdi.Ne yapmam gerek?

    By fulya gürsel on Eyl 25, 2008

  4. Merhaba Fulya,
    sınıf yapısını fla dosyasının bulunduğu klasöre atman gerek. Hata verdiyse eğer örnekteki kaynak kodları indidip inceleyebilirsin.

    Kolay Gelsin

    By Engin Yöyen on Eyl 26, 2008

Yorum Ekleyin


Creative Commons License İçerik Hakkı Engin Yöyen'e ait olup sitedeki makaleler Creative Commons Attribution-Noncommercial 3.0 Unported lisansı ile lisanslanmıştır.