BAB 3 PERANCANGAN ANIMASI. Operasi matematika pada taman kanak-kanak. Dengan menggunakan perancangan,

Transkripsi

1 BAB 3 PERANCANGAN ANIMASI 3.1 Perancangan Animasi Perancangan merupakan gambaran alur kerja dari aplikasi animasi pembelajaran Operasi matematika pada taman kanak-kanak. Dengan menggunakan perancangan, penulis dapat menggambarkan alur kerja dari aplikasi pembelajaran operasi matematika pada taman kanak-kanak. 3.2 Desain Halaman Awal Halaman awal adalah halaman pembuka ketika aplikasi pertama kali dijalankan. Desain tampilan awal animasi adalah sebagai berikut. Kalimat Pembuka Start Gambar 3.1 Desain Halaman Awal Animasi

2 19 Cara pembuatannya adalah sebagai berikut: 1. Buka lembar kerja Adobe Flash CS3, kemudian pilih Flash Document. 2. Buat satu Layer pada Timeline, yaitu Layer 1, dimana Timeline dan Layer 1 berada pada Scene Untuk pembuatan Image pada Layer awal, pilih Import pada menu File, kemudian pilih Import to Library. Masukkan gambar. 4. Untuk kalimat pembuka pilih Text Tool pada Toolbox dan ketikkan kalimat pembuka. 5. Untuk Start, pilih Oval Tool pada Toolbox, buat lingkaran di luar Stage, kemudian masukkan Text tool ke dalam lingkaran lalu ketikkan Start lalu klik kanan pilih Convert to Symbol lalu ubah menjadi Button dan berikan Actionscript. 6. Halaman ini diberikan suara(musik) dengan menggunakan Actionscript. 3.3 Desain Halaman Kategori Di halaman ini terdapat menu untuk masuk kedalam animasi yang berisi pembelajaran, kuis, dan profil. Pembuatan halaman kategori ini masih berada pada Scene 1 dan Layer 3 Frame 2. (Pada Layer 2 digunakan untuk background masingmasing penulisan). Desain halaman kategori adalah sebagai berikut.

3 20 KATEGORI PEMBELAJARAN KUIS PROFIL HOME Gambar 3.2 Desain Halaman Menu Cara pembuatannya adalah sebagai berikut: 1. Masukkan background halaman menu pada Layer 2 dengan cara klik File dan Import to Library, pilih gambar. Pada bagian Library drag gambar ke halaman kerja. 2. Pembuatan judul dan tombol menu dibuat pada Layer 3, Frame 2. Masukkan judul dengan menggunakan Text Tool. 3. Untuk 3 tombol menu tersebut dibuat menggunakan Oval Tool, kemudian masukkan Text pada masing masing tombol. Pada tiap tombol diubah menjadi Button dengan cara Convert to Symbol dan pilih Button. Pada masing masing tombol diberikan ActionScript. 4. Pada tombol kembali diberikan gambar tombol Home. Masukkan gambar dengan cara Import to Library, drag gambar dan buat gambar menjadi Button dengan cara Convert to Symbol dan pilih Button. Masukkan Actionscript pada tombol tersebut. 5. Halaman ini diberikan suara (musik) dengan menggunakan Actionscript.

4 Desain Halaman Pembelajaran Halaman pembelajaran berisi penjelasan dari kategori, dimana terdapat 3 pilihan yaitu Pengenalan angka, Penjumlahan, dan Pengurangan. Pembuatan halaman kategori ini masih berada di Scene 1 dan Layer 3 Frame 3. Desain halaman pembelajaran adalah sebagai berikut. PENGENALAN ANGKA BACK PENJUMLAHAN PENGURANGAN Gambar 3.3 Desain Halaman Pembelajaran Cara pembuatannya adalah sebagai berikut: 1. Masukkan Background halaman pembelajaran pada Layer 2 dan Frame 3 dengan cara klik File kemudian Import to Library. Drag gambar dari Library dan sesuaikan ukurannya. 2. Kemudian buat 3 buah tombol pilihan dengan menggunakan Rectangle Tool dan tulis tiap kata kata dengan Text Tool. Ubah 3 tombol tersebut menjadi Button dengan klik kanan Convert to Symbol dan pilih Button. 3. Masukkan tombol kembali (back) dengan mengambil gambar dengan cara Import to Library kemudian drag gambar kelembar kerja.

5 22 4. Untuk masing masing tombol digunakan Actionscript agar dapat berfungsi. 5. Halaman ini diberikan suara (musik) dengan menggunakan Actionscript. 3.5 Desain Halaman Pengenalan Angka Halaman ini merupakan animasi tentang angka-angka dalam matematika. Pembuatan halaman ini masih berada pada Scene 1 dan Layer 3 Frame 4. Desain halaman pengenalan angka adalah sebagai berikut. Pengenalan Angka Back Angka Angka Angka Angka Angka Angka Angka Angka Angka Angka Gambar 3.4 Desain Halaman Pengenalan Angka Cara pembuatannya adalah sebagai berikut: 1. Masukkan background halaman pengenalan angka pada Layer 2 Frame 4 dengan cara klik File kemudian Import to Library. Drag gambar dari Library dan sesuaikan ukurannya.

6 23 2. Pembuatan judul dan angka di buat pada Layer 3 dan Frame 4. Masukkan judul dan angka menggunakan Text Tool. 3. Masukkan tombol kembali (back) dengan mengambil gambar dengan cara Import to Library kemudian drag ke lembar kerja. Untuk tombol back gunakan Actionscript. 3.6 Desain Halaman Penjumlahan Pada halaman ini hanya menampilkan contoh soal penjumlahan dalam matematika. Halaman ini masih berada pada Scene 1 dan Layer 3 Frame 5 Desain halaman penjumlahan adalah sebagai berikut. Judul Back Gambar Operator Gambar Angka Angka Operator Hasil (Angka) Next Gambar 3.5 Desain Halaman Penjumlahan

7 24 Cara pembuatannya adalah sebagai berikut: 1. Masukkan background halaman penjumlahan pada Layer 2 dan Frame 5 dengan cara klik File kemudian Import to Library. Drag gambar dari Library kemudian sesuaikan ukurannya. 2. Pembuatan gambar, operator, angka, dan hasil (angka) dibuat pada Layer 3 dan Frame Pembuatan gambar dibuat dengan cara klik File kemudian Import to Library. Drag gambar dari Library kemudian sesuaikan ukuran dan jumlah yang diinginkan. 4. Pembuatan angka, operator, dan hasil (angka) dibuat dengan menggunakan Text Tool. 5. Masukkan tombol lanjut (next) dan tombol kembali (back) dengan cara klik File kemudian Import to Library lalu drag gambar ke lembar kerja. Untuk tombol lanjut (next) dan kembali (back) gunakan Actionscript. 3.7 Desain Halaman Pengurangan Pada halaman ini hanya menampilkan contoh soal pengurangan dalam matematika. Halaman ini masih berada pada Scene 1 dan Layer 3 Frame 6. Desain halaman penjumlahan adalah sebagai berikut.

8 25 Judul Back Gambar Angka Operator Gambar Angka Operator Hasil (Angka & Gambar) Next Gambar 3.6 Desain Halaman Pengurangan Cara pembuatannya adalah sebagai berikut: 1. Masukkan background halaman pengurangan pada Layer 2 dan Frame 10 dengan cara klik File kemudian Import to Library. Drag gambar dari Library kemudian sesuaikan ukurannya. 2. Pembuatan gambar, angka, operator dan hasil (angka & gambar) dibuat pada Layer 3 dan Frame Pembuatan gambar dibuat dengan cara klik File kemudian Import to Library. Drag gambar dari Library kemudian sesuaikan ukuran dan jumlah yang diinginkan 4. Pembuatan angka, pertanyaan dan hasil (angka) dibuat dengan menggunakan Text Tool. 5. Masukkan tombol lanjut (next) dan kembali (back) dengan cara klik File kemudian Import to Library lalu drag gambar ke lembar kerja. Untuk tombol lanjut (next) dan kembali(back) gunakan Actionscript.

9 Desain Halaman Kuis Halaman ini merupakan kumpulan pertanyaan atas informasi yang telah disampaikan pada halaman Pembelajaran. Pertanyaan pada kuis memiliki 2 kategori yaitu soal penjumlahan dan soal pengurangan berupa pilihan ganda. Dalam halaman kuis juga terdapat hasil penilaian berupa benar dan salah dari pertanyaan serta memiliki kunci jawaban atas pertanyaan tersebut. Halaman kuis ini dibuat dalam Scene 2. Desain halaman kuis adalah sebagai berikut. Text Back Pengurangan Penjumlahan Gambar 3.7 Desain Halaman Kuis Cara pembuatannya adalah sebagai berikut: 1. Masukkan background pada Layer 1 dengan cara klik File dan pilih Import to Library. Drag gambar dan sesuaikan ukurannya. Pada Layer 1 ini hanya digunakan untuk background kuis. 2. Buat Layer baru yang akan berisi text halaman (kuis) dengan menggunakan Text Tool. 3. Kemudian buat 2 tombol untuk memilih kategori kuis dengan cara pilih Retangle Tool pada Toolbox lalu masukkan Text menggunakan Text Tool

10 27 untuk masing-masing kategori lalu klik kanan Convert to Symbol kemudian ubah keduanya menjadi Button. 4. Untuk tombol kembali (back) masukkan dengan cara Import to Library kemudian drag ke lembar kerja. 5. Untuk halaman ini diberikan suara (musik) dengan menggunakan Actionscript. 3.9 Desain Halaman Soal Kuis Pengurangan Halaman ini merupakan kumpulan soal pengurangan yang terdiri dari 5 pertanyaan. Halaman soal memiliki background yang sama dengan halaman kuis. Desain halaman soal kuis adalah sebagai berikut. TEKS SOAL KUIS PILIHAN A PILIHAN C PILIHAN B PILIHAN D Gambar 3.8 Desain Halaman Soal Kuis Pengurangan Cara pembuatannya adalah sebagai berikut: 1. Klik kanan pada Frame 2 dan pilih Insert Blank Keyframe dan akan terbentuk lembar kerja baru dan background yang sama.

11 28 2. Masukkan soal dengan menggunakan Text Tool. 3. Buat pilihan ganda dengan Text Tool, kemudian ubah menjadi Button dengan cara klik kanan pada pilihan ganda, Convert to Symbol dan pilih Button. 4. Pada tombol Button tersebut masing masing digunakan Actionscript. 5. Lakukan hal yang sama untuk soal nomor 2-5 di Frame selanjutnya 3.10 Desain Halaman Soal Kuis Penjumlahan Halaman ini merupakan kumpulan soal penjumlahan yang terdiri dari 5 pertanyaan. Halaman soal memiliki background yang sama dengan halaman kuis serta desain dan background yang sama dengan halaman soal pengurangan. Desain halaman soal kuis adalah sebagai berikut. TEKS SOAL KUIS PILIHAN A PILIHAN C PILIHAN B PILIHAN D Gambar 3.9 Desain Halaman Soal Kuis Penjumlahan

12 29 Cara pembuatannya adalah sebagai berikut: 1. Untuk halaman ini dimulai dari Frame 9 karena Frame sebelumnya telah digunakan untuk soal pengurangan. Cara nya sama yaitu klik kanan pada Frame 9 dan pilih Insert Blank Keyframe dan akan terbentuk lembar kerja baru dan background yang sama. 2. Masukkan soal dengan menggunakan Text Tool. 3. Buat pilihan ganda dengan Text Tool, kemudian ubah menjadi Button dengan cara klik kanan pada pilihan ganda, Convert to Symbol dan pilih Button. 4. Pada tombol button tersebut masing masing digunakan Actionscript. 5. Lakukan hal yang sama untuk soal nomor 2-5 di Frame selanjutnya Desain Halaman Hasil Kuis Halaman ini merupakan halaman skor dari jawaban atas pertanyaan kuis. Letak halaman kuis ini berada pada 2 Frame yaitu Frame 7 dan Frame 14 yang berada pada Layer 2 karena masing-masing kategori kuis memiliki halaman hasil kuis. Desain halaman hasil kuis adalah sebagai berikut.

13 30 TEKS BACK JLH BENAR JLH SALAH KUNCI JAWABAN Gambar 3.10 Desain Halaman Hasil Kuis Cara pembuatannya adalah sebagai berikut: 1. Pada Frame 7 dan 14 buat kolom jumlah benar dan salah dengan Text Tool dan ubah menjadi Tynamic Text. 2. Kemudian buat kolom jumlah benar dan salah dengan Text Tool dan ubah menjadi Dynamic Text. 3. Masukkan gambar back dengan klik File dan Import to Library, kemudian drag gambar dan ubah menjadi Button dengan cara Convert to Symbol dan ubah menjadi Button. 4. Masukkan kolom kunci jawaban dengan Text Tool kemudian ubah menjadi Button dengan cara Convert to Symbol. 5. Untuk setiap button dan teks yang berisi jumlah benar menggunakan Actionscript.

14 Desain Halaman Kunci Jawaban Halaman ini merupakan kunci jawaban dari soal soal kuis pengurangan maupun penjumlahan yang berada pada Frame 8 dan 16. Desain halaman kunci jawaban adalah sebagai berikut. KUIS KUNCI JAWABAN BACK Gambar 3.11 Desain Halaman Kunci Jawaban Cara pembuatannya adalah sebagai berikut: 1. Masukkan kunci jawaban dengan menggunakan Text Tool, masukkan kunci jawabannya. 2. Masukkan kembali tombol kembali (back) dengan cara klik File pilih Import to Library dan drag tombol kedalam lembar kerja. 3. Ubah tombol kembali (back) menjadi Button dengan cara klik kanan dan pilih Convert to Symbol dan pilih Button. Masukkan Script pada tombol tersebut.

15 Desain Halaman Profil Halaman ini merupakan halaman tentang penulis dan berisikan informasi mengenai penulis. Halaman ini berada pada Scene 3. Desain halaman profil adalah sebagai berikut. F NAMA DAN NIM O T O INFORMASI PENULIS BACK Gambar 3.12 Desain Halaman Profil Cara pembuatannya adalah sebagai berikut: 1. Masukkan background pada Layer 1 dengan cara klik File dan Import to Library. Drag dan masukkan gambar ke lembar kerja dan sesuaikan ukurannya begitu juga dengan foto profil. 2. Pada Layer 2 ketik nama dan nim dengan Text Tool dan informasi tentang penulis juga menggunakan Text Tool. 3. Masukkan tombol kembali (back) dengan cara klik File dan Import to Library. Ubah menjadi Button dengan Convert to Symbol dan pilih Button. Masukkan Script pada tombol agar dapat digunakan. 4. Halaman ini diberikan suara (musik) dengan menggunakan Actionscript.

16 BAB 4 IMPLEMENTASI 4.1 Hasil Hasil akan menjelaskan secara visual bagaimana tampilan dari animasi pembelajaran operasi matematika dimulai dari halaman awal, halaman kategori, halaman pembelajaran, halaman kuis, dan halaman profil Halaman Awal Pertama kali membuka aplikasi pembelajaran ini maka tampilan yang akan muncul adalah halaman awal. Halaman ini didesain memiliki 1 tombol saja yaitu tombol start. Jika user menekan tombol start, maka user akan masuk ke halaman Kategori. Berikut adalah tampilan halaman awal. Gambar 4.1 Halaman Awal

17 Halaman Kategori Halaman ini berisi tombol tombol yang jika diklik akan menuju kehalaman yang dimaksudkan. Tombol tombol tersebut terdiri dari pembelajaran, kuis, profil, dan tombol kembali (home). Berikut adalah tampilan halaman menu. Gambar 4.2 Halaman Kategori Halaman Pembelajaran Halaman ini berisi sasaran penjelasan dan memiliki 3 kategori yaitu: Pengenalan angka, penjumlahan, dan pengurangan serta memiliki 1 tombol kembali (back). Berikut tampilan halaman teori.

18 35 Gambar 4.3 Halaman Pembelajaran Halaman Pengenalan Angka Halaman ini merupakan halaman yang berisi gambar tentang angka dan hanya memiliki 1 tombol yaitu tombol kembali(back). Berikut tampilan halaman pengenalan angka. Gambar 4.4 Halaman Pengenalan Angka

19 Halaman Penjumlahan Halaman ini merupukan halaman yang berisi contoh soal penjumlahan dan hanya memiliki 1 tombol yaitu tombol kembali(back). Berikut tampilan halaman penjumlahan. Gambar 4.5 Halaman Penjumlahan Halaman Pengurangan Halaman ini adalah halaman yang berisi contoh soal pengurangan dan hanya memiliki 1 tombol yaitu tombol kembali(back). Berikut tampilan halaman pengurangan.

20 37 Gambar 4.6a Halaman Pengurangan Gambar 4.6b Halaman Pengurangan

21 Halaman Kuis Halaman ini terdiri dari 2 kategori pertanyaan yaitu soal pengurangan dan soal penjumlahan, dimana masing-masing kategori terdiri dari 5 pertanyaan yang masing masing merupakan pilihan ganda. Halaman ini hanya mempunyai 1 tombol yaitu tombol kembali(back). Berikut tampilan halaman kuis. Gambar 4.7 Halaman Awal Kuis Halaman Soal Kuis Halaman ini merupakan halaman yang menampilkan soal-soal kuis baik soal pengurangan maupun penjumlahan dan memiliki background yang sama. Berikut tampilan halaman soal kuis.

22 39 Gambar 4.8a Halaman Soal Kuis Pengurangan Gambar 4.8b Halaman Soal Kuis Penjumlahan Halaman Hasil Kuis dan Kunci Jawaban Pada halaman ini terdapat tampilan hasil kuis yang telah di kerjakan, baik soal pengurangan maupun penjumlahan. Hasil tersebut merupakan hasil jumlah benar dan salah serta masing-masing kategori memiliki kunci jawaban yang dapat dilihat

23 40 dengan cara menekan tulisan Lihat Kunci Jawaban. Berikut tampilan halaman hasil kuis dan kunci jawaban. Gambar 4.9a Halaman Hasil Kuis Pengurangan Gambar 4.9b Halaman Hasil Kuis Penjumlahan

24 41 Gambar 4.9c Halaman Kunci Jawaban Pengurangan Gambar 4.9d Halaman Kunci Jawaban Penjumlahan

25 Halaman profil Pada halaman profil ini berisi tentang foto dan biodata dari penulis dan juga terdapat button kembali (back). Fungsi button ini adalah kembali ke halaman kategori. Berikut tampilan halaman profil. Gambar 4.10 Halaman Profil 4.3 Kelebihan Aplikasi Berikut beberapa kelebihan animasi, diantaranya: 1. Memberikan media pembelajaran yang menarik bagi pengguna dengan aplikasi full color. 2. Aplikasi ini lebih mudah digunakan dibandingkan dengan buku.

26 Kelemahan Aplikasi Beberapa kelemahan aplikasi, diantaranya: 1. Animasi yang ditampilkan masih berupa animasi 2 dimensi, sehingga terlihat tidak begitu nyata. 2. Animasi ini bersifat statis. Perubahan animasi yang ditampilkan harus diubah dari file.fla animasi tersebut. 3. Animasi yang dibuat belum dipergunakan secara universal.

27 BAB 5 PENUTUP 5.1 Kesimpulan Dari hasil pengamatan penulis maka dapat disimpulkan bahwa: 1. Dengan aplikasi ini para pengguna dapat mempelajari operasi matematika dengan mudah dan praktis, karna tidak menggunakan buku sebagai model pembelajaran. 2. Aplikasi yang dibuat menarik, karena aplikasi ini dilengkapi dengan gambar, warna, suara sehingga para pengguna khususnya anak-anak akan lebih tertarik dan tidak jenuh. 5.2 Saran Saran yang dapat penulis berikan berhubungan dengan aplikasi yang dibuat ini adalah: 1. Dalam pembuatan animasi sebaiknya di lengkapi dengan video dan dapat juga digunakan gabungan dengan aplikasi pembuatan animasi lain yang dapat membuat objek 3 dimensi agar animasi menjadi lebih menarik. 2. Kosakata dan gambar masih belum lengkap sehingga penulis harus melengkapinya.

28 45 3. Dalam aplikasi ini penulis belum membuat teori dasar dalam berhitung dan hanya membuat contoh soal untuk memahami cara berhitung.