LAPORAN PERANCANGAN APLIKASI

MULTIMEDIA
“PENGENALAN DASAR TOOL FLASH”
disusun untuk memenuhi tugas
Mata Kuliah Multimedia

Disusun oleh:

Lalu Panji Ihza Mahendra

17112402

Jurusan Teknik Informatika

STT STIKMA Internasional

Jl. Simpang Sulfat Utara No.20

2019
 DAFTAR ISI

COVER ....................................................................................... 1
DAFTAR ISI ............................................................................... 2
KATA PENGANTAR ................................................................ 3
BAB I PENDAHULUAN .............................................................

A. Latar Belakang ..........................................................

B. Identifikasi Masalah .................................................
C. Sasaran Pengguna .....................................................
D. Batasan Masalah .......................................................
E. Deskripsi Aplikasi ....................................................

BAB II STUDI KELAYAKAN ....................................................

A. Komponen Biaya dan Manfaat..................................

B. Analisis Biaya dan Manfaat ......................................

BAB III PERANCANGAN SISTEM............................................

BAB IV PERANCANGAN APLIKASI .......................................

A. Flowchart ..................................................................
B. Perancangan Isi .........................................................
C. Skenario Perancangan Frame....................................
D. Skenario Perancangan ActionScript .........................

BAB V PERANCANGAN GRAFIK.............................................

BAB VI PRODUKSI ....................................................................

H a l 2 | 33
 KATA PENGANTAR

Segala puji dan syukur penulis aturkan kepada sang Kholiq yang tak pernah letih
ataupun tidur dalam mengurus semua makhluk-Nya yang berada di langit maupun
di bumi. Dialah Allah SWT, tuhan semesta alam dengan kekuasaan yang meliputi
langit beserta isinya dan bumi beserta isinya pula. Dengan rahmat dan kasih
sayang-Nya, maka penulis dapat menyelesaikan makalah mengenai Aplikasi
Multimedia yang tentunya masih jauh dari kata sempurna ini.

Shalawat serta salam penulis sanjungkan kepada makhluk paling mulia di muka
bumi ini. Makhluk yang diutus untuk menyempurnakan akhlak seluruh manusia di
bumi. Dialah baginda besar, rasul agung, Rasulullah SAW. Semoga syafaat beliau
senantiasa tercurah kepada para umatnya yang setia mengikuti jejaknya sampai
akhir hayat nanti. Serta shalawat untuk keluarga beliau dan sahabat-sahabat
beliau.

Penulis juga berharap bahwa apa yang sudah penulis tulis dapat bermanfaat bagi
teman-teman pembaca dalam memperoleh pengetahuan tentang Aplikasi
Multimedia. Dan jika ada masukan, sekiranya tak segan untuk menambahkan
supaya penulis dapat memperbaiki kesalahan dan kekurangan dalam makalah ini.

H a l 3 | 33
 BAB I

PENDAHULUAN

1.1 Latar Belakang

Adobe Flash merupakan sebuah program yang didesain khusus oleh Adobe
dan program aplikasi standar authoring tool professional yang digunakan
untuk membuat animasi dan bitmap yang sangat menarik untuk keperluan
pembangunan situs web yang interaktif dan dinamis.

Flash didesain dengan kemampuan untuk membuat animasi 2 dimensi yang

handal dan ringan sehingga flash banyak digunakan untuk membangun dan
memberikan efek animasi pada website, CD Interaktif dan yang lainnya.
Selain itu aplikasi ini juga dapat digunakan untuk membuat animasi logo,
movie, game, pembuatan navigasi pada situs web, tombol animasi, banner,
menu interaktif, interaktif form isian, e-card, screen saver dan pembuatan
aplikasi-aplikasi web lainnya. Dalam Flash, terdapat teknik-teknik membuat
animasi, fasilitas action script, filter, custom easing dan dapat memasukkan
video lengkap dengan fasilitas playback FLV.

Pada saat ini sangat dibutuhkan media pembelajaran bagi siswa/i yang
dapat mempermudah pelajar dalam memahami suatu materi pembelajaran
disekolah dengan cepat dan tepat. Dengan memberikan suatu pembelajaran
menggunakan animasi maka dapat mempermudah pelajar mencerna materi
pembelajaran yang dibawakan oleh guru. Selain siswa, guru juga mengalami
kesulitan diantara-Nya keterbatasan waktu dalam menyampaikan materi yang
cukup banyak, dan kurangnya ketertarikan siswa pada pelajaran apabila
menggunakan metode pembelajaran konvensional. Maka dari itu dalam proses
pembelajaran harus lebih menarik, lebih interaktif dan menyenangkan
sehingga membuat pelajar gemar akan belajar dan menerima pelajaran dari
guru dengan mudah.

Untuk itu diperlukan solusi untuk mengatasi masalah tersebut sehingga

diharapkan dapat meningkatkan minat belajar dan prestasi belajar siswa

H a l 4 | 33
 pada pelajaran. Menurut Djamerah dan Zain (1996:136, Dalam: Arif,
2008) dalam kegiatan belajar mengajar ketidakjelasan bahan yang
disampaikan dapat dibantu dengan menghadirkan media sebagai perantara.
Kerumitan bahan pelajaran dapat disederhanakan dengan bantuan media,
karena media dapat mewakili apa yang kurang mampu guru sampaikan
melalui kata-kata atau kalimat. Melihat hal itu penulis ingin merancang suatu
media pembelajaran yang dapat membantu pelajar dalam menerima materi
pembelajaran dengan mudah, cepat dan tepat.
1.2 Identifikasi Masalah
1. Bagaimana memudahkan siswa untuk mengenali tools dasar yang ada
di aplikasi flash dengan multimedia?
2. Bagaimana membangun aplikasi yang dapat memudahkan siswa untuk
mengenali tools dasar pada flash?
1.3 Sasaran Pengguna
Saat ini Teknologi Informasi sudah diajarkan sejak bangku SMP bahkan SD,
salah satu dari yang diajarkan adalah aplikasi flash, mungkin sebagian siswa
sudah mengenali akan namanya teknologi akan tetapi masih asing dengan
Namanya Adobe Flash dan manfaatnya dan cara penggunaannya, dengan
pembuatan aplikasi ini diharapkan para siswa SMP lebih mudah mengenali
akan penggunaan flash, dengan mulai mengenali tools dasarnya.
1.4 Batasan Masalah
Dalam perancangan media pembelajaran berbasis adobe flash ini dilakukan
beberapa Batasan sebagai berikut :
1. Media yang digunakan dalam merancang pada suatu materi
pembelajaran yaitu menggunakan Adobe Flash CC Professional 2015
2. Media pembelajaran ini berfokus pada suatu materi pembelajaran yaitu
hanya tools dasar, tidak semua tools ditampilkan
1.5 Konsep Aplikasi

Aplikasi ini dibuat dengan media Adobe Flash CC Professional 2015, di mana
aplikasi ini bertujuan untuk memudahkan siswa agar mengenali tools dasar
pada flash, keunikan dari aplikasi ini adalah menyimulasikan Windows login
yang dimulai dari memasukkan password yang diberi saat membeli aplikasi

H a l 5 | 33
 ini, setelah memasuki password yang benar, frame selanjutnya adalah mirip
seperti tampilan desktop Windows dengan wallpaper hitam, di desktop ini
ditampilkan 3 “Shortcut” yakni sebagai menu yang ditampilkan, pertama
adalah komputer, di sini akan menuju frame di mana identitas kreator
ditampilkan. Menu kedua adalah menu Adobe Flash, dengan shortcut flash
yang ada pada umumnya, ketika user memilih menu ini user akan ditampilkan
simulasi flash, versi flash yang digunakan adalah Adobe Flash CS6, baik
mulai dari loading screennya hingga main UI-nya, dan dengan
menyederhanakan UI-nya, hanya menampilkan toolnya saja, sedangkan menu
dan properties bar dihilangkan untuk memaksimalkan fungsionalitas sistem.
Pada tool yang disediakan, saat kursor dalam keadaan over tool akan
menampilkan nama dari tool tersebut, sedangkan bila user mengekliknya akan
muncul fungsi dari tool tersebut ditambah dengan contoh penggunaannya
dalam bentuk video. Pada menu ketiga adalah menu kuis, di sini user akan
diberi pertanyaan dan diberi multiple choice, yang nanti akan diberi skor untuk
jawaban yang benar.

BAB II

STUDI KELAYAKAN

2.1 Komponen Biaya

Biaya yang berhubungan dengan pembuatan sistem ini dapat diklasifikasikan
ke dalam 3 kategori utama yaitu:
1. Biaya pengadaan (procurement cost), yaitu biaya pembelian perangkat
keras, biaya ini digunakan pada awal pembuatan sistem, sebelum
sistem dioperasikan.
2. Biaya Pengembangan, yaitu biaya pembuatan perangkat lunak sistem
yang meliputi biaya konsultasi, biaya tahap analisa sistem, biaya tahap
desain sistem dan biaya tahap penerapan sistem. dikeluarkan untuk
menjalankan sistem, yaitu biaya overhead, biaya perawatan terhadap
perangkat keras dan perangkat lunak.

H a l 6 | 33
 3. Biaya operasi dan biaya perawatan, yaitu biaya yang dikeluarkan untuk
menjalankan sistem, yaitu biaya overhead, biaya perawatan terhadap
perangkat keras dan perangkat lunak

2.2 Komponen Manfaat

Manfaat yang didapatkan dari sistem informasi diklasifikasikan sebagai
berikut:
1. Keuntungan berwujud (tangible benefit) adalah keuntungan yang
berupa penghematan atau peningkatan di dalam administrasi yang
dapat diukur dalam bentuk satuan nilai uang. Keuntungan berwujud
antara lain:
a. Pengurangan biaya operasi
b. Pengurangan biaya lembur
c. Pengurangan biaya perlengkapan
2. Keuntungan tak berwujud (intangible benefit), adalah keuntungan yang
sulit atau tidak mungkin diukur dalam bentuk satuan uang.
Keuntungan tersebut antara lain:
a. Keandalan dan ketersediaan sistem
b. Peningkatan efektivitas pegawai dan akademiknya
c. Peningkatan kepuasan mahasiswa, dosen, dan pegawainya
2.3 Analisis Biaya dan Manfaat
1. Nilai Investasi

i. Biaya Operasional

No Uraian Tarif (Rp)

1 Biaya device 7.000.000
2 Biaya konsultasi 200.000
3 Biaya tahap Analisa sistem 100.000
4 Biaya tahap desain sistem 50.000
5 Biaya tahap penerapan sistem 200.000
6 Biaya perawatan 100.000
Jumlah 7.650.000

H a l 7 | 33
 ii. Penentuan Harga Pokok Penjualan (HPP)
Asumsi dalam penghasilan produksi per bulan adalah 20
pemesanan.
HPP = Rp 7.650.000/12 = Rp 637.500, -/ Bulan
= Rp 637.500/20 = Rp 31.875, -/ Pesanan

2. Metode Periode Pengembalian (Payback Period)

Metode ini adalah uji kuantitatif yang digunakan untuk menghitung
jangka waktu yang diperlukan untuk membayar kembali biaya
investasi dalam pembuatan aplikasi yang telah dikeluarkan.
i. Layak jika waktu pengembalian lebih kecil dari umur
investasi
ii. Tidak layak jika waktu pengembalian lebih besar dari umur
investasi

Perhitungan PP:

Lama investasi 1 tahun.

Penetapan Harga = Rp 50.000, -

Nilai Investasi = Rp 7.650.000, -

Proses tahun 1 = Rp 24.525.000, -

PP = 7.650.000/24.525.000

= 0.31 x 12 bulan

PP = kurang lebih 3,7 bulan (Layak)

3. Metode Pengembalian Investasi (Return on Investment)

Keuntungan per pesanan = Rp 100.000 – Rp 31.875
= Rp 68.125
Keuntungan per bulan = Rp 68.125 x 20

H a l 8 | 33
 = Rp 2.043.750
Keuntungan per tahun = Rp 2.043.750 x 12
= Rp 24.525.000
Pengembalian Investasi = (24.525.000/7.650.000) x 100%
= 320,58 %
ROI sebesar 320,58% berarti dari setiap pengeluaran biaya sebesar Rp
1 maka kana menghasilkan penerimaan sebesar Rp 3.205,8

BAB III

PERANCANGAN SISTEM

3.1 Perancangan Isi

Materi isi yang digunakan dalam media pembelajaran ini berfokus hanya pada
tools yang ada di aplikasi Adobe Flash CS6, tidak jauh beda dengan tools
Adobe Flash versi yang lain, dari segi pembelajaran Teknologi Informasi
Komputer tools pada Adobe Flash dibagi menjadi tools dasar dan advanced, di
sini sistem menghadirkan tools dasar sebagai bahan materinya, beberapa tools
yang disediakan antara lain:
1. Selection Tool
2. Subselection Tool
3. Line Tool
4. Pen Tool
5. Pencil Tool
6. Shape Tool
7. Text Tool
8. Zoom Tool
9. Bucket Shape Tool
10. Eraser Tool
11. Free Transform Tool
12. Brush Tool
13. Lasso Tool

H a l 9 | 33
Perancangan multimedia interaktif ini akan diisi dengan beberapa elemen,
antara lain gambar, suara, teks, animasi dan video. Gambar yang digunakan
adalah salah satunya workspace dan splash screen yang ada pada Adobe Flash
CS6 agar menyamakan dengan ada yang di Adobe Flash aslinya, tidak lupa
dengan komponen terpenting yakni gambar ikon tools yang ada di Adobe
Flash, sedangkan suara yang digunakan ada pada tombol dan animasi awal
dari login windows, beberapa preview dari gambar yang digunakan antara lain

Gambar 1. Gambar Icon Tools

Gambar 2 Workspace Gambar 3 Icon Adobe Flash

Elemen video digunakan saat pengguna memilih tool, kanvas yang awalnya hanya
kosong putih, menampilkan contoh penggunaan dari tool tersebut, semisal
pengguna memilih tool selection tool akan muncul video yang memperlihatkan
fungsi dari tool selection tool, preview bahan video yang digunakan:

Gambar 4 Video Materi

H a l 10 | 33
 Teks digunakkan untuk menjelaskan fungsi tool yang dipilih semisal pengguna
memilih tool selection tool akan muncul teks yang menerangkan fungsi tool
selection, salah satu preview teks yang digunakan dalam sistem ini antara lain:

Gambar 5 Teks Selection Tool

Gambar 6 Teks Subselection Tool

3.2 Kelayakan Materi

Elemen-elemen yang digunakan di dalam sistem multimedia ini, dibuat sangat
sederhana agar lebih memfokuskan ke tujuan pembelajaran dan agar lebih
mengakrabkan ke Adobe Flash, aplikasi multimedia ini dibuat semirip
mungkin dengan yang aslinya, dengan ini para pengguna yang baru mengenal
Adobe Flash seperti siswa siswi SMP, merasa nyaman dengan kebutuhannya
dalam mengetahui kegunaan dari tools yang ada di Adobe Flash.

BAB IV

PERANCANGAN APLIKASI

4.1 Flowchart
Flowchart proses memilih menu Adobe Flash:

H a l 11 | 33
 Flowchart 1. Flowchart Menu Adobe Flash

Flowchart proses menu kuis:

Flowchart 2. Flowchart Kuis

4.2 Perancangan Naskah

Dalam merancang sebuah naskah penyusunan harus menetapkan urutan
elemen-elemen secara rinci. Merancang naskah merupakan spesifikasi lengkap

H a l 12 | 33
dari teks dan narasi dalam aplikasi multimedia. Naskah digunakan untuk
memberikan keterangan pada objek dan memberikan kemudahan pada
pengguna.
Untuk bagian halaman Adobe Flash:
1. Selection tool
“Selection Tool berfungsi untuk memilih atau menyeleksi suatu
objek.”
2. Subselection tool
“Subselection Tool berfungsi untuk menyeleksi objek dengan lebih
detail daripada selection tool.”
3. Free transform tool
“Free Transform, untuk memperbesar atau memperkecil ukuran objek
secara proporsional maupun tidak. Hanya saja ini tidak bias mengubah
titik di ujung garis suatu objek.”
4. Lasso tool
“Lasso Tool, untuk memotong objek dengan freehand (bebas).”
5. Pen tool
“Pen Tool, untuk membuat objek baru dengan metode pen, yaitu
membuat satu titik kemudian dihubungkan dengan titik yang lain.”
6. Text tool
“Text Tool, untuk membuat objek berupa teks, pilih tool kemudian
klik pada stage dan buat tulisan sesuai keinginan.”
7. Line tool
“Line Tool, untuk membuat sebuah garis lurus, dengan mengeklik di
satu titik, kemudian drag ke arah titik berikutnya.”
8. Shape tool
“Shape Tool digunakan untuk menggambar bentuk seperti persegi dan
lingkaran.”
9. Brush tool
“Brush Tool digunakan untuk membuat objek secara freehand dengan
warna fill.”
10. Paint bucket tool

H a l 13 | 33
 “Paint Bucket Tool, untuk mewarnai fill pada objek.”
11. Pencil tool
“Pencil Tool, untuk membuat objek secara freehand.”
12. Eraser tool
“Eraser Tool, untuk menghapus objek, pastikan objek berupa titik-titik
atau belum digrup.”
13. Zoom tool
“Zoom Tool, untuk memperbesar dan memperkecil tampilan stage.”

4.3 Perancangan Frame

Perancangan aplikasi multimedia interaktif ini dimulai dari perancangan login,
yang dibuat agar mirip dengan login operating system, tahap perancangannya
antara lain:
1. Mulai dari frame 1 – 30 merupakan frame untuk animasi logo
Microsoft, yang sebelumnya logo Microsoft dikonversi menjadi simbol
movieclip dan diberi motion tween. Pada frame 1 sudah terdapat 4-
layer yaitu layer background, logo, password dan button. Dari frame 1
juga sudah ditampilkan teks input dan tombol login.
2. Pada frame 30, di mana frame stop dan menunggu pengguna
memasukkan password yang benar sehingga apabila tombol login
diklik akan pindah ke frame selanjutnya, di layer background frame 30
terdapat teks yang ter-hidden, teks ini akan muncul apabila pengguna
salah memasukkan password, pada frame 31, di mana ini merupakan
frame untuk desktop alias di mana menu dari aplikasi ini tersedia,
dengan menyimulasikan desktop pada komputer, menu yang tersedia
di tampilkan seperti shortcut yang ada di desktop, pada frame 31 ketika
memilih menu shortcut Adobe Flash, frame akan pindah ke frame 41,
saat ini ditambah layer animasi untuk splash screen Adobe Flash.
3. Pada frame 41 adalah awal di mana splash screen Adobe Flash mulai,
splash screen berakhir di frame 150 dan di antara frame tersebut
terdapat 3 keyframe, setelah frame 150 yaitu frame 151 – 160

H a l 14 | 33
 komponen layer animasi dihapus untuk merealistiskan saat pengguna
membuka flash pada umumnya.
4. Pada frame 161, di sini halaman Adobe Flash terbuka, pada layer
background diganti dengan Screenshot workspace dari Adobe Flash
CS6, ditambah bagian toolnya dihapus dan diganti dengan icon yang
dikonversi menjadi button dan diberikan ke layer button dan juga pada
layer button diberikan button close pada halaman Adobe Flash,
sedangkan bagian kanvasnya diganti dengan timeline awal, di kanvas
ini akan ditempati video dan teks fungsi dari tools. Pada frame ini
ditambah video untuk komponen videonya, video di aplikasi ini
menggunakan metode streaming untuk menampilkan medianya
5. Ketika pengguna mengeklik tool selection tool akan beralih ke frame
162, frame ini khusus untuk keyframe tool selection tool
6. Ketika pengguna mengeklik tool subselection tool akan beralih ke
frame 163, frame ini khusus untuk keyframe tool subselection tool
7. Ketika pengguna mengeklik tool free transfrom tool akan beralih ke
frame 164, frame ini khusus untuk keyframe tool free transform tool
8. Ketika pengguna mengeklik tool lasso tool akan beralih ke frame 165,
frame ini khusus untuk keyframe tool lasso tool
9. Ketika pengguna mengeklik tool pen tool akan beralih ke frame 166,
frame ini khusus untuk keyframe tool pen tool
10. Ketika pengguna mengeklik tool text tool akan beralih ke frame 167,
frame ini khusus untuk keyframe tool text tool
11. Ketika pengguna mengeklik tool line tool akan beralih ke frame 168,
frame ini khusus untuk keyframe tool line tool
12. Ketika pengguna mengeklik tool shape tool akan beralih ke frame 169,
frame ini khusus untuk keyframe tool shape tool
13. Ketika pengguna mengeklik tool brush tool akan beralih ke frame 170,
frame ini khusus untuk keyframe tool brush tool
14. Ketika pengguna mengeklik tool paint bucket tool akan beralih ke
frame 171, frame ini khusus untuk keyframe tool paint tool

H a l 15 | 33
 15. Ketika pengguna mengeklik tool pencil tool akan beralih ke frame 172,
frame ini khusus untuk keyframe tool pencil tool
16. Ketika pengguna mengeklik tool eraser tool akan beralih ke frame 173,
frame ini khusus untuk keyframe tool eraser tool
17. Ketika pengguna mengeklik tool zoom tool akan beralih ke frame 174,
frame ini khusus untuk keyframe tool zoom tool
18. Untuk frame 175 digunakan ketika pengguna memilih menu komputer
di desktop, frame ini memperkenalkan sang kreator

BAB V

PERANCANGAN GRAFIK

Perancangan grafik dilakukan untuk membuat kerangka yang akan digunakan

untuk menampilkan aplikasi program. Di sini akan dimasukkan suara, gambar,
dan animasi yang digabungkan menjadi satu. Desain multimedia interaktif
dirancang dengan menggunakan Adobe Flash CS6, sedangkan background dan
pengeditan gambar-gambar menggunakan Adobe Photoshop CC 2019, CorelDraw
2019, dan Adobe XD 2019. Berikut adalah rancangan aplikasinya:

Gambar 7 Skema Login

Keterangan:

H a l 16 | 33
Logo, logo di sini menggunakan logo Microsoft, diberi animasi unik dari kecil
hingga besar, seperti animasi zoom. Background, background hanya diberi hitam
pekat, untuk menampilkan tulisan eror dengan jelas, keterangan lain:

1 : Input field teks untuk menginput password

2 : Tombol login dengan warna dasar yang cerah yakni biru muda dan
dikombinasikan dengan tulisan putih, ujung dari tombol ditumpulkan
untuk menambah nilai desain
3 : Tulisan kesalahan password yang berwarna merah dengan font dibuat
lebih besar dari font yang digunakan

Gambar 8 Skema Desktop

Keterangan:

Wallpaper yang digunakan adalah Microsoft, menyesuaikan dengan ada yang di

halaman login. Splash screen yakni layar yang ditampilkan sambir menunggu
proses tampilan utama muncul, seperti biasanya di Adobe Flash atau aplikasi lain,
menggunakan splash screen Adobe Flash CS6 yang terlihat bagus. Taskbar
merupakan replika dari taskbar yang ada di desktop komputer. Keterangan lain:

1 : Tombol shortcut Komputer

2 : Tombol shortcut Adobe Flash, dengan ikon Adobe Flash
3 : Tombol shortcut Kuis Adobe

H a l 17 | 33
 Gambar 9. Skema Kredit

Keterangan:

Teks Credit, yaitu kredit pembuatan aplikasi, diketik dengan font arial. Biodata
Kreator biodata kreator aplikasi, diketik dengan font arial. Produk, logo produk
yang terkesan biasa, tanpa memasukkan konsep desain. Foto, foto sang kreator.

Gambar 10 Skema Adobe Flash

H a l 18 | 33
Keterangan:

Background, workspace yang ada di Adobe Flash CS6, untuk fungsi realistis.
Kanvas, kanvas putih yang biasa kita buat saat membuat proyek baru, yang nanti
akan diisi oleh video dan teks, karena itu diberi warna putih untuk memfokuskan
konten. Video contoh, Video streamer yang digunakan untuk menjadi media
pemutaran video. Teks fungsi, teks yang muncul untuk masing-masing tool.
Background frame, Frame editor yang ada di Adobe Flash, untuk fungsi realistis,
keterangan lain:

1 : Tombol 1-13, tombol untuk tool yang sudah dijabarkan di Rancangan

Naskah, sudah sesuai dengan urutan
2 : Tombol 14, tombol untuk menutup Adobe Flash, seperti pada umumnya
menggunakan warna merah

BAB VI

PRODUKSI

Proses produksi mengacu pada pembuatan komponen utama yaitu media interaktif
yang disertai teks, gambar, video, audio, animasi dan lain lain. Proses pembuatan
ini dimulai dengan perancangan background, tombol, teks, alur, dan game berupa
kuis. Proses terakhir yaiut penyelesaian dengan perancangan dan pembuatan
kemasan dan pengemasan dari komponen-komponen utama yang dibuat.

1. Pembuatan Login
Buatlah kanvas dengan ukuran 550 x 400 untuk stage utama, beri
background hitam, langkah awal adalah membuat 4 layer, masing-masing
untuk layer background, logo, password, dan button

H a l 19 | 33
 Gambar 11

Pada frame pertama pada layer logo tambahkan tombol login seperti ini

Gambar 12

Gambar 13

Lalu Jadikan simbol button, lalu beri nama pada properties-nya, lalu
muncul frame up, over, down, dan hit, keempatnya diberi keyframe dapat
dilakukan dengan menekan f6, pada keyframe over diganti gambar dengan
button dan teks diberi warna kebalikannya.
Pada keyframe down ambil gambar dari keyframe over, tetapi lebih
dikecilkan ukurannya dengan menjaga rationya, sedangkan pada keyframe
hit diberi gambar sama seperti pada keyframe up. Untuk layer logo diberi
logo microsoft dan dikonversi menjadi movieclip, pada frame 1 dikecilkan
gambar sampai sangat kecil untuk dilihat mata, lalu pada frame 30 beri
keyframe tetapi logo tadi dibesarkan sesuai keinginan hasil akhir

Gambar 14

Untuk ActionScript-nya pada background frame 30 kode nya

H a l 20 | 33
 1. stop();  
2. var pass:String;  

Untuk ActionScriptnya login, pada button login action frame 30 masukan

kode seperti ini

1. btn_login.addEventListener(MouseEvent.CLICK, fl_ClickToGoToNextFrame
);  
2.   
3. function fl_ClickToGoToNextFrame(event:MouseEvent):void  
4. { 
5.      
6.     if (password.text == "YourPassword"){ 
7.         nextFrame(); 
8.     }  
9. }  

4. Pembuatan Dekstop
Buatlah 3 layer baru, masing-masing layer video, taskbar, dan animasi
pada desktop ini layer background diberi 3 button yaitu

Gambar 15

Tampilan awal dari Halaman desktop seperti ini

Gambar 16

Button untuk komputer, Adobe Flash, dan Game kuis tiap button diberi
efek up over down hit seperti pada button login tadi, tetapi pada over

H a l 21 | 33
 hanya diberi layer baru untuk kotak transparan seperti pada desktop pada
umumnya

Gambar 17

Pada frame 31 ini, untuk ActionScript-nya seperti ini

3. flash_btn.addEventListener(MouseEvent.CLICK, fl_ClickToGoToAndPlayFro
mFrame);  
4.   
5. function fl_ClickToGoToAndPlayFromFrame(event:MouseEvent):void  
6. { 
7.     gotoAndPlay(32); 
8. }  
9.   
10. pc_btn.addEventListener(MouseEvent.CLICK, fl_ClickToGoToAndStopAtFram
e_18);  
11.   
12. function fl_ClickToGoToAndStopAtFrame_18(event:MouseEvent):void  
13. { 
14.     gotoAndStop(175); 
15. }  
16.   
17. quiz_btn.addEventListener(MouseEvent.CLICK, fl_ClickToGoToAndStopAtFr
ame_22);  
18.   
19. function fl_ClickToGoToAndStopAtFrame_22(event:MouseEvent):void  
20. { 
21.     gotoAndStop(176); 
22. }  

5. Pembuatan Halaman Komputer

Pada frame 175 diberikan teks indeks, teks biodata, logo produk, foto
creator dan untuk background diambil dari screenshot pada computer 
properties. Button close diberi gambar “x” dengan warna abu dan over
merah

H a l 22 | 33
 Gambar 18

Tampilan Halaman komputer seperti ini

Gambar 19

6. Pembuatan Halaman Adobe

Mulai dari frame 161, halaman Adobe Flash terbuka, untuk background
diberi gambar dari screenhot dari Adobe Flash, pada layer button dan
frame ini dihapus button sebelumnya dan diberi tool lalu dikonversi
menjadi button, tool sesuai urutan dari atas ke bawah. Pada layer animasi
masukkan keyframe untuk memasukkan gambar pengenalan di kanvas.

H a l 23 | 33
 Gambar 20

ActionScript pada frame 161 merupakan kumpulan route untuk tool ke

framenya masing masing, kode ActionScript-nya seperti ini

1. closeflash.addEventListener(MouseEvent.CLICK, fl_ClickToGoToAndStopAtF
rame_3);  
2.   
3. function fl_ClickToGoToAndStopAtFrame_3(event:MouseEvent):void  
4. { 
5.     gotoAndStop(31); 
6. }  
7.   
8. selection.addEventListener(MouseEvent.CLICK, fl_ClickToGoToAndStopAtFr
ame_4);  
9.   
10. function fl_ClickToGoToAndStopAtFrame_4(event:MouseEvent):void  
11. { 
12.     gotoAndStop(162); 
13. }  
14.   
15. subselection.addEventListener(MouseEvent.CLICK, fl_ClickToGoToAndStop
AtFrame_5);  
16.   
17. function fl_ClickToGoToAndStopAtFrame_5(event:MouseEvent):void  
18. { 
19.     gotoAndStop(163); 
20. }  
21.   
22. freetransform.addEventListener(MouseEvent.CLICK, fl_ClickToGoToAndSto
pAtFrame_6);  
23.   
24. function fl_ClickToGoToAndStopAtFrame_6(event:MouseEvent):void  
25. { 
26.     gotoAndStop(164); 
27. }  
28.   
29. lasso.addEventListener(MouseEvent.CLICK, fl_ClickToGoToAndStopAtFrame
_7);  
30.   
31. function fl_ClickToGoToAndStopAtFrame_7(event:MouseEvent):void  

H a l 24 | 33
32. { 
33.     gotoAndStop(165); 
34. }  
35.   
36. pen.addEventListener(MouseEvent.CLICK, fl_ClickToGoToAndStopAtFrame_8
);  
37.   
38. function fl_ClickToGoToAndStopAtFrame_8(event:MouseEvent):void  
39. { 
40.     gotoAndStop(166); 
41. }  
42.   
43. text.addEventListener(MouseEvent.CLICK, fl_ClickToGoToAndStopAtFrame_
9);  
44.   
45. function fl_ClickToGoToAndStopAtFrame_9(event:MouseEvent):void  
46. { 
47.     gotoAndStop(167); 
48. }  
49.   
50. line.addEventListener(MouseEvent.CLICK, fl_ClickToGoToAndStopAtFrame_
10);  
51.   
52. function fl_ClickToGoToAndStopAtFrame_10(event:MouseEvent):void  
53. { 
54.     gotoAndStop(168); 
55. }  
56.   
57. shape.addEventListener(MouseEvent.CLICK, fl_ClickToGoToAndStopAtFrame
_11);  
58.   
59. function fl_ClickToGoToAndStopAtFrame_11(event:MouseEvent):void  
60. { 
61.     gotoAndStop(169); 
62. }  
63.   
64. brush.addEventListener(MouseEvent.CLICK, fl_ClickToGoToAndStopAtFrame
_12);  
65.   
66. function fl_ClickToGoToAndStopAtFrame_12(event:MouseEvent):void  
67. { 
68.     gotoAndStop(170); 
69. }  
70.   
71. bucket.addEventListener(MouseEvent.CLICK, fl_ClickToGoToAndStopAtFram
e_13);  
72.   
73. function fl_ClickToGoToAndStopAtFrame_13(event:MouseEvent):void  
74. { 
75.     gotoAndStop(171); 
76. }  
77.   
78. pencil.addEventListener(MouseEvent.CLICK, fl_ClickToGoToAndStopAtFram
e_14);  
79.   
80. function fl_ClickToGoToAndStopAtFrame_14(event:MouseEvent):void  
81. { 
82.     gotoAndStop(172); 
83. }  
84.   
85. eraser.addEventListener(MouseEvent.CLICK, fl_ClickToGoToAndStopAtFram
e_15);  
86.   

H a l 25 | 33
87. function fl_ClickToGoToAndStopAtFrame_15(event:MouseEvent):void  
88. { 
89.     gotoAndStop(173); 
90. }  
91.   
92. zoom.addEventListener(MouseEvent.CLICK, fl_ClickToGoToAndStopAtFrame_
16);  
93.   
94. function fl_ClickToGoToAndStopAtFrame_16(event:MouseEvent):void  
95. { 
96.     gotoAndStop(174); 
97. }  

Pada frame 162-174 adalah frame untuk tool, mulai dari tool selection
pada frame 162 di layer video tambahkan video streamer untuk sebagai
wadah video, video streamer dapat dimasukkand dengan cara File 
Import  Import Video, lalu pilih file path dan pilih video yang akan
diimport, pastikan formatnya mp4.

Gambar 21

Di layer animasi, gambar sebelumnya dihilangkan dan dimasukkan teks

fungsi untuk tiap tool

H a l 26 | 33
 Gambar 22

Gambar 23

Lakukan sampai frame 174 hingga tool semua telah memiliki frame
sendiri dan sesuai dengan route-nya.

H a l 27 | 33
7. Pembuatan Halaman Kuis

Kuis dimulai dari frame 176 yang melibatkan 2 layer yaitu button dan
background, background yang digunakkan seperti ini

Tampilan awal dari kuis Adobe Flash seperti ini

Gambar 24

Gambar 25

Komponen yang ada disini adalah button enter, button close dan text input
untuk nama pengguna. Button enter dan close diberikan efek over down
hit sama seperti sebelumnya. Pada frame ini juga diinisialisasi variable
string dan number untuk nama dan poin

1. var nama:String;  
2. var poin:Number=0;  

pada layer selanjutnnya halaman soal dimulai sampai frame 185 dengan
tiap frame diberi kode pada ActionScript

H a l 28 | 33
namaout.text=nama;  

untuk menampilkan nama user yang telah disetor ke variable nama, dan
tidak lupa untuk memberi stop () pada tiap frame background, untuk
ActionScriptnya

1. /* Click to Go to Next Frame and Stop  
2. Clicking on the specified symbol instance moves the playhead to the n
ext frame and stops the movie.  
3. */  
4.   
5. a.addEventListener(MouseEvent.CLICK, fl_ClickToGoToNextFrame_3);  
6.   
7. function fl_ClickToGoToNextFrame_3(event:MouseEvent):void  
8. { 
9.     nextFrame(); 
10.     poin +=20; 
11.     text_point.text=poin.toString(); 
12. }/* Click to Go to Next Frame and Stop  
13. Clicking on the specified symbol instance moves the playhead to the n
ext frame and stops the movie.  
14. */  
15.   
16. b.addEventListener(MouseEvent.CLICK, fl_ClickToGoToNextFrame_4);  
17.   
18. function fl_ClickToGoToNextFrame_4(event:MouseEvent):void  
19. { 
20.     nextFrame(); 
21.     text_point.text=poin.toString(); 
22. }/* Click to Go to Next Frame and Stop  
23. Clicking on the specified symbol instance moves the playhead to the n
ext frame and stops the movie.  
24. */  
25.   
26. c.addEventListener(MouseEvent.CLICK, fl_ClickToGoToNextFrame_5);  
27.   
28. function fl_ClickToGoToNextFrame_5(event:MouseEvent):void  
29. { 
30.     nextFrame(); 
31.     text_point.text=poin.toString(); 
32. }/* Click to Go to Next Frame and Stop  
33. Clicking on the specified symbol instance moves the playhead to the n
ext frame and stops the movie.  
34. */  
35.   
36. d.addEventListener(MouseEvent.CLICK, fl_ClickToGoToNextFrame_6);  
37.   
38. function fl_ClickToGoToNextFrame_6(event:MouseEvent):void  
39. { 
40.     nextFrame(); 
41.     text_point.text=poin.toString(); 
42. }  

H a l 29 | 33
Pada layer background dimasukkan gambar background text dinamis
untuk nama, dan teks dinamis untuk skor, skor dimulai dari 0 apabila
menjawab soal dengan benar akan mendapat skor 20 dengan maksimal
100 poin , pada soal pertama tentang selection tool tampilannya seperti ini

Gambar 26

Tiap jawaban adalah button, diberi efek over down hit

Gambar 27

Setelah pengguna memilih jawaban, stage akan pindah ke frame

selanjutnya yaitu frame dimana jawaban akan muncul, tampilannya seperti
ini

H a l 30 | 33
 Gambar 28

Tombol next agar lanjut ke soal berikutnya,

Setelah semua soal dijawab, stage akan otomatis ke halaman skor

H a l 31 | 33
 Gambar 29

Skor yang tadi didapatkan akan ditampilkan di halaman ini, apabila

mengeklik back akan mengulang kuis, bila mengeklik close akan menuju
desktop ActionScript-nya seperti ini

1. back.addEventListener(MouseEvent.CLICK, fl_ClickToGoToAndStopAtFrame_
19);  
2.   
3. function fl_ClickToGoToAndStopAtFrame_19(event:MouseEvent):void  
4. { 
5.     gotoAndStop(176); 
6. }/* Click to Go to Frame and Stop  
7. Clicking on the specified symbol instance moves the playhead to the s
pecified frame in the timeline and stops the movie.  
8. Can be used on the main timeline or on movie clip timelines.  
9.   
10. Instructions:  
11. 1. Replace the number 5 in the code below with the frame number you w
ould like the playhead to move to when the symbol instance is clicked
.  
12. */  
13.   
14. close.addEventListener(MouseEvent.CLICK, fl_ClickToGoToAndStopAtFrame
_21);  
15.   
16. function fl_ClickToGoToAndStopAtFrame_21(event:MouseEvent):void  
17. { 
18.     gotoAndStop(31); 
19. }  

BAB VII
KESIMPULAN DAN SARAN

7.1 Setelah melalui beberapa tahapan dalam menyelesaikan aplikasi media

pembelajaran kuis berbasis Adobe Flash ini dapat disimpulkan bahwa :

H a l 32 | 33
 1. Aplikasi Multimedia Pengenalan Tool Dasar Flash berhasil dibuat
2. Aplikasi Multimedia Pengenalan Tool Dasar Flash layak untuk
dikembangkan
3. Aplikasi Multimedia Pengenalan Tool Dasar Flash dapat
digunakan sebagai alternative pembelajaran computer terutama
yang menyajikan materi prakter animasi flash, aplikasi ini akan
memudahkan pengenalan terhadap flash
7.2 Pada penulisan laporan ini tentu masih terdapat kekurangan yang dapat
disempurnakan lagi pada pengembangan selanjutnya, agar aplikasi ini
dapat menjadi lebih sempurna, terdapat beberapa saran yang dapat
dipergunakan diantaranya
1. Interface yang dibuat pada aplikasi ini masih sederhana berbasis
teks, gambar, dan audio bisa ditambahkan elemen animasi supaya
setiap soal dapat lebih jelas lewat dengan animasi yang dibuat.
2. Aplikasi di tambahkan dengan fitur gambar 3 dimensi.
3. Materi yang disediakan masih materi komputer, sehingga perlu
media penyimpanan untuk memuat informasi yang lebih banyak
lagi.
4. Aplikasi yang dikembangkan lebih lanjut diharapkan bisa di akses
lewat internet dan setiap hasil yang didapat bisa dikirim secara
otomatis di E-Mail Masing-masing (*dalam mengerjakan kuis
harus terhubung dengan jaringan internet).
5. Dan yang lebih baik lagi jika bisa diakses dengan menggunakan
android, sehingga gampang dibawa kemana-mana.

H a l 33 | 33