DESAIN MULTIMEDIA INTERAKTIF

MEMBUAT TAMPILAN MENU MEDIA PEMBELAJARAN INTERAKTIF

A. TUJUAN
1. Mengetahui apa yang dimaksud dengan DMI
2. Mengetahui langkah-langkah untuk membuat multimedia interaktif
B. ALAT DAN BAHAN
1. Laptop/ PC
2. Aplikasi Macromedia Flash
3. Gambar pendukung
C. MATERI SINGKAT
1. Storyboard
Storyboard secara sederhana bisa diartikan sebagai uraian yang berisi
penjelasan visual dan audio dari masing-masing alur dalam flowchart yang dirinci
untuk setiap frame/slide. Pada umumnya storyboard berupa tabel (baris-kolom), setiap
kolom di dalamnya mewakili satu tampilan di layar monitor. Dengan demikian
biasanya lembaran storyboard cukup banyak. Storyboard merupakan konsep
komunikasi dan ungkapan kreatif, teknik dan media untuk menyampaikan pesan dan
gagasan secara visual, termasuk audio dengan mengolah elemen desain grafis berupa
bentuk dan gambar, huruf dan warna, serta tata letaknya, sehingga pesan dan gagasan
dapat di terima oleh sasarannya.
Tujuan penggunaan storyboard adalah sebagai berikut:
 Membantu memikirkan detail diam dan alam keseluruhan dari game. (versi
games).
 Menggabungkan konsep menjadi dokumen desain ( semacam movie script).
 Sebagai acuan kameramen dalam mengambil gambar secara tepat (versi film).
 Sebagai acuan sutradara dalam mengarahkan crew untuk mengambil gambar
yang tepat, waktu yang tepat dan tempat yang tepat.
Fungsi storyboard adalah sebagai berikut :
 Merencanakan sequance sinematik.
 Membangun animasi.
 Menunjukkan aksi aksi komplek.
 Menunjukkan aksi aksi player.
2. Desain User Interface
Desain Antarmuka atau yang lebih sering dikenal dengan istilah Design
Interface adalah desain untuk komputer, peralatan, mesin, perangkat komunikasi
mobile, aplikasi perangkat lunak, dan situs web yang berfokus pada pengalaman dan
interaksi penggunanya.
Tujuan dari penggunaan design interface ini adalah untuk membuat interaksi
pengguna sesederhana dan seefisien mungkin. Bagaimana user berinteraksi dengan
komputer menggunakan tampilan antarmuka (interface) yang ada pada layar
komputer. Design Interface ini sangat penting karena akan sangat berpengaruh pada
user dalam menggunakan atau berkomunikasi dengan komputer. Apabila suatu
program sulit untuk digunakan, maka hal ini akan memaksa user untuk melakukan
suatu kesalahan saat menggunakan program tersebut.

A. LANGKAH KERJA
1. Buka program macromediaflash 8 dan buatlah dokumen baru:

2. Selanjutnya ubah layer name pada layer 1 menjadi background dengan cara
doubleclick pada layer1, setelah selesai enter.

3. Pada stage kita import gambar background yang di inginkan dengan cara klik
frame 1 layer Background lalu pilih menu file | Import | ImporttoStage. Atau
dengan cara menekan Ctrl+R. misal seperti contoh berikut:
4. Atur properties ukuran gambar background agar sesuai dengan ukuran stage,
secara default ukurannya 550 x 400 px (alangkah lebih baiknya gunakan ukuran
1024 x 768 px) serta pastikan posisi x dan y di angka Nol.

5. Tambahkan judul dalam stage dengan menggunakan texttool, missal “MEDIA

PEMBELAJARANINTERAKTIF”

6. Insert keyframe di frame ke 700 pada layer background.

7. Kunci terlebih dahulu layer background agar tidak terubah pada proses
selanjutnya.
8. Buat layer baru dengan mengklikiconinsert layer. Kemudian beri nama Tbl Teori.

9. Lakukan hal yang sama untuk membuat layer TblTbl Video, Musik, dan Tbl Soal
Latihan dengan susunan seperti pada gambar berikut:

10. Selanjutnya klik menu windows | CommonLibrary | Button. (hal ini dilakukan
untuk menampilkan pilihan model-model tombol yang akan digunakan)

11. Klik pada frame 1 layer Tbl Teori.

12. Selanjutnya Pada jendela commonLibrary pilih jenis tombol yang akan kita
gunakan (missalRoundedBlue pada folder ButtonRounded) kemudian drag ke
 dalam stage dan letakan di posisi yang diinginkan. (Misal seperti pada gambar di
bawah)

13. Ubah tulisan Enter pada tombol menjadi Teori dengan cara double klik tombol
tersebut sampai muncul timelineButton.

14. Klik frameUp pada layer teks kemudian dengan menggunakan teks tool ubah
tulisan Enter pada tombol menjadi Teori.

15. Setelah selesai selanjutnya klik scane 1 untuk kembali ke timelinestage utama.

16. Masih di layer Tbl Teori, selanjutnya klik kanan pada frame ke 10 lalu pilih Insert
KeyFrame.
17. Selanjutnya Dengan menggunakan selectiontool pindahkan posisi tombol ke
dalam area stage seperti gambar di bawah ini:

18. Tambahkan Motion Tween untuk pergerakan tombol teori dengan mengklik
kanan frame 1 kemudian pilih Create Motion Tween sehingga tampilan timeline
pada layer Tbl Teori menjadi sperti gambar berikut:

19. Selanjutnya buatlah tombol Video, Tombol Musik, dan Tombol Soal di masing-
masing layer dengan menggunakan langkah yang sama seperti membuat tombol
Teori (langkah 12 - 18). sehingga tampilan pada timeline akan menjadi seperti:

Catatan:
 Untuk tombol video dimulai dari Frame 11 - 20
 Untuk tombol Musik dimulai dari frame 21 - 30
 Untuk tombol soal dimulai dari frame 31-40
 Jika berhasil tampilan stage pada frame 40 akan tampak seperti gambar di
bawah ini:
20. Langkah berikutnya adalah menghentikan pergerakan frame setelah tombol
terakhir muncul, pada contoh ini ada pada frame 40. Untuk menghentikan
pergerakan frame yaitu dengan cara klik kanan pada frame 40 (di layer Tbl Soal
Latihan) kemudian pilih Action sehingga muncul jendela ActionFrame seperti
gambar di bawah ini:

21. Pastikan yang muncul adalah ActionFrame. Selanjutnya ketikan script “Stop();”
22. Frame yang telah di tambahkan script akan di tandai dengan symbol alfa pada
frame tersebut:

23. Lakukan test Movie untuk melihat hasilnya dengan cara menekan tombol
Ctrl+Enter pada keyboard.
24. Simpan terlebih dahulu file dengan mengklik menu file kemudian save. Berikan
nama file “latihan”
25. Selesai sudah membuat tampilan menu pada contoh Media pembelajaran kali ini.
Jika ingin menambahkan tombol kita tinggal menambahkan layer dan lakukan
perintah yang sama dan rentang frame yang sama untuk pergerakan tombol.

Untuk selanjutnya kita akan memberikan navigasi pada setiap tombol. dimana tombol
teori ketika di klik akan menampilkan isi dari teori pembelajaran, tombol video akan
di isi dengan media video tutorial pembelajaran, tombol musik akan diisi dengan file
lagu beserta liriknya, dan yang terakhir tombol soal akan berisi soal-soal latihan
 sesuai dengan pembelajaran yang sudah di pelajari baik dari teori maupun video
tutorial.
26. Ulangi lagi dirumah hingga mengerti dan paham.
Sumber: http://tutorialbahanajar.blogspot.co.id

B. EVALUASI

C. KESIMPULAN

Storyboard secara sederhana bisa diartikan sebagai uraian yang berisi

penjelasan visual dan audio dari masing-masing alur dalam flowchart yang dirinci
untuk setiap frame/slide