Önceki dersimde önyükleyicilerin (preloader) ne işe yaradığını, nasıl yapıldığını basit bir örnek üzerinden ayrıntılı bir şekilde anlattım. Bu yazımda ise önyükleyicileri daha detaylı örnekler üzerinden anlatıp; animasyonlu bir önyükleyici hazırlayacağız, onEnterFrame olay denetleyici yerine setInterval fonksiyonunu kullanacağız ve çıkabilecek sorunlardan bahsedeceğiz.

Bu konuya başlamadan önce "Kim korkar preloader’dan?" başlıklı dersimi okumadıysanız, okumanızı tavsiye ederim.

setInterval fonksiyonunu kullanarak animasyonlu bir önyükleyici yapalım.

Adobe Flash programımızı açalım ve File > New (Cltrl + N) menüsünden yeni bir doküman açın. Shift +F2 tuş kombinasyonuna basarak bir tane daha scene (sahne) oluşturun.

Rectangle tool (R) seçerek sayfamızın ortasına 200 pixsel genişliğinde (width) 10 pixsel yüksekliğinde (heigth) dış kenar çizgileri olmayan bir çubuk çizin.

Oluşturduğumuz çubuğu seçerek modify >Convert to Symbol (F8) movie clip sembole çeviriniz, instance name’ine barcubukmc yazınız. Çubuğumuzun üstüne dynamic text yerleştiriniz, instance name’ine yuzdetxt yazınız. Dynamic textin properties bölümünden text text(fill) color seçeneğini siyah renk seçin.

1. sahnemizin ilk frame’ine aşağıdaki kodları yazın 2. sahnemize varsa çalışmanızı yoksa bir resim yerleştirin. Bu işlemleri tek sahne kullanarak ta yapabilirsiniz.

İlk frame’e çalışmanıza ait hiçbir şey olmamak kaydıyla kodlarınızı ekleyebilirsiniz.

barcubuk_mc._xscale=1
onyukleyici= function(){

    var toplamboyut:Number=_root.getBytesTotal();
    var yuklenenboyut:Number=_root.getBytesLoaded();
    if(yulenenboyut==toplamboyut){
        clearInterval(zamanlayıcı);

    play()

    }else{
        var yuzde:Number=Math.floor((yuklenenboyut/toplamboyut)*100);
        yuzde.text=yuzde +"%"
        barcubuk_mc._xscale=yuzde
    }
}
Zamanlayıcı =setInterval (onyukleyici,10)

İlk önce diğer makalemizde kullanmadığımız kodların açıklamalarını yapalım.

_xscale : Movie clip sembollerin, genişliğinin ölçeklendirilmesini sağlar.

+ : Bu operatörü kodlamamızda iki sitringi birbirine eklemek için kullanıyoruz. (Toplama, topla ve ata işlemleri içinde kullanılır.)

setInterval (fonksiyon adı, zaman aralığı) :Bu fonksiyon iki parametreye sahiptir. Birinci parametresine tekrar etmesini istediğimiz fonksiyonumuzun adını, ikinci parametresine ne kadar sürede (mili saniye cinsinden) tekrar etmesini istediğimiz rakamı giriyoruz.

clearInterval() :setIntervalle kurulan döngünün kaldırılmasını sağlar.

Daha önce önyükleyicinin çalışma prensibini anlattığım için fazla ayrıntıya girmeden anlatacağım.

Bu çalışmamızın diğerinden farkı onEnterFrame olay denetleyicisi yerine setInterval fonksiyonunu kullanmamız. Kodlamaya yeni başlayanlar genellikle onEnterFrame kullanmalarına rağmen iyi bir seçim değildir. System kaynakları fazla kullanılacağından onEnterFrame yerine setIntervali kullanmanız daha doğru olacaktır.

Kodlarımıza geri dönecek olursak onyukleyici adında bir fonksiyon tanımladık ve ön yükleme için gerekli kodlarımızı yazdık. Bu foksiyonu zamanlayıcı değişkenine atadığımız setInterval fonksiyonu ile 10 milisaniyede bir çağırdık. Yükleme bitiğinde zamanlayıcı değişkenini clearInterval fonksiyonu ile kaldırdık.

Yükleme gerçekleşene kadar yani toplam byte ile yüklenen byte bir birlerine eşit olana kadar. En başta xscale özeliğine 1 değerini atadığımız barçubukmc’nin _xscale özeliğini yuzde değişkenine bağlıyoruz, yükleme boyunca barcubuğu sağ tarafa doğru uzayacaktır.(oluştururken verdiğimiz width değeri kadar uzar) yuzde _txt’mize ise yuzde değişkenini yazdırıyoruz ve "+" operatörü ile "%" işaretini ekliyoruz.

Çok basit bir şekilde animasyonlu preloader yaptık. Daha farklı animasyonları şu şekilde yapabilirsiniz. Bir movie clip oluşturun, içene 100 frame’lik bir animasyon ekleyin. Movie clibinizin referans ismi’ne (instance name) mc yazın, kod satırımızda da barcubuk_mc satırını silip, mc.gotoAndStop(yuzde) satırını ekleyin.

Artık yapacağınız animasyonlar sizin hayal gücünüze kalmış olur.

Preloaderların nasıl yapıldıkları hakkında bilgi edindiniz. Birazda doğabilecek sorunlardan bahsedelim. İnternet sitemize tıkladığımızda önyükleyicinizdeki animasyonun veya yüzde sayılarının düzgün bir şekilde çalışmasını istersiniz.

Maalesef bu her zaman mümkün olmuyor. Bazen bar çubuğumuz hiç gözükmez bazen de birden dolar, eğer ön yüklememizi internet sayfamızın devamı niteliğinde yaptıysak bu bizim için hayal kırıklığı olabilir. Çalışmanızın içeriği, internet hızımızın azizliği, önyükleyicmizi koyduğumuzun frame de imaj dosyaları kullanmanız, attachmovie varsa veya kütüphaneden çektiğiniz dosyanın linkage kısmında export in first frame işaretliyse, component kulandıysak bu tür sebeplerden dolayı önyükleyicinizde sorunlar yaşayabiliriz.

Animasyonunuzun kesintisiz oynamasını istiyorsanız, aşağıdaki kodlamayı kod satırınıza ekleyebilirsiniz.

if(yuzde%25==false){
mc.play();
}

Yukarıdaki kodumuzu biraz açalım. Toplam boyutla yüklenen boyutun oranlanmasından ettiğimiz yüzde değişkeninin 25 ile bölümünden kalanı alıyoruz.(% sayının modununu alır.)Kalan 0 değerinin döndürdüğü zaman alttaki satırlar çalışacaktır. Eğer yuzde değişkenin 25 ile modunu alacaksak 4 sefer 0 değerini döndürür.

Yükleme süresince 4 sefer if satırı true değerinin döndürecek ve altındaki satır 4 defa çalışacaktır. Bu sayede yüzde sayılarını direk yansıtmak yerine çalışmamızın %0, %25, %50, %75 kademelerinde animasyonumuzu devam ettiririz. Görsel açıdan bir bozulma ile karşılaşmayız.

Diğer makalemde anlatacağım MovieClipLoader sınıfını kullanarak da önyükleyicilerinizin düzgün çalışmasını sağlayabilirsiniz.