SePortal
Üye
Kullanıcı Adı:

Şifre:

Sonraki ziyaretimde beni otomatik kaydet!

Şifremi unuttum?
Kayıt



Site İçinde    


Gelişmiş arama

Ders Bölümleri
Dersler
En Çok İzlenenler
Son Eklenen Dersler
En Çok Beğenilenler
Tümünü Göster

Derslerde Ara


Dönüşümlü 10 Ders
Flash da Mouse'a İz Yapmak
FreeHand Genel Bilgi
ImageReady ile Animasyonlu Banner
Web Tasarımı - Tablolar
Illustrator Genel Bilgiler
Butonlar
Parlak Buton Yapımı
Arayüz Yapımı-1
Flash da Buton Yapımı
PSP - Resim Eskitme

Site Bilgileri
Sitede 27 kategoride, toplam 93 ders,
Toplam 85 indirilebilir dosya, 63.832 kez indirilme,
Sitedeki derslere uyumlu 8 kategoride, toplam 52 link,
Forumlarda 697 konu, 1.406 ileti bulunmaktadır.
Sitede toplam 13.301 kayıtlı üyemiz var. En yeni üyemiz: asz

Şimdiye kadarki en yüksek aktif ziyaretçi sayısı: 311 - Tarih: 21.07.2016 19:15

Toplam ziyaret: 1.934.697
Bugünkü ziyaret: 0

Aktif Kullanıcılar: 1
Şu anda 0 kayıtlı kullanıcı (arasında 0 tanesi gizli) ve 1 ziyaretçi online.
Ana Sayfa / Dersler / Flash / Flash Örnekleri / Flash ile Açılır Menü ve Web Butonları Yapımı

Flash ile Açılır Menü ve Web Butonları Yapımı
RSS Feed: Flash ile Açılır Menü ve Web Butonları Yapımı (Dersler)
Eklenme Tarihi: 07.11.2005 - 18:16   (İzlenme: 84161)
Yorumları Oku (11)
Yorum Ekle
Dersi Yazdır / İndir
Yazdır /


Flash ile Açılır Menü & Web Butonları Yapımı
Bu bölümde üzerine tıklayınca açılan menü yapılmasını göreceğiz ve bu menüyü sahnemizin istediğimiz yerine çekip taşıyacağız (drag). 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. Hepinize kolay gelsin...




Yazan: Yorum:
onuryanik
Üye

Kayıt Tarihi: 26.03.2010
Yorumlar: 1
Güzel

Ufak tefek problemlerde olsa genede güzel ve zihin açıcı bir anlatımı var..Teşekkürler
26.03.2010 17:46 Offline onuryanik oyanik35 at gmail.com
tLqaLc
Üye

Kayıt Tarihi: 03.05.2008
Yorumlar: 1
fdfd

Window>Panels>Fill ile doldurma panelini açalım bu seçene uyqula dıo uyquluom ama fill qözükmüo
03.05.2008 21:37 Offline tLqaLc tlgalc at hotmail.com
ksomaz@
Üye

Kayıt Tarihi: 10.04.2007
Yorumlar: 3
problem

Hazırladığım web sayfasına açılır butonu koyduğum zaman aradaki boşluğu kapatımıyorum ne yapmam gerek yardımcı olursanız sevinirim ben bu işe yni başladım yardımlarınızı bekliyorum
11.04.2007 17:05 Offline ksomaz@ ksomaz at hotmail.com http://ortayakarisik.somee.com
ortacalim
Üye

Kayıt Tarihi: 05.03.2007
Yorumlar: 1
güsell

çok teşekkür ederim.. ellerine sağlık çok güzel olmuş..
08.03.2007 09:59 Offline ortacalim ortacalim_2006 at hotmail.com
oz.brain
Üye

Kayıt Tarihi: 01.02.2007
Yorumlar: 1
acil macil değil bilen yazsın lütfen

arkadaşlar bu menüde alt kısıma link verince çalışmıyor bide siz denermisiniz? ben nerde yanlış yaptım anlamadım not: anasayfa, galeri,linkler vb
14.02.2007 19:56 Offline oz.brain ozgunevren at gmail.com
serustat
Üye

Kayıt Tarihi: 20.01.2007
Yorumlar: 3
Yardım

ARkadaşlar acil yardım isitiyorum.Ben bu menüye benzer bi flash menü yü hazırladığım web sitesine koymak isitiyorum,koyuyorum da ama problem şu web sitesine koyduğum şekliyle alan olarak kocaman bir yeiı kaplıyor.Düzenleme yapamıyorum koyduğum flashın 10 cm altından devam etmek zorunda kalıyorum, diğer nesneleri eklemeye... Yani diğer koymak isitediğim yazı veya nesnelerin üzerinde açılacak şeilkde nasıl düzenleyebilirim ben bu menü yü
21.01.2007 22:27 Offline serustat matgeocu at hotmail.com
serustat
Üye

Kayıt Tarihi: 20.01.2007
Yorumlar: 3
web sayfasının içine yerleştirme?

Arkadaşlar Front Page ile bir web sayfası yapmaya çalışıyorum.Flash da hazırladığımız bu menuyu sayfama nasıl ekleyebilirim. satır içi çerçeve ekleyerek yapmaya çalıştım ama normal boyutlarında görünmesi için kocaman bir çerçeve oluşturmam gerekti :) Kodlarla eklemem için ne yazmam gerekiyor...
20.01.2007 15:47 Offline serustat matgeocu at hotmail.com
serustat
Üye

Kayıt Tarihi: 20.01.2007
Yorumlar: 3
Yardım

bende Actions menusunde Basic Actions diye i bölüm yok.nerden bulucam ben bu Basiz Actions'u
20.01.2007 15:21 Offline serustat matgeocu at hotmail.com
metintosh
Üye

Kayıt Tarihi: 22.12.2006
Yorumlar: 1
Linklerle ilgili

Bu ders için teşekkür ederim. Ancak movieclip içine yerleştirmiş olduğumuz butonları scene2'ye yönlendiremiyorum. Actionscript verdigim halde scene 2'ye gitmek yerine her defasında kendini tekrarlıyor.Sebebi ne olabilir.
22.12.2006 10:26 Offline metintosh metintosh at mynet.com
netcat
Üye

Kayıt Tarihi: 29.09.2006
Yorumlar: 3
iptal

tamamdır yaptım
30.09.2006 15:44 Offline netcat huluti_erme at hotmail.com
netcat
Üye

Kayıt Tarihi: 29.09.2006
Yorumlar: 3
ACİLLL

YA ben menuyu yaptım fakat açılan menude koyduğum buttonlar gözükmüyo sorun ne olabilir
30.09.2006 12:53 Offline netcat huluti_erme at hotmail.com

RSS Feed: Flash ile Açılır Menü ve Web Butonları Yapımı (Dersler)

Google
 
Editörlerimiz | Link Bannerlarımız | Reklam | Site Amacı | Sık Sorulan Sorular | Yasal Uyarı & Kullanım Şartları
Sizden Gelenler | Site Haritası | Dosyalar