Rabu, 08 Juni 2011

Video
Text

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:
external file

-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.
Ingat , disini kita menggunakan Action Script 3, bukan Action Script 2
flash cs5
as3

-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.
Lihat gambar:
drag button

-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.
Lihat gambar:
klik tombol play
“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.
Lihat gambar:
action

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



Lihat gambar:
code

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:
play

“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:
stop

“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
stop play

Anda dapat mengembangkannya sesuai kreasi anda.
Oke, demikian tutorial dari saya, semoga bermanfaat. Sampai jumpa di tutorial saya berikutnya. ^_^
===========================================

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