Animasi Preloader Flash

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’ 😀 ). 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).

preloader2.jpg

 

Ketiga, berikan ActionScript di Frame 1 ini sebagai berikut:

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 😀 ). 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 😆 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:

preloader.jpg

Contoh flashnya saya upload di:

http://www.box.net/shared/24336ykw0w

 

credits: Andre & Fathah, Flash help panel

Iklan

59 thoughts on “Animasi Preloader Flash

  1. man, ada yang lupa variabel penanda kalo dah sama loaded ama total bytes ukurannya….
    kalo scriptnya gitu doang, flashnya gak bisa ngeload lebih dari 2 frames…
    percaya deh sama saya 😀

  2. oh, variabel doneLoaded itu ya? 😛 supaya ngga ngulang animasi loadingnya bukan? saya update deh

    tambahan artikel:
    jadi waktu load pertama kali ada variabel baru var doneLoaded:Boolean = false; terus if nya jadi (!doneLoaded && (ukuranTerload == ukuranTotal))

    terus isi dalam kurawalnya tambah statement baru:

    {
    doneLoaded=true;
    }

  3. @fathani
    boleh2 aja..

    @onestopthinking
    dapet satu lagi niy.. silakan2..
    ok, sama-sama

    @mozamal
    yep, sama-sama bosss 😀

  4. Wah… Thk’s bgt Tutorialnya.

    Dh k coba dgn susah payah, eh… Akhirnya bisa… Yee….

    Cuman ad yg k bingung pd script paling bawah :
    gotoAndStop (2)
    tw
    gotoAndPlay (2)..?

    trus yg tambahan:
    doneLoaded=true;
    ini d letakkan d dlm kurawal d atas
    gotoAndStop (2), tw jd na kyk gini :
    {
    doneLoaded=true;
    gotoAndStop (2);
    }
    benar tw tidak..???

  5. @Wahyoe
    dua-duanya bisa, tergantung kebutuhan aja..
    mau ke frame 2 trs berhenti -> gotoAndStop();
    atau ke frame 2 lanjut terus -> gotoAndPlay();

    {
    doneLoaded=true;
    gotoAndStop (2);
    }
    benar tw tidak..???

    yap benar 😀

  6. Wah… Akhirnya gw b’hasil, thk’s bgt tutorialna. Simulasi downloadna gw atur ke yg sedang, kira2 39KB/s, eh… Loadingna klihatan, ya tgl gw kreasikan deh…

    Oh.. Ya, ad tutorial ini g’ : misalna ad 2 layer yg dimainkan b’samaan, layer satu ad music yg akan terus d mainkan, sedangkan layer ke-2 ad gambar yg akan d mainkan b’ulang2 (“gotoAndPlay (1)”).
    Udh gw coba, tp musicna jg ikut b’ulang2, please tunjukkin dong… Thk’s

  7. @Wahyoe
    di layer musik, load ke movieclip ajah musiknya.. trus frame di layernya tarik ampe ujung, jadi klo ngulang dari frame 1 movieclipnya ttp..

  8. Wah… Thk’s, tp mas ad yg lebih gampang, kebetulan jg usaha cari lewat google. Carana
    Pd music, “Sync:” na d pilih “start”.

    Boleh jd guru TUTORIAL q g’?
    Klo ada tutoral flash yg baru kirim k email q yah…

    Mw nanya g, tutorial Form tw Guestbook dgn Flash…, please… Thk’s

  9. Oh ya, gimana cara bikin garis sperti tali yg b’jalan dgn flash. Ak dh coba, tp cara q ribet. Bwt dulu garis, trus dibuat b’belok2, supaya gerak, q hapus satu per satu dr frame 1,2,3, sampai frame t’akhir. Ribet bgt kan, g’ kebayang klo garisna panjang.

    Ada cara pintasna g’2. Klo d jadikan mc g’ bisa jg, soalna dh pake simbol, misalna kt pendekin d frame 1 trus kt pjgin d frame t’akhir, krn dia satu simbol jd frame 1 jg ikut pjg. Gimana dong supaya garis ini bisa b’gerak seperti cacing?

  10. @Wahyoe
    bikin animasi cacing jalan gitu? biasanya sih caranya
    – buat movieclip yg isinya si cacing lg jalan ditempat (bisa dibuat dr rangkaian bbrp shape tween)
    – terus buat motion tween dari movieclipnya biar si cacingnya jalan

  11. Makasih atas penjelasana, klo gt q bsa. Maksudna kyk bintang jatuh gitu, awalna kepalana yg klihatan sampai akhirna kseluruhan klihatan, trus pas close na ekorna lama2 memendek hingga sampe kpala, trus ilang dh, gitu…
    Gimana carana yah.., aq nanya2 gini, soalna g bikin halaman web yg t’diri dr flah, please help me.

  12. Faisal, aq ad b2rapa p’tanyaan :
    1. Bikin dong Tutorial Guestbook dgn Flash. Please…!
    2. Gimana ya, supaya web site kita, klo org datang tw nglihat site kt, kt bisa dpt uang?
    3. Apa yg harus diketahui supaya mengerti bahasa JavaScript?
    4. Ada Keygen Adobe Flash CS4 g’? D mana downloadna?

    Terimakasih sebelumna.

  13. @Wahyoe
    1. belum bisa… 😀 (klo om wahyoe dah bisa duluan, ajarin saya yaw)
    2. banyak metodenya,,saya mah gak apal.. coba aja maen ke yg berkompeten di bidang itu http://www.haryoprabowo.com/ mungkin beliau bisa bantu
    3. paham algoritma sama hafal aturan syntaxnya aja mgkn..
    4. software yg full version gt mgkn di ddl2.com atw yg semacamnya ada.. cmn klo berurusan sama crack2 gt siap2 aja antivirus update +diset active…

  14. Mas ad p’tanyaan g nic :
    1. Bhsa javascript hampir sma g’ dgn turbo pascal?
    2. Bagaimana cara translite halaman ke sbh situs, tp second/detik d halaman ntu nampak dr 10 sec-0 sec. Apa scriptx?
    Thk’s

  15. Mas ad p’tanyaan nic :
    1. Apa gunanx kurung “{” dgn “}” pd JavaScript?
    2. G mana carax supaya animasi d Flash play-nya mundur, bkn ke dpn tp k blakang, apa Scripx? Thk’s

  16. @Wahyoe
    1. yg saya tau syntaxnya javascript beda jauh deh ama pascal..
    2. 😕 gk ngerti awa.. pake google translate kali yah..

    1. gk pernah nyoba, mungkin sama seperti actionscript? biasanya menandakan awal dan akhir isi sebuah method atau statement if, for, while, dan kawan-kawannya…
    2. buat script play mundur kira2 gini lah:
    onEnterFrame=function()
    {
    prevFrame();
    }

  17. Mas, mksdx ktika d tkn tombol, playx mundur,
    apa scriptx mas? Scriptx utk tombol tw frame tw dua2x?
    Tolong mas thk’s

  18. Mas Gimana caranya biar cepat mahir, apa mesti belajar bahasa pemrograman dulu spt C++, atau VB.

    Yang kedua, apakah bisa menggabungkan VB dengan Flash,… maklum pemula kelas teri….:D

  19. sy mo tny, cara bikin progress barnya gmn y?? sy rada bingung. kok file yg dishare utk didownload ga bs dibuka y?? tq.

  20. mas, gimana caranya membuat splash dengan flash untuk mengecek validasi sistem sebelum masuk ke isi atau kontennya.katanya pake shell:….,tolong dong kasih tau buatnya!misal saya buat pembelajaran huruf arab. sebelum masuk menu utama aplikasinya mengecek apakah fontnya sudah ada belum, terus resolusi layar yang harus digunakan untuk menampilkan aplikasi ini sesuai tidak.

  21. saya udah coba, tapi pas pake script gotoAndPlay(2) jadinya berhenti di frame ke-2 itu, harusnya kan maju terus sampe frame terakhir…
    gimana caranya ya biar lanjut ke frame selanjutnya?
    thanks…

  22. thanks ya mas banyak hal yang saya dapat di ide2 anda..
    ini saya coba belajar dulu punya anda..
    untuk selanjutnya bisa saya komentar kembali…

  23. Assalamu’alaikum
    Syukron katsiron, banyak ilmu yang didapat. Izin copas ya akh. Saya gunakan untuk bahan pelajaran MK saya
    Terima kasih ^^

  24. Askum…. thanks ilmu’a.. hehe ..
    mau tanya cara buat quiz interaktif tu gmana caranya y.. ?? 🙂

  25. Assalammu’alaikum..?
    Mas, gimana ActioScript 3.0-nya ketika selesai LOADING dapat menampilkan sebuah TOMBOL ENTER (untuk me-Load ke file game.swf saya) dan ketika di tekan langsung terhubung dengan GAME.swf saya tsb.

    Mohon Bantuannya mas……

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s