Flash no.6 : Membuat tombol play pause toggle untuk memutar mp3

Oke, sesuai dengan judul tutorial yang kita bahas kali ini , membuat tombol play pause toggle . Play pause toggle ini sering sekali kita jumpai  di player player flash yang disisipkan pada suatu site maupun pada player window.  Apasih play pause toggle? Intinya saat kita klik play maka tombol play berubah menjadi pause, dan saat kita klik pause maka tombol akan berubah jadi play.
Lihat gambar:

sample

Gimana ? anda tertarik untuk membuatnya? Saat play diklik maka mp3 dimainkah dan button berubah jadi pause, saat pause diklik maka mp3 distop dan button berubah jadi play.
Berikut adalah langkah langkah untuk membuatnya
-Langkah 1 : Buat button baru, yaitu dengan drag rectangle ( buat kotak kecil ) di stage -> klik kanan -> convert to symbol -> pada symbol type pilih button.
Lihat gambar:
“untuk keterangannya sudah saya tuliskan disetiap gambar.”

rectangle

convert to symbol

Keterarangan dari dua gambar diatas : klik rectangle tool kemudian buat sebuah kotak kemudian click kanan  dan convert to symbol

movieclip

instance name

Keterangan dari dua gambar diatas: ”pilih rectangle yang baru saja kita buat, ubah ke symbol dan pada symbol type pilih movie clip, kemudian berikan instance name agar dapat berinteraksi dengan script yang akan kita tulis”
Kemudian:
Double click movie clip tadi sehingga kita masuk ke dalam nya.
Lihat gambar:
double click

“hapus rectangle yang berwarna biru, kita tidak menginginkan nya bukan, nah bila kita sudah menghapusnya maka symbol movie clip kita terlihat blank, tidak apa apa. Nah, sekarang saat nya kita mengisi movie clip kita yang blank dengan button play dan button pause”.

-Langkah 2 : Mari kita siapkan tombol play dan tombol pause yang akan kita jadikan satu toggle. Seperti  yang saya bilang pada tutorial tutorial sebelumnya, untuk membuat button anda dapat menbuatnya sendiri atau menggunakan button collection yang sudah ada di Common Libraries flash. Nah, untuk memperpendek tutorial maka disini saya menggunakan contoh button yang sudah ada di Common Libraries. Click Window -> Common Libraries -> Button.
Untuk membuat play pause toggle, maka kita membutuhkan tombol play dan tombol pause. Setelah window Common Libraries terbuka , pilih button play dan button pause yang anda suka kemudian drag keduanya ke stage.
Lihat gambar:

drag

-Langkah 3 : Lihat timeline, masukan tombol play ke frame 1 dan tombol pause ke frame 2. Oke, disinilah kita bermain trik, untuk membuatnya toggle maka kedua tombol harus dimasukkan ke frame yang berbeda.
Pada layer 1 , semua button kita ( baik play maupun pause ) berada di frame 1, nah, arahkan mouse anda ke frame 2 -> klik kanan -> insert key frame
Sekarang kita sudah punya  2 frame yaitu frame 1 dan frame 2, nah dengan insert keyframe maka semua objek pada frame 1 akan dicopy ke frame 2, kembali ke sebelumnya bahwa kita akan meletakkan button play pada frame 1 dan button pause pada frame 2, jadi
–    Click frame 1 -> maka semua object akan aktif, hapus button pause
–    Click frame 2 -> maka semua object akan aktif , hapus button play
–    Atur object seakan akan jadi satu / bertumpukan.
Mungkin anda akan bertanya, bagaimana cara mengaturnya? Tentu bisa, anda bisa melakukannya secara manual dengan mendrag sedikit demi sedikit atau dapat menyamakan koordinat x,y pada button play di frame 1 dengan button pause di frame 2 .
Lihat gambar:

frame to frame

Saya biasanya mengatur posisi supaya sama dengan melihat di window properties, posisi x, y button play saya samakan dengan posisi x, y button pause.
Lihat gambar:
position

-Langkah 4 : Berikan action stop() untuk masing masing frame. Secara default, flash akan memainkan dari frame 1 ke frame 2 dan seterusnya. Nah , dengan menambah kan action stop() maka frame akan distop tepat dimana ada kode stop().
Buat layer baru ( saya member i nama dengan actions )  -> di frame 1 otomatis ada keyframe, click kanan frame 2 -> insert keyframe
Lihat gambar:

action

“nah, setelah frame 1 dan frame 2 kita insert kan key frame, maka langkah selanjutnya adalah dengan
Klik kanan frame 1-> actions -> tambahkan stop(); pada window actions. Begitu juga dengan frame 2”
OKE, SEKARANG BUTTON KITA SUDAH JADI, TINGGAL MENGINTEGRASIKANYA 😉
-Langkah 5 : Mari kita integrasikan button playpause yang baru saja kita buat. Pada tutorial ini kita masih mengacu kepada tutorial sebelumnya “Flash no.4 : Membuat tombol play dan stop untuk memutar file mp3”.
Nah, bila anda belum menyimak tutorial sebelumnya silahkan and abaca tutorial no. 4. Pada tutorial no.4 kita sudah membahas cara menambah script pada play button dan stop button untuk memutar file mp3.
Lihat gambar:
stop

“preview dari tutorial no.4 Membuat play dan stop button untuk memutar file mp3”

actions

“actions script dari tutorial no.4 Membuat play dan stop button untuk memutar file mp3”
Oke, sekarang kembali ke scene, di layer pertama scene copy pastekan button stop yang sudah kita buat dari tutorial sebelumnya ( no.4  membuat play dan stop button untuk memutar file mp3 )
Lihat gambar:
paste

Masih di scene, klik kanan frame 1 dilayer 1 -> actions
Setelah tampil Window Actions , pastekan Actions Script berikut ini, ingat kode berikut ini merupakan pemgembangan dari kode kita yang yang ada di tutorial sebelumnya ( no. 4 Membuat play dan stop button untuk memutar file mp3 ).
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;
var pausePosition:int= 0;

okie_playpause.addEventListener(MouseEvent.CLICK, play_musik);
okie_stop.addEventListener(MouseEvent.CLICK, stop_musik);

function play_musik(Event:MouseEvent):void{
if ( sedangDimainkan == true){
pausePosition = okie_channel.position;
okie_channel.stop();
okie_playpause.gotoAndStop(1);
sedangDimainkan = false;
}else{
okie_channel= okie_sound.play(pausePosition);
okie_playpause.gotoAndStop(2);
sedangDimainkan = true;
}
}

function stop_musik(event:MouseEvent):void{
if(sedangDimainkan == true){ // kode ini ditambah untuk perbaikan bug
okie_channel.stop();
okie_playpause.gotoAndStop(1);
sedangDimainkan = false;
pausePosition = 0;
}
}
Lihat gambar:
kode akhir

Hum, ini kode yang bikin play dan pause jadi toggle
function play_musik(Event:MouseEvent):void{
if ( sedangDimainkan == true){
pausePosition = okie_channel.position;
okie_channel.stop();
okie_playpause.gotoAndStop(1);
sedangDimainkan = false;
}else{
okie_channel= okie_sound.play(pausePosition);
okie_playpause.gotoAndStop(2);
sedangDimainkan = true;
}
}
Okie_playpause.gotoAndStop(1) akan menampilkan frame 1 dari object okie_playpause. Kita tahu bahwa frame 1 pada object tersebut adalah button play.
Begitu juga denga okie_playpause.gotoAndStop(2), akan menampilkan frame 2 dari object okie_playpause. Di frame 2 object kita adalah button pause, jadi button pause itulah yang akan ditampilkan.
Apakah saya harus menjelaskannya baris demi baris?? Saya yakin tidak perlu, coba anda lihat, pasti anda akan jelas dengan sendirinya. Saya mengelami kesulitan dalam menerangkan sesuatu padahal di pikiran sebetulnya tahu. Mungkin karena saya bukan guru… 🙂
Oke, sekarang anda dapat mempreviewnya melalui control -> test movie -> test
Cukup sekian dari saya selamat mencoba , semoga berhasil. Terimakasih , sampai jumpa pada tutorial saya berikutnya. ^_^

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

Judul : Membuat tombol play pause toggle untuk memutar mp3
Software : Adobe Flash ( di sini saya menggunakan Adobe Flash CS5 )
Deskripsi : Di dalam tutorial ini kita akan membuat tombol play sekaligus tombol pause , serta mengkombinasikannya secara toggle.
Tanggal dibuat : 27 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 ) “
Download PDF http://friends.smansakra.sch.id/m/files/view/FLASH-no-6-Membuat-tombol-play-pause-toggle-untuk-memutar-mp3

0 Responses to “Flash no.6 : Membuat tombol play pause toggle untuk memutar mp3”



  1. Leave a Comment

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: