Flash İle Buton Yapımı

Konu: Flash İle Buton Yapımı Salı Kas. 11, 2008 11:02 pm

1-Yeni bir Movie (film) oluşturalım [ File>New (Ctrl+N)]. Sahnemizin içine sağ tuş ile tıklayarak Movie Properties'i seçelim. [Modify>Movie (Ctrl+M)]. Buradan movie mizin Frame sayısını, dökümanımızın ebatlarını, arkaplan rengini seçebiliriz (biz burada, 12 frame, 100x100 px ve beyaz arka plan seçtik).

2-Araç Çubuğundan Rectangle Tool'u ( R ) seçelim ve düğmemizin kenarlarını biraz yuvarlıyalım ki biraz daha iyi görünsün. Bunun için Rectangle Tool seçili iken araç Çubuğunun altındaki Options'dan Round Rectangle Radius'u işaretleyip açılan pencereden kenar yuvarlama değerini 10 olarak yazıp Ok diyelim. Stroke Color' ı işaretleyip butonumuzda kenar rengi olmaması için No Color'ı seçelim. Daha sonra Fill Color'ı seçip iç rengini ayarlayalım. Şayet kapalıysa, Window>Panels>Fill ile doldurma panelini açalım. Biz burada Fill Panelinde pop-up menüden Linear Gradient'i seçtik ve renkleride yandaki
resimdeki gibi verdik.

Objemizi çizdikten sonra Layer 1'e dikkat ederseniz, Timeline daki 1.frame'i doldurduğunu görürsünüz.

3-Şimdi objemizi seçili hale getirmemiz gerekir. Bunun için Araç Çubuğundan Arrow Tool'u seçiyoruz. Seçimi kaybedersek, yine Arrow Tool ile yazımızın üzerine tıklıyoruz. Bundan sonra objemizi Sembol'e çevirmemiz gerekiyor. Insert>Convert to Symbol (F8) ile açılan pencerede objemize bir isim vererek (Biz burada Buton01 olarak verdik) alttaki listeden Button'u seçip OK diyoruz. Artık objemiz Flash'ın anlayacağı bir sembol (Button) oldu ve Library'e (Kütüphaneye) yerleşti. Artık Window>Library ile kütüphaneyi çağırıp sembolümüzü görebiliriz.

4-Şimdi Kütüphanemizdeki Buton01 isimli objemize çift tıklayalım. Açılan sayfa artık Button özelliklerinin bulunduğu yeni sayfadır. Layer 1'in yanında Timeline da özelleştirilmiş dört adet Frame görülmektedir. Bunlar Butonun özelliklerini belirler, Up:Normal görünümü, Over: Mause üzerine gelince görünen görüntüsü, Down: Mause ile tıklayınca veya üzerinden ayrılıncaki görüntüsü, Hit: Mause'un algılama alanını belirler. Burada dikkat ederseniz
1. Frame olan Up doludur. Şimdi
2.Frame olan Over'ı tıklayarak seçip, sağ tuş ile açılan menüden Insert Keyframe ile yeni bir keyframe ekleyelim. Biz burada değişik olsun diye yukarıdaki Fill Panelinde görünen kırmız renkli yerleri tıklayıp, yandaki renk penceresinden yeşil rengi seçerek değiştirdik.
3. frame olan Down'ı tıklayarak seçip yeni bir Keyframe ekleyerek buraya da butonun mause üzerinden ayrılıncaki görüntüsü için bir renk verebilirsiniz. Biz burada Up daki görüntüyü vermesini istedik ve bu yüzden Up daki Frame'in üzerine sağ tuş yapıp Copy Frames ile Frame'i kopyaladık ve Down'a geri gelerek yine sağ tuş ile açılan menüden Paste Frames ile yapıştırdık.
4.Frame olan Hit'i boş bırakabilirsiniz. Ancak biz burada siyah rengi verdik. Böylece butonumuzun şeklini tamamlamış olduk. Buton çalışmasını görmek için Kütüphanedeki görüntüsü üzerindeki oynatma (Play) tuşuna basabilirsiniz. Durdurmak için ise Play tuşunun yanındaki Stop tuşuna basınız.

5-Şimdide oluşturduğumuz Buton01 isimli Button'numuza link verelim. Bunun için Actions kullanacağız. Yalnız burada dikkat etmemiz gereken Button'a link verirken Timeline daki Frame'e değil direkt olarak Button'un üzerine Actions uygulamalıyız.
Bunun için öncelikle Button sayfasından çıkıp sahneye dönmek gerekiyor. Bunun için üst tarafta bulunan ' ikonuna tıklayarak sahne (Scene) mize dönelim. Artık sahnemize geri döndük ve yaptığımız objemiz karşımızda duruyor. Şimdi objemizin üzerine sağ tuş ile tıklayarak açılan menüden Actions'u seçelim. Açılan Object Actions Penceresindeki (Add a new item to the script) ikonundan açılan menüden Basic Actions>Get URL yi seçelim. Object Actions Penceresinde " on (release) { getURL (" ");} " şeklinde script komutları belirir. on (release) satırına tıklardanız aşağıda açılan menüden Event: bölümünde butona mause'un hangi hareketi ile link'e verileceğini belirtebilirsiniz (butonun üzerine gelice, butonun üzerine basınca, vb. genelde "Release" veya "Press" işaretlenir). getURL (" "); satırına tıklarsanız aşağıda açılan menüde URL kısmına link vermek istediğiniz adresin URL sini tam olarak yazabilirsiniz. Window: bölümünde link vereceğiniz sayfanın nasıl açılmasını istiyorsanız (aynı pencere içinden, yeni bir pencerede, vb), pop-up menüden seçebilirsiniz. Biz burada örnek butonda "Press" i işaretledik yani mause butonun üzerine basınca yeni adrese gidecek, URL kısmına kendi sayfamızın adresini yazdık ve Window bölümüne de sayfanın yeni boş bir pencerede açılması için _blank'ı tercik ettik.

6-İşte hepsi bu kadar. Artık üzerine basınca link verdiğiniz bir butonunuz oldu. Ctrl+ENTER'e basarsanız animasyonunuzu test etmiş olursunuz.
Timeline da dört adet buton özelliği görülmektedir. Bunlar Up:Normal görünümü, Over: Mause üzerine gelince görünen görüntüsü, Down: Mause üzerinden ayrılınca görünen görüntüsü, Hit: Mause tıklayıncaki görüntüsüdür.
Değişen renkler Fill Color'dan takip edilebilir.