Rabu, 08 Juni 2011

Video
Text

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-me

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