Download News and Etc

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:

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 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.
-Langkah 6 : buat layer baru sebagai background kita nantinya.
Lihat pada gambar:

Penjelasan gambar di atas :
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:
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:

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 name ‘pink_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:

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:

Penjelasan gambar di atas:
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.
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:

Penjelasan gambar di atas :
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:

Penjelasan gambar di atas:
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:

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:
//frame 1
var song:URLRequest = new URLRequest(“SWIBA-SWIBA GAYENG.mp3″);
//end of frame 1
*PADA LAYER ACTION, frame 2 masukan action script seperti berikut :
//frame 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;
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;
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 frame 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 computer kita 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 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. ^_^

Pembaca yang budiman, pernahkah anda melihat sebuah flash mp3 player yang diattach ke dalam sebuah website? Nah, disana pasti terlihat bahwa mp3 player tersebut ada volume controlnya, yaitu sebuah slider yang dapat digunakan untuk menambah atau mengurangi volume dari file audio yang dimainkan.
Lihat gambar:

“volume control pada gambar diatas dapat diatur dengan mendrag control slider kekiri maupun kekanan”
BAGAIMANA CARA MEMBUATNYA?

-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 : perhatikan slider kita. Mari kita perhatikan seksama slider kita,baek sebelum diklik / didrag, saat didrag maupun saat mouse over.
Lihat gambar:



-Langkah 3 : Mari step by step kita buat volume controlnya. Buka new action script 3 file. Kemudian buatlah sebuah kotak ( width: 200px, height: 20px ) dengan menggunakan rectangle tool.
Lihat gambar:

“untuk mengubah atau mensetting width dan height anda dapat menggunakan window properties seperti pada gambar diatas.
-Langkah 4 : Kotak yang sudah kita buat tadi jadikan symbol. Klik kanan kotak yang sudah kita buat -> convert  to symbol -> pilih movie clip.
Lihat gambar:

-Langkah 5 : double click symbol yang baru saja kita buat, sehingga kita masuk kedalam symbol tersebut.
lihat gambar :

“dengan mendouble klik symbol yang baru saja kita buat maka kita akan masuk kedalam symbol tersebut dan dapat mengedit symbol tersebut”
-Langkah 6 : Klik kanan kotak biru-> convert to symbol -> pilih movie clip, ubah titik registrasinya ke top-left. Kemudian berikan instancename “volume_control_area”.  Dan di layer1 , tempat dimana symbol baru ini dibuat rename manjadi “volume control area” atau apalah sesuai selera anda.
Kemudian ubah transparency nya menjadi alpha 0%.
Lihat pada gambar:


“ubah ke alpha 0% supaya symbol kita ( volume_control_area ) tidak terlihat.”
-Langkah 7 : buat layer baru -> rename menjadi ‘pink bar’ -> kemudian buat sebuah pink bar.
hum, agar sedikit kelihatan maka volume_control_area sementara saya ubah dulu opacitinya menjadi 10%.
Nah di layer ‘pink bar’ ini kita akan membuat bar berwarna pink yang panjangnya sama dengan volume_control_area tetapi heightnya beda.
Hum, mungkin anda malah bingung, oke kalo begitu mari kita lihat dulu hasil akhir dari tutorial ini:
Gambar hasil akhir:

Sudah jelas kan? Oke, mari kita lanjut tutorial kita step demi step,
Lihat gambar:

kemudian pink bar kita jadikan symbol, caranya klik kanan pink bar -> convert to symbol -> pastikan titik registrasi ti top-left -> berikan instancename “pink_bar”
Oke, sekarang kita sudah punya 2 symbol, ‘volume_control_area’ dan ‘pink_bar’
-Langkah 8 : buat layer baru rename menjadi ‘blue bar’ -> kemudian gambarlah sebuah bar biru pada layer tersebut
Di sini saya membuat blue bar dengan tinggi sama dengan pink bar kita tadi, lebarnya saya buat 2px,
Sehingga telihat pada gambar dibawah ini. Karena cara membuatnya sama dengan pink bar, maka saya tidak perlu memberi screenshot untuk proses pembuatan blue bar ini.
Lihat gambar :

-Langkah 9 : buat layer baru -> rename menjadi ‘knop’ ->Buatlah sebuah knop dengan rectangle tool , knop adalah sebuah tombol untuk kita drag. Di sini saya membuat sebuah’ segi empat sedemikan rupa sehingga’.
Lihat gambar:

“di sini saya mengkonvert ke symbol dan memilih button sebagai symbol type nya. Sebetulnya bila anda memilih type sebagai movieclip juga tidak masalah, saya memilih sebagai button karena bila mouse kita arahkan ke knop tersebut maka mouse kita akan berubah menjadi hand. Kalo pakai movie clip maka mouse tetap seperti panah biasa. “ ^_^
***RALAT : hum, ternyata ada yang keliru dengan penjelasan barusan. Anda dapat mengkonvertnya sebagai symbol, kemudian menyisipkan button di dalam symbol tersebut. Nah, ini yang betul, dalam script kita ini , kita akan menggunakan startDrag method, jadi kalo kita menggunakan button sebagai type symbol bisa dipastikan script tidak akan jalan sebagaimana mestinya. ^_^ susah untuk dimengerti? Mungkin saya yang kurang bisa menjelaskan, maklum kan bukan seorang guru
-Langkah 10 : buat layer baru -> rename ‘speaker’ -> gambarlah sebuah speaker sederhana. Bila anda memilik sebuah icon speaker anda dapat mengimport dan menyisipkannya ke layer ini. Anda dapat menggunakan Adobe Illustrator atau Coreldraw untuk menggambar speaker  yang bagus, karena flash membatasi fasilitas drawingnya.
*Kenapa dibatasi yach? Mungkin mereka ingin kita menggunakan Adobe Illustrator juga kali ya? Mungkin saja, kan ini juga bisnis software …. ^_^
Oke, tampilan kita sekarang jadi seperti ini:

Kembali ke layer ‘volume_control_area’ dan ubah opacity dari ‘volume_control_area’ ke 0%.
Lihat gambar:

Oke, sekarang structure kita sudah jadi, nah kita tinggal menambahkan action script
-Langkah 11 : buat layer baru -> rename menjadi ‘actions’ . Nah , di layer inilah kita akan menyisipkan action script 3, sehingga nantinya saat knop digeser maka blue bar juga ikut menyesuaikan seperti terlihat pada gambar:

Klik kanan layer ‘actions’ -> pilih actions -> lihat pada gambar:

Pada window actions, ketikkan kode dibawah ini:
import flash.geom.Rectangle;
import flash.events.MouseEvent;
import flash.events.Event;
blue_bar.width = knop.x;
var knopWidth:Number = knop.width;
var volume_control_areaWidth:Number = volume_control_area.width;
var volume_control_areaX:Number = volume_control_area.x;
//nah ini merupakan slider area yang tersisa setelah dikurangi lebar knop
var slider_areaWidth = volume_control_areaWidth – knopWidth;
//mari kita buat area untuk slider_area yang tersisa
var slider_areaRect:Rectangle = new Rectangle(volume_control_areaX,0,slider_areaWidth,0);
knop.addEventListener(MouseEvent.MOUSE_DOWN, drag);
stage.addEventListener(MouseEvent.MOUSE_UP, stopHere);
blue_bar.addEventListener(Event.ENTER_FRAME, grow);
function drag(event:MouseEvent):void{
knop.startDrag(false, slider_areaRect);
}
function stopHere(event:MouseEvent):void{
knop.stopDrag();
}
function grow(event:Event):void{
blue_bar.width = knop.x;
}
Lihat pada gambar:

Penjelasan:
Untuk kode:
=============================
import flash.geom.Rectangle;
import flash.events.MouseEvent;
import flash.events.Event;
“sebetulnya tidak perlu anda ketikkan secara langsung, karena otomatis akan ditambahkan ( saya menggunakan Adobe Flash CS5 , versi adobe terbaru , saya belum mencoba untuk CS4, CS3 )”
Yup, mari kita lanjut,
=============================
blue_bar.width = knop.x; -> “ saya ingin width dari blue_bar  memiliki nilai yang sama dengan jarak x knop dari titik registrasi. Nah, anda masih ingat dong symbol blue_bar dan symbol knop yang baru saja kita buat.”
==============================
var knopWidth:Number = knop.width;
var volume_control_areaWidth:Number = volume_control_area.width;
var volume_control_areaX:Number = volume_control_area.x;
“ di sini kita mendefinisikan variable knopWidth, volume_control_areaWidth, volume_control_areaX sebagai Number.”
Yaitu:
*nilai untuk knopWidth adalah knop.width -> lebar knop.
*Nilai untuk volume_control_areaWidth adalah volume_control_area.width -> lebar volume_control_area.
* nilai untuk volume_control_areaX adalah volume_control_area.x -> jarak x –nya symbol volume_control_area.
==============================
var slider_areaWidth = volume_control_areaWidth – knopWidth;
var slider_areaRect:Rectangle = new Rectangle(volume_control_areaX,0,slider_areaWidth,0);
nah, disini kita mendefinisikan var slider_areaWidth, yaitu area dimana slider knop bisa digerakkan kekanan dan kekiri. Slider_areaWidth di sini saya isi dengan volume_control_areaWidth – knopWidth. Kemudian kita membuat sebuah invisible rectangle, dengan posisi x sama dengan volume_control_areaX dan lebar sama dengan slider_areaWidth. Nah, ini lah trik untuk membuat slider kita bisa digeser ke kanan dan ke kiri.
==============================
knop.addEventListener(MouseEvent.MOUSE_DOWN, drag);
stage.addEventListener(MouseEvent.MOUSE_UP, stopHere);
blue_bar.addEventListener(Event.ENTER_FRAME, grow);
Oke, pada kode diatas ini, kita punya 3 object yaitu knop, stage, dan blue_bar. Knop dan blue_bar adalah object yang kita buat, sementara stage adalah lembar kerja dari flash itu sendiri.
Nah, pada object knop, kita memberikan sebuah listener ketika MOUSE_DOWN (mouse diklik) , yaitu kita memberikan sebuah fungsi ‘drag’. Fungsi drag ini akan kita buat pada kode selanjutnya.
Kemudian pada object stage, kita memberikan listener saat MOUSE_UP ( mouse dilepaskan setelah klik atau drag ). Disini kita memberikan listener fungsi stophere yang akan kita buat pada kode selanjutnya.
Begitu pula dengan object blue_bar , kita memberikan sebuah listener ENTER_FRAME (saat movie jalan ), dan kita memberikan sebuah fungsi grow yang tentunya juga akan kita buat pada kode selanjutnya.
================================
Nah untuk fungsi fungsi drag, stopdrag, grow sudah saya tulis, anda tinggal melihat dan memahami, saya yakin sangat mudah untuk memahami sebuah kode diatas. Cuman sangat sulit sekali untuk menjelaskannya.
Lihat gambar hasil akhir:

-Langkah 12 : Sekarang mari kita buat slider kita bekerja dengan mp3. Kode kode diatas hanya membuat slider kita dapat didrag kekanan dan kekiri, nah dalam langkah ke 12 ini kita akan mengkombinasikan tutorial  “Flash no.4 membuat tombol play dan stop untuk memutar file mp3” yang dapat anda temukan dalam situs ini. Kenapa saya menggunakan tutorial sebelumnya? Simple, karena saya malas untuk menulis dan menjelaskan lagi.  Lagipula tutorial ini juga sudah cukup panjang. ^_^
Pertama tama mari kita mengingat ngingat tutorial kita sebelumnya dulu
Lihat gambar:


Oke, mari kita copy paste symbol slider tadi, ke play and stop yang sudah kita buat sebelumnya,
Nah, berikan instance name untuk slider kita dengan nama “volume_control”.
Buka actions window, ubah code nya hingga seperti berikut ini, background merah memperlihatkan perubahan pada code.
Lihat gambar:

Berikut merupakan kode lengkapnya:
import flash.media.Sound;
import flash.media.SoundChannel;
import flash.events.MouseEvent;
import flash.media.SoundTransform;
var okie_sound:Sound = new Sound(new URLRequest(“TIPEX – SAAT SAAT MENYEBALKAN.mp3″));
var okie_channel:SoundChannel;
okie_channel = okie_sound.play()
var sedangDimainkan:Boolean = false;
//button play kita
okie_play.addEventListener(MouseEvent.CLICK, play_musik);
okie_stop.addEventListener(MouseEvent.CLICK, stop_musik);
addEventListener(Event.ENTER_FRAME, onEnterFrame_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{
if(sedangDimainkan == true){
okie_channel.stop();
}
}
function onEnterFrame_musik(event:Event):void{
////// volume slider /////////////
var volumeLevel = okie_channel.soundTransform;
var newLevel:Number =(volume_control.knop_ku.x)/-200;
volumeLevel.volume = newLevel;
okie_channel.soundTransform = volumeLevel;
volume_control.blue_bar.width = volume_control.knop_ku.x;
}
Saya rasa yang perlu saya jelaskan adalah yang berbackground kuning saja (lihat gambar di atas ) , nah berikut adalah penjelasannya:
Line 8 : okie_channel = okie_sound.play()
Di sini saya membuat supaya sound dimainkan terlebih dahulu.
Line 15 : addEventListener(Event.ENTER_FRAME, onEnterFrame_musik);
Saya memberikan sebuah listener ENTER_FRAME yang kemudian akan memanggil fungsi onEnterFrame_musik
Line 30 – 37 :
function onEnterFrame_musik(event:Event):void{
////// volume slider /////////////
var volumeLevel = okie_channel.soundTransform;
var newLevel:Number =(volume_control.knop_ku.x)/-200;
volumeLevel.volume = newLevel;
okie_channel.soundTransform = volumeLevel;
volume_control.blue_bar.width = volume_control.knop_ku.x;
}
Hum, semoga saja anda bisa memahami 7 baris kode barusan. ^_^
Oke, sekarang hasil akhir kita sudah jadi, musik dimainkan, silahkan geser / drag volume control kita.

Sekian tutorial dari saya , semoga bermanfaat. Sampai jumpa lagi dengan tutorial saya berikutnya. ^_^

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:

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.”


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


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:

“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:

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

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:

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

“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:

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

“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:

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:

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