Preloader Flash MX

Pengertian Preloader

Preloader adalah suatu animasi dengan ukuran kecil yang ditampilkan untuk menunggu movie utama selesai di-download. Oleh karena sering terjadi movie yang kita buat dengan FlashMX ukuran filenya besar, maka memerlukan waktu yang lama untuk tampil di browser.

Tujuan preload untuk menghindari kebosanan pengunjung atau daripada mereka lari dan membuka situs lain, sebaiknya tampilkanlah preloader ini. Sebenarnya pembuatannya sangat mudah hanya menggunakan Action if FrameLoaded, yang fungsinya untuk mendeteksi apakah seluruh frame pada movie utama sudah selesai di-download. Jika belum, maka animasi preloader akan terus dimainkan.

Preloader pada FlashMX

Anda sudah mengetahui tentang loading atau preload pada pendahuluan di atas. Preload ini sangat dibutuhkan dalam pembuatan animasi FlashMX, sehingga Anda perlu memperhatikan baik-baik pembuatan preload di bawah ini.

Script Preloader

Script merupakan logika yang sangat dibutuhkan dalam program apapun, baik di script language, database maupun animasi design, seperti FlashMX. Script ini sangat menunjang objek yang akan kita buat animasinya agar terlihat menarik bagi pengunjung Web site kita.

PEMBUATAN PRELOADER

KASUS

Kasus 5.K.1

Seorang designer animasi ingin membuat preloader dalam websitenya sebelum masuk ke halaman utamanya. Tetapi preloader ini harus tetap menarik bagi si pengunjung ketika melihat websitenya. Anda sebagai designer animasi sekaligus ahli dalam script action FlashMX diperbantukan untuk memecahkan masalah di atas.

Langkah Penyelesaian Kasus

1.Buat scene baru dan ubah namanya “Preloader”.
2.Buat objek pada Scene “Preloader” ini.
3.Buat script preloadernya dan analisa hasilnya.

Tugas1: Buat Scene Baru
Langkah-langkah tugas1 :
Dari Menu Windows Klik Scene, seret Scene Preloader di atas Scene1.

Tugas Sumber Kasus Hasil
Buat scene baru dengan nama “Preloader”

Kasus 5.k.1 Loading ketika melakukan proses pertamakali sebelum ke halaman utamanya.

Tugas2: Buat Objek Kotak

Langkah-langkah tugas2 adalah :
Buat objek tersebut dengan animasi.

Tugas Sumber Kasus Hasil
Buat dengan Rectangle Tool Kasus 5.k.1

Tugas3: Script untuk loading

Langkah-langkah tugas3 adalah :
Buat script action pada Layer Action. Perhatikan script tiap frame berbeda-beda.

Tugas Sumber Kasus Hasil
Buka Action Script FlashMX Kasus 5.k.1 Test dengan TestMovie

Implementasi Penyelesaian Kasus

Langkah-langkah pembuatan objek loading :
Tugas1: Buat Scene Baru

Tugas Tindakan
Buat scene baru dengan nama “Preloader” dan objeknya
1.Seret Scene “Preloader” ke atas Scene2.

Tugas2: Buat Objek Kotak

Tugas Tindakan
Buat objek kotak
1.Pada Layer1, di frame2, buat objek kotak dengan Rectangle Tool dalam Toolbox, beri warna gradient (Up to ‘U), lalu digroup dari Menu Modify>Group.

2.Buat layer baru, yaitu Layer2. Copikan frame2 pada Layer1 ke frame2 pada Layer2 objek kotak tadi setelah itu diungroup (tidak digroup).

3.Masih Layer2, objek kotak tadi jadikan symbol dan Isikan Behaviour: MovieClip; Name: ProgressBar. Kemudian seret titik tengah objek kotak dengan Free Transform Tool dalam Toolbox ke sudut kiri atas objek kotak (lihat gambar 5.4 di bawah ini).

4. Masih Layer2, isikan MovieClip tersebut dengan Label: pbar pada jendela properties.

5.Buat layer baru, yaitu Layer Teks. Buat objek teks kosong dengan Text Tool dalam Toolbox di mana ukurannya sedikit lebih besar dari objek kotak. Lalu pada jendela properties pilih Text Type: Dynamic Text; Line Type: Single Line; Variable: sStatus.

Tugas3: Script Loading

Tugas Tindakan
Buat script loading
1.Buat layer baru, yaitu Action.

2.Pada frame1, ketikkan script :
sStatus=0;
setProperty(“pbar”,_xscale,0);

3.Pada frame2, ketikkan script :
//iBytesTotal = _root.getBytesTotal();
//iBytesLoaded = _root.getBytesLoaded();
//iBytes = (iBytesLoaded/iBytesTotal)*100;

setProperty(“pBar”, _xscale, iBytes);
sStatus=iBytes add “%”;

4.Pada frame3, ketikkan script :
if (iBytes<100) {
iBytes=iBytes+2;
gotoAndPlay(2);
} else {
sStatus=’COMPLETE’
gotoAndPlay(4);
}

5.Pada frame4, ketikkan script :
sStatus=’COMPLETE’
stop();

Skema Timeline

Verifikasi

Tugas: Buktikan bahwa output seperti hasil yang diinginkan.

Periksa apakah:
Semua langkah yang Anda lakukan sudah benar.
Script Loading yang Anda buat sudah benar.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s