Merhaba arkadaşlar ;

Bugün internette pekte anlatılmayan ancak aslında actionscript kısmında yeni bir şey olmasada daha önceki preloading projemdeki Actionscript 2.0 uyumlu kodların üzerine logo doldurmalı bir bekleme ekranı tasarımı göstermeye çalışacağım. Adobe 'nin kendi sitesi dahil bugün birçok site bu uygulamayı kullanıyor ve bekleme esnasında yüklenen yüzdeyi bir maske ve xscale kodu ile şirketin logosunu doldurmak çok kurumsal duruyor.Eminim sizde projelerinizde şirketin logosuna uygulamak istersiniz. Ancak orta seviye flash gerektiren bir uygulama olduğunu belirtmek isterim,takıldığınız yerde fla dosyası sondadır indirip bir göz atın.

Hali hazırda olan bir projeniz eğer çok sayıda görsel,yüksek çözünürlüklü fotoğraf,kaliteli loop arkaplan müzikleri ve videolar içeriyorsa büyük bir ihtimal internetten sizin tecrübe ettiğiniz gibi gözükmeyecek yüklenmesi bir süre alacaktır.Bu sürede ziyaretçilere siteye geldiklerini anlatan ve yükleme yüzdesini gösteren bir preloading yani önizleme gösterilmesi Full Flash sitelerimizin en temel erişebilirlik kuralıdır.

Hemen projemizi açalım ve tasarımlarımız olan scene1 ise önyüklemeyi göstereceğimiz Sahnemizi ( Scene2) eklemek için Insert-Scene diyelim. Flash bu sahneyi varolan sahneden sonra göstermek üzere ekleyecektir,preloading ise ilk başta gelmelidir bu yüzden sahnelerin sırasını ve adını değiştirmek için Window-Other Panels-Scene ( Shift-F2) ile alttaki ekranı getirelim.Önce Scene1 sahnemizin adına çift tıklayarak main adını verdim,Scene2 adını da çift tıklayarak preloader.Daha sonrada preloader sahnesini aynı layerlardaki gibi tutup yukarı ilk sıraya getirin ve alttaki gibi olsunlar.Gerektiği yerde Scene silmek içinde o scene seçip panelin altındaki çöp tenekesine tıklamanız veya sürükleyip bırakmanız yeterli.

Şimdi main sahnesinde tasarım size ait.Scene panelini kapayalım ve sahnemizin üstünde WorkSpace yazısının yanındaki yere tıklayıp Preloader seçerek preloader sahnesine gelelim. Bu sahnede 1.frame içindeyken CTRL-F8 ile yeni bir movie klip yaratalım ve bir isim verip içine girelim.Burada da 5 adet layer oluşturacağız. Bu Movie Klip bizim giriş ekranımız olacak ve yüklenen byte'ı hesaplıyıp animasyonun toplam byte ına bölüp yüklenen yüzdeyi ekrana yazdıracağız,bunun yanında da fenerbahçe logosunu bu yüzde ile ufak bir maske ile dolduracağız.

İlk önce gelen layera yuzde adını verelim. YUZDE Layerında Text Tool seçip alttaki properties kısmındaki özelliklerini:

* Dynamic Text ;
* Trebuchet MS font ;
* Anti - alias for animation yazı render modu ;
* Var: yuzde yazalım.

ve daha sonra sahneye sembolik yuzde yazalım. Bu dinamik text adından da anlaşılacağı gibi dışarıdan hesaplatılıp var değişkenine atayarak yazacağımız bir rakam topluluğu olacak.

YUZDE Layerının üstünde bu seferde YAZI layerı oluşturalım. Ve ;

* Static Text ;
* Trebuchet MS fontu ;
* Use device fonts ise karakter render modu seçelim.

alt kısıma "Yükleniyor..." yazalım. Bu yazıyı ben örneğimde seçip F8 ile movei klip yaparak 5 frame varken 5 frame göstermeyerek 10.framede aynı movie klip içinde 10.cu keyframden 1.keyframe 'e gotoAndPlay diyip bir loop sağlayıp yanan sönen yükleniyor yazısı elde ettim,eğer bu kısım zor gelecekse yazıyı yazıp bu kısmı atlayın.

Şimdi doldurulacak olan logonun ilk görünür hali gerekiyor.Logo %10 layerı açtım ve bu Fenerbahçe logosunu(vektörel isterseniz dünkü postumdan indirebilirsiniz)import ile getirip istediğim ölçülerdeyklen F8 ile Movie Klip olarak kaydettikten sonra Alpha'sını %10 a getirerek elde ettiğim şeffaf dolacak olan logodur.

Daha sonra bir üsttede logo adlı bir layer açıp ona da aynı Logo %10'daki Movie Klipi CTRL-C ile kopyalayıp bu logo layerında paste in place diyerek aynı yere kopyalayıp Alphasını %100 yaptım.Çünkü bu maskelenecek olan layer ve maske doldukça logo net şekilde gözüksün isteyeceğim.

Bir üstte ve son olarak yeni bir layer oluşturdum ve adını maske verdm.Bu layerda da altta gösterdiğim gibi logonun tam altına enlemesine logodan büyük kırmızı bir dörtgen çizdim ve movie klip yaparak instance name olarak maske_mc verdim.Son olarakta maske layerına sağ tıklayarak mask diyelim.
Tasarım kısmını tamamladık.Şimdi yüzdeyi hesaplayıp Dynamic Text’e yazacak Actionscript kodumuzu yazmaya geldi sıra. Bu içinde bulunduğumuz Movie Klipten sahneye geri dönelim ve bu Movie Klipe sağ tıklayıp gerekli actions kodlarını vermek üzere Actions panelini açalım.Açılan panelde sağ üstte Actions-Movie Klip panel adına sahip olduğuna emin olun ve alttaki kodu direk copy paste edin(eğer Instance Name de bir değişiklik yapmadıysanız) .

onClipEvent (enterFrame) {
toplam = _root.getBytesTotal();
yuklenen = _root.getBytesLoaded();
hesap = int(yuklenen/toplam*100);
yuzde = ""+hesap+"%";
maske_mc._yscale = Math.round(hesap*-9);
if (yuklenen == toplam) {
gotoAndPlay("main", 1);
}
}

Bu kodun ilk satırında movie clip framede yüklenir yüklenmez bu kodların çalıştırılacağı bilgisi var.İkinci satırda animasyonun toplam(_root) byte'ını hesaplayıp toplam adlı bir değişkene atadım. Daha sonra toplam yüklenen dosya boyutunu da yuklenen adlı bir değişkene.Ufak bir hesap ile yuklenen byte miktarının toplama yüzde oranını buldum ve yuzde değişkenine yanına yüzde(%) sembolü ile atadım. Buradan gelen hesap adlı yüzde miktarımı da maske olacak maske_mc movie klipin boyutuna atamak üzere yscale yani y koordinatı boyunca büyüme miktarına bağladım ve Math.round ile yuvarlayarak gözün algılayabileceği hızda yükselme yapsın istedim.-9 ile de logonun yüksekliği ve movie klipin yerine göre tam %100 dolduğunda logoyu tamamlayan yükselmeyi elde etmeye çalıştım.Sizin burada 9 rakamı yerine başka rakamlar hatta ondalık rakamlar kullanmanız gerekebilir.Unutmayın flashta ondalık rakamlar nokta ile ayrılır : yani 8,5 değil 8.5 yazmanız gerekiyor.Rakamı denemek için CTRL_Enter dedikten sonra bir daha CTRL-Enter diyin ve simulate download ile preloadingi görün.Simulate Download da 56K veya DSL ayarları seçili olduğundan emin olun.

Böylelikle Preloading’imizin tasarımını tamamlamış olduk.Test etmek için eğer 2.frame de bir site içeriğiniz varsa Ctrl-Enter ve Simulate Download ederek yüzde saymasını görebilirsiniz. Eğer herhangi bir içeriğiniz yoksa sonuçta bir preloading yani önyükleme adı üstünde bir içerik yüklenmeli, 2.frame de bazı görseller ( jpeg,gif..) veya mp3 ekleyin ve simulate etmeyi deneyin böylelikle site içeriği de yaratmış olduk, preloaderdaki Dynamic Text bu içeriğin yüklenen yüzdesini verecektir.

Benim örneğimde bir marş ve fotoğraf var bilin bakalım ne :)