1. KD. MEMAHAMI PERANCANGAN ALUR
MULTIMEDIA INTERAKTIF BERBASIS
HALAMAN WEB DAN MEDIA INTERAKTIF
Disusun Oleh : Zainul Arifin, S. Kom
SMK NEGERI 1 PUNGGING MOJOKERTO
A. PENGERTIAN ALUR PERANCANGAN (FLOWCHART).
Flowchart atau bagan alur adalah diagram yang menampilkan langkah-
langkah dan keputusan untuk melakukan sebuah proses dari suatu rancangan
program. Setiap langkah digambarkan dalam bentuk diagram dan dihubungkan
dengan garis atau arah panah.
Flowchart berperan penting dalam memutuskan sebuah langkah atau
fungsionalitas dari sebuah proyek pembuatan program yang melibatkan banyak
orang sekaligus. Selain itu dengan menggunakan bagan alur proses dari sebuah
program akan lebih jelas, ringkas, dan mengurangi kemungkinan untuk salah
penafsiran.
a) FUNGSI FLOWCHART.
Fungsi utama dari flowchart adalah memberi gambaran jalannya sebuah
program dari satu proses ke proses lainnya. Sehingga, alur program menjadi
mudah dipahami oleh semua orang. Selain itu, fungsi lain dari flowchart adalah

2. untuk menyederhanakan rangkaian prosedur agar memudahkan pemahaman
terhadap informasi tersebut.
b) JENIS FLOWCHART.
Flowchart sendiri terdiri dari lima jenis, masing-masing jenis memiliki
karakteristik dalam penggunaanya. Berikut adalah jenis-jenisnya:
1. Flowchart dokumen.
Pertama ada flowchart dokumen (document flowchart) atau bisa juga
disebut dengan paperwork flowchart. Flowchart dokumen berfungsi untuk
menelusuri alur form dari satu bagian ke bagian yang lain, termasuk
bagaimana laporan diproses, dicatat, dan disimpan.
2. Flowchart program.
Selanjutnya kita akan membahas flowchart program. Flowchart ini
menggambarkan secara rinci prosedur dari proses program. Flowchart
program terdiri dari dua macam, antara lain: flowchart logika program
(program logic flowchart) dan flowchart program komputer terinci (detailed
computer program flowchart).
3. Flowchart proses.
Flowchart proses adalah cara penggambaran rekayasa industrial
dengan cara merinci dan menganalisis langkah-langkah selanjutnya dalam
suatu prosedur atau sistem.
4. Flowchart system.
Yang keempat ada flowchart sistem. Flowchart sistem adalah
flowchart yang menampilkan tahapan atau proses kerja yang sedang
berlangsung di dalam sistem secara menyeluruh. Selain itu flowchart sistem
juga menguraikan urutan dari setiap prosedur yang ada di dalam sistem.

3. 5. Flowchart skematik.
Flowchart ini menampilkan alur prosedur suatu sistem, hampir sama
dengan flowchart sistem. Namun, ada perbedaan dalam penggunaan simbol-
simbol dalam menggambarkan alur. Selain simbol-simbol, flowchart
skematik juga menggunakan gambar-gambar komputer serta peralatan
lainnya untuk mempermudah dalam pembacaan flowchart untuk orang
awam.
c) SIKLUS DALAM FLOWCHART.
Siklus dalam flowchart adalah siklus input-proses-output atau sering
disebut siklus IPO. Siklus IPO dapat kita analogikan sebagai komponen
hardware komputer. Komponen input seperti keyboard, mouse, scanner, dan
sebagainya dapat kita andaikan sebagai input (penerimaan suatu perintah atau
data yang akan diproses).
Komponen proses seperti CPU akan mengolah atau memproses data yang
telah masuk dalam komponen input agar menghasilkan suatu hasil. Dan
akhirnya hasil pemrosesan data atau perintah yang dilakukan oleh CPU
ditampilkan pada monitor, speaker atau printer.
d) SIMBOL FLOWCHART.
Pada dasarnya, dalam merancang flowchart tidak ada ketentuan mutlak
yang harus dipenuhi. Hal itu dikarenakan flowchart dibuat berdasarkan
pemikiran untuk menganalisa suatu permasalahan dalam bisnis.
Hanya saja, Anda dapat merancang flowchart ketika Anda telah
mengetahui simbol-simbol standar yang umum digunakan dalam proses
pembuatan flowchart.
1. Simbol Arus (Flow Direction Symbols).
Biasanya simbol yang termasuk kedalam ketegori ini digunakan sebagai
simbol penghubung.

4. 2. Simbol Proses (Processing Symbols)
Sesuai dengan namanya, simbol proses digunakan untuk menyatakan simbol
yang berkaitan dengan serangkaian proses yang dilakukan
3. Simbol I/O (Input-Output)
Simbol yang termasuk kedalam bagian input-output berkaitan dengan
masukan dan keluaran.
Dalam membangun suatu sistem, ada banyak tahapan yang harus di
perhatikan. Salah satu dari tahapan itu adalah perancangan sistem. Sebelum

5. menuangkan rancangan sistem ke dalam bentuk program, sebaiknya di buat
rancangan logis dari sistem tersebut. Suatu alat yang dapat membantu dalam
merancang desain logis tersebut adalah dengan menggunakan flowchart.
Dengan menggunakan flowchart, Anda dapat menguraikan setiap
aktivitas-aktivitas yang terjadi dalam sistem tersebut. Untuk merancang
flowchart, Anda harus mengetahui simbol-simbol yang dapat digunakan untuk
mendefinisikan hal yang berupa masukan, proses atau keluaran dari sistem.
B. PERANCANGAN ALUR MULTIMEDIA INTERAKTIF.
Jika kita pelajari dari segi fungsi, maka multimedia interaktif merupakan alat
untuk mengelola, menginformasikan, dan jaringan atau hanya sebatas hiburan.
Sedangkan dari segi bahasa kata multi yang berarti banyak, sedangkan media
adalah alat untuk menyampaikan.
Manfaat multimedia interaktif Multimedia interaktif dapat di manfaatkan
dalam berbagai bidang, seperti industri kreatif, komersial, hiburan dan seni rupa,
pendidikan, kesehatan, industri, penelitian serta teknik.
Pendistribusian multimedia interaktif dapat di lakukan secara offline (dalam
bentuk CD) dan online (menggunakan jasa internet atau jaringan). Selain manfaat
di atas ada beberapa keunggulan dalam menggunakan multimedia interaktif, di
antaranya:
1) Menyajikan benda atau peristiwa yang berbahaya, seperti letusan gunung,
tsunami, kebanjiran, dan lain-lain.
2) Memperkecil benda yang besar, diantaranya gedung-gedung, gunung,
kendaraan, dan lain-lain.
3) Menyajikan benda atau peristiwa yang kompleks dan rumit secara cepat datau
lambat, seperti pergerakan mesih, sistem pada tubuh manusia atau hewan, tata
surya, dan lain-lain.

6. 4) Memperbesar benda kecil sampai yang tidak nampak oleh mata (kasat mata),
contohnya atom, bakteri, kuman, elektron, dan lain-lain.
5) Menyajikan benda atau peristiwa yang jauh, seperti posisi bulan, pergerakan
bintang, gerhana, salju, dan lain-lain.
a) ALAT PENYUSUN MULTIMEDIA INTERAKTIF.
Tools adalah paket perangkat lunak yang dipergunakan dalam
menyampaikan sebuah konten multimedia dalam bentuk teks, grafik, gambar,
suara, dan video kepada end-user (penguna). Yang tergolong alat penyusun
multimedia interaktif tersebut diantaranya Adobe Flash, iSpring, Authoware,
Komposer FX, Ms. Power Point dan lain sebagainya.
b) FORMAT SAJIAN MULTIMEDIA INTERAKTIF.
Kategori format sajian terbagi ke dalam lima kelompok, diantaranya:
1) Bercerita (tutorial): sajian berupa teks, gambar, grafik, dan gambar
bergerak. Tutorial sendiri terbagi menjadi dua, yaitu terprogram dan
intelejen.
2) Simulasi (simulation): model ini merupakan pengetahuan proses secara
dinamis antara dunia nyata dan digital sehingga pengguna mampu
menerapkan ke dalam hal yang lebih konkrit.
3) Percobaan dan eksperimen (experiment): ditujukan pada kegiatan
praktikum yang berkaitan dengan sains, seperti IPA, Kimia, Fisika dan yang
lainnya.
4) Permainan (game): pada format ini diharapkan adanya pembelajaran
sambil bermain.
5) Latihan dan praktik (drill and practise): berfungsi untuk melatih
penggunanya sehingga mempunyai kemampuan dan keterampilan pada
suatu konsep.

7. c) KONSEP MULTIMEDIA INTERAKTIF.
Kata Konsep mempunyai arti tersendiri seperti yang tertuang dalam
beberapa pendapat. Kamus Besar Bahasa Indonesia (KKBI) menyatakan bahwa
konsep adalah:
1) Rancangan atau buram surat dan sebagainya;
2) Ide atau pengertian yang di abstrakkan dari peristiwa konkret: satu istilah
dapat mengandung dua konsep yang berbeda;
3) (Linguistik), gambaran mental dari objek, proses, atau apa pun yang ada di
luar bahasa, yang di gunakan oleh akal budi untuk memahami hal-hal lain.
4) Wikipedia – Konsep atau anggitan adalah abstrak, entitas mental yang
universal yang menunjuk pada kategori atau kelas dari suatu entitas,
kejadian atau hubungan;
5) Konsep menurut para ahli:
 Aristoteles – Konsep merupakan penyusun utama dalam pembentukan
pengetahuan ilmiah dan filsafat pemikiran manusia;
 Siswoyo – Konsep yaitu seperangkat konsep dan definisi yang saling
berhubungan yang mencerminkan suatu pandangan sistematik mengenai
fenomena dengan menerangkan hubungan antar variabel dengan tujuan
untuk menerangkan dan meramalkan fenomena.
Dan masih banyak lagi pendapat para ahli lainnya dari dalam negeri
maupun luar negeri mengenai konsep. Dalam menentukan suatu konsep harus
menyertakan beberapa unsur, di antaranya adalah tentang penetapan sebuah
nama, contoh positif-negatif, karakter pokok, rentang karakter (pembatasan),
dan kaidah.
Merujuk dari penjabaran kata konsep seperti yang di jelaskan di atas,
bahwa konsep merupakan pemahaman tentang pemanfaatan komputer dalam
membuat dan menggabungkan media teks, gambar, suara, video, dan animasi
yang terdapat dalam pemikiran maupun ide.

8. C. STORYBOARD MULTIMEDIA INTERAKTIF.
Storyboard atau kerangka grafis digunakan untuk mendiskripsikan proyek
multimedia interaktif dengan detail menggunakan kata-kata dan sketsa untuk
setiap tampilan layar, suara, pilihan navigasi, pilihan warna dan gradasi yang
tepat, isi teks, atribut dan font, bentuk tombol, style, umpan balik/respon.
a) Fungsi Storyboard Multimedia Interaktif antara lain :
1. Untuk memperjelas flowchart.
2. Sebagai pedoman/acuan bagi animator, progamer, narrator dan tim yang
lain.
3. Merupakan dokumen tertulis.

9. 4. Bahan pembuatan Manual Book/petunjuk pengguna.
b) Ketentuan umum storyboard multimedia interaktif antara lain :
1. Gambar yang disiapkan disertai dengan penjelasan dan narasi.
2. Pembuatan storyboard diawali dengan gambar visual.
3. Narasi digunakan untuk melengkapi hal sulit yang tidak bisa diwakili dengan
bentuk visual.
4. Bahasa lisan yang digunakan terutama yang dibaca oleh narrator.
5. Gunakan struktur kalimat yang sederhana.
6. Gunakan symbol yang sederhana dan mudah dipahami oleh semua orang.
7. Gunakan gambar dalam bentuk yang menarik serta komposisi yang tepat
dan mudah dipahami.
c) Komponen penyusun storyboard interaktif antara lain :
1. Sketsa atau gambaran layar, halaman atau frame.
2. Warna, penempatan dan ukuran grafik, jika perlu.
3. Teks asli, jika ditampilkan pada halaman atau layar.
4. Warna, ukuran dan tipe font jika ada teks.
5. Narasi jika ada.
6. Animasi jika ada.
7. Video jika ada.
8. Audio jika ada.
9. Interaksi dengan pengguna jika ada.
d) Ketentuan Umum Storyboard Media Pembelajaran Interaktif
1. Bentuk-bentuk gambar yang disiapkan disertai dengan penjelasan-
penjelasan atau narasi.
2. Penulisan storyboard ini sebaiknya diisi unsur visual terlebih dahulu.

10. 3. Struktur kalimat sederhana, hindari kalimat-kalimat yang panjang dan
berbelit.
4. Bahasa yang digunakan adalah bahasa lisan bukan bahasa tulisan (terutama
yang harus dibacakan oleh narrator)
5. Narasi biasanya disusun kemudian untuk melengkapi hal-hal yang sulit
diungkapkan dalam bentuk visual.
6. Simbol dalam bentuk yang sederhana, jelas maknanya serta sudah diketahui
oleh siswa.
7. Gambar dalam bentuk yang menarik, warna kontras (kecuali untuk
background) komposisi yang tepat dan sederhana, mudah dibaca dan
dipahami.
D. FORMAT MENYUSUN STORYBOARD MULTIMEDIA INTERAKTIF.
1. USER INTERFACE
User interface merupakan bagian program dimana di dalamnya terjadi
interaksi antara manusia dan komputer. Perancangan dari interface sangat
penting untuk menentukan keberhasilan dari sebuah software.
Seorang developer yang membuat program harus memikirkan bagian
user interface sedemikian rupa hingga program yang dibuatnya dapat berfungsi
dengan baik.
Adapun Tujuan User Interface sebagaimana berikut :

11. a) Memudahkan input data masukan oleh user
b) Membuat program menjadi menarik
c) Menampilkan hasil pemrosesan data oleh program
d) Memudahkan pembacaan data yang dihasilkan oleh program
e) Efisiensi kerja yang dilakukan oleh user
f) Memperkecil kesalahan masukan data yang dilakukan oleh user
g) Memberikan kesan familiar pada sebuah program
h) Memberikan respon yang jelas untuk setiap aksi yang dilakukan oleh
program
i) Menghilangkan ambiguitas dari perintah perintah yang ada
2. PRINSIP DESAIN USER INTERFACE
User interface adalah cara atau mekanisme pengguna melakukan
interaksi dengan program, sehingga user dan program dapat ‘berkomunikasi’
satu sama lain. User interface dapat menerima informasi dari user dan
memberikan informasi kepada user (setelah melalui proses yang ada pada
program atau komputer) untuk kepentingan user.
User interface dapat menerima atau memberikan informasi kepada user
melalui proses interaksi, melalui proses inilah program dan user dapat
berinteraksi untuk kepentingan user.

12. Dalam pendesainan interface atau antarmuka ini memiliki beberapa
prinsip yang dibilang cukup penting, antara lain:
a) User compatibility, Antarmuka merupakan cara masuk ke sebuah sistem.
Designer harus mengumpulkan berbagai ragam dari si pemakai karena sifat
pemakai tidak sama yang harus disesuaikan, karena perancang ini harus
menyesuaikannya dan tidak mementingkan secara pribadi.
b) Product compatibility, Aplikasi yang sesuai dengan sistemnya pada interface
berbeda dengan sistem yang manual yang menghasilkan hasil yang lainnya.
Hal itu tidak dimaukan dari perusahaan karena dengan aplikasi ini dapat
menjaga produk yang akan dihasilkan
c) Task compatibility, Aplikasi yang membantu para pemakai dalam
menyelesaikan pekerjaannya. Pemakai akan mendapati pemilihan dan
pemikiran yang mudah.
d) Work flow compatibility, Sistem manual yang terdapat langkah kerjanya
dalam hal penyelesaian tugas. Dengan work flow compatibility ini bisa
memudahkan pengguna dalam percepatan tugasnya.
e) Consistency, Sistem yang konsisten dengan sistem yang ada sesuai
barangnya yang di dasarkan kepada setiap sifat dari semua orang yang
berbeda
f) Familiarity, Memberikan tampilan yang terkesan kepada pemakai. Tampilan
awal yang harus membuat para pemakai agar tidak kebingungan dalam
pemakaiannya
g) Simplicity, Memberikan sistem sederhana yang tidak membuat si pemakai
kebingungan. Hal yang membuat si pemakai bosan ialah dengan sistem yang
tidak sederhana atau bisa di bilang dengan berbelit. Tetapi si pemakai akan
merasa senang apabila sistem itu mempunyai nilai kesederhanaan
h) Direct manipulation, Pengguna sangat ingin mempunyai suatu media yang
dapat melakukan suatu kemajuan terhadap sistemnya dan dapat di
sesuaikan dengan kebutuhannya itu.

13. i) Control, Prinsip ini sama dengan sifat user yang mempunyai pemikiran yang
bisa berganti. Karena itu harus merancang suatu keadaan yang dapat
mengatasi itu.
j) WYSIWYG, Sistem yang satu ini mempunyai arti ialah apa yang kamu lihat
itulah yang kamu dapatkan.
k) Flexibility, Fleksibel merupakan bentuk kelenturan dari penyelesaian pada
saat menyelesaikan masalah.
l) Responsiveness, Setelah memasukkan data ke sistem melalui interface,
sebaiknya sistem akan memberi kerjaan dari hasil data yang dimasukkan.
m)Invisible Technologi, Secara pemikiran, si pemakai memiliki rasa ingin tahu
terhadap kehebatan dari sistem yang ada.
3. PERANCANGAN TEMPLETE.
Tampilan visual merupakan hal yang penting dalam interaksi manusia
dan komputer. karena keberadaan komputer adalah untuk membantu
pekerjaan manusia. Sehingga komputer dalam tampilan visual dimonitornya
tersebut harus memenuhi beberapa klasifikasi, agar mudah mengerti manusia.
Salah satu tujuannya, yaitu karena ingin informasi yang disampaikan
lewat komputer itu mudah dipahami dan dimengerti.

14. E. MULTIMEDIA INTERAKTIF BERBASIS HALAMAN
Multimedia terbagi menjadi dua jenis yaitu Multimedia linear dan Multimedia
interaktif. Multimedia linear merupakan multimedia yang tidak sama sekali
menggunakan suatu alat untuk mengontrol, contohnya ialah TV.
Sedangkan Multimedia intraktif merupakan kebalikan dari Multimedia
Linear itu sendiri pada intinya Multimedia ini memiliki suatu alat untuk
mengontrol dan dapat di gunakan oleh pemakai itu sendiri sehingga membuat
pemakai tersebut bisa memilih memilih tujuan selanjutnya. Contohnya ialah
Aplikasi Game dan lain lain.
Multimedia interaktif ini ialah penggabungan semua media misal : Teks,
Gambar, Suara, Vidio dan Animasi.
1. Teks, ialah suatu artian yang berupa medium visual yang di pakai untuk
mengartikan bahas lisan.Teks tersebut memiliki bermacam jenis bentuk,
ukuran, dan juga warna.
2. Gambar, merupakan suatu hasil dari penjelasan sebuah gambar visual yang
ada.Untuk GReader ketahui gambar ini di perlukan untuk menunjukan
informasi yang tidak bisa diartikan lewat sebuah kata.
3. Audio, semua hal yang dapat di dengar dengan menggunakan pendengaran,
format file audio yang umum termasuk : wav. mp3.midi.
4. Vidio, merupakan sebuah hal yang dapat di lihat dengan juga di dengar. Format
file vidio termasuk : avi. mp2mp4.
5. Animasi, suatu pergerakan yang di ciptakan dengan menampilkan deretan
frame kepada layar.
6. Java applet, Sebuah program kecil yang dimasukan ke dalam halaman web
yang melakukan tugas tertentu

15. F. FUNGSI TOOL APLIKASI MULTIMEDIA INTERAKTIF BERBASIS HALAMAN
WEB.
Multimedia interaktif berbasis halam web adalah memahami pemafaatan
computer untuk membuat dan mengabukan teks, gambar, suara, video, dan
animasi dengan mengabukan perangkat perangkat tertentu yang dapat
memungkikan pengguna melalukan navigasi, berinteraksi dan komunikasi baik
berbasis halaman web maupun media interaktif. Multimedia berbasis web
mengandung lebih dari satu jenis media biasanya suara, video, atau, animasi. Di
samping teks dan gambar.
Keuntungan dan kerugian menggunakan web berbasis multimedia.
Keuntungan.
 Dapat mengatasi berbagai gaya belajara
 Belajar dengan system visual
 Belajar secara auditori
 Kinestetik perserta didik
 Bahan lebih menarik dan menyenangkan
 Banyak ide ide lebih mudah untuk menyampaikan .

16. Kekurangan.
 Waktu dan biaya pengembangan
 Kompatibilitas dan waktu download untuk multimedia berbasis web.
Sebenarnya word wide web pada awal diluncurkan pada tahun 1989 yang
didesain bukan untuk multimedia tetapi untuk pengiriman dokumen berformat
HTML dengan menambahkan gambar dan ilutasi garis. Aplikasi multimedia
interaktif berbasis HTML 5 memiliki kelebihan yang luar biasa antara lain
1. Lebih mudah dikembangkan.
2. Mudah di update.
3. Aksesr informasi lebih mudah.
4. Lebih murah dan lebih powerful.
5. Happy platform.
6. Bisa digunakan secara offline.