Membuat Pre Loading MovieClip di Flash

loadKali ini saya akan menyampaikan tutorial tentang tampilan loading pada flash. Tampilan loading ini menggunakan fitur fungsi MovieClipLoader() untuk menghitung Byte data yang terload di file swf . Jika pada tutorial sebelumnya saya jelaskan tentang fungsi upload gambar dengan flash yang menggunakan fungsi FileReference() kini yang digunakan adalah MovieClipLoader(). Sama seperti pada pembuatan upload gambar dengan flash, tampilan pre loading ini juga menggunakan listener handler untuk menentukan kejadian apa saat event-event tertentu. dalam kasus ini saya gunakan onLoadStart, onLoadProgress, onLoadComplete. Untuk menjalankan aplikasi preLoading di komputer offline gunakan Simulate Download(nanti dijelaskan) agar lebih real.

Fungsi MovieClipLoader ini dapat meload file-file gambar seperti jpg, gif,gifanimated, png, dan juga swf. bagi gif animated yang ditampilkan hanya frame awal saja. Ide pembuatan Tutorial ini berasal dari Kirupa.com dan saya rebuilt lagi dengan modifikasi disana-sini.

Ok kita Mulai Projectnya, seperti biasa susun stage di frame 1 seperti gambar dibawah ini :

stage

1. MovieClip dengan gambar kotak bar didalamnya, instance “loaderbar”

2. Dynamictext dengan instance “loadtxt”

Karena semua telah tersusun kini kita masuk ke ActionScriptnya. klik frame 1 lalu berikan sintax berikut.

var loader:MovieClipLoader = new MovieClipLoader();

this.createEmptyMovieClip(“mc”,1);

mc._x = 0;

mc._y = 0;

loader.loadClip(“interior_ku.jpg”,mc);

var preload:Object = new Object();

loader.addListener(preload);

preload.onLoadStart = function(target){

trace(“Started Loading”);

}

preload.onLoadProgress = function (target, loadedBytes, totalBytes){

var lod = Math.floor((loadedBytes/totalBytes)*100);

loadtxt.text = lod+”%”;

loaderbar._xscale = lod;

}

preload.onLoadComplete = function(target){

trace (“Loading selesai!”);

loaderbar._visible = false;

loadtxt._visible = false;

}

Perhatikan pada awal script yang berbunyi var loader:MovieClipLoader = new MovieClipLoader(); yaitu menambahkan fungsi moviClipLoader kedalam variabel “loader”.

Perhatikan baris kedua this.createEmptyMovieClip(“mc”,1); Script ini digunakan untuk membuat movieclip kosong pada level 1 jadi movieclip ini terletak pada _root.mc.

Selanjutnya script loader.loadClip(“interior_ku.jpg”,mc); yang berfungsi memanggil gambar Interior_ku.jpg.

Variabel loader meminta variabel preload sebagai listenernya untuk memnentukan event-event yang terjadi pada waktu tertentu.

onLoadStart : saat movie mulai meload gambar

onLoadProgress : saat movie melakukan proses meload gambar

onLoadComplete : saat movie selesai meload gambar

Yang terpenting dari skrip ini adalah membuat loaderbar atau movieclip dengan kotak didalamnya mempunyai panjang kordinat x sesuai dengan nilai dari byte Ter-Load/Byte Total*100%. dan saat movie selesai meload gambar, menghilangkan movieclip “loaderbar” dan dynamic text” loadtxt” dengan script yang berbunyi loaderbar._visible = false;
loadtxt._visible = false;
.

Selesai sudah, kini tinggal melakukan test movie(Ctrl+Enter), dan agar terasa lebih natural buatlah simulasi download dengan kecepatan tertentu seperti gambar dibawah ini. View-Simulate Download. terlebih dahulu pilih Download Setting untuk mengatur kecepatan download.

simulate

file2File-file tersebut silahkan disimpan dalam satu drive, untuk simulasi download anda tidak bisa langsung memainkan file swf seperti file loading.swf diatas, tetapi anda harus masuk ke software M. Flash 8 dan melakukan test movie(Ctrl+Enter).

Untuk lebih jelasnya silahkan Download file projectnya preLoading_MovieClip.rar

end of project

Iklan

One Response to Membuat Pre Loading MovieClip di Flash

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

%d blogger menyukai ini: