28
BAB III PEMBAHASAN MASALAH
Pada masa perkembangan zaman saat ini sudah tidak heran apabila segala sesuatu dapat dikomputerisasikan, informasi datang begitu cepat. Informasi yang ada di era modern ini sangat penting untuk dipelajari. Berbagai informasi yang datang sangat beraneka ragam sehingga inforamsi itu tidak dapat diabaikan begitu saja tetapi harus diperhatikan baik untuk dipelajari maupun hanya sebagai pengetahuan, karena pengetahuan mempunyai peran sangat penting didalam dunia bisnis atau bahkan dalam menjalani kehidupan sehari-hari. Tanpa pengetahuan bagaikan hidup dalam kegelapan. Suatu informasi berbasis visualisasi yaitu cara yang tepat untuk pencarian data agar gambar lebih mudah dalam mengaksesnya. Pembuatan program aplikasi multimedia ini memerlukan beberapa tahapan yang dikerjakan secara berurutan oleh penulis. Tahap pembuatan program akan dibahas mulai dari langkah-langkah, rancangan peta navigasi, storyboard, pengoperasian program, dan perangkat yang dibutuhkan.
3.1. Peta Navigasi Pengenalan Uji Psikometri Peta navigasi berguna untuk menentukan cara dimana suatu alur program dapat dijalankan dari awal hingga akhir program. Agar alur yang diinginkan dapat
29
sesuai dengan arah dan tujuan sehingga proses pembuatan aplikasi multimedia dapat berjalan sebagaimana mestinya. Berikut adalah struktur navigasi hierarcy yang digunakan pada aplikasi pengenalan Uji Psikometri.
INTRO
MENU UTAMA
Uji Kepribadian
Uji Kecerdasan
Gambar 3.1 Struktur Navigasi Aplikasi
Keterangan peta navigasi untuk menjelaskan alur visualisasi Uji Psikometri : 1. Intro adalah gambar untuk halaman pembukaan yang merupakan halaman pertama dari aplikasi visualisasi Uji Psikometri. 2. Menu utama adalah gambar untuk halaman menu utama yang memiliki tombol untuk menuju ke halaman Uji kepribadian dan Uji kecerdasan.
30
3. Uji Kepribadian adalah gambar untuk halaman yang berisi pertanyaanpertanyaan Uji Kepribadian yang didalamnya terdapat tombol pilihan jawaban A, B, C dan keterangan mengenai jawaban yang dipilih. 4. Uji Kecerdasan adalah gambar untuk halaman yang berisi pertanyaanpertanyaan Uji Kecerdasan yang didalamnya terdapat beberapa pertanyaan logika yang dapat mengukur kecerdasan anda, serta hasil dari Uji Kecerdasan.
3.2. Storyboard Visualisasi Uji Psikometri Storyboard merupakan gambaran umum yang menjelaskan tentang suatu hal atau gambar yang sedang terjadi secara lengkap dan disusun secara berurutan dari layer pembuka hingga layer penutup dengan mengikuti peta navigasi yang ada sehingga dapat meminimalisasikan kesalahan yang terjadi. Berikut ini adalah rancangan storyboard dari aplikasi Uji Psikometri :
31
3.2.1. Rancangan Halaman Intro
ANIMASI ANGKA
ANIMASI LOADING
Gambar 3.2. Rancangan Halaman Intro
Rancangan ini menggambarkan isi halaman intro dengan komponenkomponen berupa : 1. Animasi angka. 2. Animasi loading, yang nantinya akan langsung menuju ke halaman Menu Utama.
32
3.2.2. Rancangan Halaman Menu Utama
ANIMASI TEXT
Tombol 1
ANIMASI GAMBAR
Tombol 2 Tombol 3
Gambar 3.3 Rancangan Halaman Menu Utama
Rancangan ini menggambarkan isi Halaman Menu Utama dengan komponenkomponen berupa : 1. Animasi text 2. Tombol 1 untuk menuju ke halaman Uji Kepribadian 3. Tombol 2 untuk menuju ke halaman Uji Kecerdasan 4. Tombol 3 untuk keluar dari program.
33
5. Animasi Gambar
3.2.3. Rancangan Halaman Uji Kepribadian
ANIMASI TEXT 1
TEXT SCROLL 1
TEXT SCROLL 3
Tombol 1 Tombol 2 Tombol 3
TEXT SCROLL 2 Tombol 4
Tombol 5
Tombol 6
Gambar 3.4. Rancangan Halaman Uji Kepribadian
34
Rancangan ini menggambarkan isi dari Halaman Uji Kepribadian dengan komponen-komponen berupa : 1. Animasi text 1 yang bertuliskan judul dari Uji Psikometri (uji kepribadian) 2. Text scroll 1 yang bertuliskan pertanyaan dari Uji Kepribadian 3. Tombol 1 yang bertuliskan pilihan jawaban A dari soal Uji Kepribadian 4. Tombol 2 yang bertuliskan pilihan jawaban B dari soal Uji Kepribadian 5. Tombol 3 yang bertuliskan pilihan jawaban C dari soal Uji Kepribadian 6. Text Scroll 2 yang bertuliskan keterangan dari pertanyaan Uji Kepribadian 7. Text Scroll 3 yang bertuliskan keterangan dari pilihan jawaban A, B, atau C 8. Tombol 4 untuk menuju ke pertanyaan Uji Kepribadian sebelumnya 9. Tombol 5 untuk menuju ke pertanyaan Uji Kepribadian berikutnya 10. Tombol 6 untuk kembali ke Menu Utama.
35
3.2.4.1. Rancangan Halaman Uji Penalaran Numerik
ANIMASI TEXT 1
Time
Animasi angka
ANIMASI TEXT 2
Text
Text input
Tombol
Gambar 3.6. Rancangan Halaman Uji Penalaran Numerik
1. Time berisikan waktu yang diberikan untuk mengerjakan soal yang ada 2. Animasi text 1 berisikan judul dari Uji Kecerdasan 3. Animasi angka berisikan nomor soal dari Uji Kecerdasan
36
4. Animasi text 2 berisikan pertanyaan dari Uji Kecerdasan 5. Text berisikan text keterangan 6. Text input berisikan inputan jawaban dari pertanyaan Uji Kecerdasan yang diberikan 7. Tombol untuk kembali ke menu Utama
3.3. Cara Pembuatan Aplikasi Uji Psikometri 3.3.1. Pembuatan Halaman Intro 1. Klik insert > scene 2. Klik layer pertama ubah nama layer “ background “, drag symbol graphic “ backgroundintro ” dari library. Panjang form pada timeline dibuat 50 3. Buat garis menggunakan line tool, dengan panjang 2 cm lalu jadikan garis tersebut menjadi movie clip, pada editing symbol movie clip dan beri nama “ line MC ” 4. Buat layer ubah nama layer “ kotak “, lalu buat symbol graphic dengan mengklik insert > new symbol > graphic, dengan ukuran 3 * 4 cm 5. Buat layer, ubah nama layer “ jarum jam ”, kemudian klik frame 1, 10, 20, 30, 40, 50. drag symbol movie clip “ line MC “ dari library, lalu letakkan di dalam stage di frame 1, kemudian atur property rotation di panel inspector movie clip dari “ auto “ menjadi “ cw “, lakukan hal yang sama hingga frame ke 50, untuk memperluas proses perputaran beri sedikit sentuhan motion tween
37
6. Buat layer, ubah nama layer “ loading “ 7. Pada layer “ loading “, frame 1 buat persegi panjang menggunakan Rectangle tool, lalu letakkan di bawah text loading 8. Buat layer baru lalu beri nama “ text ”, klik text tool pada layer text tuliskan text “ loading “ 9. Pada frame 10, klik insert > keyframe, lakukan hal yang sama sampai frame 50 10. Buat layer, ubah nama layer “ animasi angka “ dengan menggunakan text tool, klik frame 1 dan kemudian tuliskan angka 5 11. klik frame 10 dan kemudian tuliskan angka 4 12. klik frame 20 dan kemudian tuliskan angka 3 13. klik frame 30 dan kemudian tuliskan angka 2 14. klik frame 40 dan kemudian tuliskan angka 1 15. klik frame 50 dan kemudian tuliskan angka 0.
38
Gambar 3.7. Tampilan Halaman Intro
3.3.2. Pembuatan Halaman Menu Utama 1. klik insert > scene, lalu ubah nama scene tersebut “ Menu “ 2. Klik layer 1, ubah nama layer “ background “, kemudian drag symbol graphic dari dalam library ke dalam stage 3. Buat symbol movie clip, pada symbol movie clip, insert > behavior > movie clip beri nama dibagian name “ animasi masking “, klik ok 4. Klik layer 1 , buat persegi panjang beri warna gradicat kuning 5. Buat layer, tuliskan kata “ Uji Psikometri “dengan menggunakan text tool label static 6. kemudian letakkan kata tersebut disebelah kiri persegi panjang 7. Klik frame 10, insert keyframe sampai dengan frame 50 8. Kemudian dari masing-masing frame beri motion tween 9. Buat layer di scene “ menu “ ubah nama layer “ animasi mask “, drag symbol “ animasi masking MC “ ke dalam stage 10. Buat layer, ubah nama layer “ menu pilihan “, drag symbol button kedalam stage 11. buat layer, tuliskan kata “ Uji Kepribadian “, “ Uji Kecerdasan “ di dalam stage menggunakan texttoll tipe static, lalu tempatkan tulisan tersebut diatas layer “ menu pilihan “ 12. Buat layer “ exit “, drag button “ exit “lalu letakkan kedalam stage
39
13. Buat layer “ action “, lalu berikan action stop() di frame 1
Gambar 3.8. Tampilan Halaman Menu Utama
3.3.3. Pembuatan Halaman Uji Kepribadian 1. Klik insert > scene, ubah nama scene “ Uji Kepribadian “ 2. Klik layer 1, ubah nama layer “ background “, kemudian drag symbol graphic “ bg_pink “ dari dalam library dan letakkan di dalam stage 3. Buat layer, ubah nama layer “ animasi judul “ drag movie clip “ animasi judul MC “ dari dalam library dan letakkan di dalam stage 4. Buat layer, kemudian buat field dynamic text dengan variable “ pertanyaan “ dari frame 1 sampai dengan frame ke 45
40
5. Buat layer, kemudian buat field dynamic text dengan variable “ penjelasan “ dari frame 1 sampai dengan frame ke 45 6. Buat layer, kemudian buat field dynamic text dengan variable “ jawaban “ dari frame 1 sampai dengan frame ke 45 7. Buat layer, ubah nama layer “ bt.pilih “ drag symbol button “ pilihA “, “ pilihB “, “ pilihC “ dari dalam library dan letakkan di dalam stage 8. Buat layer, ubah nama layer “ bt.next-prev “, drag symbol button “ next “ “ prev “ ke dalam stage 9. Buat layer, ubah nama layer “ back to menu “, drag symbol button “ BT.menu “ kedalam stage 10. Buat layer, ubah nama layer “ atas dan bawah “ drag symbol instance dari dalam library, lalu letakkan ke dalam stage sebagai penggulung tulisan 11. Buat layer “ action “, kemudian buat action “ stop() “ pada frame 1
41
Gambar 3.9. Tampilan Halaman Uji Kepribadian
3.3.4. Pembuatan Halaman Uji Kecerdasan 1. Klik insert > scene ubah nama scene “ test1 “ 2. Pada layer 1, ubah nama layer “ background “, drag symbol image “ latertest1.jpg “ ke dalam stage 3. Buat layer kedua “ login1 “, kemudian buat 1 ( satu ) buah kotak teks dengan texttool, pilih input text> show border around text, dibagian instance name beri nama “ kuser1 “ dan dibagian variable “ nama user1 “ 4. Buat layer “ petunjuk “, sebagai keterangan buat label static teks gunakan texttool untuk membuatnya 5. Buat layer ke 4 ( empat ) “ button “, kemudian drag symbol button dari dalam library sebanyak 2 ( dua ) buah, lalu buat label static text sebagai keterangan “ Ok “, “ No “ 6. Buat layer ke 5 ( lima ) “ judul “, drag symbol movie clip “ judulmctest1 “ kedalam stage, buat hingga panjang frame 50 7. Buat layer ke 6 ( enam ) “ nomor “, kemudian buat 1 ( satu ) buah kotak teks dengan texttool, pilih dynamic text, dibagian variable dan beri nama “ nomor “
42
8. Buat layer ke 7 ( tujuh ) “ pertanyaan “, kemudian buat 1 ( satu ) buah kotak teks dengan texttool, pilih dynamic text 9. Copy > paste pertanyaan tersebut sebanyak 9 ( sembilan ) buah pada setiap frame insert > keyframe sampai frame ke 11 10. Buat layer ke 8 ( delapan ) “ input “, kemudian buat 1 ( satu ) buah kotak teks dengan texttool, pilih input teks, show border around text, dibagian instance name, beri nama “ kjwb1 “ dan dibagian variable beri nama “ jwb1 “ 11. Copy > paste input teks tersebut sebanyak 9 ( sembilan ) buah kemudian letakkan input teks tersebut insert > keyframe sampai frame ke 11 12. Buat layer ke 9 ( sembilan ) “ button_pilih “, drag symbol button ( hit ) sebagai pilihan 13. Copy > paste button ( hit ) tersebut insert > keyframe sampai frame ke 11 14. Buat label “ jawab “ sebagai keterangan gunakan texttool untuk membuatnya 15. Buat layer ke 10 ( sepuluh ) “ ket_button “ sebagai keterangan “ kembali “, untuk button kembali 16. Buat layer ke 11 ( sebelas ) “ action “, kemudian klik frame 1 ( satu ) kemudian blok timeline tersebut sampai frame 11, kemudian tekan tombol di keyboard “ FG “ untuk mengisi masing-masing frame
43
tersebut kosong karena nantinya frame tersebut akan diisi dengan action-action.
Gambar 3.10. Tampilan Halaman Uji Kecerdasan 3.4. Persyaratan Hardware dan Software Dalam pembuatan Aplikasi Uji Psikometri untuk semua kalangan dengan menggunakan Macromedia Flash MX ini, dibutuhkan perangkat lunak dan perangkat keras yang menunjang dengan spesifikasi sebagai berikut : Untuk menjalankan program Macromedia Flash MX ini, spesifikasi komputer minimal yang dibutuhkan adalah : 1. Sistem Operasi Windows 95 2. CPU dengan minimal Processor Intel Pentium 200 Mhz 3. Hardisk free space 85 MB ( untuk Macromedia Flash MX )
44
4. Monitor 640 x 480 high color pada 16 bit 5. RAM minimal sebesar 64 MB 6. Graphic Card minimal 4 MB Hardware pendukung yang digunakan penulis adalah : 1. Sistem Operasi Windows XP 2. Processor Intel Pentium III 3. SDRAM 128 MB 4. VGA
