Flash Dinamik Buton Yapımı

Anasayfa » Flash Dersleri » Flash Dinamik Buton Yapımı

Merhaba arkadaşlar, bu yazımda sizlere flash kullanarak dinamik(hareketli) buton yapımını anlatacağım. Bu konuda bir yazı yazmayı düşündüm çünkü, forumlarda gördüğüm kadarıyla birçok arkadaşımız butonların içinde tween kullanamıyorlar. İnternette gösterilen buton yapımlarının çoğu buton sybol ü kullanılarak yapılmış ve tek frameden oluşmakta. Benim size anlatacım yöntem ise dünyada hazırlanılan bütün butonların yapılış şekliyle aynı. Çok fazla uzatmadan konumuza geçelim.

1. Öncelikle yeni bir flash dosyası açıyoruz. Document propertiesden istediğimiz ayarları seçiyoruz. Ben dimensionları 500X500 olarak kullandım ve frame rate i de 24 yaptım. Arkadaşlar burada önemli bir kısım var. Frame rate i çoğu arkadaşımız önemsemiyor yalnız frame rate yaptığımız çalışmanın animasyon kalitesini oldukça yükseltiyor. Yaptığım ayarlara aşağıdaki resimden bakabilirsiniz.

2.Sahneme bir adet dikdörtgen çiziyorum. Bu çizimi rectangle tool kullanarak yapabilirsiniz. Ayrıca ben burada dikdörtgen çizdim diye sizin de dikdörtgen çizmeniz gerekmiyor. İster üçgen, ister kare, ister daire çizin farketmez. İsterseniz hiç birşey çizmeyin sadece text yazın. Ben bu dikdörtgeni butonumun arkaplanı olması için çizdim.

3.Dikdörtgenimizin boyutlarını ayarlayalım. Ben 300′e 100 kullanmayı tercih ettim.

4.Şimdi dikdörtgenimizi “F8″ ile yada “sağ klik/convert to symbol” yolunu kullanarak movie clip e çeviriyoruz. Name kısmını istediğiniz gibi doldurun önemli değil.

5.Şimdi bu movie clipime bir kez tıklayıp bir daha movie clipe çeviriyorum. Bunun amacı movie clip içinde arkaplanıma efekt ekleyebilmek

6.Şimdi movie klipin içine giriyorum ve layerlarımı oluşturmaya başlıyorum.Ben text2 layerını boşuna oluşturdum. İlk başlarda amacım faklı bir animasyondu ancak ondan vazgeçtim. Bu yüzden siz sadece “bg, text ve actions” layerlarını oluşturun yalnız hiyerarşiye dikkat edin.

7. Bg layerında 10. 20. ve 30. framelere “F6″ tuşuyla yada “sağ klik/insert keyframe” yoluyla keyframe ler ekliyorum. 1. framede butonum normalde nasıl gözükecekse o şekilde kalacak. 10. framede ise animasyonun mouse butonun üzerine geldiği anda başladığı hali olacak. 20. frame de butonun üzerinde durduğumuzda butonun bulunduğu hal ve 30. frame de mouse u butonun üzerinden çektiğimizde gelecek olduğu hali bulunmakta.

8.Şimdi 20. frame de bg layerımda dikdörtgenimi seçip brightness efektini uyguluyorum. Siz istediğiniz herhangi bir şeyi uygulayabilirsiniz. İsterseniz dikdörtgenin yer değiştirmesini sağlayabilirsiniz.

9. 10-20 ve 20-30 arasına “sağ klik/create motion tween” yoluyla motion tween uyguluyorum. Burada motion tween uyguladığınız framelere “ease” değeri vermeyi unutmayın. Bu sizin animasyonunuzu güçlendirecektir. Ben önce 100 sonra -100 ease değerlerini uygulamayı uygun gördüm.

10.Arkaplanımızın efekti hazır. Şimdi textimize geçebiliriz. Text layerına gelip 10,20 ve 30. framelere keyframe ekliyorum. Ancak keyframeleri eklemeden önce 1. layera textimizi yazıp onu movie clipe çeviriyoruz.

11. 2o. frame’i seçip textime bir efekt uyguluyorum. Ben tint efektini tercih ettim. Bu sayede mouse umu butonun üzerine getirdiğimde textimin rengi değişecek.

12. Yine 10-20 ve 20-30 frameleri arasına motion tween uyguluyorum ve ease değerini veriyorum.

13. Action layerına geçme zamanımız geldi. Action layerında 1. frame’e stop(); kodumu ekliyorum ve bunu 20. frame de uyguluyorum.

14.Şimdi movie clip’imden çıkıp ana sahneme dönüyorum ve movie clip’imi seçip şu kodları ekliyorum:

on(rollOver){
gotoAndPlay(10)
}
on(rollOut, dragOver, dragOut){
if(this._currentframe!=20){
this.gotoAndPlay(21+(20-this._currentframe))
}else{
this.gotoAndPlay(21);
}
}
on(release){
getURL(“http://www.web-rehberi.com”, “_blank”)
}

En son satırda bulunan

on(release){

getURL(“http://www.web-rehberi.com”, “_blank”)
}
kodu, butona tıkladığımızda nereye gitmesini istediğimizi flasha bildiriyor. http:// ile başlayan ” ” arasında bulunan yere sitenizin adresini verebilirsiniz.
Umarım faydalı olmuştur arkadaşlar. Herhangi bir sorununuz olursa eğer yorum şeklinde yazabilirsiniz.

Butonun Son hali bu şekilde olacak arkadaşlar:











Yazar: Tarih: 01/09/10 791 kez okundu
Etiketler : , , , , ,

Yorum Yap

“Flash Dinamik Buton Yapımı” için 11 adet yorum bulunmakta

  1. admin diyor ki:

    Video şeklinde anlatmayı tercih etmiyorum, bu şekilde adım adım anlatmanın daha yararlı olduğunu düşünüyorum. Kod sorunu için ise kodları eklediğiniz “frame”lerin ve nesnelerin doğru olduğundan emin olunuz.

Bir Cevap Yazın

E-posta hesabınız yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir