Langkah-langkah Pembuatan Multimedia Interaktif Matematika
MELUKIS SUDUT-SUDUT ISTIMEWA,YUK!
Oleh: Vera Khairunnisa (0605876) email:
[email protected] website: www.veyvey.wordpress.com
JURUSAN PENDIDIKAN MATEMATIKA FAKULTAS PENDIDIKAN MATEMATIKA DAN ILMU PENGETAHUAN ALAM UNIVERSITAS PENDIDIKAN INDONESIA 2010
Page |1 Sebelum membuat program interaktif melukis sudut-sudut istimewa, kita buat dulu masing-masing animasi yang ada di dalamnya, yaitu animasi sudut-sudut istimewa, berikut langkah-langkah pembuatannya.
MEMBUAT ANIMASI GARIS BAGI SUDUT 1. Buka file flash yang baru, kemudian pada layer 1 beri nama sudut
2. Buat sebarang sudut menggunakan line tool kemudian beri nama sudut B.
3. Buat layer baru dan beri nama busur1, kemudian buat lingkaran dan letakkan pusatnya pada sudut B, seperi gambar berikut.
Created by: Vera Khairunnisa (0605876) email:
[email protected] website: www.veyvey.wordpress.com
Page |2 4. Kemudian hapus sebagaian lingkaran tersebut dengan menggunakan eraser tool, hingga membentuk busur.
5. Kemudian tekan F6 (insert keyframe) pada frame 5, frame 9, frame 13, dan frame 17
6. Kemudian pada frame 1, frame 5, frame 9, dan frame 13 hapus lingkaran sedikit demi sedikit agar nantinya seolah-olah bergerak mengahasilkan animasi membuat busur. Kemudian tekan F5 pada frame 17 layer sudut. Pindahkan layer sudut supaya di atas layer busur 1.
Created by: Vera Khairunnisa (0605876) email:
[email protected] website: www.veyvey.wordpress.com
Page |3 7. Dengan cara yang sama sepert langkah 3 sampai dengan 6, buat 2 buah busur lingkaran yang masing-masing pusatnya di kedua perpotongan kaki sudut sehingga kedua busur tersebut berpotongan di satu titik. Kemudian buat layer baru dan beri nama garis, kemudian diletakkan di daerah layer busur 3.
8. Kemudian tekan F5 pada layer garis, pada frame 41, diikuti juga dengan layer-layer yang lain, tekan F5 pada frame 41.
9. Pada layer garis, frame 41 tekan F5, kemudian tekan F6, lalu buat garis yang menghubungkan titik B ke perpotongan antara 2 buah busur tadi.
Created by: Vera Khairunnisa (0605876) email:
[email protected] website: www.veyvey.wordpress.com
Page |4 10. Tekan F6 pada frame 60, kemudian pada frame 41 hapus sebagian garis tersebut. Copy frame 60 ke frame 61, kemudian Kemudian tekan F5 di frame 65 pada seluruh layer.
11. Setelah itu pada pada layer garis, drag frame 41 sampai frame 60 kemudian pada panel properties atur tween sebagai berikut.
Created by: Vera Khairunnisa (0605876) email:
[email protected] website: www.veyvey.wordpress.com
Page |5 MEMBUAT ANIMASI SUDUT 90o 1.
Buka file flash yang baru, kemudian pada layer 1 beri nama garis 1, kemudian dengan menggunakan Line Tool, buat sebuah garis.
2.
Tekan F6 pada frame 25, kemudian pada frame 1 hapus sebagian garis tersebut. Drag frame 1 sampai frame 25, kemudian pada panel properties, ubah tween menjadi shape.
3.
Kemudian tekan F6 pada frame 35
4.
Buat layer baru yang diberi nama titik, yang diletakkan dia atas layer garis. Kemudian pada layer titik, tekan F6 pada frame 25, kemudian buat titik C, setelah itu tekan F6 pada frame 30, kemudian drag dari frame 25 sampai frame 30, kemudian klik kanan -> create motion tween. Lalu tekan F5 pada frame 35 dan hasilnya seperti berikut.
Created by: Vera Khairunnisa (0605876) email:
[email protected] website: www.veyvey.wordpress.com
Page |6
5.
Buat layer baru lagi, dan beri nama busur 1. Tekan F6 pada frame 35, kemudian buat busur lingkaran yang berpusat di C sehinggga memotong dua titik pada garis tersebut. Tekan F6 lagi pada frame 39, frame 43, frame 47, frame 51, frame 55, dan frame 59. Kemudian pada frame 39, frame 43, frame 47, frame 51, frame 55, dan frame 59 hapus busur sedikit demi sedikit agar nantinya seolah-olah bergerak mengahasilkan animasi membuat busur.
6.
Buat layer baru lagi dan beri nama busur 2. Dengan cara yang sama seperti langkah 5, buat busur yang berpusat di A seolah-olah bergerak mengahasilkan animasi membuat busur.
7.
Buat layer baru lagi dan beri nama busur 3. Dengan cara yang sama seperti langkah 5, buat busur yang berpusat di B seolah-olah bergerak mengahasilkan animasi membuat busur.
Created by: Vera Khairunnisa (0605876) email:
[email protected] website: www.veyvey.wordpress.com
Page |7 8.
Kemudian buat layer baru lagi, dan beri nama garis 2. Tekan F6 pada frame 105, kemudian buat garis yang menghubungkan titik C ke perpotongan dua buah busur, langkah-langkah yang dilakukan mirip seperti langkah 3. Sedangkan pada layer lainnya, tekan F5 pada frame 140.
Created by: Vera Khairunnisa (0605876) email:
[email protected] website: www.veyvey.wordpress.com
Page |8 MELUKIS SUDUT 60o 1. Buka file flash baru, kemudian pada layer 1, beri nama garis 1. Lalu buat sebuah garis.
2. Tekan F6 pada frame 25, kemudian pada frame 1 hapus sebagian garis tersebut. Drag frame 1 sampai frame 25, kemudian pada panel properties, ubah tween menjadi shape.
3. Kemudian tekan F6 pada frame 35
4. Buat layer baru yang diberi nama titik, yang diletakkan dia atas layer garis. Kemudian pada layer titik, tekan F6 pada frame 1, kemudian buat titik A, setelah itu tekan F6 pada frame 35, kemudian buat titik B dan tekan F6 pada frame 40.
Created by: Vera Khairunnisa (0605876) email:
[email protected] website: www.veyvey.wordpress.com
Page |9 5. Buat layer baru lagi, dan beri nama busur 1. Tekan F6 pada frame 40, kemudian buat busur lingkaran sehinggga memotong titik pada garis tersebut. Tekan F6 lagi pada frame 44, frame 48, frame 52, frame 56, frame 60, dan frame 64. Kemudian pada frame 44, frame 48, frame 52, frame 56, frame 60, dan frame 64 hapus busur sedikit demi sedikit agar nantinya seolah-olah bergerak menghasilkan animasi membuat busur. Setelah itu tekan F6 pada frame 65, lalu buat titik C. kemudian tekan F6 pada frame 70, lalu tekan F5 pada layer garis 1 dan titik di frame 70.
6. Buat layer baru lagi dan beri nama busur 2. Dengan cara yang sama seperti langkah 4, buat busur yang berpusat di C sehingga memotong busur sebelumnya seolah-olah bergerak mengahasilkan animasi membuat busur. Kemudian tekan F5 pada frame 94 di layer lainnya.
7. Kemudian buat layer baru lagi, dan beri nama garis 2. Tekan F6 pada frame 94, kemudian buat garis yang menghubungkan titik A ke perpotongan dua buah busur, langkah-langkah yang dilakukan mirip seperti langkah 3. Sedangkan pada layer lainnya, tekan F5 pada frame 125.
Created by: Vera Khairunnisa (0605876) email:
[email protected] website: www.veyvey.wordpress.com
P a g e | 10
LANGKAH-LANGKAH PEMBUATAN PROGRAM MELUKIS SUDUT-SUDUT ISTIMEWA 1. Beri nama layer 1 dengan backround, dan buat tampilan seperti berikut.
2. Pada frame ke 2, tekan F6, lalu buat backround seperti langkah 2, tapi warnanya dibedakan. Kemudian kunci layer backround.
Created by: Vera Khairunnisa (0605876) email:
[email protected] website: www.veyvey.wordpress.com
P a g e | 11 3. Buat layer 2 dengan nama welcome, buat animasi teks dengan menggunakan animasi tweening, dan juga masukkan sebuah gambar animasi. Lalu kunci layer tersebut.
4. Buat layer 3 dengan nama primary button, buat tombol menu utama dan keluar, seperti berikut.
Created by: Vera Khairunnisa (0605876) email:
[email protected] website: www.veyvey.wordpress.com
P a g e | 12 5. Buat layer 4 dengan nama menu button, kemudian buat tombol tentang program, indikator, simulasi materi, dan profil seperti berikut. Lalu buat layer 5 dengan nama menu utama, lalu buat animasi menu utama seperti pada gambar. Animasi ini hanya berupa animasi motion tween.
6. Buat layer 6 dengan nama isi, kemudian buat kotak dengan menggunakan rectangle tool, lalu convert to movie clip dan beri nama isi_mc, lalu klik 2x kotak tersebut untuk masuk ke isi_mc.
Created by: Vera Khairunnisa (0605876) email:
[email protected] website: www.veyvey.wordpress.com
P a g e | 13 7. Buat halaman tentang program, indikator, simulasi materi, dan profil pada masing-masing frame di isi_mc.
8. Pada halaman simulasi materi buat tombol next_btn dan prev_btn dengan action script berikut. Untuk next_btn
Untuk prev_btn
Created by: Vera Khairunnisa (0605876) email:
[email protected] website: www.veyvey.wordpress.com
P a g e | 14 9. Untuk memasukkan animasi sudut, maka pada halaman simulasi materi dibuat beberapa movie clip, yaitu sudut60_mc, sudut90_mc, dan gbagi_mc. Berikut contoh sudut60_mc, yang di dalamnya tedapat tombol untuk mengendalikan program animasi tersebut, dan layer sudut 60 adalah animasi sudut yang telah dibuat pada program flash secara terpisah dengan program ini. Animasi ini di masukkan lewat “import to stage”. Begitu juga movie clip lainnya.
Berikut action script untuk: Tombol play
Tombol pause
Tombol stop
10. Masih pada isi_mc, buat layer yang diberi nama action dan ketikkan action script berikut pada frame 1
Kemudian tekan F6 pada frame 7. Created by: Vera Khairunnisa (0605876) email:
[email protected] website: www.veyvey.wordpress.com
P a g e | 15 11. Kembali pada Scene 1, kemudian buat layer baru lagi yang diberi nama action. Lalu ketiikan action berikut.
Ketikkan action script pada frame 1
Ketikkan action script pada frame 2
Ketikkan action script pada frame 11
Ketikkan action script pada frame 20
12. Tambahkan beberapa animasi, button effect, dan backround music (musik latar).
Created by: Vera Khairunnisa (0605876) email:
[email protected] website: www.veyvey.wordpress.com