Bagian 5 Membuat Program Aplikasi Pembelajaran

8/13/2019 Bagian 5 Membuat Program Aplikasi Pembelajaran

1/14

MembuatMediaPembelajaranInteraktifDenganFlash

Oleh:[email protected]

79

BAGIAN 5

Membuat Program Aplikasi Pembelajaran

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

Menu utama yang digunakan adalah model Drop Downyaitu jika kursor diarahkan ke tombolPilih Materimaka 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 dimasukkandidalam Movie Clip pada halaman Flash Movie utama. Script yang digunakan untuk

melakukan pemanggilan Flash Movie ada dua, yaitu:


2/14



80

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 dimasukkanlangsung kedalam Flash Movie utama. Jika level = 0 maka file flash utama akan digantikandengan file yang dipanggil, jika level 1 maka file yang dipanggil akan menindih file FlashMovie utama.

Sebelum mulai membuat aplikasi, siapkan file Flash Movie melalui Windows Explorersebagai berikut:

Membuat Menu Utama

Desain menu utama yang akan dibuat adalah:


3/14



81

Bagan di atas menunjukkan bahwa didalam lembar kerja utama terdapat dua buah MovieClip yaitu Movie Clip dengan nama mainmenu, wadah, dantransisi. Di dalam Movie Clip

mainmenuterdapat tombol tbl_mainmenudan Movie Clip drop. Didalam Movie Clip dropterdapat 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 padaposisi berikut:

3. Aturlah warna Background lembar kerja utama pada properties:

Membuat Movie Clip transis i

1. Buatlah kotak yang memenuhi lembar kerja utama.2. Ubah menjadi Movie Clip, berikan nama transisipada 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.

PosisiMovieClipwadah


4/14



82

5. Lakukan Insert Key Frame pada layer 10, ubah warna kotak menjadi transparan (aturalpha menjadi 0%).

6. Pada frame 10 tuliskan script stop();

Membuat Movie Clip mainmenu, Movie Clip drop, Tombol tbl_mainmenu dan Tomboltbl_menu

1. Buatlah Movie Clip dengan nama mainmenudan posisikan ditempat yang sesuai(misalnya di pojok kiri atas).

2. Buatlah tombol transparan dan berikan nama pada instance namedengantbl_mainmenu. Posisikan tbl_mainmenudiatas Pilih Materi. Cara membuat tomboltransparan adalah:- Buatlah kotak dengan warna apapun.

- Ubah menjadi Button dan masuklah kedalam lembar kerja tombol.- Seleksi gambar tombol dan atur alphapada kotak dialog Color Mixer menjadi

0%.

3. Buatlah layer baru untuk membuat Movie Clip dengan namadropdan posisikandiatas tombol tbl_mainmenu.

4. Masuklah kedalam lembar kerja Movie Clip dropdan buatlah sedemikian rupasehingga menjadi tampak seperti berikut:


5/14



83

5. Jika sudah tampak seperti diatas, kita akan membuat sebuah tombol untukditempatkan diatas teks. Agar lebih menarik, tombol yang akan kita buat adalah jikakursor 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 Overpada 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.


6/14



84

- 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);


- 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);

}

Posisiawal:

Posisiakhir:


7/14



85

- Tombol di atas Pencerminan:


_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);


- Tombol di atas Kecepatan Mobil:

on(release){

_parent.gotoAndPlay(11);_parent.nav="Kecepatan Mobil";

_root.loadMovie("kecepatan mobil.swf",_parent._parent.wadah);


- Tombol di atas Bola Jatuh:

on(release){

_parent.gotoAndPlay(11);_parent.nav="Bola Jatuh";


8/14



86

loadMovie("bola jatuh.swf", _parent._parent.wadah);


- Tombol di atas Rangkaian Seri:


_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:


loadMovie("profil.swf",_parent._parent.wadah);_parent._parent.transisi.gotoAndPlay(1);

}

9. Keluarlah dari lembar kerja Movie Clip drop.


9/14



87

Membuat Animasi Drop Down

Perhatikan desain di dalam Movie Clip mainmenu berikut:

Layer tombol:

- Pada frame 1berisi tombol tbl_mainmenudengan 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 .

DynamicTextdengannamavariablenav


10/14



88

Layer main:

Frame pada layer main semua berisi gamabar background main menu.

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);

Layer back:

- Frame 1 berisi Movie Clip drop pada posisi awal (diatas mainmenu) dan tuliskanscrip stop(); didalam frame 1.

Gambarbackgroundmainmenu.

Gambarpada

layermask


11/14



89

- 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.


12/14



90

Lakukan Publishuntuk mendapatkan file halaman utama.swf. Tempatkan halamanutama.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 Clipdidalam file Flash Movie yang dipanggil tidak dapat berjalan jika tidak memakai _root. Ketikatombol yang memakai script seperti di atas diklik maka program tidak dapat kembali kehalaman utama.swf. Oleh karena itu lakukan penambahan tombol pada file-file yangdimaksud:


13/14



91

Script diatas akan menggantikan kembali file rangkaian paralel.swfdengan file halamanutama.swf.

Mempublish File Halaman Utama Menjadi File Apl ikasi

Agar bisa dijalankan disemua computer yang memakai system operasi Windows, publish filehalaman 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.exepada folder yang sama dengan file Flash Movie

lainnya.

Tomboltambahanpadafilerangkaianparallel.swf.Padatombolinituliskanscript:on(release){

loadMovieNum("hala

manutama.swf",0);}


14/14



92

4. Program Aplikasi yang kita buat sudah bisa digunakan.

Documents

Bagian 5 Membuat Program Aplikasi Pembelajaran