Lukamaras.com'dan çevirdiğim bu derste, animasyonlu butonlar hazırlamayı öğreneceğiz. Animasyon butonların içine kare kare motion ve guided animasyonlar yerleştireceğiz.


1. Yeni bir flash döküman açıyoruz. Properties penceresinden ( ctrl+J ) background'u siyah olarak ayarlıyoruz, Frame Rate değerimiz 24 fps.olmalı.

2. Rectangle aracımızı alıp 200*200 pixellik kare çiziyoruz ve sahnemizin soluna hizalıyoruz. (Align Paneli) Karemizin rengi çok önemli değil ,istediğiniz bir rengi seçin.

Properties panelinden şeklimizin koordinatlarını belirleyelim. Y: 133 ve X değeri de, biraz önce hizalamış olduğumuz için 0 olmalı.

3. Color Mixer paneline gidiyoruz.(window > Color Mixer ) ve henüz seçmedikse kova ikonumuzla rengimizi seçiyoruz. Gradient uygulayacağız.

Şimdi küçük karelere tıklayarak,renkleri ekleyelim. Soldaki karemize tıklayıp #011A37 kodlu rengimizi alıyoruz, koyu,hoş bir turkuaz...Sağdaki küçük karemize tıklayıp buraya da #00B2DF kodunu yazıyoruz. Daha parlak bir turkuaz tonu...

Karelerimizin her ikisini de biraz iç tarafa doğru sürüklüyoruz.Sonuç aşağıdakine benzer olmalı.

4. Küçük kovamızı yeniden alıyoruz, Paint Bucket Tool (K) ve dikdörtgenimizi yukardan aşağı sürükleyerek renklendiriyoruz.

Dikdörtgenimiz seçili değilse,seçiyoruz ve properties panelinden koordinatlarını kontrol ediyoruz.

5.Bu layer ı kitliyoruz.isimlendireceğiz yeniden. Ve yeni bir layer açıyoruz.

6. Line Tool umuzu seçip,Properties panelinden hairline olarak ayarlıyoruz,renk olarak siyahı seçiyoruz.(L)200 pixel uzunluğunda yatay bir çizgi çekip,yine sayfanın soluna hizalıyoruz. Y koordinatını da 164 veriyoruz.

7. Çizgimizi 5 kez kopyalayacağız,toplamda 6 adet çizgimiz olacak. kopyalarken aynı zamanda 33 pixel aşağı çekiyoruz çizgilerimizi.Bunu ok tuşlarıyla kolaylıkla yapabiliriz. Elimiz SHIFT tuşundayken aşağı ok tuşuna 3 kez basıyoruz.(Bu çizgiyi 30 pixel aşağı çeker)sonra SHIFT tuşunu bırakıp 3 kez daha basıyoruz.Toplamda 33 pixel ...

Şimdi 6 çizgimizin Y koordinatlarını şu şekilde ayarlıyoruz: 164, 197, 230, 263, 296, 329.
8. Şimdi hazırladığımız tüm çizgilerimizi seçip kopyalayalım.(Ctrl+C, Command+C Mac için) ve past in Place yapalım.Bu çizgilerimizi ,yerinde kopyalayacak. Edit > Paste in Place.
Çizgileri seçili bırakalım ve aşağı ok tuşuyla 1 pixel aşağı çekelim.Aşağı çektiğimiz çizgilerimizin rengini de değiştirip beyaz yapalım.Üstteki çizgiler siyah, alttakiler beyaz olmalı.Hoş bir görüntü sağladık.



9. Her bir beyaz çizgimizi seçip,alfa değerlerini değiştireceğiz.Önce ilk çizgimiz..Burda beyaz çizgimizin seçili olduğundan emin olmalıyız.


10. İlk çizgimizin alfa değerini %45 yapıyoruz. (Color Mixer panelinden yapabiliriz)Diğer çizgimizi seçip,onun da değerini %40 yapıyoruz.Diğer çizgilerde de aynı işlemi tekrarlıyoruz fakat değerleri %35,%30,%25 olacak.
Son beyaz çizgimizi siliyoruz.

11. Bütün çizgilerimizi seçiyoruz.(siyah-beyaz), (Edit > Cut) diyerek ,bu çizgileri kesiyoruz.Amacımız şu an bulundukları layer dan almak.

12. Ve Gradient uyguladığımız layer a yapıştırıyoruz. ( Edit>Past)Sayfamızın herhangi boş bir yerine tıklıyoruz.
Butonun arka planını hazırlayalım.

Şimdi dikdörtgenimiz eşit parçalara ayrılmış oldu. Bu adımda , her bir dikdörtgene hoş butonlar ekleyeceğiz.

13. ilk dikdörtgenimizi seçiyoruz. Shift e basılı tutuyoruz,her bir dikdörtgeni seçerken aynı şeyi yapmalıyız.



14. Dikdörtgeni kesiyoruz.

15. Buton adında yeni bir katman açıyoruz. Dikdörtgenimizi bu layerın içine yapıştırıyoruz.Ve bu katmanı kitliyoruz.

16. Layerımızı Lines layer ının altına sürüklüyoruz. Ve buttons layerını kilitliyoruz.

17. Buton layer ının üstünde yeni bir katman oluşturalım.

18. Rectangle tool umuzu seçiyoruz. (R).

Tools panelinde, Option Bölümündeki Snap to Objeck özelliğini kapatıyoruz.Sol aşağıdaki Set Corner butonuna basıyoruz.Karşımıza çıkan dialog penceresinde 4 değerini verip OK diyoruz.
Tool panelinde,alt bölümde görebileceğimiz renk değerlerinden, Stroke Color 'ı (çizgi rengi ) No Color olarak işaretliyoruz.

Color Mixer paneline gidiyoruz. Hoş,turuncu-sarı geçişli bir renk oluşturacağız. Linear seçeneğini seçelim.

Aşağıda göründüğü gibi iki rengimizin ortasına bir kez tıklayıp, yeni bir renk daha oluşturuyoruz.Ve küçük karelere tıklayarak, tek tek renk değerlerini veriyoruz.



#FF6600,  #FF6800  ve  #FFCC00
19. 33*20 pixel ebadında bir dikdötgen oluşturalım.Bunu dikdörtgen seçiliyken, aşağıda, Properties panelinde bulunan W ve H kutucuklarıyla yapabilirsiniz.

Şimdi, Butonumuzun X değerini 7 veriyoruz. (buton katmanında değiliz dikkat!).


20. Daha rahat çalışmak için,minik butonumuza yaklaşalım. Gradient Transform Tool (F)seçiyoruz. Sarıdan, turuncuya doğru bir geçiş elde etmek istiyoruz. Buna göre ,aracımızı döndürüyoruz.

21. Minik karemizi 5 kez kopyalıyoruz.


Doğru Fontu Seçmek

Butonlar için uygun bir fonta ihtiyacımız var.
Action Fonts sitesine gidip ,"pixel fonts" kategorisine tıklayıp 04b 21 no'lu fontu indirebilirsiniz.

22. Yazı aracımızı alıyoruz. (T). Biraz önce yüklediğimiz (04b21) fontumuzu seçiyoruz. Properties panelinden, Static Text'i işaretliyoruz. Rengimiz beyaz, font büyüklüğümüz 16 olacak.

23.Sayfanın herhangi bi yerinde "e" yazıyoruz.Evet! Küçük "e" harfine ihtiyacımız var. The Pac-Man oyunundaki bir hayalet karakter göreceksiniz.


Bu text imizi, küçük kutucuğumuza ortalıyoruz. Emin olmak için Properties panelinden yardım alabiliriz.



24. Tekrar Text Tool u alıyoruz ve yine aynı değerlerle "a" yazıyoruz.Bir önceki adımları izleyerek, bu butonumuzu da, güzelleştiriyoruz.

Aynı şekilde, diğer kutucuklar için de f, j, z ve g harflerini uyguluyoruz.

25. a diffrent pixel Fonts seçiyoruz. İsterseniz indirebilir ya da , benzer bir pixel font kullanabilirsiniz. Rengimiz yine beyaz ama büyüklüğü 8 olacaklar. Sırayla, "home", "mission", "about us", "galleries", "contact" ve "employment". (türkçelerini de yazabilirsiniz ne de olsa yabancı siteden çevirdik) Ve yukarıda göründüğü gibi, etiketlerimizi yerleştiriyoruz.

(Control > Test Movie) diyerek, kontrol etmek de fayda var. Fontlarımızda, renk geçişlerimiz de sorun olmasın.

26. Şimdi bu layer daki tüm ögeleri seçelim ve keselim onları (Edit > Cut).

27. Şu an bulundukları layer ı da silelim. Ve kilitli olan buton layer ımıza paste edelim. (Edit > Paste in Place).

Grafikeleri Butona Dönüştürmek

28. SHIFT e basılı tutalım. Üstteki mavi arka planımızı seçelim, "home" etiketimize , sonra da hayalet ikonumuza tıklayalım.



29. seçtiğimiz objeleri butona çevireceğiz.Modify > Convert to Symbol diyoruz.

Önümüze çıkna dialog penceresinden, buton sekmesini tıklıyoruz. İsmini de "home button"veya"home_btn" veya istediğiniz herhangi bir ismi verebilirsiniz ama bunlar kolaylık sağlayacaktır.

30. Aynı işlemler diğer butonlarımız ve etiketlerimiz içinde uyguluyoruz.Tek tek isimlendiriyoruz.

(Window > Library) kütüphanemizi açtığımızda 6 adet butonumuz olmalı.

Butonlara Animasyon Ekleyelim

Sonunda her butonumuza animasyon ekleyebiliriz.En alttaki butonla başlayalım. "employment" butonumuza kare kare animasyon ekleyeceğiz.

31. Butonumuza iki kez tıklıyoruz ve buton sahnemizin içine giriyoruz.


32. İlk önce hazır bulunan layer ımıza, "background"ismini verelim ve yeni bir katman ekleyelim, onun da adı "text ve icon" olsun. Sahnemizin herhangi bir yerine tıklayalım, hiçbirşey seçili olmasın.

33. Background layer ındayken, etiketimizi, ikonumuzu ve turuncu zeminimizi seçelim. (Bunu SHIFT tuşuna basarak yapıyoruz tabi ki)

34. Bu objelerimizi yine keselim. Background katmanımızı kilitleyip,bu objelerimizi "text ve icon" katmanımıza paste in place yapalım.

35. Backgorunda layerında, Hit karesine gelelim sağ tıklayıp "Insert Frame" diyelim. Butonlarınızın timeline ı aşağıdaki gibi görünmeli.

36. Aynı şeyi "text ve icon" katmanı içinde yapalım . (Insert Frame)

37. Yeni bir katman daha oluşturalım en üstte olacak şekilde. Buna,"action yada animation" diyebiliriz."text ve icon" layer ın daki ikonumuzu, kopyalayalım ve bunu animation katmanına past in place yapalım. Burda dikkat edeceğimiz şey, iconumuzu kesmiyoruz, kopya alıyoruz. "Text ve icon" layer ını kilitleyelim.

38.Animation layerındayken, Up karesine tıklıyoruz sağ tıklayıp bir Keyframe ekleyip,Over karesine de sürüklüyoruz. Down vw Hıt karelerini seçip, sağ tıklayıp "remove frames"diyoruz.Timeline ınınız aşağıdaki gibi görünmeli.



39. Over karesine tekrar gidiyoruz.Ve sahnedeki ikonumuza bir kez tıklayıp Modify > Convert to Symbol den, iconu bir movie clip e dönüştürüyoruz. Burda movie clip ismi olarak da "employment animation" diyoruz ve OK butonuna basıyoruz.

40. Yeni yarattığımız movie klip e çift tıklayıp, içine giriyoruz ve ikonumuza yaklaşıyoruz. (%800) Daha rahat çalışalım.

41. Var olan layer a, "invader" diyelim ve yeni bir katman oluşturalım ona da, "rays"ismini verelim.İkonumuzu,invader layerındayken kopyalayalım ve rays layer ına past in place yapalım.İnvader layerımızı da kitleyelim.

42. Hatırlayalım, ikonumuz hala bir text. Bunu bir şekle yani shape'e dönüştüreceğiz.Seçelim ikonumuzu, Modify > Break Apart. Şimdi,bu şeklimizin tüm parçalarını seçip,bir küçük kareyi ayıralım ve silelim.aşağıdaki gibi olacak.



43. Minik eyaz kareyi sol ok tuşuyla taşıyalım ve X koordinat değerini : -1.0. yapalım.ve karemizden kopya alıp,past in place diyerek sağına ve soluna simetrik olarak ekleyelim.


44. Rays katmanında 3. Kareye sağ tıklayıp bir key Frame ekleyelim.Böylece animasyonumuzu hareketlendireceğiz.

Her iki yandaki karemizi seçip, kopyalayalım ve aynı düzlemde past in place komutuyla yapıştıralım

45. 5. Kareye geliyoruz ve yine bir keyframe ekliyoruz. Bir önceki adımı,5. Frame için de uyguluyoruz. İkonumuzun yan kolları uzayacak böylece.



46. 7.Kareye bir keyframe ekliyoruz bu kez. Soldaki karelerin hepsini seçip,olabildiğince sola taşıyoruz,turuncu butonun dışına taşmayacak şekilde. Aynı işlemi sağdaki kareler için de yapalım.

47. Şimdi, 9. Kareye bir keyframe ekliyoruz. Burda minik kareler eklemeyeceğiz yada taşımayacağız.iconumuzun hemen yanındaki kareyi sileceğiz.11. karede de, yine keyframe ekleyip, aynı işlemi uygulayacağız, bir sonraki kareyi silerek.



48. 13.Kare ye bir keyframe daha. Burda da kalan karelerimizi silelim.Sonra 14.kareye bir sağ tıklayıp, Insert Frame diyelimEn sonunda da, invader katmanının 14. Karesine gelip, Insert Frame diyelim. Bu işlemler sonucunda Timeline ınınız, umarım ki aşağıdaki gibidir.

Test Movie!(CTRL+Enter) Bi kontrol edelim dimi?

Hareket eden Pac-Man Yapalım...

Henüz kaydetmediyseniz ,dökümanınızı kaydedin.

49. Ana sahneye dönelim ve pac-man butonumuza ( contact buton) çift tıklayalım.Asıl animasyonumuzu yapmadan önce,biraz önceki butonumuzda uyguladığımız adımları uygulayacağız.

50. İlk katmana "background" adını veriyoruz.yeni bir layer ekliyor ismine de "text and icon" diyoruz. Link etiketimizi ("contact") ve pac-man ikonumuzu seçiyoruz. Bu iki objeyi kesip,yeni layer içine past in place yapıyoruz.Background katmanını da kilitliyoruz ve Hit karesine sağ tıklayıp,Insert Frame diyoruz.

51. Text and icon layerında Over ve Down hallerine birer keyframe ekleyelim.

Over haline geri dönüyoruz. Hiçbir şey seçili olmamalı,sadece pac-man ikonumuzu seçiyor ve kesiyoruz.Bunu yapıyoruz çünkü, kullanıcı fareyle butonun üzerine geldiğinde ,görünür olsun istiyoruz.Aksi halde animasyonumuz mahvolabilir.

52. Bu layer ı da kilitliyoruz ve "animation"adında yeni bir layer açıyoruz. Over haline sağ tıklayıp bir keyframe ekliyoruz. Şimdi pac-man imizi bu layer içine yapıştırabiliriz.Down ve Hit hallerini sağ tıklayıp kaldırıyoruz. (Remove Frame)


53. Pac-man i seçelim ve onu bir movie clip e dönüştürelim. (F8)İsmine, pac-man animation diyelim.

54. Movie Clip e çift tıklayıp içine girelim. Pac-man imizi seçip bunu movie klip yapalım. İsmi de "movie clip pac-man"olsun. Burda layer 'ına da isim verelim ve "pac-man runing" diyelim. 15. kareye bir keyframe ekleyelim ve pac-man i, turuncu alandan taşırarak sağa kaydıralım.



1 ile 15 kareler arasında herhangi bir yere sağ tıklayıp, motion tween uygulayalım.

55. 16. Karede bir keyframe imiz daha olsun. Bu kez de pac man i, aynı hizada sola kaydıralım. Bunu daha kolay şöyle yapabiliriz. 1. Karemize sağ tıklayıp,copy frame deyip, 30. Karede sağ tıklayıp Paste Frame diyebiliriz. Yine herhangi bir kareye sağ tıklayıp motion tween uygulayalım.

Animasyonumuzu test edelim. Güzel bir animasyon oldu fakat biraz dikkat edersek, pac-man dışarı çıkıyor ve ortaya geldiğinde duraksıyor. Çünkü ,ilk frame ile son frame tamamen aynı. Pac-man animasyon sonuna geldiğinde,tekrar baştaki aynı yerine dönüyor.
56. Düzenleyelim. 29. Kareye bir keyframe ekleyelim ve 30. Kareyi kaldıralım.ve tekrar test edelim.herşey yolunda olmalı ?

Şimdi, pac-man in sadece turuncu alanda görünmesini sağlamalıyız? Peki nasıl? Tabiki mask uygulayarak!.

57. Butonun timeline ına geri dönüyoruz. Animation katmanını kilitleyip, background katmanını açıyoruz. (eğer kilitliyse:)).Turuncu alanımızı seçip kopyalıyoruz ve tekrar katmanımızı kilitliyoruz.

58. Animation katmanını açıyoruz ve pac-man movie Clip ine çift tıklıyoruz. Şimdi pac-man running katmanını kilitleyelim ve mask adında yeni bir katman oluşturalım.

Bu katmana biraz önce kopyaladığımız,turuncu alanımızı yapıştırıyoruz.Rengimizi solid bir renkle değiştirelim ve varolan haliyle iyi bir kontrast elde edelim. Ve elde ettiğimiz renkle,turuncu alanı tamamen kaplayacak şekilde bir alan oluşturalım.
Bu layer ı kilitleyelim.ve mask katmanına sağ tıklayıp, Mask ı seçelim.maskelediği alanın layerı biraz sağda görünmeli.

Test Movie yapalım ve kontrol edelim. Şimdi pac-man imiz sadece turuncu alanda görünüyor.

Fakat bir saniye!kaçırdığımız bir nokta var. Orjinal pac-man giderken bişeyler yerdi.:)Ağzını açıp kapatmalı. Güzel bir detay hatırladık. Eğer, sitenizin inandırıcı olmasını istiyorsanız, tüm detayları düşünmelisiniz.

59. kütüphanemizi açalım (CTRL+L) ve pac-man movie clip imizi bulalım. Çift tıklayıp, ziyaret edelim.

60. Timeline da, 5. Kareye bir keyframe ekleyelim. Henüz ve hala,bir text olan pac man imizi. Modify > Break Apartdiyerek bir şekle dönüştürelim.


Yüzünün bir parçasını seçelim, kopyalayalım ve ortasındaki boşluğa paste in place yapalım.Şekildeki gibi görünecek.



61. Şimdi, 8. Kareye bir frame ekliyoruz ,böylece animasyonumuz 8.kareye kadar uzayacak. Ve test ediyoruz.

Diğer Butonların Açıklanması

Diğer butonlar da, size gösterdiğime benzer yöntemlerle yapılabilir. Dönen uzay gemisi,bombacı ve karışık hareketlerle zıplayan karakter ve hayalet animasyonu....

Karışık hareketlerle zıplayan ve bombacı için küçük actionscript kodları eklemeniz gerekecek. Bunu clipler içerisinde ayrı bir katman açarak, action parametresinden yapabilirsiniz(F9). gotoAndPlay() . Böylece animasyonumuz daha yumuşak bir görünüm alacak.

Uzay Gemisi- Bu animasyonumuzu,Properties paneli Rotation sekmesinden kolayca ayarlayıp motion tween verebiliriz. Animasyonun timeline'ında olmayı unutmayın.

Hayalet Figürü- Yine aynı adımları göz önünde bulundurarak, animasyonumuzun rengini değiştireceğiz. İlk görünüm de beyaz, sonra da koyu bir mavi görünümüne bürünecek. Oldukça basit! Harika oldu!

Kaynak Dosyayı indirip, detayları takip edebilirsiniz.