Académique Documents
Professionnel Documents
Culture Documents
Software
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:
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
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:
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:
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 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.
Kemudian setelah itu klikah layer slider area kemudian pada symbol slider_area ubahlah opacitynya
menjadi 0, supaya tidak terlihat.
Lihat pada gambar:
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 anda
dapat 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:
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:
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:
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;
}
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;
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;