membuat aplikasi mp3 player

36
Bab 7 Bab 7 MEMBUAT 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 SEDERHANA Anda 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.

Upload: parta182

Post on 03-Jul-2015

15.860 views

Category:

Documents


1 download

TRANSCRIPT

Page 1: MEMBUAT APLIKASI MP3 PLAYER

Bab 7Bab 7

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

Page 2: MEMBUAT APLIKASI MP3 PLAYER

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 :

Page 3: MEMBUAT APLIKASI MP3 PLAYER

Bab 7 Membuat Aplikasi Mp3 Player 183

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

#003300

#009900

#00FF00

#003300

Page 4: MEMBUAT APLIKASI MP3 PLAYER

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.

Page 5: MEMBUAT APLIKASI MP3 PLAYER

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.

Page 6: MEMBUAT APLIKASI MP3 PLAYER

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

Page 7: MEMBUAT APLIKASI MP3 PLAYER

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 :

Page 8: MEMBUAT APLIKASI MP3 PLAYER

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 :

Gambar 7.12 Pemberian nama instance pada tiap tombol

Langkah selanjutnya untuk membuat pengaturan pada volume.

Next_track

PausedStopPlayPreview_track

Page 9: MEMBUAT APLIKASI MP3 PLAYER

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.

Page 10: MEMBUAT APLIKASI MP3 PLAYER

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

Page 11: MEMBUAT APLIKASI MP3 PLAYER

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

Page 12: MEMBUAT APLIKASI MP3 PLAYER

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

Page 13: MEMBUAT APLIKASI MP3 PLAYER

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 :

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

Dynamic Text

Page 14: MEMBUAT APLIKASI MP3 PLAYER

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.

Page 15: MEMBUAT APLIKASI MP3 PLAYER

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 symbol, pilih [ada behavior Movie clip beri nama ”load_mask” pada Registration pilih point sebelah kiri lalu tekan OK.

Gambar 7.29 Mengubah ke symbol

Beri nama instance dengan ”mask_load_bar” pada Instance Name.

Gambar 7.30 Memberi nama instance pada movie clip load_mask

Objek movie clip tadi masih dalam keadaan terpilih, klik dua kali untuk masuk ke modus edit symbol.

Page 16: MEMBUAT APLIKASI MP3 PLAYER

196 Bangun Aplikasimu dengan ActionScript Flash Professional 8

Ubah nama layer mejadi garis.

Pilih layer garis lalu pada Timeline klik di frame 100 lalu klik kanan mouse pilih Insert Keyframe atau dengan menekan tombol F6 pada keyboard.

Gambar 7.31 Insert Keyframe pada frame 100

Klik di frame 1 lalu pilih objek dan ubah ukuran panjangnya menjadi 8 pixel dan tempatkan di ujung kiri seperti gambar berikut :

Gambar 7.32 Mengubah ukuran panjang pada frame 1

Klik frame 1 lalu pada Properties pilih Tween : Shape (lihat gambar).

Gambar 7.33 Memilih Tween Shape pada panel Properties

Kemudian buatlah layer baru dan beri nama dengan action. Lalu klik di frame 1 buak panel action, lalu tuliskan script stop();.

Page 17: MEMBUAT APLIKASI MP3 PLAYER

Bab 7 Membuat Aplikasi Mp3 Player 197

Gambar 7.34 Menuliskan script pada panel action di frame 1

Kembali ke edit symbol Mp3 dengan meng-klik tab Mp3 pada panel timeline.

Pilih layer LoadMasking lalu klik kanan pilih Mask.

Gambar 7.35 Membuat masking pada layer LoadMasking

Selanjutnya pilihlah layer PlaybackSlider.

Buat objek kotak dengan ukuran 20 x 10 dengan Fill Color warna silver (#CCCCCC) dan Stroke Color warna hitam ketebalan 1. Posisikan diujung objek garis tadi (lihat gambar).

Gambar 7.36 Membuat objek kotak diujung objek garis

Page 18: MEMBUAT APLIKASI MP3 PLAYER

198 Bangun Aplikasimu dengan ActionScript Flash Professional 8

Klik di frame 1 pada layer PlaybackSlider untuk menyeleksi semua objek yang berada pada layer tersebut. Tekan F8 untuk mengubahnya ke symbol, pada behavior pilih Movie clip beri nama ”slider_playback” pada Registration point berada di sebelah kiri.

Gambar 7.37 Mengubah ke symbol movie clip

Beri nama instance dengan “slider_playback” pada Instance Name.

Klik dua kali pada movie clip slider_playback untuk masuk ke modus edit symbol.

Klik di frame 1 lalu tekan Ctrl + G untuk mengelompokan semua objek.

Klik di fraem 100 lalu klik kanan mouse pilih Insert Keyframe.

Gambar 7.38 Insert Keyframe pada frame 100

Klik di frame 100 lalu pilih objek dan ubah posisi berada pada ujung sebelah kanan seperti terlihat pada gambar beikut :

Page 19: MEMBUAT APLIKASI MP3 PLAYER

Bab 7 Membuat Aplikasi Mp3 Player 199

Gambar 7.39 Mengubah posisi objek di frame 100 ke ujung sebelah kanan

Pilih frame 1 lalu klik kanan pilih Create Motion Tween.

Buatlah layer baru dan beri nama action.

Gambar 7.40 Membuat layer baru dengan nama action

Klik di frame 1 layer action lalu tuliskan script stop();.

Gambar 7.41 Memberikan script pada panel action di frame 1

Klik tab Mp3 pada timeline untuk kembali ke movie clip Mp3.

Langkah selanjutnya kita akan membuat sebuah tampilan informasi dari file mp3 seperti nama Artis dan Album atau judul lagu.

Page 20: MEMBUAT APLIKASI MP3 PLAYER

200 Bangun Aplikasimu dengan ActionScript Flash Professional 8

Buat layer baru dan beri nama ”infoAlbum”.

Gambar 7.42 Membuat layer baru dengan nama info Album

Buatlah objek kotak dengan ukuran 280 x 17.5 dengan warna Fill putih dan ubah nilai Alpha menjadi 20%. Posisikan seperti gambar berikut :

Gambar 7.43 Membuat kotak ukuran 280 x 17.5

Pilih Text Tool, lalu buatlah Dynamic Text dengan Font : Comic Sans Ms, size : 12, warna : putih, Bold, Align : Left. Letakan dynamic text seperti gambae berikut :

Page 21: MEMBUAT APLIKASI MP3 PLAYER

Bab 7 Membuat Aplikasi Mp3 Player 201

Gambar 7.44 Membuat text dynamic

Beri nama instance dengan “titleMp3” pada Instance Name.

Setelah itu, tekan Ctrl + E untuk kembali ke modus edit dokumen.

Setelah kembali ke modus edit dokumen, buatlah layer baru, lalu letakan layer baru di bawah layer Mp3 seperti gambar berikut :

Gambar 7.45 Membuat layer baru dan posisi dibawah layer Mp3

Buat kotak dengan ukuran 320 x 18 pixels, pada Stroke Color pilih warna silver (#666666) dengan ketebalan 3, dan Fill Color warna hijau tua. Letakan seperti gambar berikut :

Gambar 7.46 Membuat kotak ukuran 320 x 18 pixels

Page 22: MEMBUAT APLIKASI MP3 PLAYER

202 Bangun Aplikasimu dengan ActionScript Flash Professional 8

Buat warna gradasi pada objek tadi hingga seperti gambar berikut :

Gambar 7.47 Memberi warna gradasi pada objek

Simpan file tersebut. Langkah berikutnya kita akan menyiapkan file Mp3-nya untuk dapat diputar pada aplikasi yang kita buat.

Pertama kita akan membuat sebuah file .txt untuk total dari track lagu.

Cara untuk membuat file tersebut adalah buka aplikasi Notepad cara klik tombol Start > All Programs > Accessories > Notepad.

Gambar 7.48 Cara membuka aplikasi Notepad

Page 23: MEMBUAT APLIKASI MP3 PLAYER

Bab 7 Membuat Aplikasi Mp3 Player 203

Setelah aplikasi Notepad dibuka, tuliskan seperti berikut :

Gambar 7.49 Membuat file .txt di Notepad

Lalu simpan dengan nama total_lagu.txt, simpan file.txt itu ke dalam folder yang sama dengan pinyimpanan file Flash-nya.

Diatas telihat total lagu = 4 berarti kita akan memainkan file mp3 sebanyak 4 file, jika ingin memainkan file mp3 10 file maka total_lagu = 10.

Kemudian buat folder baru yang bernama Mp3, dan pindahkan total_lagu.txt ke dalam folder Mp3.

Gambar 7.50 Membuat folder baru dan memasukan file txt ke folder baru

Masukan file empat buah file .mp3 sesuai dengan keinginan Anda ke dalam folder Mp3 dan ubah nama tiap file .mp3 Anda dengan nama mulai dari track-1, track-2, track-3, track-4 sesuai dengan jumlah file .mp3-nya.

Simpan file .txt disini

Page 24: MEMBUAT APLIKASI MP3 PLAYER

204 Bangun Aplikasimu dengan ActionScript Flash Professional 8

Gambar 7.51 Memasukan file .mp3 dan mengubah nama-nya

Selanjutnya kita akan memberikan ActionScript untuk dapat mengoperasikan aplikasi yang baru kita buat agar dapat beroprasi selayaknya sebuah aplikasi Mp3 Player.

Pilih layer Mp3, pilih movie clip Mp3 lalu beri nama instance dengan “MP3Player” pada Instance Name. Ingat!! besar kecilnya huruf sangat berpengaruh pada pemberian ActionScript.

Buatlah layer beru dan beri nama dengan action.

Gambar 7.52 Membuat layer baru dengan nama action

Klik di frame 1 dan tuliskan script berikut :

Page 25: MEMBUAT APLIKASI MP3 PLAYER

Bab 7 Membuat Aplikasi Mp3 Player 205

Page 26: MEMBUAT APLIKASI MP3 PLAYER

206 Bangun Aplikasimu dengan ActionScript Flash Professional 8

Page 27: MEMBUAT APLIKASI MP3 PLAYER

Bab 7 Membuat Aplikasi Mp3 Player 207

Page 28: MEMBUAT APLIKASI MP3 PLAYER

208 Bangun Aplikasimu dengan ActionScript Flash Professional 8

Page 29: MEMBUAT APLIKASI MP3 PLAYER

Bab 7 Membuat Aplikasi Mp3 Player 209

Anda jangan terkesan pusing dulu dengan script diatas yang mungkin panjang itu, sebenarnya panjang atau banyak sedikitnya script tidaklah jadi permasalahan. Jika kita paham tentang variabel, tipe data, statement, kondisi serta struktur program pada ActionScript, tidaklah sulit untuk membuat suatu kode program yang panjang bahkan jika dicetak bisa menghasilkan puluhan lembar.

Page 30: MEMBUAT APLIKASI MP3 PLAYER

210 Bangun Aplikasimu dengan ActionScript Flash Professional 8

Setelah penulisan script diatas selesai, simpan file. Dan lalukan publish file ke format Flash (.swf) dank e format Windows Projector (.exe). Lalu jalankan movie atau aplikasi Mp3 yang Anda baru buat.

Gambar 7.53 Hasil dari movie / aplikasi Mp3 Player

Langkah terakhir adalah untuk menghiasi Mp3 Player Anda.

Buat layer baru dan beri nama animasi. Kemudian letakan dibawah layer action.

Gambar 7.54 Membuat layer baru dibawah layer action dengan nama animasi

Page 31: MEMBUAT APLIKASI MP3 PLAYER

Bab 7 Membuat Aplikasi Mp3 Player 211

Pilih layer anmasi, buat objek kotak dengan ukuran 160 x 18 pixels, set Corner Radius 5, pilih Fill Color warna hijau tua tanpa Stroke Color. Posisikan di bagian atas sebelah kanan Mp3 Player (lihat gambar).

Gambar 7.55 Membuat objek kotak ukuran 160 x 18 warna hijau tua

Objek kotak tadi masih dalam keadaan terpilih, tekan F8 untuk mengubahnya ke symbol. Pilih behavior Movie clip beri nama “animasi_masking” pada Registration pastikan point berada di bagian tengah.

Gambar 7.56 Mengubah ke symbol movie clip

Plilih movie clip tadi lalu klik dua kali untuk masuk ke modus edit symbol.

Ubah nama layer menjadi background, lalu tambahkan dua layer baru lagi dan beri nama dengan objek dan mask.

Page 32: MEMBUAT APLIKASI MP3 PLAYER

212 Bangun Aplikasimu dengan ActionScript Flash Professional 8

Gambar 7.57 Membuat dua buah layer

Pilih layer background, pilih objek kotak lalu ubah warna menjadi warna gradasi linier pada panel Color Mixer dengan warna seperti gambar berikut :

Gambar 7.58 Membuat warna gradasi linier pada panel Color Mixer

Sehingga hasilnya akan terlihat seperti gambar berikut :

Gambar 7.59 Hasil dari pemberian warna gradasi

Page 33: MEMBUAT APLIKASI MP3 PLAYER

Bab 7 Membuat Aplikasi Mp3 Player 213

Pilih layer objek, buat objek kotak dengan ukuran 137 x 12 pixels, pada Fill Color pilih warna putih tanpa Stroke Color. Posisikan seperti terlihat pada gambar berikut :

Gambar 7.60 Membuat kotak warna putih ukuran 137 x 12

Selanjutnya kita akan membuat animasi masking, pilih layer mask lalu klik Text Tool, pilih Static Text dengan Font : Arial, Size : 8, warna : hitam, Bold, Align : center. Tuliskan teks ”Animations For Human Beings – Animations For Human Beings – Animation For Human Beings” posisikan diatas objek kotak warna putih seperti pada gambar berikut :

Gambar 7.61 Membuat teks Animations For Human Beings

Kemudian sorot dari di frame 25 mulai dari layer mask sampai layer background (lihat gambar).

Gambar 7.62 Menyorot di frame 25 dari layer mask sampai layer bacground

Page 34: MEMBUAT APLIKASI MP3 PLAYER

214 Bangun Aplikasimu dengan ActionScript Flash Professional 8

Lalu klik kanan mouse pilih Insert Frame atau tekan F5 pada keyboard. Kemudian pilih layer mask dan klik di frame 25 lalu klik kanan pilih Insert Frame atau tekan F6.

Gambar 7.63 Insert Keyframe di frame 25 pada layer mask

Pilih objek teks pada frame 25 dan geser ke kiri hingga seperti gambar berikut:

Gambar 7.64 Menggeser teks di frame 25

Klik frame 1 lalu klik kanan mouse pilih Create Motion Tween. Pilih layer mask klik kanan lalu pilih Mask maka hasilnya akan terlihat seperti pada gambar berikut :

Gambar 7.65 Hasil dari Mask

Page 35: MEMBUAT APLIKASI MP3 PLAYER

Bab 7 Membuat Aplikasi Mp3 Player 215

Kembali ke modus edit dokumen tekan Ctrl + E, lalu jalankan movie. Maka akan tampak animasi masking teks yang bergerak dari kanan ke kiri.

Gambar 7.66 Hasil dari menjalankan movie

Nah,,, selanjutnya gunakan imajinasi Anda untuk menghiasi tampilan dari Mp3 Player yang Anda buat.

Simpan file dan lakukan publish ke format Flash (.swf) dan ke format Windows Projector (.exe), lalu jalankan movie.

Gambar 7.67 Hasil akhir dari aplikasi Mp3 Player

Page 36: MEMBUAT APLIKASI MP3 PLAYER

216 Bangun Aplikasimu dengan ActionScript Flash Professional 8