15
Sep

Membuat Preloader 2

Written by admin


Sebenarnya ini masih lanjutan dalam tutorial Membuat Preloader. Tapi berhubung tulisan pada tutorial membuat preloader sudah terlalu panjang maka kami membuat bagian 2-nya.

D. Preloader Masking

Preloader ini berbentuk animasi masking yang berjalan sesuai jumlah data yang diload. 1. Buatlah sebuah flash document. 2. Buatlah sebuah garis berbentuk persegi panjang berwarna hitam.

garis-persegi-panjang

3. Seleksi garis persegi panjang tersebut dan tekan F8. Pada panel yang muncul masukkan preloader sebagai name dan movie clip sebagai type lalu tekan ok.

4. Seleksi movie clip preloader di stage lalu tekan Ctrl+F3. Pada panel properties yang muncul masukkan preloader sebagai instance name.

5. Klik kanan movie clip preloader di stage dan pilih Edit.

6. Setelah berada di dalam stage movie clip preloader, tekan tombol Insert Layer sehingga muncul layer baru bernama Layer 2.

7. Pada Layer 2 ini buatlah sebuah garis berjajar yang memenuhi garis persegi panjang seperti gambar di bawah ini :

garis-berjajar

8. Klik sekali lagi Insert Layer sehingga muncul layer baru bernama Layer 3. Pada Layer 3 ini buatlah sebuah persegi dengan lebar sama dengan lebar garis persegi panjang pada layer 1.

9. Seleksi persegi di layer 3 dan tekan F8. pada panel yang muncul masukkan tween_persegi sebagai name dan movie clip sebagai type lalu tekan ok.

10. Letakkan movie clip tween_persegi tadi di sebalah kiri garis persegi panjang seperti gambar di bawah ini :

tween1

11. Klik kanan frame 100 Layer 1 dan pilih Insert Frame. Klik kanan frame 100 Layer 2 dan tekan Insert Frame. Klik kanan frame 100 Layer 3 dan pilih Insert Keyframe.

12. Pada frame 100 Layer 3, panjangkanlah movie clip tween_persegi sehingga bentuknya seperti gambar di bawah ini :

tween2

13. Klik kanan frame 1 Layer 3 dan pilih Create Motion Tween. Klik kanan Layer 3 dan pilih Mask. Singgungkan Layer 2 dengan Layer 3 sehingga membentu animasi mask.

14. Klik frame 1 Layer 1 dan tekan F9. Pada panel actions yang muncul masukkan script berikut :

1
stop();

15. Tekan Ctrl+E untuk kembali ke stage scene 1.

16. Setelah berada di stage scene 1, buatlah sebuah dynamic text dengan persen tampil sebagai var pada panel propertiesnya. Letakkan dynamic text ini di bawah movie clip preloader.

17. Klik frame 1 dan pada panel action masukkan script berikut :

1
2
3
4
5
6
7
8
9
10
11
12
13
stop();
persen_tampil = 0+"%";
_root.onEnterFrame = function() {
	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%1 == 0) {
			preloader.gotoAndStop(persen);
			persen_tampil = persen+"%";
		}
	}
};

18. Klik kanan frame 2 dan pilih Insert Blank Keyframe. Masukkan konten yang anda buat pada frame 2 ini.

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

20. Kurang lebih hasilnya akan seperti gambar dibawah ini:

Sourcenya dapat di download di sini





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

17 Responses to “Membuat Preloader 2”

  1. neng irma Says:

    Askum mas……
    p kabar neh???????
    Minal aidzin walfaidzin ya…..
    mohon maaf lahir bathin….
    dah lama neh neng g mampir, dah banyak tutorial yang kelewat neh…
    sukses ruz y mas….

  2. admin Says:

    Wa’alaikum salam :)
    Baek-baek ajah :D
    Iya sama-sama, kami juga mohon maaf lahir batin ;)
    Nggak terlalu banyak kelihatannya karena kami menulis artikelnya tidak rutin setiap hari :p
    Thanks :peace:

  3. ari Says:

    makasih mas tutorialnya bagus bangget =D> =D> oya mas, kalo cara untuk mengecek validasi sistem gimana ya? umpamanya kita mau membuka file exe, pas loading dia mengecek apakah resolusi layar sudah sesuai atau belum,kemudian untuk mengecek di komputer apakah font aksara jawa sudah terinstal atau belum gimana?

  4. made Says:

    /keren Karena warung flash ini sudah membuat saya menjadi “pintar” tentang flash.. saya memberikan source nya “Flash Den”..! silahkan klik blog saya..!! (semua juga boleh..) /thanks /jempol

  5. admin Says:

    Ok akan kami download, thanks /jempol

  6. pakde Ace Says:

    halo halo halo….
    mas admin, sudah dicoba preloadernya (1 dan 2) ciammmik tenan…
    makasih ya mas admin….
    btw, koq kalo frame2 isinya script koq jadi error ya??? (maksudnya error tuh dia blink – blink antara frame1 dan frame2…. gimana cara ngatasinya mas Admin? makasih sebelumnya :hope:

  7. admin Says:

    Kok bisa, coba kirimkan flanya kepada kami warungflash@gmail.com
    Nanti kami akan lihat dulu.

  8. Julian Jackson Ruliansyah Says:

    Mas Bisa Ga BuaT Loader Trust Kalo Udah 100% Berhenti . . . :)] :|/: :)) :-SS >:) >:)

  9. admin Says:

    Kalau 100% berhenti hapus script gotoAndStop(2); di atas :I:

  10. Lya Says:

    saya kan lagi buat media pembelajaran, kalau animasi kpal saling tabrakan yg satu jatuh gmn ya??? thxQ
    <:-P

  11. admin Says:

    Coba gunakan animasi frame by frame, animasi motion guide, dan animasi motion tween untuk membuatnya.

  12. gilang Says:

    mas kok dinamic textx g jlan..?

  13. Hadi Says:

    mas kokpreloader nya ga jalan

  14. choudjido Says:

    /thanks

  15. Fandi Akhma Says:

    Mas kalu, saya ingin jika sudah 100%, langsung redirect ke URL ku gimana??

    misal kalu udah 100% redirect ke google.com

  16. Angga Says:

    sama dengan yang diatas, saya pengen buat setelah selesai 100% langsung ke file swf lainnya, caranya gimana?

    sebelumnya makasih buat jawabannya.

  17. Ginga Amirul Muizz Purnama Says:

    Hai, Setelah nifsu syaban ini, semoga salahku dimaafkan dari segala kesalahan yang aku berikan kepada TS( Walaupun ane juga gak punya salah sama ente ). Ehm, Tutorialnya menarik dan bagus… :D :-?

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.