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:

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

02
03 // deklarasi variabel (optional, ga perlu sebenarnya) :
04 var ukuranTerload:Number;
05 var ukuranTotal:Number;
06 var teks_persentase:String;
07
08 /* *************************************************
09 // fungsi onEnterFrame berikut akan dieksekusi berulang2
10 // selama movie ini masih berada di Frame 1
11 // kemudian jika byte yg sudah diload = total byte
12 // maka movie akan pindah ke Frame 2, gotoAndStop(2)
13 *********************************************** */
14
15 onEnterFrame = function()
16 {
17 ukuranTerload = getBytesLoaded();
18 ukuranTotal = getBytesTotal();
19 teks_persentase = "Loading " +
Math.round(1000*(ukuranTerload/ukuranTotal))/10 + "%";
20 mc_bar._xscale = 100*ukuranTerload/ukuranTotal;
21 if(ukuranTerload == ukuranTotal)
22 {
23 gotoAndStop(2);
24 }
25 }

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:

01 stop(); //supaya berhenti di frame 1 ini
02
03 // deklarasi variabel (optional, ga perlu sebenarnya) :
04 var ukuranTerload:Number;
05 var ukuranTotal:Number;
06 var teks_persentase:String;
07
08 /* *************************************************
09 // fungsi onEnterFrame berikut akan dieksekusi berulang2
10 // selama movie ini masih berada di Frame 1
11 // kemudian jika byte yg sudah diload = total byte
12 // maka movie akan pindah ke Frame 2, gotoAndStop(2)
13 *********************************************** */
14
15 onEnterFrame = function()
16 {
17 ukuranTerload = getBytesLoaded();
18 ukuranTotal = getBytesTotal();
19 teks_persentase = "Loading " +
Math.round(1000*(ukuranTerload/ukuranTotal))/10 + "%";
20 mc_bar._xscale = 100*ukuranTerload/ukuranTotal;
21 if(ukuranTerload == ukuranTotal)
22 {
23 gotoAndStop(2);
24 }
25 }

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.