Buton Örnek ÇAlısma

Kayıt
29 Ağustos 2007
Mesaj
327
Tepki
7
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.

Ş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.

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.

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.

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.

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.

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.

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

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.

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.

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ıra lı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.

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.

20- Down durumu için isterseniz animasyonu değiştirebilirsiniz ama genelde buna pek gerek olmaz. F12`ye basarak filminizi test edin.
 

Buse Türüdü

Altın Üye
Altın Üye
Kayıt
5 Şubat 2008
Mesaj
3.395
Tepki
103
teşekkürler emeğine sağlık ama bu dersi ben başka yerde görmüştm sanki:) ama yinede sen kendin yaptıysan başka... tekrar teşekkürler..;)
 
Kayıt
29 Ağustos 2007
Mesaj
327
Tepki
7
ders alıntıdır arkadaslar.aldığım yerde iki resim eksikti onlarıda tmmladım.benimde emeğim var :D
 
Yukarı Alt