Animasi Preloader Flash

20Des07

Membuat aplikasi atau animasi Flash yang ditujukan untuk disimpan di website, tidak sebebas membuat Flash untuk desktop (dari Harddisk atau CD). Masalahnya, kecepatan transfer datanya jauh berbeda kalau langsung baca di harddisk dibandingkan lewat jaringan internet (apalagi bagi para ‘fakir bandwith’ ). Maka dari itu umumnya Flash yang ada di internet menggunakan tampilan awalnya tulisan loading…. Karena file swfnya harus diload dulu sama si browser, kalau buka website HTML kan diload juga ya? cuman karena isinya tulisan jadi loadingnya cepet (karena cuma sekian KiloByte), beda kan kalau isinya full gambar atau full flash? cmiiw.

Tujuan utama preloader sih sederhana: supaya orang yang mengakses halaman Flashnya itu tau kalau Flashnya sedang diload dulu. Bayangkan kalau tidak ada preloader, mungkin orang itu mengira halamannya kosong, padahal itu karena loading halaman Flashnya belum selesai. Akan lebih baik lagi kalau ada keterangan progress loading swf-nya. misalkan ada keterangan yang diload sudah sekian % (persen), atau sekian KiloByte dari sekian KiloByte, atau ada animasi yang merepresentasikannya (yang paling sederhana seperti progress bar), dll.

#1 buat File Flashnya

Kosongkan Frame 1 atau geser movie sebenarnya ke Frame 2 dst, karena di Frame 1 ini akan diisi untuk tampilan preloader. Kemudian, supaya animasi ‘progress bar’nya kelihatan (ngga tiba-tiba 100%) berarti file size Flashnya harus besar, jadi sengaja Saya masukkan file gambar yg sizenya 1MB di Frame 2, hehehe… (lagian ini kan buat dummy-nya aja).

Jadi begini, ketika Flashnya dijalankan movie akan berhenti di Frame 1 yg menampilkan progress loading file-nya, terus kalau udah selesai loadingnya, movie pindah ke Frame 2.

#2 buat Tampilan Preloadernya

 

Untuk latihan ini mah, buat yang sederhana aja dulu… jadi di tampilannya ada progress bar dan tulisan loading sekian %-nya. Pertama untuk progress bar-nya buat dulu movieclip (klik menu insert>new symbol>movieclip>beri nama). Kemudian copykan ke stage, di propertiesnya beri movieclip tersebut instance name yg unik (nama instance ini nanti akan dipanggil di actionscript, misalkan di Flash yg saya buat namanya mc_bar).

Kedua untuk tulisan loadingnya buat sebuah dynamic text, beri variable-nya (disini misalkan nama variabelnya teks_persentase).

 

Ketiga, berikan ActionScript di Frame 1 ini sebagai berikut:

stop(); //supaya berhenti di frame 1 ini

// deklarasi variabel (optional, ga perlu sebenarnya) :
var ukuranTerload:Number;
var ukuranTotal:Number;
var teks_persentase:String;

	/*	*************************************************
		// fungsi onEnterFrame berikut akan dieksekusi berulang2
		// selama movie ini masih berada di Frame 1
		// kemudian jika byte yg sudah diload = total byte
		// maka movie akan pindah ke Frame 2, gotoAndStop(2)
		***********************************************	*/

onEnterFrame = function()
{
	ukuranTerload = getBytesLoaded();
	ukuranTotal = getBytesTotal();
	teks_persentase = "Loading " + Math.round(1000*(ukuranTerload/ukuranTotal))/10 + "%";
	mc_bar._xscale = 100*ukuranTerload/ukuranTotal;
	if(ukuranTerload == ukuranTotal)
	{
		gotoAndStop(2);
	}
}

Sedikit keterangan tentang script diatas, fungsi getBytesLoaded() akan mereturn jumlah byte yang sedang didownload, fungsi getBytesTotal() akan mereturn jumlah byte total file tersebut. Math.round itu untuk convert angka desimal ke integer terdekat (sengaja Saya buat begitu supaya ada angka dibelakang koma 1 digit ). Terakhir, property _xscale itu untuk resize ukuran movieclip mc_bar sesuai total persentasenya.

Terakhir, mengingat prinsip utama preloader, jangan berikan animasi berat2 untuk preloadernya, karena kalau gitu mah sama aja dengan loading preloader tapi ok juga: preloader dari preloader.

#3 Simulasikan Streamingnya

Untuk melihat hasil Flashnya, klik menu control>test movie (atau tekan ctrl+enter). Langsung ke Frame 2? tidak kelihatan waktu loadingnya? Hehehe…. untuk membuat simulasinya, setelah keluar movie hasil Flashnya tersebut, klik menu view>download settings>terus pilih koneksi yg mau disimulasikan, kemudian pilih menu>view>simulate download, dan… Jreng 3x… semakin lemot koneksi yg dipilih, semakin lambat si ‘progress bar’-nya penuh. Ya, hasilnya nanti kira-kira seperti inilah:

Contoh flashnya saya upload di:

http://www.box.net/shared/24336ykw0w

 

credits: Andre & Fathah, Flash help panel

Filed under: Flash, Template, Tutorial   |  48 Comments