flash no.8 membuat slider atau scrubber untuk file mp3

7/26/2019 Flash No.8 Membuat Slider Atau Scrubber Untuk File Mp3

1/15

Flash no.8 : Membuat slider atau scrubber untuk file mp3

Judul : Membuat slider atau scrubber untuk file mp3

Software : Adobe Flash ( di sini saya menggunakan Adobe Flash CS5 )

Deskripsi : Dalam tutorial kali ini kita akan membahas cara membuat slider atau scrubber untuk

file mp3

Tanggal dibuat : 2 September 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 )

Juga ditulis di : {----------------------}

Download code : {----------------------}

Bila anda memutar music, atau video, pasti pada software player nya anda akan melihat sebuah slider

yang dapat anda drag. Dengan mendrag slider ini maka anda dapat memutar file anda sesuai urutan

waktu yang anda suka. Slider ini pun juga bergerak dari awal hingga akhir saat memutar audio maupun

video.

Lihat pada gambar:

Mari kita simak cara membuatnya,

Sebetulnya bila anda telah membaca tutorial saya sebelumnya, Flash no.7 Menambah volume control

untuk mp3 , maka anda tidak akan mengalami kesulitan dalam membuat slider awal.

Sebagai pemberitahuan, berikut adalah screenshot flash jadi kita nantinya:


2/15

Mungkin anda merasa slider diatas sederhana sekali, iya betul memang sangat sederhana, bila anda test

movie maka knop kita akan bergerak seiring dengan lagu yang dimainkan, dan anda juga dapat

menggeser knop untuk merubah rubah posisi lagu yang dimainkan.

Saya juga melampirkan sample kode beserta lagu pendek pada tutorial ini, anda dapat mencobanya .

-Langkah 1 : Buka Adobe Flash yang anda gunakan, disini saya menggunakan Adobe Flash CS5 , bila

anda menggunakan versi yang lebih terdahulu sebetulnya cara caranya adalah sama saja.

-Langkah 2 : Mari kita lihat dulu struktur flash yang akan kita buat.

pada struktur gambar 1 kita melihat bahwa file audio kita berada dalam 1 folder dengan file fla


3/15

pada struktur gambar 2 diatas adalah gambar dari fla kita, di sana ada 2 layer yang saya beri nama

actions yang nantinya kita isi layer tersebut dengan action script, kemudian saya punya 1 lagi dengan

nama slider control ya saya isi dengan slider movie clip dengan name instance song_slider.

struktur gambar 3 diatas menunjukkan layer layer yang ada dalam movie clip slider kita tadi, movie clip

slider kita yang kita beri nama song_slider tadi bila kita buka (double click ), maka akan terlihat

memiliki layer layer didalamnya, anda dapat menyimak seperti gambar diatas.

-Langkah 3 : mari kita buat seperti seperti gambar dibawah ini:


4/15

- Seperti gambar diatas, pertama kita buat new-> actions script 3 file,

- Kemudian lihat timeline, rename layer pertama ( dengan doubleclick ) , ganti dengan nama

slider control

- Buat layer baru ( dengang mengclick tombol kecil kiri bawah) , kemudian rename menjadi

actions , disinilah kita akan menyisipkan action script kita nantinya.

-Langkah 4 : buat movie clip slider. Untuk lebih jelasnya lihat gambar berikut ini:

Pastikan anda berada di layer slider control, kemudian buatlah sebuah rectangle tool dengan no stroke

( tanpa garis tepi ) , kemudian gunakan warna sesuka anda.

Di sini saya menggambar rectangle dengan w: 500 dan H: 20. W itu menunjukkan width / lebar,

sedangkan H menunjukkan height / tinggi.

Rectangle inilah yang nantinya akan kita jadikan slider.

-Langkah 5 : Convert rectangle yang barusan kita buat ke Movie Clip, berikan instance name,

kemudian isi movie clip kita dengan bagian bagian slider.

Lihat pada gambar:


5/15

Penjelasan gambar di atas: click kanan rectangle kita -> convert to symbol, disini kita akan mengconvert

rectangle kita ke symbol dan pilih movie clip. Pastikan registration point kita berada di top left seperti

terlihat pada gambar.

Penjelasan gambar di atas :

setelah diconvert ke symbol , lihat properties window pada flash anda, kemudian berikan instance name

untuk symbol yang baru saja kita convert tadi , di sini saya memberikan instance name song_slider.

Penjelasan gambar diatas: setelah kita convert dan kita beri instance name, maka double clicklah symbol

kita , dengan mendouble click maka kita akan masuk ke dalam symbol yang baru saja kita buat tadi (

song_slider ). Setelah masuk ke symbol song_slider maka kita akan melihat timeline baru , timeline

baru inilah timeline untuk symbol song_slider kita. Oke, sekarang rename layer pertama dari

song_slider dan berikan sebuah nama supaya lebih rapi, disini saya member nama slider area.

*nah, di layer slider area ini lakukan klik kanan pada rectangle lagi -> convert to symbol -> pilih movie

clip dan pastikan registration point di top left -> kemudian berikan sebuah instance name slider_area

Oke sekarang di layer pertama kita sudah memiliki symbol baru dengan instance nama slider_area.

Untuk mengconvert maupun memberikan instance name anda dapat melihat kembali gambar gambar

di atas.


6/15

-Langkah 6 : buat layer baru sebagai background kita nantinya.

Lihat pada gambar:


Buatlah layer baru -> rename layer menjadi bg -> kemudian buatlah sebuah rectangle lagi dengan

stroke color hitam dan bg color hijau, lihat pada gambar. Kemudian setting width 502 dan Height 10.

Kenapa saya memilih 502? Karena 2 pixel adalah untuk border dari bg ini. Kemudian aturlah posisi dari

bg kita sehingga menjadi seperti gambar berikut ini:

Kemudian setelah itu klikah layer slider area kemudian pada symbol slider_area ubahlah opacitynya

menjadi 0, supaya tidak terlihat.

Lihat pada gambar:

Penjelasan gambar diatas:


7/15

Pastikan anda berada di slider area layer, kemudian click lah symbol kita yang berinstance name

slider_area tadi, bila anda susah mengclicknya , karena mungkin layer anda berpindah ke bg , maka

silahkan anda click icon gembok pada layer bg untuk menguncinya supaya tidak dapat diclick, nah

sekarang click lah slider_area.

Sesaat setelah anda mengclick slider_area maka window properties akan aktif. Nah , setelah aktif andadapat menjadikannya tidak terlihat dengan memilih color effect -> style -> alpha -> ubah ke 0%.

Oke kemudian gembok saja semua layer biar layer layer yang sudah kita terkunci rapat rapat pada

posisinya masih masing atau biasa disebut dengan uneditable.

-Langkah 7 : buatlah sebuah pink bar.

Lihat pada gambar dibawah ini:

Penjelasan dari gambar diatas:

Oke, supaya lebih terlihat jelas , maka saya meng-zoom ke 800%, nah kemudian saya membuat layer

baru dan saya rename manjadi pink bar supaya lebih tertata. Di layer pink bar ini saya menggambar

sebuah kotak ( rectangle ) dengan warna stroke -> no color, dan warna bg -> pink. Kemudian saya

sesuaikan supaya terlihat seperti gambar diatas.

Disini saya mensetting W: 10 dan H : 9. Kemudian klik kanan rectangle di layer pink bar -> convert to

symbol -> pilih movie clip -> pastikan registration point di top left -> kemudian berikan instance namepink_bar.

Nah , sekarang kita memiliki satu lagi movie clip dengan instance name pink_bar. Untuk mengconvert

to symbol atau memberikan instance name , anda dapat menyimak gambar gambar sebelumnya.

-Langkah 8 : buatlah sebuah knop.

Lihat pada gambar:


8/15

Penjelasan gambar di atas:

Buat layer baru -> rename layer baru tersebut dengan nama knop -> kemudian buat sebuah rectangle

dan berikan linear gradient seperti pada gambar diatas.

Kemudian atur sedemikian rupa sehingga menjadi seperti gambar dibawah ini:


Kemudian kita atur letaknya seperti pada gambar di atas, kita setting W: 10 dan H : 20 , kemudian mari

kita convert knop menjadi symbol. Click kanan -> convert to symbol -> pilih movie clip -> jangan lupa

registration point di top left -> kemudian berikan instance name knop.

Oke, sekarang kita sudah punya satu lagi symbol dengan instance name knop.

-Langkah 9 : Buatlah sebuah invisible knop.

Invisible knop ini digunakan saat kita mau mendrag, ah, susah dijelaskan dengan kata kata, untuk lebih

jelasnya silahkan gunakan source code yang sudah saya include link nya pada header dari tutorial ini.


9/15

Jadi di sini , saat kita memain kan music, kemudian kita ingin mendrag slider, maka akan muncul invisible

knop / transparent knop. Nah knop inilah yang nantinya berperan saat kita mendrag.

Lihat pada gambar:


Buat sebuah layer baru diatas layer knop, dan berikan sebuah nama ( dengan mendouble clicknya )

misalnya invisible knop.

Pada tahap sebelumnya kita sudah membuat sebuah symbol knop. Nah , symbol yang kita buat ini

otomatis tersimpan di library kita, symbol ini dapat kita gunakan berulang ulang kali tanpa harus

membuatnya lagi, nah begitu juga dalam tahap ini. Kita akan membuat sebuah invisible knop dengan

menggunakan knop yang sudah ada pada library.

Buka library anda -> pilih knop yang telah kita buat sebelumnya -> drag ke stage, tepatnya drag ke layer

invisible knop.

Kemudian setelah anda drag, berilah sebuah instance name misalnya invisible_knop di window

properties. Dengan instance name inilah kita nantinya akan memanggil object yang bersangkutan

melalui action script.

Lihat gambar berikutnya:


10/15


Kita kasih instance name untuk knop kita yang baru saja kita drag dengan name invisible_knop

kemudian kita setting supaya lebih transparan dengan color effect -> alpha, di sini saya memilih 22%.

Kemudian letakkan invisible_knop tepat pada knop, untuk keakuratan supaya tepat pada knop anda

dapat menggunakan tombol panah kanan, atas, kiri, bawah pada keyboard anda. Pastikan semua layer

terlock kecuali layer invisible knop.

Hingga hasil akhirnya seperti pada gambar berikut ini:

-Langkah 10 : Kembali ke scene dan sisipkan action script .

Oke, tadi kita berada di song_slider , nah sekarang mari kita kembali ke scene. Mungkin anda bertanya,

bagaimana caranya kembali ke scene?

Silahkan lihat pada gambar:


11/15

Nah, sekarang kita kembali ke scene. Sekarang, mari kita tambahkan blank keyframe

- Pada layer action, click frame ke 2 -> klik kanan > insert blank keyframe

- Pada layer slider control , click frame ke 2 -> klik kanan -> insert frame

Lihat gambar:

*PADA LAYER ACTION , frame 1 masukkan action script seperti berikut:

//layer 1

var song:URLRequest = new URLRequest("SWIBA-SWIBA GAYENG.mp3");

//end of layer 1


12/15

*PADA LAYER ACTION, frame 2 masukan action script seperti berikut :

//layer 2

stop();

import flash.geom.Rectangle;

import flash.events.MouseEvent;

import flash.events.Event;

//play lagu kita di kode ini

var okie_sound:Sound = new Sound(song);

var position:int; //*BILA diganti number maka suaranya enggak karuan

var okie_channel:SoundChannel;

okie_channel = okie_sound.play(position);

addEventListener(Event.ENTER_FRAME, EnterFrame);

function EnterFrame(event:Event):void{

var totaldurasi:Number = okie_sound.length;

var durasi_isplaying:Number = okie_channel.position;

var persentasi:Number = 100 * (durasi_isplaying/totaldurasi); // *type dijadikan number saja ,

jangan int

song_slider.pink_bar.width = persentasi*5;

song_slider.knop.x = persentasi*5;

}

//--- slider kita ada di bawah ini ---- //

var isDragging:Boolean = false;


13/15

var knopWidth:Number = song_slider.knop.width;

var slider_areaWidth:Number = song_slider.slider_area.width;

var slider_areaX:Number = song_slider.slider_area.x;

//nah ini merupakan slider area yang tersisa setelah dikurangi lebar knop

var real_slider_areaWidth = slider_areaWidth - knopWidth; // saya tambah sepuluh biar lebih pendek

//mari kita buat area untuk slider_area yang tersisa

var slider_areaRect:Rectangle = new Rectangle(slider_areaX,0,real_slider_areaWidth,0);

song_slider.addEventListener(MouseEvent.MOUSE_DOWN, drag);

// *sebetulnya song_slider.invisible_knop.addEventListener(MouseEvent.MOUSE_DOWN, drag);

// *tapi karena pengen song_slider saat diklik langsung knop jalan ya diganti deh

// *

song_slider.invisible_knop.addEventListener(Event.ENTER_FRAME, invisible_knop_enter_frame);

song_slider.pink_bar.addEventListener(Event.ENTER_FRAME, grow);

stage.addEventListener(MouseEvent.MOUSE_UP, stopHere);

function drag(event:MouseEvent):void{

isDragging = true;

song_slider.invisible_knop.startDrag(true, slider_areaRect);

// * ini tak ganti true, bila false maka saat song_slider diclick kagak jalan

}

function invisible_knop_enter_frame(event:Event):void{

if(isDragging == false){

song_slider.invisible_knop.x = song_slider.knop.x;

}

}

function stopHere(event:MouseEvent):void{

song_slider.invisible_knop.stopDrag();

var stop_position:Number = song_slider.invisible_knop.x * okie_sound.length /

real_slider_areaWidth;

position = stop_position;


14/15

okie_channel.stop();

song_slider.knop.x = song_slider.invisible_knop.x;

isDragging = false;

gotoAndPlay(1);

}

function grow(event:Event):void{

song_slider.pink_bar.width = song_slider.knop.x;

}

//end of layer 2

PENJELASAN SCRIPT :

Pada frame 1 kita menuliskan action script berikut,

var song:URLRequest = new URLRequest("SWIBA-SWIBA GAYENG.mp3");

di sini kita membuat sebuah variable baru dengan type URLRequest , kemudian kita set lagu yang akan

direquest adalah SWIBA-SWIBA GAYENG.mp3 yang berada satu folder dengan player kita. Lagu ini juga

saya include di source code ( lihat halaman awal dari tutorial ini untuk melihat link source codenya ).

Kemudian pada frame 2 kita menuliskan action script berikut,

stop();

import flash.geom.Rectangle;

import flash.events.MouseEvent;

import flash.events.Event;

//play lagu kita di kode ini

var okie_sound:Sound = new Sound(song);

var position:int; //*BILA diganti number maka suaranya enggak karuan

var okie_channel:SoundChannel;

okie_channel = okie_sound.play(position);

Nah, pertama tama kita menuliskan stop() dengan tujuan agar flash player memainkan file kita berhenti

pada frame 2 ini. Jadi bila kita tidak menuliskan stop() maka flash player yang terinstal pada computerkita akan kembali ke frame 1, kemudian frame 2, kemudian ke frame 1 lagi , diteruskan ke frame 2, dan

seterusnya berulang ulang kali.

Kemudian kode berikutnya adalah import, nah disana terlihat banyak sekali import yang kita tuliskan,

sebetulnya anda tidak perlu menuliskan import import tersebut, karena akan muncul dengan sendirinya

saat anda sedang mengetikkan kode misalnya seperti fungsi function


15/15

fungsiku(event:MouseEvent):void{} maka otomatis akan menuliskan kan import

flash.events.MouseEvent; pada line pertama.

Kode berikutnya adalah kode untuk memutar lagu kita.

Oke, kode berikutnya adalah berikut,

addEventListener(Event.ENTER_FRAME, EnterFrame);

function EnterFrame(event:Event):void{

var totaldurasi:Number = okie_sound.length;

var durasi_isplaying:Number = okie_channel.position;

var persentasi:Number = 100 * (durasi_isplaying/totaldurasi); // *type dijadikan number saja ,

jangan int

song_slider.pink_bar.width = persentasi*5;

song_slider.knop.x = persentasi*5;

}

Pada kode ini kita memberikan listener saat ENTER FRAME , yaitu saat flash player menjalan kan file kita

dalam hal ini pasti flash player menjalankan file kita frame demi frame, jadi pada saat itulah kita

memberikan fungsi EnterFrame.

Di sana kita menset total durasi dari mp3 kita, kemudian juga ada durasi_isplaying, yaitu posisi mp3 /

durasi saat sedang memutar lagu.

Dengan kita mengetahui durasi keseluruhan dan durasi saat sedang dimainkan, maka kita dapat

membuat prosentase.

Masih ingatkah saat kita membuat sebuah symbol dengan instance name song_slider? nah dalam

symbol song_slider kita memiliki sebuah symbol lagi dengan instance name pink_bar. Untuk membuat

pink_bar singkron dengan lagu yang kita mainkan maka kita menset width ( lebar ) dari pink_bar agar

sesuai dengan prosentase. Lalu kenapa dikalikan 5? Yup, maksimal prosentasi adalah 100, padahal lebar

slider kita 500 px, jadi pada kejadian ini kita mengalikannya dengan 5 supaya ada kesesuain.

Kemudian kita juga menset knop.x , yaitu kita mensetting jarak x pada knop, knop adalay sebuah symbol

yang terletak di dalam song_slider .

Oke, masih banyak kode kode yang sebetulnya harus kita bahas, tapi saya yakin, kode yang saya tulis

sangat simple, sangat mudah untuk dipahami. Jadi tidak perlu saya jelaskan lebih jauh, nah sekarang

tinggal test movie, klick menu movie -> test.

Demikian tutorial dari saya, semoga bermanfaat dan kita berjumpa kembali pada tutorial saya

selanjutnya. _^

Okie Eko Wardoyo

Facebook.com/okiewardoyo

[email protected]

flash no.8 membuat slider atau scrubber untuk file mp3

Documents