Grafik Örnek Flash Uygulamaları 172 GRAF İK ve AN İMASYON Alakoç 16. ÖRNEK FLASH UYGULAMALARI 16.1. Flash ile Kayan Menü Tasarımı Şekil 16.1.1. Kayan Menü Ekranı E ğer web sayfasına konulacak linklerin sayısı az ise, de ği şik efektler kullanılabilir. En çok tercih edilen menülerden birisi de, kayan menülerdir. Örnek, menülerin yer aldı ğı foto ğrafları, yan yana dizerek bir movie clip olu şturulması. Bu movie clip'in hareketi ise, sahnenin belirli bir bölgesinde aktif olan, fare i şaretçisinin hareketine göre sa ğa veya sola kayarak olu şacak. Bu movie clip, aynı zamanda,menülerin yer aldı ğı dü ğmelerden olu şacaktır. Yani, fare i şaretçisi ile menülerin hızını ayarlamak mümkün olacaktır. Bo ş bir çalı şma sahnesi açın. Bu örnekte, sahnenin x ve y ekseninden alınması gereken referans noktaları oldu ğundan, sahnenin kenar cetveli açık kalmalıdır. Bu en kolay şekilde, klavyeden CTRL+SHIFT+ALT+R tu şlarına birlikte basılarak yapılabilir. Ayrıca, sahnenin ızgaralarını da açmak için çalı şmaya kolaylık sa ğlayacaktır. Örne ği, grafik olarak tanımlayalım. Şekil 16.1.2. Kayan Menü Tasarım Ekranı BÖLÜM 16 173 GRAF İK ve AN İMASYON Alakoç Sahnenin ortasında, büyük bir dörtgen olacak. Bu dörtgenin sa ğ tarafında, dü ğmelerin yer aldı ğı movie clip haraket edecek. Ancak bu movie clip'in hareketi, fare i şaretçisinin bu alandaki hareketine göre belirlenecektir. Sahnenin orta yerine bu dörtgeni çizin. Sonra sa ğ k ısmına ba şka bir dörtgen daha çizin. Bu çizece ğiniz dörtgen ise, daha küçük ve büyük dörtgenin içinde olmalıdır. Küçük dörtgeni çizdikten sonra, iç kısmını seçip silin. Şimdi sahnede, sa ğ tarafında bir pencere açılmı ş büyük bir dörtgenimiz oldu. Üzerinde çalı ştı ğımız bu katmanın adını, çerçeve olarak de ği ştirin. Sonra yeni bir katman daha ekleyin ve ismini logo olarak de ği ştirin. Kendinize ait olan bir logoyu, dörtgenin sol tarafına yerleştirin. Şimdi sıra, dü ğmelerin yer aldı ğı movie clip'e geldi. Bu movie clip'i olu şturabilmek için, sahnedeki dörtgen içinde kalan pencerenin boyutlarını ö ğrenmemiz gerekiyor. Şekil 16.1.3. Kayan Menü Ekranı-2 Pencere içine, yatay olarak bir uçtan bir uca de ğecek şekilde bir çizgi çizin ve Info Panel vasıtası ile W (Width) kutusunun içindeki de ğeri not alın. W : 216 Sonra yatay çizgiyi silip, aynı pencere içine bir dikey çizgi çizin ve H (Height) ölçüsünü not alın. H : 122.7 Klavyeden CTRL+F8 tu şlarına birlikte basın ve yeni bir movie clip tanımlayın. İsmini menu goster olarak belirledi ğiniz movie clip'e, ister dı şarıdan bir kaç resim ekleyebilir, isterseniz Flash ile yapılmı ş bir kaç nesne olu şturabilirsiniz. Amacımız, bu pencere içinde, sa ğa-sola kayan dü ğmeleri tasarlamak. Biz bu projemizde, dört adet resim ekledik. Bu resimlerin boyutlarını, di ğer resim editörlerinin yardımı ile pencere içine sı ğabilecek şekilde düzenledik. 174 GRAF İK ve AN İMASYON Alakoç Şekil 15.1.4. Kayan Menü Ekranı-3 Resimleri çevreleyen arka plan kısmını, pencere boyutlarından biraz büyük yaptık. Bu resimleri düzenlerken, deneme yanılma yolu ile en do ğru de ğeri bulabilirsiniz. Ancak resmin merkez noktası, bütün nesnelerin en sol noktası olmalıdır. Sahnede yer alan tüm nesneleri seçip kopyalayın. Sonra, klavyeden CRTL+F8 tu şlarına birlikte basın. Gelen pencerenin Name kısmına, menu yazıp, movie clip olarak tanımlayın. Açılan yeni çalı şma sahnesine, menu goster adlı movie clip'ten kopyalamı ş oldu ğunuz nesneleri yapı ştırın. Resmin merkez noktasını yine en sol nokta olarak belirleyin. Bu kez, burada yer alan resimleri tek tek seçip, Button olarak belirleyin. Böylece elimizde dört adet dü ğme olu şacak. Şimdiye kadar, aynı görüntüye sahip iki adet movie clip yapmı ş olduk. Bunlardan birisi, resimleri dü ğme olarak belirledi ğimiz menu adlı movie clip, di ğeri ise, sadece resimleri içeren menu goster adlı movie clip. Neden iki adet yaptı ğımıza daha sonra de ğinece ğiz. Şimdi ana çalı şma sahnesine dönelim. Sahnede şimdiye kadar iki adet katman yaptık. Bu katmanlara bir yenisini daha ekleyelim ve ismini menu olarak de ği ştirelim. Ancak bu katman, en altta olmalıdır ki pencerenin altında kalsın. Bu katmanda çalı şırken, kütüphaneden menu adlı movie clip'i tutup sahneye sürükleyin. Movie clip seçili iken, Instance panelindeki Name kısmına, menu yazın. Sahneye getirdi ğiniz movie clip'i, sadece y - eksenine göre ayarlamanız yeterlidir. Yani, resim olarak tanımladı ğımız buttonları, pencerenin tam ortasına gelecek şekilde ayarlayın. X- eksenindeki yerini actions ile belirleyece ğiz. Bir katman daha yapın ve ismini menu goster olarak belirleyin. Kütüphaneden, menu goster adlı movie clip'i tutup sahneye do ğru sürükleyin. Bu katmanı da en alta sürükleyin. Aynı şekilde, sadece y - eksenindeki yerini ayarlayın (her iki movie clip, tam olarak üst üste gelmelidir). Bu movie clip'in durum adını da, menuGoster olarak belirleyin. Artık pencerenin altında iki adet movie clip vardır. Bunlardan biri, menu adlı movie clip, di ğeri ise, menu goster adlı movie cliptir. Şimdi çerçeve adlı katmanda duran nesneye geçelim. Pencere olarak belirledi ğimiz dörtgeni seçip ( sadece dört adet çizgiyi seçmelisiniz), movie clip olarak tanımlayın. Instance paneldeki Name kısmına cerceve yazın. 175 GRAF İK ve AN İMASYON Alakoç Şekil 16.1.5. Kayan Menü Ekranı-4 Son olarak katmanlara, bir katman daha ekleyelim ve adını Actions olarak de ği ştirelim. Actions katmanının 1. frame'ine a şa ğıdaki kodları yazın. sol_x = cerceve._x - (cerceve._width/2); sag_x = cerceve._x + (cerceve._width/2); ust_y = cerceve._y - (cerceve._height/2); alt_y = cerceve._y + (cerceve._height/2); merkez = cerceve._x; menu._visible = false; menuGoster._visible = true; menuGoster._x = sol_x - (_root.menuGoster._width/2); menu._x = sol_x - (_root.menu._width/2); solStop = sag_x - (_root.menu._width); sagStop = sol_x; Şekil 16.1.6. Kayan Menü Ekranı-5 176 GRAF İK ve AN İMASYON Alakoç Projemizi anlatırken, fare i şaretçisinin sadece belirli bir alandaki hareketine göre, menü sa ğa-sola hareket edecek demi ştik. Bu alanı pencere olarak tasarladık. Şimdi fare i şaretçisinin bu alandaki hareketini alabilmek için, sol taraftaki x noktası, sa ğ taraftaki x noktası, üst taraftaki y noktası ve alt taraftaki y noktasını belirlememiz gerekiyor. Bu noktaları alabilmek için, çerçeve durum adlı movie clip'i yaptık. Çerçevenin, _x ve _y noktası, aynı zamanda merkez noktamız olacaktır. Buna göre, sol_x noktasını bulabilmek için, çerçevenin _x noktasından, genişli ğinin yarısını çıkarmamız gerekir. sol_x = cerceve._x - (cerceve._width/2); Aynı şekilde, sag_x noktasını bulabilmek için, çerçevenin _x noktasına, geni şli ğinin yarısını eklememiz gerekir. sag_x = cerceve._x + (cerceve._width/2); Pencerenin üst noktasını bulabilmek için, yani ust_x noktası için, çerçevenin _y noktasından, yüksekli ğinin yarısını çıkarmamız gerekir. ust_y = cerceve._y - (cerceve._height/2); Son nokta olan alt_x'i bulabilmek için, çerçevenin _y noktasına, yüksekli ğinin yarısını eklememiz gerekir. alt_y = cerceve._y + (cerceve._height/2); Merkez noktası ise, çerçevenin _x de ğerine e şittir. Çünkü çerçeveyi movie clip olarak ilk tanımladı ğınızda, merkez noktası, nesnenin tam orta noktası olarak belirlenir. Biz bu de ğeri de ği ştirmek için Edit Center komutunu kullanıyorduk. merkez = cerceve._x; Pencerede iki adet movie clip üst üste duruyordu. E ğer sadece dü ğmelerin durdu ğu "menu" adlı movie clip'i koysaydık, program çalı ştı ğında, dü ğmeler sorun olacaktı. Çünkü movie clip sola do ğru kaydı ğında, dü ğmeler, movie clip'in görünmeyen kısımlarında da aktif olacak ve burada linkin oldu ğunu gösteren el i şareti çıkacaktı. Progam ilk çalı ştı ğında, dü ğmelerin oldu ğu movie clip'i pasif edip, di ğerini aktif etmeliyiz. Bunun için, _visible komutunu kullanıyoruz. menu._visible = false; menuGoster._visible = true; Program ilk çalı ştı ğında, her iki movie clip'in yerini belirlememiz gerekiyor. Bu movie clip'lerin y - eksenindeki yerleri manuel olarak ayarlanmalıdır. Çünkü y - ekseninde herhangi bir ayarlama yapılmayacaktır. Ancak x - eksenindeki yerleri önemlidir. movie clip'lerin orta noktası penceredeki merkez noktasında olmalıdır. Aksi takdirde, program çalı ştı ğında, fare i şaretçisi pencereye hangi kö şeden girerse girsin, movie clip'in yeri birden de ği şecektir. Bu durumda movie clip'lerin _x noktası şöyle bulunmalıdır. pencerenin sol x noktası - (movie clip'in geni şli ği / 2) menuGoster._x = sol_x - (_root.menuGoster._width/2); menu._x = sol_x - (_root.menu._width/2); 177 GRAF İK ve AN İMASYON Alakoç Pencere içinde hareket eden movie clip, en sola ve en sa ğa geldi ği zaman durması gerekir. Bunun için soldaki ve sa ğdaki stop de ğerleri hesaplanır. Sol tarafta duraca ğı de ğer, sol_x de ğeridir. Sa ğ tarafta durması gereken de ğer ise, sag_x de ğerinden movie clip'in geni şli ğinin çıkarılması ile bulunur. solStop = sag_x - (_root.menu._width); sagStop = sol_x; Program ilk çalı ştı ğında bu de ğerleri heapladı ğına göre, bir sonraki frame'e gidecektir. Actions katmanına bir keyframe ve di ğer tüm katmanlara sadece frame yerleştirin. Actions katmanındaki 2. frame'e a şa ğıdaki kodları yazın. if (_ymouse>ust_y && _ymousesol_x && _xmousesagStop) { pozMenu = sagStop; } menu._x = pozMenu; } else{ menu._visible = false; menuGoster._x = pozMenu; menuGoster._visible = true; } Fare i şaretçisinin pencere içinde olup olmadı ğını kontrol etmek için, bir ko şul yazmamız gerekiyor. Bu ko şul, ilk frame'de belirlenen pencerenin, x ve y noktalarıdır. if (_ymouse>ust_y && _ymousesol_x && _xmouse