Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. ActionScript
Code

Membuat Aplikasi Perekam Audio yang Berguna di ActionScript 3

by
Difficulty:BeginnerLength:MediumLanguages:

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

Dalam tutorial ini, kita akan belajar bagaimana mengembangkan aplikasi Perekam Audio yang berguna dan menarik menggunakan kelas MicRecorder dari Thibault Imbert. Baca terus untuk mengetahui lebih lanjut!


Pratinjau Hasil Akhir

Mari kita lihat hasil akhir yang akan kita jalani:


Langkah 1: Ringkasan Singkat

Kita akan menggunakan alat gambar Flash untuk membuat antarmuka yang mudah digunakan dan kekuatan ActionScript 3 untuk merekamnya. SWF kemudian akan menyimpan suara sebagai WAV di hard drive Anda. Kelas pihak ketiga (tetapi bukan program) akan digunakan untuk merekam dan mengkodekan data.


Langkah 2: Pengaturan Dokumen

Luncurkan Flash dan buat dokumen baru. Atur ukuran panggung menjadi 400x290px dan frame rate menjadi 24fps.


Langkah 3: Antarmuka

Ini adalah antarmuka yang akan kita gunakan untuk aplikasi ini; latar belakang gradien hitam, tombol utama tengah yang digunakan untuk memulai dan menghentikan perekaman, indikator bilah perekaman dan indikator aktivitas mikrofon.

Mari menyelami dan membangunnya.


Langkah 4: Latar Belakang & Judul

Pilih Rectangle Tool (R) dan buat persegi panjang 400x290 px dan isi dengan gradien linier ini: #282C2D, #0C0E0E.

Sekali lagi, gunakan alat Rectangle untuk membuat garis #111111, 400x1 px, duplikat (Cmd + D) dan gerakkan 1px ke bawah, isi dengan #353535.

Gunakan Text Tool (T) dan tulis judul untuk aplikasi Anda, saya menggunakan format ini: Helvetica Neue Regular/Bold, 13pt, #E6E6E6.


Langkah 5: Tombol Rec

Mari sekarang menggambar tombol besar di tengah.

Pilih Oval Tool (O) dan buat lingkaran 146x146 px, isi dengan gradien linier ini: #EEEEEE, #9A9A9A, gunakan Gradient Transform Tool (F) untuk memutar isian gradien.

Gandakan bentuk dan membuatnya 76x76 px, pusatkan dan ubah isian gradien ke #C11402, #B11201.

Konversikan tombol ke MovieClip dan beri nama recButton.

Klik dua kali MovieClip baru untuk masuk ke mode edit dan buat keyframe baru (Insert > Timeline > Keyframe), gunakan alat rectangle untuk membuat dua bilah 18x80 px dan mengisinya dengan gradien terakhir.

Langkah 6: Indikator Aktivitas Mic

Indikator aktivitas mikrofon mungkin memakan waktu lama; ini adalah indikator berbasis waktu sehingga Anda harus memodifikasi isi setiap frame.

Dengan Rectangle Primitive Tool (R) buat persegi panjang membulat 3x15 px dengan radius sudut 3px dan isi dengan #252525. Gandakan bentuk dan buat ruang 5px antara setiap bentuk, ulangi proses ini sampai Anda mencapai 50 bentuk.

Konversikan bentuk ke MovieClip dan beri nama activity, masukkan mode edit (klik-ganda) dan buat 100 frame, 1 frame utama dan 1 frame ekstra per bentuk.

Mulai mengubah warna setiap bentuk di frame utama sampai Anda mencapai bingkai ke-100, ya, bingkai 100: semua bentuk hitam, bingkai 98: 1 bentuk merah, bingkai 96: 2 bentuk merah, dll.


Langkah 7: Indikator Perekaman

Pilih alat Rectangle dan buat persegi panjang 400x40 px, isi dengan warna merah #BB1301.

Gandakan bentuk dan ubah ukuran tingginya menjadi setengahnya, lalu ubah warnanya ke putih dan sisakan hanya 20% dari alfa.

Gunakan Text Tool (T) untuk menambahkan pesan rekaman dan buat Dynamic Field, beri nama counter, ini akan menunjukkan waktu yang berlalu sejak perekaman dimulai.

Konversikan bentuk dan teks ke MovieClip dan beri nama RecBar, tandai kotak Export for ActionScript dan hapus klip dari panggung.


Langkah 8: Kelas MicRecorder

Agar dapat merekam dan mengkodekan data yang diperoleh oleh mikrofon, kita harus menggunakan kelas MicRecorder. Unduh dan pindahkan ke folder proyek Anda.


Langkah 9: Kelas ActionScript Baru

Buat kelas baru (Cmd + N) ActionScript 3.0 dan simpan sebagai Main.as di folder kelas Anda.


Langkah 10: Package

Kata kunci package memungkinkan Anda mengatur kode Anda ke dalam grup yang dapat diimpor oleh skrip lain, disarankan untuk menamai mereka dimulai dengan huruf kecil dan menggunakan intercaps untuk kata-kata berikutnya, misalnya: myClasses. Ini juga umum untuk menamai mereka menggunakan situs web perusahaan Anda: com.mycompany.classesType.myClass.

Dalam contoh ini, kita menggunakan satu kelas, jadi tidak perlu membuat folder kelas.


Langkah 11: Direktif Import

Ini adalah kelas yang perlu kita impor agar kelas kita berfungsi, direktif import membuat kelas dan paket yang ditentukan secara eksternal tersedia untuk kode Anda.


Langkah 12: Deklarasikan dan Perluas Kelas

Di sini kita mendeklarasikan kelas menggunakan kata kunci definisi class diikuti dengan nama yang kita inginkan untuk kelasnya, ingat bahwa Anda harus menyimpan file menggunakan nama ini.

Kata kunci extends mendefinisikan kelas yang merupakan subkelas dari kelas lain. Subkelas mewarisi semua metode, properti, dan fungsi, sehingga kita dapat menggunakannya di kelas kita.


Langkah 13: Variabel-variabel

Ini adalah variabel-variabel yang akan kita gunakan, lihat komentar di kode untuk mencari tahu apa yang sebenarnya terjadi.


Langkah 14: Constructor

Constructor adalah fungsi yang berjalan ketika sebuah objek dibuat dari kelas, kode ini adalah yang pertama untuk mengeksekusi ketika Anda membuat sebuah instance dari suatu objek atau berjalan menggunakan Document Class.


Langkah 15: Listener Awal

Fungsi ini berisi listener yang diperlukan untuk memulai aplikasi.


Langkah 16: Mulai Perekaman

Fungsi selanjutnya disebut ketika pengguna melepaskan tombol Rec, ini dimulai dengan memeriksa ketersediaan mikrofon dan kemudian menggunakan kelas MicRecorder untuk menangkap data yang dihasilkan oleh mikrofon. Tombol Rec sekarang akan digunakan untuk menghentikan perekaman.

Ini juga menambahkan bilah Recording ke panggung untuk digunakan sebagai peringatan visual dan penghitung waktu.


Langkah 17: Hentikan Perekaman

Tombol Rec akan mengubah fungsinya saat merekam, sekarang akan menghentikan perekaman saat dirilis.

Kode berikut akan dieksekusi ketika tombol Rec (stop) diaktifkan.


Langkah 18: Indikator Perbarui Aktivitas

Fungsi ini memperbarui indikator aktivitas Mikrofon. Ia menggunakan properti activityLevel untuk mendapatkan angka dari 0 hingga 100 dan kemudian menggunakannya dalam activity MovieClip.


Langkah 19: Perekaman

Fungsi berikutnya mengatur waktu yang telah berlalu dalam bilah Recording.


Langkah 20: Perekaman Selesai

Ketika pengguna menghentikan perekaman, event Complete akan dikirim dan kita akan menggunakan instance FileReference untuk menyimpan file yang direkam ke disk.


Kesimpulan

Kelas MicRecorder adalah tambahan yang bagus untuk ActionScript 3, pastikan untuk mem-bookmark kelas ini untuk menggunakannya dalam proyek Anda di masa mendatang.

Terima kasih telah membaca tutorial ini, saya harap Anda mendapatkan manfaatnya!

Advertisement
Advertisement
Advertisement
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.