MEMBUAT PRELOADER

Preloader dibuat untuk menunjukan berapa lama proses loading movie anda berlangsung dan kapan selesainya hingga siap untuk dimainkan. Bisa juga untuk memberitahu apakah movie anda diload atau tidak saat ditaruh di website. Anda bisa melihat seperti apa preloader itu dengan membuka game-game yang sudah kami buat di My Game. Setelah anda membuka salah satu dari game kami, lihatlah di game tersebut apakah anda melihat bar yang memanjang kekanan. Jika anda melihatnya itulah yang namanya preloader. Preloader yang anda lihat di game kami adalah preloader berbentuk persegi panjabg. Preloader mempunyai berbagai macam bentuk mulai yang hanya persen saja, ukuran(size) yang sedang diload, persegi panjang, lingkaran, animasi dll. Di bawah ini terdapat beberapa macam tutorial preloader yang dapat anda gunakan :

A. Preloader persen

1. Buatlah sebuah dynamic text dengan Var angka_percent
2. Klik frame 1 dan masukan script berikut :

stop();
onEnterFrame = function () {
 percent = Math.round(_root.getBytesLoaded()/_root.getBytesTotal()*100);
 angka_percent = percent+" %";
 if (percent<=100) {
  _root.gotoAndStop(2);
 }
};

4. Klik frame 2 lalu tekan F7 maka anda akan memasukan frame kosong (Insert Blank Keyframe). Importlah sebuah gambar dan tempatkan pada frame 2. Nantinya gambar yang anda import tadi akan diload ketika preloader dijalankan. Kalau bisa importlah gambar yang sizenya lebih dari 1mb agar kita bisa mengetahui secara pasti apakah preloader yang kita buat berjalan baik atau tidak.

5. Test movie dengan menekan CTRL+Enter. Ketika preloader ini sedang dijalankan pilih menu View dan aktifkan Simulate Download.

Aktifkan Simulate Download untuk mensimulasikan cara kerja preloadernya.

Sourcenya dapat didownload disini

B. Preloader berbentuk batang/persegi panjang :

1. Buatlah 2 buah persegi panjang tanpa garis/outline dengan panjang dan lebar yang sama.

2 buah persegi sama panjang

2. Ubah warna salah satu persegi panjang menjadi berwarna merah, seleksi persegi panjang ini lalu tekan F8 dan ubah menjadi movie clip dengan titik Registration menjadi seperti gambar dibawah ini. Tekan Ok jika sudah selesai. Berikan Instance Name : kotak pada movie clip ini.

Gambar titik Registration

Berikan kotak sebagai Instance Name-nya

3. Ubah warna persegi panjang yang satunya lagi menjadi berwarna hitam
4. Seleksi kedua persegi panjang tersebut dan tekan F8 pada keyboard, akan muncul kotak dialog Convert to Symbol, berikan preloader sebagai Name dan Movie clip sebagai typenya lalu tekan ok

Tampilan kotak dialog Convert to Symbol

5. Klik 2 kali movie clip preloader untuk masuk kedalam stage movie clip preloader dan pastikan kedua persegi panjang didalamnya berada ditengah-tengah stage movie clip preloader.

Gambar stage dalam movie clip preloader

6. Masih berada didalam stage movie clip preloader, klik frame 1 dan masukan actionscript berikut :

Total = _root.getBytesLoaded()/_root.getBytesTotal()*100;
if (Total != 100) {
 kotak._xscale = Total;
} else {
 _root.gotoAndPlay(2);
}

7. Insert Keyframe/tekan F6 pada frame 2 dan masukan actionscript berikut pada frame 2 tersebut :

1	gotoAndPlay(1);

8. Sekarang keluarlah dari stage movie clip preloader dengan menekan CTRL+E, klik frame 1 dan berikan script berikut :

stop();

9. Preloader sudah siap untuk dipakai, anda dapat menaruh file-file yamg anda ingin load mulai dari frame 2 dan seterusnya pada stage scene. Karena tidak ada file yang akan diload ketika preloader ini dijalankan maka saya mengimport gambar dan saya taruh diframe 2 (scene)

Gambar frame pada timeline scene

10. Test movie dengan menekan CTRL+Enter. Ketika preloader ini sedang dijalankan pilih menu View dan aktifkan Simulate Download.

Aktifkan Simulate Download untuk mensimulasikan cara kerja preloadernya.

Sourcenya dapat didownload disini

C. Preloader berbentuk lingkaran.

1. Buatlah sebuah objek berbentuk seperti di bawah ini :

2. Seleksi objek tersebut dan tekan F8. Pada panel yang muncul masukkan preloader sebagai name dan movie clip sebagai type lalu tekan ok.
3. Seleksi movie clip preloader di stage dan tekan Ctrl+F3. Pada panel properties yang muncul masukkan preloader sebagai instance name.
4. Klik kanan movie clip preloade dan pilih edit untuk masuk ke dalam stagenya.
5. Klik frame 1 dan tekan F9. Pada panel yang muncul masukkan script berikut :

stop();

6. Gambarlah objek berikut di frame 2 :

7. Gambarlah objek berikut di frame 3 :

8. Gambarlah objek berikut di frame 4 :

9. Gambarlah objek berikut di frame 5 :

10. Gambarlah objek berikut di frame 6 :

11. Gambarlah objek berikut di frame 7 :

12. Gambarlah objek berikut di frame 8 :

13. Gambarlah objek berikut di frame 9 :

14. Gambarlah objek berikut di frame 10 :

15. Gambarlah objek berikut di frame 11 :

16. Tekan Ctrl+E untuk kembali ke stage scene 1. Buatlah 3 buah dynamic text dan berikan masing-masing var pada panel properties : persen_tampil, loaded, total. Buatlah sebuah static text bertulisan /
17. Letakkan masing-masing objek seperti gambar di bawah ini :

18. Klik frame 1 dan masukkan script berikut pada panel actions :

stop();
total = Math.round(_root.getBytesTotal())+" KB";
angka = 0;
persen_tampil = 0+"%";
_root.onEnterFrame = function() {
 loaded = Math.round(_root.getBytesLoaded())+" KB";
 if (Math.round(_root.getBytesTotal())<=Math.round(_root.getBytesLoaded())) {
  gotoAndStop(2);
 } else {
  persen = Math.round(Math.round(_root.getBytesLoaded())/Math.round(_root.getBytesTotal())*100);
  if (persen%10 == 0) {
   angka = (persen/10)+1;
   preloader.gotoAndStop(angka);
   persen_tampil = persen+"%";
   angka++;
  }
 }
};

19. Klik kanan frame 2 dan pilih Insert Blank KeyFrame. Masukkan gambar/konten di frame 2 ini.
20. Klik frame 2 dan masukkan script berikut pada panel actions:

stop();

21. Test movie dengan menekan CTRL+Enter. Ketika preloader ini sedang dijalankan pilih menu View dan aktifkan Simulate Download.

Belajar Bersama

Ad 728×90px

Our blog