BAB IV IMPLEMENTASI DAN ANALISA
F. Aplikasi Desain Halaman
1. Halaman Intro
Ini adalah tampilan awal dari aplikasi ini. Di halaman ini terdapat animasi – animasi yang mengilustrasikan tentang pembuatan aplikasi ini. Karena hanya berisi animasi, maka diperlukan storyboard sebagai rancangan awal.
commit to user
s
commit to user
2. Halaman Intro 2
Dihalaman ini logo tepat berada di tengah, dimana logo ini merupakan gabungan dari beberapa elemen yang membentuk menjadi sebuah logo dan judul yang menarik. Di bawah logo terdapat tombol enter yang menghubungkan dengan halaman menu utama.
commit to user
3. Halaman Menu Utama
Pada halaman ini terdapat judul dan juga tombol exit di sebelah kanan atas yang berguna untuk keluar dari aplikasi. Di halaman ini juga terdapat 6 tombol bab yang menghubungkan dengan halaman – halaman isi.
Gambar 3.5 Desain Halaman Menu Utama
4. Halaman Isi
Halaman isi mempunyai 6 halaman yang setiap halaman mempunyai layout yang sama. Terdapat judul dan sub judul yang berguna untuk mengetahui dimana pengunjung berada. Di setiap halaman isi terdapat 6 tombol isi atau sub content yang mempunyai isi yang berbeda – beda.
Diatas tombol isi tersebut terdapat juga tombol prev untuk kembali ke halaman sebelumnya dan tombol next untuk maju ke halaman selanjutnya. Selain itu dibawah tombol isi terdapat tombol home untuk kembali ke halaman menu dan tombol exit untuk keluar dari aplikasi.
commit to user
commit to user
23 BAB IV
IMPLEMENTASI DAN ANALISA
A. Membuat Draft Aplikasi
Hal yang dilakukan sebelum pembuatan aplikasi ini adalah membuat ide cerita atau storyboard, yaitu istilah untuk kertas berisi ide cerita, susunan gambar serta detail dari setiap karakter. Ide cerita yang digunakan penulis dalam aplikasi ini adalah background berwarna hitam , dengan logo kamera yang menginterpretasikan bahwa aplikasi ini memang pembelajaran Fotografi. Selain itu dilengkapi tulisan untuk judul media pembelajaran fotografi.
B. Pembuatan Aplikasi Multimedia
Untuk pembuatan aplikasi ini menggunakan Adobe Flash CS3 dengan memasukkan semua elemen yang dibutuhkan seperti gambar, teks, suara, dan
video. Proses pembuatan dan editing obyek gambar menggunakan Adobe
Photoshop CS3. Perekaman video menggunakan Handycame, sedangkan untuk
editvideonya menggunakan Sony Vegas Pro 10.0 .
Pembuatan animasi pada aplikasi ini bertujuan untuk mempercantik tampilan aplikasi yang dibuat. Dalam pembuatan aplikasi media pembelajaran fotografi ini, penulis menggunakan scene agar penggabungan antar halaman lebih mudah. Buku yang dijadikan referensi penulis untuk membuat aplikasi ini adalah buku karangan Andi Sunyoto ( Adobe Flash = XML = Rich Multimedia
Application, 2010 )
Materi – materi atau isi yang ada dalam CD interaktif diambil dari 2 sumber, yaitu dari wawancara dan juga dari studi pustaka. Untuk studi pustaka, buku yang dijadikan acuan adalah buku karangan Enche Tjin ( Kamera DSLR itu Mudah, 2010) dan buku karangan Deniek G Sukarya ( Kiat Sukses Deniek G. Sukarya, 2010)
commit to user
1. Pembuatan Halaman Intro
Halaman intro dalam aplikasi ini sangat sederhana, hanya menampilkan animasi gerak yang hasil akhirnya membentuk sebuah tulisan nama dari pembuat aplikasi ini. Langkah pertama adalah melakukan import elemen – elemen yang telah dibuat sebelumnya pada pembuatan draft aplikasi dengan memilih File–ImportToLibrary.
Setelah itu meletakkan segala macam elemen sesuai dengan draft rancangan dan kemudian menganimasikannya. Animasi pada halaman intro
ini tidak terlalu rumit, yaitu menggunakan motion tween, dari kiri ke kanan ataupun sebaliknya. Untuk mempercantik tampilan, maka pembuatan elemen sebelumnya dibuat menggunakan Adobe Photoshop.
Gambar 4.1 Pembuatan Halaman Intro Awal
Untuk mempercantik transisi ke menu utama, ditambahkan animasi fade out pada tulisan tersebut. Pada akhir frame animasi tulisan ditambahkan
46 frame lagi. Di akhir frame tambahan tersebut, ditambahkan color
properties di bagian atas. Kemudian memberikan isi Alpha dengan kapasitas
commit to user
Setelah itu, animasi akan menuju ke bagian movie clip dimana movie clip tersebut didalamnya memuat beberapa animasi – animasi elemen, judul, dan juga tombol enter untuk masuk ke dalam halaman menu utama. Pada halaman ini juga di iringi dengan sound yang lembut dan dilengkapi dengan tombol exit di sebelah kanan atas yang berfungsi untuk keluar dari aplikasi.
Gambar 4.2 Pembuatan Halaman Intro Akhir
Agar tombol enter dapat berinteraksi ke halaman menu utama maka perlu diberi actionscript pada tombol tersebut. Berikut adalah actionscript
untuk tombol enter :
on (release) {
loadMovieNum("menu.swf", 0); }
Kemudian pada tombol exit juga diberikan actionscript , dimana ketika tombol exit ditekan maka akan secara langsung keluar dari aplikasi. Berikut
actionscript untuk tombol exit :
on(release){
fscommand("quit"); }
commit to user
2. Pembuatan Halaman Menu Utama
Halaman menu utama ini terdapat tombol-tombol utama dari aplikasi ini, yaitu tombol BAB 1, BAB 2, BAB 3, BAB 4, BAB 5, dan juga BAB 6 yang berinteraksi pada halaman isi. Pada halaman ini terdapat animasi logo lensa yang muncul dari kecil kemudian membesar. Pembuatannya menggunakan motion tween dan menambahkan rotate CW pada panel
properties sebanyak 1 kali.
Setelah itu akan muncul animasi dari garis menu dari belakang logo. Animasi dibuat menggunakan elemen garis yang sebelumnya dibuat menggunakan Adobe Photoshop CS3 dan dibuat animasi menggunakan
motion tween. Kemudian tombol menu utama muncul berurutan tepat di atas
garis menu. Tombol menu juga dibuat dengan menggunakan motion tween
dengan sedikit tambahan fade in.
Fade in dibuat dengan menggunakan tools alpha. Di frame awal, tombol dibuat transparent dengan memberikan nilai alpha 0 dan di akhir
frame tombol dikembalikan dengan memberikan nilai alpha 100. Tombol
menu utama ada 6 buah, sesuai dengan halaman isi yang terdiri dari 5 halaman materi dan 1 halaman kuisioner.
Tombol menu utama inilah yang akan berinteraksi dengan halaman isi. Untuk dapat berinteraksi dengan halaman isi, maka perlu di beri actionscript
sesuai dengan halaman yang dituju. Berikut ini adalah actionscriptnya : on (release) {
loadMovieNum("bab1.swf", 0); }
Actionscript diatas untuk menghubungkan dengan halaman materi BAB
1. Dan untuk menghubungkan dengan materi BAB lain, pada tengah script
loadMovieNum("bab1.swf", 0); tinggal mengubah bab1.swf sesuai halaman
BAB yang dituju. Sebagai contoh untuk menghubungkan dengan halaman kuisioner di BAB 6 maka berikut hasil actionscriptnya :
on (release) {
commit to user }
Selain tombol menu, dibagian kanan atas terdapat juga tombol exit yang berfungsi untuk keluar dari menutup atau keluar dari aplikasi. Sama halnya dengan halaman intro, tombol ini juga menggunakan actionscript untuk dapat berinteraksi keluar dari aplikasi.
Gambar 4.3 Pembuatan Halaman Menu
3. Pembuatan Halaman Materi
Halaman materi merupakan bagian dari halaman isi. Halaman isi sendiri dibagi menjadi 6 bab, dimana mulai dari BAB 1 sampai dengan BAB 5 berisi tentang materi – materi pembahasan fotografi dan BAB 6 berisi tentang kuisioner.
Halaman materi ini mempunyai animasi dan layout yang sama mulai dari BAB 1 sampai dengan BAB 5. Untuk lebih mempersingkat maka akan dibahas pembuatan halaman materi BAB 1. Halaman materi mempunyai animasi yang kompleks dan interaktif. Dimulai dari animasi judul yang berada di atas bergerak dari kiri ke kanan. Pembuatan animasi dibuat dengan menggunakan animasi motion tween. Yaitu animasi yang menggerakkan
commit to user
objek dari tempat 1 ke tempat yang lain. Pembuatan animasi ini dilakukan dengan membuat 2 frame awal yang diisi objek, kemudian meletakkan objek yang sama di tempat yang berbeda.
Setelah itu muncul animasi garis menu materi beserta teks keterangan BAB 1. Sebelumnya garis menu dibuat dengan menggunakan Adobe
Photoshop CS3 dan di export ke library, setelah itu animasi dibuat dengan
menggunakan motiontween dengan tambahan fadein, yaitu dengan membuat transparent pada awal frame dan mengembalikan tingkat transparent di akhir
frame dengan toolAlpha.
Kemudian dari bawah garis menu muncul sinar yang bergerak sesuai arah garis menu. Cahaya ini dibuat dengan menggunakan Adobe Photoshop CS3 dan di export ke library. Setelah itu animasi dibuat dengan menggunakan
motion guide. Animasi pada halaman ini kemudian berlanjut pada animasi
tombol materi – materi yang berjumlah enam buah. Seperti halnya dengan garis menu, tombol ini juga dibuat dengan motion tween dengan tambahan
fadein untuk lebih memperhalus animasi.
commit to user
Animasi terakhir adalah, animasi background untuk materi – materi tentang pembelajaran fotografi. Dibuat dengan menggunakan shape yang diperoleh dari rectangle tool yang diberi sedikit transparent. Animasi dibuat menggunakan Shape Tween, yang merupakan animasi perubahan bentuk. Konsep dasar shapetween sama dengan motion tween, dimana perbedaannya adalah di animasi shape tween dapat merubah bentuknya sesuai yang dikehendaki.
Tombol materi di sebelah kanan, dapat berinteraksi memanggil materi – materi yang dibutuhkan baik berupa teks, video maupun simulasi . Setiap materi – materi dimasukkan di dalam scene baru bernama scene sub-menu. Dimana di dalam 1 stage ada 7 scene. Scene 1 berisi animasi – animasi awal
dan scene 2 sampai scene terakhir berisi materi – materi.
Untuk dapat menghubungkan setiap scene, diperlukan actionscript yang nantinya di letakkan di setiap tombol materi agar dapat menghubungkan dengan materi – materi yang dibutuhkan. Berikut adalah actionscripnya :
on (release){
_root.gotoAndPlay("sub-bab2"); }
commit to user
Di atas tombol materi terdapat tombol next bab dan prev bab yang berfungsi untuk maju dan kembali ke bab sebelumnya. Untuk dapat berinteraksi diperlukan juga actionscript. Actionscript yang digunakan sama dengan actionscript yang digunakan pada tombol materi.
Selain itu dibawah tombol materi juga dilengkapi dengan tombol home
dan tombol exit. Tombol home berfungsi untuk kembali ke halaman menu sedangkan tombol exit berfungsi untuk menutup aplikasi. Kedua tombol tersebut juga menggunakan actionscript untuk dapat berinteraksi. Untuk tombol exit, actionscript yang digunakan sama dengan pada halaman menu. Sedangkan untuk tombol home, berikut actionscriptnya :
on (release) {
loadMovieNum("menu.swf", 0); }
4. Pembuatan Halaman Kuisioner
Halaman ini termasuk dalam halaman isi, tepatnya berada di BAB 6.
Layout dan juga animasi hampir sama dengan halaman materi yang telah
dijelaskan diatas begitu juga dengan cara pembuatannya. Perbedaan berada di isi. Selain itu isi dari halaman kuisioner ini berupa pertanyaan - pertanyaan berbentuk teks dan tombol yang susunannya acak atau random. Selain pertanyaan – pertanyaan, di akhir kuis ini juga terdapat nilai atau
score yang didapat ketika menjawab pertanyaan – pertanyaan.
Konsep dari pembuatan halaman ini adalah menyediakan 50 pertanyaan, yang nantinya dari 50 pertanyaan itu hanya diambil 40 pertanyaan dimana pengambilan pertanyaan secara acak. Pembuatan halaman kuisioner melibatkan 60% actionscript, karena dalam pembuatan halaman ini diperlukan array dan variable penampung dimana dalam Adobe
Flash panambahan array dan variable dapat dilakukan dengan menggunakan
actionscript.
Pada awal pembuatan adalah menyiapkan scene baru yang kemudian ditambahkan elemen – elemen judul dan tombol untuk memulai kuisioner.
commit to user
Kemudian mempersiapkan array yang nantinya di gunakan untuk membuat soal acak. Pembuatan array di Adobe Flash menggunakan actionscript dan terletak di awal frame. Berikut adalah actionscriptnya :
function acak_soal() { i = 0; for (;;) { if (i >= 40) { return; } belum = 0; while (belum == 0) { item = random(50); if (sudah[item] == 0) { belum = 1; sudah[item] = 1; hasil[i] = bank_soal[item] + 1; } } ++i; } } function soal() { ++nm; if (nm < hasil.length) { gotoAndPlay(hasil[nm]);
commit to user return; }
gotoAndPlay(52);} stop();
var benar = 0;
var bank_soal = new Array (1,2,3,4,5,6,7,8,9,0, 11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29 ,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,4 8,49,50)
var sudah = new Array(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,);
var hasil = new Array(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,);
acak_soal(); var nm = -1;
Untuk menjalankan actionscript di atas, diperlukan sebuah tombol yang memanggil actionscript tersebut. Maka tombol dibuat, dan diposisikan tepat di tengah. Agar tombol dapat memanggail actionscript diatas, tombol juga di beri actionscript. Berikut adalah actionscript untuk tombol mulai :
on (release) {
soal(); }
commit to user
Karena array sudah dibuat, dan pemanggil array tersebut juga sudah dibuat, maka diperlukan wadah untuk menempatkan array. Wadah dibuat menggunakan frame yang berisikan pertanyaan – pertanyaan. Pertanyaan dan jawaban dibuat dengan menggunakan Static Text. Kemudian untuk dapat berinteraksi dibuatlah sebuah tombol yang menutup jawaban agar bisa berinteraksi.
Gambar 4.6 Pembuatan Frame Untuk Soal
Tombol yang menutup jawaban juga diberi actionscript agar dapat berinteraksi dengan actionscript di awal frame, dimana jika jawaban benar maka nilai bertambah 1 dan jika salah nilai ditambah 0. Berikut actionscript
untuk salah satu tombol jawaban :
on (release) { jawaban2 = "benar"; jawaban3 = ""; jawaban = "b"; btn_next.enabled = true; btn_next._alpha = 100; }
commit to user
Untuk mengetahui benar atau salah sebuah jawaban, di setiap frame
pertanyaan ditambahakan actionscript sebagai kunci jawaban. Berikut
actionscriptnya :
stop(); kunci = "b";
Kemudian untuk menampung jawaban sementara, diperlukan sebuah wadah. Disini dibuat 2 buah dynamic text yang nantinya berguna sebagai penampung jawaban sementara dan diberi variable jawaban. Sedangkan untuk menampung benar atau salahnya diberi variable jawaban3. Berikut tampilannya :
commit to user
Di akhir frame akan muncul tampilan score atau nilai. Untuk mendapatkan nilai dari score ini, dibuat 3 dynamic text sebagai penampung dari hasil akhir. Dynamic text pertama diberi instance name bnr untuk menampilkan berapa nilai dari jawaban yang benar , dynamic text yang kedua diberi instance name slh untuk menampilkan berapa nilai dari jawaban yang salah, dan dynamic text ketiga diberi variable score untuk menampilkan nilai akhir dari semua pertanyaan yang telah di jawab.
Gambar 4.8 Tampilan DynamicText Untuk Menampilkan Nilai
Agar dapat menampilkan nilai , perlu ditambahkan actionscript sebagai pemanggil variable dan perhitungan akhir dari benar dan salah. Actionscript
diletakkan di dalam frame dimana 3 dynamic text di atas ditempatkan. Berikut actionscriptnya : stop(); score = benar * 2.5; bnr.text = benar; slh.text = 40 - benar; benar = 0;
commit to user
bank_soal = new Array(1,2,3,4,5,6,7,8,9,0,
11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29 ,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,4 8,49,50)
sudah = new Array(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,);
hasil = new Array(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,);
Selain itu, dibawah score ditambahkan juga sebuah tombol mulai lagi yang berfungsi untuk memulai kembali kuisioner dari awal dan pertanyaan akan tersusun secara acak kembali. Sebagai pemanggilnya, ditambahkan
actionscript dalam tombol tersebut. Berikut adalah actionscriptnya :
on (release) {
_root.jumlahFrame = 52; _root.jumpFrame = []; gotoAndStop(1);}
5. Pembuatan Simulasi Kamera
Simulasi kamera ini adalah fasilitas tambahan yang ada di dalam aplikasi ini. Tujuan dari adanya simulasi ini , nantinya dapat membantu user yang belum mempunyai kamera. Untuk latihan awal user bisa menggunakan simulasi ini, karena sistematisnya sama dengan penggunaan kamera.
Simulasi ini terletak di bab 2, dimana simulasi ini menjadi subbab ke tujuh. Dalam pembuatan simulasi ini , data diambil dari foto yang telah di ambil sebelumnya. Foto – foto tersebut memiliki karakteristik sendiri – sendiri, dimana parameter dari setiap foto juga berbeda. Sehingga terdapat variable sementara yang menyiapkan foto – foto tersebut untuk nantinya ditampilkan.
commit to user
Simulasi ini hanya menampilkan foto – foto yang telah disiapkan sebelumnya, dimana user bisa memilih parameternya atau dapat dikatakan kendali simulasi di pegang oleh user. Parameter yang ada di dalam simulasi ini adalah Aperture, Shutter Speed, dan ISO, seperti terlihat pada gambar di bawah ini.
Gambar 4.9 Tampilan Simulasi
Parameter di dalam simulasi ini disajikan dalam bentuk combo box , dimana setiap parameter punya value yang berbeda – beda. Didalam parameter Aperture, disediakan 5 value, yaitu 1.8 , 3.5 , 8 , 16 , 22 . Untuk
Shutter Speed , disediakan 11 value, yaitu 2, 1, 0.3, 1/5, 1/13, 1/30, 1/60, 1/100, 1/200, 1/500, 1/1000. Dan untuk ISO, disediakan 5 value, yaitu 100, 200, 400, 800, 1600.
commit to user
Cara kerja simulasi ini cukup mudah dipahami, ketika user memilih parameter , user diharuskan untuk memencet tombol kamera di sebelah kanan bawah untuk melihat hasil kombinasi parameter. Seperti yang sudah disampaikan, bahwa setiap kombinasi dari parameter menghasilkan foto yang berbeda, seperti pada gambar berikut.
Gambar 4.10 Tampilan Perbandingan Parameter Simulasi
C. Melakukan Testing atau Pengujian
Pengujian dilakukan untuk mengetahui target link apakah sudah sesuai dengan target. Pembuatan link dan target link dibahas pada Bab IV di sub pembuatan aplikasi multimedia.Proses testing dilakukan pada Adobe Flash CS3
dengan menekan tombol kombinasi Ctrl+Enter untuk menghasilkan aplikasi dalam format *.swf.
commit to user
D. Melakukan Perbaikan
Proses perbaikan dilakukan jika terdapat kesalahan dalam pembuatan. Salah satu kesalahan yang sering timbul adalah penulisan actionscript. Karena pada BAB 6 berisi tentang kuisioner – kuisioner yang ditampilkan secara acak dan pembuatannya memerlukan actionscript yang cukup kompleks. Jika ada satu kesalahan kecil baik dalam penulisan script ataupun dalam logika script maka akan muncul kotak dialog yang menampilkan letak kesalahannya. Hal-hal seperti itulah yang perlu diperhatikan dalam proses perbaikan.
Gambar 4.12 Tampilan Error Kotak Dialog E. Proses Finishing
Setelah semua tahap pembuatan aplikasi ini selesai, tahap selanjutnya adalah melakukan test movie dengan tujuan untuk mengetahui apakah aplikasi dapat berjalan dengan baik atau tidak (terjadi error). Apabila masih terdapat kesalahan atau error maka harus dilakukan perbaikan hingga aplikasi berjalan dengan baik. Testmovie ini akan menghasilkan file dengan ekstensi .swf.
commit to user
Setelah selesai dikerjakan dan telah disimpan dalam file flash maka langkah selanjutnya adalah membuat file execution (.exe) agar aplikasi inidapatdijalankan pada semua komputer tanpa terlebih dulu menginstall flash player.
Karena penulis membuat aplikasi ini dengan beberapa file, maka yang akan di publikasikan adalah file yang pertama, yaitu halaman intro, sedangkan file
yang lainnya merupakan pendukung. Cara Publikasi file yaitu pilih perintah menu
File >Publish Settings, selanjutnya akan ditampilkan kotak dialog Publish
Settings seperti tampak pada gambar dibawah ini :
Gambar 4.13 Tampilan Kotak Dialog PublishSettings
F. Aplikasi Desain Halaman 1. Halaman Intro
Halaman ini memiliki background berwarna hitam. Pada awal terdapat animasi gerak tulisan belajar fotografi dan simbol tanda tanya, yang mengarah pada pertanyaan, masih bingung belajar fotografi?. Kemudian dilanjutkan dengan keterangang – keterangan yang berisikan fasilitas yang dimiliki aplikasi ini. Kemudian di bagian pojok kiri
commit to user
bawah, terdapat tombol skip. Tombol ini berfungsi untuk menghentikan intro untuk langsung menuju intro terakhir sebelum masuk ke menu utama. Pada akhir intro, terdapat juga tombol enter.
Tombol ini berfungsi untuk masuk langsung ke halaman menu. Selain itu di kanan atas terdapat tombol exit yang berfungsi untuk keluar dari aplikasi secara langsung. Untuk meramaikan halaman ini, maka pada halaman ini diiringi dengan musik. Animasi ini merupakan inti dari halaman intro dimana halaman ini berinteraksi dengan halaman menu utama.
commit to user
Gambar 4.15 Animasi Halaman Intro 2
commit to user
