Ders Adı: Flash ile Kapanır ve Taşınır Menü Hazırlamak
Kategorisi: Flash Örnekleri
Ekleyen: zebaniz - Tarih: 07.11.2005 - 16:43

Flash ile Kapanır ve Taşınır Menü Hazırlamak

Konuyu daha iyi anlamak için bu örneğe ait zipli dosyayı indiriniz ve Flash'a yükleyiniz.
Menüde kullanacağımız objeleri hazırlayıp, Library de yerlerini almalarını sağlayacağız.
1-Öncelikle Library de "baslık" olarak adlandırılan Graphic özellikli objemizi hazırladık. Boyamak için ise Fill Panelinden Radial Gradient'i seçtik renk olarak #0000FF ve #000000 kullandık. Renk geçişleri için ise Transform Fill aracını seçtik (nasıl uygulandığını Web Butonları Yapımı bölümünde anlatmıştık). Daha sonra sırasıyla, arkaplan, menu1, MASK, mask2, MENUALT, MENUTOP isimli "Graphic" özellikli objeleri hazırladık. Daha sonra buthan, menuwindow, link, textmenu isimli "Movie Clip" leri hazırladık ki bunlardan link ve menuwindow un hazırlanışını ayrıca açıklayacağız. Son olarak da close, dragbutton, e-mail, link butonu ve restore isimli "Button" özellikli butonlarımızı hazırladık.
Dragbutton'u hazırlarken altındaki layer'e, önceden hazırladığınız buthan isimli Movie Clip i Library den çekerek yerleştirdik ve Efekt>Alpha=0 efektini uyguladık.
Hepsinde renk geçişlerini yukarıda anlattığımız Transform Fill ile yaptık.

2-Şimdi "link" isimli Movie Clip i nasıl hazırladığımızı açıklayalım; (16 tane Frame kullanacağız)
Layer 1 in adını "top" olarak değiştirdik ve Library den önceden hazırladığımız MENUTOP isimli graphic i çekerek taşıdık. sonra 2. bir layer yarattık ve adını "alt" olarak değiştirerek MENUALT isimli graphic i taşıdık. 3. layer'i yaratıp adını da "link menu" olarak değiştirdik ve Library den "menu1" isimli graphic i taşıyıp, MENUALT ve MENUTOP isimli graphic lerin arasına yerleştirip dikkatlice hizaladık. "buton seti" layer ini yarattık ve "restore" isimli button u çekip yerleştirdik. "Drag" layer ini yarattık ve Library den "dragbutton" u çekip yerleştirdik. Daha sonra "frame actions" layer ini yaratacağız. Şimdi dikkat ettiyseniz Library den çekilip yerleştirilen objeler yerleştikleri layerin 1. Frame ini doldurdu.
"top" isimli Layer e geldik ve üzerine çift tıklayarak açılan Frame Actions panelinden "Stop" u seçtik. 2. Frame'e bir tane Keyframe ekledik (F6) Frame Actions panelinden "Play" i seçtik ve Frame Panelinde Label: minimize yazdık. 9. Frame 'e Keyframe ekledik (F6) Frame Actions panelinden "Play" i seçtik ve Frame Panelinde Label: restore yazdık. 16. Frame'e de bir tane Frame ( Insert Frame [F5]) ekledik. Böylece "top" isimli Layer de işimiz bitti.
"Alt" layerine sonra gelmek üzere atlayıp, "link menu" isimli layer'imize geldik. 2. Frame' e Keyframe ekledik. 8. Frame'e de Keyframe ekledik ve objemizi Scale aracını kullanarak eninden ve boyundan küçülttük. Klavyedeki oklar yardımıyla yerine taşıyıp hizaladık. 9. Frame'e de bir tane Keyframe ekledik. 1.Frame'in üzerine sağ-tuş yaparak Copy Frame ile kopyaladık ve 16. Frame'e yine sağ-tuş yaparak Paste Frame ile yapıştırdık. 2. ve 8. Frame in arasına sağ-tuş yaparak Create Motion Tween uyguladık. Yine 9. ve 16. Frame arasına da sağ-tuş yaparak Create Motion Tween uyguladık. Böylece "linkmenu" Layer indeki işimiz de bitti.
Şimdi önceden atladığımız "alt" isimli Layer 'e geldik. 2. Frame'e Keyframe ekledik. 8. Frame'e de Keyframe ekledik ve klavyedeki oklar yardımıyla objemizi yukarıya taşıyıp hizaladık. 9.Frame'e Keyframe ekledik (F8). 1. Frame'i kopyalayıp 16. Frame'e yapıştırdık. 2. Frame in üzerine sağ-tuş yaparak Create Motion Tween uyguladık, 9 ile 16. Frame ler arasınada Create Motion Tween uyguladık. Ayrıca 16. Frame'e, Frame Actions panelinden "Stop" u uyguladık. "alt" isimli Layer deki işimiz de bitti.
"buton seti" isimli Layer'e geldik. 1. Frame de "restore" isimli button özellikli objemiz bulunuyordu. Sahnemizdeki restore isimli butona sağ-tuş yaparak açılan menüden Actions>Object Actions paneline,
on (press) {
gotoAndPlay ("minimize");
_root.top += 1;
this.swapdepths(_root.top);
}
yazdık. 2. Frame'e Keyframe ekledik ve "restore" isimli butonu silip (Delete), "close" isimli butonu Library den çekip yerleştirdik. 8. Frame'e Keyframe ekledik ve sahnemizdeki "close" butonuna sağ-tuş yaparak Actions>Object Actions'u seçip actions paneline,
on (press) {
gotoAndPlay ("restore");
_root.top += 1;
this.swapdepths(_root.top);
}
yazdık. 9. Frame'e Keyframe ekledik "close" butonunu silip, tekrar "restore" butonunu Library den çekip yerleştirdik. 1. Frame i kopyalayıp 16. Frame'e yapıştırdık (1. Frame'in actions ları da beraberinde buraya taşınmış oldu). Böylece "buton seti" layerin de de işimizi bitirdik.
"drag" layer'ine geldik. Sahnemizdeki "dragbutton" un üzerine sağ-tuş yaparak Actions>Object Actions'u seçip actions paneline,
on (press) {
startDrag ("");
}
on (release) {
stopDrag ();
}
yazdık. Burada da işimiz bitti ve üzerine heme yeni bir Layer olan "frame actions" Layer ini yarattık. 8. Frame'e gelerek Keyframe yarattık ve üzerine çift tıklayarak açılan Frame Actions panelinden "Stop" u seçtik ve Frame Panelinde Label: stop yazdık.
Böylece, "link" isimli Movie Clip i bitirmiş olduk.

3- Şimdi de "textmenu" isimli Movie Clip i nasıl hazırladığımızı açıklayalım; (20 tane Frame kullanacağız)
Layer 1 in adını "textmenu_alt" olarak değiştirdik ve Library den önceden hazırladığımız MENUALT isimli graphic i çekerek taşıdık. sonra 2. bir layer yarattık ve adını "textmenu" olarak değiştirerek "menuwindow" isimli Movie Clip i taşıdık. 3. layer'i yaratıp adını da "textmenu_top" olarak değiştirdik ve Library den "MENUTOP" isimli graphic i taşıdık. "buton_seti" layer ini yarattık ve "restore" isimli button u çekip yerleştirdik. "Drag" layer ini yarattık ve Library den "dragbutton" u çekip yerleştirdik. Daha sonra "frame actions" layer ini yaratacağız. Yine dikkat ettiyseniz Library den çekilip yerleştirilen objeler yerleştikleri layerin 1. Frame lerini doldurduğunu görebilirsiniz.
Öncelikle "textmenu" layerinden başlayalım; 2. ve 5. frame lere birer tane Keyframe ekledik (F6). 10. frame'e de Keyframe ekledik ve objemizi Scale aracını kullanarak eninden ve boyundan yine küçülttük. Klavyedeki oklar yardımıyla yerine taşıyıp hizaladık. 11. frame'e de Keyframe ekledik. 1. Frame'i kopyalayıp 16. ve ardından 20. Frame'e yapıştırdık. 5. ve 10. Frame in arasına sağ-tuş yaparak Create Motion Tween uyguladık. Yine 11. ve 16. Frame arasına da sağ-tuş yaparak tekrar Create Motion Tween uyguladık. Böylece "textmenu" Layer indeki işimiz de bitti.
Şimdi "textmenu_alt" Layer ine geldik. 5. frame'e Keyframe ekledik ve oklar yardımıyla objemizi sağ alt köşeden sol alt köşeye taşıdık. 10. Frame'e Keyframe ekledik ve yine oklar yardımıyla objemizi yukarıya taşıdık. 1. frame'i kopyalayarak 16. ve ardından 20. Frame'e yapıştırdık. 1. ve 5. Frame in arasına sağ-tuş yaparak Create Motion Tween uyguladık. Yine 5. ve 10. Frame in arasına sağ-tuş yaparak Create Motion Tween uyguladık. Yine 10. ve 16. Frame in arasına sağ-tuş yaparak Create Motion Tween uyguladık. 16. Frame'e tıklayarak Create Motion Tween uyguladık. Böylece "textmenu_alt" Layer i ile de işimiz bitti.
"textmenu_top" Layer ine geldik. Sırasıyla, 1., 2., 5., 10., 11., 12., 17. ve 20. Frame lere Keyframe ler ekleyerek bu Layerdeki işimizi de bitirdik.
"buton_seti" Layer ine geldik. 1. Frame de "restore" isimli objemiz duruyor. Sahnemizdeki restore button una sağ-tuş yaparak Actions>Object Actions paneline,
on (press) {
gotoAndPlay ("minimize2");
_root.top += 1;
this.swapdepths(_root.top);
}
yazdık. 2. Frame'e Keyframe ekledik ve restore button unu silip yerine "close" button unu Library den çekip yerleştirdik. 5. Frame 'e Keyframe ekledik. 10. Frame'e Keyframe ekledik ve Object Actions paneline,
on (press) {
gotoAndPlay ("restore2");
_root.top += 1;
this.swapdepths(_root.top);
}
yazdık. 11. Frame'e Keyframe ekledik. 12. Frame'e da Keyframe ekledik ancak bu defa close button unu sildik ve "restore" button unu taşıdık. 17. Frame'e Keyframe ekledik. Son olarak 20. Frame'e Keyframe ekledik ve Object Actions paneline,
on (release) {
gotoAndPlay ("minimize2");
_root.top += 1;
this.swapdepths(_root.top);
}
yazdık. "buton_seti" Layer i ile de işimiz bitti.
"drag" layer'ine geldik ve Object Actions paneline,
on (press) {
startDrag ("");
}
on (release) {
stopDrag ();
}
yazdık. Böylece "drag" layer i ile de işimiz bitti.
"drag" Layer inin üzerinde yeni bir Layer yarattık ve adını da "frame actions" olarak değiştirdik. frame actions layerindeki 1. Frame'e Keyframe ekledik ve Frame Actions panelinden "Stop" u seçtik. 2. Frame'e de Keyframe ekledik Frame Actions panelinden bu defa "Play" i seçtik ve Frame Panelinde Label: minimize2 yazdık. 10. Frame'e Keyframe ekledik ve Frame Actions panelinden "Stop" u seçtik. 11. Frame'e Keyframe ekledik ve Frame Panelinde Label: restore2 yazdık. Son olarak 20. Frame'e Keyframe ekledik ve Frame Actions panelinden yine "Stop" u seçtik.
Böylece, "textmenu" isimli Movie Clip i bitirmiş olduk.

Son olarak da Scene ye geçip objeleri yerlerine yerleştirdik.

Bütün bu anlatılanlar ilk bakışda karışık gelebilir. ancak örnek dosyayı indirip Flash da açıp anlatılanları bir yandan okuyup, bir yandan da Flash daki örnek dökümanla karşılaştırıp, kontrol ederseniz ne kadar kolay olduğunu daha iyi anlayacaksınız.

Yazının URL adresi: http://aeystudio.com/tutorials.php?action=showtutorial&tut_id=31
Web Sitesi: http://www.aeyStudio.com