Professional Documents
Culture Documents
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.
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.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
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
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.
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
Pilih layer tombol dan pilih menu Window > Command Library > Buttons.
Maka akan muncul jendela seperti berikut :
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.
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 :
Next_track
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 :
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
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.
Kemudian pilih layer masking, buat objek kotak kecil berukuran 2 x 13 tanpa
Stroke. Atur posisi diujung kotak sebelah kiri seperti gambar berikut :
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.
Pilih movie clip indikator_mask (objek yang baru diubah ke symbol), beri
nama instance dengan “VolumeMasking” pada Instance Name.
Kembali k eke movie clip Mp3 dengan cara menekan tab pada Mp3 di bagian
atas Timeline (lihat gambar).
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 :
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.
Pilih objek kotak yang baru Anda ubah ke symbol movie clip, lalu beri nama
instance dengan ”Volume_slider” pada Instance Name.
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
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 :
194 Bangun Aplikasimu dengan ActionScript Flash Professional 8
Pilih layer Playback, buat objek kotak dengan Rectangle Tool dengan ukuran
270 x 2. Lalu posisikan objek seperti gambar berikut :
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
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.
Objek movie clip tadi masih dalam keadaan terpilih, klik dua kali untuk masuk
ke modus edit symbol.
196 Bangun Aplikasimu dengan ActionScript Flash Professional 8
Pilih layer garis lalu pada Timeline klik di frame 100 lalu klik kanan mouse
pilih Insert Keyframe atau dengan menekan tombol F6 pada keyboard.
Klik di frame 1 lalu pilih objek dan ubah ukuran panjangnya menjadi 8 pixel
dan tempatkan di ujung kiri seperti gambar berikut :
Klik frame 1 lalu pada Properties pilih Tween : Shape (lihat gambar).
Kemudian buatlah layer baru dan beri nama dengan action. Lalu klik di frame
1 buak panel action, lalu tuliskan script stop();.
Bab 7 Membuat Aplikasi Mp3 Player 197
Kembali ke edit symbol Mp3 dengan meng-klik tab Mp3 pada panel timeline.
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).
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.
Klik dua kali pada movie clip slider_playback untuk masuk ke modus edit
symbol.
Klik di fraem 100 lalu klik kanan mouse pilih Insert Keyframe.
Klik di frame 100 lalu pilih objek dan ubah posisi berada pada ujung sebelah
kanan seperti terlihat pada gambar beikut :
Bab 7 Membuat Aplikasi Mp3 Player 199
Gambar 7.39 Mengubah posisi objek di frame 100 ke ujung sebelah kanan
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.
200 Bangun Aplikasimu dengan ActionScript Flash Professional 8
Buatlah objek kotak dengan ukuran 280 x 17.5 dengan warna Fill putih dan
ubah nilai Alpha menjadi 20%. Posisikan seperti gambar berikut :
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 :
Bab 7 Membuat Aplikasi Mp3 Player 201
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 :
Buat warna gradasi pada objek tadi hingga seperti gambar berikut :
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.
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.
204 Bangun Aplikasimu dengan ActionScript Flash Professional 8
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.
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.
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.
Buat layer baru dan beri nama animasi. Kemudian letakan dibawah layer
action.
Gambar 7.54 Membuat layer baru dibawah layer action dengan nama animasi
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.
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.
212 Bangun Aplikasimu dengan ActionScript Flash Professional 8
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
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 :
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 :
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
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.
Pilih objek teks pada frame 25 dan geser ke kiri hingga seperti gambar berikut:
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 :
Kembali ke modus edit dokumen tekan Ctrl + E, lalu jalankan movie. Maka
akan tampak animasi masking teks yang bergerak dari kanan ke kiri.
Simpan file dan lakukan publish ke format Flash (.swf) dan ke format
Windows Projector (.exe), lalu jalankan movie.