PEMERINTAH PROVINSI JAWA TENGAH

DINAS PENDIDIKAN DAN KEBUDAYAAN

SEKOLAH MENENGAH KEJURUAN NEGERI 1 WANAREJA

Jalan Srikaya Wanareja, Cilacap Kode Pos 53265 Telepon 0280 – 6260233 Faksimile : 0280 – 6260233 E-mail : smkonewan@yahoo.co.id

Mata Pelajaran : C3 – Desain Media Interaktif

Bidang Keahlian : Teknologi Informasi dan Komunikasi

Program Keahlian : Teknik Komputer dan Informatika

Kompetensi Keahlian : Multimedia

Kelas / Semester : XII / Ganjil

Alokasi Waktu : 30 Menit

3.1 Memahami konsep multimedia interaktif berbasis halaman web dan media interaktif.

4.1 Mendemontrasikan konsep multimedia interaktif berbasis halaman web dan media interaktif

Setelah mempelajari bab ini, siswa diharapkan mampu:

1. Memahami pengertian multimedia interaktif;

2. Memahami jenis dan fungsi multimedia interaktif;

3. Membuat dan mendemontrasikan konsep multimedia interaktif menggunakan aplikasi

pengolah gambar

1. Multimedia Interaktif adalah penggabungan antara teks, foto, seni grafis, suara, animasi,

dan video serta memungkinkan pengguna untuk berinteraksi dan berkomunikasi dengan

produk multimedia.

2. Kunci utama dari Multimedia Interaktif adalah adanya pengguna yang dapat berinteraksi

dan berkomunikasi dengan sistem secara baik. Proyek Multimedia Interaktif

menggabungkan antara komponen-komponen multimedia dengan bahasa pemrograman

sehingga hasil yang didapat dapat berinteraksi dengan pengguna.

3. Level interaktivitas dalam multimedia interaktif, antara lain umpan balik, manipulasi,

adaptasi, dan komunikasi.

4. Model multimedia interaktif, antara lain tutorial, drill and practice, simulasi,

instructional games, hybrid, socratic, inquiry, dan informational.

5. World Wide Web merupakan multimedia interaktif yang memiliki keunggulan, antara

lain lebih mudah dikembangkan, mudah di-update, akses informasi lebih mudah, lebih

murah dan lebih powerfull, happy platform, serta dapat digunakan secara offline.

6. Konten yang membentuk sebuah multimedia interaktif antara lain teks, foto/image, seni

grafis, suara, animasi, video dan disempurnakan dengan interaktivitasnya.

( Materi Lengkap bisa dilihat di handout)

1. Laptop / Komputer

2. Internet

3. Aplikasi Pengolah Kata (tugas analisis)

4. Aplikasi Pengolah Gambar (Konsep tampilan antar muka)

Petunjuk :

1. Kerjakan lembar kerja di bawah ini dengan penuh tanggung jawab,

2. Hasil pekerjaan silahkan dikirim melalui google drive melalui link di bawah ini

https://drive.google.com/drive/folders/16LBXSN2iAhoZlwEWKJKo78bKXsfPo60q?usp

=sharing sertakan Nama, Kelas dan NIS

SOAL :

1. Analisislah media interaktif pada halaman web berikut :

https://windowwonderland.withgoogle.com/

Kerjakan sesuai dengan lembar kerja berikut!

MEDIA INTERAKTIF BERBASIS HALAMAN WEB

URL (alamat)

Deskripsikan GUI (Graphical User

Interface) atau antarmuka tampilan

dari web yang diamati.

1. Layout/tata letak yang digunakan?

2. Warna apa yang digunakan?

3. Apakah warna yang digunakan

sesuai dengan content/ isi dari web

tersebut?

4. Elemen navigasi apa yang

dimiliki?

5. Apakah susunan navigasi yang

digunakan sesuai?

Deskripsikan setiap presentasi

multimedia dari content/isi yang

ditampilkan! Apakah dapat dengan

mudah mempelajari permasalahan

yang disampaikan saat menggunakan

produk tersebut? Konten multimedia

apa saja yang gunakan? Apakah

content/isi yang ditampilkan dapat

dikembangkan lagi?

2. Buatlah konsep tampilan antar muka multimedia interaktif berbasis halaman web atau media

interaktif (pilih salah satu) menggunakan aplikasi pengolah gambar.!

Pedoman Penskoran Soal Nomor 1

Nomor

Soal Penyelesaian/Kunci Jawaban Skor

1 Siswa dapat menyebutkan jawaban dengan, lengkap dan benar. 50

2 Siswa dapat menyebutkan jawaban dengan baik dan benar, tapi kurang

lengkap. 30

3 Siswa dapat menyebutkan jawaban tapi salah sebagian besar. 10

4 Siswa tidak dapat menjawab dengan benar 0

Skor maksimum 50

Pedoman Penskoran Nomor 2

No. Aspek yang dinilai Skor

1. Kesesuaian dengan konsep dan prinsip 5

2. Ketepatan memilih bahan

10

3. Kreativitas

15

4. Ketepatan waktu pengumpulan tugas

10

5. Kerapihan hasil

10

Skor maksimum 50

SKOR = Nomor 1 + Nomor 2

PEMERINTAH PROVINSI JAWA TENGAH

DINAS PENDIDIKAN DAN KEBUDAYAAN

SEKOLAH MENENGAH KEJURUAN NEGERI 1 WANAREJA

Jalan Srikaya Wanareja, Cilacap Kode Pos 53265 Telepon 0280 – 6260233 Faksimile : 0280 – 6260233 E-mail : smkonewan@yahoo.co.id

Mata Pelajaran : C3 – Desain Media Interaktif

Bidang Keahlian : Teknologi Informasi dan Komunikasi

Program Keahlian : Teknik Komputer dan Informatika

Kompetensi Keahlian : Multimedia

Kelas / Semester : XII / Ganjil

Alokasi Waktu : 30 Menit

3.2 Memahami desain /perancangan alur untuk multimedia interaktif berbasis halaman

web dan media interaktif.

4.2 Membuat desain/perancangan alur untuk multimedia interaktif berbasis halaman web

dan media interaktif

Setelah mempelajari bab ini, siswa diharapkan mampu:

1. Menjelaskan desain /perancangan alur untuk multimedia interaktif berbasis halaman web

dan media interaktif

2. Membuat desain/perancangan alur untuk multimedia interaktif berbasis halaman web dan

media interaktif

Tahapan-tahapan Teori Desain

Sebelum melakukan pembuatan sebuah produk, seorang perancang harus memperhatikan

beberapa tahapan, agar produk yang dihasilkan sesuai dengan yang dibutuhkan oleh

pengguna. Tahapan-tahapan tersebut diantaranya :

1. Membuat konsep : merupakan buah pemikirian kreatif dari seorang perancang untuk

mencapai tujuan

2. Menentukan isi

3. Menentukan struktur/alur seperti flowchart (lihat contoh flowchart) dan storyboard

4. Membuat penjelasan dari isi yang terdapat pada aplikasi yang dibuat

5. Membuat grafik

6. Melakukan testing pada aplikasi yang telah dibuat

Prinsip-prinsip Desain Multimedia Interaktif

Seorang pengguna atau yang sering disebut end-user akan merasa senang dan nyaman apa

objek ataupun produk tersebut menerapkan kaedah atau prinsip-prinsip desain. Penerapan

prinsip-prinsip desain sangat mempengaruhi visual seseorang sehingga muncul rasa

penasaran dan tidak merasa bosan untuk melihatnya.

5. Laptop / Komputer

6. Internet

7. Aplikasi Pengolah Kata (Tugas Nomor 1)

8. Aplikasi Pengolah Gambar (Tugas Nomor 2)

Petunjuk :

3. Kerjakan lembar kerja di bawah ini dengan penuh tanggung jawab,

4. Hasil pekerjaan silahkan dikirim melalui google drive melalui link di bawah ini

https://drive.google.com/drive/folders/16LBXSN2iAhoZlwEWKJKo78bKXsfPo60q?usp

=sharing sertakan Nama, Kelas dan NIS

SOAL :

3. Penerapan prinsip-prinsip desain sangat mempengaruhi visual seseorang sehingga muncul

rasa penasaran dan tidak merasa bosan untuk melihatnya. Beberapa Prinsip-prinsip Desain

Multimedia Interaktif seperti pada tabel di bawah ini. Lengkapilah tabel di bawah ini

Kerjakan sesuai dengan lembar kerja berikut!

PRINSIP-PRINSIP DESAIN MULTIMEDIA INTERAKTIF

GABMAR KETERANGAN

PRINSIP-PRINSIP DESAIN MULTIMEDIA INTERAKTIF

GABMAR KETERANGAN

4. Buatlah tampilan awal desain media interaktif (bisa menggunakan CorelDraw, Photosop,

maupun lainnya)

Pedoman Penskoran Soal Nomor 1

Nomor Penyelesaian/Kunci Jawaban Skor

1 Siswa dapat menyebutkan jawaban dengan benar semuanya 100

2 Siswa dapat menyebutkan jawaban dengan benar 5 bagian 75

3 Siswa dapat menyebutkan jawaban dengan benar 4 bagian 60

4 Siswa dapat menyebutkan jawaban dengan benar 3 bagian 45

5 Siswa dapat menyebutkan jawaban dengan benar 2 bagian 30

6 Siswa dapat menyebutkan jawaban dengan benar 1 bagian 15

7 Siswa dapat menyebutkan jawaban dengan benar 0 bagian 0

Skor maksimum 100

Pedoman Penskoran Nomor 2

No. Aspek yang dinilai Skor

1. Kesesuaian dengan konsep dan prinsip 10

2. Ketepatan memilih bahan

20

3. Kreativitas

35

4. Ketepatan waktu pengumpulan tugas

20

5. Kerapihan hasil

20

Skor maksimum 100

NILAI = (Skor Nomor 1 + Skor Nomor 2) / 2

PEMERINTAH PROVINSI JAWA TENGAH

DINAS PENDIDIKAN DAN KEBUDAYAAN

SEKOLAH MENENGAH KEJURUAN NEGERI 1 WANAREJA

Jalan Srikaya Wanareja, Cilacap Kode Pos 53265 Telepon 0280 – 6260233 Faksimile : 0280 – 6260233 E-mail : smkonewan@yahoo.co.id

Mata Pelajaran : C3 – Desain Media Interaktif

Bidang Keahlian : Teknologi Informasi dan Komunikasi

Program Keahlian : Teknik Komputer dan Informatika

Kompetensi Keahlian : Multimedia

Kelas / Semester : XII / Ganjil

Alokasi Waktu : 30 Menit

3.3 Menerapkan prinsip-prinsip desain user interface pada multimedia interaktif berbasis

halaman web dan media interaktif.

4.3 Membuat user interface menggunakan prinsip-prinsip desain user interface pada

multimedia interaktif berbasis halaman web dan media interaktif

Setelah mempelajari bab ini, siswa diharapkan mampu:

1. Memahami prinsip-prinsip desain user interface pada multimedia interaktif

2. Membuat user interface menggunakan prinsip-prinsip desain user interface pada

multimedia interaktif berbasis halaman web dan media interaktif menggunakan adobe

flash CS3

MEMBUAT TAMPILAN MENU MEDIA PEMBELAJARAN INTERAKTIF

Berikut langkah-langkahnya:

1. Buka program Adobe Flash CS3 dan buatlah dokumen baru:

2. Selanjutnya ubah layer name pada layer 1 menjadi background dengan cara double click 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 | Import to Stage. 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 text tool, missal “MEDIA

PEMBELAJARANINTERAKTIF”

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

7. Kunci terlebih dahulu layer background agar tidak terubah pada proses selanjutnya.

8. Buat layer baru dengan mengklik icon insert layer. Kemudian beri nama Tbl Teori.

9. Lakukan hal yang sama untuk membuat layer Tbl Tbl Video, Musik, dan Tbl Soal Latihan

dengan susunan seperti pada gambar berikut:

10. Selanjutnya klik menu windows | Common Library | 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 common Library pilih jenis tombol yang akan kita

gunakan (missal Rounded Blue pada folder Button Rounded) 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 timeline Button.

14. Klik frame Up 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 timeline stage utama.

16. Masih di layer Tbl Teori, selanjutnya klik kanan pada frame ke 10 lalu pilih Insert Key Frame.

17. Selanjutnya Dengan menggunakan selection tool 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 Action Frame seperti gambar di bawah ini:

21. Pastikan yang muncul adalah Action Frame. 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.

9. Laptop / Komputer

10. Internet

11. Aplikasi Pengolah Kata (Tugas Nomor 1)

12. Aplikasi Pengolah Gambar (Tugas Nomor 2)

Petunjuk :

5. Kerjakan lembar kerja di bawah ini dengan penuh tanggung jawab,

6. Hasil pekerjaan silahkan dikirim melalui google drive melalui link di bawah ini

https://drive.google.com/drive/folders/16LBXSN2iAhoZlwEWKJKo78bKXsfPo60q?usp

=sharing sertakan Nama, Kelas dan NIS

SOAL :

5. Carilah contoh-contoh tampilan menu media pembelajaran interaktif sebagai referensi

pembuatan tampilan menu media pembelajaran interaktif minimal 5 sertakan alamat url

Kerjakan sesuai dengan lembar kerja berikut!

TAMPILAN MENU MEDIA PEMBELAJARAN INTERAKTIF

TAMPILAN MENU ALAMAT URL

TAMPILAN MENU MEDIA PEMBELAJARAN INTERAKTIF

TAMPILAN MENU ALAMAT URL

6. Buatlah Tampilan Menu Media Pembelajaran Interaktif seperti langkah-langkah di atas

menggunakan adobe Flash CS 3

Pedoman Penskoran Soal Nomor 1

Nomor Penyelesaian/Kunci Jawaban Skor

1 Siswa dapat menyebutkan minimal 5 contoh tampilan menu 50

2 Siswa dapat menyebutkan minimal 4 contoh tampilan menu 40

3 Siswa dapat menyebutkan minimal 3 contoh tampilan menu 30

4 Siswa dapat menyebutkan minimal 2 contoh tampilan menu 20

5 Siswa dapat menyebutkan minimal 1 contoh tampilan menu 10

6 Siswa dapat menyebutkan minimal 0 contoh tampilan menu 0

Skor maksimum 50

Pedoman Penskoran Nomor 2

No. Aspek yang dinilai Skor

1. Kesesuaian dengan konsep dan prinsip 20

2. Ketepatan memilih bahan

20

3. Kreativitas

50

4. Ketepatan waktu pengumpulan tugas

30

5. Kerapihan hasil

30

Skor maksimum 150

NILAI = (Skor Nomor 1 + Skor Nomor 2) / 2