HariesDesign.com Berikut ini akan saya jelaskan bagaimana membuat preloader sederhana dengan indikator bar berjalan seperti terlihat pada animasi berikut ini:

Preloader digunakan sebagai indikasi load movie atau animasi yang akan ditampilkan dengan animasi proses, bisa berupa bar yang berjalan atau prosentase.

Berikut cara membuatnya :

Langkah 1

Buka dokumen baru dan buat layer seperti terlihat pada gambar berikut :

Langkah 2 

Pada 'Tools Panel' kotak warna/colors pilih warna sesuai keinginan anda

Langkah 3

Kemudian pilih Rectangle tool (R) pada tool panel, pilih "hairline" untuk type garisnya, setelah itu buat kotak memanjang, kotak ini digunakan sebagai indikator bar berjalan preloader 

Langkah 4

Pastikan letak kotak tersebut berada pada koordinat sebagai berikut

Anda bisa mengaturnya melalui Properties panel, dengan klik kotak terlebih dahulu (V)

Langkah 5

klik pada outlane bar/kotak, dan tekan "Ctrl+X" atau Edit>cut

Langkah 6 

Kunci bar layer, dan buka kunci frame layer, kemudian tekan "Ctrl+V" atau "Edit > Paste in place" , pastikan kotak tersebut berada pada layer yang berbeda yaitu layer frame.

Langkah 7

Kunci frame layer dan buka kunci bar layer, kemudian  pilih  "Modify >  Convert to symbol" atau tekan (F8)

Langkah 8 

Masih dalam keadaan aktif/terseleksi movie clip yang baru dibuat ,pada kotak properties beri nama "LoadingBar" pada movie clip tersebut

Langkah 9 

Buat layer baru dan beri nama placeholder. Layer ini digunakan untuk meletakkan movie dari luar (site anda). Site anda akan di load setelah proses preloader selesai (hanya sekali)

Langkah 10 

Buat movie clip kosong dimana akan diletakkan site anda dengan cara pilih Insert > New Symbol , beri nama dengan empty mc, pilih mode movie clip kemudian tekan OK.

Langkah 11 

Buka pada library ( Windows > Library ) dan anda akan melihat empty mc , drag atau pindahkan movie clip tersebut ke scene1 pada layer placeholder layer . Regristation point sangat penting untuk meletakkakkan atau proses dari site/external swf  anda yang akan diproses setelah preloader selesai proses. letakkan atau buat pada pojok kiri atas

Langkah 12 

Selagi movie clip masih terseleksi, buka Properties panel dan beri nama pada instance : siteLoader 

Langkah 13

Kemudian pada Layer pertama atau actions layer , buka Windows > Actions paste script berikut

siteLoader.loadMovie("http://www.hariesdesign.com/mysite.swf");
loadingBar._xscale = 1;
loadingBar.onEnterFrame = function() {
kBytesLoaded = this._parent.siteLoader.getBytesLoaded() / 1024;
kBytesTotal = this._parent.siteLoader.getBytesTotal() / 1024;
percentage = Math.round(kBytesLoaded / kBytesTotal * 100);
this._xscale = percentage;
if (percentage == 99) {
delete this.onEnterFrame;
}
}

Anda bisa merubah alamat file external swf/file swf yang akan di load setelah preloader, anda harus mengikut sertakan alamat dengan http:// 

Selesai 

Jika ada pertanyaan untuk Tutorial ini  klik Forum Haries Design