Flash no.4 : Membuat tombol play dan stop untuk memutar file mp3

Pernahkah anda berfikir sejenak untuk membuat sebuah player sederhana yang dapat memainkan file file mp3 anda dengan menggunakan flash? Pernahkan anda memiliki sebuah website yang memiliki sebuah player mp3 flash buatan anda sendiri? Nah, mari kita buat sebuah player sederhana yang terdiri dari sebuah file mp3 external, sebuah tombol play, dan sebuah tombol stop. Perlu diingat, kita disini  menggunakan file mp3 external, maksudnya file mp3 tersebut berada diluar file flash kita, contohnya pada gambar berikut ini:

-Langkah 1 : Buka flash editor anda. Di sini saya menggunakan Adobe Flash CS5, bila anda menggunakan versi yang lebih lama pada dasarnya adalah sama saja.

Buka Adobe Flash CS5 -> File -> new -> Action Script 3 document.

-Langkah 2 : Bukalah button anda, anda bisa membuat button anda sendiri , tetapi pada kesempatan kali ini saya akan menggunakan button yang sudah ada di common libraries nya Adobe Flash untuk menghemat waktu.

Aktifkan window Common Libraries dengan Window -> Common Libraries ->   Buttons

Kemudian pilih Button yang anda suka , Drag button ke stage.

-Langkah 3 : Oke, terlebih dahulu kita bikin tombol play nya. Intinya, saat kita mengclick tombol play diatas , maka external file mp3 akan terputar…

Klik button play yang baru saja kita drag -> lihat window properties -> berilah nama untuk instance name

Instance name bisa diartikan sebagai nama panggilan untuk button play kita, jadi kita bisa mengeksekusi Action Script dengan memanggil objek sesuai namanya.

“untuk instance name di atas, saya member i nama ‘okie_play’, anda dapat member i nama sesuka anda”

-Langkah 4 : Lihat window timeline, pastikan frame yang aktif adalah frame satu, klik kanan -> actions

Kita akan menyisipkan Action Script pada frame 1 di layer. Dengan memilih action pada saat klik kanan , maka kita akan membuka Window Action untuk mengetikkan script script nya.

-Langkah 5 : Bila Window Action sudah terbuka, ketikkan script berikut :

Lihat gambar:

Penjelasan:

Sebetulnya bila anda menggunakan FLASH CS5 untuk script

import flash.media.Sound;

import flash.media.SoundChannel;

import flash.events.MouseEvent;

tidak perlu anda ketikkan , karena saat kita mulai mengetikkan  var okie_sound:Sound = new Sound( , maka otomatis akan ditambahkan di line atas.

SAYA RASA SCRIPT DIATAS TIDAK PERLU SAYA JELASKAN PANJANG LEBAR, karena saya yakin anda dapat memahami nya sendiri. Sangat simple.

Oke, sekarang kita preview Control -> Test Movie -> Test

Lihat gambar:

“mp3 kita sudah terplay dengan sempurna”

-Langkah 6 : Ada bug, yaitu saat kita mengklik play button, maka file kita bunyi, nah saat kita klik play button lagi, maka file kita bunyinya jadi 2, kita klik lagi dan seterusnya maka file kita jadi double double, gak enak bila didengerin… lalu gimana cara mengatasinya?

Tambahkan sedikit code hingga jadi seperti dibawah ini:

Kode tambahan saya kasih koment “ // == kode tambahan==// “

SEMPURNA, saat anda mengklik button play lagi , maka tidak ada file yang diputar double.

NAH , SEKARANG MARI KITA BUAT STOP BUTTON NYA.

-Langkah 7 : Sisipkan stop button , Anda dapat membuat button sendiri atau dapat menggunakan button yang sudah ada di common libraries.

Window -> Common Libraries -> Button  -> pilih stop button yang anda suka -> Drag ke Stage

Untuk memilih button , mendrag ke stage caranya sama dengan cara diatas.

-Langkah 8 : Berikan instance name untuk stop button kita yang baru saja kita drag dari common libraries.

Lihat gambar:

“button yang baru di sini saya member i instance name okie_stop, silahkan anda kasih instance name sesuka anda”

-Langkah 9 : sisipkan script berikut:

okie_stop.addEventListener(MouseEvent.CLICK, stop_musik);

function stop_musik(event:MouseEvent):void{

okie_channel.stop();

}

=================================================

SEHINGGA, SELURUH SCRIPT MENJADI SEBAGAI BERIKUT:

=================================================

Silahkan anda test movie , Control -> Test Movie -> Test

Anda dapat mengembangkannya sesuai kreasi anda.

Oke, demikian tutorial dari saya, semoga bermanfaat. Sampai jumpa di tutorial saya berikutnya. ^_^