Membuat Animasi Preloader Bar dengan Efek Masking

Animasi preloader bisa digunakan saat anda membuat sebuah media interaktif atau presentasi dengan menggunakan Adobe Flash. Sebelum masuk ke menu utama media interaktif atau presentasi anda, anda ingin menampilkan sebuah animasi loading yang seakan-akan animasi tersebut sedang memuat menu utama media interaktif / presentasi anda.

Anda pernah bermain game? Sebelum masuk ke main menu dari game, umumnya yang pertama kali muncul pada tampilan game adalah sebuah animasi loader. Dimana animasi ini biasanya digunakan saat memuat plugin ataupun engine dari game tersebut.

Contoh lain misalnya saat anda ingin menonton sebuah video di Youtube dalam kondisi sinyal yang tidak bagus, Youtube akan memuat video tersebut bergantung pada sinyal dan kecepatan internet di perangkat anda. Nah, sambil menunggu loading video dimuat Youtube akan menyuguhkan tampilan lingkaran berputar sambil menunggu video yang ingin kita tonton berhasil dimuat.

Bentuk animasi preloader bisa apa saja, bar, lingkaran, kotak, teks, logo ataupun animasi karakter dan bisa menggunakan gaya animasi fade, position, swing, dan lain-lain.

Bagaimana? cukup jelas tentang preloader yang saya maksud? Jika masih membingungkan atau ada pendapat lain silahkan tulis di komentar artikel ini.

Ribet dan pastinya susah dong untuk buatnya?

Tenang.. Kita tidak akan membuat hal yang serumit itu pada tutorial ini.

Kita hanya akan coba membuat animasi loader sederhana dengan Adobe Flash. Animasi preloader ini nantinya bisa digunakan saat anda membuat sebuah media interaktif atau presentasi dengan menggunakan Adobe Flash. Sebelum masuk ke menu utama media interaktif atau presentasi anda, anda ingin menampilkan sebuah animasi loading yang seakan-akan animasi tersebut sedang memuat menu utama media interaktif / presentasi anda.

Oke, kita langsung ke step by step saja..

Membuat Preloader Bar dengan Efek Masking

  • Buka aplikasi Adobe Flash CS6.
  • Buatlah document baru. Kali ini pilih Action Script 2.0 karena kita masih akan menggunakan Action Script 2.0.

# Mengatur Dokumen dan Background

  • Atur dimensi document pada document settings dengan Width : 800 px dan Height : 600 px, background : Black, Frame Rate : 24. Dimensi dokumen dan warna backgorund bisa kamu sesuaikan dengan keinginan anda.

# Membuat Objek Bar

  • Ubah nama layer 1 menjadi “bar1”. caranya double klik pada nama layer.
  • Kemudian buat sebuah persegi panjang berwarna putih tanpa outline dengan Rectangle Tool. Lalu atur posisinya seperti gambar berikut.
  • Lalu duplicate layer “bar1”. Caranya Klik kanan pada layer “bar1” pilih Duplicate Layers.
  • Beri nama layer hasil duplicate diatas dengan nama “bar2”.
  • Kemudian ubah warnanya sesuai keinginan anda (jangan sama dengan warna “bar1”).
  • Lalu lakukan lagi duplicate layer. Kali ini yang anda duplicate adalah layer “bar2”. Kemudian layer hasil duplicate tersebut anda beri nama “bar3”.
  • Sekarang Insert Frame (F5) di frame 100 pada layer “bar1” dan “bar2” , dan Insert Keyframe (F6) pada layer “bar3” juga di frame 100.
  • Klik di timeline frame 1 pada layer “bar3”, lalu geser posisi objek persegi panjangnya ke sebelah kiri dari posisi pertama. Perhatikan gambar berikut.
  • Setelah anda geser, beri animasi Classic Tween pada layer “bar3” untuk membuat pergerakan pada objek persegi panjang tersebut. Lihat gambar.
  • Sekarang lakukan Mask pada layer “bar3” untuk layer “bar2”. Caranya klik kanan pada layer “bar3” – pilih Mask. Perhatikan gambar berikut.

# Menyisipkan Logo

  • Setelah itu, buat layer dan beri nama “logo”.
  • Kita akan menambahkan objek gambar logo agar animasi tidak terlalu polos. Anda bisa menggantinya menggunakan sebuat teks biasa jika tidak memiliki logo.
    Tapi pada contoh ini kita akan coba menggunakan gambar logo.
    Klik menu File – pilih Import – pilih Import to Stage.
  • Pilih gambar logo yang anda inginkan, gambar logo bisa berekstensi jpg ataupun png. Kemudian posisikan objek gambar logo tersebut diatas objek bar.

# Membuat Pergerakan dan Efek Fade Out pada Objek

  • Setelah itu, Insert Keyframe (F6) di frame 30 pada layer “logo”.
  • Beri animasi Classic Tween diantara frame 1 – 30 pada layer “logo”.
  • Setelah diberi Classic Tween, klik di frame 1 layer “logo”, kemudian klik objek gambar logo, lalu ganti style di panel Color Effect dari None menjadi Alpha.

dan ubah nilai Alpha-nya menjadi 0 %.

  • Jika sudah, sekarang buka lock pada layer yang diberi efek Mask, dengan cara klik icon gembok hinggal tanda gemboknya hilang. Lihat gambar berikut.
  • Kemudian Insert Keyframe (F6) di frame-frame yang ditandai kotak merah pada gambar di bawah ini.
  • Setelah itu beri animasi Classic Tween seperti gambar berikut.
  • Hampir selesai, sekarang di frame 120 yaitu di keyframe terakhir, beri efek Alpha di panel Color Effect dan nilainya 0 %, lakukan pada semua objek bar dan logo.

# Memberi Action Script 2.0

  • Terakhir, beri Action Script stop(); di keyframe terakhir layer “logo” yaitu di frame 120, agar animasi timeline tidak me-looping.
stop();
  • Oke selesai, sekarang simpan document (Save As) kemudian publish document dengan menekan tombol CTRL + Enter untuk melihat hasilnya.

Hasilnya akan seperti berikut.


Penjelasan Action Script :

  • stop(); berfungsi untuk menghentikan laju animasi timeline di frame yang diberikan script.

Sekian tutorial cara Membuat Preloader Bar dengan Efek Masking di Adobe Flash CS6.
Semoga bermanfaat..

Indra Fadhilah
Founder & author di webgrafis.com. Menyukai pemrograman & desain grafis. Selalu ingin belajar hal baru tentang teknologi.