Admin
Admin
Mesaj Sayısı : 624
Yaş : 62
Kayıt tarihi : 06/08/08
 |  Konu: Flash ile Açılır Menü ve Web Butonları Yapımı  Salı Ağus. 12, 2008 4:40 pm | |
| Flash ile Açılır Menü ve Web Butonları Yapımı  Bunları yaparken de web butonlarının nasıl yapıldıklarını da incelemiş olacağız.
Bu işlemleri yapmak ve daha iyi anlayabilmek için her zaman olduğu gibi yan taraftaki örnek objemizin yapılışını inceleyeceğiz.
1- Öncelikle Flash'ı açtık ve 300x250 pixels ebatlarında beyaz zeminli olan sahnemizi hazırladık.
İlk yapacağımız objemiz yanda görünen ve açılır menümüzn kapalı halini gösteren Menü isimli obje olacak. Bu objeyi yaparken de aynı zamanda Web Butonu yapılmasını da görmüş olacağız. Bunun için Insert>New Symbol ile Symbol Properties den Graphic'i seçip, "baslık" adını verip OK dedik  .
"baslık" isimli Graphic özellikli objemiz Library de belirdi. Araç Çubuğundan  Rectangle Tool'u ( R ) seçtik ve düğmemizin kenarlarını belirlemek için Rectangle Tool seçili iken araç Çubuğunun altındaki Options'dan  Round Rectangle Radius'u işaretleyip açılan pencereden kenar  yuvarlama değerini 15 olarak yazıp Ok dedik. Stroke Color' ı  No Color'ı  seçtik. Daha sonra Fill Color'ı  seçip (Kapalıysa, Window>Panels>Fill ile doldurma panelini açalım.) Fill Panelinde pop-up menüden Linear Gradient'i seçtik ve renkleri yan taraftaki resimde göründüğü gibi belirledik şeklimizi Rectangle Tool ile  çizdik ve kova aracı  ile boyadık. Daha sonra (Kova aracı seçili iken) Araç kutusunun alt tarafında bulunan Transform Fill  aracını seçtik. Bu araç, "Gradient" ile boyanan alanlarda renk geçişleri arasını istediğimiz gibi düzenlememizi sağlar. Şeklimizin üzerine 2 defa tıklayarak renkler üzerinde transform yapacağımız işaretleri belirledik. İşaretlenen ve (o) ile gösterilen noktadan tutarak aşağıya doğru döndürdük. Merkez (O) ve kenar (  ) noktalarından da istediğimiz etkiyi yaratana kadar aşağı-yukarı, sağa-sola çekerek renk geçişlerini ayarladık.
   Ayarlamalar neticesi şeklimizin renklerini oluşturduk.Renk ayarlamasını bitirdikten sonra yeni bir Layer açarak Text aracını kullanarak beyaz renkte "Menü" yazdık ve şeklimizin istediğimiz bölümüne taşıyarak yerleştirdik. Yazımıza gölge vermek için beyaz yazımızın altına siyah renkte aynı yazıyı yazıp alttaki siyah yazıyı klavyedeki oklar yardımıyla sağa ve aşağıya çekerek gölgeyi oluşturduk.
Böylece hem "baslık" isimli ve Graphic özellikli objemizi tamamlamış olduk, hem de Web Butonlarının nasıl yapıldığı hakkında bilgi sahibi olduk.
2- Şimdi de açılan menü de liklerimizin bulunduğu zemin olan "link tabanı" isimli Graphic özellikli sembolümüzü hazırlayacağız.
Yeni bir sembol yarattık. Insert>New Symbol ile "link tabanı" isimli Graphic özellikli sembolun çalışma alanına Rectangle Tool ile istediğimiz gibi bir şekil çizebiliriz.  Örnek objede, kenar yuvarlama değeri 10 olan ve önceki sayfada anlattığımız gibi aynı Linear Gradient renkleri ile boyayıp, Transform Fill ile de renk efektlerini vererek yan taraftaki şekli yarattık. Böylece "link tabanı" isimli sembolümüzün hazırlanması da bitmiş oldu.
3- Şimdi de açılan menüde ("link tabanı" üzerinde) görünecek olan link yazılarını hazırlayacağız.  Bunun için yeni bir sembol yaratıp (Insert>New Symbol), Symbol Properties den Button özelliğini seçerek adına da "anasayfa button" diyeceğiz ki üzerlerine tıklayınca ilgili linklere ulaşılabilsin.  "anasayfa button" için Up Frame'inde iken Yazı Aracı (Text Tool) seçili iken Character Panel inden Arial Tur, 20 points ve beyaz rengi seçerek [ Ana Sayfa ] yazısını yazdık ve yazıyı seçip, koyala-yapıştır (Ctrl+C, Ctrl+V) ile beyaz yazının altına yapıştırıp rengini siyah olarak değiştirip, düzenleyerek yazıya gölge etkisi verdik. Up frame'inde iken Sağ tuş ile Copy Frames ile frame'i kopyaladık ve Over Frame'ine gelerek sağ tuş Paste Frames ile Over'a yapıştırdık. Mause üzerine gelince renk değişikliği sağlamak için üstteki yazının rengini siyah, alttaki yazının rengini de link tabanı rengine uygun bir renk ile değiştirdik. Tekrar bu frame'i de kopyalayarak Hit Frame'ine yapıştırıp, mause un etki alanını sağlamak için altına kırmızı bir alan çizdik. Butonumuzu tamamladık. Siz uygulamanızda bu renkleri istediğiniz gibi değiştirebilirsiniz.
Aynı yolu kullanarak, "galerim button", "linkler button", "kimim button" ve "email button" isimli butonlarımızı hazırladık. Böylece link vereceğimiz bütün butonlarımızı tamamlamış olduk. Actions lara daha sonra geleceğiz.
4- Açılan menümüzü çalıştırmak için gerekli olan butonun yani "menu button" u hazırlayalım. Insert>New Symbol ile "menu button" adında Button özelliği olan yeni bir sembol yaratık. Up Frame'inde iken (ki burada sadece Up Frame'inde çalışacağız) önceden hazırladığımız "baslık" isimli ve Graphic özellikli sembolü Library den çekip çalışma alanımıza taşıdık. Layer 1 in adını "menu" olarak değiştirdik ve yeni bir Layer yaratıp (Layer 2), adını da "drag" olarak değiştirdik. Bu Layer'e, (  ) resmini çizdik (Siz buraya herhangi bir şekil çizebileceğiniz gibi File>Import ile önceden hazırladığınız bir imajı da taşıyabilirsiniz). Menümüz tamamlanınca, bu şekle basılı tutulup sürükleyerek Menünün sahne üzerinde taşınması sağlanacağından, bu şekil sadece sahne üzerinde yapılacak taşıma işleminde mouse'un etki alanını belirlemeye yarıyor.
5- "Drag" isimli butonu hazırlayalım. Tekrar Insert>New Symbol ile "drag" ismindeki butonun sadece Hit Frame'ine, Rectangle Tool ile mause un etki alanını belirlemek için ve yukarıda örnek el şeklindeki imajın büyüklüğün de rengi önemli olmayan bir şekli çizdik. "Drag" isimli butonumuz da bitti.
Böylece Menü için gerekli olan bütün sembolleri bitirmiş olduk.
Şimdi menümüzü çalıştıracak olan ve hazırladığımız bütün sembollerin yerleşip, Actions ların verileceği ve sonunda Flash Sahnesinde tek Layer ve tek Frame'e yerleşecek olan Movi Clip özelliğindeki "Menu" isimli sembolu hazırlayacağız.
6- "Menu" isimli sembolü hazırlıyoruz.
Insert>New Symbol ile " Menü" isminde Movie Clip özelliğinde sembolü yarattık. 
Frame 1 in adını "menu" olarak değiştirdik ve Library den "link tabanı" isimli sembolü çalışma alanımıza çektik. Aynı Layer ve Frame de iken tekrar Library den "anasayfa button", "galerim button", "linkler button", "kimim button" ve "email button" isimli butonlarımızı da çalışma alanımıza çekip "link tabanı" üzerine istediğimiz gibi yerleştirdik. Örneğimizde buradaki butonlara link vermedik ancak sizler her birinin üzerine tek tek sağ tuş ile tıklayıp Actions'u seçip, linklerini verebilirsiniz.
Link vermeyi bilmiyorsanız Buton Yapımı sayfasına bakınız.
Ancak örneğimizdeki açılan menüdeki, linklere basınca menünün tekrar kapanması için Basic Actions>Go To'yu seçip Object Actions Panelinin en altındaki Frame:kısmına 9 yazdık.
 7-Yeni bir Layer yaratıp adını "menu button" olarak değiştirdik. Buraya da "menu button" isimli sembolü Library den çekip taşıdık. Çalışma alanına yan taraftaki şekilde görüldüğü gibi yerleştirdik. 8- "menu" isimli Layer'e tıkladık, 5. Frame'e keyframe ekledik (F6). Aynı şekilde 10. Frame'e de keyframe ekledik (F6).
1. Frame'e geldik ve üzerine çift tıklayarak Frame Actions'u açıp, Basic Actions>Stop'u seçtik. stop ();
5. Frame'e gelip aynı uygulama ile aynı Frame Actions'u seçtik. stop ();
10. Frame'e gelip üzerine çift tıklayarak Frame Actions'u açıp, Basic Actions>Go To'yu seçtik. gotoAndPlay (1);
Tekrar 1. Frame'e gelip sağ tuş ile açılan menüden Create Motion Tween'i seçtik. Aynısını 5. Frame'e de uyguladık.
Bu defa "menu button" isimli Layer'e tıkladık ve 10. Frame'e sağ tuş ile tıklayarak açılan menüden Insert Frame ile yeni bir frame ekledik. 9- Şimdi yukarıda belirlediğimiz keyframe ler arasında menüyü hareket ettirip, istemediğimiz yerdeki görüntüsünü yok etmek için maske (Mask) uygulayacağız.
"menu" Layer'ini tıkladık ve 5. Frame'e gelip üzerinde linkler bulunan link tabanını aşağıya doğru klavyedeki oklar yardımıyla taşıdık. Yani 5. Frame'e gelince menü listesi aşağıda olacak. Aşağıdaki yerini belirleyince yeni bir Layer yarattık ve adını da "maske" olarak değiştirdik. Rectangle Tool ile link tabanını kapatacak bir şekil çizdik (animasyon sırasında görünmeyeceği için rengi önemli değil..). Bu, "maske" isimli Layer'e sağ tuş ile tıklayarak açılan menüden Mask'ı seçtik. Böylece animasyon sırasında menü listesini görünmez yaptık. Bütün bu anlatılanlardan sonra Layer penceremiz ve çalışma alanımız yan taraftaki görüntüyü aldı. 10- "menu button" isimli Layerde bulunan yine "menu buton" isimli butonumuza Action vereceğiz.
Önce "menu button" isimli Layer'e tıkladık. daha sonra altta çalışma alanında bulunan button özelliğindeki imaja sağ tuş ile açılan menüden Actions'u seçip, açılan Object Actions Panelinden Basic Actions>Go To'yu seçtik. on (release) {play ();}
Böylece bu butona basınca animasyonun çalışmasını sağlamış olduk.
11- Şimdi de menüyü taşıyacak olan drag butonun yerleştireceğiz. "menu button" Layer'ine tıklayarak yeni bir layer yarattık ve adını da "drag button" olarak değiştirdik. Library den aynı isimdeki "drag button" Button unu çekip sahnedeki "el" resminin üzerine yerleştirdik. Üzerine sağ tuş yaparak Actions'u seçtik ve Object Actions Panelinden Actions>Start Drag ve ardından Stop Drag'ı seçtik. on (press) { startDrag ("");} on (release) { stopDrag ();}  Böylece açılır ve taşınır menümüzü bitirmiş olduk.
| |
|
