Website Menü Animasyon

22 Haz 2009 | 2 Yorum | Kategori Flash Dersleri

photodersFlash çalışmamızda web sitelerinde kullanabileceğiniz açılır menü yapacağız. Mouse üzerine geldiğinde menümüz açılacak. Yeni bir çalışma sayfası açalım 330×300px benim tercihim oldu. İlk olarak butonlarımızı hazırlayalım.

 


1-Insert>new symbol>Button yapalım name anaMenü olsun. Up kısmında sahneye text tool aracı ile yazımızı yazalım alt kısmına line tool aracı ile çizgi çizelim örnek resimde up ve over kısmındaki görünüm ekledim renk değişimini görebiliriz down over kısmı ile aynı olacak hit kısmınaaynı oluyor sadece bir dikdörtgen ile kapatalım.
photoders
2-Diğer butonlarımızı yapalım Hakkımda butonuna ait görünümü ekledim diğer butonlarıda aynı şekilde yapalım.
photoders
3-Bir adet görünmez( invisible)buton yapalım.
photoders
4-Buton işimizi tamamladık şimdi insert>new symbol>movie clip oluşturalım name anaMenu_mc olsun. Layer1 adını anamenü olarak yazalım rectangle tool aracı ile içi boş bir çerçeve yapalım açtığımız sayfadan 1px küçük yapalım modify>Group (Ctrl+G) yapalım 1.frameye kütüphaneden anaMenü butonu alarak ekleyelim 22. frameye keyframe ekleyelim F6 40. frameye key ekleyelim F5 örnek resimde görüldüğü şeklide butonları yeni layerler ekleyerek ekleyelim. Başlangıç 6 frame oluyor her layer 4 frame ekliyoruz 6 frame ile 10 frame arasına create motion tween veriyoruz. 6. Framede alpa değerini 0 yapıyoruz 10.framede menü butonları kaydıralım.
photoders
5-Aynı hizada olan layerleri frame aralarında shift tuşu basılı olarak seçili yaparak 4 frame kaydıralım hakkımda butonumuzu kaydırmıyoruz abaşlangıç oluyor. Aynı uygulamayı ters oalrak yapalım örnek resmi inceleyelim.
photoders
6- Yeni layer ekleyelim en alta alalım layer adını invisiblebuton yapalım 22 frameye keyframe ekleyelim kütüphaneden invisible_buton alarak ekleyelim 23 frameye gelelim blank keyframe layer devamını iptal ederek silelim.
7-Yeni alyer ekleyelim layer adı etiket olsun 1.framede instance name penceresine( tekrar) yazalım. 6.frameye keyframe ekleyelim instance name penceresine (over ) yazalım.
8-Yeni layer ekleyelim layer adı action layer olsun 1. Framede stop ekleyelim 22.framede tekrar stop ekliyoruz. Animasyon bitimine çalışmada 38.frame oluyor action paneli açarak ekli kodu ekleyelim.

gotoAndStop("tekrar");

9-Anamenü layer gelelim 1.framede sahnedeki butonu seçili yapalım actions paneli açalım ekli kodu ekleyelim.

on (rollOver) {
gotoAndPlay("Over");
}

10-invisible buton layeine gelelim sahnedeki butonu seçelim actions paneli açalım ekli kodu ekleyelim.

on (rollOver) {
play();
}

10-Tüm layerlerin framelerin görünümünü size ekleyeyim.
photoders
11-Scene1 sahnemize gelelim kütüphaneden anaMenu_mc 1.frameye ekleyelim ve test yapalım.
Ctrl+Enter

FLA İndir

Etiket: , ,
Yorumları İzle

2 Yorum ekli “Website Menü Animasyon”

  1. levent Diyor'ki:

    Hocam Merhaba,

    Ben Krom buton yapmıştım. Ben bunu aşağıya doğru 2 buton daha açılmasını istiyorum. Tıpkı yukarda anlattığınız örnek gibi yani Bana ek olarak 2 buton yeter… Tabi açılacak olan bu iki buton da krom buton olacak…

    Teşekkür ederim…

  2. admin Diyor'ki:

    10- kısımdaki resmi inceleyin veya Ekli fla indirip yeni butonlar ekleyecekseniz klipi tekrar düzenlemeniz gerekir

Yorum Yazın

Yorum yazarken dikkat etmeniz gereken hususlar;

  • Türkçe imla kurallarına dikkat etmeye özen gösteriniz.
  • Yorumlar onay gerektirdiğinden birden fazla kez aynı yorumu yazmayınız.
  • Yorumlarınızın konu ile alakalı olmasına özen gösteriniz.
  • Küfür, hakaret etmenizin kimseye faydası olmadığını unutmayın.
  • Yorum yapmanız, onaylanacağı anlamına gelmemektedir. Buradaki hususlara dikkat etmeniz, onaylanma şansını artıracaktır.

  • Clicky Web Analytics page counter Add to Technorati Favorites Find my site on Google Ad Planner
    Kapat
    E-posta ile paylaş