Membuat Sound Controller dengan ActionScript 3.0

Kali ini kita akan belajar membuat sound controller atau tombol pengatur suara dengan ActionScript 3.0. Tombol tersebut nanti berisi fungsi on dan off (menyalakan dan mematikan audio) saat diklik.

Dalam membuka aplikasi dengan Flash ataupun Animate, biasanya akan ada audio yang dimasukkan baik itu backsound (musik latar belakang) maupun narasi atau sejenisnya.

Langsung cus sajalah. Berikut langkah-langkah yang harus kalian lakukan, jangan lupa sekalian dipraktikkan yes. Bagi kalian yang mendapatkan tugas ini, jangan lupa besok dikumpulkan ya 😀

1. Buka aplikasi Flash CS6 yang ada di komputer kalian. Jika menggunakan Adobe Animate, silahkan menyesuaikan.
2. Buat dokumen baru dengan jenis dokumen ActionScript 3.0
   
3. Buat ikon audio seperti berikut di frame pertama. Kalian boleh menggunakan daya imajinasi dan seni kalian sesuai kreatifitas. Pastinya akan semakin bagus jika lebih berseni daripada yang saya gambarkan.
   
4. Seleksi objek ikon tersebut > klik kanan > Convert to Symbol > Berikan nama movie clip sesuai keinginan. Kalau saya memberi nama dengan mc_sound > pilih tipe Movie Clip > OK.
5. Klik dua kali objek movie clip yang sudah kalian buat. Tampilan timeline kalian harusnya masuk ke bagian movie clip seperti ini.
   
6. Tambahkan keyframe baru di frame kedua, kemudian buat ikon audio dengan tanda off. Di sini saya menggunakan tanda silang saja sebagai tanda off-nya.
   
7. Nah, sekarang kita sudah punya dua keyframe yakni keyframe pertama sebagai audio on dan keyframe kedua sebagai audio off. Okeh, next. Siapin kopi biar makin semangat 😀
8. Selanjutnya kembali ke frame pertama lalu jadikan gambar ikon audio menjadi symbol dengan klik kanan > Convert to Symbol. Berikan nama tombol_on pada kolom Name > pilih tipe Button > OK.
9. Agar sebuah symbol bisa dipanggil dengan ActionScript, pastikan memberikan instance name yang ada di panel Properties. Terlebih dahulu klik objek button ikon audio on kalian kemudian lihat panel Properties dan berikan nama seperti berikut.
   
10. Kemudian pada frame kedua, jadikan gambar ikon audio sebagai symbol dengan klik kanan > Convert to Symbol. Berikan nama tombol_off pada kolom Name > pilih tipe Button > OK.
11. Berikan juga instance name untuk tombol off dengan nama tombol_off.
    
12. Karena kita akan membuat tombol sound controller, secara otomatis kita juga membutuhkan audio sebagai sumber suara. Silahkan siapkan lagu atau sejenisnya yang dapat dipakai sebagai musik. Sebaiknya memiliki format .MP3 atau .WAV yang biasanya support untuk Flash atau Animate.
13. Untuk memasukkan audio tersebut, klik menu File > Import to Library > cari file audio yang ingin kalian masukkan.
    
14. Audio yang masuk akan ada di tampilan panel Library kalian. Jika belum muncul, klik menu Window > Library.
15. Selanjutnya yang harus dilakukan adalah memanggil audio. Pemanggilan audio ada dua jenis yakni:
    • • pemanggilan manual, dilakukan dengan memasukkan audio ke keyframe (seperti membuat animasi 2 dimensi)
      • pemanggilan dengan ActionScript, dilakukan dengan memberi linkage pada audio.

    Audio yang kita masukkan tadi akan dipanggil dengan ActionScript dengan tombol audio on dan off. Perhatikan lagi tampilan panel Library kalian. Klik kanan pada audio yang telah kalian masukkan > pilih Properties.
    

16. Pada tampilan yang muncul, pindah ke tab ActionScript. Berikan centang (checklist) pada Export for ActionScript. Kemudian pada bagian Class, berikan nama laguku
    
17. Akhiri dengan OK. Jika ada warning, tetap lanjutkan OK. Bilang saja OK deh pokoknya hahaha.
18. Kemudian buat layer baru untuk meletakkan ActionScript. Kalau saya biasanya suka memberi nama layer ini dengan nama AS alias singkatan ActionScript agar mudah diingat.
19. Buat dua keyframe pada layer AS. Masukkan script berikut pada keyframe pertama dengan klik kanan keyframe pertama layer AS > Actions.
    

     

    stop();
    tombol_on.addEventListener(MouseEvent.CLICK, klik_tombol_on);
    function klik_tombol_on(e:MouseEvent):void
    {
    	nextFrame();
    }
    
    var backsound:laguku = new laguku();
    var channelbacksound:SoundChannel = new SoundChannel();
    channelbacksound = backsound.play();

20. Kemudian masukkan keyframe berikut pada keyframe kedua.
    

     

    stop();
    tombol_off.addEventListener(MouseEvent.CLICK, klik_tombol_off);
    function klik_tombol_off(e:MouseEvent):void
    {
    	prevFrame();
    }
    
    channelbacksound.stop();

21. Jalankan aplikasi kalian dengan tes CTRL + Enter.

Nah, itu dia langkah-langkah untuk membuat Sound Controller dengan ActionScript 3.0. Jangan lupa dipraktikkan yes. Jika ada kesulitan bisa tanyakan di kolom komentar 😀