Modul Fasilitasi Pengembangan MPI (TEMPLATE)

MODUL FASILITASI 

dengan Template Adobe Flash CS6 

Oleh 

Toni Setyawan, S.T., M.Pd. 

Produksi Model - BPMPK – Pustekkom 

Kementerian Pendidikan dan Kebudayaan 

2016

Modul Fasilitasi Pengembangan Multimedia Pembelajaran Interaktif 

Modul 1 

PENGEMBANGAN MULTIMEDIA PEMBELAJARAN INTERAKTIF 

DENGAN ADOBE FLASH PRO CS 6 

INDIKATOR PENCAPAIAN HASIL BELAJAR 

· Pembaca dapat membuat Multimedia Pembelajaran Interaktif sederhana mengunakan 

Flash CS 6 

URAIAN 

Flash adalah software yang mampu membuat animasi dengan mudah. Untuk membuat 

simulasi atau animasi yang memiliki interaksi dengan penguna, animasi flash dapat 

ditambahkan program tambahan yang sering disebut Action Script. Animasi yang interaktif 

ini sangat cocok digunakan untuk membuat aplikasi pembelajaran. Selain dapat di jalankan 

secara mandiri/stand alone flash juga dapat dijalankan mengunakan browser internet, 

hingga banyak website yang menambahkan animasi untuk memperindah dan 

memaksimalkan fungsi web tersebut. 

Dengan mengunakan Adobe Flash CS 6, kita dapat mempublish fla menjadi Aplikasi 

Win Projector (exe) atau aplikasi yang dapat langsung dijalankan langsung di Sistem 

Operasi Windows tanpa bantuan aplikasi lain. Jadi bagi anda yang sudah terbiasa 

mengunakan flash untuk membuat berbagai macam animasi baik yang interaktif maupun 

tidak, anda akan dengan mudah mempublishnya menjadi aplikasi Win Projector. 

LANGKAH-LANGKAH 

1. Buka Adobe Flash CS 6, tunggu hingga muncul tampilan seperti di halaman berikut ini 

Open 

Toni Setyawan, S.T., M.Pd. - Produksi Model BPMPK 1


2. Selanjutnya klik open dan pilih file "Template MPI 2016.fla". Segera simpan dengan 

nama baru agar file asli tidak rusak. 

3. Ubah scene aktif menjadi “opening” dengan cara lihat gambar berikut. 

Scene aktif 

Cara mengubah scene aktif 

4. Ubah judul dengan melakukan doubleklik dua kali pada tulisan hingga tampilan menjadi 

gambar berikut ini : 

Jika sudah berubah seperti gambar di atas anda dapat mengubah judul aplikasi sesuai 

dengan judul aplikasi yang anda buat. Dalam stage ini anda dapat mengubah tampilan 

sesuai dengan ke inginan anda. 



5. Kemudian ubah animasi sesuai keinginan anda dengan mengedit gambar dan proses 

tween (gunakan ilmu animasi flash drawing). Saat anda mengubah opening perhatikan 

letak AS frame tetap pada posisi awal dan terakhir, lihat gambar dibawah ini. 

Frame isi Script 

6. Untuk mencoba tampilan judul anda dapat melakukannya dengan menekan controlenter. 

Perintah ini memerintahkan flash untuk menampilkan aplikasi dalam emulator. 

7. Langkah berikutnya adalah mengubah judul di menu utama. Pindah scene aktif ke 

“menu” dengan cara seperti langkah 3. 

8. Doubel klik judul hingga tampil seperti gambar di atas. Ubah sesuai dengan judul 

aplikasi yang anda buat. 

9. Selanjutnya mari kita mencoba membuat aplikasi Win Projector dengan cara 

mempublish template menjadi file exe. Langkahnya adalah klik pulldown menu “File” 

lalu pilih “Publish Setting” 

Klik disini untuk Setting Publish 

Klik disini untuk Publish 



selanjutnya akan muncul popup seperti ditunjukkan pada gambar berikut ini : 

Nama File output (exe) 

Pastikan dicentang 

10. Setelah dipastikan Win Projector tercentang, klik OK untuk menyimpan seting. 

11. Untuk menghasilkan file Win Projector (exe) Langkahnya adalah klik pulldown menu 

“File” lalu pilih “Publish” 

12. Bila berhasil maka direktori yg terdapat file fla tersimpan akan ada file baru dengan 

nama yang sama dan tetapi berformat exe 

Double click file exe tersebut jika terbuka, berarti anda telah berhasil membuat aplikasi 

Win Projector (exe) 




MEMODIFIKASI MENU UTAMA 


· Penguna memodifikasi menu utama untuk aplikasi pembelajaran android 

memanfaatkan template mengunakan Adobe Flash Pro CS 6 

URAIAN 

Dalam mengembangkan media pembelajaran, pengembang harus memiliki bahan 

acuan yang di gunakan untuk pedoman. Bahan acuan ini diawali dengan ide/tema peta 

kompetensi, peta konsep, Garis Besar Isi Media, Jabaran Materi, Flowchart dan Naskah. 

Semua bahan acuan itu sebagai pengendali proses pengembangan agar tidak melenceng 

dari konsep pengembangan awal. 

Mungkin bagi anda terlalu repot menyiapkan bahan acuan, tetapi saran saya anda 

sebaiknya tetap memikirkan meski tidak menuangkannya dalam kertas. Bila kita 

mengembangankan media pembelajaran dengan acuan maka media pembelajaran yang 

anda kembangkan akan terarah untuk mencapai tujuan kompetensi yang ditetapkan. 

LANGKAH MENYESUAIKAN 

1. Buka Adobe Flash CS 6 kemudian open file " Template AMO 2016.fla ", lalu simpan 

dengan nama baru. 

2. Sesuaikan scene yg ada di template dengan hirarki yang anda buat. Untuk 

memahaminya lihat contoh di halaman berikut ini : 

Opening 

Scene Opening 

Menu Utama 

Scene Menu 

Scene Pengantar 

Scene Materi 2 

Scene closing 

Scene Materi 1 

Scene Tes 

Pengantar Materi 1 Materi 2 Tes Closing 



3. Untuk melakukan penyesuaian, buka docker scene di pulldown menu Windows > Other 

Panel > Scene. Jika anda benar akan muncul tampilan seperti gambar dibawah ini : 

Double Klik untuk 

mengedit nama Scene 

Klik duplikat Scene 

Klik delete Scene 

4. Gunakan perintah duplikat scene dan delete scene untuk menyesuaikan dengan 

hirarkinya 

5. Selanjutnya pindahkan scene aktif ke “menu” dengan cara seperti yang telah dijelaskan 

sebelumnya. Lalu perhatikan gambar dibawah ini 

Tombol ke Pengantar 

Tombol ke Materi 1 

Tombol ke Materi 2 

Tombol ke 

Uji Kompetensi / Tes 

Tombol ke 

Keluar/closing 

6. Sesuaikan tombol dengan menu yang ingin ditampilkan. Dalam contoh ada 4 scene 

(pengantar, materi1, materi2 dan tes) yang akan ditampilkan, maka ada 4 tombol 

untuk melakukan navigasi. 

7. Lakukan delete tombol untuk mengurangi agar sesuai hirarki anda. 



8. Duplikat tombol di library dengan cara klik kanan kemudian pilih duplicate, Lalu isi 

nama tombol baru hasil duplikat. 

Klik kanan salah satu 

tombol dan pilih 

duplicate 

9. Bila dalam library telah muncul tombol yang baru, click and drug ke stage. Atur posisi 

masing-masing tombol agar serasi. 

10. Teks yang muncul dalam tombol baru masih sesuai dengan tombol yang lama. Untuk 

mengedit teks tombol dengan double klik tombol yang akan diubah. 

11. Ubah instant name sesuai dengan AS yg akan dipasangkan 

Tombol yg dipilih 

Instant Name nya 

12. Pasang AS untuk tiap tombol dan sesuaikan perintahnya seperti gambar berikut : 

1 

2 

3 

4 

5 

6 

7 

8 

//jangan diubah 

tbmetu.addEventListener(MouseEvent.MOUSE_UP, 

clikmetu); 

//ubah AS untuk memasang fungsi tombol menu 

utama; 

arahtombol("tbpengantar","pengantar"); “pengantar” 

arahtombol("tbmateri1","materi1"); 

arahtombol("tbmateri2","materi2"); 

arahtombol("tbtes","tes"); 

Keterangan Action Script 

· Line 2 : Jangan mengubah Action Script di frame ini 

· Line 5 - 8 : perintah function untuk mengarahkan tombol, satu baris satu tombol. Contoh : 

Tombol dengan nama instant “tbmenu0” berfungsi untuk melompat ke scene 

“pengantar”. 

13. Coba tampilan dan fungsi masing masing tombol pada menu utama beserta navigasinya 

dengan emulator yang disediakan flash atau tekan ctrl-enter. 

AS3 untuk mengarahkan tombol, satu 

baris satu tombol 

Contoh : 

Tombol dengan nama instant “tbmenu1” 

berfungsi untuk melompat ke scene 




MEMODIFIKASI ISI MATERI 


· Penguna memodifikasi isi materi untuk aplikasi pembelajaran android memanfaatkan 

template mengunakan Adobe Flash Pro CS 6 

URAIAN 

Template ini terdapat scene pengantar, isi scene ini hanya 1 frame. Untuk melakukan 

perubahan isinya anda tinggal memodifikasi tampilan frame yang dimkasud. Bila anda ingin 

membuat dengan banyak halaman, sebaiknya anda mengkopy dan memodifikasi scene 

materi. 

Dalam scene materi di template ini terdapat 5 frame. Masing masing frame pada time 

line mewakili 1 halaman tampilan, jadi jangan buat animasi/tween disini. Sesuaikan isi 

media masing masing frame dengan tampilan yg ada inginkan. Kondisikan action scrip pada 

layer AS tetap dalam formasi seperti itu. Kalau anda akan menambahkan atau mengurangi 

jumlah frame, kondisikan AS tetap pada frame pertama layer AS. Langkah mengeditnya 

sebagai berikut. 


1. Langkah awalnya dengan memindahkan scene aktif ke “pengantari” dengan cara seperti 

yang telah dijelaskan sebelumnya. 

2. Ubah tampilan/teks dengan mengklik teks kemudaian anda bisa mengetiknya dengan 

cara seperti word processor, termasuk properties yang ada di sebelah kanan 

Docker Properties 



3. Langkah awalnya dengan memindahkan scene aktif ke “materi” dengan cara seperti 


4. Sesuaikan frame dengan banyaknya halaman yang ingin anda tampilkan. 

Pertahankan AS 

di awal frame 

5. Sesuaikan jumlah halaman/frame ke dalam as berikut ini 

1 

2 

//angka 5 menandakan materi ini ada 5 frame. 

awalframemateri(5); 


· Line 2 : angka 5 pada perintah function menandakan materi ini ada 5 frame atau bisa di 

analogikan sebagai 5 halaman di naskah. 

6. Masukkan semua media (teks, gambar, animasi, video dll) sesuai dengan keinginan 

anda. Disini kemampuan flash drawing anda sangat dibutuhkan. Untuk memodifikasi 

materi dengan cara : 

· Untuk memasukkan teks dengan cara mengedit teks yang ada di template, bisa 

juga diatur posisi teks tersebut. Untuk mengubah isi teks yang telah ada di 

template anda tinggal double klik teks tersebut. 

· Untuk memasukkan gambar dengan cara import kemudian atur di state atau ambil 

dari library dengan cara klik and drug dari library ke state. 

· Untuk memasukkan animasi, buat dahulu animasi dalam bentuk movie clip di 

library. Selanjutnya click and drag movie clip tersebut di library ke state sesuai 

dengan keinginan anda. 

· Untuk memasukkan suara disarankan mengunakan script AS 3 sehingga akan 

mudah diatur kapan munculnya suara. 

7. Coba fungsi masing masing tombol pada menu utama beserta navigasinya dengan 

emulator yang disediakan flash atau tekan ctrl-enter. 

8. Setelah selesai 1 materi lanjukan ke materi yang lain. 






MEMODIFIKASI EVALUASI 


· Penguna memodifikasi evaluasi untuk aplikasi pembelajaran android memanfaatkan 


URAIAN 

Dalam template terdapat quis multipelchoice yang berisi 15 macam soal yang tampil 

random 10 soal. Frame pertama adalah pembuka quis, frame ke 2 – 31 berisi soal dan 

penyelesaian, serta frame 32 berisi resume hasil quis. Masing masing soal terdiri dari 2 

frame, 1 frame berisi soal dan 1 frame berisi penyelesaian. Bila anda ingin mengubah 

macam soal, susuaikan dengan aturan yang dipakai. Misalnya ada ingin membuat macam 

soalnya ada 20 maka aturannya sebagai adalah frame 1 pembuka, frame 2 – 41 berisi soal 

dan penyelesaian, serta 42 berisi resume hasil quis. Langkah mengeditnya sebagai berikut. 


1. Langkah awalnya dengan memindahkan scene aktif ke “materi” dengan cara seperti 


2. Untuk mengubah isi evaluasi, langkah pertama adalah membuka scene tes dengan cara 

seperti langkah awal pada step no 5. 

Layer AS yang berisi 

action script 

1. Sebelum mengisi tampilan soal atur dulu bentuk quis di Action Script pada frame 1 

seperti gambar di halaman berikut 

Frame di layer isi yang 

berisi pembuka, soal, 

penyelesaian dan 

resume. 

1 

2 

3 

4 

5 

6 

7 

8 

9 

//sesuaikan macam soal, tampil soal, respon 

dan penyelesaian 

macamnya = 15; 

tampilnya = 10; 

dirandom = true; 

adarespon = true; 

adapenyelesaian = true; 


diawalquis(); 


· Line 2 : macamnya = 15 artinya macam soalnya ada 15. 

· Line 3 : tampilnya = 10 artinya quis yang ada buat tampil 10 soal. 



· Line 4 : dirandom = true artinya munculnya soal dibuat random bukan urutan, bila anda ingin 

tidak random maka kata true diubah menjadi false. 

· Line 5 : adarespon = true artinya quis yang anda buat menampilkan respon benar salah pada 

setiap soal. Ubah jadi false bila tidak menginginkan. 

· Line 6 : adapenyelesaian = true; artinya quis yang anda buat menampilkan penyelesaian soal. 

Ubah jadi false bila tidak menginginkan. 

· Line 8 – 9 : Jangan mengubah Action Script di line ini 

2. Sesuaikan jumlah frame dengan macam soal yang ada set untuk quis yang anda buat. 

Bila dikurangi, anda tinggal menghapus frame antara 2 - 31 sesuai dengan set quis 

anda. Bila ditambah, anda tinggal memperbanyak dengan mengkopy frame 2-31. Harus 

di ingat bahwa 1 soal diwakili dengan dua frame, jadi untuk mengkopi atau menghapus 

harus sepasang. 

3. Selanjutnya ubah tampilan soal dengan cara mengedit dan mengatur posisi seperti 

editing flash biasa. Selain teks yang ada dalam gambar di atas, soal bisa juga 

ditambahkan gambar atau animasi. Cara menambahkannya sama seperti pada scene 

materi. Semua tampilan pada gambar diatas bisa di sesuaikan posisinya. Tetapi dalam 

merubahnya jangan diubah secara radikal karena akan tidak sedap dipandang mata. 

Usahakan setiap soal tampil serasi hingga akan lebih bagus. Tombol navigasi sebaiknya 

juga tidak diubah posisinya agar sinkron dengan soal dan tampilan lainnya. Untuk 

jelasnya perhatikan gambar dibawah ini 

Teks ini akan di generate 

automatis tetapi ubah untuk 

mengindentifikasikan “soal 

ke”. 

Double klik untuk 

mengubahnya 

Teks ini berisi soal yang ingin 

anda tampilkan dalam quis. 


mengubahnya 

Teks ini berisi jawaban yang 

ingin anda tampilkan dalam 

quis. Double klik untuk 

mengubahnya 

Tombol Navigasi 

4. Ubah juga action script di atasnya dengan cara yang seperti pada gambar dibawah ini 

1 

2 

//sesuaikan jumlah pilihan dan kuncinya 

pilihandankuncinya(5,"b"); 

Sesuaikan macam pilihan dan 

kunci jawaban pada soal yang 

ditampilkan 


· Line 2 : angka 5 adalah macam milihan dan huruf “b” pada perintah function adalah kunci 

jawaban soal. Sesuaikan dengan kunci jawaban pada soal yang ditampilkan 



5. Selanjutnya ubah tampilan soal dengan cara yang ditunjukkan pada gambar di halaman 

berikut ini 

Tombol untuk menuju 

soal berikutnya 

Teks ini hasil generate 

automatis tidak usah 

diubah. 

Teks ini berisi penjelasan 

yang ingin anda 

tampilkan dalam quis. 


mengubahnya 

Semua tampilan di 

atas dapat diubah 

posisinya sama seperti 

langkah ke 4 

6. Action script yang ada diatas frame penyelesaian tidak perlu diubah karena akan 

merusak semua alur yang telah dibuat. Biarkan saja seperti gambar di bawah ini. 

1 

2 

3 


dipenyel(); 


· Line 2 : Jangan mengubah Action Script di frame ini 

7. Selanjutnya ubah tampilan resume sesuai dengan selera anda. Cara mengubahnya 

sama seperti mengubah tampilan yang lain yang sudah dibahas sebelumnya. Untuk 

lebih jelasnya perhatikan keterangan pada gambar di halaman berikut ini 

Jumlah jawaban benar, 

salah dan nilainya 

Respon jawaban tiap soal 

Komentar hasil quis 

Tombol untuk mengulang 

Tes 

Semua tampilan di 

atas dapat diubah 

posisinya sama 

seperti langkah ke 4 



8. Bila soal yang ingin anda tampilkan tidak 10, maka anda bisa merubah jumlah Respon 

jawaban tiap soal sesuai dengan keinginan anda. Copykan saja movieclip kotak dibawah 

soal. Jangan lupa sesuaikan Instan name nya dengan soal yang di responnya. 

Perhatikan gambar berikut : 

res10 berarti respon untuk 

soal no 10 

9. Ubah juga action script pada frame di atas frame resume dengan cara yang ditunjukkan 

pada gambar dibawah ini 

1 

2 

3 

//ubah isinya angka 70 ada lah batas nilai 

baik. dilanjutkan dengan 

//komentar bila nilai sempurna, lulus dan 

gagal 

diresumequis(70,"Jawaban Anda 

sempurna","Anda lulus tapi masih ada 

salahnya, belajar lagi ya!","Anda tidak 

lulus, ayo belajar lebih giat lagi!") 


· Line 1 – 2 : petunjuk singkat 

· Line 3 : diresumquis adalah function yang berisi variable. 7 adalah batas kelulusan yang 

ditentukan, "Jawaban Anda sempurna" adalah komentar yang muncul jika nilai 

sempurna (10), " Anda lulus tapi masih ada salahnya, belajar lagi ya!" adalah 

komentar yang muncul jikan nilai melewati batas kelulusan, " Anda tidak lulus, ayo 

belajar lebih giat lagi!" adalah komentar yang muncul jika nilai kurang dari batas 

kelulusan. 






MEMODIFIKASI PENUTUP 


· Penguna memodifikasi penutup untuk aplikasi pembelajaran android memanfaatkan 


URAIAN 

Penutup adalah bagian akhir dari animasi. Penutup ini akan tampil setelah user 

mengklik tobol exit/keluar. Penutup ini konsepnya sama dengan pembuka. Jadi untuk 

memodifikasinya anda harus memahami flash drawing dan tween. 


1. Langkah awalnya dengan memindahkan scene aktif ke “closingi” dengan cara seperti 


2. Stage yang tampak adalah tampilan penutup seperti berikut : 

3. Selanjutnya perhatikan time line seperti gambar berikut. 

Frame yang 

terdapat action 

4. Edit scene closing sesuai dengan keinginan anda, dengan aturan seperti mengubah 

scene opening dan biarkan frame yang berisi action script ada di bagian belakang

Modul Fasilitasi Pengembangan MPI (TEMPLATE)

You also want an ePaper? Increase the reach of your titles

Delete template?

Save as template?