Buton - Menü - Klavye Girdileri-4

Swf dosyasını incelediğinizde animasyonda 3 ayrı tür sembol kullanıldığını göreceksiniz. Bunlar:

- 2 tane ana buton (Flash ve Teknikleri)

- 3 tane küçük buton (Buton1, 2, 3)

- Ana butonlara basıldığında ortaya çıkan 2 tane film klibi (Flash ve Teknikleri adıyla)

Animasyonda önce semboller oluşturulacak daha sonra da sahneye yerleştirilerek kodlar eklenecektir.

Uygulama

1- Butonlarla başlayalım. İnsert > New symbol komutunu verelim. Davranış olarak butonu seçelim.

2- Up bölümündeyken oval aracını seçelim. Çizgi ve dolgu renklerini seçelim ve aşağıdakine benzer bir şekil çizelim. Çizimin yanındaki ovaleşme kısmını properties panelinden ayarlayacağınız gibi pratik olarak fare imleçini bu kenara yaklaştırıp tıklayarak dışa çekme işlemi yaparak da oluşturabilirsiniz.

3- Yeni bir katman ekleyerek up bölümüne "flash" yazısını ekleyelim. İşaretleyici ile tutarak butonun merkezine yerleştirelim. Heriki katmanda da up bölümü işaretli iken 3 kez F6`ya basarak diğer alanları dolduralım. Daha sonra yazılara animasyonda gördüğünüz renk ve fontları atayalım.

4- Aynı yöntemle buton1, buton2, buton3 sembollerini ayrı ayrı hazırlayalım.

5- Butonlar hazır.Şimdi Flash isimli film klibine geçelim. Kliplerin gözünüzde şekillenmesi için aşağıdaki resimi inceleyin.

Flash butonuna basıldığında gelişecek olaylar şu bölümleri içerecektir:

- İlk katman shape tween işleminin uygulandığı bir çizginin ilerlediğini gösteren katman olacaktır.

- Bunun altında (biz üst kısma yerleştirdik) çizgi animasyonu biter bitmez gözlenen "seçenekler" yazısını içeren katman

- 3. sırada butonun sahnede görülmesini engelleyen görülmeyen kutuya ait katman

- Anime edilen buton1`e ait katman

- Anime edilen buton2`ye ait katman

- Anime edilen buton3`e ait katman

Şimdi klibi oluşturmaya başlayalım.

6- Bir klip sembolü açalım. 1.frame`i boş bırakarak 2.frame`e bir keyframe atayalım. İlk frame`in boş bırakılma nedeni klip sahneye yerleştirildiğinde herhangibir görüntü gözlenmemesi içindir. Ve ilk frame` e bir stop komutu atayalım.

7- 2.frame`e line aracı ile 2mm uzunluğunda yatay bir çizgi çizelim. 11.frame`e sağ klik ve insert keyframe komutunu verelim. Line aracı ile çizgiyi ileriye doğru uzatalım. 2.frame`e dönerek frame panelinden buraya bir shape tween komutu verelim. Son olarak 26.frame`e sağ klik, insert frame komutunu verelim. Onion skin ile görüntü şöyle olacaktır:

8- Bir katman ekleyelim. Bu katmanı üste çekelim. Çizginin tween hareketinin bittiği 11. frame`i bu yeni katmanda seçelim. Bir keyframe atayarak text aracı ile seçenekler yazısını yazalım. Bunu yukarıdaki grafide gördüğünüz gibi çizginin hemen üstüne yerleştirelim. Böylece çizgi animasyonu bittiğinde hemen seçenekler yazısı gözlenecektir.
26.frame`e sağ klik ve insert frame komutunu verelim.

Şimdi yeni bir katman ekleyelim ve en alta çekelim. 2.frame`e keyframe atayarak zemin renginde ve küçük butonu örtecek boyutta bir dikdörtgen çizelim. Bu buton1`in ilk görüntüsünü kapatmak için kullanılacaktır. Seçenekler yazısının hemen altına yerleştirelim. 26.kareye insert frame komutunu verelim. Timeline ve sahnedeki görüntü şöyle olacaktır:

9- Buton1`in animasyonuna başlayalım. Yeni bir katman ekleyerek en alta çekelim. 11.frame`e bir keyframe atayalım. Kütüphaneden buton1`i sahneye alalım.Tam seçenekler yazısı hizasında görülmez kutunun altına yerleştirelim. Şu anda sahnede buton görülmeyecektir. 16.frame`e bir keyframe atayalım.
Klavyeden aşağı yön tuşunu tıklayarak buton1`i çizginin altına kadar indirelim. 11.frame`e motion tween komutunu verelim. Yine 26.frame`i işaretleyip insert frame komutunu ekleyelim. Alttaki şekilde butonu gizleyen kutu sola doğru çekilerek tween hareketinin nasıl oluştuğunu görmeniz sağlanmıştır.

10- Buton2`nin animasyonuna gelelim. Yeni bir katman ekleyip en alta çekelim. 1.buton hareketinin bittiği frameden bir sonraki frame olan 17.kareye bir keyframe atayalım. Kütüphaneden buton2`yi çekerek sahneye alalım. Yön tuşları ile buton1`in tam altına yerleştirelim. Şu anda buton1 buton2`yi gizlemektedir. Buton1`i sola ittiğimizde altta gizlenen buton2`yi görüyorsunuz.

21.frame`e bir keyframe atayalım. Yön tuşları ile buton2`yi ilk butonun hemen altına kadar indirelim.

17.frame`e motion tween komutunu verelim. Tekrar 26.kareyi seçerek insert frame komutunu verelim.

11- Buton3 için yeni bir katman ekleyip en alta çekelim. 22.frame`e bir keyframe ekleyip buton3`ü buton2`nin altına gizleyelim. 26.frame`e bir keyframe ekleyelim. 22. frame`e bir motion tween komutunu atayalım.

Tüm buton hareketine onion skin`le bakıldığında şu görüntü ortaya çıkar:

12- Son frame`e bir stop aksiyonu atayın. Her katmanda 27.frame`lere birer blankkeyframe atayalım ve herhangi birisine stop komutunu verelim.

2.klip olan teknikler klibini siz aynı yöntemle hazırlayın. Burada yatay çizgi için uygulanan bir motion tween katmanı dışında farklı yapılan bir işlem yoktur. Herşey hazır olduğuna göre sahneye yerleştirmeye başlayalım.

13- Heriki butonu yukarıdaki gibi sahneye yerleştirin. Soldaki boş daire "flash klibi"ni, sağ alttaki daire ise "teknikleri klibi"ni temsil eder. Bunları seçerek instance name olarak soldakine "_flash" ve sağdakine ise "teknikleri" adını verin. Daire klibin sol-üst köşesini işaret eder. (Kodları ekledikten sonra animasyon uygun olmayan bir yerden başlarsa bu dairelerin yerlerini kaydırıp en uygun konuma getirmelisiniz.)Flash yazan butona flashbt , teknikleri yazan butona ise teknikleribt adını verelim.

14- Anasahnede 1.kareyi seçip şu kodları atayalım.

function git1(event:MouseEvent):void {
_flash.gotoAndPlay(2);
teknikleri.gotoAndStop(1);
}
flashbt.addEventListener(MouseEvent.CLICK, git1);

function git2(event:MouseEvent):void {
teknikleri.gotoAndPlay(2);
_flash.gotoAndStop(1);
}
teknikleribt.addEventListener(MouseEvent.CLICK, git2);

Filminizi test edebilirsiniz.