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 örnek1 de gördüğümüz
yöntemle yarıçap olarak 12 değerini ayarlayalım. Aşağıdakine benzer
bir şekil çizelim.
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.
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.)
14- Flash butonunu seçin ve
action panelini açın.
on (release) {
flash.gotoAndPlay(2);
teknikleri.gotoAndStop(1);
}
Komutunu verin. Bu sayede Flash butonu tıklandığında
ilk animasyon ortaya çıkacak fakat diğer animasyon ise frame1`e
hareket edecektir. Bu frame boş olduğundan doğal olarak diğer
animasyon açılmış ise kapanacaktır.
Teknikleri butonuna da aynı yöntemlerle kodları
atayın:
on (release) {
teknikleri.gotoAndPlay(2);
flash.gotoAndStop(1);
}