 |
| Çalışmamız önce sadece actionscript kodlarında kullanılarak hazırlanacaktır. Daha sonra ise kod kullanmadan sadece properties ve component inspector panelinden yararlanarak hazırlama tekniği tanımlanacak, son olarak accordion panel kodlarına göz atılacaktır.
Uygulama: 1- Önce panelden bir accordion panelini sahneye ekleyelim. İnstance name olarak accordion yazalım . Paneli seçin ve properties paneline bakın. Burada x ve y alanına 0 yazın. x ve y koordinatı çok önemlidir. İlerde film kliplerini bu alana doğru bir şekilde yerleşmesi için bu değerleri kullanacağız. Sıfır yazmak şart değildir, önemli olan bu değerleri bir yere not etmenizdir. 2- Bu panelin 3 alanı olacaktır. Üstteki 2 alana resimlerden oluşmuş ve link için butona sahip olan 2 ayrı film klibi, en alt alana ise sadece bir metin içeren film klibi ve ikon için bir klip ekleyeceğiz. Şimdi bu klipleri oluşturalım. Klavyeden CTRL+F8 tuşuna basarak yeni sembol panelimizi açalım ve davranış olarak film klibi seçeneğini kullanalım. Sahneye daha evvel bir resim editörü ile aynı ebadlarda hazırlanan 4 adet resmimizi import edelim. Bu resimleri sahnede uygun pozisyonda yerleştirelim ve her bir resmi seçerek buton şekline getirelim. Şimdi sahnede mevcut olan 4 butonu seçin ve klavyeden CTRL+G tuşuna basarak bunları tek bir sembol gibi gruplayın. Şimdi bu buton grubunu seçin ve properties panelinde x ve y değerlerini sıfır olarak ayarlayın. Bu sayede film klibi tam paneldeki ilgili alana oturacaktır. Bir ince ayara daha ihtiyacımız var. Klibimiz panele tam sol-üst köşeden tututurulacaktır. Şayet panelin genişliği az evvel grupladığımız buton grubundan genişse sağ tarafta bir boşluk kalacaktır. Bu nedenle bu sembolün genişliğini tesbit edin ve ana sahneye dönerek componentin properties panelinden genişliğini değiştirin. Burada dikkat edilecek konu panelin sağ ve solundaki çizgilerinde birer piksel yer işgal edeceğidir. Yani resim sembolünün eni 100 piksel ise componentin enini 102 piksel olarak ayarlayın. Filmi kapatıp anasahneye dönün. Bu klip sahneye alınmadı. Kütüphaneyi açın ve filmi seçip sağ klik yapın. Linkage alanına tıklayın. Açılan panelde Export for Actionscript alanını işaretleyin ve aktifleşen ID alanına hay1 yazın. Filmimize kodlarda kullanacağımız bir kimlik adı vermiş bulunuyoruz. Aynı işlemi diğer 3 film klibi için de yapalım.Butonları içeren 2. klibe hay2, metin içeren 3. klibe ise oneri ve ikon klibimize ikon kimlik adını verelim. Yine hay2 ve ikon klibinin içindeki elemanların x ve y koordinatlarını sıfır olarak ayarlayalım. Öneri klibi panelden daha küçük olduğundan ortalamak için 36.5 ve 42.5 değerlerini verelim. 3- Anasahnede halen tek bir component sembolümüz vardır. 1.kareyi seçerek şu komutları verin: accordion.color = 0x006666; accordion.createChild("hay1",
"hayv1", { label: "Hayvanlar Dünyası- 1 "
,icon:"ikon" }); İlk 2 komut UIObject class kodlarıdır ve actionscript panelinde görülmezler. Bu class kodları hakkında detayları almak için bilgisayarınızda Program Files klasöründen şu sayfayı açınız: ..\Flash MX 2004\en\Configuration\HelpPanel\Help\UsingComponents\04_components682.html Alanlara bir arkaplan rengi eklemek isterseniz accordion.backgroundColor = 0xCCFF00; kodunu ekleyebilirsiniz Bu kodlar genel anlamda tüm component panelleri için geçerlidir. İlk dizin panel metninin rengini, 2. si ise panel rengini ayarlar. Kullanabileceğiniz 3 renk vardır. haloGreen(hiç kod yazmazsanız varsayılan renktir), haloBlue ve haloOrange. Başka panel rengi kullanmak isterseniz bu panelleri Flash-Mx de olduğu gibi kütüphaneden açıp editleme şansınız yoktur. Panellere bu rengi veren şablon fla dosyalarını bilgisayarınızdan bulup editlemeniz gerekir ki bu karışık bir konudur ve daha sonraki çalışmalarda anlatılacaktır. 3. dizinde accordion.createChild("hay1", "hayv1", { label: "Hayvanlar Dünyası- 1 ",icon:"ikon" }); komutu ile ilk alanımızı oluşturuyoruz. Burada hay1 tututurulacak klibin kimlik adı, hayv1 o alana verilen isim ve sonra label adını ve ikon klibimizin kimlik adını yazıyoruz. Yine yukardaki yöntemle 2. ve 3. alanlarımızı oluşturalım. Son komut: accordion.selectedIndex
= accordion.numChildren - 1; bu 3 panelden hangisinin klip
ilk yüklendiğinde açık olmasını denetler.3 alan
içeren bir accordion panelinde her alana bir index
numarası verilir. İki sıfırdan başlar ve devam
eder. Varsayılan açılım ilk alanın açık kalması şeklindedir. accordion.numChildren
komutu kaç alanımız olduğu belirtir. Bu bizde 3 değerini verir.
(yani index değerinden bir sayı fazlasını) Biz bu sayıdan bir
çıkartırsak daima son panelin açık olmasını sağlarız.
Siz istediğiniz alanı açık tutmak için bu eksi değeri ile oynamalısınız. Şimdi aynı çalışmayı kod yazmadan hazırlayacağız Çalışmaya ait fla dosyasını açın ve 1.kareyi seçerek tüm kodları silin. Şu an elimizde 3 tane linkage komutu ile hay1,hay2,oneri adlı film klibi ve sahnede instance name accordion yazılan bir panelimiz mevcut. Sahnedeki paneli seçip properties paneline bakın. Şu görüntüyü gözleyeceksinzi:
Kodlarımızı otomatik olarak buradan oluşturacağız.childIcon alanına şayet bir ikon eklemek istiyorsanız kullanın.Biz ikon kimlik adlı bir klip oluşturduk ve 3 alana da onu ekledik,siz isterseniz farklı kimlikadı olan ikonları ekleyebilirsiniz..Bu alana metin girebilmek için childİcon yazan yeri tek tıklayın, grafide gördüğünüz gibi açılan büyülteç işaretini tıklayarak alttaki panele ulaşabilirsiniz:(Pratik olarak bu alanın önündeki parantezleri içeren boşluğa çift tıklayarakta paneli açabilirsiniz)
Değerler panelinde artı butonuna tıkladığınızda defaultValue metni çıkar, bu kısma tek tıklayarak istediğiniz metni yazabilirsiniz. Eksi butonu seçili metni siler ok butonları ise dizini bir değer yukarı veya aşağıya alır. Bu çalışmada tek ikon kullanıldığından artı butonunu 3 kez kullanarak 3 kez ikon yazın. Birden fazla ikon klibiniz varsa ilgili alanlara kliplerinizin kimlik adını ekleyin. childLabels kısmını açın ve değerler panelinden buraya Hayvanlar Alemi-1 , sonra artı butonuna tıklayıp yeni alan açarak Hayvanlar Alemi-2 ve Öneri yazın. childNames alanına açılan alanlar için bir isim veriyoruz. Bu alana istediğiniz değeri(TR karakter hariç) yazın. Biz hayv1,hayv2,yorum yazdık. childSymbol alanına sıra ile kimlik adını verdiğimiz kliplerin adını yazalım. hay1, hay2,oneri. Filmi test edebilirsiniz.
Accordion.change: Panele her eklenen alanın bir index numarası olduğunu önceden belirtmiştik. Açılan alanlar değiştikçe bu index değeri de değişir. Bu değişiklik okutularak bir fonksiyonun başlaması sağlanır. Yukardaki örnek fla dosyasını açın ve 1.karedeki komutların altına şu kodları ekleyin: degisim =
new Object(); // Her alan değişiminde output penceresi bir uyarı mesajı verir. Bu işlemi değişik amaçlar için kullanabilirsiniz. Accordion.createChild() : Bu komut örnekte kullanılmıştır.Child diye ifade edilen yeni bir alan oluşmasını sağlar. accordion.createChild(class_veya_sembol_adı, instanceName[, başlangıç_özellikleri]); Accordion.createSegment(): İşlev olarak createChild() komutunun aynısıdır. farklı olarak bu komuttaki label ve ikon eklentileri bir başlangıç özelliği değil, doğrudan parametrenin kendisi olarak ifade edilir. Yukardaki örnek dosyanın 1. karesine şu eklentiyi yapın: accordion.createSegment("hay1", "hayv4", "birisim", "ikon"); Yeni bir alanın açıldığını göreceksiniz. Fakat yandaki koda bakarsanız label ve ikon klibinin bir eleman değil doğrudan bir parametre olarak atandığı gözlenir. Accordion.destroyChildAt(): Bu komut verilen index numarasına göre ilgili oluşturulmuş alanı kaldırır. Örneğimize şu komutu ekleyin: myAccordion.destroyChildAt(myAccordion.numChildren - 1); veya myAccordion.destroyChildAt(2); en son eklenen panel kaldırılır. Burada ilginç bir bug var. Veya ben o şekilde değerlendirdim. Şayet son alanı değil de üstteki alanlardan birini kaldırmak için bu komutu verdiğinizde yani index alanına 1 veya 0 yazdığınızda panelin yapısında bozulma oluyor. Accordion.getChildAt(): Accordion.getChildAt(index) şeklinde kullanılır.Verilen index numarasındaki alanın değerini döndürür. örnek dosyamızdaki kodlara şu eklentiyi yapın: trace(accordion.getChildAt(2)); Output panelinde son alanın değeri olan _level0.accordion.yorum sonucu alınır. Accordion.numChildren: Oluşturulan alan sayısını verir. Sonuçlar sıfırdan başlatılmazlar.Doğrudan değerini alırsınız. örnek dosyay şu kodu ekleyin: trace(accordion.numChildren ); sonuç 3 çıkacaktır. Accordion.selectedChild: Seçilen alanın verilerini alırsınız. Örnek dosyamızda 3. alan otomatik olarak seçiliyordu. Şu kodları dosyaya ekleyin: secilen = accordion.selectedChild.label;
Sonuç 3.alan label adı olan Öneriler şeklinde gözlenecektir. Accordion.selectedIndex: Bunu örneğimizde kullanmıştık. Seçilen alanın index değerini döndürür. Diğer kodlar panele özgü kodlar değildir. Bunların büyük kısmı UIObject kodlarıdır ve tüm panellerde kullanımı aynıdır. Bu nedenle bunlar tekrar anlatılmayacaktır.
|
