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’ :D ). 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:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
| 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 :D ). 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 :lol: 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: