DESAIN /PERANCANGAN ALUR UNTUK

MULTIMEDIA INTERAKTIF

A. Struktur Navigasi
Salah satu ciri multimedia interaktif adalah kemudahan navigasi. Sebuah aplikasi
multimedia interaktif harus dirancang sesederhana mungkin sehingga pengguna tidak
akan kesulitan dalam mengoperasikannya, bahkan sampai bentuk tombol atau ikon pun
harus dibuat sekomunikatif mungkin. Misalnya saat kursor berada di atas di teks/tombol
yang memiliki link ke interface lain, maka kursor otomatis akan berubah menjadi ikon
‘tangan’, yang artinya menandakan bahwa pengguna dipersilakan mengklik bila ingin
mengakses informasi yang ada di dalamnya.
Berdasarkan contoh storyboard pada bagian sebelumnya, dapat dibuat
rancangan antarmukanya sebagai berikut:
a. Rancangan tampilan awal
Tampilan awal adalah animasi hitungan waktu mundur. Setelah
hitungan mencapai angka 1 maka akan tampil ucapan selamat datang bagi
pengguna aplikasi.

Gambar 4. 17. Rancangan

tampilan awal

b. Rancangan tampilan halaman judul.

Halaman judul menampilkan judul materi dalam aplikasi media
pembelajaran interaktif. Pada halaman ini sudah ditampilkan menu-menu
dalam aplikasi yaitu menu standar kompetensi, sejarah matematika,
petunjuk, materi, kuis dan keluar. Dari halaman judul ini, pengguna dapat
langsung memilih salah satu menu yang ada dalam aplikasi. Jika pengguna
memilih menu keluar, maka aplikasi akan tertutup.
 Gambar 4. 18. Rancangan tampilan
halaman judul
c. Rancangan tampilan halaman standar kompetensi.
Jika pengguna memilih menu standar kompetensi, maka akan tampil
halaman yang memuat informasi mengenai standar kompetensi. Pada
halaman ini terdapat tombol untuk lanjut ke halaman standar kompetensi
berikutnya dan tombol kembali untuk menuju halaman sebelumnya. Terdapat
juga tombol home yang jika dipilih akan membawa pengguna kembali ke
tampilan judul.

Gambar 4. 19. Rancangan tampilan menu STANDAR

KOMPETENSI
d. Rancangan tampilan menu sejarah matematika.
Sejarah matematika sangat panjang dan dapat dikelompokkan
berdasarkan zamannya. Oleh karena itu, pada menu sejarah matematika
terdapat beberapa tombol pilihan untuk mempelajari sejarah matematika
sesuai dengan zamannya. Pengguna tinggal memilih salah satu zaman yang
akan dipelajari, maka akan tampil halaman sejarah matematika sesuai
dengan zamannya

Gambar 4. 20. Rancangan tampilan menu

SEJARAH MATEMATIKA

e. Rancangan tampilan menu kuis

Pada menu kuis terdapat form fill in. Pengguna harus memasukkan
nama dan NIM, setelah itu menekan tombol lanjut. Jika tombol lanjut ditekan,
maka akan akan menuju ke halaman yang menampilkan soal-soal kuis.

Gambar 4. 21. Rancangan tampilan

menu KUIS
 Gambar 4. 22. Hubungan antar
halaman

Struktur navigasi digunakan sebagai penuntun alur sebuah aplikasi

multimedia atau dapat pula dianalogikan sebagai diagram alur dalam
perancangan bahasa pemrograman. Struktur navigasi berfungsi untuk
menggambarkan dengan jelas hubungan dan rantai kerja seluruh elemen yang
akan digunakan dalam aplikasi. Dengan penggambaran struktur navigasi,
pembuatan sebuah aplikasi dapat sistematis dan mudah. Jenis struktur navigasi
dikelompokkan menjadi 4 struktur yang berbeda yaitu linier, hirarki, jaringan, dan
kombinasi yang mempunyai perbedaan dalam bentuk rangkaiannya.
1) Struktur linear
Struktur yang paling sederhana dalam mendesain aliran aplikasi
multimedia adalah struktur linier. Dalam menampilkan aplikasi multimedia
dapat maju (next) dan mundur (back), jika mouse di-klik akan menampilkan
isi informasi dari aplikasi multimedia tersebut dan bila di-klik lagi akan
muncul pada halaman berikutnya.
a) Presentasi
b) Aplikasi computer based-training
c) aplikasi yang memerlukan informasi berurutan.

Gambar 4. 23. Struktur navigasi

linear

2) Struktur hirarki
Struktur hirarki merupakan struktur seperti tangga atau pohon,
dimana masing–masing obyek menyediakan sebuah menu pilihan yang
memiliki lebih banyak menu dengan banyak pilihan. Tidak ada batas ukuran
atau jumlah menu dan sub-menu yang dapat dimiliki dalam sebuah struktur
hirarki.
 Struktur hirarki diadaptasi dari top-down design. Konsep navigasi ini
dimulai dari satu node yan menjadi halaman utama atau halaman awal. Dari
halaman tersebut dapat dibuat beberapa cabang ke halaman-halaman level
1. Halaman tersebut adalah isi atau halaman penunjang dari sebuah
halaman utama, dari tiap halaman level 1 dapat juga dikembangkan menjadi
beberapa cabang lagi

Gambar 4. 24. Struktur navigasi hirarki

3) Struktur jaringan (spoke and hub)

Bentuk struktur jaringan merupakan desain yang paling kompleks
dengan banyak obyek dalam setiap arah pada setiap obyek dalam aplikasi
multimedia. Untuk membuat struktur hyperlink yang fleksibel, struktur
jaringan dapat bekerja dengan baik. Hub dinyatakan deengan halaman
utama yang mempunyai hubungan dengan setiap node. Setiap node dapat
berhubungan kembali ke halaman utama. Pada model ini hanya terdapat
dua macam link, yaitu dari halaman utama ke halaman tertentu, dan dari
halaman tersebut kembali ke halaman utama.
 Gambar 4. 25. Struktur navigasi spoke
and hub

4) Struktur kombinasi
Struktur kombinasi merupakan struktur seperti tangga, pohon-pohon
gabungan antara struktur linier dan menu, di mana di dalamnya tidak ada
batas untuk menyediakan banyak pilihan dengan menu utama dan sub menu
yang ada.

Gambar 4. 26. Struktur navigasi

kombinasi
b. Perancangan Struktur Navigasi
Perancangan struktur navigasi media pembelajaran interaktif untuk mata
kuliah Aljabar dengan pokok bahasan Program Linear adalah sebagai berikut:

Gambar 4. 27. Struktur navigasi media pembelajaran interaktif

Aljabar Linear

1) Navigasi untuk menampilkan halaman menu utama.

 Saat pertama pengguna menjalankan aplikasi, akan tampil
intro/opening. Pada halaman intro terdapat tombol untuk menampilkan menu
utama. Untuk lebih jelasnya dapat dilihat pada gambar berikut:

Gambar 4. 28. Navigasi untuk melihat halaman

menu utama
2) Navigasi untuk menampilkan halaman Standar kompetensi
Saat pertama pengguna menjalankan aplikasi, akan tampil
intro/opening. Pada halaman intro terdapat tombol untuk menampilkan
halaman menu utama. Setelah menu utama tampil, pengguna menekan
tombol standar kompetensi, maka akan tampil halaman standar kompetensi.

Gambar 4. 29. Navigasi untuk melihat halaman standar

kompetensi

3) Navigasi untuk menampilkan halaman Sejarah matematika.

Saat pertama pengguna menjalankan aplikasi, akan tampil
intro/opening. Pada halaman intro terdapat tombol untuk menampilkan
halaman menu utama. Setelah menu utama tampil, pengguna menekan
tombol sejarah matematika, maka akan tampil halaman sejarah matematika

Gambar 4. 30. Navigasi untuk melihat halaman sejarah

matematika
4) Navigasi untuk menampilkan halaman Materi

Gambar 4. 31. Navigasi untuk melihat halaman

Materi

5) Navigasi untuk menampilkan halaman Petunjuk.

Gambar 4. 32. Navigasi untuk melihat halaman

petunjuk

6) Navigasi untuk menampilkan halaman Kuis

Gambar 4. 33. Navigasi untuk melihat halaman ku
 ACTION SCRIPT

Pengertian ActionScript
Action Script adalah bahasa pemrograman yang di pakai oleh software Flash untuk
mengendalikan object-object ataupun movie yang terdapat dalam Flash. Sebenarnya
Flash juga bisa tidak menggunakan ActionScript dalam pemakaiannya, tapi kalau
menginginkan adanya interaktifitas yang lebih komplek maka ActiosScript ini
dibutuhkan.

Fungsi ActionScript
Action script memeliki beberapa fungsi atau peran yang dapat membantu dalam
merancang situs atau movie Flash, diantara nya :
a. Membuat sistem navigasi situs
Hal ini berkaitan dengan bagaimana Action Script dapat mengatur user menjelajahi
situs atau program yang telah dibuat. Dengan demikian animasi situs yang telah
dibuat tidak hanya menjadi “film iklan” belaka, kecuali memang dinginkan seperti itu
(dalam kasus film kartun menggunakan Flash).
b. Menambahkan interaktivitas dengan user
Dengan action Script user dapat berinteraksi dengan setiap elemen di dalam movie
Flash, baik itu tombol movie klip maupun teks.
c. Membuat situs atau Program yang dinamis

1. Action script untuk load movie :

================
on (release)
{
loadMovieNum(“standarkompetensi.swf”, 0);
}
================
Pastikan nama (“*.swf”, 0) sama dengan yang di file.
2. Action script untuk next dan prev frame baik bila di klik maupun lewat keyboard :
Untuk next frame
===============
on (release)
{
nextFrame();
}
===============

Untuk prev frame

===============
on (release) {
prevFrame();
}
===============

Catatan : pastikan di setiap frame yang kita buat di beri action: stop();
3. Action script untuk tampilan menjadi full jika di play pertama kali lewat folder :
===============
fscommand(“fullscreen”,true );
===============

4. Action script untuk Tombol play dan stop :

Tombol play :
===============
on (release)
{
play();
}
===============

Tombol stop :
===============
on (release)
 {
stop();
}
===============
 Atau jika ingin di arahkan ke frame yang diinginkan :
Untuk tombol play :
===============
on (release) {
gotoAndPlay(8);
}
===============
Untuk tombol stop :
===============
on (release) {
gotoAndStop(1);
}
===============
Kita tinggal mengganti angka dalam kurung (…) dengan frame yang kita inginkan.

5. Penggunaan “gotoAndPlay” :
Action ini digunakan jika kita ingin mengulang animasi yang kita buat. Biasa digunakan untuk
animasi yang ada on atau off, dalam artian jika ditekan on langsung bergerak dan jika
ditekan stop akan kembali ke semula.
===============
on(release){ 
gotoAndPlay("masukkan frame yang ingin kita tuju"); 
}
===============

6. Penggunaan “gotoAndStop” :
Action ini digunakan jika obyek yang kita inginkan diam. Atau kita tidak ingin beranjak
pindah ke frame berikutnya secara otomatis.
===============
on(release){ 
gotoAndStop("masukkan frame yang ingin kita tuju"); 
}
===============

7. Untuk tombol keluar :

Jika di tekan langsung keluar, di beri action
===============
 on(release){
fscommand(“quit”);
}
===============

8. Jika kita menginkan ada animasi terlebih dahulu, diberi action pada akhir animasi atau
akhir frame :
===============
fscommand(“quit”, true);
===============

9. ActionScript menutup program :

Pertama buat sebuah tombol / button / MovieClip. Seleksi button / MovieClip tersebut.
Tekan F9 atau klik Actions. Lalu tuliskan ActionScript berikut.
===============
on (release) {
fscommand(“quit”);
}
===============
// on (release) = Saat Mouse ditekan kemudia di lepaskan,
// fscommand(“quit”) = command untuk keluar.

10. ActionScript Membuat fullscreen

Ini adalah ActionScript untuk membuat program anda menjadi fullscreen.
Sama dengan langkah yang sebelumnya. Siapkan sebuah button / MovieClip. Lalu tekan F9.
Berikan ActionScript seperti ini ,
===============
 on (release) {
fscommand(“fullscreen”, true);
}
===============

// on (release) = Saat Mouse ditekan kemudian di lepaskan,

// fscommand(“fullscreen”) = command untuk fullscreen, benar.

11. Disable ContextMenu

Apa itu ContextMenu? ContextMenu adalah menu yang ada saat kalian klik kanan pada file
flash kalian. Coaba kalian klik kanan , maka kalian akan menemukan menu-menu seperti
Zoom in, Zoom Out, Quality, dll. Jika kalian menggunakan ActionScript seperti dibawah ini
maka begitu kalian klik kanan, ContextMenu nya hanya menjadi About Macromedia Flash
Player, dan Setting.
Tekan F9 pada frame. Lalu tuliskan ActionScript ini.
===============
fscommand(“ShowMenu”, false);
===============

FUNGSI OBJEC SCRIPT

Quit or Tombol on (release)
Close {   fscommand("quit","true");      }
Atau
on (release){ getURL("FSCommand:quit",
"true");}
Jump Frame Tombol on (press) { gotoAndPlay(5);}
 FUNGSI OBJEC SCRIPT
N Play
Auto Frame 1 fscommand("fullscreen","true");
Fullscreen
Minimal Frame 1 setProperty("_root.minmax",_visible,"0");
Tombol on (release)
min {fscommand("allowscale","true");}
on (press)
{fscommand("allowscale","false");}
Maximal Frame 1 setProperty("_root.full",_visible,"0");
Tombol on (release)
Max {   fscommand("fullscreen","true");}
on (press)
{      fscommand("fullscreen","false");}
Load Movie Movie Buat MC blank diletakkan di pojok kiri atas,
Clip dg Instan Name “clips”
on (release)
Tombol {   loadMovie("tertuju.swf",0);}
Scroll Tombol on (press) {      teks.scroll -= 1;}
up on (press) {      teks.scroll += 1;}
Tombol InsNam: teks, Multiline, Dinamic text
down
Teks
Musik Frame1 mySound = new Sound();
Tombol on (release) {
            mySound.attachSound("musik1");
            mySound.stop();
            mySound.start(0,999);}
Musik klik kanan musik mp3, pilih linkage,
library centang [v] export for actionscript dan
export in first frame, identifier:musik1
Stop Tombol on (release) {   mySound.stop();}
Volume Tombol on (release) {   mySound.setVolume(N);}
N= 10 s/d 100
Mute Tombol on (release) {   mySound.setVolume(0);}
Volume
Jump Frame Tombol on (press) { gotoAndStop(5);}
and Stop
Forward Tombol On (press) {nextFrame();}
 FUNGSI OBJEC SCRIPT
Rewind Tombol On (press) {prevFrame();}
Pause Tombol On (release) {stop();}
Stop Movie Tombol On (release) {gotoAndStop(1);}
Play Movie Tombol On (release) {play();}
Volume dg Tombol On (press){ kiri = _root.lintasan._x;
Slide bar kanan =_root.lintasan._x+200;
atas = _root.lintasan._y;
bawah= _root.lintasan._y;
startDrag(this,true,kiri,atas,kanan,bawah);
}
Movie on (release){stopDrag();}
clip slider onClipEvent (mouseMove){
myPoint = new Object();
myPoint.x = this._x;
myPoint.y = this._y;
_root.lintasan.globalToLocal(myPoint);
_root.mySound.setVolume(myPoint.x);
Equalizer Movie onClipEvent(enterFrame)
Clip { _yscale=Math.random()*345+50;}
Ganti warna Tombol on(release){
            colorwarna= new
Color(_root.warna);
            colorwarna.setRGB(0xffff00);}
Animasi Frame 1 Buatlah objek Move_clip dg nama :
Mengikuti “circle_mc, Pada Frame 1 ketik script :
Mouse var speed:Number = 10;
circle_mc.onEnterFrame=function(){
    var xDist = _xmouse-this._x;
    var yDist = _ymouse-this._y;
    this._x+=xDist/speed;
    this._y+=yDist/speed;
}
Modife Movie onClipEvent(enterFrame){
Mouse Clip             Mouse.hide();
            startDrag(this,true);
}
Preloader Movie //Buat mc dengan nama “load”, buat teks
Clip dinamik dg variable :
FUNGSI OBJEC SCRIPT
// _root.teks , dan buat scrip di mc load :
onClipEvent (load) {
            _root.teks = 0;
            _root.load._xscale = 0;
}
onClipEvent (enterFrame) {
            _root.teks += 2;
            if (_root.teks>=100) {
                        _root.gotoAndStop(2);
            }
            _root.load._xscale += 2;
            if (_root.load._xscale>=100) {
                        _root.gotoAndStop(2);
            }
} // setelah itu di frame 2 buat tampilan
baru
 PRODUK MULTIMEDIA INTERAKTIF

Pembuatan multimedia yang interaktif tidak hanya dibuat begitu saja dengan menggabungkan
beberapa elemen multimedia. Pembuatan tidak dilakukan secara sembarangan. Berikut
beberapa hal yang harus diperhatikan ketika membuat multimedia interaktif agar menjadi
menarik.
a. Menentukan Proyek dan Tujuan dari Proyek

Dalam pembuatan multimedia, menentukan tujuan dari proyek mungkin terlihat sudah
sangat jelas tetapi di sini dimaksudkan lebih spesifik dan sejelas mungkin untuk
membantu pembuatan proyek.
b. Memahami Audien.
Tentukan rentang usia, pria atau wanita, kepentingan tertentu dan juga tingkat pendidikan.
Perhatikan juga apa audien mengalami cacat penglihatan pendengaran atau sebagainya.
Melalui multimedia tersebut audien akan pasif atau aktif dan juga mendidik atau hanya
menghibur.
c. Desain Informasi.
Desain informasi harus tertata rapi dalam suatu pengelompokan dan tidak lompat-lompat
dari informasi satu ke informasi lainnya. Tentukan juga isi dari desain informasi dan
jangan sampai menyeleweng jauh dari judul multimedia yang ditekankan. Desain
informasi sangat memepengaruhi bagaimana pengguna bisa memahami proyek yang
dibuat.
d. Desain Tampilan
Desain dari interface juga harus diperhatikan. Desain interfacenya harus jelas dan
terstruktur dan dapat dimengerti. Informasi yang disediakan terorganisasi dengan baik dan
jelas. Pertimbangkan juga seberapa susah proyek yang akan dibuat dan memakan waktu
seberapa lama. Hal-hal kecil seperti white space, aligment, margin, kontras, simetri dan
asimetris, dan hal-hal kecil lainnya perlu diperhatikan. Meskipun terlihat sepele tetapi
sangat mempengaruhi desain dari interface.

Berdasarkan storyboard dan rancangan antarmuka dalam kegiatan sebelumnya

sebelumnya, akan dibuat produk multimedia interaktif secara utuh. Aplikasi yang
digunakan dalam membuat multimedia interaktif dalam modul ini adalah Adobe Flash CS
3 dengan Action Script 3.0.