Photoshop Magazin
 


Flash CS3 ActionScript

01 October 2008 | Sayı: Oct 2008
 
1 2 3 4 5
 


hspace=0



1
Neden ActionScript:


Yapmış olduğumuz projelerde ActionScript” bize birçok kolaylıklar sağlamaktadır. ActionsScript bilgisi ile kısaca;


* Movie Clipler üzerinde daha fazla hakimiyet şansına,
* Grafiklerimizi zaman çizelgesi üzerinde kullanmadan programlama yoluyla hareket ettirmeye,
* Flash'ın içine ve dışına veri aktarabilmeye,
* Veri aktarımı sayesinde Formlar ve Chat formları rahatlıkla oluşturabilmeye,
*Zamana göre göreceli tepkiler verdirmeye,
* Sesi dinamik olarak kontrol edebilmeye kadar daha sayamadığımız birçok özelliği bizler için hazır hale getirmiş olacaktır.


Kısaca özetlemek gerekirse, ActionScript bizim yapmak istediklerimizle Flash CS3'ün anladığı dil arasında bundan sonra köprümüz olacaktır. Öyle ki, Flash projelerimizde hem eylem kaynaklı (bunu yap) talimatları hemde mantık kaynaklı (şunu yapmadan bunu analiz et) talimatlarını kullanmamıza izin verir. Tüm diğer programlama dilleri gibi ActionScriptde çok farklı elemanlar içermektedir. Bunlar; kelimeler, noktalama işaretleri ve yapılardır.


Bunlar sayesinde Flash'a projelerimizde istediğimiz gibi davranmasını sağlayabiliriz. Eğer ActionScript’i doğru şekilde kullanmazsak gerçekleştirmek istediğimiz etkileşimlerin istediğimiz gibi olmadıklarını veya hiç çalışmadıklarını görebiliriz. Dilerseniz hep birlikte ilk ActionScript'imizi çalışır hale getirelim ve mantığını biraz olsun anlamaya çalışalım


2 Animasyon Kurgusu:
hspace=0
Animasyona geçmeden önce hazırlamış olduğumuz sahne ortamından biraz bahsetmemiz gerekmekte. Görüldüğü üzere bir bilardo masasında bulunan ıstakamız sayesinde varolan beyaz topumuzla bir vuruş etkisinde bulunacağız. Bu vuruş etkisinde kullandığımız gücü de power bölümümüzde veri alarak tesbit ettirmeyi hedeflemekteyiz.

Bu işlemi gerçekleştirmek için tabi ki ıstakamızın hemen önünde bulunan bir de gizli bir butonu konumlandırma ihtiyacımız olacak. Bazı layerları animasyon süresince hiç oynatmayacağımız için sabit duracakları da kilitlemiş bulunmaktayız. Böyle bir etki için birde ıstakamıza hareket kabiliyetini de bir Movie Clip içerisinde ayrıca gerçekleştirmemiz de yapmamız gerekecek süreçler arasındadır.

3 Istıka Movie Clip'i :
hspace=0
F8 komutu ile varolan ıstakamızı Movie Clip’e dönüştürüyoruz. Bu Movie Clip içerisinde yapmayı düşündüğümüz eylemi ise şöyle sıralayabiliriz; Istakamız 10.frame’e kadar hareketsiz kalacak. 10.frame’den itibaren 30. frame’e kadar “create Motions Tween” komutu yardımıyla kaçış hareketi gerçekleştirecektir. Bu işlemler gerçekleştikten sonra 1.frame ile 30.frame’de animasyonu durdurma (STOP) actions’ı yazacak ve yeni bir layer açarak açmış olduğumuz “Label” katmanında bu birimlere daha kolay ulaşabilmek için (Frame Label) kullanacağız.
hspace=0
Movie Clip ile işlem bittikten sonra sahneye geri dönüş yapıp var olan ıstaka Movie Clip’i sahne üzerinde seçili hale getirip Instance Name kısmına da tekrar ıstaka ünvanı ile tanımlayacağız. Bu bize ActionScript komutlarında ıstaka Movie Clip’ine ulaşmamızı sağlayacaktır.

4 İlk Actions: İlk dikkat etmemiz gereken butonun yeri olacaktır. Gizli buton ıstaka Movie Clip'inin ucunda yer almalıdır.
hspace=0
Actions satırlarını incelemeye geçersek, ilk 3 satır kullanıcının topa birden fazla vurmak isteyebileceği için topun başlangıç noktalarını 'x ve ‘y’ koordinatlarında sabitlemiş olmamıza, bir sonraki satırda ise eylemimizin Power (güç) değişkeninin 0’a ayarlamakla (başlangıç için) mümkün olacaktır.

Bu bize değişkenin değeri topa ne kadar hızlı vurursa değişecek değeri tekrar ‘0’ değerine getirmeye yarayacaktır. Sonraki satırda ise “powerAmount” komut alanında gösterilen power değişkenini “text” haline dönüştürmeyi sağlayacaktır.

Burada “hitAmound” komudu bizim için topun gideceği mesafeyi, trackMouse ise topa vuruş anındaki kuvvetin belirlemesi için gerekmektedir. Eylemdeki “True” (doğru) değerlerin atanmasını sağlamaktadır.

5 Gizli Buton üzerine ActionScript'te devam :

hspace=0
Gizli butonun üzerindeki mouse etkisine geldi sıra. Gizli butona yapılacak tepki ile sahnede var olan daha önceden belirlemiş olduğumuz istaka Movie Clipin içine giriş yaptırmaya geldi. Burada Framelabel” bizi gideceğimiz frame karesine yönlendirmiş olacak.
hspace=0
Kullanıcı gizli butondan (fare tuşuna basılıyken) uzağa gittiği ve butonu bıraktığı anda bu eylem tetiklenir. (releaseOutside). İlk eylem ıstaka Movie Clip’ine yollar, burada istaka “basla” noktasına topun karşısında durmasına neden olur.

Bir sonraki eylem farenin butonunun bırakıldığı andaki yatay koordinatlarını belirler.

Buradaki “hitAmound değeri mouse başlangıç ve bitiş değerlerinin birbirinden çıkartılması yöntemiyle bulunur. Eğer “mouseStart değişkeni değeri 50 ve mouseEnd değişkeninin değeri 150 ise hitAmound değeri 100 olacak anlamına gelmektedir. Başka bir deyişle bu değer topa vuruş yapılan kuvvetin temsil değeridir.

6 Top Movie Clip'inin üzerindeki actionslar :
Gizli buton için yazdığımız actionsları bitirdikten sonra, şimdide top movie clip'inin üzerine actionsları yazmakla devam ediyoruz.

hspace=0


Top Movie Clip’inin üzerine yazdığımız bu komut ile enterFrame tetikleyicisini kullanmış oluyoruz. Bu tetikleyici bize hareket esnasında 10 pixel hareket eden “top” Movie Clip’in her defasında 2 pixel yavaşlamasına ve bu döngünün tekrar etmesine yardımcı olacaktır.

Bu olay sadece hitAmound değeri 5’in üstüne tekrar çıkarsa çalışmaya başlayacaktır. Birden fazla olayı yöneterek tek bir etkileşimli sonuca ulaşmak için anlatılabilecek güzel bir örnektir.

Ayrıca kodun içinde if cümleciği de geçmektedir. Hatırlayacağımız üzere hitAmound değişkeninin değeri topa ne kadar sert vurulduğunu belirlemekteydi.

Projemizin FrameRate değeri 24 FPS olduğu için ayrıca enterFrame değişkeni hareketi her frame’de bize 24 kere tekrarlayacaktır.

hspace=0

hspace=0


7
Top Movie Clip'inin üzerindeki actionslara devam:

Burada kodu çalıştırmak için mouseMove olay yöneticisini kullanıyoruz. Aynı zamanda çalışmaya başlamadan “_root” (Ana dizin, Kök) bulunan trackMouse değerine bakan bir if cümleciği içermektedir.

Bildiginiz gibi bu değişkenin değeri görünmez butona tıklandığı anda true (doğru) değerini, bırakıldığında ise false (yanlış) değerini almaktaydı.

Bu değer yalnız “true” değerini aldığında çalıştığına göre değişkenin değeriyle oynamamız bu kodun çalışmasını etkileyecektir. Bu kod “trackMouse” değişkeninin değerinin true olarak ayarlanmasını sağlayacaktır.

hspace=0

Power isimli değişken değeri ise farenin o anki pozisyonundan başlangıç değeri olan “mousestart” değerinin çıkartılmasıyla oluşturulmaktadır.

Bu eylemler fare hareket ettiği anda ( ve aynı zamanda trackMouse true değerine sahip) çalıştığına göre, topa etki edecek kuvvetin gerçek zamanlı bir gösterimi olacaktır.

Olayların sonunda “powerAmount” yazı alanında gözüken değer “hitAmount” topun ne kadar uzağa gittiğini belirleyen değişken değeriyle aynı olacaktır.

 

8 Test :
hspace=0
Control + Enter
kısa yolunu kullanarak ıstakanın ucunda bulunan gizli butona basılı tutarak sağa doğru topa ne kadar bir kuvvetle vuracağınızı belirleyin.

Belli bir mesafede çektikten sonra farenin butonunu bırakın. İstikanın top movie clip'ine çarptığını, top movie clipinin de sola doğru 10 pixel değerinde hareket ettiğini ve her 10 pixel’de değerini -2 pixel olanında düşürdüğüne tanık olacaksınız.
hspace=0hspace=0hspace=0hspace=0

Artık uygulanan gücüde size power bölümünde bulunan dinamik yazı alanına rakamsal olarak göndermiş durumdayız.

 

October 2008

 


Flash