1 Flash Dersleri Yaklaşık 1 Dakikada Preloader Oluşturmak Sat Nov 06, 2010 10:27 pm
1 dakikada preloader nasıl oluşturulur diyorsanız, çok kolay bir yöntemi sizlerle paylaşmak istedim.
Burada pek çok preloader örneği mevcut, onlardan beğendiğiniz birisini bilgisayarınıza kaydetmeniz gerekiyor.
[You must be registered and logged in to see this image.]
İlk olarak buradan GIF animasyonlu preloader'imizi yaratıyoruz. Binlerce renk ve form olarak preloader animasyonu oluşturmak mümkün.
Yalnız birşeyi gözden uzak tutmamak gerekir: Arkaplan ve yapılacak olan preloader'un renklerinin seçilebilir olması lazım.
[You must be registered and logged in to see this image.]
Ajaxload.info sitesinden yukarıdaki resimde belirtildiği gibi hazırlıyoruz.
Indicator Type: yazan açılır menüden tercihimizi yapıyoruz. Preloader'umuzun şeklini belirliyoruz. Daha sonra arkaplan rengini ayarlıyoruz. "Generate it!"e basıyoruz ve aşağısında "Download it!" yazan yere basıyoruz. GIF'imizi bu sayede tamamlamış oluyoruz yani, buradan masaüstünde boş bir dosyaya alıyoruz. Daha sonra Flash'ta yapmamız gereken işlemlere başlıyoruz.
[You must be registered and logged in to see this image.]
Menu başlığında Insert > New Symbol diyoruz gelen pencerenin içine preloader yazıyoruz.
[You must be registered and logged in to see this image.]
Dışarıda dosya içine aldığımız Ajax-loader'umuzu File > Import > Import Stage diyerek açılan hazırladığımız boş preloader (yani az önce hazırladığımız Insert > New Symbol preloader) içine (stage) import ediyoruz. Preloader resimleri sıralı olarak frame içerisinde yerlerini alacaklardır.
[You must be registered and logged in to see this image.]
Ana sahneye dönüyoruz kütüphaneden Preloader movie klibini sahneye alıyoruz, bar kısmında preloader ve text'imiz yer almakta.
[You must be registered and logged in to see this image.]
Sonra text için "Dynamic Text" yapıyoruz ve Instance Name olarak Ttext yazıyoruz. Aşağıdaki resme bakıp yapabilirsiniz.
[You must be registered and logged in to see this image.]
Daha sonra resim layerımızda 1. frame boş, 2'nci frame'mize dışardan kütüphaneye resim alıp onu 2. framede sahneye koyuyoruz.
Actions layer'ının 1. frame'ine tıklıyoruz aşağıdaki kodları oraya yapıştırıyoruz.
onEnterFrame = function () {
var preloader = this.getBytesLoaded();
var total = this.getBytesTotal();
var yuzde = preloader/total;
Ttext.text = Math.round(yuzde*100)+"%";
if (preloader>=total && total>4) {
this.gotoAndStop(2);
delete onEnterFrame;
}
};
Hepsi bu. Kolay gelsin.]
Burada pek çok preloader örneği mevcut, onlardan beğendiğiniz birisini bilgisayarınıza kaydetmeniz gerekiyor.
[You must be registered and logged in to see this image.]
İlk olarak buradan GIF animasyonlu preloader'imizi yaratıyoruz. Binlerce renk ve form olarak preloader animasyonu oluşturmak mümkün.
Yalnız birşeyi gözden uzak tutmamak gerekir: Arkaplan ve yapılacak olan preloader'un renklerinin seçilebilir olması lazım.
[You must be registered and logged in to see this image.]
Ajaxload.info sitesinden yukarıdaki resimde belirtildiği gibi hazırlıyoruz.
Indicator Type: yazan açılır menüden tercihimizi yapıyoruz. Preloader'umuzun şeklini belirliyoruz. Daha sonra arkaplan rengini ayarlıyoruz. "Generate it!"e basıyoruz ve aşağısında "Download it!" yazan yere basıyoruz. GIF'imizi bu sayede tamamlamış oluyoruz yani, buradan masaüstünde boş bir dosyaya alıyoruz. Daha sonra Flash'ta yapmamız gereken işlemlere başlıyoruz.
[You must be registered and logged in to see this image.]
Menu başlığında Insert > New Symbol diyoruz gelen pencerenin içine preloader yazıyoruz.
[You must be registered and logged in to see this image.]
Dışarıda dosya içine aldığımız Ajax-loader'umuzu File > Import > Import Stage diyerek açılan hazırladığımız boş preloader (yani az önce hazırladığımız Insert > New Symbol preloader) içine (stage) import ediyoruz. Preloader resimleri sıralı olarak frame içerisinde yerlerini alacaklardır.
[You must be registered and logged in to see this image.]
Ana sahneye dönüyoruz kütüphaneden Preloader movie klibini sahneye alıyoruz, bar kısmında preloader ve text'imiz yer almakta.
[You must be registered and logged in to see this image.]
Sonra text için "Dynamic Text" yapıyoruz ve Instance Name olarak Ttext yazıyoruz. Aşağıdaki resme bakıp yapabilirsiniz.
[You must be registered and logged in to see this image.]
Daha sonra resim layerımızda 1. frame boş, 2'nci frame'mize dışardan kütüphaneye resim alıp onu 2. framede sahneye koyuyoruz.
Actions layer'ının 1. frame'ine tıklıyoruz aşağıdaki kodları oraya yapıştırıyoruz.
onEnterFrame = function () {
var preloader = this.getBytesLoaded();
var total = this.getBytesTotal();
var yuzde = preloader/total;
Ttext.text = Math.round(yuzde*100)+"%";
if (preloader>=total && total>4) {
this.gotoAndStop(2);
delete onEnterFrame;
}
};
Hepsi bu. Kolay gelsin.]