BAHAN PRAKTIKUM FLASH. Digunakan Untuk matakuliah Pengembangan Media Pembelajaran Matematika

BAHAN PRAKTIKUM FLASH Digunakan Untuk matakuliah Pengembangan Media Pembelajaran Matematika Bahan praktikum ini berisi latihan penunjang untuk matakuliah pengembangan media pembelajaran matematika. Berisi beberapa latihan untuk praktikum. Diharapkan dengan adanya bahan ini, mahasiswa dapat membuat media pembelajaran Matematika khususnya berbasis Flash. 2013

PRAKTIKUM : 1 MEMBUAT OBJEK DENGAN ADOBE FLASH 1. Buatlah dokumen baru. 2. Untuk membuat objek, Anda dapat memanfaatkan beberapa tool yang ada di toolbox. Misalnya untuk membuat persegi panjang, klik rectangle tool (atau tekan R) pada toolbox. Kemudian atur property dari rectangle tool pada panel property di bawah. Menentukan ketebalan garis tepi Digunakan untuk mengatur jenis garis tepi Menentukan warna garis tepi Menentukan warna bidang (fiil) Digunakan untuk mengatur kelengkungan Rectangle 3. Setelah mengatur property rectangle, buatlah persegi panjang di stage dengan cara drag pada stage bentuk persegi panjang. Sehingga diperoleh tampilan seperti berikut: 4. Secara garis besar, untuk membuat objek di Adobe Flash dapat digunakan cara di atas. Latihan : Buatlah tampilan seperti berikut Jurusan Matematika, FMIPA UM. 1

PRAKTIKUM : 2 MEMBUAT BUTTON 1. Buatlah dokumen baru. 2. Klik rectangle tool (tombol R), kemudian ubah propertinya seperti gambar berikut: 3. Buat suatu objek mirip tombol sebagai berikut, kemudian convert menjadi symbol dengan type button dengan double klik objek, kemudian tekan F8. 4. klik OK, maka tombol telah terbentuk. 5. Double klik tombol yang baru dibuat, maka pada timeline akan muncul tampilan seperti berikut: Maka ada 4 frame yang muncul Up : Kondisi tombol pada saat kursor tidak di atas tombol. Over : Kondisi tombol saat kursor di atas tombol. Down : Kondisi tombol saatmouse diklik. Hit : Kondisi tombol saat mouse diangkat. 6. Klik frame Up, kemudian buat teks Tombol. Letakkan teks tepat di tengah tombol. 7. Klik kanan frame over, pilih insert keyframe. Kemudian seleksi tombol, ubah warna tombol menjadi kuning. 8. Klik kanan frame Down, pilih insert keyframe. Kemudian seleksi tombol, ubah warna tombol menjadi merah. Jurusan Matematika, FMIPA UM. 2

9. Kembali ke Scene 1, dengan cara klik scene 1. 10. Jalankan animasi dengan menekan tombol ctrl + enter. Amati tombol yang telah Anda buat. PRAKTIKUM : 3 ANIMASI DASAR: MOTION TWEEN 1. Buatlah dokumen flash. 2. Buatlah persegi panjang dengan rectangle tool pada stage. 3. Ubah persegi panjang yang dibuat menjadi Graphic. Caranya, pilih selection tool, kemudian double klik pada persegi panjang. Pada menu, pilih Modify convert to symbol (atau tekan F8). 4. Pada kotak dialog yang muncul isikan isian berikut: 5. Klik Ok. Kemudian klik mouse di frame 30 pada Timeline, kemudian pilih Insert Timeline Keyframe atau klik kanan mouse di frame 30, pilih Insert Keyframe. Jurusan Matematika, FMIPA UM. 3

6. Klik mouse pada persegi panjang, kemudian geser persegi panjang ke kanan. 7. Pada Timeline akan muncul tampilan seperti berikut: 8. Blok pada Timeline dari frame 1 sampai 30. Kemudian pilih jendela Properties, pada pilihan Tween pilih Motion. Atau klik kanan mouse pada Timeline pilih Create Motion Tween. 9. Apabila animasi Motion Tween dibuat, maka pada Timeline akan muncul panah seperti berikut 10. Tekan ctrl + enter untuk melihat hasilnya. PRAKTIKUM : 4 ANIMASI DASAR: MOTION SHAPE 1. Buat file baru. 2. Dengen menggunakan Oval Tool, buatlah objek oval. Jurusan Matematika, FMIPA UM. 4

3. Klik di frame 40 pada time line, klik kanan mouse pilih Insert Blank Keyframe 4. Di posisi frame ke-40, buatlah objek persegi panjang. 5. Klik mouse pada bagian tengan timeline, pilih jendela properties, pada opsi Tween pilih Shape. 6. Jalankan animasi dengan menekan tombol ctrl+enter. PRAKTIKUM : 5 ANIMASI DASAR: MOTION GUIDE 1. Buat file baru. 2. Ganti nama layer 1 menjadi objek. 3. Kemudian klik menu Insert Timeline Motion Guide. 4. Pada layer objek frame ke-1 buat lingkaran dengan oval tool. Jurusan Matematika, FMIPA UM. 5

5. Convert objek menjadi Graphic dengan cara double klik objek dan tekan F8. Beri nama symbol menjadi lingkaran_gr. 6. Pada layer Guide:objek pilih frame ke-1. Buatlah suatu lintasan dengan menggunakan pencil tool (atau tekan tombol y pada keyboard). 7. Klik kanan frame ke-40 pada layer objek, pilih Insert KeyFrame. 8. Klik kanan frame ke-40 pada layer Guide:objek, pilih Insert KeyFrame. 9. Pada frame ke-40 pada layer objek, pindahkan objek lingaran_gr ke akhir lintasan. 10. klik kanan frame ke-1 pada layer objek, pilih Create Motion Tween. 11. Jalankan animasi dengan menekan ctrl+enter. Jurusan Matematika, FMIPA UM. 6

PRAKTIKUM : 6 ANIMASI DASAR: MASKING 1. Buka file baru. 2. Ubah background dengan warna hitam melalui property. 3. Buat dua layer. Ubah nama layer menjadi layer teks dan mask dengan posisi layer mask di atas layer teks. 4. Pada layer teks, di frame ke-1 buat tulisan UNIVERSITAS NEGERI MALANG dengan warna kuning seperti gambar berikut: 5. Klik kanan frame 40 pada layer text dan pilih Insert Frame. 6. Pada layer mask frame ke-1 buatlah elips dengan menggunakan oval tool dan beri warna hitam (sesuai dengan warna background). Letakkan di sebelah kiri stage, lurus dengan teks yang dibuat. 7. Pada layer mask frame ke-40 klik kanan pilih Insert Keyframe. Lalu ubah posisi elips ke samping kanan stage. Jurusan Matematika, FMIPA UM. 7

8. Pada layer mask frame ke-1 klik kanan pilih Create Motion Tween. 9. Pada layer mask, klik kanan kemudian pilih mask. 10. Jalankan animasi dengan menekan ctrl+enter. PRAKTIKUM : 7 MENYISIPKAN SUARA PADA ANIMASI 1. Bukalah file yang menyimpan animasi masking yang telah dibuat 2. Tambahkan layer baru, posisikan di atas dan ganti nama layer dengan suara. 3. Pilih menu file Import Import to Library 4. Pilih file suara yang akan di import ke dalam library flash. Jika sudah, maka nama file suara yang diimport akan muncul di dalam library. Jurusan Matematika, FMIPA UM. 8

5. Pada layer suara frame ke-1, buka library, drag file suara yang anda import ke dalam stage. 6. Untuk mengatur efek dan pengulangan suara, dapat diganti pada panel properties. 7. jalankan animasi dengan menekan tombol ctrl + enter pada keyboard. PRAKTIKUM : 8 MENULIS ACTIONSCRIPT PADA FRAME 1. Buatlah dokumen baru. 2. Buat objek persegi panjang dan convert menjadi symbol dengan type movie clip. (double klik objek, tekan F8 pilih movie clip dan ok). 3. Ubah nama instance objek menjadi kotak. 4. klik kanan frame 1, pilih actions. Pada panel actions tulislah script berikut: Jurusan Matematika, FMIPA UM. 9

5. Jalankan animasi dengan menekan tombol ctrl+enter. Jika diamati, terlihat bahwa animasi hanya bergerak sekali. Karena script tersebut hanya dibaca sekali pada saat loading. Jika ingin animasi berjalan terus menerus maka harus dibuat script tersebut selalu dibaca hingga properties movie clip selalu berubah. Ada dua cara yang dapat dilakukan: a. Menambah 1 frame (frame 1 dan frame 2 sama) pada time line. b. Memodifikasi ActionScript menjadi berikut: Latihan : 1. Buatlah animasi jarum jam dengan memutar garis searah jarum jam. 2. Buatlah Animasi Fade in/fade out dari suatu objek. 3. Buatlah Animasi Zoom in/zoom out dari suatu objek. PRAKTIKUM : 9 MENULIS ACTIONSCRIPT PADA MOVIE CLIP 1. Buatlah dokumen baru. 2. Buat objek lingkaran dan convert menjadi symbol dengan type movie clip. (double klik objek, tekan F8 pilih movie clip dan ok). 3. Ubah nama instance name menjadi lingkaran. Jurusan Matematika, FMIPA UM. 10

4. Klik lingkaran, dan tekan F9 untuk menampilkan jendela ActionScript. Pastikan bahwa Anda menulis di actionscript movie clip. 5. Jalankan animasi dengan menekan tombol ctrl + enter. PRAKTIKUM : 10 MENULIS ACTIONSCRIPT PADA BUTTON 1. Buatlah dokumen baru. 2. Ganti nama layer 1 menjadi objek. Kemudian buat layer baru lagi dan ganti nama dengan kontrol. 3. Buat garis pada layer 1 frame 1. Kemudian convert menjadi symbol dengan type movie clip. Beri nama instance dengan nama garis. 4. Pada layer kontrol, buatlah 5 tombol seperti berikut: 5. Klik tombol geser kiri, kemudian tulis actionscript berikut: Jurusan Matematika, FMIPA UM. 11

6. Klik tombol geser kanan, kemudian tulis actionscript berikut: 7. Klik tombol putar kiri, kemudian tulis actionscript berikut: 8. klik tombol putar kanan, kemudian tulis actionscript berikut: 9. Jalankan animasi dengan menekan tombol ctrl + enter pada keyboard. PRAKTIKUM : 10 MEMBUAT LINK ANTAR HALAMAN (FUNGSI GOTO) Pada praktikum kali ini, kita akan belajar bagaimana membuat media pembelajaran yang sederhana dengan konsep menambilkan halaman ketika suatu tombol di klik. Materi yang disajikan adalah materi tentang penerapan integral. Anda dapat mengganti materi sesuai dengan keinginan. 1. Buatlah dokumen baru dengan ukuran 700 x 450. 2. Ganti nama layer 1 dengan nama background. Kemudian buatlah background sesuai selera Anda pada layer background frame 1. Berikut contoh tampilan layer background. Jurusan Matematika, FMIPA UM. 12

3. Kemudian buatlah layer baru di atas layer background. Beri nama layer tersebut dengan layer konten. Kemudian buatlah menu utama pada layer konten frame 1, dengan tampilan sebagai berikut: Obyek : Teks Layer : konten, Frame : 1 Symbol : Button Instance name : menu1 Layer : konten, Frame : 1 Symbol : Button Instance name : menu2 Layer : konten, Frame : 1 4. Buat empat layer lagi untuk menampung tombol home, next, previous dan aksi. 5. Pada layer aksi frame 1, buatlah actionscript berikut: Jurusan Matematika, FMIPA UM. 13

6. Kemudian pada layer aksi frame 2, klik kanan dan pilih insert blank keyframe. Kemudian pada frame 2 layer aksi, buat script seperti pada langkah 5. 6. Pada frame 2 layer t_home dan t_next, klik kanan dan pilih insert keyframe. Pada frame 2 layer previous, klik kanan dan pilih insert frame. Pada frame 2 layer konten, klik kanan dan pilih insert keyframe. Pada frame 8 layer background klik kanan dan pilih insert keyframe. Maka akan muncul tampilan di timeline seperti berikut: 7. Aktifkan frame 2 layer konten, hapuslah objek teks dan 2 tombol luas daerah dan volume benda (seleksi objek kemudian tekan del pada keyboard). Dengan menggunakan text tool buatlah tampilan seperti berikut: 8. Aktifkan frame 2 layer t_home, tambahkan tombol untuk home. Tombol ini dapat diambil dari menu window common libraries button. Dengan cara yang sama, aktifkan frame 2 layer t_next, tambahkan tombol untuk next. Sehingga diperoleh tampilan seperti berikut: Jurusan Matematika, FMIPA UM. 14

9. Pada layer konten frame 3, klik kanan dan pilih insert blank keyframe. Kemudian dengan text tool buatlah lanjutan materi dari luas daerah seperti berikut. 10. Pada frame 3 layer t_home, klik kanan pilih insert keyframe. Pada frame 3 layer t_next, klik kanan pilih insert blank keyframe. Pada frame 3 layer t_previous, klik kanan pilih insert keyframe. Kemudian di frame 3 layer t_previous sisipkan tombol back yang diambil dari common library. Sehingga diperoleh tampilan seperti berikut: Jurusan Matematika, FMIPA UM. 15

11. Sekarang saatnya untuk memberikan actionscript pada masing-masing tombol, sehingga ketika tombol di klik, akan mengacu pada suatu halaman tertentu. Klik frame 1 layer konten. Kemudian klik tombol luas daerah dan tekan F9 untuk menampilkan halaman actionscript. Ketikkan script berikut: 13. Kemudian klik frame 2 layer t_home. Kemudian klik tombol home pada stage, kemudian ketikkan script berikut 14. Klik frame 2 layer t_next. Kemudian klik tombol next pada stage. Ketikkan script berikut: 15. Klik frame 3 layer t_previous. Kemudian klik tombol previous pada stage. Ketikkan script berikut: 16. Jalankan animasi dengan menekan tombol ctrl + enter. Dengan cara yang sama, ulangi untuk membuat halaman yang lain. Jurusan Matematika, FMIPA UM. 16