1-Rectangle Tool aracını seçelim properties panelden rectangle corner radius seçeneğinin kilidini açalım çünkü biz tek tarafına radius vereceğiz. Çizim bitince seçili yapalım F8 button yapalım name 1 olsun. Sadece up kısmında aktif olması yeterli. Örnek resim.

2-Hazırladığımız butonu çoğaltalım kütüphaneden kolayca duplicate yapabiliriz name kısmına 5 yazalım free transform rotate aracı ile diğer kenar için çevirelim çevirme işleminde gradient rengimizide düzeltelim Gradient Transform Tool aracı kullanabiliriz örnek resim.

3-İki adet kenar butonu hazırladık isterseniz hemen butonların tek, tek içine girelim yazı yazalım yeni layer ekleyelim up kısmında beyaz renk ile yazımızı yazalım F6 keyframe ekleyelim over kısmında yazı rengini değişelim. Örnek resim.

4-Orta butonumuzu hazırklamak için tekrar rectangle tool aracı seçelim örnek dikdörtgeni oluşturalım butonlarımız aynı gradient renk seçeneklerini uygulayalım örnek resim.

5-Ortadaki butonları tekrar çizmeye gerek yok hazırladığımızı kütüphanede çoğaltalım name kısmına sırayı takip ederek numaralandıralım 1 ile 5 vardı 2,3,4 olarak yazarsak olur her butonumuzu içine girelim yazıları tek, tek yazalım ilk uygulamanın aynısı olacağından anlatmıyorum.
6-Scene 1 sahnemize butonları düzgün bir şekilde yerleştirelim örnek resim.

7-Butonları tek tek seçelim properties panelden filters paneli açalım drop shadow efekti verelim.

8-Mouse efektimizi yapalım örnek resimdeki şekli ben oluşturdum siz kendinize göre yapabilirsiniz çizim sonrası şekli F8 movie Clip yapalım name Mouse olsun yazacağımız yazıyı yazalım scene1 sahnemize gelelim ilk layer butonlar layerimiz oldu yeni layer ekleyelim layer adı Mouse olsun kütüphaneden Mouse klipimizi alarak 1.frameye yerleştirelim. Sahnede Mouse klipimiz seçili durumda instance name kısmına Mouse yazalım properties panelden filters penceresini açalım drop shadow efekti verelim örnek resim.

9-mouse layer 1.framesine gelerek actions paneli açalım F9 ekli kodo yazalım.

mouse.show();

10-Sahnedeki Mouse klipi seçelim actions paneli açalım ekli kodu ekleyelim.

onClipEvent(enterFrame){
this.startDrag(true);
}

11-Geldik mouse işaretini kaldırmaya butonlar layerimize gelelim tek tek butonları seçelim actions paneli açalım ekli kodu ekleyelim.

on(rollOver) {
Mouse.hide();
}
on(rollOut){
Mouse.show();
}

12-Ben çalışmada daha etkili görünüm elde edebilmek için bir animasyon hazırladım animasyonu çoğalttım toplam üç adet oldu klipleri scene1 sahnemize yeni layer ekleyerek yerleştirdim properties panelden filters blur efekti uyguladım alpa değerinide %20 yaptım bu kısmı fazladan yapılan çalışma oldu incelemek için ekli dosyayı indirebilirsiniz.
Çalışmamız sonlandı test edelim Ctrl+Enter

FLA İndir

Çalışmayı İzle

Bu Yazıyı Paylaşın

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.

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.

3-Bir adet görünmez( invisible)buton yapalım.

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.

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.

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.

11-Scene1 sahnemize gelelim kütüphaneden anaMenu_mc 1.frameye ekleyelim ve test yapalım.
Ctrl+Enter

FLA İndir

Bu Yazıyı Paylaşın

[Hidepost]

Rectangle tool aracını seçelim sahneye bir dikdörtgen çizelim dış çizgisi olmasın. 400×27 px olsun seçili durumda F8 movieClip yapalım name arka_bg olsun arka_bg klip seçili durumda tekrar movieClip oluşturalım name menu olsun. Text Tool seçelim yazı yazalım yazdığımız yazıyı F8 button yapalım name but1 olsun aynı şekilde çalışmada kullandığımız içerik sayısı kadar buton hazırlayalım içerik1,içerik2,içerik,3,içerik4 menü klipimizin ilk layerine arka_bg klip ekli yeni layer ekleyelim layer adını butonlar olarak yazalım kütüphaneden hazırladığımız butonları tek, tek alarak sıralayalım. Ekli butonları teker teker seçili yapğalım instance name kutusuna örnek vermem gerekirse içerik1 buton instance kutusuna b1_but yazıyoruz butonları sıra ile seçerek b2_but sayı kısmını değişerek yazalım.

Yeni layer ekleyelim layer adı action olsun eklediğim kodu F9 actions paneli açarak ekleyelim.

var hedef:Number=0;
onEnterFrame = function () {
_root.icerik_mc._x+=(hedef-_root.icerik_mc._x)*0.2;
}
b1_but.onRollOver = function () {
hedef=0;
}
b2_but.onRollOver = function () {
hedef=-400;
}
b3_but.onRollOver = function () {
hedef=-800;
}
b4_but.onRollOver = function () {
hedef=-1200;
}

İçerik eklemek isterseniz kodu inceleyin hedef değerini içerik boyutu kadar artırmanız yeterli olacaktır.
Scene1 sahnemize gelelim layer 1 adını değişelim içerik olsun yeni layer ekleyelim adı menü olsun. Kütüphaneden menu klipi alarak ekleyelim çalışma sayfamız ile resim ölçüleri arasında 27px fark vardı fark olan kısım menü barı eklediğimiz yer oluyor ilk layerimiz icerik seçili durumda instance name kutusuna icerik_mc yazalım artık test edebiliriz. CTRL+ENTER

FLA indir

[/Hidepost]

Bu Yazıyı Paylaşın

Photoshop kullanmak için ilk olarak araç kutusunu bilmek gerekli araç kutusunu aktif etmek için Menüden Window>Tool seçeneği ile açalım.

Araç kutusu atl taraftaki resimde görünen araçlardan fazlasını içermektedir. Gizli olan bu araçlara yan kısmındaki işareti mouse ile tıkladığınızda erişmiş oluyorsunuz

Açılan pencerelerden istediğiniz araçları seçebilir kullanabilirsiniz. Ayrıca açılan pencerelerde bu araçların kısa yol tuşlarınıda görebilirsiniz.

Bu Yazıyı Paylaşın