Advertisement
  1. Code
  2. Effects

Membuat Latar Belakang Flash Animasi yang Aneh

Scroll to top
Read Time: 7 min

Indonesian (Bahasa Indonesia) translation by Ari Ana (you can also view the original English article)

Dua kali sebulan, kami mengunjungi kembali beberapa posting favorit pembaca kami dari sepanjang sejarah Activetuts+. Tutorial ini pertama kali diterbitkan pada Mei 2009.

Menggunakan ActionScript 3.0, kita akan membuat Latar Belakang Animasi yang keren yang dapat kita gunakan di Layar Menu atau sebagai Visualizer Musik.

Pratinjau Hasil Akhir

Mari kita lihat apa yang akan kita kerjakan:


Langkah 1: Ringkasan Singkat

Kita akan membuat Kelas yang akan menangani seluruh efek. Saat Anda memanggil kelasnya, Anda akan dapat mengubah jumlah cahaya, warna, alfa, ukuran, arah, kecepatan, dan kualitas filter Blur. Dengan cara ini dimungkinkan untuk mencapai banyak hasil yang berbeda saat menggunakannya. Anda juga dapat menggunakan latar belakang yang Anda inginkan.


Langkah 2: Dokumen .fla

Buat dokumen ActionScript 3.0 baru (File > New...). Atur ukuran Stage ke dimensi yang Anda inginkan, saya telah menggunakan 600 x 300 px.


Langkah 3: Latar Belakang Anda

Tambahkan atau gambarkan gambar untuk digunakan sebagai latar belakang, saya telah menggunakan gradien biru sederhana (#02C7FB, #1F63B4).


Langkah 4: Layer

Ubah nama layer pertama menjadi "Background" lalu buat yang lain dan beri nama "Code". Anda dapat mengunci layer "Code" untuk menghindari penempatan gambar yang tidak diinginkan di sana.


Langkah 5: ActionScript

Simpan pekerjaan Anda dan mari masuk ke kodenya!

Saya berasumsi Anda sudah memiliki pemahaman dasar tentang ActionScript 3.0, jika Anda memiliki keraguan kata kunci tertentu, silakan merujuk ke Bantuan Flash (F1).

Buat file ActionScript baru (File > New...).


Langkah 6: Mengimpor Kelas yang Diperlukan

Di sini kita mengimpor Kelas yang akan kita gunakan, ingat bahwa kata di sebelah "package" adalah nama folder tempat Kelas kita berada.


Langkah 7: Memperluas Kelas

Memperluas kelas MovieClip akan memungkinkan kelas kita mewarisi semua metode, properti, dan fungsi yang dimiliki MovieClip, dalam hal ini kita menggunakannya untuk mendapatkan akses ke metode addChild().


Langkah 8: Variabel-variabel

Meskipun mereka memiliki cukup banyak nama yang jelas, saya akan menambahkan komentar singkat pada setiap var untuk memastikan itu jelas. Mereka mendapatkan nilainya dari parameter fungsi Main.


Langkah 9: Fungsi Main

Ini adalah fungsi yang kita butuhkan untuk memulai efek, kita juga mengatur nilai variabel dalam kode ini.


Langkah 10: Membuat Cahaya

Dalam kode ini kita menggunakan pernyataan "For" untuk membuat jumlah Lights yang ditetapkan pengguna dalam parameter dan menghitung kecepatan semi-acak untuk setiap Light.


Langkah 11: Posisi

Ini menetapkan posisi awal acak untuk Lights berdasarkan parameter Area.


Langkah 12: Filter Blur

Kode di atas menerapkan Blur. Ingat bahwa kode ini masih merupakan bagian dari For, jadi Lights mendapatkan Blurs yang berbeda.


Langkah 13: Alpha

Yang mudah; ini menetapkan properti alpha antara 0,1 dan 0,6.


Langkah 14: Skala

Ini mengatur skala Lights antara ukuran asli dan parameter skala minimum. Kita menggunakan metode round untuk menghemat prosesor.


Langkah 15: Menambahkan Cahaya ke Panggung

Ini menambahkan Lighta ke Stage, lalu kita menyimpannya dalam Array untuk menggunakannya nanti. Ini juga fungsi checkDirection untuk melihat ke arah mana Lights akan pergi.


Langkah 16: Periksa Fungsi Arah

Di sini kita menggunakan for untuk mendapatkan akses ke semua Lights di Array, lalu memeriksa variabel arah untuk menentukan ke mana harus memindahkan Lights. Bergantung pada arahnya, kita menambahkan listener ke fungsi yang sesuai.


Langkah 17: Fungsi Move

Bagian selanjutnya ini mungkin tampak sedikit rumit, tetapi lebih mudah daripada yang Anda pikirkan. Pada dasarnya, ini menggerakkan Light tergantung pada kecepatan yang dihitung dalam fungsi Main, kemudian memeriksa apakah Light telah "meninggalkan" Area yang berefek. Jika itu yang terjadi, itu menetapkan posisi acak yang bertentangan dengan arah yang dituju Light.


Langkah 18: Memanggil Fungsinya

Simpan kelas Anda (ingat bahwa file tersebut harus memiliki nama yang sama dengan Kelas) dan mari kita kembali ke Fla. Buka Actions Panel dan tulis:

Itu saja! Uji movie Anda untuk melihat latar belakang animasi yang bagus!


Kesimpulan

Bermain dengan parameter di kelas akan menghasilkan banyak efek yang berbeda, cobalah mengubah latar belakang, mengatur kecepatan lebih lambat atau lebih cepat, menggunakan lebih banyak Lights, kurangi Blur dan sebagainya!

Saya harap Anda mempelajari sesuatu yang berguna, terima kasih telah membaca!

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.