Preloading Uygulaması

Gerçek zamanlı bar oluşturma prensipleri aynıdır. Yüklenen karelerin yüklenecek karelere bölümünün 100 ile çarpılma esasına dayanır. Önce alttaki butona tıklayarak örneğe bir göz atın.

Bar görünümü önizleme

DOWNLOAD

1- Üç katman oluşturun. Üstteki katmana aksiyon, altındaki yüzde ve en alttakine bargrafik adını verin.

2- Yüzde katmanın ilk karesine yükleniyor % yazın ve hemen yanına küçük bir dinamik metin kutusu ekleyin. Metin kutusunu seçin properties panelinde sağ alttaki variable alanına kutu yazın.(instance adı değil)

3- Şimdi bargrafik katmanına gelelim. Dikdörtgen aracı ile sahneye ince uzun bir dikdörtgen çizelim. Bu dikdörtgenin iç kısmını tek tıklama ile seçelim.(dış kenarlar dahil edilmeyecek)

İç kısım seçilmişken klavyeden F8 tuşuna basın. Açılan panelden movie clip seçeneğini işaretleyin.İnstance name kutusuna bar adını yazalım.Şimdi bu film klibinin merkez noktası tam ortası olacaktır.Bu durumda bar orta noktadan itibaren ilerleyecektir. Biz en soldan sağa doğru ilerlemesini istiyoruz. Bu durumda merkez noktasını en sola almamız lazım. Bunu 2 şekilde yaparız.

- En pratik yol F8 tuşuna basıp film tanımını yaparken kutunun sağ alt kısmındaki registration alanını kullanmaktır. Alttaki resimde göreceğiniz gibi varsayılan merkez noktası tam ortasıdır.Bunun hemen sol tarafındaki kutuya tek tıklama ile merkez noktasını en sol kısma almış olursunuz.

- İkinci yol sembole çevrilen barı seçip araç kutusunda free transform aracını tıklamaktır. Buna tıkladığınızda klibin etrafı seçilecektir.Fare ile orta noktadaki daireyi çekerek en sola getirin.

Klibin merkez noktasını sola aldıktan sonra yine klibi tek tıklayarak seçin ve properties paneline bakın, burada klip eninin yazıldığı "H" kutusunun karşısındaki değeri silip 2 yazın.Böylece klip 2. piksellik genişlikten itibaren başlayacaktır.

4- Herşey hazır, artık kodları yazalım. Aksiyon katmanında 1. kareyi seçerek script panelini açın. Şu kodları yazın:

yuklenen=_root.getBytesLoaded();
filmboyutu=_root.getBytesTotal();
bar._xscale=Math.round((yuklenen/filmboyutu)*100);
kutu=bar._xscale;

Önemli Uyarı= Şayet animasyonda tek sahne değil birden fazla sahne varsa _root yerine level0 yazmalısınız. Aksi takdirde sadece 1. sahnedeki animasyon boyutu esas alınır

İlk dizinde yüklenen animasyonun byte cinsinden miktarını alıyoruz.

İkinci dizinde yüklenmesi gereken byte miktarını alıyoruz.

Üçüncü dizinde basit bir matematik kuralını uyguluyoruz. Yüklenen byte miktarını yüklenecek byte miktarına bölüp 100 ile çarparsak yüzde değerini bulunur. Math.round((yuklenen/filmboyutu)*100) Buradaki Math.round çıkacak küsuratlı değeri en yakın tamsayıya yuvarlaması içindir.

Çıkan bu değeri bar klibinin _xscale değeri olarak atıyoruz. Böylece bar yüklenme değeri arttıkça sağa doğru ilerliyor.

Son olarak aynı değeri son dizinde kutu değişkenine atayarak dinamik metin kutusunda yüzde değerini rakamsal olarak görüyoruz.

5- Şimdi aksiyonlar katmanına iki keyframe daha ekleyin ekleyin.3.karedeki keyframe`i seçin ve properties panelinden basla etiket (label) adını verin.Ve bu 3. kare dahil olmak üzere asıl animasyonunu hazırlayın.

Aynı katmanda 2. kareyi seçin ve şu kodları yazın:

if (yuklenen==filmboyutu) {
gotoAndPlay("basla");
} else {
gotoAndPlay(1);
}

Bu bölümü anlamak kolaydır. Flash 2 kareye geldiğinde yüklenen byte miktarı ile yüklenmesi gerekeni karşılaştıracak bu değer eşit ise basla etiketli kareye geçerek animasyonu gösterecektir, eşitlik yoksa 1. kareye gönderilecek yüklenme işi devam edecektir.

Yukarıdaki çalışma flash5 versiyonundan itibaren her versiyonda kullanılabilir.Şayet flash-mx ve üstü versiyon kullanıyorsanız çok daha pratik bir kod grubu kullanabilirsiniz.

Bu çalışmada 1.karede bar ve yüzdeyi gösteren dinamik metin kutusu ,basla etiket ismine sahip ikinci karede ise asıl animasyonumuz mevcuttur.1.kareye alttaki kodları atayıp aynı çalışmayı daha kısa bir yol ile oluşturabilirsiniz:

this.onEnterFrame=function(){
yuklenen=_root.getBytesLoaded();
filmboyutu=_root.getBytesTotal();
if (yuklenen==filmboyutu) {
gotoAndPlay("basla");
delete onEnterFrame;
} else {
bar._xscale=Math.round((yuklenen/filmboyutu)*100);
kutu=bar._xscale;
}
}
stop();

DOWNLOAD