Rabu, 08 Juni 2011

Video
Text

Flash no.9 : Membuat equalizer (spectrum) untuk file mp3 atau file audio lain


Para pembaca yang budiman, selamat berjumpa kembali dengan saya. Pada tutorial kali ini ( tutorial ke 9 ) kita masih berexperiment dengan Audio.  Pernahkan anda melihat equalizer pada saat memutar file mp3? Nah equalizer itulah yang akan kita buat pada kesempatan kali ini.
Lihat gambar:
sample equalizer
“saat audio dimainkan , maka equalizer akan bergerak naik turun mengikuti irama audio kita”
Oke, equalizer yang akan kita buat adalah seperti berikut ini ,
Lihat gambar:
sample jadi
“pada gambar simple equalizer diatas, saat kita memainkan audio , maka equalizer diatas akan bergerak gerak sesuai irama audio kita, source code dan lagu juga saya include kan( lihat link di halaman awal )”
Bagaimana cara membuatnya? Maki kita simak step be step.

-Langkah 1 : Buka Adobe Flash anda, di sini saya menggunakan Adobe Flash CS5, bila anda menggunakan versi terdahulu sebetulnya langkah langkah nya adalah sama saja.
cs5
-Langkah 2 : Mari terlebih dahulu melihat struktur dari sample equalizer yang saya buat:
Gambar 1:
sample detail
Penjelasan gambar diatas:
Pada scene kita membuat 2 buah layer, yang bawan sebagai tempat kita menaruh equalizernya, sedangkan yang atas tempat kita menaruh actions scriptnya. Pada layer bawah ( layer 1) kita meletakkan sebuah equalizer , equalizer di sini adalah symbol yang kita beri instance name. Di sini saya memberikan sebuah instance name ‘okie_equalizer’ pada window properties.
Lihat gambar 2 :
sample detail 2
Penjelasan gambar di atas:
Pada scene 1 tadi kita memiliki sebuah symbol dengan instance name ‘okie_equalizer’, nah untuk mengetahui apa yang ada di dalam symbol ‘okie_equalizer ‘ tersebut, silahkan anda double klik , maka akan anda dapati tampilan seperti pada gambar 2 diatas.
Pada gambar 2, symbol kita (‘okie_equalizer’) memiliki 6 symbol lagi dengan instance name yang berbeda (eq_left1 untuk symbol pertama, eq_right1 untuk symbol kedua, eq_left2, eq_right2, eq_left3, eq_right3 ).
6 symbol tersebut saya letakkan di layer ‘equalizer’. Selain layer equalizer pada gambar juga tampak layer ‘bg’ yang berisikan rectangle warna biru. Kemudian juga ada layer ‘copy right’ yang isinya hanya sebuah tulisan nama dan email saya.
Pada penjelasan sebelumnya pernah saya katakana bahwa ada 6 symbol dengan instance name yang berbeda. Nah, sebetulnya 6 symbol ini merupakan instance yang sama ( meskipun instance name nya berbeda).
Mari kita click salah satu ( misalnya symbol yang pertama, eq_left1), kemudian double click untuk masuk kedalam nya, anda dapat melihat apa yang ada dalam eq_left1 pada gambar 3 dibawah ini.
Lihat gambar 3:
sample detail 3
Penjelasan gambar di atas:
Sebelumnya , perhatikan gambar diatas, disana terlihat Scene 1  -> Symbol 1 -> equalizer , nah equalizer inilah instance dimana kita berada sekarang ini.
Okie, kembali ke penjelasan awal, tadi kita mendouble klik instance equalizer yang berinstance name ‘eq_left1’. Maka akan terlihat seperti gambar diatas. Di sana saya membuat 2 layer, layer pertama saya letakkan equalizer kita sedangkan untuk Action Scriptnya saya letakkan pada layer 2 yang sudah saya rename menjadi ‘action.
Pada layer dimana kita meletakkan equalizer terdapat 10 frame. Nah, untuk frame 1 saya isi dengan 1 buah anak equalizer, untuk frame 2 saya isi dengan 2 buah anak equalizer, begitu juga dengan frame 3 dan seterusnya hingga frame ke 10 yang saya isi juga dengan 10 anak equalizer. Hum, untuk lebih jelasnya lihat pada gambar berikut ini.
Lihat gambar 4 :
sample detail 4
Penjelasan gambar:
Nah, di sana terlihat bahwa saya mengisi frame ke 5 dengan 5 anak equalizer, begitu juga dengan frame 6 saya isi 6 buah anak equalizer, dan seterusnya hingga frame kesepuluh yang juga saya isi dengan 10 anak equalizer.
BAGAIMANA CARA MEMBUATNYA?
Mari kita bahas step selanjutnya.
-Langkah 3 : pertama tama buka new Action Script file . Klik file -> new -> ActionScript3.
-Langkah 4 : Buatlah sebuah rectangle . Dalam hal ini saya menggunakan rectangle primitive.
Klik rectangle tool anda kemudian pilihlah rectangle primitive buatlah sebuah rectangle seperti pada gambar di bawah ini:
Gambar 1 :
rectangle primitive
Gambar 2 :
rectangle primitive 2
“pada gambar diatas, saya membuat corner radius sesuka saya supaya lebih terlihat bagus”
-Langkah 5 : rectangle yang baru kita buat tadi , mari kita convert ke symbol. Klik kanan rectangle -> convert to symbol -> pilih movie clip -> berikan instance name ‘okie_equalizer’.
Lihat pada gambar:
okie equalizer
-Langkah 6 : double click symbol yang baru saja kita buat. Maka kita akan masuk ke dalam symbol yang baru saya kita buat tadi. Nah, lihat pada gambar dibawah ini. Scene -> symbol  1 bukan? Symbol 1 adalah symbol kita yang baru saja kita double click tadi, symbol 1 ini tadi kita berikan sebuah instance name ‘okie_equalizer’ .
Lihat gambar:
symbol
-Langkah 7 : pada ‘okie_equalizer’ mari kita buat sebuah anak equalizer. Nah, di sini yang saya maksud dengan anak equalizer adalah kotak kotak kecil yang bergerak gerak saat kita memainkan audio kita. Oke, sekarang buat lah sebuah kotak kecil berwarna putih dengan rectangle tool. Untuk memudahkan anda bekerja, anda dapat meng-zoom nya menjadi 200% supaya lebih gedhe.
Pilih new layer -> rename new layer menjadi misalnya ‘equalizer’ -> nah di sinilah kita akan menggambar anak equalizer
Jangan lupa juga untuk layer sebelumnya ( layer 1 ) kita rename menjadi misalnya ‘bg’.
Lihat gambar:
draw rect
Penjelasan gambar diatas:
Nah disini kita telah membuat 1 buah anak equalizer. Kita harus membuat 10 anak equalizer lagi. Caranya adalah dengan mengcopy anak equalizer tersebut kemudian menpastenya dengan ‘paste in place’.
Aktifkan anak equalizer yang baru kita buat tadi dengan mengclicknya -> menu edit kemudian copy -> menu edit kemudian paste in place.
Dengan menggunakan paste in place , maka anak equalizer baru yang kita paste akan memiliki posisi x dan y yang sama dengan anak equalizer yang kita copy, sehingga terlihat seakan akan menyatu dengan anak equalizer yang kita copy sebelumnya.
Nah, karena terlihat menyatu tumpang tindih, sekarang anda dapat menggunakan panah ke atas dari keyboard anda untuk membawa anak equalizer hasil paste tadi ke bagian atas.
Lihat pada gambar:
draw rect 2
Penjelasan gambar:
Di sini saya menggunakan panah ke atas dari keyboard untuk membawa anak equalizer yang baru saja kita paste ke bagian atas. Nah kemudian anda buat lagi anak equalizer dengan cara yang sama seperti barusan ( copy, kemudian paste in place ) hingga total anak equalizer berjumlah 10. Kemudian convert to symbol.
Lihat pada gambar:
draw rect 3
Penjelasan pada gambar:
Setelah kita membuat 10 buah anak equalizer, kemucian kesepuluh buah tersebut kita seleksi semuanya dan kita convert to symbol ( klik kanan -> convert to symbol ).
Lihat pada gambar:
eq left
Penjelasan pada gambar:
Setelah saya mengconvert sebagai symbol dengan name tetap ‘symbol 2’ , kemudian saya memberikan sebuah instance name ‘eq_left1’.
-Langkah 8 : double click ‘eq_left1’ untuk masuk kedalamnya. Di sini kita akan memodifikasi symbol yang telah kira berikan instance name ‘eq_left1’
Double click ‘eq_left1’ maka akan terlihat seperti gambar dibawah ini:
Lihat pada gambar:
symbol
-Langkah 9 : buat 10 frame, dan masing masing isikan dengan keyframe , kemudian sesuaikan.
Sebelumnya, silahkan lihat pada header gambar kita, disana ada scene -> symbol 1 -> symbol 2, nah di symbol 2 inilah posisi kita sekarang. Symbol 1 , symbol 2 adalah sebuah instance.
Oke, di sini kita akan menginsert kan keyframe keyframe hingga frame ke 10. Karena pada frame 1 di sana sudah ada , maka langsung saja klik kanan frame 2 -> insert keyframe, klik kanan frame 3 -> insert keyframe, klik kanan frame 4 -> insert keyframe, dan seterusnya hingga frame ke sepuluh.
Lihat pada gambar:
symbol
-    Nah, sekarang klik frame 1, hapus 9 anak equalizer atasnya hingga tersisa 1 saja.
-    Klik frame 2 , hapus 8 anak equalizer atasnya hingga tersisa 2 saja.
-    Klik frame 3, hapus 7 anak equalizer atasnya hingga tersisa 3 saja.
-    Klik frame 4, hapus 6 anak equalizer atasnya hingga tersisa 4 saja.
-    Dan seterusnya hingga frame ke 10
Mungkin anda bertanya, lalu bagaimana cara menghapusnya?  Oke, gambang, pastikan anda click selection tool, kemudian kotakilah ke 9 anak equalizer, setelah terseleksi semua press tombol delete pada keyboard.
Lihat gambar:
seleksi
Jadi di sini nantinya frame 1 terdapat 1 buah anak equalizer, frame 2 terdapat 2 buah, frame 3 terdapat 3 buah , dan seterusnya hingga frame 10 terdapat 10 buah anak equalizer.
Oke, sekarang equalizer kita sudah jadi, nah tinggal buat layer baru -> rename menjadi ‘actions’
Lihat pada gambar:
actions
-Langkah 10 : pada frame 1 layer ‘action’ berikan action script. Klik kanan frame 1 layer ‘actions’ kemudian pilih -> actions -> isikan dengan stop();
Kode diatas akan menstop flash player kita agar tetap pada frame 1 , untuk frame frame silanjutnya akan kita gunakan nanti.
OKE, SEKARANG KITA SUDAH PUNYA 1 BUAH EQUALIZER YANG SUDAH JADI.
Sekarang kita kembali ke instance ‘symbol 1’ , dengan cara mengklik ‘symbol 1’ pada title flash kita.
Lihat pada gambar:
kembali ke symbol
Nah, sekarang kita kembali ke symbol 1 ( tadi instance symbol 1 kita beri instance name ‘okie_equalizer’ ). Pada symbol 1 ini kita baru memiliki 1 buah equalizer. Disini kita akan membuat 6 buah equalizer , jadi kita copy saja ‘eq_left1’ yang sudah kita buat tadi menjadi 6 buah equalizer.
Ingat, di sini sebaiknya kita menggunakan ‘paste in place’ agar posisi x dan y antara equalizer yang ingin di copy dan equalizer hasil dari paste sama.
Click kanan ‘eq_left1’ -> klik menu edit -> paste in place -> untuk menggeser hasil paste silakan anda menggunakan panah kanan dari keyboard anda.
Lihat pada gambar:
equalizer
Equalizer ke 1 tadi sudah kita berikan nama ‘eq_left1’
Equalizer ke 2 disini mari kita berikan nama ‘eq_right1’
Equalizer ke 3 kita berikan nama ‘eq_left2’
Kemudian ‘eq_right2’, ‘eq_left3’, ‘eq_right3’.
-Langkah 11 : sekarang kembali ke scene 1 , buatlah layer untuk Action Script kemudian ketikkan kodenya.  Sekarang kita buat layer di scene 1, ingat, sekarang kita kembali ke scene 1, untuk kembali ke scene 1 ya tinggal anda klik scene 1 pada title/header flash anda.
Setelah kita buat sebuah layer baru, rename layer tersebut misalnya di sini saya merename nya menjadi ‘actions’. Kemudian klik kanan frame 1 pada layer actions -> actions -> masukkan code di bawah ini
import flash.events.Event;
var okie_sound:Sound = new Sound(new URLRequest(“SWIBA-SWIBA GAYENG.mp3″));
var okie_channel:SoundChannel;
okie_channel = okie_sound.play();
addEventListener(Event.ENTER_FRAME, enter_frame);
function enter_frame(event:Event):void{
//ANIMATED EQ BARS
okie_equalizer.eq_left1.gotoAndStop(Math.round(okie_channel.leftPeak*10));
okie_equalizer.eq_right1.gotoAndStop(Math.round(okie_channel.rightPeak*8));
okie_equalizer.eq_left2.gotoAndStop(Math.round(okie_channel.leftPeak*6));
okie_equalizer.eq_right2.gotoAndStop(Math.round(okie_channel.rightPeak*8));
okie_equalizer.eq_left3.gotoAndStop(Math.round(okie_channel.leftPeak*5));
okie_equalizer.eq_right3.gotoAndStop(Math.round(okie_channel.rightPeak*7));
}
Lihat pada gambar:
actions
PENJELASAN KODE:
*PASTIKAN BAHWA anda memiliki sebuah audio anda tempatkan sefolder dengan file fla ini, anda juga dapat melihat code yang link nya sudah saya insertkan di header dari tutorial ini.
import flash.events.Event;
var okie_sound:Sound = new Sound(new URLRequest(“SWIBA-SWIBA GAYENG.mp3″));
var okie_channel:SoundChannel;
okie_channel = okie_sound.play();
oke, sebetulnya untuk kode “import flash.events.Event;” anda tidak perlu mengetikkan nya secara manual, karena saat anda mengetikan “function enter_frame(event:Event “ maka otomatis akan ditambahkan pada line pertama dari kode kita.
Kode berikutnya diatas adalah kita mendefinisikan var okie_sound, di sini kita buat variable okie_sound dengan type ‘sound’.
Kemudian kita merequest sound yang akan kita gunakan yaitu ‘SWIBA-SWIBA GAYENG.mp3’ .
Lalu menplay nya. Kode yang simple bukan?
Kode berikutnya:
addEventListener(Event.ENTER_FRAME, enter_frame);
di sini kita memberikan listener saat flash player menjalankan fla kita, kita memberikan listener sebuah fungsi ‘enter_frame’. Nah dibawah ini adalah fungsi dari enter_frame tersebut:
function enter_frame(event:Event):void{
//ANIMATED EQ BARS
okie_equalizer.eq_left1.gotoAndStop(Math.round(okie_channel.leftPeak*10));
okie_equalizer.eq_right1.gotoAndStop(Math.round(okie_channel.rightPeak*8));
okie_equalizer.eq_left2.gotoAndStop(Math.round(okie_channel.leftPeak*6));
okie_equalizer.eq_right2.gotoAndStop(Math.round(okie_channel.rightPeak*8));
okie_equalizer.eq_left3.gotoAndStop(Math.round(okie_channel.leftPeak*5));
okie_equalizer.eq_right3.gotoAndStop(Math.round(okie_channel.rightPeak*7));
}
Gimana? Sudah bisa memahami nya kan? ‘Okie_equalizer’ adalah symbol 1 kita, kemudian kita buat tadi ‘eq_left1’ di dalam ‘okie_equalizer’.
Sebuah channel pasti memiliki leftPeak dan rightPeak, jadi kita mensetting nya secara manual dan membuatnya random.
Disana ada yang saya kalikan 10, ada yang saya kalikan 8, ada yang saya kalikan 6 dan lain lain, dengan tujuan membuatnya random. Maksimal pengali dalam perkalian ini tentu saja maksimal jumlah total anan equalizer yang telah kita buat tadi yaitu 10, anda dapat mengalikan sesuai selera andan mulai dari 1 hingga 10.
Selamat mencoba.
Setelah semua sudah selesai, sekarang tinggal anda test movie dengan mengclick menu movie -> test movie atau dapat juga menggunakan ctrl + enter.
Lihat gambar:
jadi
Oke, demikian tutorial dari saya, semoga bermanfaat, terimakasih sudah menyimak dan sampai jumpa pada tutorial saya berikutnya. ^_^
======================================
Judul : Membuat equalizer untuk file mp3 atau file audio lain
Software : Adobe Flash ( di sini saya menggunakan Adobe Flash CS5 )
Deskripsi : Dalam tutorial kali ini kita akan membahas cara membuat sebuah equalizer untuk file mp3 maupun file file audio lain yang disupport oleh flash.
Tanggal dibuat :  5 September  2010
NB : “ah, sangat sulit memahami tutorial bila divisualkan secara text, bila anda berminat  saya sarankan untuk mempelajari video tutorialnya di Youtube  dengan mencarinya di search,  anda dapat mendownloadnya dengan sangat mudah menggunakan IDM ( Internet Download Manager ) “
Download PDF :https://docs.google.com/file/d/0B6_ki5nuY_ysRFd0NFBEVGhKNVE/edit?usp=sharing
Download code :https://docs.google.com/file/d/0B6_ki5nuY_ysWHVSLUZZQzVPSzQ/edit?usp=sharing

Please share bila tutorial ini cukup berbobot untuk anda!

MediaTutorial mengedepankan tutorial yang berkualitas. Semua penjelasan dipaparkan sedetail mungkin.
Please, bila tutorial ini membantu anda dan cukup berkualitas bagi anda mohon untuk share pada button sharing berikut ini.

Writen by: Okie Eko Wardoyo

Comments