07
Jan

Membuat Preloader

Written by admin


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 :

1
2
3
4
5
6
7
8
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 :

1
2
3
4
5
6
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 :

1
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 :

0

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 :

1
stop();

6. Gambarlah objek berikut di frame 2 :

0

7. Gambarlah objek berikut di frame 3 :

0

8. Gambarlah objek berikut di frame 4 :

0

9. Gambarlah objek berikut di frame 5 :

0

10. Gambarlah objek berikut di frame 6 :

0

11. Gambarlah objek berikut di frame 7 :

0

12. Gambarlah objek berikut di frame 8 :

0

13. Gambarlah objek berikut di frame 9 :

0

14. Gambarlah objek berikut di frame 10 :

0

15. Gambarlah objek berikut di frame 11 :

0

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 :

tampil

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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:

1
stop();

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

Sourcenya dapat didownload disini

Apakah tutorial di atas menarik atau bermanfaat bagi anda? Bantulah Warung Flash agar tetap ada dan memberikan tutorial-tutorial yang lebih bagus dan bermanfaat lagi. Silahkan klik link berikut ini untuk lebih jelasnya : Bantu Warung Flash



Bookmark and Share

53 Responses to “Membuat Preloader”

  1. ang Says:

    berfunsi bro….. :) :)
    thanks bro :-* :-*

  2. Schwarzkophf Says:

    Nice blog ..
    Nice posting …
    Thanks for share ! :idea: :idea:

  3. fani Says:

    mo tanya klo preloader yg bentuknya lingkaran gmn caranya? mau donk tutorialnya.. Tq bgt.

  4. admin Says:

    Preloader lingkarannya mau yang berbentuk seperti apa?

  5. fani Says:

    lingkaran yg sederhana aj… jadi ada 2 lingkaran, kemudian klo lg load fill color mengelilingi ring lingkarannya… seperti di http://flashden.net/item/easing-circle-percentage-preloader/43019 . mohon dibantu ya.. TQ bgt…

  6. admin Says:

    Waduhh kalo full actionscript kayak di flashden kami belum bisa bikin :p
    Kami bisanya bikin yang frame by frame. Jadi nanti hasilnya tidak sehalus preloader di flashden :-?

  7. fani Says:

    maksudnya frame by frame? yg kyk preloder biasa gitu?? ya udah gpp d… pengen tau caranya… :respect:

  8. admin Says:

    :I:

  9. fani Says:

    TQ very much… :yeye:

  10. Hidjrah Saputra Says:

    preloadnya tidak kelihatan klo di frame 2 diberi movieclip, kenapa begitu ya?

  11. admin Says:

    Anda sudah test menggunakan Simulate Download kan?

  12. Hidjrah Saputra Says:

    waktu sy test ternya preloadnya kelihatan ketika sudah lebih dari 70%, apa karena movienya terlalu besar?

  13. alitopan Says:

    wah keren banget materinya, pingin nanya mas, ada kagak panduan untuk membuat peta wisata dalam bentuk map? map kalau di click daerahnya terus keluar informasi daerah tersebut. kalau ada panduanya tolong krirm ke info@lombokreisen.com. kalau harus bayar ya gak papa tapi jangan mahal-mahal.

    yang kedua mas, mana panduan untuk buat guest commentnya kok gak ada ya?

    terima kasih
    http://www.rinjanionly.com

  14. made Says:

    kok pas dilihat langsung slese padahal uda pake simulate download /kebakar ???

  15. admin Says:

    Pada frame 2 dan selanjutnya sudah diberi objek belum misalnya gambar?
    Kalau sudah ada ojek dan langsung selesai coba ubah kecepatan download yang terdapat pada download settings yang terletak dibawah simulate menjadi lebih lambat

  16. made Says:

    Thaks mbah admin..!

  17. made Says:

    Bang admin.. /keren kok aku ngasi source file preloader dari flashden… kok gak didownload-download sich..?? /??

  18. admin Says:

    Oh iya, maaf lupa :respect:
    Kami bisa membuat 2 dari 3 preloader yang anda kirimkan. Salah satunya sudah kami buat.

  19. sea Says:

    tanya dong. kenapa waktu dijalankan harus aktifkan Simulate Download. sedangkan waktu preloader ini digabung dalam game kita enggak mungkin jalan kan simulate download kan? bagaimana kbisa preloader itu terlihat dimata orang lain?

  20. admin Says:

    Kalau swf anda dijalankan langsung dari hardisk memang tidak akan terlihat. Tapi jika swfnya anda hosting misalnya ke deviantart, tentunya preloader tersebut akan berjalan sesuai dengan data yang di load. Swf anda dijalankan darimana ya?

  21. made Says:

    bang admin.. kok aku gak dkasi tau cara buat preloadernya..
    itu bayar lo.. dari flashden.. /sendiri /stress /rewel

  22. admin Says:

    Sesuai komen kami di atas, salah satu preloadernya sudah kami buatkan tutorialnya. Silahkan lihat di sini : http://warungflash.com/2009/09/membuat-preloader-2/

  23. made Says:

    preloader yang mana tu?? /??

  24. admin Says:

    Yang Ball pen ink preloader. Memang tidak sama dengan yang anda berikan. Tapi inti pembuatannya sama kok. Anda tinggal mengubah tampilannya saja.

  25. made Says:

    ooh.. makasih ya.. /jempol

  26. rekoyunasril Says:

    Wah mantaps banget :))

  27. efbee Says:

    txz bgtz,,,,,,,,,
    dgn tutorial ini q jadi gampang belajar flash

  28. dhigo Says:

    kenapa ya ko yang aku dari kecil membesar, bukannya dari kiri ke kanan?

  29. admin Says:

    Sudah mengikuti langkah-langkah yang ada?
    Jika masih belum bisa coba kirimkan fla yang anda buat kepda kami, nanti akan kami perbaiki.

  30. dhigo Says:

    oh iya makasih jawab e-mailnya, tapi mau nanya lagi, kalo lagi loading, pas udah selesai tapi saya pingin muncul play nya bukan ke frame? gimana ya? mohon bantuannya :D :hope: :hope:

  31. aimdul Says:

    dari sana kemari…akhirnya dpt juga ni tutorial versi lokal….btw,om..admin…utk masukin / input ke frame 2 nya (no. 6)..tu kok sya gbs yah..heehee. gmn ya om admin..mhon petunjuknya.

    wsslam.
    aimdul :D

  32. steve Says:

    bos gimana caranya biar preloadernya begitu selesai langsung bisa jalan ke file swf game yang akan kita mainkan ?

  33. steve Says:

    tolong boss.. penasaran dr tadi ga bisa2 ! preloading jalan tp ga langsung menuju ke file berikutnya. sala dimana kira2 bos

  34. admin Says:

    pake preloader yang mana ya?

  35. steve Says:

    yg bulat tolong admin.. begitu 1005 langsung blank.. ad apencerahan

  36. steve Says:

    saya menunggu pencerahan kk admin :((

  37. steve Says:

    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++;

    itu script bulat yang saya pakai.. bila saya ingin setelah 100% langsung memulai game bagaimana caranya ?a pa ada tambahan script? apa bisa terlihat ketika tekan ctrl+ enter, apa harus di up dolo br terlihat sempurna?

  38. admin Says:

    Kalau pakai script yang anda maksudkan, setelah loading selesai maka akan memainkan frame 2 dan berhenti di frame 2 tersebut.

    Jika frame yang akan dimainkan bukan frame 2, maka ubah angka 2 pada script bagian berikut ini dengan no frame yang diinginkan :
    if (Math.round(_root.getBytesTotal())<=Math.round(_root.getBytesLoaded())) {
    gotoAndStop(2);
    }

  39. dail Says:

    mas admin…….gimana caranya agar peloader bentuk swfnya dapat tampil di hardisk ???????? tolong

  40. dail Says:

    mas, saya ini pendatang baru………tolong bantuannya. gymana caranya agar preloadernya main pada format swfnya, soalnya nga’ tampil2 ?????????? /stress

  41. Asep Maulana Ismail Says:

    mas script yang A ada yg salah iia ??
    if (percent=100) {
    _root.gotoAndStop(2);
    }
    thanks… :peace:

  42. maoel Says:

    kalo membuat preload berbentuk bintang apakah sama apa tidak
    tolong d’jelaskan tutorial’a
    tolong bos admin…
    lagi butuh nih…

  43. dicky Says:

    waaaaaaaaaaaaaawoooooooooooowwwwwwwwwww keren bkin ame di flash B-) ;) :peace: /bos

  44. theso Says:

    suwun

  45. theso Says:

    thanks ya dah bantu aq buat preloaderxxxxxxxxxxx
    i say thanks /berkaca

  46. aditya Says:

    mau nanya bang, klo preloader mau di pake buat loding awal saat intro gmn cara nya, maksudnya biar tanpa masuk ke view>simulate download. makasih….

  47. dian Says:

    tuto,a bgus,,,,,,, tapi koq ga bisa dbuat d adobe flash cs3 yy????
    tolong solusinya yyy,,,,,, thanks,,,,,,,,,,,,,,,,,,,,

  48. vre Says:

    mas coba di buat 1 frame lagi yaitu frame 3,
    lalu di buat tombol di frame2 menuju frame 3,
    saya sudah tes, tp kok dia langsung balik lagi ke frame 2 ya…
    minta pencerahan mas.. :hope:

  49. Budi Says:

    aduh, gan. makasi banget!
    it works like a charm.!
    udh nyoba tutorial yg di babaflash kagak mudeng :respect:
    tengkyu2, matur suksma nggih.. :D

  50. alfian Says:

    preloadernya ini buat loading ke satu scene apa buat satu scene aja? apa bila swf nya terdiri dari banyak scene gimana? sama aja ya? :respect:

  51. idoy Says:

    makasih gan atas ilmunya, tetap sharing ilmunya gan :respect:

  52. yudimoro Says:

    gimana caranya membuat soal menggunakan waktu mis 1 soal 60 detik otomatis ke nextframe tolongya ….. wpyudi2@gmail.com

  53. Rafi Says:

    gan, ko preloader yg persegi panjang pas di tes (ctrl+enter) ko ada notice error ya? pdhl sya udah ngikuti step2 dgn baik.
    kya gni
    **Error** Scene=Scene 1, layer=SOAL, frame=1:Line 1: Statement must appear within on/onClipEvent handler
    stop();

    Total ActionScript Errors: 1 Reported Errors: 1

    itu knapa ya? apa emang bgitu? mohon jawabanya ..

Leave a Reply

B-) =DV <:-P ;)) ;) :yeye: :respect: :peace: :p :idea: :hope: :I: :D :-SS :-? :-/ :)) :) :(( 8-> more »

Komentar yang berisi pertanyaan atau request tutorial kemungkinan besar tidak bisa kami jawab dan penuhi. Hal ini dikarenakan kesibukan kami yang padat . Oleh karena itu kami mohon maaf dan pengertiannya.