Animasi Sistem Pembelajaran Matematika Pada Bangun Datar Dan Bangun Ruang Untuk Sekolah Menengah Pertama Dengan Flash CS3 Chapter III V
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
Universitas Sumatera Utara
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
Universitas Sumatera Utara
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.
Universitas Sumatera Utara
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.
Universitas Sumatera Utara
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.
Universitas Sumatera Utara
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.
Universitas Sumatera Utara
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.
Universitas Sumatera Utara
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
Universitas Sumatera Utara
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.
Universitas Sumatera Utara
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
Universitas Sumatera Utara
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.
Universitas Sumatera Utara
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
Universitas Sumatera Utara
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.
Universitas Sumatera Utara
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.
4.3.1 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.
Universitas Sumatera Utara
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.
4.3.3 Tampilan Halaman Bangun Datar
Tampilan halaman bangun datar dapat dilihat pada gambar berikut ini.
Universitas Sumatera Utara
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
Universitas Sumatera Utara
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.
4.3.4 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.
Universitas Sumatera Utara
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.
4.3.5 Tampilan Halaman Contoh Soal
Tampilan halaman contoh soal dapat dilihat pada gambar berikut ini.
Gambar 4.7 Tampilan Halaman Contoh Soal
Universitas Sumatera Utara
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.
4.3.6 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.
Universitas Sumatera Utara
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
Universitas Sumatera Utara
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.
Universitas Sumatera Utara
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.
Universitas Sumatera Utara
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.
Universitas Sumatera Utara
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
Universitas Sumatera Utara
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
Universitas Sumatera Utara
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.
Universitas Sumatera Utara
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.
Universitas Sumatera Utara
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.
Universitas Sumatera Utara
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.
Universitas Sumatera Utara
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.
Universitas Sumatera Utara
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
Universitas Sumatera Utara
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.
Universitas Sumatera Utara
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
Universitas Sumatera Utara
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.
Universitas Sumatera Utara
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
Universitas Sumatera Utara
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.
Universitas Sumatera Utara
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.
4.3.1 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.
Universitas Sumatera Utara
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.
4.3.3 Tampilan Halaman Bangun Datar
Tampilan halaman bangun datar dapat dilihat pada gambar berikut ini.
Universitas Sumatera Utara
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
Universitas Sumatera Utara
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.
4.3.4 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.
Universitas Sumatera Utara
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.
4.3.5 Tampilan Halaman Contoh Soal
Tampilan halaman contoh soal dapat dilihat pada gambar berikut ini.
Gambar 4.7 Tampilan Halaman Contoh Soal
Universitas Sumatera Utara
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.
4.3.6 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.
Universitas Sumatera Utara
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
Universitas Sumatera Utara
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.
Universitas Sumatera Utara
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.
Universitas Sumatera Utara
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.
Universitas Sumatera Utara