Modul Pegangan Project Dmi [PDF]

Citation preview

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 Quit or Close



OBJEC Tombol



Jump Frame



Tombol



SCRIPT on (release) {   fscommand("quit","true");      } Atau on (release){ getURL("FSCommand:quit", "true");} on (press) { gotoAndPlay(5);}



FUNGSI N Play Auto Fullscreen Minimal



OBJEC Frame 1



fscommand("fullscreen","true");



Frame 1 Tombol min



setProperty("_root.minmax",_visible,"0"); on (release) {fscommand("allowscale","true");} on (press) {fscommand("allowscale","false");} setProperty("_root.full",_visible,"0"); on (release) {   fscommand("fullscreen","true");} on (press) {      fscommand("fullscreen","false");} Buat MC blank diletakkan di pojok kiri atas, dg Instan Name “clips” on (release) {   loadMovie("tertuju.swf",0);} on (press) {      teks.scroll -= 1;} on (press) {      teks.scroll += 1;} InsNam: teks, Multiline, Dinamic text



Maximal



Frame 1 Tombol Max



Load Movie



Movie Clip



Scroll



Musik



SCRIPT



Tombol Tombol up Tombol down Teks Frame1 Tombol



Stop Volume



Tombol Tombol



Mute Volume Jump Frame and Stop Forward



Tombol



mySound = new Sound(); on (release) {             mySound.attachSound("musik1");             mySound.stop();             mySound.start(0,999);} klik kanan musik mp3, pilih linkage, centang [v] export for actionscript dan export in first frame, identifier:musik1 on (release) {   mySound.stop();} on (release) {   mySound.setVolume(N);} N= 10 s/d 100 on (release) {   mySound.setVolume(0);}



Tombol



on (press) { gotoAndStop(5);}



Tombol



On (press) {nextFrame();}



Musik library



FUNGSI Rewind Pause Stop Movie Play Movie Volume dg Slide bar



OBJEC Tombol Tombol Tombol Tombol Tombol



Movie clip slider



Equalizer Ganti warna



Movie Clip Tombol



Animasi Mengikuti Mouse



Frame 1



Modife Mouse



Movie Clip



Preloader



Movie Clip



SCRIPT On (press) {prevFrame();} On (release) {stop();} On (release) {gotoAndStop(1);} On (release) {play();} On (press){ kiri = _root.lintasan._x; kanan =_root.lintasan._x+200; atas = _root.lintasan._y; bawah= _root.lintasan._y; startDrag(this,true,kiri,atas,kanan,bawah); } on (release){stopDrag();} onClipEvent (mouseMove){ myPoint = new Object(); myPoint.x = this._x; myPoint.y = this._y; _root.lintasan.globalToLocal(myPoint); _root.mySound.setVolume(myPoint.x); onClipEvent(enterFrame) { _yscale=Math.random()*345+50;} on(release){             colorwarna= new Color(_root.warna);             colorwarna.setRGB(0xffff00);} Buatlah objek Move_clip dg nama : “circle_mc, Pada Frame 1 ketik script : 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; } onClipEvent(enterFrame){             Mouse.hide();             startDrag(this,true); } //Buat mc dengan nama “load”, buat teks 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



b.



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. Memahami Audien.



c.



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. Desain Informasi.



d.



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. 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.