3.5 Rancangan Antar Muka
Perancangan tampilan menu atau rancangan Scene dalam program ini sangat diperlukan dalam pemrograman visual karena scene utama ini merupakan bentuk
tampilan saat program dijalankan
3.5.1 Rancangan Tampilan Halaman Intro
Scene intro merupakan tampilan pertama ketika aplikasi dijalankan, berikut adalah desain scene intro yang dirancang.
Gambar 3.2 Tampilan Rancangan Scene intro
Pada scene ini teks keterangan merupaka teks yang bersifat animasi, pada scene ini juga terdengar musik yang mengiringi.
TEKS KETERANGAN
TOMBOL EKSEKUSI
Universitas Sumatera Utara
Cara pembuatannya adalah sebaga berikut : 1.
Buka aplikasi Adobe Flash CS 3 Professional. Atur properties dengan ukuran lembar kerja 800x 600 pixel.
2. Import gambar yang diinginkan, ubah gambar menjadi movie clip dengan cara
menekan tombol F8 3.
Aktifkan layer 1 , buat teks “Selamat datang dengan menggunakan text tool. Insert keyframe 1 dan keyframe 20, antara frame 1 sampai 20 create motion
tween. 4.
Masih pada layer 1 , insert keyframe 97 dan atur teks ditengah stage, insert keyframe 114 dan atur posisi teks diatas stage. Antara frame 97 sampai frame
114 create motion tween. 5.
Aktifkan layer 2, pada frame 1 ketik teks “Media Pembelajaran Bahasa Arab” dengan menggunakan text tool. Insert keyframe 272.
6. Pilih menu window→common library→button . Pada panel library button pilih
button circle bubble →circle buble green. Drag ke tengah stage.
7. Double klik pada button, klik tanda + untuk mengganti teks. Pada frame 1
atur tombol button dibawah stage, insert keyframe 237. Aktifkan properties , atur color menjadi alfa dengan nilai 0. Insert keyframe insert motion tween
251 letakkan button ditengah stage. Antara frame 237 sampai frame 251 insert motion tween.
8. Buka layer baru insert keyframe 104, hapus button menjadi “masuk”, insert
keyframe 125, keyframe 190. Antara frame 125 sampai frame 190. Buka panel properties atur color menjadi alfa dengan nilai 0.
Universitas Sumatera Utara
9. Buka layer baru import music yang diinginkan. Pilih menu
file →import→import to library. Drag music pada panel library ketengah
stage. 10.
Simpan file dengan nama media.swf
3.5.2 Rancangan Tampilan Halaman Home
Scene home merupakan scene yang digunakan untuk menampilkan materi pembelajaran yang dirancang. Pada scane home terdapat link yang akan
menampilkan materi yang akan disampaikan. Berikut adalah tampilan scene yang dirancang
Gambar 3.3 Rancangan Tampilan Home
TOMBOL EKSEKUSI
4 TOMBOL
EKSEKUSI 5
TOMBOL EKSEKUSI
3 TOMBOL
EKSEKUSI 2
TOMBOL EKSEKUSI
1
TOMBOL EKSEKUSI
TOMBOL EKSEKUSI
TEKS EKSEKU
SI
TEKS KETERANGAN
Universitas Sumatera Utara
Pada scene ini tombol-tombol eksekusi akan menampilkan materi-materi yang akan disampaikan. Cara pembuatannya adalah sebagai berikut :
1. Aktifkan scene 2. Pada layer 1 import gambar yang diinginkan. Atur
properties dengan ukuran lembar kerja 800x 600 pixel. 2.
Import bacaan arab . Buka menu file→import→import to library. Drag gambar pada panel library ketengah stage. Atur letak gambar kesebelah kiri
atas. 3.
Aktifkan text tool, ketik “Belajar Bahasa Arab” . Atur letak tilisan disebelah kiri atas.
4. Buka layer baru. Buat 9 frame. Pada frame 1 aktifkan rectangle tool, buat
persegi. Buka panel properties atur color menjadi alfa dengan nilai 0. 5.
Insert keyframe 40. Aktifkan rectangle tool. Buat persegi besar dan atur dengan selection tool. Pada frame 1 sampai 40 create motion tween.
6. Insert keyframe 52, import bacaan arab letakkan disebelah kiri atas.
7. Aktifkan layer 2, insert keyframe 49. Buat button dengan pilih menu
window →common library→button . Pada panel library button pilih button
oval
→oval button →red. Drag ke tengah stage
8. Aktifkan layer 4. Insert keyframe 50 import bacaan arab dan ketik teks
“Binatang”, ubah menjadi movie clip. 9.
Aktifkan rectangle tool,buat persegi panjang. Ketik teks “Klik pada gambar untuk mendengarkan suara binatang dengan mengunakan teks tool. Ubah
persegi panjang dan teks menjadi movie clip. 10.
Buka layer 5. Insert keyframe 50 dan buat teks “kucing, kelinci, sapi, kuda, kambing, unta,
harimau, semut, jerapah, burung” lalu import bacaan arab kedalam stage.
Universitas Sumatera Utara
11. Aktifkan layer 8 import gambar sesuai nama masing-masing ubah menjadi
button. Lalu buka action script dengan menekan tombol F9. Ketik perintah dari setiap button.
12. Aktifkan layer baru. Insert keyframe 50. Pilih window→common
library →button . Pada panel library button pilih button playback flat→flat
grey forward. Drag ke tengah stage
13. Buat perintah action script pada masing-masing gambar yang telah diubah
menjadi button.
3.5.3 Rancangan Tampilan Halaman Kosa Kata
Halaman ini merupakan link yang akan menampilkan masing-masing 10 kosa kata yang terdiri dari kosa kata binatang, benda, buah juga angka. Jika user mengklik
tombol eksekusi dari masing-masing kosa kata tersebut maka akan terdengar cara pengucapan dari kosa kata yang diklik. Berikut adalah tampilan scene yang dirancang
Gambar 3.4 Rancangan Tampilan Kosa Kata
TEKS KETERANGAN
TOMBOL EKSEKUSI
TOMBOL EKSEKUSI
TOMBOL EKSEKUS
TOMBOL EKSEKUSI
TEKS EKSEKU
SI
TEKS EKSEKU
SI
Universitas Sumatera Utara
Pada scene kosa kata tombol-tombol eksekusi akan menampilkan materi-materi yang akandisampaikan. Cara pembuatannya adalah sebagai berikut :
1. Buka layer 8. Pada frame 4 aktifkan rectangle tool, buat persegi. Buka panel
properties atur color menjadi alfa dengan nilai 0.
2. Insert keyframe 40. Aktifkan rectangle tool. Buat persegi besar dan atur
dengan selection tool. Pada frame 1 sampai 40 create motion tween. 3.
Insert keyframe 52, import bacaan arab letakkan disebelah kiri atas. 4.
Aktifkan layer 2, insert keyframe 49. Buat button dengan pilih menu window
→common library→button . Pada panel library button pilih button oval
→oval button →red. Drag ke tengah stage
5. Aktifkan layer 4. Insert keyframe 50 import bacaan arab dan ketik teks
“Binatang”, ubah menjadi movie clip. 6.
Aktifkan rectangle tool,buat persegi panjang. Ketik teks “Klik pada gambar untuk mendengarkan suara binatang dengan mengunakan teks tool. Ubah
persegi panjang dan teks menjadi movie clip. 7.
Buka layer 5. Insert keyframe 50 dan buat teks “kucing, kelinci, sapi, kuda, kambing, unta, harimau, semut, jerapah, burung” lalu import bacaan arab
kedalam stage. 8.
Aktifkan layer 8 import gambar sesuai nama masing-masing ubah menjadi button. Lalu buka action script dengan menekan tombol F9. Ketik perintah
dari setiap button. 9.
Aktifkan layer baru. Insert keyframe 50. Pilih window→common library
→button . Pada panel library button pilih button playback flat→flat grey forward. Drag ke tengah stage.
Ketik text “kembali’ pada button dan ubah
menjadi static teks
Universitas Sumatera Utara
10. Buat perintah action script pada masing-masing gambar yang telah diubah
menjadi button.
3.5.4 Rancangan Tampilan Halaman Hijaiyah
Gambar 3.5 Rancangan Tampilan Hijaiyah
Cara pembuatannya adalah sebagai berikut : 1.
Buka layer 8. Pada frame 4 aktifkan rectangle tool, buat persegi. Buka panel
properties atur color menjadi alfa dengan nilai 0.
2. Insert keyframe 1, Aktifkan rectangle tool. Buat persegi besar dan atur dengan
selection tool.
3. Insert keyframe 50. Aktifkan rectangle tool. Buat persegi dan atur dengan
selection tool. Pada frame 1 sampai 50 create motion tween.
4. Aktifkan layer baru. Insert keyframe 50, Pilih window→common
library
→button . Pilih button oval→oval button →red. Drag ke tengah stage
TEKS KETERANGAN
TEKS EKSEKU
SI
TEKS EKSEKU
SI
Universitas Sumatera Utara
5. Insert keyframe 57. Ketik teks pada button. Pada frame 50 sampai 57 create
motion tween.
6. Aktifkan layer baru. Insert keyframe 57. Import gambar yang diinginkan,
ubah gambar menjadi movie clip dengan cara menekan tombol F8. 7.
Aktifkan layer baru. Insert keyframe 57. Import gambar yang diinginkan dan ketik teks, ubah gambar dan teks menjadi movie clip.
8. Aktifkan layer baru. Insert keyframe 57. Pilih window→common
library →button . Pada panel library button pilih button playback flat→flat
grey forward. Drag ke tengah stage
9. Buat perintah action script pada masing-masing gambar yang telah diubah
menjadi button.
3.5.5 Rancangan Tampilan Halaman Quiz
Gambar 3.6 Rancangan Tampilan Quiz
TEKS KETERANGAN
TEKS KETERANGAN
TOMBOL EKSEKUSI
TOMBOL EKSEKUSI
TOMBOL EKSEKUSI
TOMBOL EKSEKUSI
TEKS EKSEKU
SI
Universitas Sumatera Utara
Cara pembuatannya adalah sebagai berikut : 1.
Buka layer 8. Pada frame 8 aktifkan rectangle tool, buat persegi. Buka panel
properties atur color menjadi alfa dengan nilai 0.
2. Insert keyframe 1, Aktifkan rectangle tool. Buat persegi besar dan atur dengan
selection tool.
3. Aktifkan layer baru. Insert keyframe 1. Ketik teks dengan teks tools. Pilih
library →button . Pada panel library button pilih button playback flat→flat
grey forward. Drag ke tengah stage
4. Aktifkan layer baru. Insert keyframe 2. Ketik soal dengan menggunakan teks
tools. Teks bersifat static teks. Import gambar yang sesuai soal, ubah gambar menjadi movie clip dengan cara menekan tombol F8.
5. Aktifkan layer baru. Insert keyframe 1. Pilih window→common
library
→button . Pilih button oval→oval button →red. Drag ke tengah stage
6. Buat perintah action script pada masing-masing gambar yang telah diubah
menjadi button.
Universitas Sumatera Utara
3.5.6 Rancangan Tampilan Hasil Quiz
Gambar 3.7 Rancangan Tampilan Hasil Quiz
Cara pembuatannya adalah sebagai berikut : 1.
Aktifkan layer 8. Insert keyframe 7. Ketik teks dengan menggunakan teks tools
2. Ketik jumlah soal. Teks bersifat static teks, sedangkan untuk jumlah benar dan
salah teks bersifat dynamic static. TEKS KETERANGAN
TEKS EKSEKU
SI
TEKS EKSEKU
SI
Universitas Sumatera Utara
3.5.7 Rancangan Tampilan Profil
Gambar 3.8 Rancangan Tampilan Profil
Cara pembuatannya adalah sebagai berikut : 1.
Buka layer 8. Pada frame 9 aktifkan oval tool, buat oval. Buka panel
properties atur color menjadi alfa dengan nilai 0.
2. Insert keyframe 1, ketik teks “ dibuat oleh”, “Devi Khairani”, “102406028”
dan “Teknik Informatika” dengan menggunakan teks tool. Atur masing-masing
teks ketengah stage 3.
Aktifkan layer baru. Insert keyframe 1, Pilih window→common library
→button . Pilih button oval→oval button →red. Drag ke tengah stage.
TEKS KETERANGAN
TEKS EKSEKU
SI
Universitas Sumatera Utara
BAB 4
IMPLEMENTASI SISTEM
4.1 Hasil
Kategori