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 ( silahkan lihat tutorialnya di {———————-} ) , 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 :

import flash.media.Sound;

import flash.media.SoundChannel;

import flash.events.MouseEvent;

//disini saya menggunakan external mp3 miliknya tipex

var okie_sound:Sound = new Sound(new URLRequest(“TIPEX – SAAT SAAT MENYEBALKAN.mp3”));

var okie_channel:SoundChannel;

 

//button play kita

okie_play.addEventListener(MouseEvent.CLICK, play_musik);

 

function play_musik(event:MouseEvent):void{

okie_channel = okie_sound.play();

}

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==// “

import flash.media.Sound;

import flash.media.SoundChannel;

import flash.events.MouseEvent;

 

var okie_sound:Sound = new Sound(new URLRequest(“TIPEX – SAAT SAAT MENYEBALKAN.mp3”));

var okie_channel:SoundChannel;

var sedangDimainkan:Boolean = false; //== kode tambahan==//

 

//button play kita

okie_play.addEventListener(MouseEvent.CLICK, play_musik);

 

function play_musik(event:MouseEvent):void{

if(sedangDimainkan == true){   // == kode tambahan==//

okie_channel.stop();   // == kode tambahan==//

}  // == kode tambahan==//

okie_channel = okie_sound.play();

sedangDimainkan = true;   // == 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:

import flash.media.Sound;

import flash.media.SoundChannel;

import flash.events.MouseEvent;

 

var okie_sound:Sound = new Sound(new URLRequest(“TIPEX – SAAT SAAT MENYEBALKAN.mp3”));

var okie_channel:SoundChannel;

var sedangDimainkan:Boolean = false;

 

//button play kita

okie_play.addEventListener(MouseEvent.CLICK, play_musik);

okie_stop.addEventListener(MouseEvent.CLICK, stop_musik);

 

function play_musik(event:MouseEvent):void{

if(sedangDimainkan == true){

okie_channel.stop();

}

okie_channel = okie_sound.play();

sedangDimainkan = true;

}

function stop_musik(event:MouseEvent):void{

okie_channel.stop();

}

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

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. ^_^

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

Judul : Membuat tombol play dan stop untuk memutar file mp3
Software : Adobe Flash ( di sini saya menggunakan Adobe Flash CS5 )
Deskripsi : Di dalam tutorial ini kita akan membuat tombol play sekaligus tombol stop , dan kita juga akan memutar file file mp3
Tanggal dibuat : 24 Agustus 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 ) “

2 Responses to “Flash no.4 : Membuat tombol play dan stop untuk memutar file mp3”


  1. 1 ulfah March 10, 2011 at 7:08 am

    saya mu tanya,sy lg bikin cd-interaktif pembelajaran,gmn caranya bikin button-button dalam 1 halaman dengan banyak file audio yang dimainkan,jadi pas di play suaranya ga tumpang tindih satu sama lain, tapi hanya 1 tombol yang digunakan untuk play dan stop nya?????mohon pencerahannya ya mas,terimakasih …. tlng klo ga keberatan caranya dikirim ke email saya

    qmy_vifa88@yahoo.com

    • 2 mediatutorial March 10, 2011 at 10:57 pm

      jadi maksudnya hanya 1 tombol begitu?
      bila tombol diclick untuk halaman a maka muncul audio pertama,
      bila tombol di click untuk halaman b maka muncul audio kedua,
      dan seterusnya .. begitukah?


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s





%d bloggers like this: