JOBSHEET

Mata Pelajaran : Desain Media Interaktif

Paket Keahlian : Multimedia
Kelas : XII
Tahun Pelajaran : 2019/2020

A. Informasi Pengetahuan
Materi Jobsheet ini merupakan bentuk tugas dalam kegiatan pembelajaran praktik yang
mengacu pada kompetensi dasar, yaitu :
4.1 Mendemontrasikan konsep multimedia interaktif berbasis halaman web dan media
interaktif √
4.2 Membuat (desain/perancangan alur) untuk 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
4.4 Mengoperasikan aplikasi multimedia interaktif berbasis halaman web dan media interaktif

4.5 Menggabungkan image, animasi, audio, video dalam sajian multimedia interaktif berbasis
halaman web dan media interaktif
4.6 Membuat style pada multimedia interaktif berbasis halaman web dan media interaktif
4.8 Menggunakan program (coding) pada multimedia interaktif
4.9 Mengolah multimedia interaktif menggunakan kode program (coding)
4.10 Mengolah data pada produk multimedia interaktif
4.11 Melakukan publikasi multimedia interaktif
4.12 Mendesain produk multimedia interaktif

B. Tujuan
1. Membuat perencanaan proses desain MPI
2. Melakukan proses penggabungan image, animasi, audio, video dalam sajian multimedia
interaktif
3. Membuat produk multimedia interaktif.

C. Alat dan Bahan

1. Komputer
2. Printer
3. CD Blank
4. Box CD
5. Kertas Label
6. Kertas Cover
7. Laminator CD

D. Aspek Keselamatan dan Kesehatan Kerja

1. Menjaga kebersihan di lingkungan kerja
2. 5 menit awal melakukan kebersihan dan cek kesiapan alat praktek sebelum dimulai
3. Mengoperasikan alat praktek sesuai SOP
4. Menata kembali alat dan bahan setelah dipergunakan
5. 10 menit akhir melakukan kebersihan dan cek kondisi alat praktek sebelum praktek
diakhiri
6. Menangggulangi pencemaran dan kerusakan lingkungan serta meningkatkan kemampuan
dan fungsi kualitas lingkungan.
7. Langkah Kerja / SOP
1. Buka Software “Adobe Flash”
2. Pilih Flash file (ActionScript 2.0)
3. Biarkan dengan ukuran default yaitu 550 px x 400 px
4. Pada “Layer 1” ganti nama menjadi misalnya “bg utama” ini digunakan untuk Background
utama,
Panjang frame tidak jadi masalah, namun disini saya membuat sepanjang 20 Frame
5. Klik File > Import > Import to stage (Ctrl + R) pilih gambar yang sesuai, jika sudah
gambar dipaskan sehingga pas dengan Workspace Anda misalnya gambar Pemandangan
6. Masukkan gambar kedua bila diperlukan dengan membuat layer baru “Insert Layer” dan
beri nama “bg kedua”
7. Buat layer baru lagi untuk membuat Teks di Header dari MPInya, beri nama “Tulisan
depan” Pada frame 1 buat Teksnya “Pembelajaran interaktif.
8. Selanjutnya membuat beberapa Tombol di Tab atas, dengan membuat layer baru “navatas”
lalu buat persegi dengan warna yang sesuai misalnya adalah hijau dan Convert to Symbol
dengan tekan F8 beri nama terserah Anda
9. Copy Bar tersebut dan Beri tulisan di Bar barnya sesuai dengan kebutuhan, bila perlu buat
satu lagi bar dipojok kanan yang digunakan untuk Tombol Exit
10. Buat tombol next prev dengan cara sama seperti di atas buat layer baru lagi
11. Buat layer baru untuk “isi”, berisi tentang KI, Materi. Pada frame 1 isikan Action “Stop”
terlebih dahulu sehingga muncul ikon “a” caranya dengan klik kanan pada frame 1 tekan
F9 isikan stop();
12. Pada layer isi. Frame 2 dan seterusnya mulai diisi oleh materi pertama, kedua dan
seterusnya. Untuk mengisi materi lagi dengan klik kanan pada frame selanjutnya pilih
“Insert Blank Keyframes”
13. Berikan Script pada Tombol Next/Prev, Exit dan Home karena sebelumnya belum
berfungsi, caranya pilih tombol tersebut, tekan F9 isikan script berikut :
Untuk Prev : on (release) {
prevFrame();
}
Untuk Next : on (release) {
nextFrame();
}
Untuk Home : on (release) {
gotoAndStop(1);
}
Untuk Exit : on (release) {
fscommand(“quit”);
}

Untuk mencobanya bisa tekan Ctrl + Enter, untuk script Exit biasanya akan berfungsi
ketika sudah di Publish

14. Selanjutnya memberikan script pada tombol depan yaitu Tujuan, Materi, Refrensi
Tombol Tujuan mengarah ke Frame 2 pada Layer isi, dan materi mulai di Frame 3

Script untuk “Tujuan” : on (release) {

gotoAndStop(2);
}
 Karena letak isi “Tujuan” ada di Frame 2 (2)

15. Untuk memberi suara pada tombol, caranya adalah klik dua kali pada tombol mana yang
ingin diberi suara, lalu ada 3 Frame yaitu. Up, Over, Down, Hit

Nah, untuk memberi suara pada ketika mouse menempel tombol pilih yang Over. Hit jika
mouse menekan tombol. Dan masukkan suara yang sebelumnya telah di Import. File >
Import > Import to Library.

Untuk memasukkannya, di tab Properties sebelah bawah misal slapstick.wav. nanti ketika
mouse mengarah ke tombol tersebut akan mengeluarkan suara tersebut.

16. Dan setelah semua tombol berfungsi semua, sekarang MPI Anda sudah hampir jadi tinggal
di Publish ke berbagai format yang Anda inginkan.

8. Gambar Kerja / Materi Soal

Nama : No. Absen :

Kelas :
JenisPekerjaan :Membuat MPI Tanggal : …… Estimasi waktu ; 20 jam
Mulai : Selesai : Break : Used :

Bobot Nilai
TuntutanKualitas SkorHasil
Tuntutan (Skor x Bobot)
Produk :

1. Hasil Desain UI 3
2. Hasil Desain Button 2
3. Kesesuaian Actionscript
dengan fungsinya 4
4. Hasil integrasi File 3
Multimedia
1
5. Hasil Desain CD
Jumlah
70% x Jumlah
Proses :

1. Melakukan Layouting 3
tampilan
2. Membuat desain 2
button
3. Memasukkan 4
Actionscript ke dalam
tombol-tombol
navigasi
4. Mengintegrasikan file
Multimedia 3
5. Membuat Desain CD
1
Jumlah
30% x Jumlah

Perubahan Nilai Karena Rata-Rata Ukuran

waktu :
Nilai Produk (70)
Overtime : (-) .......
Percepatan : (+) ...... Nilai Proses (30)

Pengurangan Nilai Nilai Total

Pelanggaran : (-) .....
Perubahan Nilai Karena waktu

(Overtime dikurangi 1 point)

Percepatan

Pengurangan Nilai Pelanggaran

NILAI AKHIR

RUBRIK:
Produk :
1. Hasil Desain UI :
Nilai 10 : Hasil design sesuai kaidah, Desain Layout Proporsional, tidak ada
yang salah (Kompeten)
Nilai 8 : Hasil design sesuai kaidah, Desain Layout kurang Proporsional, tidak
ada yang salah (Kompeten)
Nilai 6 : Hasil design tidak sesuai kaidah, Desain Layout kurang Proporsional,
tidak ada yang salah (Tidak Kompeten)
Nilai 4 : Hasil design tidak sesuai kaidah, Desain Layout kurang Proporsional,
ada yang salah (Tidak Kompeten)

2. Hasil Desaign Button :

Nilai 10 : Hasil design sesuai kaidah, Proporsional, tidak ada yang salah
(Kompeten)
Nilai 8 : Hasil design sesuai kaidah, Kurang Proporsional, tidak ada yang
salah (Kompeten)
Nilai 6 : Hasil design tidak sesuai kaidah, Kurang Proporsional, tidak ada
yang salah (Kompeten)
Nilai 4 : Hasil design tidak sesuai kaidah, Kurang Proporsional, ada
yang salah (Kompeten)

3. Kesesuaian Action Script Dengan Fungsinya:

Nilai 10 : Action Script berfungsi (Kompeten)
Nilai 1 : Action Script tidak berfungsi (Tidak Kompeten)

4. Hasil integrasi file Multimedia :

Nilai 10 : Menyajikan file audio, video, animasi gambar proporsional
(Kompeten)
Nilai 7 : Menyajikan file audio, video, animasi gambar cukup proporsional
(Kompeten)
Nilai 5 : Menyajikan file audio, video, animasi gambar kurang proporsional
(Tidak Kompeten)

5. Membuat Design CD :
Nilai 10 : Hasil design sesuai kaidah, Proporsional, tidak ada yang salah
(Kompeten)
Nilai 8 : Hasil design sesuai kaidah, Kurang Proporsional, tidak ada yang
salah (Kompeten)
Nilai 6 : Hasil design tidak sesuai kaidah, Kurang Proporsional, tidak ada
yang salah (Tidak Kompeten)
Nilai 4 : Hasil design tidak sesuai kaidah, Kurang Proporsional, ada
yang salah (Tidak Kompeten)

Proses :
1. Melakukan Layouting Tampilan :
Nilai 10 : Menerapkan design sesuai kaidah, menerapkan design layout secara
proporsional (Kompeten)
Nilai 8 : Menerapkan design sesuai kaidah, Kurang menerapkan design layout
secara proporsional (Kompeten)
Nilai 6 : Kurang menerapkan design sesuai kaidah, Kurang menerapkan
design layout secara proporsional (Tidak Kompeten)
Nilai 4 : Tidak menerapkan design sesuai kaidah, Tidak menerapkan
design layout secara proporsional (Tidak Kompeten)
2. Membuat Design Button :
Nilai 10 : Menerapkan kaidah sesuai design, menerapkan design button secara
proporsional (Kompeten)
Nilai 8 : Menerapkan kaidah sesuai design, Kurang menerapkan design
button secara proporsional (Kompeten)
Nilai 6 : Kurang menerapkan kaidah sesuai design, Kurang menerapkan
design button secara proporsional (Tidak Kompeten)
Nilai 4 : Tidak menerapkan kaidah sesuai design, Tidak menerapkan
design button secara proporsional (Tidak Kompeten)
3. Memasukkan Action Script ke dalam tombol-tombol navigasi
Nilai 10 : Menerapkan skrip pemrograman action script sesuai kebutuhan
dengan sangat benar dan sangat tepat (Kompeten)
Nilai 1 : Tidak Menerapkan skrip pemrograman action script sesuai
kebutuhan dengan sangat benar dan sangat tepat (Tidak Kompeten)
4. Mengitegrasikan file Multimedia :
Nilai 10 : Menerapkan file audio, video, animasi gambar proporsional
(Kompeten)
Nilai 7 : Menerapkan file audio, video, animasi gambar cukup proporsional
(Kompeten)
Nilai 5 : Menerapkan file audio, video, animasi gambar kurang proporsional
(Tidak Kompeten)

5. Membuat design CD:

Nilai 10 : Menerapkan design sesuai kaidah, Proporsional, tidak ada yang salah
(Kompeten)
 Nilai 8 : Menerapkan design sesuai kaidah, Kurang Proporsional, tidak ada
yang salah (Kompeten)
Nilai 6 : Kurang Menerapkan design sesuai kaidah, Kurang Proporsional,
tidak ada yang salah (Kompeten)
Nilai 4 : Tidak Menerapkan design sesuai kaidah, Kurang Proporsional, ada
yang salah (Kompeten)

Adiwerna, ……………………
Guru Mapel Siswa,

Miftachul Fauzi, S.Pd. ………………………

Disahkan Adiwerna, Juli 2019

Dibuat oleh

( Sukmono Aji H., S.Kom) ( Miftachul Fauzi, S.Pd)

Ka. Kompetensi Keahlian Guru Pengampu