Professional Documents
Culture Documents
saya dapat menyelesaikan karya tulis ilmiah “Mp3 Player GREEN DAY
memenuhi tugas mata kuliah Minor Project yang di berikan kepada saya.
berbagai hal ilmu tentang Macro Media Flash 8, sehingga saya dapat
menyelesaikan tugas ini. Dan juga ucapan terima kasih kepada bapak
Wahana Informatika.
GREEN DAY Edition “ ini saya kemas dan sajikan berdasarkan ilmu-
ilmu yang telah diajarkan kepada saya, dengan format dan bahasa
pelajari.
Kediri, Mei
2010
BAB I 3
PENDAHULUAN
dan lebih fresh, baik itu hiburan yang bersifat mendidik atau hiburan
yang hanya untuk sekedar melepas rasa lelah setelah seharian melakukan
tentu saja dapat merealisasikan ide tersebut menjadi suatu bentuk aplikasi
hiburan yang menyenangkan, tak hayal orang tersebut pasti bisa menjadi
orang yang sukses dan tentu saja bisa membuka lapangan pekerjaan
saat ini.
LANDASAN TEORI
2.1 Macromedia flash 8
khusus oleh Macromedia, saat itu sebagai pengembangnya yang saat ini
2 dimensi yang handal dan ringan sehingga flash banyak digunakan untuk
Gambar 2.1
pendekatan XML.
4 2.2 Adobe Flash
ini mempunyai file extension .swf dan dapat diputar di penjelajah web
Flash 5.
ini. Selain sederhana dan mudah, macromedia flash 8 juga fleksibel. Bisa
sampai pembuatan header pada website pun juga bisa di buat melalui
macromedia flash 8.
Gambar 2.2
baris sebelah kiri adalah Tool, tempat untuk memilih alat-alat yang akan
6 di gunakan untuk mendesain, mengedit, sampai memilih warna untuk
untuk menampung objek yang telah di convert, atau pun objek yang di
import dari luar flash ( walaupun objek telah di hapus pada lembar kerja,
objek tetap ada di library). Fungsi color tentunya untuk memilih warna
Gambar 2.3
Layer dan Keyframe 9
Gambar 2.3 menunjukan layer dan keyframe. Layer
berguna sebagai lembar kerja. Sedangkan keyframe berguna untuk
berarti kosong, tidak ada objek maupun animasi. Layer 2 berarti ada
objek, tetapi tidak ada animasi. Layer 3 berarti ada objek sampai
frame 10. Layer 4 berarti ada animasi, dan jenis animasinya adalah
ada animasi yang berjalan sampai frame 10, dan jenis animasinya
animasi dan objek, tetapi animasi tidak berjalan. Terlihat dari garis
obje yang telah di convert dan juga sebagai wadah untuk gambar
Gambar 2.4
di pilih. Mulai dari warna solid, linear, dan juga warna radial. Dan
Gambar 2.5
tween motion.
bila terdapat garis panah dengan background biru, itu menandakan animai
warna hijau atau pun biru, itu menandakan animasi tidak berjalan atau
salah. Sebagai contoh lihat gambar nomer 2.3 agar lebih jelasnya.
8, terkadang kita juga mebutuhkan objek dari luar flash. Entah itu objek
Mudah saja caranya tinggal klik file import, tinggal memilih import
to stage atau import to library. Jika ingin import to stage ada cara yang
cepat, tidak perlu klik file. Langsung saja tekan shortcut Ctrl+R.
pada lembar kerja atau layer, teatpi di tampung didalam library. Untuk
lah mudah. Anda tinggal meng-klik window pada menu toolbar yang
ada diatas. Setelah itu pilih common libraries. Common libraries ini
Antara lain :
• Data
• FLV Playback-Player 8
• Media-Player 6-7
• User Interface
Gambar 2.6
Kotak dialog components
1.7 Penggunaan Movie Clip, Button dan Grafik 13
Semua objek pada flash dapat di-convert menjadi Movie clip,
Button dan juga grafik. Apakah fungsi dari ketiga nya tersebut ? disini
didalam satu scene. Cara untuk membuat movie clip adalah dengan
cara klik objek yang akan di convert. Kemudian klik menu modify
1.7.2 Button
lainya. Cara untuk membuat Button adalah dengan cara klik objek
1.7.3 Grafik
desain agar dapat lebih manos atau pin lebih bagus. Biasanya di
gunakan untuk mengedit teks agar dapat menjadi transparan atau
sebuah durasi, dari pada membuat animasi yang panjang pada keyframe,
lebih mudah kalau kita menggunakan atau menulis script pada animasi
kita.
Agar lebih efektifnya, kita tulis saja script atau rumus didalam keyframe
this._x -= 2;
if (this._x<(-202)) {
this._x = 820;
ke keyframe yang lainya, dan hal ini bisa menjadi alternatif yang bagus
aturan yang ada agar animasi kita dapat berjalan dengan baik dan
benar.
objek kita dulu menjadi movie clip, button , atau pun grafik.Yang
script harus selalu kita tuliskan onClipEvent. Dan jika objek kita
Gambar2.7
Langkah pertama menuliskan script
Kemudian langkah kedua kita klik kotak dialog action script (terletak
diatas kotak dialog properties). Kemudian tinggal kita tulis script kita.
17
Gambar2.8
sangat efisien dan sangat praktis. Karena hemat tempat, dan juga
telah di convert juga menjadi movie clip atau pun button ). Tinggal
kita kilk keyframe yang akan kita beri animasi. Di sini saya akan
Gambar 2.10
Cara untuk meload gambar dari luar flash tanpa harus dengan
import gmabar dulu adalah. Pertama kita save gambar pada folder
kita buat halaman baru kemudian kita pada menu toolbar diatas kita
kilk insert => new symbol atau ctrl+F8 kemudian pilih convert
to symbol. Nanti pada kotak libraries akan ada sebuah movie clip
kosong. Drag movie clip kosong yang ada di dalam kotak dialog
rumus
kita sukse atau tidak. Jika berhasil, maka akan muncul gambar yang
telah anda load tadi dari luar flash. Cara ini menguntungkan kita,
1.9.2 LoadVariables
gambar atau pun video, melainkan teks. Benar sekali, kita bisa
me-load teks dari luar flash kita, tujuannya juga sama yaitu untuk
properties, tepatnya di dalam baris line type kita ubah pilihan single
line menjadi multi line. Kemudian di dalam baris variabel kita isi
kan nama variabel ( nama variabel bebas ). Untuk contoh kita isi 21
nama variabel menjadi isi. Kemudian kita buat layer baru, di dalam
frame dari layer baru tadi kita tuliskan rumus di dalam nya. Tuliskan
saja : loadVariables(”isi1.txt”,_root).
Gambar 2.12
Line Type dan Variabel
dengan hasil pekerjaan kita. Cukup di dalam folder kita klik kanan
=> new => text document atau buka lembar notepad baru. Di dalam
tulis isi? Karena di dalam lemar kerja flash kita tadi kita mengisikan
Karena rumus di dalam frame flash kita tadi mengetikan rumus isi1.
txt. Setelah itu save notepad kita tadi di folder yang sama dengan
22 pekerjaan flash kita tadi. Kemudian kembali lagi di dalm flash kita,
2.10, maka kita siap untuk membuat minor projek dengan judul
MACROMEDIA FLASH 8.
24 BAB III
PEMBAHASAN
Pertama-tama sebelum kita membuat projek ini, pastikan kita sudah
mempunyai file-file semua yang kita butuh kan. Mulai dari file gambar,
MP3, dan juga file video. Semua file gambar , MP3, dan juga video dapat
dalam satu folder yang sama dengan pekerjaan file pekerjaan flash kita
player. Kita ubah size pada kotak dialog properties kita menjadi ukuran
800 x 600. Kemudian ubah juga warna background menjadi hitam dan
Pertama kita ubah nama layer pertama kita dengan nama dekorasi.
Kemudian kita import logo gambar hati greenday ke dalam lembar kerja
kita, terus kita tuliskan “GREEN DAY” menggunakan font arial black.
Tulisan green day ini kita klik kanan kemudian convert to symbol menjadi
grafik. Selanjutnya kita beri efek sedikit melalui kotak dialog filter. Kita
klik 2x pada tulisan green day, kemudian pastikan kita berada pada scene
1 => symbol1. Setelah itu kita masuk pada kotak dialog filter( berada di 25
samping kotak dialog properties). Kemudian klik satu kali pada tanda
+ , setelah itu pilih pilihan Gradient Glow. Setelah itu setting seperti
pentunjuk berikut.
Gambar 3.1
Setting Filter
langkah berikutnya kita klik gambar hati tersebur. Kita akan membuat
efek hati tersebut seperti berdetak. Langkah pertama kita klik gambar
hati tersebut, setelah itu kita convert to symbol menjadi movieclip dan
beri nama red_heart. Kemudian kita klik 2x pada gambar hati tersebut,
26 maka kita telah masuk pada sebuah movieclip. Pastikan diatas tertulis
scene1 => red_heart. Setelah itu kuat keyframe baru pada frame 10. Pada
free transform tool. Kemudian kita insert frame sampai frame 20 untuk
akan bergerak membesar dan mengecil. Kemudian tahan shift dan klik
pada gambar hati dan juga tulisan green day, kemudian pada kotak dialog
properties, pada kotak color-none, ganti dengan alpha dan turun kan
Gambar 3.2
Hasil Background 1
Kemudian kita buat layer baru dan beri nama dekorasi 2. Kita
isi kan dengan nama judul-judul lagu green day yang terkenal untuk
kan menjadi 19 %
.
Gambar 3.3
Hasil Background 2
tool. Buat kotak arah vertical dengan tinggi sekitar 484 dan lebar
sekitar 232 serta alpha 40%, dan letak kotak di sebelah pojok kiri
melepaskan klik kiri kita, kita tekan panah bawah untuk membuat
letakan di sebelah kiri atas dalam pada menu. Setelah itu seleksi
28 kotak dan juga text tadi, kemudian convert to moviecilp. Setelah
itu kembali lagi ke scene 1 dalam layer menu klik pada toolbar
playback sebagai wadah untuk MP3 kita nanti dan letak kan media
Gambar 3.4
Menu MP3 dan Media Playback
baru kita buat tadi. Klik 2x pada kotak menu untuk masuk pada
movieclip. Di sini kita akan membuat efek tampilan menu agar bisa
menutup dan membuka. Pertama kita buat layer baru dengan nama
mask. Buat sebuah rectangle kecil dan kita tutupksn pada menu.
Tinggi kotak lebihkan sedikit dari ukuran text playlist dan lebar
layermenu kita. Kemudian kilk kanan pada layer mask setelah itu
pilih MASK. Dan jangan lupa pada layer menu insert frame jjuga
Gambar 3.5
Masking pada Menu
Yang pertama kita akan membuat tombol untuk pilihan menu lagu-
30 lagu mp3. pertama kita buat layer baru. Beri nama tombol_M,
setelah itu buat sebuah kotak dengan alpha 49. setelah itu klik kotak
kemudian convert to button. Kemudian beri efek bevel. Masuk
kotak dialog filter, setelah itu pilih bevel. Kemudian copy tombol
tersebut muat dalam wadah menu tadi. Kemudian beri nama instance
paling atas dengan nama tombol 1 dan paling bawah dengan nama
mask dan di atas layer menu. Dan tambahkan pula frame pada layer
ke dalam lembar kerja kita, tapi ingat harus yang berbentuk gambar
gambar kita nanti menjadi button setelah itu convert lagi menjadi
movie clip. Jadi nanti di dalam movie clip ada button. Setelah itu
masuk ke dalam movie clip yang baru kita buat tadi. Kita di sini
play()
tombol kita sekali saja dan jangan lupa beri instance name Close_
on(release){
play()
on(rollOver){
_alpha = 50
32 }
on(rollOut){
_alpha = 100
mouse.
Gambar 3.7
lakukan membuat layer baru dengan nama teks. Setelah itu dengan
text tool kita buat dynamic text di atas tombol-tombol tersebut tadi.
Biar lebih cepat, buat dulu satu dynamic text di atas judul lagu
&song3=Green_Day_21st_Century_Breakdown_07_
Last_Night_O n_Earth_Album_Version_320.
&song4=Green_Day_21st_Century_Breakdown_04_
Viva_La_Gloria_Album_Version_320.mp3&jdl4=viva la
gloria
&song5=PM.mp3&jdl5=peace maker
&song6=Green_Day_21st_Century_Breakdown_11_
Murder_City_320.mp3&jdl6=murder city
(little girl)
&song8=Green_Day_21st_Century_Breakdown_06_
Christians_Inferno_320.mp3&jdl8=christian inferno
&song9=Green_Day_21st_Century_Breakdown_18_
ke scene 1, kita buat layer baru dan tempatkan pada paling atas, beri
adalal dynamic text maka tidak bisa di masukan pada efek masking.
Untuk mengakalinya, maka pada dynamic text tadi kita beri warna
text hitam.
Rumus
movieclip menu ini. Pertama dalam movie clip menu ini kita buat
lagi layer dan beri nama now. Dalam layer ini nanti berfungsi
text tool buat static text dengan tulisan ”now playing :”, langkah
kosong dengan variabel nama now. Itu semua masih belum selesai.
Gambar 3.8
Now Playing
Setelah itu buat layer baru beri nama script dan tempatkan
paling atas sendiri. Dari semua layer-layer yang ada pada movie
clip menu ini kita insert kan frame kosong sampai dengan frame 15. 35
Pada layer script ini kita buat sebuah keyframe pada frame 10 dan
juga 15. pada keyframe 10 dan 15 tadi kita tuliskan rumus stop( ).
Gambar 3.9
Susunan Layer pada movie clip menu.
kosong dan beri nama action dan tempatkan paling atas sendiri
dari semua layer-layer. Dan kita klik keyframe yang pertama dan
_root.playlist_mc.tes._visible=1
this.onEnterFrame = function() {
if (this._currentframe == 10) {
close_btn.onRelease = function() {
gotoAndPlay(11);
};
36 } else {
close_btn.onRelease = function() {
gotoAndPlay(1);
};
tombol1.onRelease = function(){
_root.dd._visible = 1;
_root.useHandCursor = false
_root.player.setMedia(song1)
now=jdl1
_root.playlist_mc.tes._visible=1
tombol2.onRelease = function(){
_root.dd._visible = 1;
_root.useHandCursor = false
_root.player.setMedia(song2)
now=jdl2
_root.playlist_mc.tes._visible=1
tombol3.onRelease = function(){
_root.dd._visible = 1;
_root.useHandCursor = false
_root.player.setMedia(song3) 37
now=jdl3
_root.playlist_mc.tes._visible=1
tombol4.onRelease = function(){
_root.dd._visible = 1;
_root.useHandCursor = false
_root.player.setMedia(song4)
now=jdl4
_root.playlist_mc.tes._visible=1
tombol5.onRelease = function(){
_root.dd._visible = 1;
_root.useHandCursor = false
_root.player.setMedia(song5)
now=jdl5
_root.playlist_mc.tes._visible=1
tombol6.onRelease = function(){
_root.dd._visible = 1;
_root.useHandCursor = false
_root.player.setMedia(song6)
38 now=jdl6
_root.playlist_mc.tes._visible=1
}
tombol7.onRelease = function(){
_root.dd._visible = 1;
_root.useHandCursor = false
_root.player.setMedia(song7)
now=jdl7
_root.playlist_mc.tes._visible=1
tombol8.onRelease = function(){
_root.dd._visible = 1;
_root.useHandCursor = false
_root.player.setMedia(song8)
now=jdl8
_root.playlist_mc.tes._visible=1
tombol9.onRelease = function(){
_root.dd._visible = 1;
_root.useHandCursor = false
_root.player.setMedia(song9)
now=jdl9
_root.playlist_mc.tes._visible=1 39
}
Maka selesailah tugas kita di movie clip menu ini. Di
sini tadi kita telah meload mp3 dan juga judul-judul lagu tadi. Dan
layer switch. Kemudian buat sebuah kotak yang sisinya tumpul dan
beri warna garis pada kotak tersebut menggunakan ink bottle tool. Lalu
Gambar 3.10
Tombol Switch
movie clip ini, selanjutnya tuliskan rumus tersebut dalam movie clip
button. Tuliskan rumus :
on(release){
40 _root.menu2._visible = 1;
_root.menu2.gotoAndPlay(2)
nextFrame()
layer tersebut dengan nama dd. Setelah itu buat sebuah kotak sebesar
tombol switch tadi, akan tetapi agk lebih besar sedikit di sisi kiri-
kanan dan juga atas tombol switch. Setelah itu convert menjadi button.
Selanjutnya masuk pada movie clip button tersebut. Setelah itu drag key
frame pada frame UP ke arah frame HIT. Itu nanti akan membuat kotak
berubah warna menjadi warna biru muda yang berarti tombol transparan.
Gambar 3.11
Efek Disabler
Ini nanti berfungsi sebagai penghalang ketika lagu atau video
menu 2. di dalam layer ini pertama kita buat dulu kotak menggunakan
button kemudian convert lagi menjadi movie clip, beri instance name
clip dengan nama Menu2. Setelah itu masuk pada button ini dan drag
Di sini nanti kita akan membuat efek disabler lagi seperti layer
sebelumnya. Setelah itu pastikan kita bekerja pada scene 1 => movieclip
1 => movieclip dengan nama bgd. Setelah itu buat layer baru
workspace kita pada layer tirai tadi. Gambar ini nanti bertujuan
Gambar 3.12
Tirai Gambar
Gambar 3.13
Gambar 3.14
tirai dan beri nama layer tersebut dengan nama tomv. Setelah itu
Gambar 3.15
Tombol Video
Pertama buat layer baru di atas layer tomv dan beri nama
MP3. setelah itu buat sebuah tombol switch seperti yang pernah
kita buat tadi. Akan tetapi ubah nama video dengan nama MP3 dan
Gambar 3.16
Buat sebuah layer baru dan beri nama action. Setelah itu
insert keyframe pada frame 25 dan juga 40. Kemudian kita masuk
rumus :
stop( );
_root.menu2.disabler.useHandCursor = false;
Stop ( )
_root.menu2._visible = 0;
kita, kemudian kita buat lagi sebuah layer baru dan beri nama
this.onEnterFrame = function() {
vid1.onRelease = function() {
_root.video._visible = 1;
46 _root.video.phideo.player.setMedia(”video/21
gun.flv”);
//trace(”Works!”)
};
vid2.onRelease = function() {
_root.video._visible = 1;
_root.video.phideo.player.setMedia(”video/21st
century breakdown.flv”);
};
vid3.onRelease = function() {
_root.video._visible = 1;
_root.video.phideo.player.setMedia(”video/
basket case.flv”);
};
vid4.onRelease = function() {
_root.video._visible = 1;
_root.video.phideo.player.setMedia(”video/geek
stink breath.flv”);
};
vid5.onRelease = function() {
_root.video._visible = 1;
_root.video.phideo.player.setMedia(”video/
hitchin’ a ride.flv”); 47
};
vid6.onRelease = function() {
_root.video._visible = 1;
_root.video.phideo.player.setMedia(”video/nice
};
vid7.onRelease = function() {
_root.video._visible = 1;
_root.video.phideo.player.setMedia(”video/
walking contradiction.flv”);
};
vid8.onRelease = function() {
_root.video._visible = 1;
_root.video.phideo.player.setMedia(”video/when
i come around.flv”);
};
vid9.onRelease = function() {
_root.video._visible = 1;
_root.video.phideo.player.setMedia(”video/stuck
with me.flv”);
};
48 };
Setelah itu insert frame pada layer-layer yang telah kita buat
tadi sampai frame 40
Gamabar 3.17
layer menu 2. Setelah itu beri nama layer dengan nama phideo kemudian
buat sebuah kotak dengan ukuran 800 x 109 dan tempatkan di bawah
ubah nama layer 1 menjadi dis dan kemudian masuk lagi pada movieclip
button ini. Dan drag dari frame UP ke HIT untuk memberi efek transparan,
Gambar 3.18
Pengaturan Disabler Video 49
Kemudian kita kembali pada moviclip yang pertama dan buat
sebuah layer baru di atas layer dis dan beri nama layer dengan nama
media. Selanjutnya pada layer media ini kita insertkan sebuah setmedia
dengan cara klik toolbar pada window dan klik component dan insert
media playback . Dan atur tempatnya sesuka anda. Setelah itu convert
media playback ini menjadi movieclip dan beri instance name dengan
nama phideo.
Setelah itu kita masuk pada movieclip phideo ini. Pertama kita ubah
nama layer 1 menjadi media. Setelah itu buat sebuah layer baru lagi
dengan nama tombol. Buat 2 buah kotak dan tempatkan di atas media
Gambar 3.19
convert satu persatu. Beri instance name pada tombol geser dengan nama
Kemudian klik tombol geser dan beri rumus di dalam tombol geser.
on(press){
on(release, releaseOutside){
stopDrag( );
on (release) {
player.setMedia(”kosong.flv”, ”FLV”);
_root.video._visible = 0;
kita nanti dan rumus untuk tombol geser tadi untuk menggeser-
geser video kita nanti. Maka selesailah pekerjaan kita pada layer
video ini. 51
1.7 Pembuatan Panel Kontrol
Langkah pertama ialah kita buat sebuah layer baru pada scene 1 dan
tempatkan di atas layer phideo dan beri nama layer dengan nama kontrol.
Setelah itu kita insertkan sebuah tombol dari Windows => common
libraries => button. Setelah itu pilih classic button dan pilih yang warna
merah agar serasi dengan warna design kita. Perlu di ingat, tanpa kita
meng-convert objek ini menjadi button, objek ini sudah berbentuk button.
Setelah itu tempatkan di sisi pojok kiri atas dan copy objek ini
menjadi dua. Dan tempatkan bersebelahan. Pada tombol yang kiri kita
movie clip sekali saja, setelah itu beri instance name dengan nama max_
full screen. Setelah itu buat layer baru di atasnya dan beri rumus di dalam
Setelah itu kita masuk ke movieclip yang kedua. Di sini kita buat
sebuah keyframe baru pada frame 2. Setelah itu pada button di keyframe
1 beri instance name dengan nama maxx, di sini kita buat sebuah kotak
Gambar 3.20
Tombol Maximaze
beri instance name dengan nama minn, setelah itu masuk pada objek.
Gambar 3.21
Tombol Maximaze
Setelah itu beri layer baru di movie clip 2 dan tambah kan rumus di
pada tombol yang kedua. Tombol ini nanti berfungsi sebagai close atau
penutup. Pertama kita masuk pada tombol ini dan tuliskan huruf x di
tombol close. Klik objek tersebut dan beri rumus pada objek. Beri rumus
: 53
on(release){
fscommand(”quit”, ””);
Gambar 3.22
Setelah itu atur lah kedua tombol seperti gambar di atas. Maka
1.8 Action
Ini adalah ini adalah tahap terakhir kita dalam pembuatan Minor
Pertama-tama kita buat sebuah layer pada scene satu dan tempatkan
di atas dari layer kontrol, beri nama layer dengan nama action. Setelah
itu klik frame dan kita beri kan rumus di dalam frame ini. Tuliskan rumus
berikut :
fscommand(”allowscale”, true);
54 fscommand(”trapallkeys”, true);
loadVariables(”list.txt”, _root.playlist_mc);
_root.menu2._visible = 0;
_root.menu2.disabler.useHandCursor = false;
_root.video._visible = 0;
_root.video.dis2.useHandCursor = false;
_root.dd._visible = 0
_root.dd.useHandCursor = false
pada komputer. Baris ketiga untuk me-load playlist MP3 kita. Baris
tombol disabler pada layer menu 2. baris keenam membuat aktif efek
tanda tangan pada tombol disabler pada layer video. Baris kedelapan
membuat efek visible pada tombol switch. Dan baris terakhir berfungsi
tombol switch.
PENUTUP
4.1 KESIMPULAN
yang berbentuk animasi yang selama ini saya pelajari. Mulai dari
di kembangkan seiring dengan proses trial and error yang kerap saya
hadapi nantinya.
4.2 SARAN
Unutk itu, saya sebgai penulis berharap kritik dan saran dari Bapak/Ibu
Akhir kata, jika ada kesalahan penulisan atau penggunaan kata, saya