Buat Aplikasi MP3 Player Sederhana dengan Flash+AS2


Memanfaatkan kemampuan Flash yang dapat memainkan file MP3 dengan cara membuat Sound object (di AS2, favoritku ;p), saya pernah iseng2 membuat versi cupu dari aplikasi MP3 player.. BTW, tau Winamp kan? nah aplikasi semacam ini yang saya istilahkan sebagai MP3 player (versi kerennya sih 😀 ), yah.. meskipun yang pernah saya buat tersebut hasilnya masih berupa fitur-fitur dasar sederhana: load file-file MP3, next track, previous track, tampilan informasi MP3nya, dan tampilan playlist (supaya user bisa memilih file MP3 yang ingin dimainkan dengan mengkliknya di playlist).

Cara buatnya, Flash dibuat memanjang ke bawah (biar rada mirip Winamp), simpan 3 buah movieclip yang sama (dimana di dalamnya terdapat sebuah dynamic text dengan instance name “teks“) namun diberikan instance name berbeda yaitu “browse_btn“, “kanan_btn“, dan “kiri_btn” (ketiganya akan berperan sebagai tombol untuk load files, play next track, dan play previous track). Sebuah dynamic text dengan instance name “tulisan_txt” (yang akan menampilkan nama artist, judul, dan ukuran waktu MP3 berjalan dimana informasi ini diambil dari ID3 tags MP3nya). Di bawahnya lagi sebagai tampilan playlist digunakan sebuah List Component dengan instance name “cmp_playlist“. Menyusul kemudian, baris ActionScriptnya disimpan di frame:

import flash.net.FileReferenceList;

var playlist:Array = new Array(0);
var musik:Sound = new Sound();
var angka:Number = new Number(0);
var fileRefList:FileReferenceList = new FileReferenceList();
var listenerFileRefList:Object = new Object();
var listHandler:Object = new Object();

fscommand("showmenu", false);
kanan_btn.onPress = kanan;
kiri_btn.onPress = kiri;
browse_btn.onPress = browseFile;
browse_btn.teks.text = "load";
kiri_btn.teks.text = "prev";
kanan_btn.teks.text = "next";
fileRefList.addListener(listenerFileRefList);
cmp_playlist.addEventListener("change", listHandler);
cmp_playlist.setStyle("fontFamily", "corbel");
cmp_playlist.setStyle("fontSize", "12");
tulisan_txt.text = "load file MP3 terlebih dulu..\n (maaf, di versi cupu ini, file MP3nya mesti sefolder sama aplikasinya)";

listHandler.change = function(evt:Object){
    if(angka != evt.target.selectedItem.data){
		angka = evt.target.selectedItem.data;
		loadMusik();
	}
}

musik.onSoundComplete = function(){
	kanan();
}

musik.onLoad = function(success:Boolean){
	if (success){
		musik.start();
	}
	else{
		tulisan_txt = "salah load file";
	}
}

listenerFileRefList.onSelect = function(file:FileReferenceList){
	for(var i = 0; i < file.fileList.length; i++){
		var filePilihan = file.fileList[i].name;
		if(filePilihan.substr(-3, 3) == "mp3"){
			cmp_playlist.addItem({label:filePilihan, data:playlist.length});
			playlist.push(filePilihan);
		}
	}
	loadMusik();
}

function browseFile(){
	fileRefList.browse([{description:"Ingat: file MP3 sefolder saja! (maklum versi cupu)", extension:"*.mp3"}]);
}

function loadMusik(){
	musik.loadSound(playlist[angka], true);
}

function kanan(){
	if(playlist.length < 1){
		tulisan_txt.text = "load filenya dulu woi..\n(tombolnya di bawah playlist)";
	}
	else{
		angka += 1;
		if(angka >= playlist.length){
			angka = 0;
		}
		loadMusik();
	}
}

function kiri(){
	if(playlist.length < 1){
		tulisan_txt.text = "load filenya dulu woi..\n(tombolnya di bawah playlist)";
	}
	else{
		angka -= 1;
		if(angka <= 0)	{
			angka = playlist.length - 1;
		}
		loadMusik();
	}
}

this.onEnterFrame=function(){
	var posisi:String = musik.position.toString();
	var durasi:String = musik.duration.toString();
	var artist:String = musik.id3.artist.toString();
	var judul:String = musik.id3.songname.toString();
	var menitPlaying:String = Math.floor(posisi/60000) + ":" + Math.round((posisi/1000)%60);
	var menitTotal:String = Math.floor(durasi/60000) + ":" + Math.round((durasi/1000)%60);

	if(playlist.length >= 1){
		tulisan_txt.text = artist + " - " + judul + "\n" + menitPlaying + " / " + menitTotal;
	}
}

Preview

Mohon maaf kalau kodenya terlihat tidak efisien, nampak buggy, dan sulit dibaca algoritmanya acak-acakan 😀 yang penting fungsional dulu lah ya.. 8) Tekan Ctrl+Enter untuk melihat preview movie.

Namun ada keterbatasan yang cukup mengganggu dari aplikasi yang saya buat ini, yaitu:

Cuman bisa menjalankan file MP3 yang sefolder dengan SWF-nya, klo gak: undefined -__-‘

Zzzzz.. Mungkin saya salah cara ngakses file dari objek FileReferenceList? atau sistem sandbox objek Sound yang tidak memperbolehkan loadSound diluar direktori?.. Anybody knows how can I play MP3 files that’s stored anywhere, so it could be like a real MP3 player? please share… Any improvement welcome..

Bagi yang berminat untuk melihat contoh aplikasinya (.exe) sila unduh di http://www.box.net/shared/30010rjlmf

***

Referensi terkait:

  • http://flash-reference.icod.de/flash/net/FileReferenceList.html
  • http://flash-reference.icod.de/Sound.html
  • Tips Trik Flash, Tabloid PC-Mild Edisi 6/2010
  • 12-Pas-12-Pas-an


    Ngomong-ngomong soal game, kita yang kebanyakan berperan sebagai konsumen ini sekali-sekali mungkin perlu berpikir untuk menjadi produsen. Melihat game saat ini sudah menjadi industri yang cukup menjanjikan dengan potensi milyaran dolar [1]. Tertarik membuat game sendiri? mulai dari yang sederhana dulu, yuk mari.. 8)

    Pada kesempatan ini game yang akan dibuat adalah latihan eksekusi penalti dari titik putih atau terkadang diistilahkan tendangan “12 pas” yang juga menjadi judul dari game ini. Sebelumnya unduh terlebih dulu gamenya di http://www.box.net/shared/qqdiij7gn1 untuk mencicipi (cukup 1.4 MB saja). Gamenya cupu abizz memang  dibandingkan buatannya game developer, tapi untuk mencapai langkah ke-1000 selalu diawali dengan langkah pertama, kan? 😉

    Sekarang masuk ke pertanyaan, bagaimana cara membuat permainannya? Lanjutkan membaca “12-Pas-12-Pas-an”

    Load External JPGs dengan Method loadMovie()


    Menampilkan file gambar di Flash dapat dilakukan dengan beberapa cara, salah satu diantaranya dengan me-load file-file berupa JPG dari luar SWF menggunakan method loadMovie(a,b) [dengan: a = URL source, b = destination Movieclip]. Cara ini memiliki kelebihan manakala file gambar banyak dan ukuran filenya besar, karena file gambar akan diload sesuai jumlah permintaan sehingga tidak terlalu membebani resources komputer dibandingkan dengan mengimport semua file gambar dalam satu file flash.

    Format file gambar yang dapat diload secara dinamis pada flash diantaranya JPG, PNG, dan GIF.  Ketiga format tersebut memiliki kelebihannya masing-masing, mana yang akan kita gunakan disesuaikan dengan kebutuhan.

    Sebagai contoh disini saya membuatkan tutorial untuk membuat sebuah galeri sederhana dengan langkah-langkah pembuatannya sebagai berikut:

    – Siapkan 4 buah file gambar dengan ukuran 400×250 pixel. Karena pada contoh ini yang digunakan adalah gambar daun dengan format file JPG, maka kita berikan nama “daun1.jpg”, “daun2.jpg”, “daun3.jpg”, “daun4.jpg”.

    4 File JPG yg akan diload

    – Buat sebuah file Flash baru dengan Lanjutkan membaca “Load External JPGs dengan Method loadMovie()”

    Typewriter Effect dengan ActionScript 2.0


    Membuat efek animasi teks yang muncul huruf per huruf (seperti sedang ngetik) sampai menjadi sebuah paragraf dapat kita buat dengan menulis beberapa baris ActionScript. Siapkan terlebih dulu sebuah objek dynamic text dengan settingan multiline, font yg khas, dan nama variable ‘tulisan’. Setelah itu tuliskan script ini di frame utama:

    var i:Number = 1;
    var tulisan:String;
    var tulisanFull:String = "Pemilik blog dengan tagline \"ikatlah ilmu dengan memblogkannya\" ini mengucapkan terima kasih atas kunjungan anda hari ini, selamat datang kembali di lain hari, dan jika berkenan silakan tinggalkan jejak pada halaman Buku Tamu. Wassalam.\n\n\n-F4154LMAN-";
    
    this.createEmptyMovieClip("mesinTik", this.getNextHighestDepth());
    
    mesinTik.onEnterFrame = function(){
    	if (i < tulisanFull.length) {
            tulisan = tulisanFull.substring(0, i);
            i++;
    	}
    	else {
            tulisan = tulisanFull;
            delete mesinTik.onEnterFrame;
    	}
    }
    

    ngetik sendiri

    Kuncinya adalah pada fungsi substring() yang dieksekusi secara berulang sehuruf demi sehuruf hingga sebanyak jumlah huruf pada variable ‘tulisanFull’ (yg bertipe String) dengan kecepatan pengulangan sesuai settingan FPS (karena fungsi dijalankan setiap ‘onEnterFrame’) pada Flash movie yg dibuat.

    Contoh hasil export .SWF dan source .FLA-nya bisa diunduh di Lanjutkan membaca “Typewriter Effect dengan ActionScript 2.0”

    Memanfaatkan Fitur Drawing API Pada Flash


    Membuat aplikasi tiruan MS Paint (tau kan? software preinstalled di Windows yg dipake buat menggambar, biasa diakses lewat Start Menu > Program > Accessories > Paint) tapi menggunakan Flash, emang bisa yah? wow, dulu pun saya sempat tidak tahu fitur Flash selain yang biasa digunakan untuk membuat CD interaktif, dan baru terbuka matanya setelah melihat demo game menggambar buatan kang Fathah.. wah ternyata Flash itu asyik ya? 😀

    Kalau kita eksplorasi lagi Flash+tombolF1 (manual helpnya Flash yg cukup lengkap) pada bagian Class MovieClip disana ada penjelasan bahwa Class MovieClip memiliki beberapa fungsi untuk menggambar (diistilahkan dengan Drawing API) seperti: beginFill(), beginGradientFill(), clear(), curveTo(), endFill(), lineTo(), lineStyle(), moveTo(), yang memungkinkan untuk menghasilkan perpaduan kurva, garis, dan warna pada stage hanya dengan menuliskan beberapa baris script.

    Sebagai latihan ngoprek, kali ini kita akan coba buat aplikasi corat-coret Lanjutkan membaca “Memanfaatkan Fitur Drawing API Pada Flash”

    Ganti Kursor Mouse di Flash dengan yang Unik2


    Mengganti bentuk kursor mouse di dalam Flash bisa kita lakukan dengan trik sederhana.. contoh kali ini, misalkan kita akan membuat kursor mouse berbentuk tangan dimana si telunjuknya akan ikut bergerak manakala mouse diklik.

    Unduh terlebih dahulu file percontohannya di Lanjutkan membaca “Ganti Kursor Mouse di Flash dengan yang Unik2”

    Load External Variables dengan ActionScript


    Untuk mentransfer nilai variable ActionScript dari dan ke file external secara dinamis, sedikitnya minimal ada 4 cara yang dapat kita tempuh.

    Namun sebelumnya, terlebih dahulu perlu kita siapkan sebuah file teks yang akan diload (yg di dalamnya berisi nilai-nilai dari bermacam variable), kemudian simpan file tersebut pada sebuah URL. Yang harus diingat, format teks file tersebut harus ditulis dengan standar MIME yg merupakan format standar yg digunakan oleh skrip CGI. Contohnya frase berikut digunakan untuk mendefinisikan beberapa variable:

    nama=F4154LMAN&alamat=Cimahi&wilayah=Indonesia&telepon=0123456789

    Simpan tulisan ini menjadi sebuah namafile.ekstensi

    Dan inilah beberapa cara tersebut:

    .

    1. Menggunakan Fungsi loadVariables()

    Fungsi ini dapat digunakan untuk membaca data dari file eksternal, misalnya membaca sebuah file teks hasil generate script CGI, ColdFusion, ASP, PHP, atau Perl. Untuk kemudian menset nilai dari variable yg ada pada movieclip target, namun jika target variablenya bukan di movieclip melainkan level, gunakan fungsi loadVariablesNum().

    Format penulisan script: loadVariables(url:String, target:Object, [method:String]) : Void

    .

    2. Menggunakan Fungsi getURL()

    Fungsi getURL dapat digunakan untuk meload sebuah dokumen dari URL tertentu ke sebuah window, atau mentransfer variable ke aplikasi lain pada URL yg dituju.

    Format penulisan script: getURL(url:String, [window:String, [method:String]]) : Void

    .

    3. Menggunakan Object LoadVars

    LoadVars class merupakan alternatif dari fungsi loadVariables() untuk mentransfer variable antara aplikasi flash dengan server. Kita dapat menggunakan LoadVars class untuk mendapatkan verifikasi dari loading data yg sukses dan memonitor progress download.

    LoadVars class memperbolehkan kita untuk mengirim semua atau sebagian variable dalam sebuah object ke URL tertentu dan juga mengambil nilai semua variable dalam sebuah URL. Dan untuk memastikan aplikasi kita sudah berjalan ketika data sedang diload, kita dapat mengeceknya dengan memanfaatkan Loadvars.onLoad handler.

    Dalam berkomunikasi dengan server, LoadVars class memiliki beberapa metode diantaranya: load(), send(), sendAndLoad()

    .

    4. Menggunakan Object XML

    XML class bekerja dengan cara yang kurang lebih sama dengan LoadVars class, perbedaan utamanya yaitu LoadVars mentransfer nama dan nilai Actionscript berpasangan sedangkan XML object menyimpan datanya dalam bentuk XML Document Object Model (DOM) tree.

    Lebih lanjut mengenai penggunaan XML dalam menyimpan variable Actionscript ini mungkin akan saya jadikan pembahasan tersendiri.

    Buat Animasi Jam Analog dan Digital dengan Flash


    Disadari atau tidak, jam sudah menjadi benda yang sangat penting dalam aktifitas keseharian kita. Dengan jam kita bisa melihat petunjuk waktu dan berjalannya, sehingga kita dapat melakukan rutinitas kegiatan dan acara sesuai pada jadwalnya. Terbayang kan bagaimana kacaunya hidup sehari-hari jika alat penunjuk waktu yang satu ini tidak pernah ada? Nah, sekarang ceritanya kita ingin membuat animasi Flashnya, gimana caranya?

    Flash memiliki sebuah predefined Date class yang berguna untuk mengambil data berupa waktu dan tanggal relatif terhadap GMT/UTC atau relatif terhadap local time (yaitu waktu di sistem operasi dimana Flash Player tersebut sedang berjalan), sehingga kita dapat membuat aplikasi yang berhubungan dengan tanggal atau waktu seperti misalnya jam, kalender, timer, dan lain-lain.

    Karena judulnya buat animasi jam, jadi disini saya hanya bahas cara membuat jam saja, baik digital (hanya menampilkan digit angka) maupun analog (seperti jam dinding pada umumnya).

    1. Jam Digital

    Buat 3 buah teks untuk tampilan jam, menit, dan detik. Kemudian ubah tipe teks ketiga-tiganya menjadi dynamic text, pada kolom variabelnya berikan nama teks_displayJam, teks_displayMenit, teks_displayDetik.

    buat 3 kotak teks

    buat 3 kotak teks

    Terakhir baru berikan script di frame tersebut:

    var dateObj:Date;
    var jam:Number;
    var menit:Number;
    var detik:Number;
    var teks_displayJam:String;
    var teks_displayMenit:String;
    var teks_displayDetik:String;
    
    this.onEnterFrame= function()
    {
        dateObj = new Date()
        jam = dateObj.getHours();
        menit = dateObj.getMinutes();
        detik = dateObj.getSeconds();
    
        if(jam < 10)
            teks_displayJam = "0" + jam.toString();
        else
            teks_displayJam = jam.toString();
    
        if(menit < 10)
            teks_displayMenit = "0" + jam.toString();
        else
            teks_displayMenit = menit.toString();
    
        if(detik < 10)
            teks_displayDetik = "0" + detik.toString();
        else
            teks_displayDetik = detik.toString();
    }
    
    hasil akhir

    hasil akhir

    2. Jam Analog

    Pertama-tama buat 3 buah movieclip berbentuk garis yang akan berperan sebagai jarum penunjuk pada jam (jam, menit, dan detik) berikan instance name pada masing2 jarum dengan nama mc_jarumJam, mc_jarumMenit, dan mc_jarumDetik. Satu hal yang perlu diperhatikan adalah saat mengconvert masing2 garis menjadi symbol, set registration point ke titik tengah-bawah (lihat kotak yg ditunjuk mouse).

    set registration point

    set registration point

    Gambar sebuah kerangka jam yang akan ditempati jarum-jarum tersebut, kreasikan sendiri desain bentuk, warna, dan ukurannya sebagus mungkin. Buat juga sebuah titik tepat di tengah-tengahnya agar mudah menyusun jarum-jarumnya, sekarang pasangkan ketiga jarum yang kita buat di awal tadi saling tumpang tindih, dengan acuan bagian bawah ketiga movieclip jarum berada di titik tengah jam, sehingga bagian atasnya mengarah tepat ke angka 12.

    susun jarum

    susun jarum

    Terakhir berikan script pada frame:

    this.onEnterFrame = function()
    {
        var dateObj:Date = new Date();
        var detik:Number = dateObj.getSeconds();
        var menit:Number = dateObj.getMinutes();
        var jam:Number = dateObj.getHours();
    
        mc_jarumDetik._rotation = detik*6;
        mc_jarumMenit._rotation = menit*6;
        mc_jarumJam._rotation = jam*30;
        mc_jarumJam._rotation += (menit/2);
    }
    
    hasil akhir

    hasil akhir

    Tutorial lengkap ttg pembuatan Jam Digital dan Analog ini bisa dilihat di tabloid PC-Mild edisi 24/2008 (8 desember) 😉

    . Lanjutkan membaca “Buat Animasi Jam Analog dan Digital dengan Flash”

    Pinguin Joged


    Atraksi sederhana berupa goyang ngebor.. eh kesetrum seekor pinguin yang akan terus bergoyang manakala batere ditempatkan di tempat yang benar.

    joged

    drag baterenya ke tempat yang benar

    Cara membuatnya sangat mudah: Sediakan 2 buah movieclip, Pinguin bergoyang [pinguin_mc] dan Batere [batere_mc], tambahkan gambar kabel yang akan menghubungkan pinguin dengan batere, kemudian berikan sedikit script untuk mengatur goyangan pinguin dengan syarat koordinat x dan y dari batere.

    batere_mc.onPress = function(){
    startDrag(this);
    }
    
    batere_mc.onRelease = function(){
    stopDrag();
    }
    
    this.onEnterFrame=function(){
    if(batere_mc._x >= 85
    && batere_mc._x <= 110
    && batere_mc._y >= 155
    && batere_mc._y <= 165){
    pinguin_mc.play();
    }
    else {
    pinguin_mc.stop();
    }
    }
    

    Download SWF+FLA-nya di http://tinyurl.com/F4154LMAN-pinguinjoged

    Pengantar ‘Essential ActionScript 3.0’ Versi Cupu :)


    Sekarang giliran baca e-booknya Colin Moock: “Essential ActionScript 3.0“, e-book ini didapatkan dengan mencari di internet tapi yg saya dapat ini bajakannya lho he he 😀. tebalnya lumayan: 900 halaman! Keren! (halah. padahal baru baca pengantarnya doang :P).

    Paragraf pertama dari pengantarnya ‘kira2’ (ngasal soalnya :P) seperti ini :

    “Pada asalnya, ActionScript dibuat hanya sebagai tool untuk mengontrol animasi, namun sejak itu hingga kini ia telah menjelma menjadi sebuah bahasa pemrograman yang powerful dalam hal pembuatan konten dan aplikasi web, mobile devices, aplikasi desktop, dll. Namun penggunaannya akan berbeda untuk setiap programmer atau desainer. Misalnya bagi seorang animator, dia hanya memerlukan beberapa baris kode saja untuk mengontrol animasi yang dibuatnya. Berbeda halnya dengan interface designer yang mungkin membutuhkan ratusan baris kode untuk merancang interaktifitas pada antarmuka sebuah mobile devices apps. Atau bahkan halnya application developer yang mungkin menggunakan ribuan baris kode untuk membuat sebuah set aplikasi e-mail.”

    Lebih jelasnya, ActionScript merupakan bahasa pemrograman berorientasi objek (OOP) yang spesifikasi bahasanya berbasis ECMAScript dan ditujukan untuk berjalan di atas sebuah runtime environment (seperti Flash Player, Adobe AIR, atau Flash Lite). Mirip seperti prinsipnya Java, Flash pada dasarnya berjalan diatas sebuah AVM (ActionScript Virtual Machine). Dan sejak keluarnya ActionScript 3, Flash Player sudah menggunakan AVM versi 2 yang benar-benar berbeda dengan peningkatan performa yang signifikan dan model pemrograman baru, namun tetap mendukung ActionScript versi sebelumnya. cmiiw

    Pemakaian aplikasi ActionScript bisa dalam 3 client runtime environment yang berbeda:

    1. Flash Player
    Flash Player menjalankan konten dan aplikasi Flash-platform yang biasanya ditujukan dalam pembuatan web (dengan format file SWF). Flash Player biasanya terinstall sebagai addon di web browser, namun bisa juga berjalan dengan mode standalone.

    2. Flash Lite
    Flash Lite menjalankan konten dan aplikasi Flash-platform pada mobile device. Secara sebagai aplikasi pada device kecil tentu kemampuannya terbatas jika dibandingkan penggunaan di lingkungan PC baik dalam hal kecepatan maupun fiturnya.

    3. Adobe AIR
    Adobe AIR menjalankan aplikasi Flash-platform pada desktop. Adobe AIR merupakan tools yang membawa aplikasi web ke ranah desktop, sehingga dengan kemampuan HTML dengan JavaScript atau Flash sekalipun, kita dapat membuat aplikasi desktop biasa 😀 Hanya syaratnya Adobe AIR harus diinstall dulu di sistem operasi user (mungkin seperti Java Runtime Environment ya? eh iya nggak sih :P).

    Terakhir, sejarahnya ActionScript (kalau yang ini ngambil dari wiki):

    ActionScript 1.0 rilis pertama kali pada Flash 5 yang merupakan pengembangan ‘Action’ di Flash 4, dan masih digunakan hingga Flash MX (Flash 6)

    ActionScript 2.0 kemudian dirilis pada Flash MX 2004 (Flash 7), Flash 8, sampai Flash CS3 (Flash 9). Sebagai generasi penerus ActionScript 1.0 dengan kelebihannya dari kemampuan compile time checking, strict-typing pada variabel, class-based syntax (yang sebelumnya prototype based), dll.

    ActionScript 3.0 akhirnya digunakan pada Flash CS3 (Flash 9), Flex 2, Flex 3. ActionScript versi 3.0 ini berupa sebuah restrukturisasi fundamental dari model pemrograman sebelumnya. Penggunaannya yang luas terutama dalam pengembangan RIA (Rich Internet Application) dengan hadirnya Flex yang menawarkan hal serupa seperti AJAX, JavaFX, dan Microsoft Silverlight.

    Secara pribadi, sebenarnya masih sangat betah dengan ActionScript 2.0 karena biasanya saya hanya membuat sesuatu yang sederhana seperti animasi, game sederhana, aplikasi sederhana, media interaktif, atau presentasi. Bagi orang non-programmer pun mungkin akan berpikiran sama dengan saya… misalnya lebih menyukai sisi desain daripada membuat skrip yang kompleks seperti di ActionScript 3. Namun, bagi application developer ataupun web developer, mempelajari ActionScript 3.0 mungkin akan menjadi sesuatu yang perlu karena penggunaannya yang lebih luas. yah, it’s up to you lah…

    Loh, mana penjelasan tentang ActionScript 3.0 nya? hmm.. mungkin ada yang bisa nunjukin contoh skrip AS2 yang dibandingkan AS3 supaya bisa dilihat beda gaya pemrogramannya? (masih cupu nih, wajar kan namanya juga baru baca pengantarnya he he :mrgreen: )