BAB-5 APLIKASI INTERAKTIF Aplikasi yang dikembangkan sekarang adalah aplikasi yang kebanyakan interaktif antara user dengan aplikasi. By: I Gusti Ngurah Suryantara, S.Kom., M.Kom 5.1. PENDAHULUAN Perkembangan grafika komputer sangat luas, dengan semakin pesatnya perkembangan komputer dari segi hardware dan software kebanyakan aplikasi yang sekarang yang dikembangkan adalah alplikasi yang interaktif. Software yang digunakan untuk mengembagkan aplikasi interaktif seperti ActionScript dengan Macromedia Flash, Lingo Language dengan Macromedia Director, dan Java Script. Aplikasi interaktif yang sederhana seperti penggunaan paint brush, yang dapat membuat objek dan memanipulasi objek tersebut. Manipulasi yang dapat dilakukan seperti cut, copy, delete, move dll. Gambar 5.1. Pint Brush Tugas: Buatlah sebuah aplikasi interaktif dengan menggunakan VB atau delphi. 66
5.2. ANIMASI Dalam multimedia, animasi merupakan penggunaan komputer untuk menciptakan gerak pada layar, dalam sebuah pembuatan Motion Graphic Designer digunakan beberapa animasi sebagai berikut : 1. Animasi Frame ( Frame Animation ) Animasi frame adalah bentuk yang paling sederhana. Diumpamakan memiliki sebuah buku yang mempunyai gambar berseri di tepi halaman berurutan. Bila jempol membuka buku dengan cepat, maka gambar kelihatan bergerak. Pada komputer multimedia, animasi buku tersebut menampilkan sebuah gambar yang berurutan secara cepat. Antara gambar satu (frame satu) dengan gambar yang lain (frame lain) berbeda. (a) http://img.tomshardware.com (b) http://img.tomshardware.com 67
(c) http://www.we-make-money-not-art.com 2. Animasi Sprite (Sprite Animation) Animasi sprite serupa dengan teknik animasi tradisional, yaitu objek yang diletakkan dan dianimasikan pada bagian puncak grafis dengan latar belakang diam. Sprite adalah setiap bagian dari animasi yang bergerak secara mandiri, misalnya burung terbang, planet berotasi, bola memantul-mantul atau logo berputar. Sprite beranimasi dan bergerak sebagai objek yang mandiri. Dalam animasi sprite, sebuah gambar tunggal atau berurutan dapat ditempelkan dalam sprite. Sprite dapat dianimasikan dalam satu tempat. http://www.gamedev.net/community/forums 68
http://www.goldenstudios.or.id http://www.colourclash.com 69
3. Animasi Lintasan Animasi lintasan adalah animasi dari objek yang bergerak sepanjang garis kurva yang kita tentukan sebagai suatu lintasan. Animasi SplineSpline adalah representasi matematis dari kurva. Bila objek bergerak, biasanya tidak mengikuti garis lurus, misalnya berbentuk kurva. Program animasi komputer memungkinkan kita untuk membuat animasi spline dengan lintasan gerakan berbentuk kurva. 70
http://www.kxcad.net 4. Computational Animation Computational animation merupakan animasi pergerakan objek dengan memvariasikan titik koordinat x dan y-nya, koordinat x merupakan posisi horizontal objek, yaitu berapa jauh kiri-kanan layar. Koordinat y merupakan posisi vertikal, yakni berapa jauh atasbawah layar. Catatan: Materi ini diambil dai situs: http://duniagridart.blogspot.com/2008/02/konsep-dasar-animasi.html 71
5.3. MORPHING Pengertian morphing adalah: Morphing adalah perubahan bentuk objek gambar secara bertahap (perlahan-lahan). Morphing merupakan salah satu teknik yang banyak digunakan dalam dunia entertainment karena efek dari morphing ini sangat menarik untuk diamati. Morphing memerlukan dua gambar, yaitu gambar awal dan gambar akhir. Morphing digunakan untuk membuat gambar yang berubah setiap satuan waktu dari gambar asal ke gambar hasil. Morphing secara sederhana dapat dilakukan dengan menggunakan interpolasi linier. Gambar 5.2. Contoh morphing perubahan wajah manusia menjadi wajah kucing Sumber gambar: http://www.novadevelopment.com 72
Contoh Morphing 1, Transformasi posisi: Morphing ini adalah morphing yang dilakukan secara geometrik atau perubahan bentuk (shape). Morphing ini adalah model morphing yang sangat rumit karena menggunakan transformasi posisi. Bentuk ini dapat digunakan untuk 2D dan 3D Gambar 5.3. Transformasi posisi Gambar 5.4. Contoh morphing 73
Contoh Morphing 2, Raster Trasnformasi: Morphing ini sebenarnya bentuk morphing yang mudah, karena dilakukan dengan mengubah warna setiap titik dan tidak melakukan transforamsi posisi. Morphing ini hanya bisa digunakan untuk grafik 2D. Gambar 5.5. Raster transformation Sumber gambar: www.cescg.org Gambar 5.6. Raster transformation Contoh gambar ini diambil dari situs http://www.cs.unc.edu 74
5.3.1. Interpolasi Linier Interpolasi linier adalah salah satu teknik untuk mendapatakan nilai antara dari dua nilai dengan memperhatikan perbandingan skala atau posisinya. Interpolasi ini menggunakan pendekatan garis lurus. P2(X2,Y2) P(X,Y) P1(X1,Y1) a b Gambar 5.7. Interpolasi linier Dimana: Rasio perubahan = interpolasi linier didefinisikan dengan: X = r.x1 + (1-r).X2 Y = r.y1 + (1-r).Y2 Implementasi interpolasi linier 2D: Point2D_t interpolasi(point2d_t a, point2d_t b, float r) { Titik2D_t c; c.x = r*a.x + (1.-r)*b.x; c.y = r*a.y + (1.-r)*b.y; return c; } Implementasi interpolasi linier 3D: Point3D_t interpolasi(point3d_t a, point3d_t b, float r) { Titik3D_t c; c.x = r*a.x + (1.-r)*b.x; c.y = r*a.y + (1.-r)*b.y; c.z = r*a.z + (1.-r)*b.z; return c; } 75
Gambar 5.7. Interpolasi linier 5.3.2. Morphing 2D Pengertian dan definisi morphing 2D dapat dijelaskan sebagai berikut: Morphing 2D adalah implementasi dari interpolasi yang dikenakan pada titik-titik 2D. Morphing yang dilakukan pada dua obyek gambar 2D adalah interpolasi dari setiap titik yang bersesuaian (berdasarkan urutan). Morphing 2D menggunakan transformasi posisi pada sistem koordinat 2D. Jumlah titik sama. Obyek1 Obyek2 Gambar 5.8. Morphing 2D 5.3.3. Morphing 3D Pengertian dan definisi morphing 3D dapat dijelaskan sebagai berikut: Morphing 3D adalah implemenasi dari interpolasi yang dikenakan pada titik-titik 3D. Morphing yang dilakukan pada dua objek gambar 3D adalah interpolasi dari setiap titik yang bersesuaian (berdasarkan urutan). Morphing tidak nenoengaruhi definisi face dan cara penggambarannya. Morphing 3D menggunakan transformasi posisi pada sistem koordinat 3D. Jumlah titik pada masing-masing objek sama. 5.3.4. Tugas Morphing Buatlah sebuah program yang mempu melakukan morphing terhadap suatu objek, dapat menggunakan morphing linier, 2D, atau 3D. Dalam membuat mophing ini menggunakan bahasa pemrograman, bahasa pemrograman yang digunakan dapat anda pilih VB, VB.Net. Jangan menggunakan software yang memang dikhususkan untuk membuat morphing. 76
5.4. GRAFIK USER INTERFACE Interface interaksi manusia dengan komputer untuk kebanyakan sistem menggunakan grafik supaya memudahkan penggunaan aplikasi. Interface digunakan dalam banyak aplikasi seperti dalam permainan game, pengolah kata, pengolah tabel, management system, presentation system, dll. 5.4.1. Dialog User Model user menjelaskan bagaimana sistem dirancang untuk menyelesaikan fungsinya dengan operasi grafik yang tersedia. Semua informasi dalam dialog user disajikan dalam aplikasi, dan dapat dimengerti oleh user yang berhubungan dengan sistem tersebut. Beberapa pertimbangan diperlukan untuk pembuatan dialog user, yaitu manipulasi langsung, window dan icon, akomodasi beberapa kemampuan, konsistensi, minimisasi memori, backup dan penanganan kesalahan serta feedback. 5.4.1.1. Manipulasi Langsung Manipulasi langsung merupakan bentuk user interface yang baik dan mudah dipelajari oleh user. Interface dapat menggunakan kombinasi atara direct-manipulasi dan command language. 5.4.1.2. Window dan Icon Fungsi yang biasanya terdapat dalam sistem window diantaranya membuka dan menutup window, memindahkan window, mengubah ukuran window, dll. Bentuk icon yang disajikan menggambarkan simbol yang mudah dimegerti oleh user. Pembuatan desain icon mempunyai tiga macam tujuan: 1. Mudah dikenali, bagaimana icon dapat dikenali dengan mudah dan mempunyai arti yang jelas. 2. Mudah diingat, bagaima arti sebuah icon mudah diingat oelh user. 3. Mudah dibedakan, bagimana suatu icon dapat dibedakan dengan yang lainnya. 5.4.1.3. Akomodasi Beberapa Kampuan User Cara ini mengakomodasi kebiasaan atau kemampuan user yang berbeda-beda, sehingga user merasakan kemudahan dalam menggunakan sistem. Keberhasilan suatu sistem bukan hanya ditentukan oleh masalah teknis, tetapi masalah psikologis sangat berpengarauh. Bagi user yang belum berpengalaman, interface dengan sedikit operasi dan perintah alan lebih bermanfaat daipada pengguna yang lebih luas. Bagi user yang sudah berpengalaman biasanya menginginkan kecepatan dalam menggunakan aplikasi. 5.4.1.4. Konsistensi Pertimbangan penting untuk desain user interface adalah konsistensi. Contohnya, bentuk icon harus mempunyai suatu arti dalam penggunaan, karena bila digunakan pada berbagai macam fungsi akan membingungkan bagi user. Seperti gambar gunting untuk memotong suatu objek, jangan digunakan untuk menyimpan file. Cara untuk mendapatkan konsistensi dapat dilakukan dengan cara: 77
Penggunaan warna harus sama, sehingga tidak menimbulkan penapsiran yang berbeda. Pesan dari sistem ditampilkan pada lokasi tertentu secara logika. Posisi menu sebaiknya diletakkan pada lokasi yang sama, sehingga user tidak selalu mencaricari untuk menemukannya. Penggunaan fungsi key harus sama untuk action yang sama. Contoh penggunaan konsistensi dari penggunaan input. Karakter dari keyboarr, seperti return, tab, backspace selalu mempunyai fungsi sama dan dapat digunakan setiap saat. Global command, seperti Help, Satus, dan Cancel dapat digunakan setiap saat. Generic command, seperti Move, Copy, dan Delete dilengkapi pada setiap pemakian untuk setipa objek dari sistem. 5.4.1.5. Minimisasi Memori Sistem window dengan icon membantu untuk mengurangi penggunaan memori. Bermacam-macam informasi dapat ditampilkan pada beberapa window bergantian dengan berpindah dari window satu kewindow yang lain bila diperlukan. 5.4.1.6. Backup dan Penanganan Kesalahan Tujuan backup dan penanganan kesalahan adalah untuk menghindari kesalahan yang dilakukan oleh user. Backup dapat dibuat dalam berbagai bentuk seperti perintah undo. 5.4.1.7. Feedack Feedback dimaksudkan memberikan respon interaksi user dengan aplikasi. feedback yang diberikan oleh aplikasi bermacam-macam dapat berupa perubahan warna, perubahan bentuk. Yang menandakan sistem sedang perespon interaksi user dengan aplikasi. 5.4.2. Desain Visual Desain visual mencakup elemen grafik yang digunakan pada inerface, termasuk layout secara keseluruhan, menu, desain form, penggunaan warna, coding, dan penempatan tiap unit dari informasi. Desain visual yang baik memberikan pengaruh yang kuat pada kejelasan, konsistensi, dan estetis. 5.4.2.1. Kejelasan Visual Arti dari tampilan visual harus jelas. Penyajian visual tidak boleh memberikan pengertian ambigus. Gambar 5.9. Perhatikan gambar ini, Tempat bunga atau 2 muka saling berhadapan 78
5.4.2.2. Konsistensi Visual Konsistensi bentuk visual memudahkan user dalam menggunakan perintah. Contohnya radio button digunakan untuk menentukan satu macam pilihan. 5.4.2.3. Estetis Dalam mendesain user interface juga diperhatikan nilai-nilai estetis, sehingga memberikan kesan yang baik. 5.4.3. Methodologi Desain Proses pembuatan user interface meliputi beberapa tahap: 1. Menentukan tujuan. 2. Memahami karakteristik user. 3. Mempelajari user interface yang lama. 4. Pembuatan desain konseptual. 5. Pembuatan desain fungsional. 6. Pembuatan desain dialog. 7. Pembuatan prototipe. 79