Flash AS3-Açılır(drop down) Menu Yapımı

Adobe Flash AS3 Açılır (Drop Down) Menü Yapımı

Arkadaşlar açılır (Drop Down) menü yapımını aşamalar halinde resimli olarak anlatacağım. Lütfen yazdığım her aşamayı atlamadan okuayarak uygulayınız. Örnek yaptığım uygulanın linkini alt kısıma koyacağım.

Aşama 1- Öncelikle Flash programımızı açalım ve çalışma ekranımızın boyutlarını  600 – 100 olarak ayarlıyalım daha sonra layer bölümünden  bir adet layer oluşturalım ve ismini button olarak değiştirelim.

 

Aşama 2- Bu işlemleri yaptıktsan sonra şimdi sırada butonumuzu oluşturmaya geldi. Öncelikle layer kısmından oluşturduğumuz button ismindeki layeri seçelim. Ve daha sonra  Rectangle Tool (R) aracını seçip ekrana bir adet dikdörkgen çizelim.

Aşama 3- Ve çizdiğimiz dikdörtgenin rengi turuncu olarka değiştirelim.

Aşama 4- Daha sonra çizdiğimiz diktörgeni button haline getirmeye geldi diktörtgeni seçip F8 tuşuna basıyoruz ekrana gelen bölümden button seçiyoruz ve ismine btn yazıyoruz.

Aşama 5- Çizdiğimiz dikdörtgeni button yaptıkdan sonra bu buttonun içine gireceğiz ve üstüne isim yazacağız. Butonun içine girdikten sonra buttonun UP ismindeki freme yi seçtıkten sonra 3 kere F6 ya basıyoruz daha sonra yeni bir layer oluşturuyoruz ve ismini txt olarak değiştiyoruz ve bu layer seçili durumda iken Text Toll aracın seçip button un üsrüne tıklıyoruz ve Anasayfa yazısnını yazıyoruz bu şekilde bir button oluşturmuş oluyoruz.

Aşama 6- Şimdiki adımda ekrana butonlarımızı çoğaltarak koyacağız. Bunun için LİBRARY bölümüne tıkılıyoruz bu bölümde oluşturduğumuz  butonu göreceğiz.

Oluşturduğumuz Buttonumuzu çoğaltma işlemini yapacağız. Bu işlemi butonumuzun üstünde maus ile sağ tık Dublicate diyoruz ve ekrana gelen bölümden kopyasını oluştıracağımız buttonun ismin vereceğiz ben btn2 olarak verdim sonra OK diyoruz.

Bu işlemi kaç ekrana kaç adet button koymak istiyorsanız okadar yapmanız gerekecektir. Ben 4 adet button oluştracağım. Buttonlarımız oluşturdukdan sonra bu buttonları ekrana koyamaya geldi LİBRARY kısmından oluşturduğumuz butonları sürükleyerek ekrana atmamız yeterli olacaktır.

Aşama 7- Bu işlemi bitirdikten sonra butonlarımızın ismini değiştirmeye geldi. 2 ci Butonumuzun üstüne çift tıklayarak içine giriyoruz ve burada Anasayfa yazan ismi çift tıklayarak ismi değiştirilebilir konuma getiriyoruz. Ve istediğimiz ismi yazıyoruz.

İsmimizi yazdıktan sonra butonumuzdan çıkacağız. bu işlem sizin biraz kafanızı karıştıracağı için size açık bir şekilde anlatacağım çalışma alanımızın sol üst köşesinde scene 1 yazısına tıkladığımızda ana çalışma sayfamıza götürür ve bu şekilde buttonuzumdan çıkmış oluruz.

Aşama 8- İsimleri değiştirdikten sonra şimdi sırada aşağıya açılacak menülerinimiz yapmaya geldi bunu yapmak için ana çalışma sayfamızda ctrl+F8  tuşlarına basıyoruz. Ekrana gelen bölümde isim bölümüne alt_menu olarak değiştiriyoruz ve alttaki type bölümünden Movie Clip Sekmesini seçiyoruz daha sonra ok diyoruz.

Ok dedikten sonra ekrana  boş bir movie clip geliyor. Buraya alt menüleri oluşturup alt menüleri alt alta gelecek şekilde atacağız. Bu menüleri oluşturmak için önceki menümüzden herhangi birinden kopyasını alacağız. Bunun için LİBRARY bölümünde geçip herhangi bir buttonun üstüne sağ tık ve buradan duplicate diyoruz ekrana gelen sekmeden üstte ilk aşamalarda yaptığımız gibi ismini değiştireceğiz alt_btn olarak değiştiroyoruz ve Ok diyoruz. Daha sonra LİBRARY  den oluşturduğumuz butonu sürükleyerek ekrana atıyoruz . Daha sonra bu butonumuzun içine girip ismini değiştireceğiz. ve daha sonra alt menüde nekadar buton olmasın istiyorsak okadar bu işlemleri yapacağız.

Aşama 9- Bu aşamada anasayfamıza geçiyoruz.Oluşturduğumuz Alt_menu ismindeki movi Clip i anasayfadaki hakkımızdaki butonunun altına atıyoruz.

Daha sonra movie clip e çift tıklayarak içine giriyoruz. Ve önceki layer i mizin üstüne boş bir layer oluşturuyoruz daha sonra bu layer seçili durumda iken altmenünün boyutunda fakat yüksekliği çok az yapacağız olacak şekilde bir dikdörtgen çizeceğiz (Rectangle Tool aracı ile).  sonra çizim yaptığımız frame nin üstünda sağ tık yapıp Mask seçeneğine tıklıyoruz bu şekilde maskeleme yapmış olduk. maske yaptığımız ilk frameyi uzatma yapmaya geldi bunu ilk framenin karşısındaki 30 uncu frameye tıklayıp ve burada F6 tuşuna basarak yapıyoruz aynı şekilde alt kısımda menümüzün bulunduğu frameyide uzatıyoruz. İlk framemizin üstünde  herhangi bir yere sağ tık yapıp buradan Create Classic Tween seçeneğine tıklıyoruz. Be şekilde animasyonumuzu oluşturduk.

Öncelikler birinci framenin kidini açmalıyız altta bununan resimde açılmış hakli görünmektedir kilit resmine bir kere rıklamanız kiliti kaldıracaktır.

Daha sonra 30 uncu farameye geçiyoruz ve burada iken Free Transform Tool Aracını seçiyoruz.

ve birinci layerimizde bulunan ve maskeleme için çizdiğimiz resimimizi aşağı doğru münün tamamını kaplayacak  seçtiğimiz araç resmimizin köşelerinde noktalar oluşturmuştur alt bölgesinde ortada oluşan noktaya tıklayarak aşağı doğru çekiyoruz.

Bu işlem bittikten sonra tekrar birinci layerde 30 uncu frameye tıklıyoruz ve F9 tuşuna basıyoruz. Bu şekilde Stop(); komudu yazıp üstteki oluşturduğumuz animasyonu 1 kere yapmasını sağlıyacağız animasyon bittikten sonra duracak.

Aşama 10- Bu aşamada ana çalışma sayfamıza geçiyoruz. ve alt menü müzü seçiyoruz ve properties bölümüne geçerek instance name’ i ni alt_menu olarak değiştiriyoruz.

Aşama 11- Şimdi ise üstte bulunan menülerin İnstance Name lerini vereceğiz.

Anasayfa bttonunu seçtikten sonra properties bölümündeki instanve name kısmına anasayfabtn yazıyoruz aynı işlemi diğer menüler için yapacağız.

Aşama 12- Anasayfada F9 tuşuna basıyoruz ve şu kodları yazıyoruz.

alt_menu.visible=false;// alt menüyü gizler
hakkimizdabtn.addEventListener(MouseEvent.MOUSE_OVER,menugoster);
//hakkimizda buttonunun üstüne geldğinde aşağıdaki işlemi yapan event
function menugoster(evet:MouseEvent):void
{
alt_menu.visible=true;//alt menüyü göserir
}

Aşama 13- Şimdi başka butonların üstüne geldiğinde alt menüyü kapadan kodu yazacağız her button için

anasayfabtn.addEventListener(MouseEvent.MOUSE_OVER,menugizle);
//anasayfa buttonunun üstüne geldğinde aşağıdaki işlemi yapan event
function menugizle(evet:MouseEvent):void
{
alt_menu.visible=false;//alt menüyü göserir
}

iletisimbtn.addEventListener(MouseEvent.MOUSE_OVER,menugizle1);
//iletisim buttonunun üstüne geldğinde aşağıdaki işlemi yapan event
function menugizle1(evet:MouseEvent):void
{
alt_menu.visible=false;//alt menüyü göserir
}
downloadbtn.addEventListener(MouseEvent.MOUSE_OVER,menugizle2);
//download buttonunun üstüne geldğinde aşağıdaki işlemi yapan event
function menugizle2(evet:MouseEvent):void
{
alt_menu.visible=false;//alt menüyü göserir
}

 

İşte Bu Kadar.