ActionScript 3.0 Geliştiricileri | Bir ADOBE Kullanıcı Grubudur

Daha Az Kod Kullanarak Yüksek Sayıdaki Film Klibi(MovieClip) ve Düğmeleri(Button) Görevlendirmek

Daha basit ve hızlı olmasını öngörerek nesne tabanlı olmayan, bolca MovieClip(film klibi) kullandığınız çalışmalar hazırlamışsınızdır. Özellikle e-learning uygulamalarında 10 ila 20 sayfalık  film kliplerinde gezinmeyi sağlayan bir program yazmak istediğnizde, anlatacağım teknikler işinizi çok kolaylaştıracak. 5-6 ‘dan daha az sayfa için her butona ya da movieClip’e dinleyici ekleyebilirsiniz. Çok fazla sayfanız ve düğmeniz varsa, butonların kendiliğinden kütüphaneden gelip dizildiği nesne tabanlı uygulamalar hazırlamanızı öneriyorum. Biz de hız kazanmak açısından hangi teknikleri kullanabileceğimize bakalım.

Bu uygulamada tüm butonlara tek tek görev eklemek ve fonksiyon atamak yerine, tüm butonları tek bir film klibine hapsetmek suretiyle film klibine görev ekleyecek ve tek bir fonksiyon ile hangi tuşa basıldığının tesbitini yaparak framelerde gezinmeyi sağlayacağız.

butonlar_mc.addEventListener(“click”,git);

Temel mantığımızı bu satır üzerine kuracağız

Öncelikle çalışmamızda kullancağımız split metodundan bahsedelim

String bir değişken sınıfının alt fonksiyonu olarak kullanılıyor. Kullanıldığı değişkeni ikiye ayırıp yeni bir diziye atayan fonksiyona split diyoruz. Yani ayırma fonksiyonu.

İçerisine string bir değer kabul ediyor. Bu değerden öncesini ve sonrasını parçalıyor. Değeri geri dönürdüğümüzde array nesnesi elde ediyoruz. Bunun da elemanlarına ulaşabiliyoruz.

String bir değişken oluşturalım.

var testStr:String= “as3coder.com”;

Şimdi bu değişkeni görüntüleyelim

trace(testStr); // as3coder.com

Değişkenimizi nokta ile parçalayalım ve yeni dizi elemanlarımızı görüntüleyelim

trace(testStr.split(”.”)[0]); //as3coder

trace(testStr.split(”.”)[1]); //com

Tabi burada bunu diziye tek seferde atıp elemanlarınıda çekebiliriz.

var testDizi:Array = testStr.split(”.”);

trace(testDizi[0], testDizi[1]);

gibi.

Sayfamızda 10 tane buton olsun. Bu butonlara tıklandığında frame değişsin. Mesela 8. butona tıklandığında frame 8′e atlayalım.

Butonların olduğu frameyi ayrı, içeriği ayrı bir layer(katman)’da tutunuz. Böylece butonları 10 framede uzatmak için insert frame, içerikleri ise her frame için insert keyframe komutuyla ayırabilelim. Şekilde ki düzenleme uygun olacaktır.

Bu uygulamada frameler’e göndermek üzere 10 butonumuz var. Bunları “buton1_btn”, “buton2_btn” şeklinde isimlendirmemiz gerekiyor. Ya da başka şekilde ama o zaman yazımıda değiştirmemiz gerekir.

gotoAndStop() , git ve dur anlamına gelen, değer olarak integer yani tamsayı kabul eden bir fonksiyon.

Yazımı şu şekilde: gotoAndStop(2);

Bakalım bu uygulamada kodlardan kaç satır tasarruf edeceğiz. Her butona tek tek görev eklemek istersek yazılım şu hali alıyor.

buton1_btn.addEventListener(”click”,git1);

buton2_btn.addEventListener(”click”,git2);

buton3_btn.addEventListener(”click”,git3);

buton4_btn.addEventListener(”click”,git4);

buton5_btn.addEventListener(”click”,git5);

buton6_btn.addEventListener(”click”,git6);

buton7_btn.addEventListener(”click”,git7);

buton8_btn.addEventListener(”click”,git8);

buton9_btn.addEventListener(”click”,git9);

buton10_btn.addEventListener(”click”,git10);

function git1(e:MouseEvent) {

gotoAndStop(1);

}

function git2(e:MouseEvent) {

gotoAndStop(1);

}

function git3(e:MouseEvent) {

gotoAndStop(1);

}

function git4(e:MouseEvent) {

gotoAndStop(1);

}

function git5(e:MouseEvent) {

gotoAndStop(1);

}

function git6(e:MouseEvent) {

gotoAndStop(1);

}

function git7(e:MouseEvent) {

gotoAndStop(1);

}

function git8(e:MouseEvent) {

gotoAndStop(1);

}

function git9(e:MouseEvent) {

gotoAndStop(1);

}

function git10(e:MouseEvent) {

gotoAndStop(1);

}

Şu an okuması bile zor olan 42 satırımız var…

Bundan daha kısa bir yol olarak tek bir fonksiyon girebilirdik.

function git(e:Event) {

if (e.target.name==”buton1_btn”) {

gotoAndStop(1);

}

if (e.target.name==”buton2_btn”) {

gotoAndStop(2);

}

…….

}

Ancak bu da hayli uzun bir yazım olurdu.. case swich ile yapabilirdik. Yazımı biraz daha kısaltırdık. Bütün bu uzun seçenekler yerine yine de biz, split metoduyla gotoAndStop fonksiyonuna değer gönderebiliriz. Hatta her butona tek tek görev eklemek yerine, onları bir film klibi içine alıp sadece film klibine’de görev ekleyebiliriz.

Hatırlayacağınız gibi target, hedef nesneyi, currentTarget en dışarıdaki hedefi döndürüyordu. Yani bir film klibi oluşturup içine 10 tane buton eklesek, butonlar_mc ‘nin addEventListener fonksiyonunu çalıştırsak, if e.target==”buton1_btn” desek yine aynı şeyi elde etmiş olacağız. Ancak bundan önce split metoduyla birdaha deneyelim.

buton1_btn.addEventListener(”click”,git);

buton2_btn.addEventListener(”click”,git);

buton3_btn.addEventListener(”click”,git);

buton4_btn.addEventListener(”click”,git);

buton5_btn.addEventListener(”click”,git);

buton6_btn.addEventListener(”click”,git);

buton7_btn.addEventListener(”click”,git);

buton8_btn.addEventListener(”click”,git);

buton9_btn.addEventListener(”click”,git);

buton10_btn.addEventListener(”click”,git);

function git(e:Event) {

gotoAndStop(int(e.target.name.split(”_”)[0].split(”buton”)[1]));

}

Kısaca ne yaptığımızı anlatayım.

Eğer git fonksiyonunun içinde:

trace(e.target.name); yazsaydık “buton1_btn” gibi çıktılar alırdık.

Eğer trace( e.target.name.split(”_”) [0]); yazsaydık, “buton1″ çıktısını alırdık.

Dolayısıyla split metodu ile bir dizi oluşturmuş oluyoruz. Bu dizinin sıfırıncı elemanı, “buton1_btn” nin “_” ‘den parçalanmış halinin ilk elemanı olur.

İki eleman sırasıyla şöyledir: “buton1″ ve “btn”

İlk elemanı(buton1) yeniden parçalamak istersek

e.target.name.split(”_”)[1] kısmından sonra tekrar split ekleriz böylece şuna benzer: String(”buton1″).split(”buton”)[1]

Ekleyelim: e.target.name.split(”_”)[0].split(”buton”)[1];

“buton1 ‘in”, “buton’dan” ayrılmış kısmının birinci elemanı “1″ olacaktır. Sıfırıncı elemanı boş olacaktır. Bunun çıktısını alalım.

trace(e.target.name.split(”_”)[0].split(”buton”)[1]); // 1

Burada “buton1″ şeklindeki terimi “buton” ifadesinden parçalamış oluyorum. Böylece yeni dizimin sıfırıncı elemanı “buton”, birinci elemanı, “1″ olmuş oluyor.

Artık yapılması gereken tek şey elde edilen değeri integer yani tam sayı haline çevirilmesi.

int(”1″); in asıl değeri 1 olarak döner yani tamsayıdır. Eğer int(e.target.name.split(”_”)[0].split(”buton”)[1]) yazarsak yine gerçek bir integer olarak 1 sayısı dönecektir.

o zaman gotoAndStop(int(e.target.name.split(”_”)[0].split(”buton”)[1]));

yazarsam program beni 1. frameye gönderecektir. Şu halde yazılımımız oldukça kısaldı. Ancak ilerleyen aşamalarda daha da kısaltmamız gerekecek.

buton1_btn.addEventListener(”click”,git);

buton2_btn.addEventListener(”click”,git);

……

function git(e:Event) {

gotoAndStop(int( e.target.name.split(”_”)[0].split(”buton”)[1] ));

}

Böylece 42 satırı 13 satıra indirmeyi başarmış olduk.

Şimdi yapacağımız uygulama ile 42 satırı sadece 3 satıra indireceğiz.

Tüm butonları tek bir film klibinin içine alın ve yeni film klibinin durum adını(instance name) butonlar_mc olarak değiştirin

Şu durumda butonlar_mc.addEventListener(”click”,git);

Şeklinde tek bir dinleyici ekleyebiliyoruz. Bu dinleyici kendi içerisindeki butonlarıda kaydederek fonksiyona gönderiyor. Bunu da target değişkenine kaydediyor.

Eğer böyle değilde sadece butonlar_mc nin bilgilerini çalıştırmak isterseniz git fonksiyonu içinde trace(e.currentTarget.name) .. vesaire şekillerde kullanabilirsiniz.

Ancak butonlar_mc’nin içindeki butonlardan hangisine tıklandığını anlamak istiyorsanız target değişkenine gelen değeri çağırabilirsiniz.

Programımızın son hali 3 satır olarak şu şekilde:

// KODLAR

stop();

// İçeride bulunan tüm butonlarımıza aynı görevi ekliyoruz
butonlar_mc.addEventListener(“click”,git);

// Git fonksiyonunu tanımlıyoruz

function git(e:Event) {

}

// Burak AYDIN | www.as3coder.com

Burak AYDIN | www.as3coder.com

Önizleme: http://as3coder.com/2010/02/13/daha-az-kod-kullanarak-yuksek-sayidaki-film-klibimovieclip-ve-dugmeleributton-gorevlendirmek/

Dosya: http://as3coder.com/dosyalar/daha_az_kod/daha_az_kod.fla

PDF: http://as3coder.com/dosyalar/daha_az_kod/Daha_Az_Kod.pdf

KODLAR(HTML): http://as3coder.com/dosyalar/daha_az_kod/daha_az_kod.html