BAB 3 PERANCANGAN SISTEM. dengan cara menganalisis bahan-bahan yang telah diperoleh dari berbagai sumber

Transkripsi

1 BAB 3 PERANCANGAN SISTEM 3.1 Analisis Perancangan Analisis perancangan yang dilakukan dalam penulisan tugas akhir ini adalah dengan cara menganalisis bahan-bahan yang telah diperoleh dari berbagai sumber atau referensi buku maupun internet. Kemudian bahan-bahan tersebut ditampilkan dengan sebuah metode yang menarik dan interaktif melalui aplikasi yang menggunakan Adobe Flash CS3. Analisis perancangan animasi tentang pembelajaran bangun datar dan bangun ruang ini adalah : 1. User Interface, yaitu bagian dari perangkat lunak yang menyediakan sarana untuk user (pengguna) agar dapat berkomunikasi dengan system yang dalam tugas akhir ini menggunakan Adobe Flash CS3. 2. Pembuatan desain, yaitu suatu program untuk menciptakan interface agar dapat menarik perhatian para pengguna, yaitu siswa menengah pertama. 3.2 Rancangan Sistem Merancang sketsa yang tepat adalah sebuah langkah awal yang dapat dilakukan dalam memulai persiapan sebelum menuangkan ide perancangan. Halaman awal yang digunakan dalam aplikasi ini terdapat sebuah link untuk menuju halaman yang berikutnya. Adapun diagram pohon untuk merancang Animasi Sistem

2 Pembelajaran Matematika Pada Bangun Datar Dan Bangun Ruang Untuk Sekolah Menengah Pertama Dengan Adobe Flash CS3. Gambar 3.1 Diagram Pohon Perancangan Animasi Sistem Pembelajaran Pada Bangun Datar Dan Bangun Ruang Untuk Sekolah Menengah Pertama Dengan Flash CS3 3.3 Rancangan Tampilan Halaman Utama Halaman utama adalah tampilan awal yang pertama kali muncul ketika animasi dibuka. Halaman utama berisi judul animasi yaitu, Animasi Sistem Pembelajaran Matematika Pada Bangun Datar Dan Bangun Ruang Untuk Sekolah Menengah Pertama Dengan Flash CS3 serta tombol menu yang akan menampilkan menumenu apa saja yang disajikan dalam animasi ini. Gambar 3.2 Rancangan Halaman Utama

3 Keterangan: 1. Judul muncul dengan animasi dan font Vijaya berwarna putih. 2. Tombol selanjutnya dengan font Viner Hand ITC yang akan berubah warna jika kursor diarahkan. Dalam halaman utama ini terdapat animasi, yaitu judul animasi yang muncul secara bergerak dari kanan ke kiri kemudian akan berhenti ditengah. 3.4 Rancangan Halaman Menu Utama Halaman menu utama merupakan halaman yang menampilkan menu-menu yang berisi pilihan tombol bangun datar dan tombol bangun ruang. Gambar 3.3 Rancangan Halaman Menu Utama Keterangan : 1. Setiap menu dibuat menjadi tombol dan mewakili masing-masing halaman. 2. Menu tombol memiliki font yang sama, yaitu aldhabi dan berwarna hitam. Jika kursor diarahkan ke menu tombol maka warna menu tombol akan berubah.

4 Menu tombol bangun datar akan menampilkan halaman bangun datar. Menu tombol bangun ruang akan menampilkan halaman bangun ruang dan tombol contoh soal. 3.5 Rancangan Halaman Bangun Datar Pada halaman bangun datar ini akan menampilkan macam-macam bangun datar. Pada halaman ini juga terdapat tombol dan gambar dari setiap bangun datar. Jika tombol salah satu bangun datar diklik, maka akan menampilkan penjelasan dari bangun datar yang diklik tersebut. Gambar 3.4 Rancangan Halaman Bangun Datar Keterangan : 1. Setiap gambar mewakili masing-masing bangun datar. 2. Setiap tulisan yang berada disamping bangun datar merupakan nama dari bangun datar tersebut dan dijadikan tombol yang mewakili masing-masing bangun datar. 3. Jika kursor diarahkan ke setiap tombol, maka akan memberikan efek perubahan warna.

5 4. Tombol kembali dan tombol selanjutnya memiliki efek perubahan warna jika kursor diarahkan. Pada halaman ini terdapat tombol-tombol yang akan menampilkan halaman penjelasan bangun datar, persegi, persegi panjang, segitiga, trapesium, jajar genjang dan layang-layang. Di halaman ini juga terdapat tombol kembali dan tombol selanjutnya. Tombol kembali akan menampilkan halaman sebelum halaman bangun datar. Tombol selanjutnya akan menampilkan halaman bangun ruang. Berikut ditampilkan rancangan halaman penjelasan bangun datar. Gambar 3.5 Rancangan Halaman Penjelasan Bangun Datar Keterangan : 1. Judul memiliki font Tempus Sans ITC dan berwarna hitam. 2. Gambar merupakan gambar bangun datar. 3. Teks penjelasan memiliki font Tempus Sans ITC dan berwana hitam. 4. Tombol kembali dan selanjutnya memiliki efek perubahan warna saat kursor diarahkan. Dalam halaman penjelasan bangun datar, judul pada halaman ini merupakan nama bangun datar yang dijelaskan. Gambar dari bangun datar yang dijelaskan terdapat di sisi kiri dan penjelasan berada di sisi kanan.

6 3.6 Rancangan Halaman Bangun Ruang Pada halaman bangun ruang akan menampilkan berbagai macam bangun ruang. Pada halaman ini terdapat tombol nama bangun ruang yang akan menampilkan bangun ruang dari setiap bangun ruang yang terdapat pada animasi ini. Gambar 3.6 Rancangan Halaman Bangun Ruang Keterangan : 1. Pada halaman ini terdapat tujuh bangun ruang yang memiliki font vivaldi dan berwarna kuning dan hijau. 2. Pada halaman ini terdapat tombol nama bangun ruang dan memiliki efek perubahan warna saat kursor diarahkan. 3. Pada halaman ini juga terdapat tombol contoh soal dan memiliki efek perubahan warna jika kursor diarahkan. Pada halaman ini terdapat tombol nama bangun ruang yang akan menampilkan penjelasan dari tujuh bangun ruang tersebut. Berikut tampilan penjelasan bangun ruang.

7 Gambar 3.7 Rancangan Halaman Penjelasan Bangun Ruang Keterangan : 1. Pada satu halaman terdapat satu penjelasan dari bangun ruang. 2. Setiap judul memiliki font Tempus Sans ITC dan berwarna hitam. 3. Setiap penjelasan memiliki font Andalus dan berwarna hitam. 4. Pada tombol selanjutnya dan tombol kembali memiliki efek perubahan warna saat kusor diarahkan. Pada halaman penjelasan bangun ruang terdapat dua tombol yaitu tombol selanjutmya dan tombol kembali. Pada tombol selanjutnya akan menampilkan bangun ruang berikutnya. Pada tombol kembali akan menampilkan halaman sebelum halaman penjelasan bangun ruang. 3.7 Rancangan Halaman Contoh Soal Pada halaman contoh soal akan menampilkan contoh soal dari bangun datar dan bangun ruang. Pada halaman ini terdapat tombol selanjutnya.

8 Gambar 3.8 Rancangan Halaman Contoh Soal Keterangan : 1. Judul halaman memiliki font Traditional Arabic dan berwarna coklat. 2. Pada halaman ini terdapat tiga contoh soal yang memiliki font Utsaah dan berwarna merah. 3. Tombol selanjutnya memiliki efek perubahan warna kursor diarahkan. Pada tombol selanjutnya akan menampilkan halaman selanjuntya, halaman contoh soal berikutnya. 3.8 Rancangan Halaman Kuis Pada halaman kuis akan memuat lima pertanyaan sederhana yang berkaitan dengan bangun datar dan bangun ruang. Pada halaman ini terdapat judul, tombol main dan tombol kembali. Gambar 3.9 Rancangan Halaman Kuis

9 Keterangan : 1. Judul halaman merupakan judul kuis beranimasi yang memiliki font Snap ITC dan berwarna merah. 2. Tombol main dan tombol kembali memiliki efek perubahan warna saat kursor diarahkan. Judul halaman merupakan teks beranimasi, yaitu teks akan muncul satu persatu dan akan menjadi sebuah judul yang lengkap. Pada tombol main akan menampilkan halaman yang berisi pertanyaan dan pilihan jawaban. Pada tombol kembali akan menampilkan halaman sebelum halaman kuis. Berikut merupakan rancangan halaman pertanyaan dari kuis. Gambar 3.10 Rancangan Halaman Kuis Keterangan : 1. Teks pertanyaan memiliki font Kozuka Mincho Pro B dan berwarna merah. 2. Pilihan jawaban merupakan tombol dan akan berubah warna jika kursor diarahkan. 3. Tombol kembali memiliki efek perubahan warna saat kursor diarahkan.

10 Pada setiap pilihan jawaban merupakan tombol. Jika kita memilih salah satu jawaban maka otomatis beralih ke pertanyaan selanjutnya. Pada tombol kembali akan menampilkan halaman sebelum halaman pertanyaan. Jika semua pertanyaan telah selesai dijawab, maka animasi akan otomatis menampilkan skor. Berikut merupakan rancangan halaman skor. Gambar 3.11 Rancangan Halaman Skor Keterangan : 1. Skor merupakan teks yang memiliki font Snap ITC dan berwarna merah muda. 2. Jumlah skor merupakan angka. 3. Tombol home dan tombol kunci jawaban memiliki efek perubahan warna saat kursor diarahkan. Pada kolom skor, skor merupakan nilai dari setiap jawaban yang dijawab dengan benar dan setiap jawaban benar memiliki skor 20. Dengan soal yang berjumlah 5 soal, maka jika semua jawaban dijawab dengan benar akan menampilkan skor 100. Pada tombol home akan menampilkan halaman utama dari aplikasi. Pada tombol kunci jawaban akan menampilkan kunci jawaban dari

11 pertanyaan-pertanyaan tersebut. Berikut rancangan tampilan halaman kunci jawaban. Gambar 3.12 Rancangan Halaman Kunci Jawaban Keterangan : 1. Judul halaman merupakan teks yang memiliki font Squeaky Chalk Sound dan berwarna ungu. 2. Kunci jawaban merupakan teks yang memiliki font Snap ITC dan berwarna biru. 3. Tombol home memiliki efek perubahan warna saat kursor diarahkan. Pada halaman ini memuat kunci jawaban bertujuan agar pengguna tahu jawaban yang benar. Tombol home pada halaman ini akan menampilkan halaman utama dari aplikasi.

12 BAB 4 IMPLEMENTASI SISTEM 4.1 Pengertian Implementasi Sistem Implementasi sistem adalah langkah-langkah atau proses yang dilakukan dalam menyelesaikan desain system yang telah disetujui, selanjutnya diinstal, diuji dan mulai digunakan untuk menggantikan system yang lama atau system yang diperbaiki. Implementasi merupakan tahap penerapan rancangan yang sudah dibuat ke dalam bahasa pemrograman yang digunakan. Dalam tahap ini dilakukan beberapa hal, yaitu penulisan program, kompilkasi dan membuat program aplikasi yang siap pakai. 4.2 Kebutuhan Sistem Sarana-sarana pendukung sangat dibutuhkan untuk memperoleh hasil dalam perancangan system yang baik, yaitu berupa komponen-komponen penting dalam menunjang penerapan sistem yang telah dirancang. Komponen-komponen tersebut yaitu: 1. Perangkat Keras (hardware) Perangkat keras adalah komponen-komponen yang membentuk suatu sistem komputer yang berhubungan dengan komponen lainnya, sehingga memungkinkan komputer dapat melakukan tugasnya. Umumnya peralatan

13 tersebut terdiri dari tiga jenis perangkat, yaitu masukan (input device), perangkat pengolahan (processor), dan perangkat keluaran (output device). 2. Perangkat Lunak (Software) Perangkat lunak adalah seluruh fasilitas suatu system pengolahan data yang bukan peralatan komputernya atau merupakan suatu susunan instruksi yang harus diberikan kepada unit pengolahan agar komputer dapat menjalankan pekerjaannya sesuai yang dibutuhkan. Fasilitas perangkat lunak terdiri dari sistem desain, program-program dan prosedurprosedur. Perangkat lunak yang digunakan adalah: a. Sistem operasi Windows 7. b. Adobe Flash CS3 sebagai software pemrograman. c. ClickCharts sebagai perancangan desain. 3. Unsur Manusia (Brainware) Unsur manusia merupakan aspek manusia yang menangani pengolahan komputer maupun pengembangan, yaitu: a. Analisis sistem, yaitu orang membentuk dan membangun fasilitas rancangan sistem atau program. b. Programmer, yaitu orang yang mengerti bahasa pemrograman yang digunakan dalam membuat dan membangun suatu program. c. Administrator, yaitu orang yang mengoperasikan sistem, seperti memasukkan data untuk dioperasikan oleh komputer dalam menghasilkan informasi dan lainnya. d. Public (pengguna), yaitu orang yang memakai system yang telah dirancang.

14 4.3 Tampilan Program Berikut ini adalah penjelasan dari rancangan tampilan program setelah diimplementasikan dengan menggunakan perangkat lunak Adobe Flash CS3. Rancangan tampilan mencakup tampilan halaman utama, tampilan halaman menu utama, tampilan halaman bangun datar, tampilan halaman bangun ruang, tampilan halaman contoh soal, dan tampilan halaman kuis Tampilan Halaman Utama Tampilan halaman utama pada Animasi Sistem Pembelajaran Matematika Pada Bangun Datar Dan Bangun Ruang Untuk Sekolah Menengah Pertama Dengan Flash CS3 dapat dilihat pada gambar berikut ini. Gambar 4.1 Tampilan Halaman Utama Tampilan halaman utama merupakan tampilan awal yang pertama kali muncul saat animasi dibuka. Halaman utama ini memuat judul animasi, yaitu Animasi Pembelajaran Matematika dan sebuah tombol start yang akan menampilkan menu-menu pada animasi.

15 4.3.2 Tampilan Halaman Menu Utama Tampilan halaman menu utama pada animasi ini dapat dilihat pada gambar berikut ini. Gambar 4.2 Tampilan Halaman Menu Utama Halaman menu utama merupakan halaman yang menampilkan menu-menu utama. Mengenal dua macam bangun yaitu bangun datar dan bangun ruang. Bangun datar akan menampilkan berbagai macam bangun datar begitu pula dengan bangun ruang Tampilan Halaman Bangun Datar Tampilan halaman bangun datar dapat dilihat pada gambar berikut ini.

16 Gambar 4.3 Tampilan Halaman Bangun Datar Halaman bangun datar merupakan halaman yang menampilkan berbagai macam bangun datar pada matematika. Pada halaman ini terdapat gambar-gambar bangun datar dan teks yang berada disamping gambar yang merupakan tombol. Apabila salah satu tombol tersebut diklik, maka akan menampilkan halaman penjelasan dan gambar dari bangun datar tersebut. Berikut adalah gambar salah satu tampilan dari penjelasan bangun datar. Gambar 4.4 Tampilan Halaman Penjelasan Bangun Datar

17 Pada halaman penjelasan bangun datar terdapat judul dari halaman, yaitu bangun datar yang dijelaskan. Pada halaman ini terdapat gambar yang berada di bagian kiri atas dan penjelasan berada dibagian kanan serta sebuah tombol back yang akan menampilkan halaman sebelum halaman penjelasan tampilan bangun datar ini dan tombol next menampilkan halaman penjelasan selanjutnya Tampilan Halaman Bangun Ruang Tampilan halaman bangun ruang dapat dilihat pada gambar berikut ini. Gambar 4.5 Tampilan Halaman Bangun Ruang Pada halaman bangun ruang ini terdapat tujuh bangun ruang. Pada halaman ini juga terdapat tombol penjelasan yang akan menampilkan penjelasan dari setiap bangun ruang yang tertera pada halaman ini. Berikut adalah gambar dari penjelasan bangun ruang.

18 Gambar 4.6 Tampilan Halaman Penjelasan Bangun Ruang Pada halaman ini terdapat judul yang merupakan nama dari bangun ruang yang dijelaskan. Selain judul juga terdapat gambar di bagian kiri atas dan penjelasan berada di bagian kanan. Tombol next pada halaman ini menampilkan penjelasan dari bangun ruang selanjutnya dan tombol back menampilkan halaman sebelumnya Tampilan Halaman Contoh Soal Tampilan halaman contoh soal dapat dilihat pada gambar berikut ini. Gambar 4.7 Tampilan Halaman Contoh Soal

19 Pada tampilan halaman ini terdapat contoh soal dari bangun datar dan bangun ruang. Pada bagian bawah gambar terdapat tombol next. Apabila tombol tersebut diklik maka akan menampilkan contoh soal berikutnya Tampilan Halaman Kuis Tampilan halaman kuis dapat dilihat pada gambar berikut ini. Gambar 4.8 Tampilan Halaman Kuis Pada tampilan halaman ini terdapat sebuah judul dan dua tombol, yaitu tombol main dan tombol kembali. Tombol main menampilkan lima pertanyaan sederhana. Berikut ini adalah tampilan halaman pertanyaan dari kuis ini.

20 Gambar 4.9 Tampilan Halaman Pertanyaan Pada halaman ini terdapat pertanyaan yang merupakan pertanyaan pilihan ganda. Setiap pilihan jawaban merupakan sebuah tombol. Apabila kita memilih salah satu jawaban, maka akan otomatis berlanjut ke pertanyaan selanjutnya sampai lima pertanyaan. Setelah selesai menjawab pertanyaan, maka akan ditampilkan skor dari pertanyaan yang telah dijawab. Tampilan halaman skor dapat dilihat pada gambar di bawah ini. Gambar 4.10 Tampilan Halaman Skor Pada halaman ini terdapat judul halaman dan nilai skor yang didapat dari menjawab pertanyaan-pertanyaan tersebut. Pada halaman ini juga terdapat tombol

21 home dan kunci jawaban. Pada tombol kunci jawaban menampilkan jawabanjawaban yang benar dari ke lima pertanyaan tersebut. Tampilan halaman kunci jawaban dapat dilihat pada gambar di bawah ini. Gambar 4.11 Tampilan Halaman Kunci Jawaban Pada halaman ini terdapat sebuah judul halaman dan jawaban-jawaban benar dari setiap pertanyaan. Terdapat juga sebuah tombol, yaitu tombol home yang menampilan halaman utama dari aplikasi ini.

22 BAB 5 KESIMPULAN DAN SARAN 5.1 Kesimpulan Kesimpulan yamg dapat diambil dari uraian yang telah dibahas dalam tugas akhir ini adalah: 1. Perancangan animasi ini mengenal tentang dua bangun pada Matematika yaitu bangun datar dan bangun ruang. 2. Perancangan animasi pembelajaran bangun datar dan bangun ruang ini dirancang untuk siswa tingkat menengah pertama. 3. Tahapan umum dalam pembuatan animasi pembelajaran yaitu, penentuan materi yang akan disampaikan, perancangan desain dan penggabungan antara desain dan materi. 4. Animasi yang terdapat pada aplikasi ini adalah Edit In Place, Frame By Frame dan ActionScript. 5. Kesulitan yang dihadapi penulis adalah pembuatan animasi ini dengan metode frame to frame sehingga membutuhkan waktu yang lama karena harus menyusun animasi dalam frame dan layer yang lebih dari satu.

23 5.2 Saran Saran yang diberikan untuk dapat mengembangkan animasi ini adalah: 1. Agar animasi tidak membosankan, sebaiknya interface animasi pembelajaran dibuat semenarik mungkin. 2. Jika telah selesai dalam pembuatan animasi pembelajaran, sebaiknya uji lagi untuk memastikan animasi telah berjalan sesuai dengan yang diharapkan serta informasi yang ditampilkan telah terjamin kebenarannya. 3. Buatlah back up dari animasi pembelajaran yang telah selesai untuk menghindari segala kemungkinan yang tidak diinginkan. 4. Mengembangkan desain dan tampilan lain agar aplikasi memiliki tampilan yang lebih baik lagi. 5. Dalam pembuatan animasi sebaiknya dilengkapi dengan video dan dapat juga digunakan gabungan dengan aplikasi pembuat animasi lain yang dapat membuat objek tiga dimensi agar animasi menjadi lebih menarik. 6. Dalam mempublikasikan flash sebaiknya jadikan file tersebut menjadi file HTML agar komputer yang tidak mempunyai flash player tetap dapat melihat hasil animasi.