Flash no.10 : Play multiple songs dalam sebuah folder dengan xml

Pembaca budiman, selamat berjumpa kembali dengan saya dalam tutorial lanjutan tentang memutar file – file audio di flash.  Dalam tutorial – tutorial sebelumnya kita sudah membahas banyak mengenai cara membuat button, membuat button untuk play, pause, stop, membuat slider, membuat volume control, memutar mp3 dan lain – lain. Nah, dalam kesempatan kali ini kita akan membuat sebuah player yang dapat memutar kumpulan file audio dalam sebuah folder.
*pada tutorial ini saya juga menyertakan “source code beserta file – file audionya”.
Preview player kita:
preview

Cara kerja dari player kita kali ini adalah:
–    Lagu lagu yang berada dalam sebuah folder kita load , kemudian kita tampilkan dalam sebuah player dalam bentuk list.
–    Lagu pertama diputar kemudian setelah lagu pertama selesai maka secara otomatis memutar lagu kedua, kemudian ketiga dan seterusnya.
–    Bila sudah selesai hingga lagu terakhir, maka akan kembali ke lagu pertama
–    Pada player kita ini, untuk memutar lagu yang kita suka bisa menggunakan alternative lain yaitu dengan mengclick judul lagu dalam list.
–    Player kita kali ini cukup simple, hanya terdapat tombol stop, anda dapat memodifikasi sesuai dengan tutorial – tutorial yang sudah kita pelajari sebelumnya, misalnya dengan menambahkan slider, volume control dan lain sebagainya.
Berikut merupakan screenshot nya:
Lihat gambar:
screenshot

Penjelasan gambar diatas:
Di atas merupakan struktur player kita. Terdiri dari sebuah folder “mp3_files” yang berisi lagu lagu yang akan kita mainkan , kemudian kita juga memiliki file xml “mp3_playlist.xml” yang berisi text judul lagu yang ada dalam folder “mp3_files”. Juga ada file “Player.fla” yaitu file flash kita.
Lihat gambar berikutnya:
screenshot

Penjelasan gambar diatas:
Gambar diatas merupakan file “Player.fla” kita, dalam player yang akan kita buat, disana kita membuat 3 layer,
–    Layer pertama kita rename menjadi “background” , pada layer ini kita taruh background seperti gambar diatas, yaitu gradient orange – pink.
–    Layer kedua kita rename menjadi “playlist” , pada layer ini kita taruh sebuah komponen “list” yang nantinya akan kita modifikasi dengan action script diisi dengan judul judul lagu yang ada di folder “mp3_files” kita.
–    Layer ketiga kita rename menjadi “actions” , nah disinilah kita akan menuliskan kode kode action script untuk memutar file file mp3 kita.
Lihat gambar preview :

preview

BAGAIMANA CARA MEMBUATNYA???
Mari kita simak step demi step.
-Langkah 1: Buka Adobe Flash anda, di sini saya menggunakan Adobe Flash CS5, bila anda menggunakan versi sebelumnya cara nya adalah sama saja.
lihat gambar:

cs5

-Langkah 2 : buat new action script 3 file. Kemudian rename layer 1 menjadi “background” dengan cara mendouble click .
Lihat gambar:

background

-Langkah 3: dengan menggunakan rectangle tool, buatlah sebuah kotak yang panjang dan lebarnya sama dengan stage. Nah, kotak inilah yang nantinya kita gunakan sebagai background. Pada sample diatas background kita isi dengan gradient orange-pink.
Lihat gambar:
gradient

Untuk menambahkan gradient pada rectangle, kita cukup membuka window color, nah kita dapat memilih ‘radial gradient’ pada option yang terdapat pada window tersebut. Untuk mengubah warnanya ya tinggal kita click atau double click ‘segiempat+segitiga kecil’ yang ada dibawah gradient.
*Oke, sekarang background kita sudah selesai.
-Langkah 4 : buat layer baru kemudian rename menjadi playlist. Di sinilah kita akan menempatkan playlist kita nantinya.
Lihat gambar:
playlist

-Langkah 5 : buatlah sebuah component list. Pastikan kita berapa pada layer playlist -> Buka window component ->user interface->drag component ‘list’ ke stage.
Lihat pada gambar:

component

Drag lah component list dari window component ke stage. Kemudian atur properties untuk ‘width’ dan ‘height’ nya. Untuk mengatur propertiesnya anda dapat melihat ke window properties seperti pada gambar di bawah ini.
Lihat gambar:
width

Pada gambar diatas kita mengatur width dan height supaya terlihat lebih bagus. Kemudian kita berikan sebuah instance name, dalam hal ini kita memberikan sebuah instance name ‘playlist’. Dengan menambahkan sebuah instance name, kita dapat memodifikasi list tersebut melalui action script.
Lihat gambar:
instance name

Kemudian, buatlah sebuah text di atas playlist kita tadi. Text inilah yang nantinya sebagai status ‘lagu apa yang sedang dimainkan”.
Pastikan anda berada di layer playlist -> dengan menggunakan textool, drag lah kotak text tepat diatas playlist kita. Setelah kita buat, berikan instance name ‘status_txt’.
Lihat gambar:
status text

Di sini anda dapat mensetting alignment untuk status_txt anda, juga bisa mensetting apakah text nya selectable atau unselectable, dan lain sebagainya. Silahkan anda dapat mencobanya sendiri.
Sekarang mari kita tambahkan stop button. Fungsinya sebagai tombol stop saja. Di sini kita hanya memberikan sebuah tombol stop, bila anda ingin berkreasi lebih anda dapat menambahkan tombol stop, play, pause, mungkin juga dapat menambahkan volume controller, song slider, dan lain lain yang kesemuanya telah kita bahas pada tutorial tutorial sebelumnya.
Klik window -> common libraries -> button.
Pilih button yang ada suka, di sini saya memilih playback flat -> flat blue stop, setelah anda pilih , anda tinggal mendragnya ke stage.
lihat gambar:
flat button

Kemudian berikan instance name ‘stop_btn’, untuk memberikan instance name caranya sama dengan yang diatas, tinggal mengclick instance name pada window properties.
*Oke, sekarang playlist kita sudah jadi.
-Langkah 6 : buatlah sebuah layer baru kemudian rename menjadi ‘actions’. Nah, di layer inilah kita nantinya akan memasukkan action script kita.
Oke, kita lupakan sejenak layer ‘actions’ kita, mari terlebih dahulu kita lanjut kan ke step berikutnya.
-Langkah 7 : TERLEBIH DAHULU SIMPANLAH file project kita. Kemudian buat sebuah folder tempat kita meletakkan file- file audio kita. Di sini kita membuat sebuah folder ‘mp3_files’ yang lokasinya sama dengan project kita. Kemudian masukkan semua file- file audio anda ke folder ‘mp3_files’ yang baru saja kita buat tadi.
-Langkah 8 : mari kita buat xml file. Kita disini memberikan sebuah filename ke xml kita ‘mp3_playlist.xml’.  Di xml file inilah kita menuliskan ‘filename – filename’ lagu yang ada di folder ‘mp3_files’. Bila anda familiar dengan php, makan anda dapat secara otomatis men-generate fle xml sesuai dengan folder ‘mp3_files’ kita.
Berikut adalah screenshot file xml kita,
Lihat gambar:
xml file

Pada gambar diatas anda dapat melihat struktur sederhana file xml kita, pada file xml kita menuliskan semua filename dari audio – audio kita yang terdapat pada folder ‘mp3_files’.
*nah, untuk file xml sudah kita buat. Mari kita ke step berikutnya.
-Langkah 9 : mari kita kembali ke layer ‘actions’.
** klik kanan frame pertama dari layer actions -> actions -> masukkan code action script di bawah ini pada window action.
action

Berikut adalah kode untuk frame 1 layer actions:
stop();

var myFormat:TextFormat= new TextFormat();
myFormat.color = “0x000000”;

playlist.setRendererStyle(“textFormat”, myFormat);

/////////////////////////////////////////////

//initialize variables
var trackToPlay:String;
var pausePosition:int= 0;
var songUrl:URLRequest;
var i:uint;

//initialize XML
var myXML:XML = new XML();
var XML_URL:String = “mp3_playlist.xml”;
var myXMLURL:URLRequest = new URLRequest(XML_URL);
var myLoader:URLLoader = new URLLoader(myXMLURL);
myLoader.addEventListener(“complete”, xmlLoaded);

//create myLoaded function , what happened if loading xml is complete
function xmlLoaded(event:Event):void{
myXML = XML(myLoader.data);
var firstTitle:String = myXML..Song.songTitle[0];
songUrl = new URLRequest(“mp3_files/”+firstTitle+”.mp3″);
status_txt.text = “Now playing “+firstTitle;
for each(var Song:XML in myXML..Song){
i++;
var songTitle:String = Song.songTitle.toString();
playlist.addItem({label:i+”. “+songTitle, songString:songTitle, songNum:i});
}
var myArray = new Array(0,0);
playlist.selectedIndices = myArray;//this hightlight song 1 by default
gotoAndStop(3);
}

DI BAWAH INI ADALAH PENJELASAN DARI KODE DI ATAS:
stop();

var myFormat:TextFormat= new TextFormat();
myFormat.color = “0x000000”;

playlist.setRendererStyle(“textFormat”, myFormat);
di sini kita menambahkan stop() pada frame 1, karena nantinya kita tidak hanya menggunakan frame 1 tetapi juga menggunakan frame 2 dan frame 3, penambahan stop() pada frame 1 berguna agar flash player hanya memainkan frame 1,  tidak memainkan frame 2 dan frame 3. Nah, untuk frame 2 dan frame 3 nanti kita dapat menggunakan action script untuk memerintahkan flash player memainkan frame frame tersebut.
Kemudian kita membuat sebuah variable ‘myFormat’ dengan type ‘TextFormat’. Kita juga memberikan setting untuk colornya adalah ‘000000’ atau hitam. Kemudian kita apply kan ke ‘playlist’. Playlist di sini adalah instance name object list kita di atas tadi.
Mari kita lihat code selanjutnya,
//initialize variables
var trackToPlay:String;
var pausePosition:int= 0;
var songUrl:URLRequest;
var i:uint;
penjelasan kode di atas:
nah, kemudian kita membuat sebuah variable variable baru yaitu variable ‘trackToPlay’ bertype ‘String’, kemudian variable ‘pausePosition’ bertype ‘integer/int’, variable ‘songUrl’ bertype ‘URLRequest’ dan variable ‘i’ bertype ‘uninteger/uint’.
Kode berikutnya:
//initialize XML
var myXML:XML = new XML();
var XML_URL:String = “mp3_playlist.xml”;
var myXMLURL:URLRequest = new URLRequest(XML_URL);
var myLoader:URLLoader = new URLLoader(myXMLURL);
myLoader.addEventListener(“complete”, xmlLoaded);

penjelasan kode di atas:
di sini kita masih membuat variable – variable untuk XML kita, yaitu variable ‘myXML’ bertype ‘XML’, variable ‘XML_URL’ bertype ‘String’ dengan value sebuah file xml kita tadi ‘mp3_playlist.xml’, kita juga membuat variable ‘myXMLURL’ dengan type ‘URLRequest’, variable ‘myLoader’ dengan type ‘URLLoader’.
Nah, variable myLoader ini kemudian me-load  variable myXMLURL kita tadi yang sama artinya dengan me-load file xml kita ‘mp3_playlist.xml’ yang berisi kode kode xml judul lagu kita.
Bisa proses me-load tadi selesai (complete), maka kita memanggil  fungsi’ xmlLoaded’ yang kode nya sudah kita tuliskan di atas.
Mari kita test movie untuk melihat preview setelah file ‘mp3_playlist.xml’ diload.
Lihat gambar:
load xml

Nah, sekarang kalo kita preview hasilnya seperti pada gambar diatas.
*Oke, untuk frame 1 sudah selesai, mari kita ke step berikutnya.
-Langkah 10 : pada frame 2 layer actions berikan kode action script di bawah ini. Nah, tadi kita sudah memberikan kode – kode action script pada frame 1, sekarang pada frame 2 layer actions,
Klik kanan frame 2 -> insert keyframe , kemudian setelah selesai  klik kanan frame 2 -> actions -> masukkan kode di bawah ini pada window action:
songUrl = new URLRequest(“mp3_files/”+trackToPlay+”.mp3″);
status_txt.text=”Now playing: “+trackToPlay+”.mp3″;

sebetulnya frame 2 di sini tidak berhubungan langsung dengan frame 1, tetapi lebih cenderung ke frame 3 nantinya. Nah disana terlihat ‘songUrl’ yaitu lagu yang akan kita mainkan , berisi variable ‘trackToPlay’, variable ini nanti dimodifikasi pada frame 3.
‘status_txt’ adalah instance name dari dynamic text kita yang sudah kita buat sebelumnya.
*Nah, frame 2 sudah selesai , mari sekarang kita ke frame 3.
-Langkah 11 : pada frame 3 layer actions, berikan kode action script di bawah ini. Terlebih dahulu mari kita insert key frame.
Klik kanan frame 3 -> insert keyframe
Kemudian klik kanan frame 3 yang sudah kita insert keyframe tadi -> actions -> maka akan muncul window action
Masukkan action script di bawah ini:

stop();
var snd:Sound = new Sound();
var channel:SoundChannel;
var context:SoundLoaderContext = new SoundLoaderContext(5000, true);
snd.load(songUrl, context);
channel = snd.play(pausePosition);//start playing

playlist.addEventListener(Event.CHANGE, itemClick);
function itemClick(event:Event):void{
channel.stop();
//status_txt.text=”Now playing: “+event.target.selectedItem.label+”.mp3″;
trackToPlay = event.target.selectedItem.songString;
gotoAndPlay(2);
}
//////////////////////////////////////////////////////
//stop button listener
stop_btn.addEventListener(MouseEvent.CLICK, stopPlayer);
function stopPlayer(event:MouseEvent):void{
channel.stop();
}

//event listener for sound completes whene any song finishes
channel.addEventListener(Event.SOUND_COMPLETE,onCompletePlayback);
function onCompletePlayback(event:Event):void{
newTrack();
}
//new track play function
function newTrack():void{
if(playlist.selectedItem.songNum == i){
channel.stop();
var selectFirst = new Array(0,0);
playlist.selectedIndices = selectFirst;
playlist.scrollToIndex(0);
trackToPlay = playlist.selectedItem.songString;
gotoAndPlay(2);
}
else{
channel.stop();
var sn:uint = playlist.selectedItem.songNum;
var selectNext = new Array(sn,sn);
playlist.selectedIndices = selectNext;
playlist.scrollToIndex(sn);
trackToPlay = playlist.selectedItem.songString;
gotoAndPlay(2);
}
}

*Hah, saya rasa tutorial ini sudah cukup sangat panjang apa bisa saya harus menjelaskan kode – kode di atas perbaris. Saya menulis tutorial ini dengan ms word sekarang sudah mencapai page ke 13. Saya yakin bila anda membaca kode nya perbaris, maka sangat mudah untuk memahaminya sendiri. Lagi pula kode kode nya juga sangat singkat.
*oke, frame 3 sudah selesai , mari kita ke step berikutnya.
-Langkah 12 : klik kanan frame 3 pada layer background -> insert frame. Lihat gambar:
frame 3

Lakukan hal yang sama kepada layer background. Klik kanan frame 3 -> insert frame.
*Oke, sekarang semua sudah jadi, anda tinggal test movie.  Klik control -> test movie.

preview

Sekarang anda dapat mendengarkan lagu lagu anda. Anda juga dapat menginsert player kita ini ke website anda sendiri. Gimana??
Akhirnya cukup sekian tutorial dari saya, semoga bermanfaat, dan selamat berjumpa kembali dengan tutorial saya selanjutnya.

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

Judul : Play multiple songs dalam sebuah folder dengan xml
Software : Adobe Flash ( di sini saya menggunakan Adobe Flash CS5 )
Deskripsi : Dalam tutorial kali ini kita akan membahas cara menplay kumpulan lagu lagu dalam sebuah folder dibantu dengan menggunakan xml file.
Tanggal dibuat :  19 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 ) “
Download PDF : http://www.4shared.com/document/4Cu6lZpR/FLASH_no10_Play_multiple_song_.html
Download code : http://www.4shared.com/file/IubdG-rG/CODE-_Flash_no10_Play_multiple.html

0 Responses to “Flash no.10 : Play multiple songs dalam sebuah folder dengan xml”



  1. Leave a Comment

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: