ANALISIS DAN PERANCANGAN
3.3 Rancangan Animas
3.3.5 Desain Halaman Latihan
Halaman latihan ini terdiri 4 link yang akan menuju ke halaman tertentu yang didalamnya terdapat soal – soal. Jenis soal berbeda untuk setiap jenis latihan. Berikut adalah langkah – langkah untuk mendesain halaman latihan tersebut :
1. Masukkan objek yang akan dijadikan background lalu sesuaikan dengan ukuran stage. Kemudian klik kanan pada objek pilih arrange , send to back.
2. Masukkan 4 objek yang sudah dipersiapkan sebelumnya dan masing – masing dijadikan kedalam bentuk button dengan menekan tombol F8 dan beri nama masing – masing sesuai dengan objek.
3. Double click disalah satu objek dan tekan F6 pada frame down. Ubah ukuran objek menjadi lebih besar dengan menggunakan rectangle tool. Lalu tekan CTRL + E dan ulangi langkah ini terhadap 3 objek lainnya. 4. Pada bagian sudut kiri bawah masukkan button back dengan mengimport
langsung dari library panels.
3.3.5.1 Desain Halaman Latihan I
Halaman ini merupakan latihan mengenai teori – teori maupun pengertian dasar dari pelajaran fisika mengenai gaya. Pilihan jawaban dari setiap soal hanya ada 2 yaitu ya dan tidak. Jika pilihan jawaban benar, maka akan muncul tulisan benar diantara pilihan jawaban. Tetapi jika salah disamping akan muncul tulisan salah,
juga akan muncul pembahasan yang benar dari soal tersebut. Berikut adalah langkah – langkah untuk membuat desain halaman latihan I :
1. Pilih warna background lalu klik kanan pilih arrange , send to back agar berada tepat dibawah semua objek selanjutnya.
2. Masukkan soal menggunakan text tool dengan jenis font Comic Sans
ukuran 12 dan jenis teks adalah static text.
3. Masukkan radio button melalui panel component. Lalu atur parameter
radio button tersebut melalui panel parameters. Pengaturan parameternya dapat dilihat pada gambar dibawah ini :
Gambar 3.2 Pengaturan Parameter RadioButton Latihan I
4. Ulangi langkah nomor 3 tersebut sekali lagi tetapi pada pengaturan parameter radio button tersebut gantilah label dan component ya menjadi tidak.
5. Buatlah dynamic text melalui text tool diantara kedua radio button tersebut dengan jenis font Comic Sans ukuran 12 , dan berwarna merah. Lalu isikan variabelnya dengan jawab1.
6. Masukkan sebuah teks sebagai keterangan atau penjelasan jawaban dari soal tersebut dengan jenis teks yaitu dynamic text dan jenis font Comic Sans ukuran 12 berwarna biru. Lalu isikan nama variabelnya dengan ket1.
7.
Ulangi langkah 1 sampai 6 untuk membuat soal – soal selanjutnya. Yang perlu diganti adalah nama dari setiap group name dari radio button di tiap soal karena nama group name tersebut bergantung pada nomor soal. Kemudian penamaan variabel untuk setiap dynamic text juga bergantung pada nomor soal.8. Masukkan button back dan next yang bisa diambil langsung dari library panel dan selanjutnya letakkan pada bagian paling bawah di sudut kiri
stage.
3.3.5.2 Desain Halaman Latihan II
Halaman ini berisi dengan 10 soal perhitungan sederhana berdasarkan rumus – rumus yang sudah dibahas pada teori sebelumnya. Ada 4 pilihan jawaban pada setiap soal dan apabila jawaban yang dipilih salah, akan muncul pembahasan dari jawaban yang sebenarnya di sebelah kanan. Berikut adalah langkah – langkah untuk membuat desain halaman ini :
1. Pilih warna background lalu klik kanan pilih arrange , send to back agar berada tepat dibawah semua objek selanjutnya.
2. Masukkan soal menggunakan text tool dengan jenis font Comic Sans
3. Masukkan radio button melalui panel component. Lalu atur parameter
radio button tersebut melalui panel parameters. Pengaturan parameternya dapat dilihat pada gambar dibawah ini :
Gambar 3.3 Pengaturan Parameter RadioButton Latihan II
4. Ulangi langkah nomor 3 sebanyak 3 kali lagi, tetapi pada pengaturan parameter radio button tersebut gantilah label menjadi jawaban yang diinginkan dan component diganti menjadi pilihan jawabannya.
5. Buatlah dynamic text melalui text tool diantara kedua radio button
tersebut dengan jenis font Comic Sans ukuran 12 , dan berwarna merah. Lalu isikan variabelnya dengan jb1.
6. Masukkan objek kunci jawaban yang sudah dipersiapkan sebelumnya dan dijadikan kedalam bentuk movie clip. Selanjutnya isi instance name
melalui properties dengan kunci1.
7. Ulangi langkah 1 sampai 6 untuk membuat soal – soal selanjutnya. Yang perlu diganti adalah nama dari setiap group name dari radio button di tiap soal karena nama group name tersebut bergantung pada nomor soal. Kemudian penamaan instance name untuk setiap kunci jawaban juga bergantung pada nomor soal.
8. Masukkan button back dan next yang bisa diambil langsung dari library panel dan selanjutnya letakkan pada bagian paling bawah di sudut kiri
stage.
3.3.5.3 Desain Halaman Latihan III
Halaman ini merupakan halaman kuis. Dimana soal – soal yang diberikan terdiri dari jenis soal pada latihan I dan II. Soal ini juga memiliki batas waktu yaitu 60 menit berjalan dan tidak diketahui jawaban sebenarnya seperti pada latihan I dan II karena perhitungan skor akan terjadi diakhir. Setiap jawaban yang benar bernilai +4 dan jawaban yang salah bernilai 0. Berikut adalah langkah – langkah untuk membuat desain halaman latihan III tersebut :
1. Buatlah 4 layer dengan nama masing – masing yaitu : mulai, waktu, tampung dan kuis. Setiap layer dimulai dari frame 108.
2. Pada layer kuis di frame 108, buatlah desain layar dan juga teks petunjuk penggunaan aplikasi kuis tersebut. Setelah selesai, masukkan 3 dynamic text dengan pengaturan yang berbeda – beda seperti gambar dibawah ini :
Gambar 3.4b Properties Dynamic Text Menit
Gambar 3.4c Properties Dynamic Text Detik
3. Masukkan objek yang akan dijadikan sebagai link untuk mulai menjalankan aplikasi kuis. Jadikan kedalam bentuk button dengan menekan tombol F8 dan berikan nama sesuai objek.
4. Tekan F6 di frame 109. Hapus semua desain kecuali desain penghitung waktu yang berada di atas. Masukkan soal menggunakan text tool dengan jenis teks yaitu static text, jenis font Comic Sans ukuran 12 dan berwarna hitam.
5. Masukkan radio button melalui panel component. Lalu atur properties dari
Gambar 3.5 Pengaturan Properties Radio Button Kuis
6. Ulangi langkah nomor 5 sebanyak 3 kali. Yang perlu diperhatikan adalah nama instance name pada setiap radio button. Jika pada gambar diatas yang terlihat adalah a1, maka untuk radio button yang berada pada soal yang sama instance name selanjutnya adalah b1, c1 dan d1.
7. Masukkan soal selanjutnya lalu ulangi langkah – langkah pada nomor 5 dan 6 tersebut dengan memperhatikan instance name bergantung pada nomor soal.
8. Masukkan button back dan next yang bisa diambil langsung dari library panel dan selanjutnya letakkan pada bagian paling bawah di sudut kiri
stage.
9. Jika sudah selesai dengan 25 soal yang dibuat , pada frame soal terakhir, gambarlah lingkaran berwarna hitam sebagai link menuju halaman hitung skor.
10.Pada frame 117 akan didesain halaman penghitungan skor. Masukkanlah objek yang akan dijadikan latar atau background. Pastikan latar tersebut berada dibawah agar tidak menutupi objek lainnya. Kemudian masukkanlah objek kalkulator yang lalu jadikan kedalam bentuk button
text dengan jenis font Comic Sans ukuran 30 berwarna hitam pada bagian layar kalkulator untuk menampilkan skor nantinya. Dan berikan nama variabel teks tersebut dengan nama skor. Selanjutnya masukkan objek rumah yang akan digunakan sebagai link untuk kembali kehalaman awal dan jadikan kedalam bentuk button. Beri nama sesuai dengan objek.
11.Pada frame 118 akan didesain halaman habis waktu yang akan muncul secara otomatis apabila waktu yang berjalan 60 menit sudah habis. Masukkan teks yang menunjukkan waktu sudah habis. Lalu masukkan objek yang berguna sebagai link untuk menuju halaman penghitungan skor. Jadikan objek tersebut kedalam bentuk button dan beri nama yang sesuai objek.
3.3.5.4 Desain Halaman Latihan IV
Halaman ini berisi dengan teka – teki silang sederhana mengenai gaya fisika. Berikut adalah langkah – langkah untuk membuat halaman tersebut :
1. Buatlah terlebih dahulu soal – soal dan jawaban di tempat lain seperti kertas kemudian susunlah didalam program menjadi sedemikian rupa terdiri dari 5 soal menurun dan 5 soal mendatar.
2. Kotak – kotak TTS tersebut dibuat menggunakan input text dengan menggunakan kotak dan maximum character adalah 1 dan jenis font Comic sans ukuran 10.
3. Setiap variabel tergantung pada nomor soal dan sesuai dengan abjad. Jadi, variabel untuk soal nomor 1 adalah a1, a2,a3,…dst. Kemudian untuk variabel soal nomor 2 adalah b1,b2,b2,…,dst. Apabila terdapat kotak yang berada pada letak yang sama, gunakan nama variabel yang lebih dulu digunakan.
4. Masukkan buttonback yang bisa diambil langsung dari library panel dan selanjutnya letakkan pada bagian paling bawah di sudut kanan stage.