Hades
🏆Pro Tasarımcı🏆
Menünün Düğmelerini Kontrol Etmek
Önceki uygulamayla karşılaştırıldığında menünün düğmeleri çocuk oyuncağıdır. Bir düğmenin faaliyet alanı, olay fonksiyonlarının düğmenin Timeline’ını değil, düğmenin üzerinde bulunduğu Timeline’ı etkilediği anlamına gelir. Yani, başka bir şey belirtmediğiniz takdirde, düğmeler ana Timeline’ı kontrol eder. Bu uygulamada, ana Timeline’ı movie clip’lerde yuvalanmış bulunan bir Timeline’dan kontrol etmek istediğiniz için bazı ayarlar yapmanız gerekiyor. Bu biraz ustalık istiyor gibi görünse de, bu derste daha önce gördüğümüz faaliyet alanı konusunu anımsarsanız işiniz o kadar zor olmayacaktır. Bir menüdeki düğmelerden birine tıklandığında, bir mesaj birkaç Timeline’dan geçerek ana Timeline’a gider. Sonra da oynatım kafası yeni bir sayfaya gider.
1.Properties denetçisini kullanarak menüdeki düğmelerin her birine örnek isimleri verin.
Bu düğmeleri ActionScript kodunuzda hedefleyebilmeniz için, bunlara örnek isimleri vermeniz gerekir. Hatırlayacağınız gibi, menünün düğmelerinin her biri, ana menü movie clip’inin içinde yuvalanmış bulunan movie clip menüsünün içine yerleştirilmiştir. Bu nedenle, productsmenu_mc örneğine ve sonra da menu1_mc örneğine tıkladığınızda iki düğme bulacaksınız. Catalog düğmesine tıklayın ve Properties denetçisine catalog_btn örnek ismini girin. Sonra da sağdaki düğmeye tıklayın ve buna da reviews_btn örnek ismini verin.
Düzenleme çubuğunu kullanarak ana Stage’e geri dönün ve bu işlemleri diğer iki menü için de tekrarlayın. Bunlara verdiğiniz isimler son derece sezgisel olmalıdır. menu2_mc örneğinin içindeki düğmelere tour_btn ve news_btn örnek isimlerini verin. Sonra da menu3_mc düğmelerine feedback_btn ve map_btn örnek isimlerini verin.
2.Yeni oluşturduğunuz açılır listelerde bulunan altı düğmeyi kontrol etmek için kullanılan ActionScript kodunu ekleyin. Bu kodu, önceki uygulama eklediğiniz kodun sonuna yerleştirin.
Bu düğmeleri, ziyaretçilerin Tech Bookstore’da dolaşmalarına yardımcı olmak için oluşturdunuz ve ActionScript’i kullanarak bunları hedefleyebilmek için bunlara örnek isimleri verdiniz. ActionScript kodu, düğmeyi hedefler ve böylece, düğmeye tıklandığında fonksiyonun çağrılmasını sağlar, sonra da fonksiyon ana Timeline’ın üzerindeki oynatım kafasına Tech Bookstore’daki doğru sayfaya gitmesini söyler.
Not: Düğme nereye yerleştirilirse yerleştirilsin, düğmenin üzerine yerleştirildiği Timeline’ın etkileneceğini unutmayın. Bu nedenle, bir movie clip’in içinde yuvalanmış olan bir düğme için kod yazıyor olsanız bile, yazdığınız fonksiyon geçerli Timeline’ı etkiler. Yani, Flash’a düğmeyi nerede araması gerektiğini söylemeniz gerekir, ama oynatım kafasının hareket edeceği doğru Timeline için faaliyet alanını belirtmeniz gerekmez.
Ana Timeline’daki actions katmanının 1 numaralı karesini seçin. Actions panelini maksimum boya getirin ve Script bölmesine aşağıdaki ActionScript kodunu girin.
this.productsmenu_mc.menu1_mc.catalog_btn.onRelease = function() {
gotoAndStop(“catalog”);
};
this.productsmenu_mc.menu1_mc.reviews_btn.onRelease = function() {
gotoAndStop(“reviews”);
};
this.companymenu_mc.menu2_mc.tour_btn.onRelease = function() {
gotoAndStop(“tour”);
};
this.companymenu_mc.menu2_mc.news_btn.onRelease = function() {
gotoAndStop(“news”);
};
this.contactmenu_mc.menu3_mc.feedback_btn.onRelease = function() {
gotoAndStop(“feedback”);
};
this.contactmenu_mc.menu3_mc.map_btn.onRelease = function() {
gotoAndStop(“map”);
};
Düğme fonksiyonlarını, daha önce oluşturduğunuz FLA dosyalarında diğer düğmeler için girdiğiniz koddan hatırlıyor olmalısınız. Yapı size tanıdık gelse de, düğmenin hedeflenmesi tanıdık gelmeyebilir. Bu bağlamda, this anahtar sözcüğü geçerli Timeline’ı, yani ana Stage’i gösterir. Kod bu sözcük kullanılmasa da çalışır, ama ActionScript kodunuzu başka bir yere taşıdığınızda, bu sözcük faydalı olabilir. Bunun ardından, ana Stage’de bulunan contactmenu_ mc movie clip’ini, sonra da bunun içindeki menu3_mc movie clip’ini hedefliyorsunuz. menu3_mc movie clip’inin içinde düğme yer aldığı için, map_btn örnek ismiyle devam ediyorsunuz. Kullanmak istediğiniz örneği hedeflediğiniz için, onRelease olay işleyicisini ve yerel fonksiyonunu kalan kısmını yazabilirsiniz.
Şu anda, yeni bir sayfanın başladığı her karede etiketleriniz var. Bu kare etiketleri, TechBookstore sitesinde dolaşmak için kullanılıyor. gotoAndStop eyleminin hedefi “map”tir (kare etiketinin ismi). Kare etiketleri tırnak içinde yazılmalıdır (bu onların bir dize olduğunu gösterir).
Tech Bookstore sitesi içine gereken ActionScript kodlarının büyük bir kısmını şaşılacak derecede kısa bir sürede yazıp bitirdiniz. Bu kitaptaki çalışmanızın geri kalan kısmında, bu derste ve daha önceki derslerde hazırladığınız FLA dosyalarını ana siteyle bütünleştireceksiniz. Ayrıca, 10. Ders’te siteyi optimize edeceksiniz.
3.Düğmelerin doğru şekilde çalışıp çalışmadığını görmek için, Control menüsünden Test Movie’yi seçerek bunları test edin.
Bir menüyü açmak için bir düğmeye tıkladığınızda, menü aşağıya doğru hareket eder. İmleci menü alanından uzaklaştırıp görünmez düğmenin üzerine getirdiğinizde, yukarı doğru hareket ederek menüyü “kapatır”. Menüdeki bir düğmeye tıklarsanız, bunun sizi Tech Bookstore’da başka bir sayfaya götürmesi ve durması gerekir. Menüler doğru şekilde hareket etmiyorsa, geri dönün ve örnek isimlerinizi ve bu dersteki kodu bir daha kontrol edin. Üç menüdeki düğmelerin sizi doğru sayfaya götürdüğünden de emin olun. Şu anda bu sayfaların içeriği yüklenmemektedir. Bu sorunu bir sonraki derste gidereceksiniz. Şimdilik Stage’in sağ tarafı etmeniz yeterli.
4.FLA dosyasında yaptığınız değişiklikleri kaydedin.
Sıradaki derste, önce bu derste ve önceki derslerde oluşturduğunuz SWF dosyalarının hepsini yükleyeceksiniz. Sonra da Tech Bookstore sitesini test edecek, hataları ayıklayacak ve uygulamadaki bölümlerin her biri için bir ilerleme çubuğu (ProgressBar bileşeni) ekleyeceksiniz.
Bu derste şunları öğrendiniz:
•ActionScript 2.0’ı öğrendiniz.
•Nesnelerin, metotların ve özelliklerin nasıl kullanıldığını öğrendiniz.
•Kesin tip belirleme özelliğinin değişkenlerde nasıl kullanıldığını öğrendiniz.
•ActionScript kodlarının yazılmasını hızlandırmak için kod ipuçlarını kullandınız.
•Fonksiyonları ve koşullu deyimleri kullandınız.
•Faaliyet alanları ve değişkenler hakkında bilgi edindiniz.
•ActionScript kodunuzda _root, _parent ve seviyeleri nasıl kullanacağınızı öğrendiniz.
•LoadVars nesnesini yoğun bir şekilde kullandınız.
•Reviews sayfasını oluşturdunuz.
•Kodunuza olaylar, olay işleyicileri ve izleyiciler eklediniz.
•Bir belgeye yüklenen metni biçimlendirmek için CSS’i kullandınız.
•Catalog, News ve Home sayfalarını oluşturdunuz.
•Tech Bookstore’daki men ülerin hareket etmesini sağlayacak kodu eklediniz.
•Tech Bookstore menülerinin çalışmasını sağlayacak ActionScript kodunu eklediniz.
Önceki uygulamayla karşılaştırıldığında menünün düğmeleri çocuk oyuncağıdır. Bir düğmenin faaliyet alanı, olay fonksiyonlarının düğmenin Timeline’ını değil, düğmenin üzerinde bulunduğu Timeline’ı etkilediği anlamına gelir. Yani, başka bir şey belirtmediğiniz takdirde, düğmeler ana Timeline’ı kontrol eder. Bu uygulamada, ana Timeline’ı movie clip’lerde yuvalanmış bulunan bir Timeline’dan kontrol etmek istediğiniz için bazı ayarlar yapmanız gerekiyor. Bu biraz ustalık istiyor gibi görünse de, bu derste daha önce gördüğümüz faaliyet alanı konusunu anımsarsanız işiniz o kadar zor olmayacaktır. Bir menüdeki düğmelerden birine tıklandığında, bir mesaj birkaç Timeline’dan geçerek ana Timeline’a gider. Sonra da oynatım kafası yeni bir sayfaya gider.
1.Properties denetçisini kullanarak menüdeki düğmelerin her birine örnek isimleri verin.
Bu düğmeleri ActionScript kodunuzda hedefleyebilmeniz için, bunlara örnek isimleri vermeniz gerekir. Hatırlayacağınız gibi, menünün düğmelerinin her biri, ana menü movie clip’inin içinde yuvalanmış bulunan movie clip menüsünün içine yerleştirilmiştir. Bu nedenle, productsmenu_mc örneğine ve sonra da menu1_mc örneğine tıkladığınızda iki düğme bulacaksınız. Catalog düğmesine tıklayın ve Properties denetçisine catalog_btn örnek ismini girin. Sonra da sağdaki düğmeye tıklayın ve buna da reviews_btn örnek ismini verin.
Düzenleme çubuğunu kullanarak ana Stage’e geri dönün ve bu işlemleri diğer iki menü için de tekrarlayın. Bunlara verdiğiniz isimler son derece sezgisel olmalıdır. menu2_mc örneğinin içindeki düğmelere tour_btn ve news_btn örnek isimlerini verin. Sonra da menu3_mc düğmelerine feedback_btn ve map_btn örnek isimlerini verin.
2.Yeni oluşturduğunuz açılır listelerde bulunan altı düğmeyi kontrol etmek için kullanılan ActionScript kodunu ekleyin. Bu kodu, önceki uygulama eklediğiniz kodun sonuna yerleştirin.
Bu düğmeleri, ziyaretçilerin Tech Bookstore’da dolaşmalarına yardımcı olmak için oluşturdunuz ve ActionScript’i kullanarak bunları hedefleyebilmek için bunlara örnek isimleri verdiniz. ActionScript kodu, düğmeyi hedefler ve böylece, düğmeye tıklandığında fonksiyonun çağrılmasını sağlar, sonra da fonksiyon ana Timeline’ın üzerindeki oynatım kafasına Tech Bookstore’daki doğru sayfaya gitmesini söyler.
Not: Düğme nereye yerleştirilirse yerleştirilsin, düğmenin üzerine yerleştirildiği Timeline’ın etkileneceğini unutmayın. Bu nedenle, bir movie clip’in içinde yuvalanmış olan bir düğme için kod yazıyor olsanız bile, yazdığınız fonksiyon geçerli Timeline’ı etkiler. Yani, Flash’a düğmeyi nerede araması gerektiğini söylemeniz gerekir, ama oynatım kafasının hareket edeceği doğru Timeline için faaliyet alanını belirtmeniz gerekmez.
Ana Timeline’daki actions katmanının 1 numaralı karesini seçin. Actions panelini maksimum boya getirin ve Script bölmesine aşağıdaki ActionScript kodunu girin.
this.productsmenu_mc.menu1_mc.catalog_btn.onRelease = function() {
gotoAndStop(“catalog”);
};
this.productsmenu_mc.menu1_mc.reviews_btn.onRelease = function() {
gotoAndStop(“reviews”);
};
this.companymenu_mc.menu2_mc.tour_btn.onRelease = function() {
gotoAndStop(“tour”);
};
this.companymenu_mc.menu2_mc.news_btn.onRelease = function() {
gotoAndStop(“news”);
};
this.contactmenu_mc.menu3_mc.feedback_btn.onRelease = function() {
gotoAndStop(“feedback”);
};
this.contactmenu_mc.menu3_mc.map_btn.onRelease = function() {
gotoAndStop(“map”);
};
Düğme fonksiyonlarını, daha önce oluşturduğunuz FLA dosyalarında diğer düğmeler için girdiğiniz koddan hatırlıyor olmalısınız. Yapı size tanıdık gelse de, düğmenin hedeflenmesi tanıdık gelmeyebilir. Bu bağlamda, this anahtar sözcüğü geçerli Timeline’ı, yani ana Stage’i gösterir. Kod bu sözcük kullanılmasa da çalışır, ama ActionScript kodunuzu başka bir yere taşıdığınızda, bu sözcük faydalı olabilir. Bunun ardından, ana Stage’de bulunan contactmenu_ mc movie clip’ini, sonra da bunun içindeki menu3_mc movie clip’ini hedefliyorsunuz. menu3_mc movie clip’inin içinde düğme yer aldığı için, map_btn örnek ismiyle devam ediyorsunuz. Kullanmak istediğiniz örneği hedeflediğiniz için, onRelease olay işleyicisini ve yerel fonksiyonunu kalan kısmını yazabilirsiniz.
Şu anda, yeni bir sayfanın başladığı her karede etiketleriniz var. Bu kare etiketleri, TechBookstore sitesinde dolaşmak için kullanılıyor. gotoAndStop eyleminin hedefi “map”tir (kare etiketinin ismi). Kare etiketleri tırnak içinde yazılmalıdır (bu onların bir dize olduğunu gösterir).
Tech Bookstore sitesi içine gereken ActionScript kodlarının büyük bir kısmını şaşılacak derecede kısa bir sürede yazıp bitirdiniz. Bu kitaptaki çalışmanızın geri kalan kısmında, bu derste ve daha önceki derslerde hazırladığınız FLA dosyalarını ana siteyle bütünleştireceksiniz. Ayrıca, 10. Ders’te siteyi optimize edeceksiniz.
3.Düğmelerin doğru şekilde çalışıp çalışmadığını görmek için, Control menüsünden Test Movie’yi seçerek bunları test edin.
Bir menüyü açmak için bir düğmeye tıkladığınızda, menü aşağıya doğru hareket eder. İmleci menü alanından uzaklaştırıp görünmez düğmenin üzerine getirdiğinizde, yukarı doğru hareket ederek menüyü “kapatır”. Menüdeki bir düğmeye tıklarsanız, bunun sizi Tech Bookstore’da başka bir sayfaya götürmesi ve durması gerekir. Menüler doğru şekilde hareket etmiyorsa, geri dönün ve örnek isimlerinizi ve bu dersteki kodu bir daha kontrol edin. Üç menüdeki düğmelerin sizi doğru sayfaya götürdüğünden de emin olun. Şu anda bu sayfaların içeriği yüklenmemektedir. Bu sorunu bir sonraki derste gidereceksiniz. Şimdilik Stage’in sağ tarafı etmeniz yeterli.
4.FLA dosyasında yaptığınız değişiklikleri kaydedin.
Sıradaki derste, önce bu derste ve önceki derslerde oluşturduğunuz SWF dosyalarının hepsini yükleyeceksiniz. Sonra da Tech Bookstore sitesini test edecek, hataları ayıklayacak ve uygulamadaki bölümlerin her biri için bir ilerleme çubuğu (ProgressBar bileşeni) ekleyeceksiniz.
Bu derste şunları öğrendiniz:
•ActionScript 2.0’ı öğrendiniz.
•Nesnelerin, metotların ve özelliklerin nasıl kullanıldığını öğrendiniz.
•Kesin tip belirleme özelliğinin değişkenlerde nasıl kullanıldığını öğrendiniz.
•ActionScript kodlarının yazılmasını hızlandırmak için kod ipuçlarını kullandınız.
•Fonksiyonları ve koşullu deyimleri kullandınız.
•Faaliyet alanları ve değişkenler hakkında bilgi edindiniz.
•ActionScript kodunuzda _root, _parent ve seviyeleri nasıl kullanacağınızı öğrendiniz.
•LoadVars nesnesini yoğun bir şekilde kullandınız.
•Reviews sayfasını oluşturdunuz.
•Kodunuza olaylar, olay işleyicileri ve izleyiciler eklediniz.
•Bir belgeye yüklenen metni biçimlendirmek için CSS’i kullandınız.
•Catalog, News ve Home sayfalarını oluşturdunuz.
•Tech Bookstore’daki men ülerin hareket etmesini sağlayacak kodu eklediniz.
•Tech Bookstore menülerinin çalışmasını sağlayacak ActionScript kodunu eklediniz.
