Ana sayfa Yazılım Flash ile Programatik Animasyona Giriş: Tween&Transitions Class

Flash ile Programatik Animasyona Giriş: Tween&Transitions Class

0

Tween Class ile bir Movie Klip nesnesini sahnede sadece kod ile çok esnek bir animasyon yaptırabilirsiniz.

Merhaba arkadaşlar ;

Flash programını kullanarak yapılan websitelerde Timeline kullanarak yapılan animasyonları geliştirmek,beraber kullanmak zaman içinde zorlaşacak ve sizi farklı yönlere itecektir. İşte bu yüzden Flash içerisindeki Actionscript ile animasyon yeteneklerinizi geliştirecek bazı sınıflar vardır. Bunlardan en önemlisi Tween Class ile bir Movie Klip nesnesini sahnede sadece kod ile çok esnek bir animasyon yaptırabilirsiniz. Esnek derken süresinden,tipine,özelliklerine ve easingine kadar matematiksel olarak karar verebilirsiniz. Ve bir animasyon bitmeden diğeri tekrardan hesaplanarak yürüyen animasyona katılabilir.Bu yazımdaki kodları hem 2.0 hem de 3.0 olarak anlatacağım.
Ama herşeyden önce bilinmesi gereken ilk konu flash tasarımımız sahnesinde bulunan nesnelere Actionscript ile erişmek istersek mutlaka ona bir Instance Name vermemiz gerekir.  Instance Name sadece dynamic ve input text,movie klip ve butonlara verilebilir. Yani Shape durumunda olan bir şekle Instance Name veremeyiz bud a demek oluyorki kod ile yönetemeyiz. Kısaca :
No Instance Name , NO Actionscript , No Programatik Animasyon

örnek olması açısından ben kırmızı bir kare çizip F8 tuşuna basıp onu Movie Clipe çevirdim ve alttaki gibi movieklip seçiliyken Instance Name kısmına kare_mc yazdım.Daha sonra kodlarımızı yazabilmek için yukarıdaki Timeline (Zaman çizelgesi) bulunan keyframe”e sağ tıklayıp Actions panelini açıyoruz ve seçtiğiniz dosyamızın programlama tipine göre kodumuzu yazıyoruz.

Actionscript 2.0 :
______________________________________________________________________

import mx.transitions.*
import mx.transitions.easing.*
var hareket:Tween
hareket  = new Tween(kare_mc,”_x”,Back. easeInOut,200,400,1,true)
______________________________________________________________________

Actionscript 3.0 :

______________________________________________________________________

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

var hareket:Tween;
hareket = new Tween(kare_mc, “x”, Back.easeInOut, 200, 400, 1, true);
______________________________________________________________________
Sahnemizde duran kare_mc instance name’ine sahip bir nesneye Tween Class’ı ile bir animasyon yaptırdık. Burada ilk 2 satırda gerekli class isimlerini çalışmaya belirterek import ediyorum.mx versiyonunda gelen bir class oldugundan mx geçiyor bu satırda. 3.satırda ise basla isimli bir tween degiskeni tanımlıyorum.4.satırda da bu basla tween nesnesine Tween class yardımıyla bazı parametreler atıyorum.

 

kare_mc : animasyonun atanacak olduğu movie klip instance name’i
“_x” : Movie Klip’in hangi property’sinde animasyon yapılacağı (width,alpha,scale..)
Back. easeInOut : Animasyon tipi ve ease versiyonu.
200 :Animasyon başlangıç değeri
400 :Animasyon bitiş değeri
1: Animasyon süresi (saniye cinsinden)
true : Animasyonu saniye bazlı hesaplanacağı (false olursa frame bazlı hesaplar)
Gelin buradaki Back Tween animasyonu yerine kullanabileceğiniz diğer animasyon tekniklerini sıralayalım ve merak edenler tek tek yazarak denesin anlatmaya çalışsamda deneyerek görmeniz sizin için daha gerçekçi şeyler ifade edecektir 🙂
___________________________________________________________________

Elastic çok sık tercih edilenleridir. Ancak özellikle tek tek uygulamanızda fayda görüyorum.
·    Back: Animasyonu başlangıç ve bitiş değerlerinden biraz daha fazla değerlere uzatarak esneklik kazandırır.
·    Bounce: Animasyona zıplama hissi katar. Zıplama miktarı verilen sure ve değer farkıyla belirlenmiş olur.
·    Elastic: Animasyona Elastic bir şekilde tamamlamasını sağlar,elastiklik miktarı tamamen animasyon süresine bağlıdır.
·    Regular: Animasyonun hem başlangıcına hemde bitişinde yavaşlama hissi verir,bu sayede bir animasyonu yavaşlayarak durdurabilirsiniz.
·    Strong: Regulara çok benzeyen ama yavaşlama miktarıyla biraz daha değiştirme imkanı veren bir parametre.
·    None: Animasyona hiçbir efekt eklemeden sade yapmasını sağlar. özellikle dinamik şekilde ziyaretçinin tıklamasıyla eklenen uygulamalarda hiç kullanmak gerekmiyorsa kullanılır mesela oyunlarda.
Buradaki 6 adet efekt kendi içerisinde de 3 adet method bulundurmaktadır. Gelelim kombine edebileceğiniz animasyon tiplerine bir nokta koyduktan sonra eklenebilen kodla ease tiplerine.Ease tipleriyle de bu tween animasyonlarının ivmelerine karar verebilirsiniz.Hızlanıp yavaşlayarak animasyonu tamamlayabilir ya da tam zıttı.
·    easeIn: Efekti başlangıçtan itibaren uyguluyor.
·    easeOut: Efekti bitişe doğru uyguluyor.
·    easeInOut: Efekti başlangıç ve sonunda kısa sureli uyguluyor.
Yerçekimi ve arayüz geçişlerinde çok lazım olan bir ayar. Back.easeOut veya Elastic.easeInOut gibi kombineler yapabilirsiniz.

Tween animasyonları ile ilgili çok lazım olan bir olayda tween animasyonun metodları. Tween animasyonuna ancak bu metodlarla müdahale edebiliyoruz. Direk bir butonun çalıştıracağı fonksiyon içine yada frame’e yazabilirsiniz. Mesela ziyaretçiye bu tween üzerinde play stop hakkı verebilirsiniz , geri sarması veya aniamsyonu komple ters oynatmasını isteyebilirsiniz. CopyFrames veya nextFrame gibi işlemlerle timeline”da olan animasyonumuzu böyle yönetebiliyorduk tween class ile yaptıklarınızı dab u şekilde yönetebilirsiniz.

___________________________________________________________________

Tweenadi.yoyo() : Geri alır.
Tweenadi.fforward() : En sonuna alır.
Tweenadi.start() : Animasyonu sıfırdan başlatır.
Tweenadi.stop() : Animasyonu durdurur.
Tweenadi.nextFrame() : Durdurulmuş animasyonun bir frame sonrasına alır.
Tweenadi.prevFrame() : Durdurulmuş animasyonun bir frame öncesine alır.
Tweenadi.resume() : Durdurulmuş animasyonu kaldığı yerden devam eder.
Tweenadi.rewind() : Durdurulmuş animasyonu kaldığı yerden geri devam eder.
___________________________________________________________________

En son olarakta eğer runtime ziyaretçinin bu tween’e müdahale etmesine izin verdiğiniz (mesela bir oyunda) ancak tween’in tamamlandığında bir fonksiyon çalıştırmak istiyorsunuz (oyun bitti gibi) veya bir foto efekti tamamladığında diğeri başlasın gibi bunun içinde :
___________________________________________________________________

Tweenadi.onMotionFinished() : Tween animasyonu tamamlandığında.
Tweenadi.onMotionResumed() : Tween animasyonu duraklatıldığında.
Tweenadi.onMotionStarted() : Tween animasyonu başlatıldığında.
Tweenadi.onMotionStopped() : Tween animasyonu durdurulduğunda.
___________________________________________________________________

Biraz karışık gelirse örnek bir uygulama olarak bu animasyonu deneyebilirsiniz.

import mx.transitions.*;
import mx.transitions.easing.*;
var kayma:Tween = new Tween (kutu_mc, “_x”, Regular.easeInOut, 0, Stage.width, 3, true);
kayma.onMotionFinished = function() {
kayma.yoyo();
};

Kayma Tween”I tamamlandığında aynı animasyon yoyo() metodu sayesinde otomatik olarak  tekrar geri oynayacak.

Adobe Flash içerisinde nesnelerin özelliklerini değiştirmek için Tween Class”I çok performanslı bir şekilde kullanabiliriz. Peki ya mesela fotoğraflarımızı sadece alphalarıyla değil aynı zamanda deforme etme ve hatta renkleriyle oynamak istersek. Bunlar içinde Flash kendisi basit ama etkileyici bir Transitions Class ile birlikte geliyor. Tam verimli bir şekilde kullanılırsa gerçekten hoş  olabiliyor. Gelin sizde Transitions Class”ı  ve teker teker methodlarını keşfedin.
Sahnemizde foto1_mc Instance Name”ine sahip bir fotoğraf olduğunu kabul edelim.


Actionscript 2.0 :

______________________________________________________________________________

import mx.transitions.*;
import mx.transitions.easing.*;
TransitionManager.start
(
foto1_mc,
{
type : Wipe ,
direction : Transition.IN ,
duration : 1 ,
easing : Bounce.easeOut
}
)
______________________________________________________________________________


Actionscript 3.0 :

______________________________________________________________________________

import fl.transitions.*;
import fl.transitions.easing.*;
TransitionManager.start
(
foto1_mc,
{
type : Wipe ,
direction : Transition.IN ,
duration : 1 ,
easing : Bounce.easeOut
}
)

Yukarıdaki kod ile fotoğraflarınıza Transitions Class ile çeşitli efektler verebilirsiniz. Gelin satır satır açıklamaya çalışayım. İlk satırda kullanılacak Transitions Class’ını import ettiğimiz satır var.Devamındaki satırda TransitionManager ile bu efektin başlayacağını ve parametrelerini belirtiyoruz.

foto1_mc : Efektin atanacağı Movie Klip’in instance name’i.
type : Efekt tipi
direction : Transition.IN ile fotoğrafın ekrana gelmesi ve Transition.OUT ile gitmesi.
duration : Saniye bazlı animasyon süresi.
easing : Animasyonun ivme tipi ve değeri.
Efekt tipi olarak çok zengin bir listeye sahip Transitions Class.
______________________________________________________________________________

 

·    Iris: Ekranın içinden göz irisi gibi çıkarak gelen bir maske kullanıyor.
·    Wipe: Ekranın içinde yanlamasına gelen bir maske kullanıyor.
·    Pixel Dissolve: Ekranı kare kare bölerek pikselleşmiş gibi maske uyguluyor.
·    Blinds: Bir sonraki fotoya geçişte kullanılabilir transparan uzayarak geçiyor.
·    Fade: Klasik görünürden görünmez geçişi yapıyor.
·    Fly: Ekranın belli noktalarından uçarak geliyor.
·    Zoom: Ekrana zoom yaparak geliyor.
·    Squeeze: Ekranı enleme ve/veya yanlama eğerek geliyor.
·    Rotate: Ekranı döndürerek geliyor.
·    Photo: Fotografik bir efekt sağlıyor.

Easing metodu için Tween Class’taki ile aynı ease metodlarını efekti değiştirmek için kombine edebiliyoruz.
______________________________________________________________________________

Back , Bounce, Circular, Cubic, Elastic, Exponential, Linear, Quadratic, Quartic, Quintic, ve Sine.

______________________________________________________________________________

Ve ease değer listesi :

 

______________________________________________________________________________

easeIn , easeOut , easeInOut , easeNone .
Ek olarak bazı efektlerin kendilerine özel metodları var. Mesela puzzle efekti gibi parça parça ekrana gelen

Blinds :     numStrips (1 ile 50 arası bir değer)
dimensions (Dikey : 0 , Yatay : 1)
Fly :    startPoint (1 ile 9 arası animasyonun başlama noktası)
Iris :     startPoint (1 işle 50 arası bir değer)
şekil belirtme (Iris.CIRCLE veya Iris.SQUARE)
PixelDissolve :    xSections (1 ile 50 arası animasyon olacak yatay piksel miktarı)
ySections (1 ile 50 arası animasyon olacak dikey piksel miktarı)
Rotate :    ccw (saat yönünün tersi dönmesi için ccw:true veya saat yönü için ccw:false)
degrees (Dönüş miktarını belirleyen açı. 2 tur için 720 yazılır.)
Squeeze :    numStrips (Yatay için : 0 , Dikey için : 1)
Wipe :    numStrips (1 ile 9 arası animasyonun başlama noktası)

Ek metodların kullanılışına örnek verecek olursak :


Actionscript 2.0 :

______________________________________________________________________________

import mx.transitions.*;
import mx.transitions.easing.*;
TransitionManager.start
(
foto1_mc,
{
type : Wipe ,
direction : Transition.IN ,
duration : 1 ,
numStrips : 20,
easing : Bounce.easeOut
}
)

______________________________________________________________________________

Actionscript 3.0 :
______________________________________________________________________________

import fl.transitions.*;
import fl.transitions.easing.*;
TransitionManager.start
(
foto1_mc,
{
type : Wipe ,
direction : Transition.IN ,
duration : 1 ,
numStrips : 20,
easing : Bounce.easeOut
}
)
______________________________________________________________________________

Bu makaledeki kod yoğunluğundan dolayı tam olarak uygulayamamış veya neye yaradığını da anlayamamış olabilirsiniz ama makalenin sonuna kadar okumayı başardıysanız size güzel haberlerim var. Buradaki çalışmamın FLA dosyası için :

http://expression.web.tr/al2y/transition.fla
Ayrıca bu makaleyi örneklerini Flash ile gösterilmiş haliyle görebilmek için :
www.ercanaltug.blogspot.com adresindeki bloguma girip sağüstteki arama kısmına Tween Class yazmanız yeterli olacaktır.

Ve işte bu kadardı. Programatik olarak ilk başlarda oldukça başarılı sonuçlar veren tween ve transition class ilerleyen zamanlarda çoklu nesnelerde ve ses video gibi nesnelere uygulanışının olmamasından yerini alternatiflerine bırakmaya başladı. Göz atmanız için en popular olanların linklerini paylaşıyorum.

MC Tween :
http://hosted.zeh.com.br/mctween/
Tweener (caurina.transitions.Tweener)
http://code.google.com/p/tweener/

Flash , Actionscript ve Class la rile ilgili bir çok eğitim videosu ve makalesini alttaki adreslerden ücretsiz izleyebilirsiniz.

http://tv.adobe.com
http://www.adobe.com/designcenter/video_workshop
http://www.layersmagazine.com/category/tutorials

Best Photo Editing Software for Mac/PC: 15+ Photo Editors


http://yazarlikyazilimi.meb.gov.tr/egitim/
http://www.mmistanbul.com/ders

 

BİR CEVAP BIRAK

Please enter your comment!
Please enter your name here