Flash CS3 Dersleri (Butonların Kullanımı)

WaTcHFuL

EVERYWHERE
Katılım
10 Kas 2005
Mesajlar
10,456
Reaction score
0
Puanları
0
Konum
Bizim Muhattap Olduğumuz Tek Gerçek Zihnimizde Yaş
aku9kz.jpg


Bu bölümde bahsedilecek konuları şu ana başlıklar altında toplayabiliriz:

1- Basit butonlar

2- Komplike ve animasyonlu butonlar

3- Butonlara tween uygulaması

4- Pop-up menü ( Çekme menüsü ) oluşturma

5- Buton izleme seçenekleri

6- Klavye girdi olayları

7- Buton over alanına film klibi ekleyerek animasyonlu buton oluşturma

Butonlar sadece başka bir sayfaya yönlendirme amacıyla kullanılmazlar.

Film klip leri içinde actionscriptlerle beraber kullanıldığında çok çarpıcı sonuçlar elde edilir.

Bu amaçla gizli butonlar sıklıkla tercih edilir.

xpvq4j.jpg


291nd6h.jpg


2wp2zb4.jpg


11h3ytg.jpg



Gizli butonlarda up, over, down alanları boş bırakılıp sadece hit bölgesine dolgu içeren bir alan eklenir.

Flash`ta bu buton sahneye sürüklendiğinde açık mavi renkte gözlenir.

Filmi browser`da açıldığında ise hiçbir imaj görülmez, fakat mouse ile üzerine gelindiğinde el imajı ortaya çıkar.

Bu butona eklenen tüm komutlar kusursuz olarak çalışır.
 
Butonların Kullanımı Uygulama - 1


Uygulama 1


Buton üzerinde bir basma efekti oluşturacağız.

Uygulama

1- İnsert > New Symbol komutunu verin.

Davranış olarak buttonu seçin.


2- Bu katman gölge için kullanılacaktır.

Up üzerine tıklayarak işaretleyin.

Oval aracını seçin.

Color bölümünde Stroke Color seçeneğini kapatın.

Yani şekilde dış kenar olmayacak.

Dolgu için çok koyu olmayan bir gri renk seçin.


3- Şeklin kenarını yuvarlatmak için properties paneline bakın.

Renk kutusunun hemen altında üstteki aktif alttaki aktif olmayan 2 kutu göreceksiniz.

Çizimin kenarlarını yuvarlamak için buraya bir değer (Ben 10 değerini girdim) girin.

Şayet hemen yandaki kilit ikonunu tıklarsanız her iki kutuda aktifleşir.

Üstteki sol alttaki sağ kenarın yuvarlaklığını sağlar.

179vnn.jpg



4- Şimdi Up seçili iken arzu ettiğiniz boyutta bir şekil çizin.

255mdr7.jpg



5- Over, Down ve Hit alanında keyframe olmadığından 3 kez peşpeşe F6`ya basarak bu üç alana birer keyframe ekleyin.

Görüntü özelliklerini hiç değiştirmeyin.


6- Yeni bir katman ekleyin.

Burası butonun asıl görüntüsünü oluşturacaktır.Alt katmandaki resmi sağ klik yapıp kopyalayın.

İkinci katmanda Up alanını işaretleyip CTRL+Shift+V` ye basarak kopyaladığınız yerin tam üzerine yapıştırın.

Bu önemli, şekiller tam üstüste gelmelidir.

Görüntülerin çakışması sizi şaşırtıyorsa alt katman görüntüsünü kapatın.
(Göz şeklinin hizasına tıklayarak)

207uis8.jpg



7- Şimdi,en üst katmandaki up alanındaki resmi seçin. Windows > Color komutu ile paneli açın.

Burada Type alanından lineer gradient`i işaretleyin.

Solda açık mavi sağda ise koyu mavi rengi seçin. Gradient rengi hazırladıktan sonra boya kutusunu seçip şekil üzerine tıklayın.

Şekil gradient renkle boyanmış oldu. Yeniden up alanını seçin üç kez F6`ya basarak over,down ve hit alanına keyframeler ekleyin.


8- Over alanını tıklayın.

Sahnedeki şekili seçip Modify > Transform > Flip Horizontal komutunu verin.

Gradient tersine dönecektir.

Bunu yapmamızın nedeni mouse buton üzerine geldiğinde bir efekt oluşturması içindir.

Down alanındaki şekle dokunmayın.


9- Artık gölge ve basılma efekti vermeye hazırız.

Alttaki katmanın tekrar görünmesini sağlayın.

Bunun için katman üzerindeki çarpı şekilini bir kez tıklamanız yeterlidir.

Üst katmandaki up alanındaki şekili seçin, klavyede sol yön tuşuna 3 kez, üst yön tuşuna 3 kez basın.

Bu iki kez de yapılabilir.

Alttan gölge efekti çıkacaktır.

2yyc8kk.jpg



10- Şimdi over alanına gelin, aynı işlemleri uygulayarak görüntüyü 3 piksel sola ve yukarıya ilerletin.


11- Down alanında hiçbir işlem yapmayın.

Alttaki gölge görülmeyeceğinden basma efekti ortaya çıkacaktır.

Hit kısmına da dokunmanıza gerek yok.

Burası sadece sıcak alan sağlar.


12- En üste bir katman daha ekleyelim.

Burası yazı için kullanılacak.

Up kısmını işaretleyip yazımızı yazalım.

Fare ile tutarak butonun tam ortasına yerleştirelim.

2qjyj2s.jpg



Yazıyı sağ klik ve copy komutu ile kopyalayalım.

Over alanını tıklayıp işaretleyelim, CTRL+Shift+V ile aynı alana kopyalayalım.

Bu sayede yazıları tam üstüste getirme sıkıntısından kurtuluruz.

Aynı işlemi down alanında da yapalım.

Fakat bu alan kaydırılmadığından yazıyı üstteki işlemin tersine 3 piksel sağa ve aşağıya alalım.

Rengini beyaza yakın bir gri tona çevirelim.

Hit alanına yazı eklemeye gerek yoktur.

Timeline`daki görüntü şöyle olmalıdır:

a461jk.jpg



Şayet butonda ses olmasını istiyorsanız önce File > İmport komutu ile kütüphaneye bir ses dosyasını alın ve down alanlarından biri işaretli iken mouse ile kütüphaneden sahne içine sürükleyin. İlgili frame üzerine ses eklendiğini gösteren bir şekil göreceksiniz.

F12 ye basarak filminizi test edin.
 
Butonların Kullanımı Uygulama - 2

Uygulama - 2

acftdl.jpg


Bir grafikten animasyonlu butona geçişi göreceğiz.

Uygulama


1- Sahneye önce buton için bir yazı yanına da animasyon için bir şekil oluşturun.

2r3d0kz.jpg


Şekildeki yazının direkt bir sembol olduğuna dikkat edin.

Siyah halka oval aracı seçilip Fill Color bölümü kapatılarak yapılmıştır.

Ortadaki kırmızı dairede ise Stroke Color bölümü kapatılmıştır.

Line aracı ile beyaz renkli bir üçgen yapıl mış ve içi boya kutusu ile beyaz renkle doldurulmuştur.

Şu anda elimiz de sadece bir grafik mevcut.

Şimdi bundan buton ve animasyonlar oluşturacağız.




2- Sahnedeki yazı ve tüm şekilleri seçerek F8`e basın, davranış olarak butonu seçin.




3- Şimdi sahnede bir buton oluştu.

Bunun üzerine çift tıklayarak sembol düzenleme moduna geçin.

Timeline`da sadece Up durumu için bir imajın olduğuna dikkat edin.




4- Up durumu için bir animasyon oluşturmaya başlayabiliriz.

Up durumu işaretli iken sahnedeki siyah halkayı seçin.

kcfe5h.jpg


F8`e basarak onu bir grafik sembolüne çevirin.




5- Şimdi kırmızı daire ve oku seçin.

Birden fazla seçim yaparken Shift tuşuna devamlı basmayı unutmayın.

Yoksa birden fazla seçim yapamazsınız.

jpbedf.jpg


F8`e basarak onu da grafik sembolüne çevirin.

Bunları niye yapıyoruz?

Amaç bu 2 grafiği ayrı katmanlara alarak animasyon uygulamaktır.




6- Şimdi Shift tuşuna basılı tutarak hem siyah hem de kırmızı daire grafiğini seçin.

111mkvk.jpg


Dikkatli olun kaydet yazısını seçmeyin.

F8`e basarak bu iki grafiği movie clip`e dönüştürün.




7- Bu klibi düzenlemeye başlayalım.

Yeni klibimizi kütüphaneden sahneye alalım. Siyah halka grafiği ni seçerek sağ klik ve cut komutuyla kesin.

Yeni bir katman ekleyin ve ilk frame`i seçerek CTRL+Shift+V komutu ile kestiğimiz yerin tam üzerine yapıştırın.

20z4c2b.jpg





8- Şu anda görüntü aynı olmakla beraber grafikler ayrı katmanlara alınmış ve animasyon eklenmeye uygun hale gelmiştir.




9- Siyah halka katmanında 20.frame`e bir keyframe ekleyin.

Aynı yerde 10.frame`e de bir keyframe ekleyin.




10- 10. frame seçili iken scale aracına tıklayın ve şeklin alt tutamaçından yukarı doğru çekerek onu ince bir çizgi şekline çevirin.

4l3uwp.jpg


1 ve 10. framelere motion tween komutunu verin.

Bu işlemler sayesinde siyah halkamız yatay bir eksende dönme hareketi yapabilecektir.




11- Alttaki kırmızı daire katmanında da 20.frame`e bir keyframe ekleyin.

1.frame`e motion tween komutunu verin.

Properties paneline bakın.

Rotate kısmındaki auto seçeneğini CW, times alanına da 1 yazın.

Bu yolla animasyon saat yönünde ve 1 kez gerçekleşecektir.

11uexao.jpg





12- Animasyonun yenilenmesi sırasında duraklama yaratmak için heriki katmana birkaç frame ekleyin.

2ag6qys.jpg


Up durumu için animasyonunuz hazır.

Şimdi over durumu için animasyon hazırlayacağız.




13- Kütüphaneden butonumuza çift tıklayarak açalım.

Up alanı seçili iken 3 kez F6`ya basarak over, down, hit durumu için birer keyframe ekleyelim.

Hit durumunda grafiğin üzerini dikdörtgen aracı ile kapatalım ki sıcak alanımız oluşsun.




14- Over alanını tıklayın.

Şu anda sahnede gördüğünüz Up durumundaki şekil ve animasyonların aynısıdır.

Bunu değiş tirmeye başlayalım.

Kaydet yazısını yazı aracı ile seçerek rengini maviye çevirelim.

i24juf.jpg




15- Yazının yanındaki daire şekilleri içeren klibi seçip yeniden F8`e basıp movie klip seçeneğini işaretleyerek ayrı bir film haline getirelim.

Bu yeni film klibimizi sahnede açalım.

Bir kez CTRL+B`e basarak filmi 2 grafik şeklinde parçalaya lım.

2e0odxd.jpg


Burada amaç hala up durumundaki filmi parçalayıp yeni bir film oluşturmaktır.




16- Ortadaki kırmızı daireyi seçip kesin, yeni bir katman ekleyerek 1.frame`ini işaretleyip CTRL+Shift+V ile yapıştıralım.

Yine iki grafiği ayrı katmana aldık.




17-Üst katmanda kırmızı daireyi seçin ve scala aracı ile bunu büyülterek siyah halka çevresine kadar getirin.

31505de.jpg





18- Heriki katmanda da 15.frame`lere bir keyframe ekleyin ,yine heriki şekili 3-4 piksel sola itin ki animasyonda bir yuvarlanma efekti oluşsun.

Heriki katmana motion tween uygulayın. Heriki motion içinde frame panelini seçerek rotate için CW, times için 1 rakamını seçin.

Alt kutuları boşaltın.




19- 15. framelerden birine stop aksiyonu ekleyin ki, over durumunda devamlı bir dönme hareketi olmasın.

vxmck0.jpg





20- Down durumu için isterseniz animasyonu değiştirebilirsiniz ama genelde buna pek gerek olmaz.

F12`ye basarak filminizi test edin.​
 
Butonların Kullanımı Uygulama - 3

Uygulama - 3

x4rwav.jpg



Bir butona tween uygulama tekniğini göreceğiz.

Swf dosyasını incelediğinizde animasyonun iki kısımdan oluştuğunu gözlemleyeceksiniz.

İlki butona tıklamadan önceki animasyon, diğeri ise tıklandıktan sonra ortaya çıkan animasyon.


Uygulama


1- Önce birinci kısmı oluşturmak için İnsert > New Symbol komutunu verelim.

Davranış olarak buttonu seçelim.




2- Up durumun seçili iken sahneye bir balon resmi çizelim.

Bunun için oval aracı ile içi radial gradient renkle doldurulan bir oval şekil çizilecek, diğer kısımlar ise kalem ve çizgi aracı oluşturulacaktır.

dy9hep.jpg


İpucu: Araç kutusundan"Fill Transform" aracı seçilerek sahnedeki bir gradient dolguya tıkladığınızda merkezini ,renk geçişlerinin boyutunu ve geçiş düzlemini ayarlayabilirsiniz.

68emfc.jpg




3- Up durumu seçili iken 3 kez F6 tuşuna basarak diğer alanlara da birer keyframe ekleyelim.

Şekilde değişiklik yap mayalım. Yeni bir katman ekleyelim ve katmanı tutarak alt sıraya geçirelim.

Up durumu için bir eklenti yapmayalım.

Over ve down durumu için balonun çevresine fırça aracı ile sarı bir çerçeve ekleyelim.

e8qs1s.jpg


2agvhas.jpg


Bu bize buton üzerine gelindiğinde bir efekt sağlayacaktır.




4- Buton hazır.

Ana sahneye dönelim ve butonu kütüphaneden sahne üzerine yerleştirelim.

Buton seçili iken properties panelini açıp ismini buton olarak yazalım.25, 32, 51, 72. frame`lere birer keyframe ekleyelim.

Eklenen her keyframe bölgesinde balonun yerini biraz değiştirelim.

Sonra bu alanlara motion tween uygu layalım.

Bu sayede balon uçuyormuş gibi hareket edecektir.

157jj0w.jpg





5- Son frame olan 72. frame`i seçerek action panelini açalım ve "gotoAndPlay(1)" komutunu verelim.

Artık sonsuz bir döngüsü olan animasyonun ilk bölümü hazır.

Yukarıdaki komut sayesinde balonumuz tıklanana kadar uçmaya ara vermeyecektir.




6- Animasyonu ikinci kısmı için yeni bir katman ekleyelim.

İlk animasyonun bittiği yer olan 73.frame`e bir keyframe ekleyelim.

Properties panelinde label alanına "mutluyillar" yazalım. 73. frame`e bir etiket atamış olduk.




7-Sahne halen boştur.

Burada balonun patlamasını oluşturacağız.

Balon butonuna kütüphaneden çift tıklayarak açalım.

Up kısmındaki balon grafiğini kopyalayalım ve yeniden sahneye dönerek "mutlu yıllar" etiketinin bulunduğu frame`i seçelim.

Balonun dolaştığı alanlardan birine yapıştıralım.

Balon kısmını silgi aracı ile silelim.

2e3wsbs.jpg



8- Silinen yere fırça aracı ile gradient renk seçerek aşağıdaki şekili çizelim.

2uer486.jpg



9- Görüntünün sahnede 3 kare kalabilmesini için 75.frame üzerine sağ klik yaparak Insert Frame komutunu verelim.




10- Üçüncü bir katmanı en üste yerleştirelim.

Bu katmanda 73.frame`i seçerek text aracı ile "mutlu yıllar" yazalım. 16 kare devam etmesi için 89. frame üzerine sağ klik ve Insert Frame komutunu verelim.

Timeline`da görüntü söyle olacaktır.

1zz28lj.jpg




11- Animasyonun ikinci kısmıda tamam. Şimdi 1. ve 2. kısmlar arasındaki bağlantı kodlarını yazacağız.

Şimdi 2.layerın boş olan 1.karesini tıklayarak seçelim ve actionscript panelini açalım.

Panele şu kodu yazalım:

function git(event:MouseEvent):void {
gotoAndPlay("mutluyillar");
}
buton.addEventListener(MouseEvent.CLICK, git);




12- Herşey hazır, şimdi filmi test edin.
 
Butonların Kullanımı Uygulama - 4

Uygulama - 4


aka1xk.jpg



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.

14l3oty.jpg



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.

wjapus.jpg




5- Butonlar hazır.

Şimdi Flash isimli film klibine geçelim.

Kliplerin gözünüzde şekillenmesi için aşağıdaki resimi inceleyin.

ykkjr.jpg


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:

8wy0pc.jpg




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:

ae055x.jpg


3146zra.jpg




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.

o9hj6q.jpg





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.

dcrpeo.jpg


21.frame`e bir keyframe atayalım.

Yön tuşları ile buton2`yi ilk butonun hemen altına kadar indirelim.

nlts36.jpg


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:

20ue91i.jpg





12- Son frame`e bir stop aksiyonu atayın.

Her katmanda 27.frame`lere birer blankkeyframe atayalım ve herhangi birisine stop komutunu verelim.

2ngabu1.jpg


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.

2nc2jko.jpg




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.
 
Butonların Kullanımı Uygulama - 5

Uygulama - 5

iejq14.jpg



Hazırlanış olarak tamamen aynı olan 2 çekme menüsünde, "Track as Menu Item" seçeneğinin kullanılmasıyla ortaya çıkan farklılığı gösteren bir örnek.

Animasyon teknik olarak basit görülmekle birlikte birkaç eklenti ile komplike bir çekme menüsü oluşturabilirsiniz.

Bu özellik cs3 versiyonunda da bulunmasına rağmen çalıştırmak mümkün olmamıştır.

Bunun olası bir bug olduğu düşünülmüştür.



Uygulama

1- Insert > New symbol komutunu verelim.

Davranış olarak butonu işaretleyelim. Dikdörtgen aracı ile up alanına aşağıdakine benzer bir şekil çizelim.

20jfpf6.jpg


Diğer bölümlerede birer keyframe ekleyerek butonun renklerini değiştirelim.



2- Butonumuz hazır.

Şimdi yeni bir movie klip (Insert--> New Symbol )sembolü açalım.

İlk kareyi seçerek kütüphaneden butonu sahneye taşıyalım.

Properties panelinden bu butona menubuton ismini atayalım.

Text aracını seçerek üzerine "Tıklayın" yazısını yazalım.

8.kareye sağ klik yapıp insert frame komutunu verelim.

9. kareye yine aynı yöntemle insert keyframe komutunu atayalım.

Üzerinde yazılı olan tıklayınız yazısını silelim.



3- Sahneye kütüphaneden butonu 3 kez daha çekip align komutunu kullanarak alt alta hizalayalım ve herbirine text aracı ile yazımızı yazalım.

Şu anda 9.karede 4 tane buton vardır.Bunlara properties panelinden sırası ile menubuton1, menubuton2, menubuton3, menubuton4 ismini verelim.

2eqaww5.jpg




4- 16.kareyi seçip insert frame komutunu verelim.

İlk katmanımız hazır.



5- Yeni bir katman ekleyelim.

1.kareyi seçelim.

Properties panelini açarak Label kısmına "kapat" adını yazalım.

Bu kısım menünün kapalı şeklini oluşturacaktır.

Aynı katmanda 9.kareyi seçerek burayada aynı yöntemle "ac" etiketini atayalım.

Bu bölüm menünün açılmış halini gösterecektir.



6- Yeni bir katman ekleyelim ve 1.kareye stop() aksiyonunu ekleyelim ki menü kendiliğinden açılmasın.

Timeline`daki görüntü şöyle olacaktır.

2z4b5gp.jpg




7- Şimdi timeline üzerinde komut layerında 1.kareyi işaretleyelim.

Ve action panelini açalım.

stop();
function git(event:MouseEvent):void {
gotoAndPlay("ac");
}
menubuton.addEventListener(MouseEvent.CLICK, git);



8- Timeline`da 9.kareyi seçelim.

Şu komutları atayalım:

stop();
function git1(event:MouseEvent):void {
gotoAndPlay("kapat");
}
menubuton1.addEventListener(MouseEvent.CLICK, git1);

function git2(event:MouseEvent):void {
gotoAndPlay("kapat");
}
menubuton2.addEventListener(MouseEvent.CLICK, git2);

function git3(event:MouseEvent):void {
gotoAndPlay("kapat");
}
menubuton3.addEventListener(MouseEvent.CLICK, git3);

function git4(event:MouseEvent):void {
gotoAndPlay("kapat");
}
menubuton4.addEventListener(MouseEvent.CLICK, git4);




9- Artık filmimizi test edebiliriz.

Sahnedeki butonlardan birini seçip properties panelini açtığınızda "Track as Button" seçeneğinin işaretli olduğunu göreceksiniz.



10- Track as Menu özelliği çalıştırılamadığından bu bölüm çalışmadan çıkartılmıştır.
 
Butonların Kullanımı Uygulama - 6



Uygulama - 6

Bu örnek pratik bir rollover efekti sağlar

34y8d9c.jpg




Uygulama

1- Sahneye hiçbir eklenti yapmadan Insert-->New Symbol
komutu verin ve davranış olarak film klibini seçin.

Burada rollover efektinde göstermek istediğiniz animasyonu oluşturun.



2- Filmi kapatın ve ana sahneye dönün.

Bir buton oluşturun.

Butonu çift tıklayarak düzenleme moduna geçin.

Over,down ve hit alanlarına birer keyframe ekleyin.

Sonra üst kısma yeni bir layer yerleştirin.

Bu layerın over alanına sağ klik yapıp Insert-->Blank keyframe komutu verin ve
bu alan seçili iken kütüphaneden film klibini fare ile çekerek görülmesini istediğiniz alana yerleştirin.

2qa1en8.jpg


Grafikde gördüğünüz gibi sadece over alanında film klibi etkili olacaktır.
 
Geri
Üst