MP3 Player Green Day

8/9/2019 MP3 Player Green Day

http://slidepdf.com/reader/full/mp3-player-green-day 1/56



ii SEKAPUR SIRIH

Puji syukur saya panjatkan yang sebesar-besarnya ke hadirat

Tuhan Yang Maha Esa atas karunia-nya yang di berikan saya, sehingga

saya dapat menyelesaikan karya tulis ilmiah “Mp3 Player GREEN DAY

Edition Menggunakan Macromedia ash 8 ” ini dengan tepat waktu untuk

memenuhi tugas mata kuliah Minor Project yang di berikan kepada saya.

Tak lupa juga saya mengucapkan terima kasih kepada dosen

pembimbing yaitu bapak Budi Luhur yang telah mengajarkan saya

berbagai hal ilmu tentang Macro Media Flash 8, sehingga saya dapat

menyelesaikan tugas ini. Dan juga ucapan terima kasih kepada bapak

Tomy Setiawan, selaku Kepala Pendidikan dan Pelatihan Adi Wahana

Informatika yang telah memberikan kesempatan kepada saya untuk

menunjukan ilmu-ilmu yang telah saya dapatkan selama ini di Adi

Wahana Informatika.

Karya Tulis Ilmiah tentang “Proses Pembuatan Mp3 Player

GREEN DAY Edition “ ini saya kemas dan sajikan berdasarkan ilmu-

ilmu yang telah diajarkan kepada saya, dengan format dan bahasa

sederhana namun sarat akan materi dan informasi, dilengkapi dengan

ilustrasi gambar yang menarik. Sehingga mudah untuk di pahami dan di

pelajari.

Kediri, Mei

2010





4



33BAB II

LANDASAN TEORI

2.1 Macromediaash8

Macromedia Flash merupakan sebuah program yang didesain

khusus oleh Macromedia, saat itu sebagai pengembangnya yang saat ini

sudah dibeli oleh Adobe Incorporated sehingga berubah nama menjadi

Adobe Flash, Flash didesain dengan kemapuan untuk membuat animasi

2 dimensi yang handal dan ringan sehingga ash banyak digunakan untuk

membangun dan memberikan efek animasi pada website, CD Interaktif

dan yang lainnya.

Gambar 2.1

Logomacromediaash8

Keunggulan yang dimiliki oleh Flash ini adalah ia mampu diberikan

sedikit code pemograman baik yang berjalan sendiri untuk mengatur

animasi yang ada didalamnya atau digunakan untuk berkomunikasi

dengan program lain seperti HTML, PHP, dan Database dengan

pendekatan XML.



44 2.2 AdobeFlash

Adobe Flash (dahulu bernama Macromedia Flash) adalah salah

satu perangkat lunak komputer yang merupakan produk unggulan Adobe

Systems. Adobe Flash digunakan untuk membuat gambar vektor maupun

animasi gambar tersebut. Berkas yang dihasilkan dari perangkat lunak

ini mempunyai fle extension .swf dan dapat diputar di penjelajah web

yang telah dipasangi Adobe Flash Player. Flash menggunakan bahasa

pemrograman bernama ActionScript yang muncul pertama kalinya pada

Flash 5.

Sebelum tahun 2005, Flash dirilis oleh Macromedia. Flash 1.0

diluncurkan pada tahun 1996 setelah Macromedia membeli program

animasi vektor bernama FutureSplash. Versi terakhir yang diluncurkan

di pasaran dengan menggunakan nama ‘Macromedia’ adalah adalah

Macromedia Flash 8. Pada tanggal 3 Desember 2005 Adobe Systems

mengakuisisi Macromedia dan seluruh produknya, sehingga nama

Macromedia Flash berubah menjadi Adobe Flash.

1.3 PengenalantentangMacromediaFlash8

Macromedia ash 8 banyak digunakan untuk membangun dan

memberikan efek animasi pada website, CD Interaktif dan yang lainnya.

Karena Flash didesain dengan kemapuan untuk membuat animasi 2

dimensi yang handal dan ringan sehingga cocok di gunakan untuk



55membuat animasi yang interaktif.

Macro media ash 8 juga salah satu aplikasi untuk pembuatan

animasi yang paling di gemari para animator untuk membuat animasi

yang ringan dan sederhana. Karena kemudahan- kemudahan untuk

mebuat animasi yang sederhan banyak di temukan di macromedia ash 8

ini. Selain sederhana dan mudah, macromedia ash 8 juga eksibel. Bisa

di gunakan untuk pembuatan iklan di website, pembuatan CD interaktif,

sampai pembuatan header pada website pun juga bisa di buat melalui

macromedia ash 8.

Gambar 2.2

Lembarkerjapadamacromediaash8

Gambar 2.2 adalah lembar kerja awal pada macromedia ash 8. Di

baris sebelah kiri adalah Tool, tempat untuk memilih alat-alat yang akan



66 di gunakan untuk mendesain, mengedit, sampai memilih warna untuk

objek animasi nanti.

Dan di sebelah tengah atas terdapat layer dan keyframe. Layer

berfungsi untuk tempat menggambar objek animasi, sednagkan keyframe

untuk mengatur animasi yang nanti nya di jalan kan.

Sebelah kanan sendiri terdapat library dan color. Fungsi library

untuk menampung objek yang telah di convert, atau pun objek yang di

import dari luar ash ( walaupun objek telah di hapus pada lembar kerja,

objek tetap ada di library). Fungsi color tentunya untuk memilih warna

yang tepat, sesuai selera.



771.4 Alat-AlatyangDigunakanpadaMacromediaFlash8

2.4.1 Alat-alatuntukmengeditobjekanimasi

Pick Tool Untuk memindah objek animasi

SubselectionTool

Untuk membuat lengkung garis / mengedit

garis

FreeTransformTool Untuk membesar dan mengecilkan objek

GradientTransform

Tool

Untuk memberi dan mengatur efek warna

gradasi

Line Tool Untuk menggambar garis

LassoTool Untuk menyeleksi objek

Pen Tool Untuk menggambar objek bebas

Text Tool Untuk menulis teks

Oval Tool Untuk menggambar lingkaran

Rectangel Tool Untuk menggambar kotak

PensilTool Untuk menggambar bebas



88

BrushTool Untuk mewarnai objek dengan bebas

Ink Bottle Tool Untuk memberi warna pada garis

Paint Bucket Tool Untuk memberi wrna pada objek

Eyedropper Tool Untuk mengambil warna dari objek lain

EraserTool Untuk menghapus objek

Hand Tool Untuk menggeser lembar kerja

Zoom Tool

Untuk mendekatkan dan menjauhkan objek/

fungsi zoom

Stroke Color Untuk memberi warna garis

Fill Color Untuk memberi warna isi / objek

1.1.2 Alat-alatuntukmengaturanimasi

Gambar 2.3



99LayerdanKeyframe

Gambar 2.3 menunjukan layer dan keyframe. Layer

berguna sebagai lembar kerja. Sedangkan keyframe berguna untuk

mengatur jalannya animasi. Sebagai contoh gambar diatas, layer 1

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

animasi objek break berjalan sampai frame 10. Layer 5 berarti

ada animasi yang berjalan sampai frame 10, dan jenis animasinya

adalah animasi objek group. Sedangkan pada layer 6 berarti ada

animasi dan objek, tetapi animasi tidak berjalan. Terlihat dari garis

putus-putus, yang berarti animasi tidak berjalan.

1.1.3 Kotak Dialog Library dan Color

Kotak dialog library berfungsi sebagai wadah menampung

obje yang telah di convert dan juga sebagai wadah untuk gambar

atau objek yang di import dari luar macromedia ash 8.



1010

Gambar 2.4

Kotak dialog library

Kotak dialog color berfungsi untuk mengatur warna yang

di pilih. Mulai dari warna solid, linear, dan juga warna radial. Dan

juga sebagai pengatur alpha pada warna.

Gambar 2.5

Kotak dialog color

1.5 PengaturanTweenAnimasi

Animasi yang terdapat dalam macromedia ash antara lain adalah



1111animasi yang menggunakan objek break dengan menggunakan tween

shape. Dan juga animasi menggunakan objek group dengan menggunakan

tween motion.

Jika didalam frame terdapat garis panah dengan background hijau,

itu menandakan animasi tersebut menggunakan objek break. Sedangkan

bila terdapat garis panah dengan background biru, itu menandakan animai

dengan objek group. Bila terdapat garis putus-putus dengan background

warna hijau atau pun biru, itu menandakan animasi tidak berjalan atau

salah. Sebagai contoh lihat gambar nomer 2.3 agar lebih jelasnya.

1.6 ImportObjekdariLuarFlash

Tidak semuanya harus di kerjakan menggunakan macromedia ash

8, terkadang kita juga mebutuhkan objek dari luar ash. Entah itu objek

gambar, atau pun sound ( suara, biasanya berupa mp3 ).

Mudah saja caranya tinggal klik le import, tinggal memilih import

to stage atau import to library. Jika ingin import to stage ada cara yang

cepat, tidak perlu klik le. Langsung saja tekan shortcut Ctrl+R.

Beda dari import to stage dengan import to library adalah jika

import to stage, objek akan langsung di tampilkan pada lembar kerja.

Sedangkan import to library, objek tidak akan langsung di tampilkan

pada lembar kerja atau layer, teatpi di tampung didalam library. Untuk

menampilkanya tinggal klik objek di dalam library, tinggal tahan geser

ke lembar kerja layer.



1212 Untuk menggunakan common libraries dan setmedia itu sangat

lah mudah. Anda tinggal meng-klik window pada menu toolbar yang

ada diatas. Setelah itu pilih common libraries. Common libraries ini

kegunaannya adalah untuk mengimport tombol atau gambar bawaan

yang telah di sediakan macromedia ash 8 kepada kita.

Sedangkan untuk import media atau setmedia, tinggal kita klik

window pada menu toolbar. Kemudian kita pilih components atau

shortcutnya kita gunakan CTRL+F7. Di situ nanti akan ada pilihan.

Antara lain :

• Data

• FLVPlayback-Player8

• FLVPlaybackCostumUI

• Media-Player 6-7

• UserInterface

Diantara pilihan-pilihan itu kita pilih Media-Player 6-7. kemudian

kita pilih yang Media playback.

Gambar 2.6Kotakdialogcomponents



13131.7 PenggunaanMovieClip,ButtondanGrak

Semua objek pada ash dapat di-convert menjadi Movie clip,

Button dan juga grak. Apakah fungsi dari ketiga nya tersebut ? disini

saya akan menjelaskannya satu persatu.

1.7.1 Movie Clip

Movie Clip adalah animasi yang terus berulang-ulang

didalam satu scene. Cara untuk membuat movie clip adalah dengan

cara klik objek yang akan di convert. Kemudian klik menu modify

pada toolbar, selanjutnya klik convert to symbol atau F8.

1.7.2 Button

Button adalah animasi tombol. Biasanya di gunakan untuk

sebuah aplikasi pada website atau pun untuk tombol-tombol yang

lainya. Cara untuk membuat Button adalah dengan cara klik objek

yang akan di convert. Kemudian klik menu modify pada toolbar,

selanjutnya klik convert to symbol atau F8.

1.7.3 Grak

Grak biasanya fokus untuk membuat desain atau mengedit

desain agar dapat lebih manos atau pin lebih bagus. Biasanya di

gunakan untuk mengedit teks agar dapat menjadi transparan atau

pun membuat efek-efek yang lainya. Cara untuk membuat Grak

adalah dengan cara klik objek yang akan di convert. Kemudian klik

menu modify pada toolbar, selanjutnya klik convert to symbol atau



1414 F8.

1.8 PenggunaanScriptDasar.

Script adalah rumus untuk menjalankan sebuah animasi. Dalam

sebuah animasi bisa juga di tambahkan script-script sederhana untuk

memudahkan dalam membuat animasi. Contohnya dalam mengatur

sebuah durasi, dari pada membuat animasi yang panjang pada keyframe,

lebih mudah kalau kita menggunakan atau menulis script pada animasi

kita.

Contohnya jika kita ingin membuat animasi awan berjalan. Kita

tidak perlu membuat keyframe-keyframe yang panjang pada animasi.

Agar lebih efektifnya, kita tulis saja script atau rumus didalam keyframe

pertama objek awan. Kita tulis rumusnya : onClipEvent (enterFrame)this._x -= 2;

if (this._x<(-202)) {

this._x = 820;

}

}

Rumus di atas sama halnya dengan menggerakan dari suatu keyframe

ke keyframe yang lainya, dan hal ini bisa menjadi alternatif yang bagus

untuk menghemat keyframe.

1.8.1 PenulisanScriptPadaObjek.



1515Dalam penempatan sebuah action script, alternatif yang

pertama kita dapat menempatkan script tersebut di dalam objek

yang akan kita animasikan. Bila kita menulisakn script pada objek

yang akan kita beri animasi,kita juga harus mengetahui aturan-

aturan yang ada agar animasi kita dapat berjalan dengan baik dan

benar.

Dan perlu di ingat bahwa penulisan script tidak bisa

menggunakan objek break atau pun group. Kita harus meng-convert

objek kita dulu menjadi movie clip, button , atau pun grak.Yang

sering di gunakan adalah movie cilp dan juga button.

Jika objek kita berbentuk movie clip, pada awal penulisan

script harus selalu kita tuliskan onClipEvent. Dan jika objek kita

berbentuk button, awalan penulisan script kita harus menuliskan

onRelease., atau yang lainya ( lihat di opsi pilihan waktu akan

menulisakan rumus setelah menuliskan on)



1616

Gambar2.7

Langkahpertamamenuliskanscript

Pada gambar diatas adalah langkah pertaa untuk menuliskan script.

Pertama kita klik objeknya(harus sampai muncul keterangan movie clip

atau button pada kotak dialog properties.

Kemudian langkah kedua kita klik kotak dialog action script (terletak

diatas kotak dialog properties). Kemudian tinggal kita tulis script kita.



1717

Gambar2.8

Langkahkeduamenuliskanscript

1.8.2 PenulisanScriptPadaObjek

Untuk menuliskan script pada keyframe, kita juga harus

mematuhi aturan-aturan juga agar animasi kita dapat berjalan

dengan lancar. Karena dalam penulisan script pada keyframe

aturannya sangat lah berbeda sekali dari penulisan script di dalam

objek itu sendiri, dan penulisan script pada keyframe tergolong

sangat esien dan sangat praktis. Karena hemat tempat, dan juga

mudah mendektesi script-script yang slah pada waktu pembuatan

nanti. Sangat di saran menuliskan script pada keyframe, akan tetapi

kembali lagi pada pembaca. Lebih suka menuliskan pada objek



1818 atau pada keyframe.

Seperti biasanya , pertama-tama kita buat dulu objek yang

ingin kita beri animasi. Bisa animasi berbentuk Movie clip atau pun

juga animasi berbentuk Button.

Langkah kedua, setelah kita membuat objek ( tentu saja

telah di convert juga menjadi movie clip atau pun button ). Tinggal

kita kilk keyframe yang akan kita beri animasi. Di sini saya akan

mencontohkan menulis rumus untuk menghentikan laju keyframe.

Didalam keyframe tadi tinggal kita tuliskan fungsi stop() .

Gambar 2.10

tandajikaadascriptdidalamkeyframe

Jika berhasil menuliskan script pada keyframe, aka muncul

lambang seperti huruf a. Itu berarti dalam keyframe ada rumus.

1.9 LoadMoviedanLoadVariables.

1.9.1 LoadMovie

Perintah loadMovie adalah perintah untuk me-load gambar

dan video dari luar ash, tanpa harus mengimport gambar dan video

tersebut di dalam macromedia ash 8. Tujuan meload gambar dari



1919luar ash ini adalah agar animasi kita nanti tidak jadi berat (lemot).

Di anjurkan le gambar atau video tersebut di simpan pada satu

folder yang sama dengan folder pekerjaan ash kita.

Cara untuk meload gambar dari luar ash tanpa harus dengan

import gmabar dulu adalah. Pertama kita save gambar pada folder

yang sama dengan pekerjaan ash kita. Kemudian di dalam

pekerjaan ash kita tadi tinggal kita buat scriptnya. Pertama-tama

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

libraries ke dalam lembar kerja ash kita.

Gambar2.11InstanceName



2020

Langkah selanjutnya beri nama instance name dengan nama

gbr. Kemudian di dalam frame kosong tadi tinggal kita ketik kan

rumus

Contoh : loadMovie(”born.jpg”, _root.gbr);

kemudian tekan crtl+ENTER untuk melihat apakah animasi

kita sukse atau tidak. Jika berhasil, maka akan muncul gambar yang

telah anda load tadi dari luar ash. Cara ini menguntungkan kita,

karena animasinya nanti tidak akan berat.

1.9.2 LoadVariables

Perintah Loadvariables sama halnya dengan perintah

LoadMovie, tetapi bedanya di sini adalah yang di load bukanlah

gambar atau pun video, melainkan teks. Benar sekali, kita bisa

me-load teks dari luar ash kita, tujuannya juga sama yaitu untuk

meringan pekerjaan kita dan juga terkesan praktis. Ini membuktikan

juga kalau macromedia ash 8 itu juga terkesan sangat eksibel.

Cara unutk me-load teks dari luar ash adalah, pertama-

tama kita bekerja di macromedia ash player. Di dalam ash kita

buat sebuah dynamic text kosong. kemudian didalam kotak dialog

properties, tepatnya di dalam baris line type kita ubah pilihan single

line menjadi multi line. Kemudian di dalam baris variabel kita isi



2121kan nama variabel ( nama variabel bebas ). Untuk contoh kita isi

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

Langkah pertama telah selesai kita selesaikan. Langkah

keduanya adalah kita buat sebuah .txt kosong di dalam satu folder

dengan hasil pekerjaan kita. Cukup di dalam folder kita klik kanan

=> new => text document atau buka lembar notepad baru. Di dalam

notepad itu kita tuliskan isi=ini adalah loadvariabel. Kenapa harus di

tulis isi? Karena di dalam lemar kerja ash kita tadi kita mengisikan

dalam baris variabel dengan nama variabel isi . Kemudian save

dengan nama isi1.txt.Kenapa menyimpan le dengan nama isi1?

Karena rumus di dalam frame ash kita tadi mengetikan rumus isi1.

txt. Setelah itu save notepad kita tadi di folder yang sama dengan



2222 pekerjaan ash kita tadi. Kemudian kembali lagi di dalm ash kita,

tekan ctrl+enter untuk mengetes apakah berhasil apa tidak. Jika

berhasil maka nanti akan ada tulisan ini adalah loadvariabel.

Dari semua penjelasan diatas, dari penjelasan bab 2.1 sampai

2.10, maka kita siap untuk membuat minor projek dengan judul

MP3 PLAYER “ GREEN DAY EDITION “ MENGGUNAKAN

MACROMEDIAFLASH8.



2424 BAB III

PEMBAHASAN

Pertama-tama sebelum kita membuat projek ini, pastikan kita sudahmempunyai le-le semua yang kita butuh kan. Mulai dari le gambar,

MP3, dan juga le video. Semua le gambar , MP3, dan juga video dapat

di cari di download di internet. Dan pastikan semuanya itu disimpan

dalam satu folder yang sama dengan pekerjaan le pekerjaan ash kita

nanti. Jika semua sudah di siapkan . mulailah kita membuat projek.

3.1 Pembuatan Background

Langkah pertama kita atur lembar kerja kita pada macromedia ash

player. Kita ubah size pada kotak dialog properties kita menjadi ukuran

800 x 600. Kemudian ubah juga warna background menjadi hitam dan

juga ubah frame rate dari 12 menjadi 25.

Langkah kedua, kita permanis background kita dengan membuat

dekorasi sederhana dengan bantuan perintah movieclip dan juga grak.

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

grak. Selanjutnya kita beri efek sedikit melalui kotak dialog lter. Kita

klik 2x pada tulisan green day, kemudian pastikan kita berada pada scene



25251 => symbol1. Setelah itu kita masuk pada kotak dialog lter( berada di

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

Selanjutnya kembali lagi ke scene 1, caranya tinggal klik scene

1. maka nanti dengan otomatis kita akan langsung berada di scene 1.

langkah berikutnya kita klik gambar hatitersebur. 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 namared_heart.Kemudian kita klik 2x pada gambar hati tersebut,



2626 maka kita telah masuk pada sebuah movieclip. Pastikan diatas tertulis

scene1 => red_heart. Setelah itu kuat keyframe baru pada frame 10. Pada

gambar di frame 10 kita perbesar sedikit gambarnya dengan menggunakan

freetransformtool. Kemudian kita insert frame sampai frame 20 untuk

memberi jeda. Kita tidak perlu menambahkan twenn motion apa-apa.

Selanjutnya tekan ctrl+enter untuk mengetes. Jika berhasil gambar hati

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

menjadi 26%. Maka pekerjaan di layer pertama ini telah selesai.

Gambar 3.2

HasilBackground1

Kemudian kita buat layer baru dan beri nama dekorasi 2. Kita

isi kan dengan nama judul-judul lagu green day yang terkenal untuk

mempermanis background dan pilihlah font chiller. Kemudian semua



2727teks pada layer dekorasi 2 tadi kita seleksi dan convert to grak dan beri

nama dk2. pada layer properties color diubah menjadi alpha dan turun

kan menjadi 19 %

.Gambar 3.3

HasilBackground2

1.2 Pembuatan Menu MP3 Player

3.2.1 Background Menu

Pada langkah ini akan terasa sangat rumit, jadi baca

petunjuk dengan seksama. Pertama kita buat layer baru dengan

nama menu. Setelah itu buat sebuah kotak menggunakan rectangle

tool. Buat kotak arah vertical dengan tinggi sekitar 484 dan lebar

sekitar 232 serta alpha 40%, dan letak kotak di sebelah pojok kiri

pada workspace. Saat kita membuat kotak usahakan sebelum kita

melepaskan klik kiri kita, kita tekan panah bawah untuk membuat

efek pinggir kotak membentuk sudut tumpul. Setelah itu gunakan

text tool tulis ”PLAYLIST” di dalam kotak menu, kemudian

letakan di sebelah kiri atas dalam pada menu. Setelah itu seleksi



2828 kotak dan juga text tadi, kemudian convert to moviecilp. Setelah

itu kembali lagi ke scene 1 dalam layer menu klik pada toolbar

window, kemudian pilih component. Kita insert kan media

playback sebagai wadah untuk MP3 kita nanti dan letak kan media

play back di tengah atas .

Gambar 3.4

Menu MP3 dan Media Playback

1.1.2 MaskingpadaMenu

Mulai sekarang kita akan bekerja di dalam movieclip yang

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

kotak juga agak di lebihkan dari sisi kanan dan kiri.



2929Setelah itu kita buat sebuah keyframe baru pada layer mask ,

ltak keyframe pada frame 10 serta frame 15 dan beri tween shape.

pada frame 10 tarik kotak tadi ke arah bawah sampai menutupi

seluruh bagian menu, dan pada keyframe 15 tidak usah diapa-

apakan. Biarkan begitu saja. Pastikanlayer mask berada pada atas

layermenu kita. Kemudian kilk kanan pada layer mask setelah itu

pilih MASK. Dan jangan lupa pada layer menu insert frame jjuga

sampai frame 15, itu untuk mengimbangi layer mask.

Gambar 3.5

MaskingpadaMenu

1.1.3 Membuat Tombol-Tombol pada Menu

Sekarang kita akan membuat tombol-tombol pada menu.

Yang pertama kita akan membuat tombol untuk pilihan menu lagu-



3030 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 lter, setelah itu pilih bevel. Kemudian copy tombol

tersebut kebawah sebanyak 9 buah. Pastikan tombol-tombol

tersebut muat dalam wadah menu tadi. Kemudian beri nama instance

name pada tombol paling atas dengan nama tombol 1, kemudian

selanjutnya beri nama instance name pada tombol-tombol yang lain

urut dengan nama tombol 2 sampai dengan tombol 9. jadi tombol

paling atas dengan nama tombol 1 dan paling bawah dengan nama

tombol 9. dan pastikan pula layer tombol _ M berada di bawah layer

mask dan di atas layer menu. Dan tambahkan pula frame pada layer

ini sampai frame 15.

Gambar 3.6 Tombol-Tombol pada Menu



3131Setelah itu semua selesai, mulai sekarang kita membuat

tombol pemicu untuk membuat layar menu menutup dan membuka.

Pertama-tama kita buat layer baru, beri nama tombol. Setelah itu

insert gamabar jantung yang seperti terdapat pada background tadi

ke dalam lembar kerja kita, tapi ingat harus yang berbentuk gambar

jangan yang sudah di convert movie clip. Setelah itu convert

gambar kita nanti menjadi button setelah itu convert lagi menjadi

movie clip. Jadi nanti di dalam movie clip ada button. Setelah itu

atur tempat tombol ini di samping teks playlist. Kemudian kita

masuk ke dalam movie clip yang baru kita buat tadi. Kita di sini

akan menuliskan rumus sederhana, klik tombol sekali. Setelah itu

masuk ke action. Kita tuliskan rumus : on(release){

play()

}

Setelah itu kembali lagi ke scene 1. kita klik movie clip

tombol kita sekali saja dan jangan lupa beri instance name Close_

btn . Kemudian masuk ke action tuliskan rumus berikut

on(release){

play()

}

on(rollOver){

_alpha = 50



3232 }

on(rollOut){

_alpha = 100

}

Itu untuk memberikan efek transparan waktu di lewati oleh

mouse.

Gambar 3.7

HasildariTombolPemicuMenu

1.1.4 MenyisipkanJudulLagudariLuarFlash

Kita akan menyisipkan judul lagu pada tombol 1 sampai

tombol 9 dengan perintah LoadVariables. Yang pertama kita

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

paling atas. Setelah itu tinggal di copy ke bawah semuanya. Setelah

itu beri nama variabel-variabel tersebut dengan nama jdl1 sampai

dengan jdl9. langkah selanjutnya kita masuk ke folder pekerjaan



3333kita. Buat text document baru. Di dalamnya kita tuliskan seperti

berikut : &song1=S O T C.mp3&jdl1=song of century

&song2=Green Day - K Y E.mp3&jdl2=know your enemy

&song3=Green_Day_21st_Century_Breakdown_07_

Last_Night_O n_Earth_Album_Version_320.

mp3&jdl3=last night on the earth


Viva_La_Gloria_Album_Version_320.mp3&jdl4=viva la

gloria

&song5=PM.mp3&jdl5=peace maker


Murder_City_320.mp3&jdl6=murder city

&song7=G D ~ 12. V L G (L G).mp3&jdl7=viva la gloria

(little girl)


Christians_Inferno_320.mp3&jdl8=christian inferno


See_The_Light_320.mp3&jdl9=see the light

Setelah itu save dengan nama list. Kemudian kita kembali

ke scene 1, kita buat layer baru dan tempatkan pada paling atas, beri

nama layer sciprt.Klik keyframe kemudian masuk ke dalam action

dan tuliskan rumus :



3434 loadVariables(”list.txt”,_root.playlist_mc);

Kemudian tekan ctrl+enter untuk melihatnya. Jika

berhasil akan muncul tulisan judul-judul lagu. Ingat karena ini

adalal dynamic text maka tidak bisa di masukan pada efek masking.

Untuk mengakalinya, maka pada dynamic text tadi kita beri warna

text hitam.

1.1.5 FinishingdariMovieclipMenudanPemberianRumus-

Rumus

Kita akan menyelesaikan pekerjaan kita yang terakhir pada

movieclip menu ini. Pertama dalam movie clip menu ini kita buat

lagi layer dan beri nama now. Dalam layer ini nanti berfungsi

untuk menunjukan lagu yang nantinya sedang Playing. Setelah itu

buat sebuah kotak transparan berwarna merah. Kemudian dengan

text tool buat static text dengan tulisan ”now playing :”, langkah

selanjutnya masih dengan text tool sekarang buat dynamic text

kosong dengan variabel nama now. Itu semua masih belum selesai.

Gambar3.8

Now Playing

Setelah itu buat layer baru beri nama script dan tempatkan

paling atas sendiri. Dari semua layer-layer yang ada pada movie



3535clip menu ini kita insert kan frame kosong sampai dengan frame 15.

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

SusunanLayerpadamovieclipmenu.

Sampailah sekarang kita pada nishing movie cilp menu ini,

yaitu memberi rumus-rumus. Pertama kita buat lagi sebuah layer

kosong dan beri nama action dan tempatkan paling atas sendiri

dari semua layer-layer. Dan kita klik keyframe yang pertama dan

masuk pada action. Di dalamnya kita tulis rumus-rumus berikut:

_root.playlist_mc.tes._visible=1

this.onEnterFrame = function() {

if (this._currentframe == 10) {

close_btn.onRelease = function() {

gotoAndPlay(11);

};



3636 } else {

close_btn.onRelease = function() {

gotoAndPlay(1);

};

}

tombol1.onRelease = function(){

_root.dd._visible = 1;

_root.useHandCursor = false

_root.player.setMedia(song1)

now=jdl1


}





now=jdl2


}






3737_root.player.setMedia(song3)

now=jdl3


}





now=jdl4


}





now=jdl5


}







3838 now=jdl6


}





now=jdl7


}





now=jdl8


}





now=jdl9



3939_root.playlist_mc.tes._visible=1

}

Maka selesailah tugas kita di movie clip menu ini. Di

sini tadi kita telah meload mp3 dan juga judul-judul lagu tadi. Dan

tekan ctrl+enter unutk mengecek hasil.

1.3 PembuatanTombolSwitch.

Pertama kita buat layer baru pada scene 1. setelah itu beri nama

layer switch.Kemudian buat sebuah kotak yang sisinya tumpul dan

beri warna garis pada kotak tersebut menggunakan ink bottle tool. Lalu

letakan di sebelah kiri bawah lembar workspace kita, kemudian dengan

teks tool tuliskan ”video” di dalam kotak tersebut

Gambar 3.10

TombolSwitch

Setelah jadi seperti gambar diatas, selanjutnya convert to button.

Selnjutnya convert lagi menjadi movie clip. Kemudian masuk pada

movie clip ini, selanjutnya tuliskan rumus tersebut dalam movie clip

button. Tuliskan rumus :

on(release){



4040 _root.menu2._visible = 1;

_root.menu2.gotoAndPlay(2)

nextFrame()

}

Setelah itu kembali lagi ke scene selanjutnya untuk

mengerjakan layer-layer berikutnya.

1.4 PembuatanEfekDisabler

Langkah pertama kita buat layer baru pada scene 1 dan beri nama

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 keyframe pada frame UP ke arah frame HIT. Itu nanti akan membuat kotak

berubah warna menjadi warna biru muda yang berarti tombol transparan.

Kemudian letakan tombol ini diatas tombol switch.

Gambar 3.11

EfekDisabler

Ini nanti berfungsi sebagai penghalang ketika lagu atau video

sedang playing, maka tidak aka bisa mengklik tombol ini.





4242

Gambar 3.12

Tirai Gambar

Setelah itu pada keyframe 20 perbesar kembali seperti

ukuran normal. Kemudian dengan teks tool pada keyframe 20

tuliskan teks seperti gambar berikut

Gambar 3.13

BackgroundTiraidanPlaylist

Aturlah playlist kita seperti gambar di atas supaya menarik.

Kemudian pada keyframe 1 sampai 20 beri tween motion. Dan

pada keyframe 20 sampai 30 jangan di beri tween. Selanjutnya pada

keyframe 40 kecilkan tirai tersebut sampai seperti pada keyframe 1.



4343itu nanti akan memberi efek membuka dan menutup tirai.

Gambar 3.14

SusunanLayerdanKeyframe

1.5.2 Pembuatan Tombol Menu Video

Langkah pertama kita buat sebuah layer baru di atas layer

tirai dan beri nama layer tersebut dengan nama tomv. Setelah itu

buat sebuah kotak dengan ukuran selebar judul-judul video. Setelah

itu convert to symbol menjadi button. Kemudian kita masuk ke

dalam tomv, setelah itu drag keyframe pada frame UP ke HIT.

Setelah itu copy tombol tersebut ke bawah sebanyak judul

lagu. Dan beri instance name pada tombol-tombol tersebut. Dengan

nama vid1-vid9 dan aturlah tombol-tombol tersebut di atas judul-

judul lagu tersebut



4444

Gambar 3.15

Tombol Video

1.5.3 TombolSwitchMP3

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

tempatkan persis diatas tombol switch VIDEO

Gambar 3.16

TombolSwitchMP3

Setelah itu convert objek tersebut menjadi button. Maka



4545tombol ini nanti berfungsi sama halnya dengan tombol switch

video.

1.5.4 Pembuatan Action Script.

Buat sebuah layer baru dan beri nama action. Setelah itu

insert keyframe pada frame 25 dan juga 40. Kemudian kita masuk

pada keyframe satu dan beri rumus pada keyframe 1. tuliskan

rumus :

stop( );

_root.menu2.disabler.useHandCursor = false;

Setelah itu kita menuju keyframe 25. dan di dalam keyframe

25 beri juga rumus seperti berikut :

Stop ( )

Dan juga rumus pada keyframe 40. Di alam keyframe 40

kita tuliskan rumus juga seperti berikut :

_root.menu2._visible = 0;

Dalam tahap ini kita sudah menyelesaikan sebagian rumus

kita, kemudian kita buat lagi sebuah layer baru dan beri nama

script.Kemudian kita tuliskan rumus pada keyframe 1.Tuliskan

rumus untuk me-load video:

this.onEnterFrame = function() {

vid1.onRelease = function() {

_root.video._visible = 1;



4646 _root.video.phideo.player.setMedia(”video/21

gun.v”);

//trace(”Works!”)

};



_root.video.phideo.player.setMedia(”video/21st

century breakdown.v”);

};



_root.video.phideo.player.setMedia(”video/

basket case.v”);

};



_root.video.phideo.player.setMedia(”video/geek

stink breath.v”);

};






4747hitchin’ a ride.v”);

};



_root.video.phideo.player.setMedia(”video/nice

guys nish last.v”);

};




walking contradiction.v”);

};



_root.video.phideo.player.setMedia(”video/when

i come around.v”);

};



_root.video.phideo.player.setMedia(”video/stuck

with me.v”);

};



4848 };

Setelah itu insert frame pada layer-layer yang telah kita buat

tadi sampai frame 40

Gamabar 3.17

SusunanLayerpadaMovieclipMenu2

1.6 Pembuatan Media Video

Pertama kita kembali pada scene 1. Kita buat layer baru di atas

layer menu 2. Setelah itu beri nama layer dengan nama phideo kemudian

buat sebuah kotak dengan ukuran 800 x 109 dan tempatkan di bawah

workspace kita, selanjutnya convert to button setelah itu convert lagi

menjadi movieclip. Selanjutnya kita masuk pada movieclip ini. Pertama

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,

setelah itu beri instance name dengan nama dis2.

Gambar3.18



4949PengaturanDisablerVideo

Kemudian kita kembali pada moviclip yang pertama dan buat

sebuah layer baru di atas layer disdan 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

aturlah sebagai berikut

Gambar 3.19

Tampilan Media Untuk Video



5050 Selanjutnya kita convert masing-masing tombol. Yang pertama

convert tombol geser menjadi button. Setalah itu convert tombol x

menjadi button juga, tapi ingat jangan di convert bersamaan tetapi di

convert satu persatu. Beri instance name pada tombol geser dengan nama

geserdan tombol x dengan nama closed.

Kemudian klik tombol geser dan beri rumus di dalam tombol geser.

Tuliskan rumus berikut ini :

on(press){

startDrag(this, false, -163.6, -80, 163.4, 149);

}

on(release, releaseOutside){

stopDrag( );

}

Selanjutnya klik tombol x dan beri rumus di dalamnya.

Tuliskan rumus berikut :

on (release) {

player.setMedia(”kosong.v”, ”FLV”);


}

Rumus ini nanti akan berfungsi untuk meng-close video

kita nanti dan rumus untuk tombol geser tadi untuk menggeser-

geser video kita nanti. Maka selesailah pekerjaan kita pada layer



5151video ini.

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

convert menjadi movieclip sebanyak 2 x. Setelah itu kita masuk pada

movie clip sekali saja, setelah itu beri instance name dengan nama max_

btn. Tombol ini berfungsi untuk memperbesar tampilan layar menjadi

full screen. Setelah itu buat layer baru di atasnya dan beri rumus di dalam

frame dengan rumus stop ( ).

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

dan tempatkan di tengah tombol.



5252

Gambar 3.20

Tombol Maximaze

Kemudian kembali lagi pada movieclip kedua. Pada keyframe 2

beri instance name dengan nama minn, setelah itu masuk pada objek.

Kemudian buat kotak sebanyak 2 x dan bertumpuk

Gambar 3.21

Tombol Maximaze

Setelah itu beri layer baru di movie clip 2 dan tambah kan rumus di

dalam frame dengan rumus stop ( ).

Kemudain kita kembali pada scene 1 dan sekarang kita mengerjakan

pada tombol yang kedua. Tombol ini nanti berfungsi sebagai close atau

penutup. Pertama kita masuk pada tombol ini dan tuliskan huruf x di

tengahnya sebagai lambang bahwa tombol ini nantinya berfungsi sebagai

tombol close. Klik objek tersebut dan beri rumus pada objek. Beri rumus



5353:

on(release){

fscommand(”quit”, ””);

}

Gambar 3.22

TombolMaximazedaClose

Setelah itu atur lah kedua tombol seperti gambar di atas. Maka

selesailah kita pada layer kontrol ini.

1.8 Action

Ini adalah ini adalah tahap terakhir kita dalam pembuatan Minor

ini. Dan tahap ini dapat juga di sebut tahap nishing.

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);



5454 fscommand(”trapallkeys”, true);

loadVariables(”list.txt”, _root.playlist_mc);

_root.menu2._visible = 0;

_root.menu2.disabler.useHandCursor = false;


_root.video.dis2.useHandCursor = false;

_root.dd._visible = 0

_root.dd.useHandCursor = false

Pada baris satu itu rumus berfungsi untuk membuat fullscreen

tampilan. Baris kedua berisi rumus untuk menon-aktifkan tombol esc

pada komputer. Baris ketiga untuk me-load playlist MP3 kita. Baris

keempat membuat efek disabler pada layer menu 2 berfungsi. Baris

kelima membuat efek menghilangkan tanda tangan jika melewati sebuah

tombol disabler pada layer menu 2. baris keenam membuat aktif efek

visible pada layer video. Baris ketujuh membuat efek menghilangkan

tanda tangan pada tombol disabler pada layer video. Baris kedelapan

membuat efek visible pada tombol switch. Dan baris terakhir berfungsi

memberi efek menghilangkan tanda tangan pada tombol disabler pada

tombol switch.

Maka selesailah kita dalam pembuatan minor projek ini. Dan

kemudian tekan ctrl+enter untuk memastikan bahwa pekerjaan kita

benar-benar telah sempurna. Selamat mengerjakan.



5555BAB IV

PENUTUP

4.1 KESIMPULAN

Penjelasan singkat di atas merupakan garis besar pemograman

yang berbentuk animasi yang selama ini saya pelajari. Mulai dari

pondasi sampai membangun sebuah animasi yang menurut saya masih

sangat sederhana. Pengembangan dan hasil yang maksimal dapat terus

di kembangkan seiring dengan proses trial and error yang kerap saya

hadapi nantinya.

4.2 SARAN

Harapan ke depan, makalah ini dapat membantu generasi berikutnya

yang ingin memperdalam pemrogaman dengan animasi atau sebagai

refrensi pengajaran. Namun saya yakin, makalah ini masih memiliki

banyak kekurangan, masih banyak penulisan kata-kata yang kurang pas.

Unutk itu, saya sebgai penulis berharap kritik dan saran dari Bapak/Ibu

Dosen dan rekan-rekan mahasiswa sebagai sarana ilmu dan pengalaman.

Akhir kata, jika ada kesalahan penulisan atau penggunaan kata, saya

mohon maaf yang sebesar-besarnya. Maju terus Adi Wahan Informatika.

Terima kasih.

Documents

MP3 Player Green Day