MembuatMediaPembelajaranInteraktif

DenganFlash Oleh:FaridSuryanto
fareed_surya@yahoo.com

BAGIAN 5 Membuat Program Aplikasi Pembelajaran

Pada bagian ini kita akan merancang program aplikasi pembelajaran interaktif berdasarkan animasi-animasi yang sudah dibuat pada bagian sebelumnya. Rancangan yang akan dibuat adalah seperti tampak pada ilustrasi berikut ini:

Menu utama yang digunakan adalah model Drop Down yaitu jika kursor diarahkan ke tombol Pilih Materi maka menu akan turun. Jika salah satu menu dipilih maka file Flash Movie (nama file.swf) akan dipanggil dan dijalankan di halaman utama diatas.

Gambar di atas merupakan ilustrasi bahwa Flash Movie yang dipanggil akan dimasukkan didalam Movie Clip pada halaman Flash Movie utama. Script yang digunakan untuk melakukan pemanggilan Flash Movie ada dua, yaitu:

79

MembuatMediaPembelajaranInteraktif
DenganFlash Oleh:FaridSuryanto
fareed_surya@yahoo.com

loadMovie(nama file.swf,target); Script di atas digunakan untuk melakukan pemanggilan flash movie kemudian dimasukkan didalam target tertentu (Movie Clip). loadMovieNum(nama file.swf,level); Script diatas digunakan untuk melakukan pemanggilan Flash Movie namun dimasukkan langsung kedalam Flash Movie utama. Jika level = 0 maka file flash utama akan digantikan dengan file yang dipanggil, jika level 1 maka file yang dipanggil akan menindih file Flash Movie utama. Sebelum mulai membuat aplikasi, siapkan file Flash Movie melalui Windows Explorer sebagai berikut:

Membuat Menu Utama

Desain menu utama yang akan dibuat adalah:

80

MembuatMediaPembelajaranInteraktif
DenganFlash Oleh:FaridSuryanto
fareed_surya@yahoo.com

Bagan di atas menunjukkan bahwa didalam lembar kerja utama terdapat dua buah Movie Clip yaitu Movie Clip dengan nama mainmenu, wadah, dan transisi. Di dalam Movie Clip mainmenu terdapat tombol tbl_mainmenu dan Movie Clip drop. Didalam Movie Clip drop terdapat tombol tbl_menu. Membuat Movie Clip wadah 1. Buatlah Movie Clip kosong dengan cara: - Buatlah objek kotak, ubah menjadi Movie Clip, isikan nama pada Instance Name dengan wadah. - Masuk pada lembar kerja dan hapus gambar kotak tersebut. 2. Keluarlah dari lembar kerja Movie Clip wadah, posisikan Movie Clip wadah pada posisi berikut:

PosisiMovieClip wadah

3. Aturlah warna Background lembar kerja utama pada properties:

Membuat Movie Clip transisi 1. Buatlah kotak yang memenuhi lembar kerja utama. 2. Ubah menjadi Movie Clip, berikan nama transisi pada kotak Instance Name. 3. Masuklah kedalam lembar kerja Movie Clip transisi, buat animasi seperti berikut:

4. Frame 1 berisi kotak yang memenuhi lembar kerja dengan warna gelap. 81

MembuatMediaPembelajaranInteraktif
DenganFlash Oleh:FaridSuryanto
fareed_surya@yahoo.com

5. Lakukan Insert Key Frame pada layer 10, ubah warna kotak menjadi transparan (atur alpha menjadi 0%). 6. Pada frame 10 tuliskan script stop();

Membuat Movie Clip mainmenu, Movie Clip drop, Tombol tbl_mainmenu dan Tombol tbl_menu 1. Buatlah Movie Clip dengan nama mainmenu dan posisikan ditempat yang sesuai (misalnya di pojok kiri atas).

2. Buatlah tombol transparan dan berikan nama pada instance name dengan tbl_mainmenu. Posisikan tbl_mainmenu diatas Pilih Materi. Cara membuat tombol transparan adalah: - Buatlah kotak dengan warna apapun. - Ubah menjadi Button dan masuklah kedalam lembar kerja tombol. - Seleksi gambar tombol dan atur alpha pada kotak dialog Color Mixer menjadi 0%.

3. Buatlah layer baru untuk membuat Movie Clip dengan nama drop dan posisikan diatas tombol tbl_mainmenu. 4. Masuklah kedalam lembar kerja Movie Clip drop dan buatlah sedemikian rupa sehingga menjadi tampak seperti berikut:

82

MembuatMediaPembelajaranInteraktif
DenganFlash Oleh:FaridSuryanto
fareed_surya@yahoo.com

5. Jika sudah tampak seperti diatas, kita akan membuat sebuah tombol untuk ditempatkan diatas teks. Agar lebih menarik, tombol yang akan kita buat adalah jika kursor diletakkan diatas teks maka animasi tombol (didalam Movie Clip) akan berjalan. Untuk membuatnya ikuti langkah berikut: - Buatlah sebuah kotak dan ubahlah menjadi Button. - Masuk pada lembar kerja Button, seleksi gambar kotak, atur alpha menjadi 0%. - Tampilkan kotak transparan pada frame Up, Over, dan Down.

Buatlah layer baru lalu berikan nama layer dengan animasi. Copy frame Over pada layer kotak dan paste di frame over pada layer baru. Ubahlah objek kotak pada frame Over layer animasi menjadi Movie Clip. Masuklah pada lembar kerja Movie Clip, buatlah animasi sehingga tampak seperti sebuah garis yang berubah menjadi kotak.

83

MembuatMediaPembelajaranInteraktif
DenganFlash Oleh:FaridSuryanto
fareed_surya@yahoo.com

Posisiawal:

Posisiakhir: - Pada frame posisi akhir, tuliskan script stop(); 6. Tombol animasi sudah jadi, masuklah pada lembar kerja Movie Clip drop. 7. Gandakan tombol transparan animasi sejumlah teks yang ada. Tempatkan tombol tersebut diatas teks. 8. Pada masing-masing tombol, tuliskan script berikut: Tombol di atas Segitiga Interaktif: on(release){ _parent.gotoAndPlay(11); _parent.nav="Segitiga Interaktif"; loadMovie("segitiga.swf", _parent._parent.wadah); _parent._parent.transisi.gotoAndPlay(1); } Tombol di atas Koordinat Kartesius: on(release){ _parent.gotoAndPlay(11); _parent.nav="koordinat Kartesius"; loadMovie("koordinat kartesius.swf",_parent._parent.wadah); _parent._parent.transisi.gotoAndPlay(1); } Tombol di atas Lempar Dadu: on(release){ _parent.gotoAndPlay(11); _parent.nav="Lempar Dadu"; loadMovie("lempar dadu.swf", _parent._parent.wadah); _parent._parent.transisi.gotoAndPlay(1); } Tombol di atas Lempar Koin: on(release){ _parent.gotoAndPlay(11); _parent.nav="Lempar Koin"; loadMovie("lempar koin.swf", _parent._parent.wadah); _parent._parent.transisi.gotoAndPlay(1); } 84

MembuatMediaPembelajaranInteraktif
DenganFlash Oleh:FaridSuryanto
fareed_surya@yahoo.com

Tombol di atas Pencerminan: on(release){ _parent.gotoAndPlay(11); _parent.nav="Pencerminan"; loadMovie("pencerminan.swf", _parent._parent.wadah); _parent._parent.transisi.gotoAndPlay(1); } Tombol di atas Sudut Elevasi: on(release){ _parent.gotoAndPlay(11); _parent.nav="Sudut Elevasi"; loadMovie("sudut elevasi.swf", _parent._parent.wadah); _parent._parent.transisi.gotoAndPlay(1); } Tombol di atas Termometer: on(release){ _parent.gotoAndPlay(11); _parent.nav="Termometer"; _root.loadMovie("termometer.swf", _parent._parent.wadah); _parent._parent.transisi.gotoAndPlay(1); } Tombol di atas Gerak Mobil dipercepat: on(release){ _parent.gotoAndPlay(11); _parent.nav="Gerak Mobil Dipercepat"; _root.loadMovie("gerak mobil dipercepat.swf", _parent._parent.wadah); _parent._parent.transisi.gotoAndPlay(1); } Tombol di atas Kecepatan Mobil: on(release){ _parent.gotoAndPlay(11); _parent.nav="Kecepatan Mobil"; _root.loadMovie("kecepatan mobil.swf", _parent._parent.wadah); _parent._parent.transisi.gotoAndPlay(1); } Tombol di atas Bola Jatuh: on(release){ _parent.gotoAndPlay(11); _parent.nav="Bola Jatuh"; 85

MembuatMediaPembelajaranInteraktif
DenganFlash Oleh:FaridSuryanto
fareed_surya@yahoo.com

loadMovie("bola jatuh.swf", _parent._parent.wadah); _parent._parent.transisi.gotoAndPlay(1); } Tombol di atas Rangkaian Seri: on(release){ _parent.gotoAndPlay(11); _parent.nav="Rangkaian Seri"; _root.loadMovie("rangkaian seri.swf", _parent._parent.wadah); _parent._parent.transisi.gotoAndPlay(1); } Tombol di atas Rangkaian Paralel: on (release) { _parent.gotoAndPlay(11); _parent.nav = "Rangkaian Paralel"; _root.loadMovie("rangkaian paralel.swf", _parent._parent.wadah); _parent._parent.transisi.gotoAndPlay(1); } Tombol di atas Peta Interaktif:

on(release){ _parent.gotoAndPlay(11); _parent.nav="Peta Interaktif"; loadMovie("peta interaktif.swf", _parent._parent.wadah); _parent._parent.transisi.gotoAndPlay(1); } Tombol diatas Tutup: on(release){ _parent.gotoAndPlay(11); loadMovie("profil.swf",_parent._parent.wadah); _parent._parent.transisi.gotoAndPlay(1); } 9. Keluarlah dari lembar kerja Movie Clip drop.

86

MembuatMediaPembelajaranInteraktif
DenganFlash Oleh:FaridSuryanto
fareed_surya@yahoo.com

Membuat Animasi Drop Down Perhatikan desain di dalam Movie Clip mainmenu berikut:

Layer tombol: Pada frame 1berisi tombol tbl_mainmenu dengan script sebagai berikut: on (rollOver) { gotoAndPlay(2); } on (release) { loadMovie("profil.swf",_parent.wadah); } Pada frame 2 berisi tombol tbl_mainmenu dengan script sebagai berikut: on (release) { loadMovie("profil.swf",_parent.wadah); } Frame 3 sama dengan frame 2.

Layer navigasi: Pada frame 1 buatlah Dynamic Text Area dengan nama variable nav.

DynamicTextdengan namavariablenav

87

MembuatMediaPembelajaranInteraktif
DenganFlash Oleh:FaridSuryanto
fareed_surya@yahoo.com

Layer main: Frame pada layer main semua berisi gamabar background main menu.

Gambarbackground mainmenu.

Lakukan Insert Key Frame pada frame 10 dan berikan script stop(); Layer mask: Buatlah gambar seperti dibawah ini dan tampilkan hingga frame terakhir (frame 20);

Gambarpada layermask

Layer back: Frame 1 berisi Movie Clip drop pada posisi awal (diatas mainmenu) dan tuliskan scrip stop(); didalam frame 1.

88

MembuatMediaPembelajaranInteraktif
DenganFlash Oleh:FaridSuryanto
fareed_surya@yahoo.com

Frame 10 Movie Clip drop berada pada posisi aktif:

Frame 20 Movie Clip drop berada pada posisi seperti posisi awal. Lakukan Masking pada Layer mask dengan cara klik kanan pada layer mask, pilih Mask.

89

MembuatMediaPembelajaranInteraktif
DenganFlash Oleh:FaridSuryanto
fareed_surya@yahoo.com

Lakukan Publish untuk mendapatkan file halaman utama.swf. Tempatkan halaman utama.swf pada forlder yang berisi file-file Flash Movie yang sudah dibuat.

Catatan! Pada script pemanggilan yang memakai : _root.loadMovie("rangkaian paralel.swf", _parent._parent.wadah); akan menindih file halaman utama. Hal ini dilakukan karena perintah antar Movie Clip didalam file Flash Movie yang dipanggil tidak dapat berjalan jika tidak memakai _root. Ketika tombol yang memakai script seperti di atas diklik maka program tidak dapat kembali ke halaman utama.swf. Oleh karena itu lakukan penambahan tombol pada file-file yang dimaksud:

90

MembuatMediaPembelajaranInteraktif
DenganFlash Oleh:FaridSuryanto
fareed_surya@yahoo.com

Tomboltambahanpadafile rangkaianparallel.swf.Pada tombolinituliskanscript: on(release){ loadMovieNum("hala manutama.swf",0); }

Script diatas akan menggantikan kembali file rangkaian paralel.swf dengan file halaman utama.swf.

Mempublish File Halaman Utama Menjadi File Aplikasi

Agar bisa dijalankan disemua computer yang memakai system operasi Windows, publish file halaman utama menjadi halaman utama.exe dengan cara: 1. Pilih file >> publish setting maka akan muncul:

2. Cek pada Windows Projector (.exe), Publish, lalu OK. 3. Tempatkan file halaman utama.exe pada folder yang sama dengan file Flash Movie lainnya.

91

MembuatMediaPembelajaranInteraktif
DenganFlash Oleh:FaridSuryanto
fareed_surya@yahoo.com

4. Program Aplikasi yang kita buat sudah bisa digunakan.

92