Artık Flash’la çalışmaya başlamanın ve FLA dosyalarına işe yarar bir şeyler yaptırmak için biraz ActionScript kodu eklemenin zamanı geldi. Bu uygulamada, TextArea bileşenine metin yükleyen özel bir fonksiyonun nasıl yazıldığını göreceksiniz. Bu sayfa, bir List bileşeni içeren bir inceleme (Review) sayfası oluşturacaktır. Bu bileşene tıklayarak, okumak istediğiniz incelemeyi seçebilirsiniz. Başlığına tıkladığınız inceleme, List bileşeninin yanında bulunan TextArea bileşeninin içinde görüntülenecektir. İnceleme sayfasının yapısını hazırlamak için bileşenlerden faydalanacaksınız. İnceleme bölümünün gövdesini oluşturmak için, yeni bir FLA belgesi oluşturacak ve daha sonra Tech Bookstore sitesine yüklenmek üzere bir SWF dosyası yayınlayacaksınız.

Herhangi bir ActionScript kodu yazmadan önce, Flash’ın Actions panelini açın (F9). Actions panelinin sağ üst köşesindeki menüye tıklayın ve açılan menüden View Line Numbers’ı (Satır Numaralarını Göster) seçin.


Satır numaraları, belgeyi test ettikten sonra Output panelinde gösterilen hataları kolayca bulmanızı sağlar. Çünkü Output paneli hata içeren satırın (ya da satırların) numarasını bildirir. Actions panelinde satır numarası özelliğini etkinleştirirseniz, hataları bulmanız çok daha kolay olacaktır.

[B]1.Yeni bir Flash belgesi oluşturun. Stage’in genişliğini 720 piksel, yüksekliğini de 345 piksel olarak ayarlayın biraz ****veri ekleyin. Layer 1 katmanının adını form olarak değiştirin. Publish Settings iletişim kutusunu açın ve Formats sekmesinde HTML onay kutusunun işaretini kaldırın. Belgeyi reviews.fla adıyla kaydedin.[/B]

Yeni bir Flash belgesi oluşturun ve Stage’in boyutlarını değiştirmek için Properties denetçisindeki Size (Boy) düğmesine tıklayarak ya da Ctrl+J (veya Mac’te Cmd+J) tuşlarına basarak Document Properties (Belge Özellikleri) iletişim kutusunu açın. Title (İsim) alanına Tech Bookstore Reviews yazın ve Description (Açıklama) alanına kısa bir açıklama ekleyin. Dimensions (Boyutlar)metin girdi alanlarına genişlik (width) için 720, yükseklik (height) için 345 yazın ve sonra da OK düğmesine tıklayın.


Ana belge Timeline’ında Layer 1 katmanının ismini form olarak değiştirin. Bu katman, FLA dosyasının ilk katmanıdır ve boyutları ayarlar.

Belgeyi yayınladığınızda bir HTML sayfası oluşturmanız gerekmez. Sadece, Tech Bookstore’a yükleyeceğiniz SWF dosyasını kullanmanız gerekir. File menüsünden Publish Settings’i seçin. Formats kategorisindeki HTML seçeneğinin işaretini kaldırın ve OK’e tıklayın. sonra da File menüsünden Save’i seçerek yeni dosyayı sabit diskinizdeki TechBookstore klasörüne reviews. fla adıyla kaydedin.

[B]2.Stage’e List bileşeninin bir örneğini sürükleyin. Örneği yeniden boyutlandırın ve Properties denetçisini kullanarak örneğin konum değerlerini değiştirin.[/B]

List bileşeni, büyük ölçüde HTML’’deki listeler gibi kullanılır: Kullanıcıların etkileşime gireceği etiketleri görüntüler ve genelde her etiketle bir tür veri ilişkilendirilir. List bileşeni, kullanıcılara çoklu seçim yapma imkânı sunar (eğer siz onlara böyle bir seçenek sunmak istiyorsanız).

Components panelini açın ve List bileşeninin bir örneğini Stage’e sürükleyin. Stage’deki List bileşeni seçili durumdayken Properties denetçisini açın ve bileşenin genişlik değerini 200 piksel ve yükseklik değerini de 325 piksel yapın. x ve y koordinatlarını 10 yaparak, bileşenin konumunu belgenin sol üst köşesine gelecek şekilde ayarlayın. Bileşen örneğini reviews_ls olarak adlandırın.


List bileşenini, kitaplarla ilgili incelemeleri listelemek için kullanacak ve kullanıcılara okumak istedikleri incelemeye geçme imkânını sunacaksınız.

[B]3.İki inceleme dosyasını sabit diskinize kopyalayın. Properties denetçisini kullanarak List bileşenini yapılandırın. Values iletişim kutusunu kullanarak, List bileşenine iki incelemeye ait veri (data) ve etiket (label) değerlerini ekleyin.[/B]

İncelemeleri düzenli bir şekilde tutmak için, sabit diskinizdeki TechBookstore klasörünün içinde reviews adıyla yeni bir klasör oluşturun. CD-ROM’da ’ lesson09 klasöründe yer alan iki örnek incelemeyi bu klasöre kaydedin. Bunlar sırasıyla 0321219198.txt ve 0321213408.txt olarak adlandırılmıştır ve bu adlandırma işleminde kitapların ISBN numaraları temel alınmıştır. Bir veritabanı aramasında, kitap ismi yerine ISBN numarasına göre arama yapan bir script oluşturabilirsiniz, çünkü nk her ISBN numarası tek bir kitaba aittir, ama birden fazla kitap aynı isme sahip olabilir. Bu metin dosyalarından SWF dosyanıza bilgi yüklemek için LoadVars sınıfını kullanacaksınız.

[B]İpucu:[/B] İncelemeleri bu iş için ayrılmış bir klasöre yerleştirmek istersiniz, çünkü düzinelerce incelemeyi kök klasöre atmanızın sonucu karmaşa ve bu yüzden klasörün içinde gezinmenin işkence haline gelmesi olabilir. Bu incelemelerin hepsi basit birer metin dosyasıdır. İsterseniz başka incelemeler de oluşturabilir ve bunları reviews klasörüne ekleyebilirsiniz. Kendi incelemelerinizi, yukarıda bahsettiğimiz metin dosyalarından birini açıp basit HTML biçimlendirme ayarlarını kopyalayarak da ekleyebilirsiniz. Flash uygulamalarının dâhil olduğu her başarılı girişimin anahtarı organizasyondur.

List bileşenini birkaç farklı yolla doldurabilirsiniz. Belki de bunların en basiti, Properties denetçisini ya da Component denetçisi panelini kullanarak bilgileri bileşene elle girmektir. Önceki derste anketi oluştururken bunun nasıl yapıldığını görmüştünüz. Her ne kadar o uygulamada bir ComboBox bileşenini doldurmuş olsanız da, List bileşeninin doldurulması da aslında her bakımdan aynıdır.

Properties denetçisinde Parameters sekmesine geçin, data satırını seçin, sonra da satırın en sağındaki büyüteç simgesine tıklayarak Values (Değerler) iletişim kutusunu açın.


Artı (+) sembolüne iki kez tıklayarak iki değer ekleyin. İncelemeleri düzenli bir şekilde tutmak için, dosyaları kitapların ISBN numarasına göre adlandırmaya karar verdik. Bu yöntemi kullandığınız takdirde, daha ilerideki bir tarihte belirli bir kitabı bulmanız gerektiğinde, kitabı metin dosyalarına bakarak aramak yerine ISBN numarasını aramanız yeterli olacaktır. İlk değerde, değeri reviews0321213408.txt olarak değiştirin. Dizin isminin dosyaya eklendiğine dikkat edin; böylece Flash, dosyanın SWF dosyasıyla aynı dizinde olmadığını anlayacaktır. İkinci değere tıklayın ve reviews/0321219198.txt yazın. OK düğmesine tıklayarak iletişim kutusunu kapatın ve Properties denetçisine geri dönün.


labels satırına tıklayın ve satırın en sağındaki büyüteç simgesine tıklayarak Values iletişim kutusunu tekrar açın. Burada List bileşeninin label (etiket)parametrelerini tanımlayacaksınız. data parametreleri için yaptığınız gibi, artı sembolüne iki kez tıklayarak iki değer ekleyin.

Üstteki varsayılan değeri Fireworks: TFS (kitabın ismi) olarak değiştirin. İkinci değeri ise Dreamweaver: TFS olarak değiştirin. data ve label parametrelerini ayarlarken, değerleri aynı sırayla girmeye özen gösterin. Bunu yapmadığınız takdirde, kullanıcı bir kitabın ismine tıkladığında karşısına tamamen farklı bir kitapla ilgili incelemeler gelir. Bu işlemleri tamamladıktan sonra, OK’e t’ ıklayarak Values iletişim kutusunu kapatın.

[B]4.Stage’e bir TextArea bileşeni ekleyin ve Properties denetçisini kullanarak bu bileşenin konumunu ayarlayın.[/B]

TextArea bileşeninin bir örneğini Stage’e sürükleyin ve bunun sol üst köşesini List bileşeninin sağ üst köşesinin yakınına gelecek şekilde hizalayın. Stage’de TextArea bile hâlâ seçili durumdayken, Properties denetçisinde genişliği 490piksel, yüksekliği de 325 piksel olarak değiştirin ve bu örneğe review_txt örnek ismini verin. TextArea bileşeninin x koordinatını 220 piksel, y koordinatını da 10 piksel olarak ayarlayın. Properties denetçisinde ya da Component denetçisi panelinde, editable özelliğini false olarak ayarlayarak, kullanıcıların incelemenin metnini değiştirmesini engelleyin. html özelliğini de true olarak ayarlayın. Böylece metni gömülü HTML etiketleriyle kullanabilirsiniz.


[B]5.Timeline’a yeni bir katman ekleyin ve ismini actions olarak değiştirin. Seçilen kitaba ait incelemeyi yükleyecek bir fonksiyon yazın.[/B]

Timeline’a yeni bir katman ekleyin ve bunun ismini actions olarak değiştirin. Actions panelini maksimum boya getirin. Script Assist modu açıksa, Script Assist düğmesine tıklayarak kapatın ve vurgusunun kaldırılmasını sağlayın. actions katmanının 1 numaralı karesini seçin, sonra da Actions panelindeki Script bölmesine aşağıdaki fonksiyonu ekleyin.

function loadReview(evt) {
var review_lv:LoadVars = new LoadVars();
review_lv.load(evt.target.selectedItem.data);
review_lv.onLoad = function(success:Boolean){
if (success)
{
review_txt.text = this.content;
}
else
{
trace(“unable to load text file.”);
}
};
}

Burada, function anahtar sözcüğünü ve ardından function için kul anılmasını istediğiniz ismi kul anarak kendi yeniden kul anılabilir fonksiyonunuzu oluşturuyorsunuz. Fonksiyonun ismini (bu örnekte loadReview) tanımladıktan sonra, parantez içinde tekrar kul anılabilir fonksiyonunuzun alacağı parametreleri tanımlıyorsunuz. Bu fonksiyon, evt isimli tek bir parametre alır. { ve } kıvrı ımlı parantezlerinin arasındaki her şey, fonksiyonun gövde kısmı olarak değerlendirilir. Bu satırlar, fonksiyon çağrıldığında çalıştırılacak olan talimatlardır.

Bu fonksiyon un yaptığı ilk şey, bel ekte bir LoadVars nesnesi oluşturmak ve buna review_lv ismini vermektir. Kodun bir sonraki satırı, Flash’taki yerleşik bir fonksiyona dair bir diğer örnektir. load fonksiyonu tek bir parametre alır (yüklenecek olan dosyanın URL’i). Burada değer, reviews_ ls isimli List örneğinde seçili durumda bulunan öğenin data alanından alınmaktadır. Bir sonraki uygulamada da göreceğiniz gibi, evt.target’in değeri, reviews_ls örneğine giden yoldur.

[B]İpucu:[/B] Bir bileşene, düğmeye ya da movie clip’e her tıkladığınızda ya da bu nesnelerle her etkileşime girdiğinizde, etkileşime girdiğiniz nesne bir olay yayınlar. Bu, birisi donmuş bir hindiyi ayağınıza düşürdüğünde bağırmanıza benzetilebilir. Flash, bu olayı kimin yayınladığını içeren bu bilgiyi yakalar ve target ile type özelliklerine sahip bir nesnede saklar. type, yani tip, olaydır(event). target yani hedef de, yayıncıya giden yoldur. Deminki örneğe dönecek olursak; ayağınıza donmuş bir hindi düştüğünde evt.target mutfak.jim olacaktır. Burada type olarak acıylaBağırmak kullanılabilir. Bu bilgileri saklayan nesne de kızKardeşim olabilir (yani buradaki örnekte ayağımın nasıl kırıldığını soranlara bilgi veren kişi).

review_lv.onLoad, farklı bir fonksiyon tipine örnek teşkil ediyor. onLoad fonksiyonu, aslında dosyanın tamamı Flash tarafından yüklendiğinde tetiklenen bir olaydır. Olay tetiklendiğinde Flash, review_lv.onLoad kodundan sonra yazılan fonksiyonu çalıştırır. Bu fonksiyon, yerel fonksiyon (inline function) ya da anonim fonksiyon olarak bilinir, çünkü nk bir fonksiyon ismine sahip değildir ve ancak onLoad olayı tetiklendiği zaman tetiklenebilir.

Yerel fonksiyon success isimli tek bir nitelik alır. Bu nitelik, dosyanın başarıyla yüklenip yüklenmediğini belirtir. success niteliğinin değeri true ise, dosya yüklenmiş demektir. Bu nedenle Flash, review_txt TextArea bileşenindeki text özel iğini, LoadVars belgesindeki content değişkeninin değerine ayarlar. Ama success niteliğinin değeri false ise, dosya yüklenememiş demektir. Bu durumda Output panelinde bir mesaj görürsünüz. Bu örnek kodda sadece birkaç satırla tanımlanan birkaç farklı fonksiyon yer alıyor. Ancak LoadVars, XML, Web Servisleri ya da Flash Remoting özel iğini kul anarak uygulama geliştirirken, metotların ve olayların nasıl çalıştığını anlamak şarttır.

[B]6.Actions panel araç çubuğundaki Check Syntax düğmesine tıklayın ve ActionScript kodunuzun sözdiziminin herhangi bir hata verip vermediğini kontrol edin. Dosyada yapmış olduğunuz değişiklikleri kaydedin.[/B]

Yeni yazdığınız kodda herhangi bir sözdizimi hatası olup olmadığını kontrol etmek için, Actions panelindeki Check Syntax (Sözdizimini Kontrol Et) düğmesine tıklayın.


Her şey düzgün çalışıyorsa, FLA dosyasında yapmış olduğunuz değişiklikleri File menüsünden Save’i seçerek kaydedin. Bir sonraki uygulamada bu dosya üzerinde çalışmaya devam edeceksiniz.

Önceki uygulamada Flash’taki bir olaya (event) kısaca göz attık. Olaylar, Flash’ ta bir şey olduğunda yükselen bayraklar gibidir. Olay, bir SWF dosyasında çalışma zamanında gerçekleşen bir eylemdir. SWF dosyası oynatılırken; bir movie clip ya da bir XML dosyası yüklendiğinde, bir düğmeye tıklandığında, v.b., olaylar gerçekleşir. Olay işleyiciler (event handler) ve izleyiciler (listener), bu olayların yönetilmesine yardımcı olan eylemlerdir. Daha önce LoadVars sınıfıyla çalışırken olaylara ait birkaç örmek görmüştünüz. Dosya Flash tarafı ndan yüklendiğinde, Flash’ ta onLoad olayı gerçekleşir ve bu olay için tanımlanmış fonksiyonlar çalıştırılır. Bir düğmeye tıklandığında (olay), SWF dosyasının belirli bir kareye gidip onu oynatması bununla ilgili basit bir örnektir.


Örneğin bir dosya başarıyla y üklendiğinde ya da yükleme işlemi başarısız olduğunda, LoadVars nesnesi onLoad olayını tetikleyerek Flash’a işlemin tamamlandığını söyler. Bu gereklidir, çünkü Flash SWF dosyası dosyasını durdurup işlemin tamamlandığını söyler. Bu gereklidir, çünkü nk Flash SWF dosyasını durdurup işlemin tamamlanmasını beklemek yerine, kodu işlemeye devam eder. Bu, asenkron iletişim olarak bilinir. Önceki uygulamada, SWF dosyasından bir metin dosyasının içeriğini yüklemesini istemiştiniz. SWF dosyası bir sonuç aldığında, ya metni TextArea bileşeninde gösterir, ya da Output panelinde bir hata görüntüler (test ortamındaysanız). FLA dosyasını yayınladığınızda trace deyimleri kul anıcıya gönderilmediği için, kul anıcılar SWF dosyanızdaki trace deyimlerinin içeriğini göremez.

Flash’ta pek çok öğe için kul anılabilen her türden olay mevcuttur. Örneğin Flash’ı kul anarak bir MP3 dosyasını çalışma zamanında yüklüyorsanız, üç farklı olay gerçekleşebilir: ID3 verileri (MP3 dosyası hakkındaki bilgiler) kul anılabilir hale geldiğinde onID3 tetiklenir, MP3 dosyasının yüklenmesi tamamlandığında onLoad tetiklenir ve MP3 dosyasının çalınması bittiğinde onSoundComplete tetiklenir. Bir olay tetiklendiğinde, Flash bu üç olay için olay işleyicide tanımlanmış fonksiyonları çalıştırır. Aşağıdaki kodda bununla ilgili bir örnek görüyorsunuz.

var intro_sound: Sound = new Sound();
intro_sound.loadSound(“Tool - disgustipated.mp3”, true);
intro_sound.onID3 = function(success:Boolean) {
trace(success);
};
intro_sound.onSoundComplete = function() {
trace(“sound has completed”);
};

Bu script, önce Sound nesnesinin yeni bir örneğini tanımlar ve yerleşik loadSound metodunu kullanarak Sound nesne örneğine bir MP3 dosyasını yükler. MP3 dosya isminden sonra yazılan true, SWF dosyasına (oynatmaya başlamadan önce bütün dosyanın yüklenmesini beklemek yerine) MP3formatındaki şarkının akmasını istediğinizi bildirir. Daha sonra onID3 olayına ve onSoundComplete olayına ait olay işleyicileri oluşturursunuz. Bu olaylar gerçekleştiği için, SWF dosyası olay işleyicide tanımlanan her fonksiyonu otomatik olarak çalıştırır. Olay işleyiciler, ilgili olay gerçekleştiğinde çalıştırılan talimatlardır. Yani SWF dosyasında herhangi bir ID3 bilgisi varsa, onID3 olayı tetiklenir, fonksiyon çalıştırılır ve SWF dosyası success niteliğinin değerini kontrol eder. trace, sesin SWF dosyasına başarıyla yüklenip yüklenmediğini size bildirir.

MP3 formatındaki ses çalınıp bittikten sonra, onSoundComplete olayı tetiklenir ve SWF dosyası test ortamında Output panelinde bir mesaj görüntüler. Geçerli MP3 çalınıp bittikten sonra yeni bir MP3 yüklemek istediğinizde, onSoundComplete fonksiyonu çok işinize yarayabilir.

Bu derste, arabirimlerde bileşenleri kullanırken, izleyicileri sık sık kullanacaksınız. İzleyiciler (listener) Flash’ta sıkça kullanılan ve bir olayı yayınlayan belirli bir öğeyi temel alarak bir işlem gerçekleştiren nesnelerdir. İzleyiciler, olay işleyicilere çok benzer, çünkü ikisi de bir SWF dosyasında olayların meydana gelmesini bekler ve olay meydana geldiğinde de bir eylemi gerçekleştirirler. İzleyicilerle olay işleyicileri arasında iki önemli fark vardır: İzleyiciler, izleyici nesneler tarafından yakalanır. İzleyici nesneler, bir yayıncı nesne izleyiciye belirli bir olayı gönderdiğinde çalıştırılan talimatlar içeren nesnelerdir. Bu da beraberinde diğer farkı getirir, yani ActionScript kullanarak bir yayıncı nesneyi (düğme gibi) ve bir izleyici nesneyi ilişkilendirme zorunluluğunu. Burada aslında yayıncıya, bir şey olduğunda bu durumdan izleyicinizi haberdar etmesini söylersiniz. Daha sonra izleyici talimatları çalıştırır. Bileşenlerle çalışırken bunun için addEventListener metodunu kullanırsınız ve yayınlanacak olayı ve olayı işleyecek izleyici nesneyi belirtirsiniz. Aşağıdaki kodda, izleyicilere dair bir örnek görüyorsunuz.

var listenerObject:Object = new Object();
listenerObject.click = function(evt) {
trace(“you clicked the button.”);
};
myButtonComponentInstance_btn.addEventListener(“cl ick”, listenerObject);

Burada, önce olayları alacak bir nesne oluşturuyorsunuz. Sonra da, olayı işleyen bir fonksiyon tanımlıyor ve isteğe bağlı olarak bunu bir bağımsız değişken (argument) olarak evt nesnesine atıyorsunuz. Flash, fonksiyonun yakaladığı olayın ismini, fonksiyonun bir özelliği olarak kullanır. Bunu yaparak, tek nesnenin birkaç farklı olayı yakalamasını sağlayabilirsiniz.

Son olarak, Stage’deki myButtonComponentInstance_btn örnek ismine sahip bir düğmeye olay izleyiciyi (event listener) ekliyorsunuz. Sonra da, SWF dosyasına hangi olayı izlediğinizi söylüyorsunuz (bu uygulamada izlenen olay, kullanıcı düğmeye basıp bıraktığında tetiklenen click olayıdır) ve listenerObject’i bir parametre olarak aktarıyorsunuz.

LoadVars sınıfıfnda iki olay vardır: onData ve onLoad. onData olayı, sunucudan bir sonuç döndürüldüğünde, ama sonuçlar Flash tarafından çözümlenmeden önce tetiklenir; onLoad olayı ise, LoadVars sınıfıfnın load ya da sendAndLoad metodunu çağırdığınız takdirde tetiklenir; ama bu olay, sonuçlar Flash tarafı farklı durumda faydalıdır ve aldıkları parametreler de farklıdır.

[B]Not:[/B] Şunu unutmamanız çok önemli: Kodunuzda onData olayını kul anıyorsanız, onLoad olayı, kendisini kodunuzdan özel olarak çağırmadığınız takdirde tetiklenmez.

Aşağıdaki uygulamada, kul anıcı List bileşeninin değerini değiştirdiğinde tetiklenen bir olayın işlenmesini göreceksiniz. Bu örnekte de reviews.fla dosyasını kul anacaksınız.

[B]1.ActionScript’i kullanarak List bileşeninin bir örneğine bir olay izleyicisi ekletin.[/B]

actions katmanının 1 numaralı karesini seçin ve Actions panelini açın. Script bölmesinde bulunan fonksiyonun altına aşağıdaki kodu ekleyin:

reviews_ls.addEventListener(“change”, loadReview);


Bu kod reviews_ls List bileşen örneğinize, kullanıcı yeni bir kitap ismine tıkladığında tetiklenen bir olay izleyici (event listener) ekler. addEventListener metodu iki parametre alır: İzlenen olay (bu örnekte change) ve olay gerçekleştiğinde tetiklenecek fonksiyon (bu örnekte, önceki uygulamada tanımladığınız loadReview fonksiyonu). addEventListener metodu için, olayın işlenmesinde kullanılan bir fonksiyon içeren bir nesneyi belirtmenize imkân sağlayan bir seçenek daha vardır.

[B]2.Belgenin doğru bir şekilde çalışıp çalışmadığını görmek için, Control menüsünden Test Movie’yi seçerek belgeyi test edin. Sonra da belgeyi kaydedin ve yayınlayın.[/B]

Control menüsünden Test Movie’yi seçerek belgeyi test edin. Stage’in sol tarafı reviews_ls bileşeninde bir kitap ismine her tıkladığınızda, Flash loadReview fonksiyonunu çağırır. Bu fonksiyon da bu kitapla ilgili yorumu TextArea örneğine yükler. Ayrıca şuna da dikkat edin: Harici metin dosyalarının içerikleri TextArea örneğinde görüntülendiğinde, <b> (kalın), <i> (italik) ve <img> (resim) etiketleri gibi HTML biçimlendirmeleri içeren harici dosyalar metnin görünüşünü etkiler. TextArea bileşeni, etiketler de dâhil olmak üzere asıl HTML kaynak kodunu görüntülüyorsa, Component denetçisi panelinde html parametresinin true olarak ayarlanmış olup olmadığını kontrol edin. Metin dosyalarının içeriklerine bakarsanız, bu uygulamaya ait resimlerin amazon.com sunucularından yüklendiğini görürsünüz. Kendi projelerinizi hazırlarken, resimleri amazon.com’daki sunuculardan yüklemek yerine, kendi sunucunuzdan yerel olarak yüklemek istersiniz. Resim dosyalarını yerel olarak kaydedebilir ve yüklediğiniz metin dosyalarındaki URL’i değiştirebilirsiniz.


Geliştirme ortamına geri dönün ve reviews.fla dosyasında yaptığınız değişiklikleri kaydedin. SWF dosyasını oluşturmak için File menüsünden Publish’i seçerek FLA dosyasını yayınlayın. Daha sonraki derslerden birinde, bu dosyayı ana Tech Bookstore SWF dosyasına yükleyeceksiniz.

Dosya TechBookstore klasöründe oluşturulur. Daha fazla yorum eklemek isterseniz, mevcut bir yorumdaki metni kopyalayabilir ve bunun üzerinde gereken değişiklikleri yapabilirsiniz. Gereken düzenlemeleri yaptıktan sonra, yeni dosyayı reviews klasörüne kaydedin. Ayrıca, önceki uygulamanın üçüncü adımında yapığınız gibi, Properties denetçisinde List bileşeninin data ve labels parametrelerini değiştirmenizin ve yeni değerler eklemenizin gerektiğini de unutmayın .

CSS (Cascading Style Sheets), bir HTML sayfasındaki metinlere ve diğer öğelere uygulanabilecek stiller tanımlamak için kullanılan bir metottur. CSS belgeleri, bir metin bloğunun hangi fontları kullanmasının gerektiğini, resimler ya da tablo hücreleri gibi belirli öğelerin etrafında ne tür boşlukların bırakılması gerektiğini ya da belirli öğelerde hangi renklerin kullanılacağını tanımlayan kurallar içerir. Bir CSS stil sayfasını kullandığınızda, sitenizdeki her sayfaya tek kural kümesini uygulayabilirsiniz. Ayrıca bu kuralları değiştirdiğiniz takdirde, sitedeki stillerin tutarlılığı da muhafaza edilir ve değişiklikleri stil sayfasını uyguladığınız her sayfada anında görebilirsiniz. Flash, bir SWF dosyasındaki HTML biçimlendirmesi uygulanmış dinamik metinlerin ya da girdi metinlerinin biçimlendirilmesinde orijinal CSS1 spesifikasyonunun kullanılmasını destekler.

[B]Not:[/B] CSS’in farklı sürümleri vardır. CSS2, biçimlendirme için ilave özellikler sunar, ama Flash CSS2 sürümünü desteklemez. CSS1 spesifikasyonu için http://www.w3.org/TR/REC-CSS1 adresine başvurabilirsiniz.

Flash, CSS1’in özelliklerinin sadece bir alt kümesini desteklese de, HTML etiketleri içeren metin bloklarını kolayca biçimlendirmenize imkân sağladığından ve bunların sitenin geri kalan kısmıyla tutarlı görünmesini sağladığından, bu mükemmel bir özelliktir. Flash belgelerine stil sayfaları eklemenin iki yolu vardır: Stil sayfasını çalışma zamanında yüklemek ve stil sayfalarını ActionScript kullanarak tanımlamak. Tech Bookstore uygulaması boyunca birkaç farklı SWF dosyasında aynı stilleri kullanacağınız içi, harici bir CSS stil sayfası kullanmanız ve bunu SWF dosyalarının her birine yüklemeniz daha kolaydır. Aynı stil sayfasını, oluşturacağınız HTML sayfalarında da kullanarak (sayfanın SWF dosyası içermesinden ya da sadece HTML kodu olmasından bağımsız olarak), sitenizin tutarlılığını muhafaza edebilirsiniz.

[B]1.Önceki uygulamalarda kullandığınız reviews.fla belgesini tekrar açın ve form katmanını kilitleyin.[/B]

Önceki uygulamalarda üzerinde çalıştığınız reviews.fla belgesini açın ve form katmanını kilitleyin. actions katmanının 1 numaralı karesini seçin. Bir sonraki adımda buraya ActionScript kodu ekleyeceksiniz. Üçüncü adımda, metni biçimlendiren harici stil sayfasını oluşturacaksınız.

[B]2.reviews.fla dosyasına, çalışma zamanında reviews.swf dosyasına bir CSS dosyasını yükleyecek olan ActionScript kodunu ekleyin.[/B]

Actions katmanının 1 numaralı karesinde bulunan kodun üstüne aşağıdaki kodu ekleyin.

var flash_css = new TextField.StyleSheet();
flash_css.load(“styles.css”);
flash_css.onLoad = function(success:Boolean) {
if (success) {
review_txt.styleSheet = flash_css;
} else {
trace(“Error loading CSS file.”);
}
};

Bu kod, LoadVars nesnesini kullandığınız uygulamalardakine benzemektedir. Burada önce yeni stil sayfasını içerecek flash_css isimli yeni bir Timeline değişkeni oluşturuyor, sonra da styles. css isimli harici bir CS dosyasını yüklüyorsunuz. styles.css dosyasını henüz oluşturmadınız. Dolayısıyla, bu dosyayı şimdi kaydedip test ederseniz, “Output penceresinde “Error loading CSS File” (CSS dosyası yükleme hatası) mesajını görürsünüz. Sonraki kod bloğu, Flash bir onLoad olayı aldığında tetiklenir ve stil sayfasının başarıyla yüklenip yüklenmediğini belirten tek bir parametre (success) alır. Stil sayfası yüklenirse, kod stil sayfasını review_txt TextArea örneğine atar. Stil sayfası başarıyla yüklenemezse, Output paneline bu durumu bildiren bir hata mesajı gönderilir.

Şimdi Ctrl+Enter (ya da Mac’te Cmd+Return) tuşlarına basarak SWF dosyasını test ederseniz, Flash Output panelinde SWF dosyasının CSS dosyasını bulamadığını belirten bir hata mesajı görüntüleyecektir. Bunun nedeni, stil sayfasının henüz TechBookstore dizininde yer almamasıdır.


[B]3.Metin stillerini tanımlamak için, styles.css isimli bir CSS dosyası oluşturun. Dosyayı TechBookstore klasörüne kaydedin.[/B]

Bilgisayarınızda bir metin editörünü ya da CSS’i destekleyen Dreamweaver gibi herhangi bir editörü açın. PC kullanıyorsanız, muhtemelen Not Defteri(Notepad) bilgisayarınızda kurulu durumdadır. Mac kullanıyorsanız, TextEdit’in kurulu olması gerekir. Aşağıdaki kodu girin ve dosyayı styles.css adıyla kaydedin.

p {
font-family: Arial,Helvetica,sans-serif;
font-size: 11px;
color: #000000;
}
.headline {
font-family: Arial,Helvetica,sans-serif;
font-size: 24px;
color: #999999;
}

Bu stil sayfası iki stil tanımlamaktadır. Bu stillerden biri <p> etiketine uygulanır. Diğeri ise, her bir incelemede kitabın ismine uygulayacağınız headline isimli özel bir stildir. headline stili, metnin rengini gri, boyunu da 24 piksel olarak ayarlar. Böylece başlık kısmının inceleme kısmından ayırt edilmesi kolaylaşır. Dosyayı sabit diskinizdeki TechBookstore klasörüne kaydedin ve metin editörünü kapatın.

[B]4.reviews.fla belgesini tekrar test edin. Her şey düzgün çalışıyorsa, belgeyi kaydedin ve FLA dosyasını yayınlayarak güncellenmiş bir SWF dosyası oluşturun.[/B]

Ctrl+Enter (ya da Mac’te Cmd+Return) tuşlarına basarak Flash belgesini test edin. Şimdi bir kitabın ismine tıkladığınız takdirde, Flash kitapla ilgili yorumları yükleyecek ve stil sayfasını TextArea’ya uygulayacaktır. Dosyayı kaydedin ve Flash belgesini tekrar yayınlayarak TechBookstore klasöründeki SWF dosyasını güncelleyin.

Bu bölümde, bir sonraki uygulamada oluşturacağınız catalog.fla dosyasına aktarılacak iki yeni katalog sayfasını hazırlayacaksınız. Katalog sayfaları, Tech Bookstore’da satılan kitapların her birine ait bilgileri içeren son derece basit sayfalardır. Katalogda şu anda sadece birkaç kitabı tanıtacaksınız, ama isterseniz çok daha fazla kitabı da tanıtabilirsiniz.

Her katalog sayfasında başka sayfaları açan iki düğme yer alacaktır: İçindekiler kısmını açan bir düğme ve örnek bir bölüm açan başka bir düğme. Bu düğmeleri daha önce movie clip’leri kullanarak oluşturmuştunuz. Katalog sayfaları, ayrıca kitap kapağının bir resmini ve kitabın içeriğinin kısa bir açıklamasını da içerir. Katalog sayfalarının istediğiniz gibi görünmesini sağlamak için, bunlara istediğiniz grafikleri ekleyebilirsiniz.

[B]1.TechBookstore klasöründe catalog isimli yeni bir klasör oluşturun. bookstor 12.fla dosyasını açın ve dosyanın yeni bir versiyonunu bookstore13.fla ismiyle kaydedin.[/B]

Önce sabit diskinizdeki TechBookstore klasörünün içinde catalog isimli yeni bir klasör oluşturun. Bu uygulamada oluşturacağınız ve daha sonra ana Tech Bookstore uygulamasına yüklenecek olan yeni FLA ve SWF dosyalarını buraya kaydedeceksiniz.

[B]2.catalog01.fla isimli yeni bir belge oluşturun ve bu belgeyi TechBookstore klasöründeki catalog klasörüne kaydedin. Publish Settings iletişim kutusunu açın ve Formats sekmesinin altındaki HTML onay kutusunun işaretini kaldırın. Stage’i yeniden boyutlandırın.[/B]

Belgeyi yayınladığınızda bir HTML sayfasının oluşturulmasına ihtiyacınız olmaz. Burada sadece, belgeyi yayınladığınızda oluşturulan SWF dosyasını kullanmanız gerekir, çünkü neticede bu SWF dosyası başka bir SWF dosyasına yüklenecektir. Bu nedenle, File menüsünden Publish Settings’i seçin, Formats sekmesindeki HTML seçeneğinin işaretini kaldırın, işiniz bittikten sonra OK’e tıklayın. Properties denetçisini kullanarak Stage’in boyutlarını 490 x 325 olarak değiştirin.

[B]3.İki movie clip düğmesini, bookstore13.fla dosyasının kütüphanesinden catalog01.fla dosyasının kütüphanesine sürükleyin.[/B]

Eğer açık değilse catalog01.fla’daki belge kütüphanenizi açın. New Library Panel (Yeni Kütüphane Paneli) düğmesine tıklayın ve yeni paneldeki kütüphane(Library) açılır listesinden bookstore13.fla dosyasını seçin. mcSampleChapter ve mcToc sembollerinin birer örneğini bookstore13.fla’nın kütüphanesinden catalog01.fla’nın kütüphanesine sürükleyin.


[B]4.Table of Contents (İçindekiler) ve Sample Chapter (Örnek Bölüm) düğmelerini Tech Bookstore kütüphanesinden silin ve FLA dosyasını kapatın.[/B]

mcSampleChapter ve mcToc sembolleri catalog01.fla belgesindeyken, her birini seçip bookstore13.fla dosyasının kütüphanesinin alt kısmındaki çöp kutusu simgesinin üzerine sürükleyerek bu sembolleri bu kütüphaneden silebilirsiniz.

[B]İpucu:[/B] FLA dosyasının boyunu minimum seviyede tutabilmek için, FLA dosyasında kullanılmayan sembolleri silme alışkanlığını edinmeniz iyi olacaktır. Sembollerin silinmesi yayınlanan SWF dosyasının boyunu etkilemez, çünkü siz Flash belgesini yayınladığınızda, kullanılmayan semboller SWF dosyasına dâhil edilmez. Fakat bu, bileşenler için doğru değildir. Bileşenler, siz özel olarak kullanılmayan bileşenleri kütüphaneden silmedikçe SWF dosyası ile birlikte yayınlanır.

[B]5.catalog01.png ve catalog02.png dosyalarını sabit diskinize kopyalayın.[/B]

[B]6.Layer 1 katmanının ismini pages olarak değiştirin ve Loader bileşeninin bir örneğini katmanın üzerine sürükleyin. contentPath parametresini catalog0 .png olarak değiştirin. pages katmanının üzerine yeni bir katman ekleyin ve bu yeni katmanı buttons olarak adlandırın. buttons katmanını seçin ve iki düğmeyi Stage’e sürükleyin. static text isimli bir katman ekleyin. Text aracını kullanarak Stage’de yeni bir statik metin alanı oluşturun, sonra da Stage’deki bütün öğelerin yerleşim düzenini ayarlayın.[/B]

Önce Layer 1 katmanını ismini pages olarak değiştirin. Components panelini maksimum boya getirin ve Loader bileşeninin bir örneğini Stage’e sürükleyin. Örneği, aşağıda verilen şekildekine benzer biçimde Stage’in sol üst kenarına yakın bir noktaya yerleştirin ve genişlik değerini 120, yükseklik değerini de 150 olarak ayarlayın. contentPath parametresini catalog01. png olarak ve autoScale özelliğini de false olarak ayarlayın.

[B]İpucu: [/B]Loader bileşeninden uzakta bir yere tıkladığınızda bileşen ortadan kaybolmuş gibi görünür. Seçimi kaldırıldığında onun bulunduğu konumu görmek için Layers panelinde View Outlines seçeneğini etkinleştirin.

Pages katmanının üzerinde yeni bir katman oluşturun ve bu yeni katmanın ismini buttons olarak değiştirin. Buttons katmanı seçili durumdayken, iki movie clip düğmesi örneğini kütüphaneden Stage’e sürükleyin. İki movie clip düğmesini Stage’de Loader bileşen örneğinin altına yerleştirin. İkinci movie clip düğmesini ilk düğmenin altına yerleştirin.


Son olarak, Tools panelindeki Text aracına tıklayın ve Properties denetçisini açın. Metin tipini Static, fontunu Arial 10 pt, rengini de siyah olarak ayarlayın. Font render yöntemi olarak Anti- alias for readability’yi seçin. Static text katmanını seçin ve Stage’e t’ ıklayıp imleci sürükleyerek, bu alan için uygun genişlikte bir metin alanı oluşturun. Bu alana metin girdiğinizde, dikey olarak ek satırlar oluşturulacaktır. Oluşturduğunuz statik metin alanına bir şeyler yazın (ne yazdığınız önemli değil). Göstermelik metin olarak lorem ipsum metnini kullanabilir, tamamlanmış catalog01.fla dosyasını açıp tamamlanmış FLA dosyasında bulacağınız metni kullanabilir ya da İnternet’ten kitabın gerçek incelemesini bulabilirsiniz.


[B]7.İki movie clip düğmesine yeni örnek isimleri verin. Sonra actions isimli yeni bir katman ekleyin ve iki düğmenin çalışmasını sağlayacak fonksiyonları ekleyin.[/B]

Selection aracını kullanarak Stage’in üst kısmındaki düğmelerin her birine tıklayın ve bunlara örnek isimleri verin. table of contents (içindekiler) düğmesi için toc_mc örnek ismini girin. Sonra da sample chapter (örnek bölüm) düğmesi için samplechapter_mc örnek ismini girin. FLA dosyasında en üstteki katmanı seçin ve yeni bir katman ekleyin. Yeni katmana actions ismini verin. Actions panelini maksimum boya getirin ve Script bölmesine aşağıdaki ActionScript kodunu girin.

stop();
samplechapter_mc.onRelease = function() {

getURL(“http://www.trainingfromthesource.com...er.html”, “_
blank”);
}
toc_mc.onRelease = function() {
gotoAndStop(“toc”);
}


Bu ActionScript kodu oynatım kafasını geçerli karede durdurur ve iki fonksiyon tanımlar. Bunların biri oynatım kafasını belirli bir kare etiketine gönderecek, diğeri de bir tarayıcı penceresi açacaktır. Kullanıcı sample chapter düğmesine tıklarsa tarayıcı açılır ve örnek bir bölüm içeren bir sayfaya gider. Kullanıcı table of contents düğmesine tıkladığında ise, oynatım kafası bir sonraki adımda toc olarak etiketlenecek kareye gider.

[B]8.Yeni bir katman ekleyin ve bu yeni katmanın ismini labels olarak değiştirin. Sonra 5 numaralı kareye toc kare etiketini (label), 1 numaralı kareye de home kare etiketini ekleyin. pages ve actions katmanlarında, kare etiketinin altına yeni boş anahtar kareler ekleyin, sonra da actions katmanının 5 numaralı karesine bir stop eylemi ekleyin.[/B]

Yeni bir katman ekleyin ve bunu actions katmanının hemen altına taşıyın. Katmanın ismini labels olarak değiştirin. Timeline’da bu katman ın 5 numaralı karesine sağ tıklayın (ya da Mac’te Control tuşunu basılı tutarak tıklayın), bağlam menüsünden Insert Blank Keyframe’i seçerek boş bir anahtar kare ekleyin ve Properties denetçisini kullanarak bu kareye toc etiketini uygulayın. Katmandaki 1 numaralı kareyi seçin, buna da home kare etiketini ekleyin.

actions katmanındaki 5 numaralı kareye yeni bir anahtar kare eleyin (F6) ve Actions paneline stop(); yazın. Sonra F6 tuşuna basarak, pages katmanındaki 5 numaralı kareye yeni bir anahtar kare ekleyin. 1 numaralı karedeki metin alanı 5 numaralı kareye kopyalanacaktır.

[B]Not:[/B] buttons katmanını 5 numaralı kareye kadar uzatmanız gerekmez, çünkü özel ikle içindekiler sayfasının görüntülenmesi için kul anılan, örnek bölümün açılması pek gerekmeyen bir sayfa hazırlıyorsunuz.


Bu katmana boş bir kare eklemek yerine bir anahtar kare ekleyerek, Stage’deki statik metin alanında bulunan metni değiştirebilir ve metin alanının konumunu koruyabilirsiniz. Bu, aynı zamanda bütün öğeleri tam olarak aynı konumda tutmanıza da imkân sağlar; böylece ziyaretçiler ikinci alana geçtiklerinde öğeler kaymaz. Metin alanlarını değiştirerek, bunun kitabın tanıtımı yerine içindekileri göstermesini sağlayın. Son olarak da, Stage’deki pages katmanının üzerinde bulunan toc anahtar karesine bir back (geri) düğmesi ekleyin. Kendi düğmenizi oluşturabilir, ya da Components panelinde Button bileşeninin bir örneğini pages katmanının üzerine sürükleyebilirsiniz.


Button bileşeninin bir örneğini kullanıyorsanız, label parametresini Back, örnek ismini de back_btn olarak değiştirin. actions katmanının 5 numaralı karesini seçin ve Actions paneline aşağıdaki kodu yazın.

back_btn.onRelease = function() {
gotoAndStop(“home”);


[B]9.catalog01.fla dosyasını test edin, bir sorun yoksa dosyayı kaydedin ve yayınlayın. Sonra da File menüsünden Save As’i seçerek catalog01.fla dosyasının yeni bir versiyonunu kaydedin ve yeni dosyaya catalog02.fla ismini verin. Bu dosyanın catalog klasörüne kaydedildiğinden emin olun. Loader bileşeninin contentPath parametresini catalog02.png olarak değiştirin ve katalogun metin alanlarında değişiklik yapın.[/B]

catalog01.fla dosyasını test ederek belgenin beklediğiniz gibi çalıştığından emin olun. Herhangi bir sorun yoksa dosyayı kaydedin ve File menüsünden Publish’i seçerek yayınlayın. catalog01.fla dosyasının yeni bir versiyonunu catalog02.fla ismiyle kaydettikten sonra, yapmanız gereken sadece FLA dosyasında aşağıda ayrıntıları verilen birkaç küçük değişikliği yapmak ve bu dosyayı tekrar yayınlamaktır.

Herhangi bir dosyayı (örneğin catalog01.fla dosyasını) yerleşim düzenini ve tarzı bozmadan yeniden yapılandırmanın genellikle en hızlı yolu, dosyanın yeni bir kopyasını kaydedip sonra sadece gereken şeyleri değiştirmektir. Bu aslında bir movie clip sembolünü çoğaltmayla aynı prensibe dayanır. Bu yöntemi kullanırsanız, dosyanın tamamını sıfırdan başlayarak yeniden oluşturmak ve öğelerin her birini aynı şekilde yerleştirmekle uğraşmak zorunda kalmazsınız. pages katmanındaki Loader bileşenini seçin ve contentPath parametresini catalog2.png olarak değiştirin. Bunu pages katmanının 5 numaralı anahtar karesinde de yapmanız gerekecek. Son olarak, dilerseniz pages katmanının 5 numaralı karesindeki metni değiştirin.

[B]10.catalog02.swf dosyasını bir tarayıcı penceresinde test edin. Sayfa doğru bir şekilde çalışıyorsa, geliştirme ortamına geri dönün, FLA dosyasını kaydedin ve bunu yayınlayarak catalog klasöründe catalog02.swf dosyasını oluşturun.[/B]

Geliştirme ortamında File menüsünden Publish Preview > Default’u seçerek catalog02.swf dosyasını bir tarayıcı penceresinde test edin. Her şey düzgün görünüyorsa, SWF dosyalarının farklı bölümlerine gidebiliyorsanız ve yeni bir tarayıcı penceresi açabiliyorsanız, dosyayı kaydedin ve yeni catalog02.swf dosyasını oluşturun. Artık catalog klasöründe, bu kitapta daha ileride Tech Bookstore’a aktaracağınız iki SWF dosyanız var.

TechBookstore’un katalog (Catalog) bölümü, daha önceki uygulamalarda oluşturduğunuz incelemeler (Reviews) bölümüne çok benzer. Ana katalog dosyasında, birkaç kitabın isimlerinin yer aldığı bir List bileşeni vardır. Listedeki kitaplardan birine tıkladığınızda, önceki uygulamada oluşturduğunuz katalog sayfaları yüklenerek Stage’in içeriği güncellenir. Katalog ve incelemeler bölümleri arasındaki en önemli fark, katalog sayfasının harici bir SWF dosyasını bir Loader bileşenine yüklemesi, incelemeler bölümünün ise içeriği görüntülemek için LoadVars nesnesini ve TextArea bileşenini kullanmasıdır.

[B]1.Yeni bir Flash belgesi oluşturun ve Stage’in genişliğini 720 piksel, yüksekliğini de 345 piksel olarak ayarlayın. File menüsünden Publish Settings’i seçerek Publish Settings iletişim kutusunu açın ve Formats sekmesinin altındaki HTML onay kutusunun işaretini kaldırın. Sonra da dosyayı catalog.fla ismiyle kaydedin.[/B]

File menüsünden New’u ve sonra Flash Document’ı seçerek yeni bir Flash belgesi oluşturun. Properties denetçisini kullanarak Stage’in boyutlarını 720 x 345 piksel olarak değiştirin. Belgeyi yayınladığınızda bir HTML sayfasının oluşturulmasına ihtiyacınız yok. Sadece belgeyi yayınladığınızda oluşturulan SWF dosyasını kullanmanız gerekiyor. Bu nedenle, File menüsünden Publish Settings’i seçin. Formats sekmesinin altındaki HTML onay kutusunun işaretini kaldırın ve OK düğmesine tıklayın.

Bu işlemleri tamamladıktan sonra FLA dosyasını catalog.fla ismiyle kaydedin.

[B]2.Layer 1 katmanının ismini form olarak değiştirin ve Stage’de form katmanına bir List bileşeni ekleyin. Properties denetçisini kullanarak List örneğinin genişliğini 200, yüksekliğini de 325 piksel olarak ayarlayın ve örneği Stage’in sol üst köşesine taşıyın. List örneğini catalog_ls olarak adlandırın.[/B]

Katalog bölümünde, katalogdaki kitapların isimlerini içeren bir List bileşeni yer alır. Bunlara tıklandığında Stage’deki içerik güncellenir. Layer 2 katmanının ismini form olarak değiştirin. Components panelini açın ve sonra da List bileşeninin bir örneğini Stage’e sürükleyin. Properties denetçisinde List örneğinin x ve y koordinatlarının ikisini de 10 piksel olarak değiştirin. Örneğin genişliğini 200, yüksekliğini de 325 piksel olarak değiştirin ve bunu catalog_ls olarak adlandırın.

[B]3.Values iletişim kutusunu kullanarak List bileşeninin değerlerini ve etiketlerini ayarlayın.[/B]

List bileşeni hâlâ seçili durumdayken, Properties denetçisini ya da Component denetçisi panelini açın ve data satırına tıklayın. data satırının sağındaki büyüteç simgesine tıklayarak Values iletişim kutusunu açın. Add (+) düğmesine iki kez tıklayarak iki yeni değer ekleyin ve üstteki değer için catalog/catalog01.swf, alttaki için de catalog/catalog02.swf yazın. Bu değerlerin ikisinde de catalog/ önekinin bulunduğuna dikkat edin. Bu önek, SWF dosyasını catalog isimli bir alt klasörde aramasını söyler.

OK düğmesine tıklayarak Values iletişim kutusunu kapatın ve Properties denetçisinde labels satırını seçin. Yine büyüteç simgesine tıklayarak Values iletişim kutusunu açın ve List bileşenine ait değerleri girin. İki yeni değer ekleyin; üstteki değeri Flash ActionScript: TFS, alttakini de Dreamweaver: TFS olarak ayarlayın. Değerleri eklerken, verileri her zaman etiketleri eklediğiniz sırayla eklemeye özen gösterin; aksi halde kullanıcı bir kitabın ismine tıkladığında başka bir kitaba ait bilgiler görüntülenir.


[B]4.Stage’e Loader bileşeninin bir örneğini ekleyin, sonra da Properties denetçisini kullanarak bu örneğin konumunu ve boyutlarını değiştirin.[/B]

Components panelini maksimum boya getirin ve Loader bileşeninin bir örneğini Stage’e sürükleyin. Bileşenin genişliğini 490, yüksekliğini de 325 piksel olarak ayarlayın. Sonra da bunu x koordinatı 225 piksel, y koordinatı 10 piksel olacak şekilde yerleştirin. Loader bileşenine catalog_ldr örnek ismini verin. Properties denetçisini ya da Component Inspector panelini kullanarak autoLoad parametresini ve scaleContent parametresini false olarak ayarlayın.


[B]5.Bir actions katmanı oluşturun ve List bileşeninde seçili durumda olan kitaba göre bir katalog SWF dosyasını yükleyecek ActionScript kodunu ekleyin.[/B]

Flash belgesine yeni bir katman ekleyin ve yeni katmanın ismini actions olarak değiştirin. Yeni katmanın Timeline yığınında diğer katmanların üzerinde olduğundan emin olun. actions katmanının 1 numaralı karesini seçin ve Actions paneline aşağıdaki kodu ekleyin.

function loadCatalog(evt) {
catalog_ldr.load(catalog_ls.selectedItem.data);
}
catalog_ls.addEventListener(“change”, loadCatalog);

Bu kod, loadCatalog isimli bir fonksiyonu tanımlar. Bu fonksiyon, seçili öğeye ait data özelliğinin değerini (SWF dosyasının konumu) yükler. Fonksiyon, bu SWF dosyasını Stage’deki Loader bileşen örneğine yükler.

Bu bileşenin örnek ismi catalog_ls’dir. Bu ActionScript kodunun sonuna, kullanıcının katalogdaki List örneğine tıklamasını bekleyen bir izleyici (listener) yerleştirdiniz. Listedeki bir öğeye tıklandığında, loadCatalog fonksiyonu çağrılır. Fonksiyon catalog_ldr’a listede seçili olan öğenin değerini yüklemesini söyler. Bu değer Values iletişim kutusunda tanımlanır ve SWF dosyasına ait yolu içerir.

[B]6.FLA dosyasının doğru bir şekilde çalıştığından emin olmak için onu test edin. Herhangi bir sorun yoksa catalog.fla dosyasında yapmış olduğunuz değişiklikleri kaydedin. Sonra da File menüsünden Publish’i seçerek dosyayı yayınlayın. TechBookstore klasöründe bir SWF dosyası oluşturulacaktır.[/B]

Önceki uygulamada, ana TechBookstore klasörünün içinde catalog isimli bir alt klasör oluşturmuş ve catalog01.swf ve catalog02.swf dosyalarını bu alt klasöre kaydetmiştiniz. Yani bu dosyayı test ettiğinizdeki bu iki SWF dosyasını catalog klasöründen catalog.swf dosyasına yüklemesi gerekir. Dosyalar yüklenmiyorsa, catalog klasörünü açın ve SWF dosyalarının ve klasörün olduklarından ve doğru adlandırıldıklarından emin olun. Ayrıca üçüncü adımda değerleri Values iletişim kutusuna doğru bir şekilde eklediğinizden de emin olun.


Her şey düzgün çalışıyorsa FLA dosyas ını kaydedin, sonra da yayınlayın. TechBookstore klasöründe bir SWF dosyası oluşturulacaktır.

[B]Not:[/B] Çözüm dosyasında PNG resimlerine giden yol, bu dersteki alıştırmalarda ayarladığınız yoldan farklıdır. Yollar (path), çözüm dosyalarının dizin yapısıyla çalışılacak şekilde oluşturulmuştur. Bu nedenle, tamamlanmış dosyalardan birini kopyalayıp kendi TechBookstore klasörünüze yapıştırırken, dizin referanslarını sizin dosya yapınızla eşleşecek şekilde değiştirmeyi unutmayın.

Tech Bookstore’un Haberler (News) sayfasını oluşturmak son derece kolaydır, çünkü nk bu sayfa daha önce oluşturduğunuz İncelemeler (Reviews) sayfasına çok benzer. Haberler sayfası; bir TextArea bileşeni, CSS ile biçimlendirilmiş bir metin ve uzak bir dosyadan metin içeriğinin yüklenmesini sağlayan bir LoadVars deyiminden oluşmaktadır. Bu uygulamada, CD-ROM’da bulunan bazı metin dosyalarını kullanacaksınız.


[B]1.Yeni bir belge oluşturun ve Stage’in genişliğini 635 piksel, yüksekliğini de 345 piksel olarak ayarlayın. Publish Settings iletişim kutusunu açın ve HTML onay kutusunun işaretini kaldırın. OK düğmesine tıklayın, ana belgeye geri dönün ve dosyayı news.fla ismiyle kaydedin.[/B]

Yeni bir Flash belgesi oluşturun ve Properties denetçisini kullanarak Stage’in boyutlarını değiştirin. Stage’in boyutlarını 635 piksel genişlikte ve 345 piksel yükseklikte olacak şekilde ayarlayın.Flash belgesini TechBookstore klasörünün köküne (root) kaydedin ve yeni bölgeyi news.fla olarak adlandırın.

Belgeyi yayınladığınızda bir HTML sayfasının oluşturulmasına ihtiyacınız yoktur. Burada sadece, belgeyi yayınladığınızda oluşturulan SWF dosyasını kullanmanız gerekir. bu nedenle, File menüsünden Publish Settings’i seçin, Formats sekmesindeki HTML seçeneğinin işaretini kaldırın, sonra da OK düğmesine tıklayın.

[B]2.TextArea bileşeninin bir örneğini Stage’e sürükleyin ve örneğin genişliğini 615, yüksekliğinide 325 piksel olarak ayarlayın. TextArea örneğinin Stage’deki konumunu ayarlayın.[/B]

TextArea bileşeninin bir örneğini Components panelinden Stage’e sürükleyin. Properties denetçisini maksimum boya getirin. TextArea bileşeninin genişliğinin 615 piksel, yüksekliğinide 325 piksel olarak değiştirin. Örneğin Stage’deki x ve y koordinatlarını 10 piksel olarak ayarlayın. Bu ayar, bileşene Stage’in her yanında 10 piksel kalınlığında bir çerçeve uygulanmasını sağlayacaktır. TextArea örneğine news_txt ismini verin. Properties denetçisinde editable veya html parametrelerini ayarlamakla uğraşmanıza gerek yoktur. Bu parametreleri, daha ilerideki bir adımda ActionScript kullanarak ayarlayacaksınız.


[B]3.Timeline’daki Layer 1 katmanının ismini form olarak değiştirin ve bir actions katmanı ekleyin.[/B]

Timeline’daki Layer 1 katman ına çift tıklayın ve katmanın ismini form olarak değiştirin. form katmanının üzerine yeni bir katman ekleyin ve buna da actions ismini verin. Bu katmanlara kazara herhangi bir sembol eklenmesini önlemek için bunları kilitleyin. Artık Stage’e başka sembol eklemeyeceğiniz için, katmanları kilitleyebilir ve bu durumda da ActionScript kodları ekleyebilirsiniz.

[B]4.CSS’in SWF dosyasına ithal edilmesini sağlayacak ActionScript kodunu ekleyin.[/B]

Daha önce yaptığınız bir uygulamada stil sayfalarının nasıl ithal edildiğini öğrenmiştiniz. Harici bir stil sayfası kullandığınız takdirde, Flash belgelerinizin her birinde aynı stil sayfasını kullanabilir ve tutarlı bir görünüm elde edebilirsiniz. actions katmanının 1 numaralı karesini seçin ve Actions paneline aşağıdaki kodu ekleyin.

var flash_css = new TextField.StyleSheet();
flash_css.load(“styles.css”);
flash_css.onLoad = function(success:Boolean) {
if (success) {
news_txt.styleSheet = flash_css;
} else {
trace(“Error loading CSS file.”);
}
};

Bu ActionScript kodu, önceki uygulamada gördüğünüz koda çok benzer, ama bir farkla: Burada stil sayfasını review_txt örneğine bağlamak yerine, news_txt örneğine atıyorsunuz.

[B]5.news isimli metin dosyasını yükleyin ve TextArea bileşeninin özelliklerini ayarlayın.[/B]

Actions katmanının 1 numaralı karesindeki stil sayfası kodunun altına, aşağıdaki ActionScript kodunu ekleyin. Bu kod, harici bir metin dosyasının LoadVars nesnesi kullanılarak yüklenmesini sağlar.

var news_lv:LoadVars = new LoadVars();
news_lv.load(“news.txt”);
news_lv.onLoad = function(success:Boolean) {
if (success) {
news_txt.text = this.content;
} else {
trace(“unable to load text file.”);
}
};

Bu ActionScript kodunu da daha önceki uygulamalardan hatırlayacaksınız.

[B]6.TextArea örneğinin html ve editable özelliklerini ActionScript kullanarak ayarlayın.[/B]

html ve editable özel iklerini Properties denetçisini kul anarak ayarlamak yerine ActionScript kullanarak ayarlayacaksınız. Bunu, aşağıdaki kodu mevcut LoadVars kodunun altına yerleştirerek yapabilirsiniz.

news_txt.html = true;
news_txt.editable = false;

Buradaki ilk satır, html özel iğini true olarak ayarlar. Bu da HTML ile biçimlendirilmiş metni TextArea örneğinde (news_txt) görüntüleyebilmenizi sağlar. İkinci özel ik (editable), kul anıcının metinde değişiklik yapmasını ve TextArea bileşenindeki içeriği değiştirmesini önler. editable özel iğini true olarak ayarlasanız (ya da bu satırı hiç yazmasanız) ve kul anıcı alandaki içeriği değiştirse bile siteniz zarar görmez. Değişiklikler sadece kul anıcının bilgisayarında görüntülenir; başka kimse bunları göremez.

[B]7.news.fla dosyasını test edin ve SWF dosyasının doğru bir şekilde çalıştığından emin olun. Herhangi bir sorun yoksa FLA dosyasını kaydedin, sonra da Publish Settings iletişim kutusunu açarak buradaki HTML seçeneğinin işaretini kaldırın. Belgeyi yayınladığınızda TechBookstore klasöründe news.swf dosyası oluşturulacaktır.[/B]

Metnin doğru bir şekilde yüklendiğinden emin olmak için Control >Test Movie komutunu kullanarak SWF dosyasını test edin. Her şeyin düzgün çalıştığından emin olduktan sonra belgeyi kaydedin (birinci adımda dosyayı kaydetmediyseniz belgeyi news.fla olarak adlandırın) ve FLA dosyasını yayınlayın. SWF dosyası ana TechBookstore sitesine yüklenecektir.

Giriş (Home) sayfası da, LoadVars nesnesi kullanılarak Tech Bookstore’a yüklenen biçimlendirilmiş bir metin bloğudur. Metin TextArea bileşeninin bir örneğine yüklenir. Bu bölümde, Tech Bookstore Web sitesinin giriş sayfasına yüklenecek olan SWF dosyasını oluşturacaksınız. Bu uygulamada, daha önceki uygulamalarda oluşturduğunuz varlıklardan bazılarını kullanacaksınız. Varlıkların tekrar kullanılması geliştirme sürecini hızlandırdığı için, burada kullanabileceğiniz en kolay yol, sayfayı sıfırdan başlayıp oluşturmak yerine, Haberler (News)bölümünün bir kopyasını oluşturup, bunun üzerinde gereken değişiklikleri yapmaktır. Bu nedenle, bu uygulamada Haberler sayfasının kopyasını oluşturacak ve bu kopyayı Giriş sayfasına dönüştüreceksiniz.

[B]1.Önceki uygulamada oluşturduğunuz news.fla dosyasını açın. dosyanın yeni bir versiyonunu home.fla adıyla TechBookstore klasörüne kaydedin.[/B]

news.fla dosyasını başlangıç dosyası olarak kullanmak, yeni dosyayı oluştururken uygulamanız gereken pek çok adımı atlamanızı sağlar ve ActionScript kodunu da sıfırdan başlayarak yazmak zorunda kalmazsınız. Yapmanız gereken tek şey, Stage’in ve TextArea bileşeninin boyutlarını değiştirmek, örnek isimlerinde ve ActionScript kodunda biraz değişiklik yapmaktır; bu da size zaman kazandırır.

Önceki derste oluşturduğunuz news.fla dosyasının kopyasını açın. File menüsünden Save As’i seçin. Belgeye home.fla ismini verin, sonra da Save düğmesine tıklayın. Bu dosyayı önceki belgeyle aynı yere, TechBookstore klasörüne kaydedin.

[B]2.Belgede Stage’in ve TextArea örneğinin boyutlarını değiştirin.[/B]

Tech Bookstore sitesinin Giriş sayfasının bir “gündemdeki kitap” modülü olduğu için, home.fla belgesinin boyutlarını siteye uyacak şekilde değiştirmeniz gerekiyor. Selection aracını kullanarak Stage’deki TextArea bileşen örneğine tıklayın ve Properties denetçisini kullanarak bileşenin genişliğini 570 piksel olarak ayarlayın. Bileşenin yüksekliğini 325 piksel, x ve y koordinatların da 10 piksel olarak bırakın. Stage’e tıklayın ve belgenin boyutlarını 580 x 345 piksel olarak ayarlayın.


[B]3.TextArea örneği için yeni bir örnek ismi girin ve actions katmanındaki ActionScript kodunu değiştirin.[/B]

Stage’deki TextArea bileşen örneğini seçin ve Properties denetçisine yeni bir örnek ismi (home_txt) yazın. Bileşen örneğinin ismini değiştirdiğiniz için, ActionScript kodunuzda TextArea bileşenine ait başvuruları da değiştirmeniz gerekiyor. Ayrıca news_lv başvurularını da home_lv olarak değiştireceksiniz. Kodun değiştirilmiş hali aşağıdaki gibi olacaktır.

var flash_css = new TextField.StyleSheet();
flash_css.load(“styles.css”);
flash_css.onLoad = function(success:Boolean) {
if (success) {
home_txt.styleSheet = flash_css;
} else {
trace(“Error loading CSS file.”);
}
};
var home_lv:LoadVars = new LoadVars();
home_lv.load(“home.txt”);
home_lv.onLoad = function(success:Boolean) {
if (success) {
home_txt.text = this.content;
} else {
trace(“unable to load text file.”);
}
};
home_txt.html = true;
home_txt.editable = false;

Bu ActionScript kodu news.fla dosyasına ait kodla neredeyse aynıdır. Burada, sadece örnek isimlerinin ve yüklenen harici metin dosyasının ismini değiştirmeniz gerekti.

Bu ActionScript kodunun ikinci satırdan son satıra kadar olan kısmı, Stage’deki home_txt örneğinin HTML ile biçimlendirilmiş metni doğru olarak göstereceğinden emin olmanızı sağlar. Metninize ilave biçimlendirme özellikleri eklemek için resimler, kalın, italik metinler ve madde imli listeler kullanabilirsiniz. Son satır ise editable özelliğini false olarak ayarlar. Bu da, kullanıcıların ekranlarındaki metinde değişiklik yapmasını engeller.

[B]4.home01.jpg ve home02.jpg dosyalarını TechBookstore klasörüne kopyalayın.[/B]

Flash belgenizi doğru bir şekilde test edebilmek içim, LoadVars kullanarak yüklenebilen bir metin dosyasını kopyalamanız ya da oluşturmanız gerekir. Tech Bookstore sitesinin giriş sayfası için bir metin dosyası uygundur. home.txt dosyasını ve iki resmi (home01.jpg ve home02.jpg) sabit diskinizdeki TechBookstore klasörüne kopyalayın. Metin dosyasını açın ve HTML biçimlendirme kodlarını inceleyin.

[B]Not:[/B] İki resim dosyası, HTML ile biçimlendirilmiş metinde kullanılıyor ve SWF dosyasına home.txt dosyasındaki <img> etiketi kul anılarak yükleniyor.

Tech Bookstore’a yüklenecek metin dosyasını kendiniz oluşturuyorsanız, HTML kodunu ve biçimlendirmeyi istediğiniz basitlikte ya da karmaşıklıkta oluşturabilirsiniz. Flash, HTML sürüm 1.0 etiketlerinin küçük bir alt kümesini destekler.

•Anchor <a>: Flash metin alanlarınıza linkler eklemenize imkân sağlar. <a> etiketi ayrıca, linkin hangi karede ya da pencerede açılmasının gerektiğini belirtmenize imkân sağlayan target niteliğinin kullanımını da destekler. Bir stil sayfası kullanıyorsanız, a:link, a:hover ve a:active’e ait renkleri ve nitelikleri de belirtebilirsiniz.

•Bold <b>: Metni kalın olarak görüntüler.

•Break <br>: Belirtilen noktaya bir satır sonu ekler.

•Font <font>: Geçerli fontu, büyüklüğünü ve rengini değiştirmenize imkân sağlar. Stil sayfalarını kullanmadığınız ve metninizi biçimlendirmek istediğiniz durumlarda bu etiket çok faydalıdır.

•Image <img>: Metin alanlarınıza resim eklemenize imkân sağlar. Bu etiket, yerel ya da harici resim dosyalarının, SWF dosyalarının, hatta kütüphaneden sembollerin yüklenmesini destekler (sembolü bir bağlantı tanıtıcısına atayarak).

•Italics <i>: Metni italik olarak görüntüler.

•List Item <li>: HTML’den biraz farklı olarak, <li> etiketi bir çift <ol> (ordered list; sıralı liste) ya da <ul> (unordered list; sırasız liste) etiketinin arasında yer almaz. Flash’taki <li> etiketi, madde işaretli listeleri kolayca oluşturmanıza imkân sağlar.

•Paragraph <p>: Yeni bir paragraf eklemenizi sağlar.

•Span <span>: Bir kod bloğuna stiller eklemenize imkân sağlar.

•TextFormat <textformat>: Flash’ta basit tablolar oluşturmanıza imkân sağlar.

•Underline <u>: Metnin bir bölümünün altını çizer.

Flash sadece bir düzine kadar etiketi desteklese de, sitenizdeki metinleri, bunları Flash’ın yerleşik CSS desteğiyle bir arada kullanarak biçimlendirdiğinizde son derece etkileyici sonuçlar elde edebilirsiniz.

[B]İpucu:[/B] Bir resmi sadece TextArea örneğine yüklerseniz ve resmin boyutları TextArea örneğinin boyutlarından büyükse, kaydırma çubukları görüntülenmez. Kaydırma çubuklarının etkin hale gelebilmesi için, resmi takip eden bir metnin olması gerekir. büyük resimler yüklüyor ve bunların kaydırılabilmesini istiyorsanız, TextArea yerine ScrollPane bileşenini kullanmanız gerekir. Aynı işi yapması için bir movie clip’le birlikte kendi ActionScript kodunuzu da yazabilirsiniz.

Bu dosyayı olduğu gibi kullanmak istiyorsanız kapatın. Fakat tercihiniz bu değilse, artık nasıl biçimlendirildiğini bildiğinize göre dosyada istediğiniz değişiklikleri yapabilirsiniz.

[B]5.Flash belgesinde her şeyin doğru bir şekilde çalıştığından emin olun. home.fla dosyasını kaydedin, sonra da yayınlayın. TechBookstore klasöründe bir SWF dosyası oluşturulacaktır.[/B]

Control menüsünden Test Movie’yi seçip FLA dosyasını test ortamında test ederek, çalışmasında herhangi bir sorun olmadığından emin olun.


SWF dosyasında ve biçimlendirmede herhangi bir sorun olmadığını gördükten sonra, geliştirme ortamına geri dönün. Sonra da FLA dosyasını kaydedin ve yayınlayın. TechBookstore klasöründe bir SWF dosyası oluşturulacaktır.

Bu uygulamada, her düğmeye tıklandığında Tech Bookstore sitesinde aşağıya doğru açılan menüleri canlandıracaksınız.Bir düğmeye tıklandığında menü aşağıya doğru açılır, imleç menüden uzaklaştırıldığında ise, menü yukarı doğru kayarak kapanır. Menünün kullanılacağı animasyonu daha önceki derslerden birinde oluşturmuştunuz. Şimdi de ziyaretçi düğmelere tıkladığında ya da imleci bunlardan uzaklaştırdığında animasyonun oynamasını sağlayacak ActionScript kodunu yazacaksınız.


[B]1.bookstore13.fla dosyası açık değilse, sabit diskinizdeki TechBookstore klasöründen bu dosyayı açın.[/B]

Bu dosyada daha önce bazı düzenlemeler yaparak kütüphanedeki mcSamplechapters ve mcToc’u silmiştiniz.

[B]2.Bu uygulamada daha sonra ActionScript kodu kullanarak, düğmeleri ve movie clip’leri kontrol edebilmek için menüdeki tüm örneklere birer örnek ismi verin.[/B]

Gezinti çubuğundaki üç ana düğmeye, sonra da bunların arkasında bulunan üç menüye örnek isimleri vermeniz gerekiyor.

Ana Stage’in üst kısmında yer alan üç düğmeyi adlandırın. Bunu yaparken gerekiyorsa buttons katmanının kilidini çözün. Products (Ürünler) düğmesine [B]products_btn[/B], Company (Firma) düğmesine [B]company_btn [/B]ve Contact (İrtibat) düğmesine de [B]contact_btn [/B]örnek isimlerini verin. Bu işlemleri tamamladıktan sonra buttons katmanını kilitleyin.


Şimdi de, bu üç düğmenin arkasında bulunan üç menüye örnek isimleri vereceksiniz. buttons katmanını gizlemek işinizi kolaylaştırabilir. Menülerin kendisi graphics katman klasöründe menu katmanında yer almaktadır. Menü katmanına sağ tıklayın ya da Control tuşuyla tıklayın ve bağlam menüsünden Lock Others komutunu seçin. Mask katmanını gizleyin. Products düğmesinin arkasındaki menüye tıklayın ve buna [B]productsmenu_mc [/B]örnek ismini verin. Sonra da Company düğmesinin arkasındaki menüye companymenu_mc, Contact düğmesinin arkasındaki menüye de [B]contactmenu_mc[/B] örnek ismin verin. Sembol örneklerinin her birine soneklerin eklenmiş olduğuna dikkat edin. ActionScript kodunu yazmaya başladığınızda bunlar sayesinde kod ipuçlarını (code hints) kullanabileceksiniz.

Menü movie clip’inin içinde isim vermeniz gereken başka bir movie clip vardır. [B]productsmenu_mc[/B] örneğine çift tıklayın ve bu movie clip’in içindeki menüyü seçin. Properties denetçisini maksimum boya getirin ve bu klibe menu1_mc örnek ismini verin. Örneğin üzerinde bulunduğu katmanın kilidini çözmeniz gerekebilir. Sonra, bu katmanda yer alan menüye ait tween animasyonundaki ikinci örneği seçin. Buna da aynı ismi ([B]menu1_mc[/B]) verin. Bu işlemi bu animasyondaki üçüncü ve son anahtar kare için de tekrarlayın.


Düzenleme çubuğunu kullanarak ana Stage’e geri dönün. companymenu_mc örneğine çift tıklayın ve bunun içindeki klibe [B]menu2_mc[/B] örnek ismini verin. Düzenleme çubuğunu kullanarak ana Stage’e geri dönün ve bu işlemleri son menü için de tekrarlayarak Properties denetçisine [B]menu3_mc[/B] örnek ismini girin. İşiniz bittikten sonra menu katmanını kilitleyin.

[B]3.actions katmanının 1 numaralı karesinde, Actions paneline aşağıdaki ActionScript kodunu ekleyin. Bu kod menünün değişkenlerine ilk değerlerini atar. Koda ayrıca, ziyaretçi Stage’e sağ tıkladığında menüyü kaldıran bir satırı da ekleyeceksiniz.[/B]

Bu kareye bir stop eylemi girilmiş durumdadır. Bu eylemin altına aşağıdaki üç kod satırını eklemeniz gerekiyor. Üç değişken, üç menüden hangisinin açık durumda olduğunu (tabii açık bir menü varsa) izlemek için kullanacağınızı bayraklardır (flag). Değer 0 olarak ayarlanmışsa, kayan menü kapalı durumdadır (etkin durumda değildir). Değişkenin değerinin 1 olması, menünün açık (etkin) ve Stage’de görünür durumda olduğunu gösterir.

var prodmenu:Number = 0;
var compmenu:Number = 0;
var contactmenu:Number = 0;

Sonra değişkenlerin altına aşağıdaki ActionScript kod satırını ekleyin.

Stage.showMenu = false;

Bu ActionScript kodunu belgenize eklediğinizde, SWF dosyası yayınlandıktan sonra ziyaretçiler dosyaya sağ tıkladıklarında (ya da Control tuşunu basılı tutup tıkladıklarında) Flash Player menü seçeneklerinin çoğunu göremezler. Normalde açılan bağlam menüsü Zoom (Yakınlaş) ve Play (Oynat) gibi birkaç seçenek içerir. Ama bu ActionScript kodunu eklerseniz, ziyaretçinin Flash Player ayarlarını kontrol etmesine imkân sağlayan Settings (Ayarlar seçeneğinin dışındaki seçeneklerin hepsi menüden çıkarılır.

[B]4.actions katmanının 1 numaralı karesine, kullanıcı imleci menü alanından uzaklaştırdığında bütün menülerin kapanmasını sağlayan aşağıdaki kodu girin.[/B]

Görünmez düğme, kullanıcı imleci üzerine getirdiğinde bütün menüleri kapatır. Daha önce, menüler açık durumdayken bunların etrafı oluşturmuştunuz.
Daha sonra, imleç görünmez düğmenin üzerine getirildiğinde, SWF dosyasına menüleri kapatacak fonksiyonu ne zaman çağırmasının gerektiğini söyleyen ActionScript kodunu eklemeniz gerekiyor. İmleç düğmenin üzerine getirildiğinde, bu ActionScript kodu kullanılarak açık durumdaki bütün menüler kapatılır.

[B]Not:[/B] Aşağıdaki kodun yerine ActionScript’teki for..in döngüsü de kullanılabilirdi. Her ne kadar bu konu kitabın kapsamı dışında olsa da, ActionScript öğrenmeye devam ederseniz, bu konuyu araştırarak buradaki kodu uygun şekilde değiştirebilirsiniz. Bu durumda yapacağınız şey, yukarıdaki adımda tanımlanan üç değişi keni bir nesneye yerleştirmektir. for.. in döngüsü kullanılarak, nesnedeki her bir öğe üzerinde döngüye girebilir ve bir kod bloğunu çalıştırabilirsiniz. Bu da gereken kod miktarını azaltmanızı, ayrıca kodu daha esnek hale getirmenizi sağlar.

Tech Bookstore’a ekleyeceğiniz ActionScript kodu çok uzun olmadığı için, ActionScript kodunun tekrarlanmasında bir sakınca yoktur. Şu an için, dilin bu kısımlarını doğru bir şekilde kullanmayı öğrenmek bu işin en önemli tarafı

//görünmez düğme
this.btnReturnMenus.onRollOver = function() {
if (contactmenu == 1) {
contactmenu_mc.gotoAndPlay(“slideup”);
contactmenu = 0;
}
if (compmenu == 1) {
companymenu_mc.gotoAndPlay(“slideup”);
compmenu = 0;
}
if (prodmenu == 1) {
productsmenu_mc.gotoAndPlay(“slideup”);
prodmenu = 0;
}
};

Bu fonksiyon btnReturnMenus örneğe ait bir onRollover olay işleyicisinin içine yerleştirilmiştir. Yani kullanıcı imleci btnReturnMenus örneğinin (Stage’deki g örünmez düğmenin) üzerine her getirdiğinde, bu fonksiyon çalıştırılır. Kod menülerin her birine bakar ve değerin 1 olup olmadığını, yani SWF dosyasında menünün açık olup olmadığını kontrol eder. Değişkenin değeri 1 ise, menü açıktır (yani aşağıya doğru tam olarak açılmış) ve kapatılması (yukarı doğru canlandırılması) gerekiyor demektir. Bu nedenle, menünün kapanması için ilgili movie clip’e (productsmenu_mc, companymenu_mc ya da contactmenu_mc) ait oynatım kafasının slideup etiketli kareye gitmesini sağlamanız gerekiyor.

Yukarıdaki kodda, kapanan yuvalanmış movie clip’lere giden yola da dikkat edin. Kod btnReturnMenus örneği için yazıldığından, menü movie clip’lerine ait yollar contactmenu_m c.gotoAndPlay(“slideup”) olarak gösterilebilir. Bu, üzerine yerleştirildiği Timeline’a (yani Stage’e) başvuruda bulunan bir düğme kodudur. Stage’den contactmenu_mc örneğine ve buna ait gotoAndPlay metoduna doğrudan başvuruda bulunabilirsiniz.

[B]5.Görünmez düğmenin kodu eklendiğine göre, bunun altına menülerin kendisi için gereken kodları girebilirsiniz.[/B]

İmleç görünmez düğmenin üzerine getirildiğinde menülerin kapanmasını sağlayacak kodu eklediğinize göre, ana gezinti öğelerine tıklandığında menüleri canlandıracak kodu eklemenin zamanı geldi demektir. Eklemeniz gereken kod btnReturnMenus örneğinin koduna çok benzer. Ama burada yapmanız gereken, üzerine tıklanan menüyü açmak ve diğer iki menü açıksa bunları kapatmaktır.

//products (ürün) menüsü
this.products_btn.onRollOver = function() {
if (contactmenu == 1) {
contactmenu_mc.gotoAndPlay(“slideup”);
contactmenu = 0;
}
if (compmenu == 1) {
companymenu_mc.gotoAndPlay(“slideup”);
compmenu = 0;
}
if (prodmenu == 0) {
productsmenu_mc.gotoAndPlay(“slidedown”);
prodmenu = 1;
}
};

//company (firma) menüsü
this.company_btn.onRollOver = function() {
if (prodmenu == 1) {
productsmenu_mc.gotoAndPlay(“slideup”);
prodmenu = 0;
}
if (contactmenu == 1) {
contactmenu_mc.gotoAndPlay(“slideup”);
contactmenu = 0;
}
if (compmenu == 0) {
companymenu_mc.gotoAndPlay(“slidedown”);
compmenu = 1;
}
};
//contact (irtibat) menüsü
this.contact_btn.onRollOver = function() {
if (compmenu == 1) {
companymenu_mc.gotoAndPlay(“slideup”);
compmenu = 0;
}
if (prodmenu == 1) {
productsmenu_mc.gotoAndPlay(“slideup”);
prodmenu = 0;
}
if (contactmenu == 0) {
contactmenu_mc.gotoAndPlay(“slidedown”);
contactmenu = 1;
}
};

Bu kod ilk bakışta çok uzun gibi görünse de, aslında son derece basittir, çünkü belirli kod parçaları sürekli olarak tekrarlanmaktadır. Gezinti bölümünde üç menü yer alır: products, company ve contact. Her menü öğesi için, diğer iki menüyü kontrol ederek bunların açık olmadığından emin olmanız gerekir. Bunu daha önce ayarlamış olduğunuz üç değişkene (prodmenu, compmenu ve contactmenu) bakarak anlayabilirsiniz. Bu değişkenlerin değerleri 1 ise, ilgili menünün açık olduğunu ve açılması gereken menüyü görüntüleyebilmek için bunları kapatmanızın gerektiğini anlarsınız.

Yukarıdaki kod, her biri bir menü öğesine ait üç ana kısımdan oluşuyor. products_btn düğmesine tıkandığında, Flash compmenu ya da contactmenu değişkeninin değerinin 1 olup olmadığını (yani bunlarla ait menülerin açık olup olmadığını) kontrol eden yerel fonksiyonu çalıştırır. Eğer bir menü açıksa, buna ait değişkenin değeri 0 olarak ayarlanır ve menü kapatılır; bu daha önce btnReturnMenus örneğine ait koda benzerdir.

Son olarak da, açılması gereken menünün (bu örnekte products) açık mı, kapalı mı olduğunu kontrol edersiniz. Bu menü kapalıysa, açılmasını sağlamanız gerekir. Bu kodda herhangi bir else deyiminin kullanılmasına gerek yoktur, çünkü açılması gereken menü zaten açıksa işlem tamamlanmış demektir. Bu durumda yapmanız gereken tek şey, bir sonraki menü öğesine giderek onun açık olup olmadığını kontrol etmektir. company_btn örneğinde de mantık aynıdır. Aradaki tek fark, burada prodmenu ve contactmenu’nün kapalı olup olmadığını kontrol etmenizdir.

[B]Not:[/B] Yine her şeyi mümkün olduğu kadar basit tutmak amacıyla, buradaki menüler için olabilecek en zarif kodu kullanmadık. Burada önemli olan sadece yöntem değil, ayrıca menülerin nasıl hedeflendiği ve if deyimlerinin anlaşılması. Bu kod kısaltılabilir, ama kısaltıldığı oranda karmaşıklığı da artabilir ve nasıl çalıştığının anlaşılması zorlaşabilir. Bu kodu basitleştirmenin belki de en iyi yolu, iki parametre (genişletilen bir menü öğesi ve gizlenen menü öğelerinden oluşan bir dizi) alan bir fonksiyon oluşturmaktır. Bu mantığı bir fonksiyona dönüştürerek, kodu üç durumda da tekrar kullanabilirsiniz. Böylece, sadece fonksiyona aktarılan parametreleri ayarlamanız yeterli olur.

[B]6.Kodunuzun sözdizimini kontrol edin ve Actions panelini kullanarak biçimlendirin. Sonra da test ortamında menünün animasyonunu test edin.[/B]

Actions panelinin üst kısmında yer alan Check Syntax (Sözdizimini Kontrol Et) düğmesine tıklayın. ActionScript kodunuzda herhangi bir sorun varsa (örneğin bir parantezin girilmesi unutulmuşsa), Output panelinde bir mesaj görüntülenir. Bu durumda kodunuzun 3-5. adımlardaki kodlarla aynı olup olmadığını tekrar kontrol etmeniz gerekir. hataları düzelttikten sonra, Actions panelinin araç çubuğundaki Auto Format düğmesine tıklayın. Bu düğmeye tıkladığınızda ActionScript kodundaki girintiler uygun şekilde ayarlanır ve deyimlerin sonunda eksik olan noktalı virgüller tamamlanır.

Menülerin SWF dosyasında doğru şekilde hareket edip etmediklerini görmek için, Ctrl+Enter (ya da Mac’te Cmd+Enter) tuşlarına basın. Herhangi bir sorunla karşılaşırsanız, öncelikle ActionScript kodunun 3-5. adımlardaki kodun aynısı olup olmadığını kontrol edin. Sorun maskeyle ya da görünmez düğmeyle ilgili gibi görünüyorsa, maskenin menü açıldığında menüyü uygun bir şekilde kapladığından ve görünmez düğmenin menünün etrafın etraf şekilde çevrelediğinden emin olun.


[B]İpucu:[/B] Menüyü test ettiğinizde, maskenin pek uygun bir şekilde ayarlanmamış olduğunu görebilirsiniz. Menüler maskenin dışına çıkıyorsa, maskenin büyüklüğünü menüyü kapatmayacak şekilde tekrar ayarlamanız gerekir. görünmez düğmenin menüyü kapatan hit alanının doğru çalışmadığını da fark edebilirsiniz. Durum buysa, menünün boyutlarını biraz değişi tirmeniz gerekir.

[B]7.Menü animasyonu düzgünse, FLA dosyasında yaptığınız değişiklikleri kaydedin.[/B]

bookstore13.fla dosyasında yaptığınız değişiklikleri kaydedin ve bir sonraki uygulamaya geçin. Bu uygulamada, menünün içindeki düğmelerin çalışmasını sağlayacak kodu ekleyeceksiniz.