Flash no.7 : Membuat volume control untuk mp3

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

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

start

-Langkah 2 : perhatikan slider kita. Mari kita perhatikan seksama slider kita,baek sebelum diklik / didrag, saat didrag maupun saat mouse over.
Lihat gambar:
control

control

control

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

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

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

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

alpha

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

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

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 :

blue bar

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

knop

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

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

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

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

klik kanan

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

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:
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:
play and stop

play stop

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

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.
sudah jadi

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

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

Judul : Membuat volume control untuk mp3
Software : Adobe Flash ( di sini saya menggunakan Adobe Flash CS5 )
Deskripsi : Dalam tutorial kali ini kita akan membahas cara membuat volume control untuk file mp3 kita.
Tanggal dibuat : 28 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 ) “

1 Response to “Flash no.7 : Membuat volume control untuk mp3”


  1. 1 Juzt Thiez October 10, 2011 at 6:58 am

    Slider area-nya tidak dijelaskan, saya kurang memahami.😦


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: