Merhaba arkadaşlar ;


Bugün günün anlam ve önemine bağlı kalarak sizin de mantığını anlayabilmeniz için faydalı olacağına inandığım ufak bir buton tasarımı projesi notumu aktarıyorum.

Adobe Flash içerisinde animasyonlu butonlar yapabilmemiz mümkündür. Buna ihtiyaç ise Flash'ta bir butonun metodlarının sadece Up,Over,Down ve Hit ile sınırlandırılması, özde overa veya down kısmına Movie klipler ekleyebilsekte üzerinden çekildiğinde animasyon yapamamızdır.Mesela rollout,dragout gibi ekstre metodları da actionscriptle erişebilmekteyiz.Böyle etkileşimli bir Movie Klip buton yaratmak için boş bir çalışmada CTRL-F8(İnsert New Symbol) ile yeni bir Movieklip yaratalım.Bu Movie klip içerisinde benim projemde 6 adet layer kullandım,bunları teker teker açıklayayım,siz kendi projelerinizde bu animasyonları istediğiniz gibi geliştirebilirsiniz. Benim senaryomda ilk frame'de butonun normal(up) hali gözükecek, 2.frameden 10.frame'e kadar rollover(üstüne gelinmesi)göstereceğim,devamında da 11den 20.frame'e kadar da rollout animasyonunu göstereceğim.

1-)Actionlar Layerı : Animasonun ilk frame'ine stop koyuyoruzki anasahnede direk oynamasın,üstüne gelince oynasın(bu kısmı kod ile halledeceğiz)

2-) Çeper Layerı : Animasonun oynayacağı buton tasarımının dışarısı,çeper özünde içerisinde de bir renge sahir köşeleri yuvarlanmış bir kare.Ancak çeper adını verdiğimdende anlaşıldığı gibi,içerisi yani dolgusunu seçip F8 ile Movie Klipe çevirip properties panelindeki Color kısmından Alpha'sını %0 yapıyoruz yani görünmesini istemiyoruz.Peki seçip silseydik olmazdı,çünkü bu kısım bir nevi butonun Hit alanı,mutlaka olmalı ama görünür olmayabilir.

3-) Yazı layerı : her frame'de de gözükecek yazımızı buraya getiriyoruz.

4-) Kalp layerı : 2.frame'den itibaren gözükecek şekilde(rollover scriptine 2ye git oyna dieyeceğim, rollover olunca çıksın istiyorum o yüzden) kalpi bir blend mode(multiply) efekti ile yerleştirdim.

5-)Alt çizgi layerı : Butonumun üzerine gelince yazının altında bir çizgi çizilsin istiyorum ve 2.frame de küçük bir şeritten 10.frame'e gelince bir alt çizgi oluşturacak şekilde Shape Tween yapıyorum.

6-) Dolgu-Animasyon Layerı : Üzerine gelindiğinde de arkaplanda bir kırmızı dolgunun butonumu doldurmasını istiyorum,bu animasyonu yine 2.frame'den 10'a yapıyorum.

Benim senaryom böyle siz kendiniz mantığı kapıp değişik butonlardaki efektleri de verebilrsiniz. Asıl şimdi size göstermek istediğim birkaç animasyon kolaylaştırıcı ipucu var.Öncelikle rollover animasyonunuzu tamamladınız,ve bunun birebir aynısını rollout'a da vermek istiyorsunuz. Bunun için teker teker animasyonları yapmanıza gerek kalmadan,istenen animasyona sahip frame'leri kopyalayıp tekrar terse çevirebiliyoruz. Öncelikle altta gösterdiğim gibi dolgu animasyonunu 2den 10a kadar kopyalıyorum.


Daha sonrada kopyalanacak frame'leri alttaki gibi seçiyorum ve sağ tıklayıp kopyaladığım animasyona sahip frame'leri yapıştırıyorum.



Senaryo gereği kopyalanmış frame'lerdeki animasyonu tersine çevirmemiz gerekiyor. Bu kısımda da animasyona sahip frame'leri seçip sağ tıklayıp alttaki gibi Reverse frames diyoruz.


Ve sonuç olarak alttaki gibi bir timeline'a sahip oluyorum.1.frame'de sadece gözükecek şeklinde,2.frame'den 10'a kadar rollover animasyonunun oynayacağı kısımı tasarladım,11den 20.frame'e kadar da rollout yani mouse çekilinceki animasyonu rolloverdan kopyalayıp tersine çevirdim.Yanlız dikkat etmeniz gereken bir nokta çeper layerının dolgu alphası %0 olan ve sadece butonun etrafındaki çeperi tutan şeklin olduğu layerı hemen actions layerından sonraki 2.sıraya ekledim,bu mouse imlecinin düzenli çıkması için önemli.

Animasyonu tamamladık , şimdi bu içinde bulunduğumuz Movie Klipe buton özelliği kazandıracak kodları yazmaya.Anasahneye geri dönüp animasyonu yaptığımız MovieKlip'e sağ tıklayarak Actions kısmına girelim ve alttaki gibi Script Assist'i kapatıp Global Functions-Movie Clip Control kısmından on 'a çift tıklayın , alttaki kod kısmı gelecek.

Burada Movie Klipin üstüne yazdığımız kod ile bu movie klipin mesela üzerine gelindiğinde (rollover) nasıl bir actions alacağını,veya geri çekildiğinde (rollout) nasıl bir actions yine tetiklendiğini gösteren yazabileceğimiz metodlar var.Press movie klip üzerinde tıklayınca,release ise tıklayıp mouse'u bırakınca alınacak actionsları belirten metodlar.

Bizim senaryomuza uygun olan rollover(mouse Movieklipin üstüne gelince) seçip this.gotoAndPlay(2) diyoruz. this olmasının nedeni relative bir erişim ile bu movie klipin içerisindeki bir timeline'ı hedeflemek istememizdir. Aynı şekilde mouse movie klipin üzerinden tıklamadan çekilince yapılacak animsyon içinde yine aynı timeline'da this.gotoAndPlay(11) diyoruz.Son olarak ta press(tıklanırsa) bu sefer ana timeline'da(movieklipin değil) istediğimiz frame'i klasik gotoAndPlay veya Stop ile yazıyoruz.

Ben de bu çalışmamı güzel bir sürprizle tıklandığında gelen yazı ile sözlüm Gayem'e sevgililer günü sürprizi olarak ithaf ediyorum. Siz de çalışmalarınızda kalp kullanmak isterseniz ufak ta bir tüyo vermek isterim,kalp çizmek ya da vektörel kalp aramakla uğraşmadan hemen Webdings fontunu seçin ve büyük Y harfinin burada kalp olduğunu göreceksiniz,kırmızı renkle Flash'ta ve animasyonlarınızda kullanabilirsiniz.


Böylelikle animasyonlu buton tasarımımızı tamamladık.Bu animasyonun aynısına sahip diğer butonları Library'de bu movie klipe sağ tıklayıp Dublicate edip sahneye bırakın.İçerisine çift tıklayarak girip sadece yazı layerında yazısını güncelleyin,hepsi o kadar :)

Çalışmamın fla dosyasını indirmek için ekteki linke tıklayınız.




Faydalı olması dileğiyle...