Photoshop Magazin
 


Flash CS4 Preloading Uygulamaları

01 September 2009 | Sayı: Sep 2009
 
1 2 3 4 5
 

Genel
İnternette 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.

Birinci Aşama
Projemizin ilk aşamasında iki adet sahne oluşturacağız. Bunu oluşturabilmek için “Window/OtherPanel/Scene” panelini aktif yapmamız yeterli olacaktır. Karşımıza çıkan diyalog penceresinde otomatik olarak “Scene1” sekmesi işaretlenmiş durumdadır. Burada oluşturmamız gereken “Scene 2” sekmesinide alt menüden ‘Yeni sahne oluştur’ butonumuzla oluşturuyoruz.

Flash Scene2’yi var olan Scene1 sahnesinden 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 bir Anasahne adını verelim. “Scene2” adını da çift tıklayarak “preloader”. ismi ile tanımlayalım.

Sonrasında ise 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. Bu uygulamamızda ben sahneleri kullandım ama isteğe göre yeni bir sahne açmadan da bu uygulamaları gerçekleştirebilirsiniz.

Preloading Sahnesi
Artık anasahnedeki tasarıma girmeden önce, Preloading sahnemizi oluşturmaya başlıyalım. Bu sahnenin 1.framendeyken “Insert/New Smybol” komutu ile yeni bir movieClip oluşturalım. ‘Loading’ diye isimlendirdikten sonra movieClip’in içerisine girelim. Burada da 5 adet layer oluşturacağız. Bu MovieClip’in içerisinde grafik desteğimizi tamamlamak için 5 yeni katman oluşturacağız.

Bizim giriş ekranımız olacak ve yüklenen byte’ı hesaplayıp animasyonun toplam byte’ına bölüp yüklenen yüzdeyi ekrana yazdıracağız, bunun yanında da ‘Flash CS4’ logosunu bu yüzde ile ufak bir maske ile dolduracağız. İlk oluşturacağımız katmana ‘yüzde’ adını verelim. ‘YÜZDE’ Layerında Text Tool seçip, Properties(özellikler) panelinden text kutusu ayarlarını bu şekilde değiştirelim.

• Dynamic Text ;
• Trebuchet MS font ;
• Anti - Alias for animation ;
• Var: yuzde yazalım.
Sonrasında 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.

YÜZDE Layerının üstünde bu seferde YAZI layerı oluşturalım. Ve ;
• Static Text ;
• Trebuchet MS fontu ;
• Use device fonts ise karakter modu seçelim.
Alttaki katmana yazmış olduğumuz “Yükleniyor…”
yazısını ‘Convert to Symbol’ ile MovieClip yaparak 5 frame varken 5 frame göstermeyerek 10.framede aynı movie klip içinde 10.cu keyframden 1.keyframe ‘e ‘gotoAndPlay’ diyerek bir ‘loop’ döngü oluşturuyoruz.

 

Loading
Sıra geldi doldurulacak olan logonun ilk görünür hale gelmesini sağlamaya. ‘Logo %10’ isimli yeni bir layer katmanı açıyoruz ve bu FLASH CS4 logosunun vektörel halini import edip sahnemizin üzerindeki yerine yerleştiriyoruz.
Sonrasında ‘Convert to Smybol’ ile MovieClip olarak kaydettikten sonra Alpha’sını %10 a getirerek elde ettiğim şeffaf dolacak olan logomuzu oluşturmuş oluyoruz.

Daha sonra bir üsttede logo adlı bir layer açıp ona da aynı Logo %10’daki MovieClip’i CTRL-C ile kopyalayıp bu logo layerında ‘Paste in Place’ diyerek aynı yere kopyalayıp Alphasını %100 yapalım. Çünkü bu maskelenecek olan layer ve maske doldukça logo net şekilde gözüksün isteyeceğiz.

Maskeleme
Sıra alpha’sı %100 logonun maske alanında kaplanması bölümüne geldi. Bu katman da altta gösterdiğimiz 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’ verdik. Son olarakta maske layerına sağ tıklayarak ‘mask ol’ diye tanımladık.

Kodlar
Tasarım kısmını tamamladık sayılır. Şimdi yüzdeyi hesaplayıp Dynamic Text’e yazacak Actionscript kodumuzu yazmaya geldi sıra.


Bu içinde bulunduğumuz MovieClip’ten sahneye geri dönelim ve bu MovieClip’e 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).

Detaylar
Kodları detaylı incelersek bu kodun ilk satırında movieClip 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ık. Daha sonra toplam yüklenen dosya boyutunu da yüklenen adlı bir değişkene.Ufak bir hesap ile yüklenen byte miktarının toplama yüzde oranını bulduk ve yüzde değişkenine yanına yüzde(%) sembolü ile atadık.

Buradan gelen hesap adlı yüzde miktarımı da maske olacak maske_mc movieClip’in 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 movieClip’in yerine göre tam %100 dolduğunda logoyu tamamlayan yükselmeyi elde etmeye çalıştık.
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 deyip simulate download ile preloadingi görün. Simulate Download da 56K veya DSL ayarları seçili olduğundan emin olun.

Test
Böylelikle Preloading’imizin hep birlikte 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.

ActionScript Algoritması
Kısaca Özetlersek, Flash preloader yapımı oldukça basit bir mantığa dayanmakta. Öncelikle Action Script için algoritmamızı kuralım.
• İlk olarak toplam byte’ı tutan bir değişkene ihtiyacımız var.
• Yüklenmiş byte’ı tutan bir değişkene ihtiyacımız var.
• Yüzde ( yüklenmiş / toplam ) değişkenine ihtiyacımız var.
Flash CS4 ile sitemizde ilk frame’imize preloader’ımızı ekleyelim. biraz önceki örnekte sahneler arasında gerçekleştirmiştik. bu örneğimiz ise aynı sahne üzerindeki nesnelerimiz için...

İlk frame’de toplam byte’a ulaşıncaya kadar göstereceğimiz animasyon / yazı (movie Clip) ve yüklenen %’yi göstereceğimiz ‘dynamic’ bir text’e ihtiyacımız var. Şimdilik ilk frame’imize sadece yükleniyor yazalım ve boş bir ‘dynamic test’ açalım. dynamic text in instance name’ine yuzde_txt yazalım. Daha sonra ilk frame’in actions penceresine aşağıdaki kodları yapıştıralım.

onEnterFrame=function(){
var toplamBoyut:Number=_root.getBytesTotal();
var yuklenenBoyut : Number =_root.getBytesLoaded();
if(yuklenenBoyut= =toplamBoyut){
delete onEnterFrame
play();
}else{
var yuzde : Number = Math.floor ((yuklenenBoyut/
toplamBoyut)*100);
yuzde_txt.text=yuzde
}
}
stop();

Kodları İnceleyelim


onEnterFrame : Bir movieClip olay denetleyicisidir. Timeline çizgisinin her frame geçişinde çağrılır.
getBytesTotal(): MovieClip sınıfının bir metodudur. Toplam dosya boyutunu byte olarak gösterir.
getBytesLoaded(): MovieClip sınıfının bir metodudur. O ana kadar yüklenen dosya boyutunu byte olarak gösterir.
if / else : Koşul
Math.floor : Matematik kütüphanesi ile yüzenin ondalık kısmını yuvarlar. Kesirli sayılar gözükmez textimizde.
play(): İle parametre olarak gönderilen frame’e geçiş yapılır.

Final
Biraz önce vermiş olduğumuz örnekler gibi bir çok yükleniyor paneli oluşturmanız veya internette bulmanız mümkün.
Burda dikkat edilmesi gereken önemli konulardan bir tanesi oluşturmuş olduğunuz web sitesine en uygun ve doğru yükleniyor panelini eklemek.

Yani kısacası hayal gücünüzü nasıl kullandığınızla ilgili. Şimdiden herkese kolay gelsin. Görüşmek üzere...

 

September 2009

 


Flash