Home >Documents >MEMBUAT APLIKASI MP3 PLAYER

MEMBUAT APLIKASI MP3 PLAYER

Date post:03-Jul-2015
Category:
View:15,830 times
Download:1 times
Share this document with a friend
Transcript:

Bab 7MEMBUAT APLIKASI MP3 PLAYER

Dalam bab ini akan membahas tentang pembuatan movie atau aplikasi dasar dengan ActionScript untuk memberikan dasar dan sebagai pengantar untuk dapat melanjutkan pada bab selanjutnya.

APLIKASI MP3 PLAYER SEDERHANAAnda pasti tahu kan Mp3 Player itu seperti apa dan untuk apa? yang jelas adalah untuk memutar musik pada umumnya. Disini kita akan mencoba untuk membuatnya tapi dengan sederhana dan hanya dapat untuk memutar file musik yang berekstensi .mp3 saja. Jangan dibandingkan antara aplikasi Mp3 Player ini dengan aplikasi-aplikasi Mp3 Player yang sudah umum kita dengar dan kita tahu, misalnya kayak Winamp, JetAudio dan lain-lain. Langkah pertama untuk membuat Mp3 Player sederhana adalah buat file baru. Ubah ukuran stage menjadi 350 x 165 pixles. Klik Rectangle Tool buat objek persegi panjang dengan ukuran 340 x 140.

182

Bangun Aplikasimu dengan ActionScript Flash Professional 8

Pada Stroke Color pilih warna silver (#666666) dengan ketebalan garis 3 dan pada Fill Color pilih warna hijau tua. Buat objek persegi di stage dan atur posisi tepat seperti gambar berikut :

Gambar 7.1 Membuat objek persegi di stage dengan ukuran 340 x 140 Pilih warna fill hijau, pada panel Color Mixer pilih Fill Color lalu pilih tipe gradasi linier dan atur warna gradasi seperti berikut :

Bab 7 Membuat Aplikasi Mp3 Player

183

#003300 #003300 #009900 #00FF00

Gambar 7.2 Pengaturan warna gradasi Selanjutnya atur posisi gradasi pada objek dengan menggunakan Paint Bucket Tool dan teteskan sambil menahan klik dan seret dari atas ke bawah hingga hasilnya seperti gambar berikut.

Gambar 7.3 Mengatur posisi warna gradasi dengan Paint Bucket Tool

184

Bangun Aplikasimu dengan ActionScript Flash Professional 8

Pilih objek fill-nya saja (yang berwarna hijau saja). Lakukan penyalinan objek, tekan Ctrl + C lalu diikuti Ctrl + Shift + V. Klik Free Transform Tool dan kecilkan objek hasil salinan atau objek kedua menjadi lebih kecil sedikit dan atur posisi tepat ditengah-tengah objek asli. (lihat gambar)

Gambar 7.4 Mengecilkan objek hasil salinan dengan Free Transform Tool Maka hasilnya akan terlihat seperti berikut :

Gambar 7.5 Hasil dari penyalinan objek dan mengecilkan objek hasil salinan Ubah nama layer menjadi Mp3, kemudian klik frame 1 untuk menyeleksi semua objek yang ada di layer itu. Tekan F8 untuk mengubahnya ke symbol, pada behavior pilih Movie clip beri nama Mp3 pada Registration pastikan berada di bagian tengah.

Bab 7 Membuat Aplikasi Mp3 Player

185

Gambar 7.6 Mengubah ke symbol Pilih movie clip Mp3 (objek yang baru diubah ke symbol movie clip), lalu klik dua kali untuk masuk ke modus edit symbol. Ubah nama layer menjadi bentuk mp3 dan tambahkan satu layer lagi beri nama bentuk mp3_2.

Gambar 7.7 Mengubah nama layer dan menambahkan layer baru Pilih layer bentuk mp3_2, lalu klik Rectangle Tool pilih Fill Color pilih warna hitam pada panel Color Mixer ubah nilai Alpha menjadi 40% dan Stroke Color warna silver (#666666) dengan ketebalan 3. Buat objek persegi panjang tepat ditengah-tengah objek persegi yang tadi, ubah ukuran menjadi 295 x 50 hingga hasilnya akan terlihat seperti gambar berikut.

186

Bangun Aplikasimu dengan ActionScript Flash Professional 8

Gambar 7.8 Membuat objek persegi kecil pada layer bentuk mp3_2 Langkah selanjutnya kita akan membuat tombol-tombol untuk Play, Stop, Paused, Next, Preview. Buat layer baru dan beri nama tombol. Kita akan memanfaatkan command library untuk membuat symbol dengan cepat tinggal memasukannya ke dalam stage. Pilih layer tombol dan pilih menu Window > Command Library > Buttons. Maka akan muncul jendela seperti berikut :

Gambar 7.9 Jendela Library Buttons

Bab 7 Membuat Aplikasi Mp3 Player

187

Kemudian pada jendela Library-Butons, pilih classic butons lalu pilih Playback. Pilih tombol gel Fast Forward, gel Paused, gel Rewind, gel Right dan gel Stop.

Gambar 7.10 Memilih tombol-tombol yang da di Library-Buttons Seletah ke lima tombol dipilih, seret atau masukan ke lima tombol ke stage. Anda jangan kaget jika hanya ada satu tombol yang terdapat di stage setelah Anda memasukan ke lima tombol tadi, klik dan geser satu persatu tombol maka akan terlihat kelima tombol tersebut. Tutup jendela Library-Buttons. Atur posisi tombol-tombol tersebut dibawah objek persegi kecil yang baru di buat tadi hingga seperti gambar berikut :

188

Bangun Aplikasimu dengan ActionScript Flash Professional 8

Gambar 7.11 Menempatkan ke lima tombol-tombol Selanjutnya kita akan memberi nama instance pada tiap-tiap tombol. Klik tombol Preview (tombol paling kiri) pada Instance Name beri nama Preview_track, klik tombol Play (sebelah tombol Preview) pada Instance Name beri nama Play:, klik tombol Stop pada Instance Name beri nama Stop, klik tombol Paused pada Instance Name beri nama Paused dan klik tombol Next (tombol paling kanan) pada Instance Name beri nama Next_track. Ingat besar kecil huruf berpengaruh pada pemberian ActionScript, maka perhatikan antara huruf kecil dan besar. Untuk lebih jelasnya tentang pemberian nama instance pada tiap tombol lihat gambar berikut :

Preview_track

Play

Stop

Paused Next_track

Gambar 7.12 Pemberian nama instance pada tiap tombol Langkah selanjutnya untuk membuat pengaturan pada volume.

Bab 7 Membuat Aplikasi Mp3 Player

189

Buatlah tiga layer baru dan beri nama dengan Vol, Vol slider, Vol info. (lihat gambar berikut).

Gambar 7.13 Membuat 3 layer baru dan memberi nama pada tiap layer baru Pilih layer Vol. Buatlah objek kotak dengan Rectangle Tool dengan ukuran 125 x 5 dengan Fill Color warna hitam tanpa Stroke Color. Tempatkan seperti gambar berikut :

Gambar 7.14 Membuat kotak ukuran 125 x 5 Pilih objek tadi lalu tekan F8 untuk mengubahnya ke dalam symbol. Pilih behavior Movie clip beri nama Volume pada Registration pastikan point berada di bagian kiri. Klik OK. Ingat!! besar kecilnya huruf berpengaruh pada pemberian ActionScript nantinya.

190

Bangun Aplikasimu dengan ActionScript Flash Professional 8

Gambar 7.15 Mengubah ke symbol Objek masih dalam keadaan terpilih, klik dua kali untuk masuk ke modus edit symbol. Buatlah dua buah layer dan beri nama indikator dan masking.

Gambar 7.16 Membuat 2 buah layer baru dan beri nama indikator & masking Pilih layer 1, seleksi semua objek yang ada pada layer 1, tekan Ctrl + C untuk menyalin objek. Pilih layer indikator, klik di frame 1 lalu tekan Ctrl + Shift + V untuk menduplkat onjek di layer indikator. Pilih objek di layer indikator, lalu ubah warna menjadi putih.

Gambar 7.17 Mengubah warna menjadi putih

Bab 7 Membuat Aplikasi Mp3 Player

191

Kemudian pilih layer masking, buat objek kotak kecil berukuran 2 x 13 tanpa Stroke. Atur posisi diujung kotak sebelah kiri seperti gambar berikut :

Gambar 7.18 Membuat koak ukuran 1 x 13. Objek kotak kecil tadi masih dalam keadaan terpilih, ubah menjadi symbol tekan F8 pada behavior pilih Movie clip beri nama indikator_mask pastikan Registration pada bagian kiri.

Gambar 7.19 Mengubah objek menjadi movie clip Pilih movie clip indikator_mask (objek yang baru diubah ke symbol), beri nama instance dengan VolumeMasking pada Instance Name. Pilih layer masking lalu klik kanan dan pilih Mask.

Gambar 7.20 Masking pada layer masking dan indikator

192

Bangun Aplikasimu dengan ActionScript Flash Professional 8

Kembali k eke movie clip Mp3 dengan cara menekan tab pada Mp3 di bagian atas Timeline (lihat gambar).

Gambar 7.21 Kembali ke movie clip Mp3 Pilih layer Vol slider lalu buat objek kotak ukuran 20 x 10 dengan Stroke Color warna hitam dengan ketebalan 1 dan Fill Color warna silver (#CCCCCC). Letakan objek seperti gambar berikut :

Gambar 7.22 Mengatur objek berada di ujung movie clip Volume Pilih layer Vol slider klik di frame 1 lalu tekan F8 untuk mengubah ke symbol. Pilih behavior Movie clip beri nama Volume_slider pada Registration pastikan point berada di tengah, klik OK.

Gambar 7.23 Mengubah ke symbol

Bab 7 Membuat Aplikasi Mp3 Player

193

Pilih objek kotak yang baru Anda ubah ke symbol movie clip, lalu beri nama instance dengan Volume_slider pada Instance Name.

Gambar 7.24 Memberi nama instance dengan nama Volume_slider Selanjutnya pilih layer Vol info, buat Dynamic Text kosong dengan Font : Arial, Size : 10, Warna : putih, Bold, Align : Left. Atur posisi seperti gambar berikut :

Dynamic Text

Gambar 7.25 Membuat Dynamic text dan mengatur posisi Beri nama instance dengan info_volume pada Instance Name. Tahap selanjutnya adalah menbuat palyback bar dan slider yang akan terusmenerus bergerak ke kanan sesuai dengan lamanya lagu yang di putar. Buatlah empat buah layer baru dengan nama Playback, Load, LoadMasking, dan PlaybackSlider. Sehingga layer menjadi sepuluh buah layer seperti tampak pada gambar berikut :

194

Bangun Aplikasimu dengan ActionScript Flash Professional 8

Gambar 7.26 Membuat 4 buah layer baru Pilih layer Playback, buat objek kotak dengan Rectangle Tool dengan ukuran 270 x 2. Lalu posisikan objek seperti gambar berikut :

Gambar 7.27 Membuat objek kotak ukuran 270 x 2 Pilih objek kotak tadi lalu tekan Ctrl + C, pilih layer Load lalu teka Ctrl + Shift + V untuk menduplikat objek pada layer Load. Ubahlah warna menjadi putih.

Bab 7 Membuat Aplikasi Mp3 Player

195

Gambar 7.28 Objek hasil duplikast diubah menjadi warna putih Pilih layer LoadMasking lalu tekan lagi Ctrl + Shift + V untuk menduplikat objek pada layer LoadMasking juga, objek pada layer LoadMasking masih dalam keadaan terpilih, lalu tekan F8 untuk mengubah ke sy

Click here to load reader

Embed Size (px)
Recommended