Adobe Flex Uygulamalarında Kullanıcı Tanımlı Preloader Oluşturmak

Merhabalar,

Bu yazımızda Flex uygulamalarımızda preloader’ı nasıl özelleştirebileceğimizi inceleyeceğiz. Öncelikle preloader kavramına değinelim biraz. Preloader yani türkçesiyle Önyükleyici, genellikle interaktif web uygulamalarının yüklenme safhasında kullanıcıya uygulamanın yüklenmekte olduğunu bildiren ve bazan uygulama yüklenme yüzdesi hakkında bilgi veren ufak bir programcık olarak tanımlanabilir.

Bizler preloader kavramına daha çok Flash uygulamalardan aşinayız. Flash içerisinde genellikle local kullanılacak olan uygulamalar için çok gerekli değildir preloader, ama söz konusu web olunca preloader kullanmayan bir uygulama ne kulağa hoş geliyor nede göze hoş görünüyor.

Preloader, aslında çok basit bir mantıkla işliyor. Hani ufak programcık olarak tanımladık ya kendisini, işte bu noktada biraz da bu programcığın nasıl çalıştığını inceleyelim.

Flash ile uygulama hazırlanırken preloader ilk kare veya karelerde yer alır. Preloader için yazılan ActionScript kodlarında preloaderın temelini oluşturan iki adet değişken vardır. Bunlardan biri toplam dosya boyutunu tutacak olan değişken, diğeri ise o ana kadar yüklenen dosya boyutunu tutacak olan değişkendir. Bu iki değişken getBytesTotal ve getBytesLoaded isimli iki ActionScript fonksiyonunun döndürdüğü değere bağlanır. İsimlerinden de anlaşıldığı gibi bu foksiyonlardan birisi toplam dosya boyutunu, diğeri ise o ana kadar yüklenen dosya boyutunu öğrenme işlemini gerçekleştirirler.

Preloader kullanan bir Flash uygulaması kullanıcının tarayıcısında çalıştığı anda preloader devreye girer ve uygulama kullanıcının bilgisayarına indirilmeye başlanır (bildiğiniz gibi Flash Player üzerine çalışan dosyalar server tarafında değilde kullanıcı tarafında çalışan dosyalardır). İşte bu anda bizim değişkenlerimize bir takım işlemler yapmamızla birlikte preloaderı başlatıyor ve elimizdeki bu iki değişkeni bir koşul ifadesi içerisinde kullanarak animasyonun yönlendirilmesini sağlıyoruz.

En çok kullandığımız koşul ifadesi olan if-else yapısını kullanarak preloaderımızı tamamlayabiliriz. Eğer sorgu yapıldığı ana kadar yüklenen dosya boyutu, toplam dosya boyutundan küçük ise (if bloğu çalışır) preloader kısmı devam etsin (yani animasyon ilk karede kalmaya devam etsin çünkü yükleme tamamlanmadı). Bu durumda if bloğu gereği kadar işlenir ve şart sağlanmadığı ana ulaşıldığında else bloğu devreye girer. Yani bu iki değer (yüklenen ve toplam dosya boyutu) eşit ise,( ki bu zaten tam olarak yüklenmenin tamamlandığı andır) animasyon ikinci kareye geçsin ve uygulama başlasın’dır preloaderdan beklenen.

Evet kısaca preloader bu mantıkla çalışıyor ve oldukça basit hazırlanabiliyor. Preloader’ın devam ettiği kare vaye kareler stop() komutu ile sınırlandırılmış olmalıdır ve preloader kısmında sahneye koyacağınız ufak animasyonlar ile uygulama önyükleyicisini tamamlamış olursunuz. Tabi çeşitli ActionScript komutlarıyla, kullanıcıya yükleme yüzdesi , yüklenen ve toplam dosya boyutları ve benzeri gibi bilgileri sunarak preloaderınızı daha da anlamlı bir hale getirebilirsiniz.

Flex uygulamalarımızda, Flash’tan farklı olarak preloader kullanmak, programcının insiyatifine bırakılmamıştır. Flex ile geliştirdiğimiz tüm uygulamalara preloader otomatik olarak eklenmektedir. Peki preloaderın hazır olması bizim için bir dezavantajmı? Aslında bir çok noktada hayır. Bunun oldukça fayda sağladığı söylenebilir. Mesela bunlardan bazılarını söylemek gerekirse; herşeyden önce bir preloader hazırlayarak extra bir iş yapmanız gerekmiyor, üstelik standartlara uygun bir preloader hali hazırla uygulamanızı yüklüyor ve bir progres bar ile yükleme oranını görsel olarak kullanıcılarınıza sunabiliyorsunuz.

Ancak dezavantaj sayılabilecek unsurlarda yok değil. Flash ile geliştirmiş olduğumuz uygulamalarımızda preloader kısmını isteğe bağlı olarak kendimiz programlıyor ve istediğimiz gibi tasarlıyorduk. Flex’te ise ilk bakışta tek tip preloader herzaman hoşumuza gitmeyebilir, yada müşterimiz Flex’in preloaderını beğenmeyebilir ve bunun yerine kendi materyallerinin (logosu-slogan-karakter v.b.) küçük bir animasyon ile önyükleme kısmında yer almasını isteyebilir. İşte bu gibi durumlarda preloaderı özelleştirmemiz gerekir. Maalesef Flex uygulamalarımızın preloaderını özelleştirmek Flash’a göre biraz daha zahmetlidir.

Öncelikle bilmemiz gereken husus, uygulamamızın preloaderını özelleştirmek için Flex içerisinde kullanıcı tanımlı bir ActionScript sınıfına ihtiyaç duyuyoruz. Uygulamanın <mx:Application> tagı içerisinde preloader parametresine, preloader için yazacağımız ActionScript sınıfını atayarak preloaderı özelleştirebiliyoruz.

Preloader özelleştirme işlemini iki şekilde gerçekleştirebiliriz. Bunlardan ilki Flex Preloader sınıfının özelliklerini kullanarak varsayılan preloaderının bazı değerlerini değiştirebilir ve hiçbir tasarım ihtiyaç duymadan bu işlemi yapabiliriz. İkinci yöntem de ise, Flash’ta tasarımını ve animasyonunu gerçekleştirdiğimiz Preloaderı, Flex’te kullanarak preloader özelleştirme işlemini gerçekleştirebiliriz. Bu durumda yine Flex Preloader sınıfının özelliklerini kullanıyoruz.

Şimdi her iki yöntem ile de birer örnek hazırlayalım. Öncelikle birinci bahsettiğimiz yolu kullanalım, Flex Builder’da bir proje oluşturalım ve proje klasörümüz içerisinde preloader Class’ımız için ‘Comp’ isminde bir klasör oluşturalım. Comp klasörümüz içerisine Onyukleyici isminde bir ActionScript Class’ı oluşturalım. Oluşturduğumuz Class, DownloadPreloader sınıfı üzerinden işlem yapacağı için bizim sınıfımızın bu sınıfın özelliklerini almalıdır. Bunun için Class’ımızın tanımlandığı satırı aşağıdaki gibi yazmalıyız.

public class Onyukleyici extends DownloadProgressBar

Daha sonra ise Class’ımınızın tanımlayıcı fonksiyonu içerisine aşağıdaki kodları yazarak kaydedelim.

downloadingLabel = "Yükleniyor.."; // Varsayılan değeri Loading
initializingLabel = "Başlatılıyor.."; // Varsayılan değeri Initializing

Class üzerinde yapacağımız işlemler bittiği için artık MXML tarafına geçebiliriz. Projemizin mxml dosyasında <mx:Application> tagı içerisine Preloader parametresine Comp.Onyukleyici yazarak, preloader için kullanılacak sınıfımızı burada belirtelim. Class dosyamızın kodları aşağıdaki gibi olmalıdır.

Onyukleyici.as

package Comp
{
    import mx.preloaders.DownloadProgressBar;

    public class Onyukleyici extends DownloadProgressBar
    {
        public function Onyukleyici()
        {
            super();

            downloadingLabel = "Yükleniyor..";
            initializingLabel = "Başlatılıyor..";
        }
    }
}

Sonra uygulama içerisine bir adet resim gömelim (yüklenme olayını görebilmek için) ve sonra uygulamamızı derleyelim. MXML dosyamızın kodları aşağıdaki gibi olmalıdır.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" preloader="Comp.Onyukleyici">

    <mx:Image source="@Embed(source='assets/Maya7.png')" width="100%" height="100%" />

</mx:Application>

Gördüğünüz gibi uygulama yüklenirken Loading yerine Yükleniyor yazısı ve uygulama başlatılırken (farkedemeyebilirsiniz çünkü hızlı geçen bir işlem) Başlatılıyor yazısı görüntülendi. Uygulamanın çalışan örneği aşağıdadır.

Uygulama yüklenirken yakalama şansımız olmuyor. Ekran görüntüsü aşağıdadır.

Evet aslında, birinci örnekte yaptığımız sadece Preloader yazılarını Türkçe’leştirmek oldu. İkinci örnekte ise Flex’in varsayılan preloaderını hiç kullanmadan Flash ile bir Preloader oluşturacağız ve Flex uygulamamıza yine kendi tanımladığımız bir Class ile bu preloaderı tanıtacağız.

Flash ile hazırlayacağımız kısımda bir logo, yüklenme yüzdesini gösteren bir dynamic text kutusu ve loading bar animasyonu yer alacak. Flash içerisinde sahneye logoyu yerleştirelim ve bunu MovieClip’e çevirelim. Bu MovieClipin kütüphanede üzerine sağ tıklayarak Linkage seçeneğini seçelim ve Linkage Identifier ismine Yukle yazalım.

Daha sonra bu MovieClip içerisine girerek bir adet Dynamic Text kutusu ekleyelim ve bu text kutusunun instance name değerine yukle_text yazalım. Son olarak ta yine MovieClip içerisinde bir loading bar animasyonu hazırlayalım ve Ctrl + Enter ile uygulamayı derleyerek SWF dosyamızı oluşturalım.

Preloader için SWF dosyamızı oluşturduktan sonra Flex Builder’a geçerek yeni bir proje oluşturalım ve bir önceki projedeki gibi projemizde Comp isimli bir klasör içerisine Onyukleyici ismindeki ActionScript Class dosyamızı oluşturalım. Önceki örnekteki gibi Class dosyamız yine DownloadProgressBar sınıfını kullanacak. Bu Class ta; Flash içerisinde preloader kodladığımız gibi preloader kodlayacağız ve SWF dosyamızdaki Yukle Linkage isimli MovieClip içerisindeki yukle_txt text kutusuna yüklemenin yüzdesini göndereceğiz.

Class kodlarımız aşağıdaki gibi olmalıdır.

Onyukleyici.as

package Comp
{
    import mx.preloaders.DownloadProgressBar;
    import flash.display.Sprite;
    import flash.events.ProgressEvent;
    import flash.events.Event;
    import mx.events.FlexEvent;
    import flash.display.MovieClip;

    public class Onyukleyici extends DownloadProgressBar
    {

        [Embed(source="/assets/onyukleyici.swf", symbol="Yukle")]
        public var Yukleyici:Class;

        public var myLoader:MovieClip;

        public function Onyukleyici():void
        {
            super();
            myLoader = new Yukleyici();
            addChild(myLoader);
            myLoader.gotoAndStop(0);
        }

        public override function set preloader(preloader:Sprite):void
        {
            preloader.addEventListener(ProgressEvent.PROGRESS, onSWFDownloadProgress);
            preloader.addEventListener(Event.COMPLETE, onSWFDownloadComplete);
            preloader.addEventListener(FlexEvent.INIT_PROGRESS, onFlexInitProgress);
            preloader.addEventListener(FlexEvent.INIT_COMPLETE, onFlexInitComplete);

            centerPreloader();
        }
        private function centerPreloader():void
        {
            x = (stageWidth / 2) - (myLoader.width / 2);
            y = (stageHeight / 2) - (myLoader.height / 2);
        }
        private function onSWFDownloadProgress(event:ProgressEvent):void
        {
            var t:Number = event.bytesTotal;
            var l:Number = event.bytesLoaded;
            var p:Number = Math.round((l/t) * 19);
            var pForAmount:int = Math.floor(p * 5);
            myLoader.gotoAndStop(p);
            myLoader.yuzde_txt.text = "% " + String(pForAmount) ;
        }
        private function onSWFDownloadComplete(event:Event):void
        {
            myLoader.gotoAndStop(100);
            myLoader.yuzde_txt.text = "100%";
        }
        private function onFlexInitProgress(event:FlexEvent):void
        {
            myLoader.gotoAndStop(100);
            myLoader.yuzde_txt.text = " ";
        }
        private function onFlexInitComplete(event:FlexEvent):void
        {
            myLoader.gotoAndStop(100);
            dispatchEvent( new Event(Event.COMPLETE));
        }
    }
}

MXML dosyamızda ise bir önceki örnekteki gibi önce Preloader için Class tanımlamamızı yapacağız ve ardından yine dosyamıza bir resim gömeceğiz. MXML dosyamızın kodları da aşağıdaki gibi olmalıdır.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" preloader="Comp.Onyukleyici">

    <mx:Image source="@Embed(source='assets/Maya6.png')" width="100%" height="100%" />

</mx:Application>

Evet uygulamızı derlediğimizde gördüğümüz gibi Flash içerisinde oluşturduğumuz Preloader gayet başarılı bir şekilde çalışmaktadır.

 

Yükleme aşamasındaki ekran görüntüsü:

Artık Flex uygulamalarınızda eğer isterseniz kendi hazırladığınız preloaderları kullanabilirsiniz. Kolay gelsin..