Perancangan Aplikasi Katalog Digital Mobil Esemka Rajawali Dua Berbasis Multimedia ( Studi Kasus : PT. Solo Manufaktur Kreasi, SMK Negeri 2 Surakarta )
Artikel Ilmiah
Penyusun : Riyant Setiawan / 672007054 Suprihadi, S.Si., M.Kom. Michael Bezaleel Wenas, S.Kom., M.Cs.
Program Studi Teknik Informatika Fakultas Teknologi Informasi Universitas Kristen Satya Wacana Salatiga Mei 2013
1
2
3
4
5
Perancangan Aplikasi Katalog Digital Mobil Esemka Rajawali Dua Berbasis Multimedia ( Studi Kasus : PT. Solo Manufaktur Kreasi, SMK Negeri 2 Surakarta ) 1)
Riyant Setiawan, 2) Suprihadi, 3) Michael Bezaleel Fakutas Teknologi Informasi Universitas Kristen Satya Wacana Jl. Diponegoro 52-60, Salatiga 50711, Indonesia Email : 1)
[email protected], 2)
[email protected], 3)
[email protected] Abstrak Beberapa industri mobil di dunia semakin mendorong industri mobil nasional untuk semakin berkembang. Salah satunya adalah Esemka. Esemka membutuhkan suatu terobosan baru untuk bisa memperkenalkan produk sekaligus juga membangun media yang dapat digunakan dalam pengembangan dan pembelajaran. Spesifikasi mobil pada media cetak yang biasa dikeluarkan oleh industri otomotif masih belum bisa memenuhi kebutuhan informasi konsumen serta juga memenuhi kebutuhan industri sendiri, dikarenakan dokumen yang dibutuhkan bermacam-macam dan harus dicetak, hal ini memakan biaya cukup besar. Aplikasi katalog digital berbasis multimedia ini merupakan suatu solusi sekaligus suatu terobosan baru yang dapat digunakan oleh pihak Esemka dalam melakukan pengembangan, pembelajaran, dan juga dalam melakukan pengenalan produk secara efektif dan efisien. Aplikasi ini memiliki packaging yang lebih menarik serta dapat membantu user memperoleh informasi yang jelas serta mendapat gambaran produk yang jelas secara 3D tanpa harus melihat wujud asli mobil. Kata Kunci : Multimedia, 3D, Katalog Digital. Abstract Some auto mobile industries in the world have been pushing to its limit of the development of national auto mobile industries. One of the national auto mobile industries is Esemka. Esemka needs an inovation to introduce their product all at once make a media that can be used in developing and learning. The cars spesification on print media that ussualy issued by automotive industry still can not fill the information which is needed by the consumers and the needs of the industry itself, because it required numbers of variety printed documents and takes a lot of money. Digital Catalogue applications based on multimedia is a solution as well as an inovation that can be used by Esemka in developing, learning, and also introducting or promoting their products more effectively. This aplication has more attractive interface and also can helps users to get an information and product description more clearly in 3D without seeing the original form of the car. Keywords: Multimedia, 3D, Digital Catalogue.
1)
Mahasiswa Fakultas Teknologi Universitas Kristen Satya Wacana
2)
Staff Pengajar Fakultas Teknologi Informasi Universitas Kristen Satya Wacana
3)
Staff Pengajar Fakultas Teknologi Informasi Universitas Kristen Satya Wacana
6
1. Pendahuluan Esemka yang pusatnya bertempat di SMK Negeri 2 Kota Surakarta dan di PT. Solo Manufaktur Kreasi ini merupakan suatu gabungan kerja antara lembaga Departemen Pendidikan yang salah satu jurusannya bergerak dibidang otomotif dengan perusahaan yang menjadi agen tunggal dan pemegang merk Esemka ini. Esemka adalah industri otomotif merk lokal yang di produksi dan dikembangkan dari gabungan 12 SMK jurusan Otomotif yang kemudian berpusat di SMK Negeri 2 Surakarta yang memiliki tugas menciptakan produk mobil beraroma Indonesia. Pengembangan prototype Esemka khususnya produk Esemka Rajawali ini tidak berhenti begitu saja. Evaluasi dan Pengembangan Esemka Rajawali generasi kedua ini dilakukan dengan menilai kekurangan dari generasi pertama sehingga untuk prototype generasi kedua dapat diproduksi Esemka Rajawali yang lebih sempurna. Namun, proses evaluasi, pengenalan dan pengembangan ini masih cenderung repot dan memakan lebih banyak waktu karena data – data serta dokumen – dokumen Esemka Rajawali generasi kedua masih berupa kertas, foto, dan soft file lainnya. Multimedia dapat diartikan sebagai pemanfaatan komputer untuk membuat dan menggabungkan teks, grafik, audio, animasi dengan menggabungkan link dan tool yang memungkinkan pemakai melakukan navigasi dan berinteraksi dengan aplikasi tersebut. Fungsi multimedia salah satunya adalah sebagai media dokumentasi informasi atau media penyimpanan informasi yaitu sebagai alat promosi untuk mengenalkan produk ke pasar atau dapat juga memasarkan, namun juga dapat digunakan sebagai media pembelajaran bagi penggunanya. Multimedia termasuk media yang mudah dimengerti oleh setiap kalangan dibanding media brosur, buku, atau file-file yang terpisah-pisah, karena multimedia dapat menggabungkan atau mengkombinasi dari teks, suara, gambar, animasi, dan video. [1] Berdasarkan pemaparan diatas, diperlukan suatu solusi pada permasalahan yang terjadi dengan cara mengembangkan sekaligus mempublikasikan instansi tersebut melalui media perancangan aplikasi katalog digital berbasis multimedia yang interaktif, menarik, inovatif, mudah digunakan, tepat sasaran dan belum pernah dimiliki oleh pihak Esemka sebelumnya. Oleh karena itu, penelitian ini akan diarahkan dengan mengambil judul “Perancangan Aplikasi Katalog Digital Mobil Esemka Rajawali Dua Berbasis Multimedia” ( Studi Kasus : PT. Solo Manufaktur Kreasi, SMK Negeri 2 Surakarta ). Diharapkan aplikasi ini dapat membantu dalam evaluasi, pengembangan serta publikasi dan mengenalkan teknologi media informasi yang baru yang belum pernah dimiliki pihak Esemka sebelumnya. 2. Tinjauan Pusaka Penelitian terdahulu yang pertama adalah “ Perancangan Intergrated Marketing Communication Mobil Nasional Esemka Digdaya (Studi kasus : Esemka) “. Tujuan dari penelitiannya adalah menghasilkan media promosi yang bermanfaat untuk membantu didalam promosi penjualan maupun program perencanaan media bagi mobil Esemka untuk dapat menjangkau target audience nya. [2]
7
Penelitian terdahulu yang kedua adalah “ Perancangan Aplikasi Multimedia Interaktif Company Profile Generic ( Studi kasus CV. Generic ) “. Tujuan dari penelitiannya adalah menghasilkan company profil CV. Generic berbasis multimedia interaktif yang menarik, mudah digunakan dan tepat sasaran. [3] Yang membedakan penelitian yang akan dilakukan dengan penelitian sebelumnya yang pertama adalah implementasinya atau dapat disebut dengan penerapannya beserta isi materi yang disampaikan. Pada penelitian ini berisi aplikasi virtualisasi mobil Esemka Rajawali Dua yang belum launching di pasar, sedangkan penelitian sebelumnya adalah membantu mobil Esemka Digdaya untuk dikenal masyarakat dalam rupa Intergrated Marketing Communication. Dan tentunya pada penelitian ini disajikan aplikasi yang lebih interaktif karena pengguna dapat melakukan interaksi dengan desktop dan informasi yang disampaikan menggambarkan kondisi sebenarnya. Kemudian kontribusi yang diberikan pada penelitian terdahulu yang kedua adalah berupa metode penelitian yang digunakan digunakan kembali pada penelitian ini karena memiliki kesamaan yaitu merancang aplikasi berbasis multimedia. Tetapi yang membedakan dengan penelitian “Perancangan Aplikasi Multimedia Interaktif Company Profile Generic ( Studi kasus CV. Generic )” adalah penggambaran mobil dijelaskan dengan animasi 3D. Hal inilah yang nanti akan lebih memperjelas konsumen untuk dapat menggambarkan mobil Esemka Rajawali Dua beserta spesifikasinya. Multimedia Secara etimologis, multimedia berasal dari kata multi (Bahasa Latin, nouns) yang berarti banyak, bermacam-macam, dan medium (Bahasa Latin) yang berarti sesuatu yang dipakai untuk menyampaikan atau membawa sesuatu. Kata medium dalam American Heritage Electronic Dictionary (1991) juga diartikan sebagai alat untuk mendistribusikan dan mempresentasikan informasi. Multimedia adalah pemanfaatan komputer untuk membuat dan menggabungkan teks, grafik, audio, video dan animasi dengan menggabungkan link dan tool yang memungkinkan pemakai atau user dapat melakukan navigasi, interaksi atau komunikasi. [4] 3 Dimensi Pengertian 3D adalah bentuk dari benda yang memiliki panjang, lebar, dan tinggi, atau dimensi yang memiliki ruang. Grafik 3D merupakan teknik penggambaran yang berpatokan pada titik koordinat sumbu x (datar), sumbu y (tegak), dan sumbu z (miring). Representasi dari data geometrik 3 dimensi sebagai hasil dari pemrosesan dan pemberian efek cahaya terhadap grafika komputer 2 dimensi. Objek 3D dapat digerakkan ke samping kanan dan kiri serta ke depan dan ke belakang berdasarkan sumbu (Z). Tiap objek dalam 3D umumnya memiliki sub-objek/elemen-elemen yang membentuk dirinya. Elemen-elemen tersebut adalah vertex, edge, face. Vertex adalah sebuah titik yang terletak pada koordinat X, Y, Z. 2 Vertex yang dihubungkan akan membentuk sebuah edge. Vertex dalam bentuk jamak biasa disebut dengan vertices. Istilah ini lebih berkaitan dengan pembedaan bentuk jamak dan tunggal dalam bahasa Inggris. Bidang permukaan yang terbentuk dari 3 vertex dan edge (memiliki 3 sisi) atau
8
lebih disebut face. Face pada obyek 3D disebut juga dengan Polygon. Kumpulan dari vertex, edge, dan face disebut mesh.[5] Katalog Digital Katalog digital adalah merupakan sebuah dokumen digital yang dibuat untuk memudahkan pengguna untuk mempelajari sebuah produk atau layanan secara interaktif. Katalog digital biasanya berbasis multimedia, sehingga dalam penyampaian informasi menjadi lebih menarik. Katalog digital dapat di implementasikan secara offline ataupun online.[6] Manfaat dari katalog digital, antara lain : 1. Kemudahan dalam distribusi. File aplikasi dapat tersebar atau didistribusi dalam bentuk CD/DVD, atau dapat disebar melalui media internet. 2. Informasi lebih akurat dan lengkap. Informasi lebih lengkap dan leluasa dalam menampilkan informasi dari produk dan layanan. Berbeda dengan brosur konvensional yang memiliki keterbatasan penyampaian informasi, karena keterbatasan penggunaan media kertas. 3. Informasi yang disampaikan menjadi lebih hidup (interaktif). Informasi tidak terikat pada teks atau gambar saja, tetapi juga dapat dilengkapi dengan fitur suara atau video atau animasi. Dengan memanfaatkan teknologi 3D, katalog digital menjadi lebih hidup. 4. Menghemat biaya produksi. Media ini menjadi lebih hemat daripada media konvensional, karena dapat menghemat biaya produksi dalam promosi, menghemat biaya dalam penggunaan kertas, tinta, jasa cetak, dan jasa distribusi katalog produk. 3. Metode Dan Perancangan Sistem Ruang Lingkup dan Obyek Penelitian Penelitian dilakukan di Esemka yang terletak di PT. Solo Manufaktur Kreasi dan SMK Negeri 2 Surakarta. Dengan obyek penelitian adalah mobil Esemka Rajawali Dua. Pengumpulan Data Pada tahap pengumpulan data dilakukan dengan mengambil data primer dan data sekunder yang mendukung dalam perancangan aplikasi katalog digital ini. Data primer merupakan sumber data yang diperoleh langsung dari sumber asli (tidak melalui media perantara). Data primer yang diperoleh dari pihak Esemka diperoleh melalui dua metode yaitu metode wawancara dan metode observasi.[7] Dengan metode wawancara dengan sumber informan Bapak Dwi Budhi Martono selaku humas Esemka diperoleh : 1. Kebutuhan pihak Esemka untuk membuat media informasi yang efektif dalam pengembangan dan pengenalan Esemka Rajawali Dua. 2. Permintaan pembuatan design prototype mobil Esemka Rajawali Dua dalam 3D.
9
3. Pembuatan media yang menampung dan memvisualisasikan seluruh informasi spesifikasi yang digunakan dalam mobil Esemka Rajawali Dua, disertai, animasi 3D mobil Esemka Rajawali Dua. Dengan metode observasi diperoleh : 1. Foto-foto mobil Esemka Rajawali Dua. 2. Konsep perancangan tampilan antarmuka katalog digital. 3. Konsep rancangan muka mobil Esemka Rajawali Dua dalam 3D. Data sekunder merupakan sumber data penelitian yang diperoleh peneliti secara tidak langsung melalui media perantara. Data sekunder umumnya berupa bukti, catatan atau laporan historis yang tersusun dalam arsip (data dokumenter) yang dipublikasikan dan yang tidak dipublikasikan. Data sekunder yang diperoleh dari pihak Esemka, antara lain : 1. File excel berisi spesifikasi Esemka Rajawali Dua. 2. File .ppt presentasi mobil Esemka Rajawali Dua. 3. Foto – Foto dokumentasi mobil Esemka Rajawali Dua. 4. File gambar pendukung spesifikasi mobil Esemka Rajawali Dua. 5. Artikel-artikel online yang membahas mobil Esemka, diakses untuk mengetahui minat daya tarik masyarakat pada mobil Esemka. Pengembangan Sistem Metode pengembangan sistem yang digunakan adalah metodologi pengembangan multimedia.[8] Berikut skema metodologi yang digunakan dalam perancangan aplikasi katalog didgital mobil Esemka Rajawali Dua :
Gambar 1 Metodologi Pengembangan Multimedia
Tahapan yang dilakukan adalah concept, design, material collecting, assembly, testing, dan distribution. Concept Tahap pertama pengembangan multimedia yaitu concept yang berisi kegiatan menentukan tujuan, termasuk identifikasi audiens, macam aplikasi (presentasi, interaktif, dan lain-lain), tujuan aplikasi (informasi, hiburan, pelatihan dan lain-lain) dan spesifikasi umum. Dasar aturan untuk perancangan juga ditentukan pada tahap ini, seperti ukuran aplikasi, target, dan lain-lain. Judul : PERANCANGAN APLIKASI KATALOG DIGITAL MOBIL ESEMKA RAJAWALI DUA BERBASIS MULTIMEDIA Tujuan dari Aplikasi : Memberikan Informasi tentang Spesifikasi Mobil Esemka Rajawali Dua. Pengguna : Pihak Esemka Audio : Music .mp3 sebagai backsound aplikasi
10
Animasi
Interface Aplikasi
: Mobil Esemka Rajawali Dua (semi-prototype) dalam 3D dan Isi Menu Spesifikasi Mobil Esemka Rajawali Dua. : Flash
Spesifikasi hardware dan software yang mendukung dalam perancangan sistem. Hardware yang digunakan untuk membuat aplikasi ini adalah HP G42361TX dengan spesifikasi Intel® Core™ i5 CPU M 460 @2,53GHz 2,53 GHz, RAM 2 GB, Harddisk 500 GB serial ATA 5400 rpm, VGA ATI Mobility Radeon HD5470 1GB, DVD Writer, Bamboo Pen Tablet, Mouse, Speaker. Software yang digunakan untuk membuat aplikasi ini adalah Windows 7 Ultimate, Cinema 4D Studio Release 11.3, Adobe Flash Cs5, Adobe Photoshop Cs5, Corel Draw X6, dan Ableton Live8. Spesifikasi minimum hardware dan software yang digunakan dalam menjalankan aplikasi. Hardware yang digunakan Intel Pentium IV 1 GHz, Hardisk dengan free space minimal 1Gb, RAM 512mb, VGA Onboard atau eksternal 256 Mb, USB slot atau DVD room , Mouse sebagai alat bantu input, Monitor sebagai alat bantu output aplikasi yang berupa gambar, teks, dan animasi, Speaker sebagai alat bantu output berupa suara. Software yang digunakan Windows XP, dan Flash Player. Design Perancangan yang dibuat menggunakan metode Struktur Navigasi. Design struktur navigasi multimedia yaitu desain perencanaan yang berisi urutan jalannya aplikasi multimedia.
Gambar 2 Struktur Navigasi Aplikasi Virtual Reality Mobil Esemka Rajawali Dua
Gambar berikut menjelaskan struktur navigasi ketika user menjalankan aplikasi ini. Tiap scene pada gambar memiliki tampilan halaman yang berbeda. Ketika menjalankan aplikasi, tampilan aplikasi akan berhenti pada scene 2 sebagai halaman utama. Di dalam scene 2 terdapat menu yang menavigasikan user menuju ke scene 3, 4, 5, 6, 7, 8, 9, 10, 11, dan 12. Dan ketika user sudah memasuki halaman pada scene yang dipilih, contoh scene 4, pada scene 4 terdapat menu yang menavigasikan user untuk kembali ke halaman utama (scene 2). Menu untuk kembali ke halaman utama ini terdapat pada scene 3, 4, 5, 6, 7, 8, 9, 10, 11, dan 12. Dan untuk mengakhiri aplikasi user akan akses pada scene 13.
11
Flowchart adalah bagan yang mempunyai arus yang menggambarkan langkah penyelesaian suatu masalah. Flowchart merupakan cara penyajian dari suatu algoritma. [9] Flowchart program adalah bagan yang memperlihatkan urutan dan hubungan proses dalam suatu program.[10]
Gambar 3 Flowchart Program Katalog Digital
Rancangan antarmuka halaman adalah proses perancangan interface aplikasi yang akan di tampilkan pada desktop. Berikut rancangan antarmuka halaman yang terdapat pada aplikasi ini.
Gambar 4 Rancangan Interface Halaman Utama
Halaman ini adalah halaman utama atau home aplikasi, terdiri dari : 1. Tombol sound. Pada tampilan home otomatis backsound langsung dimainkan. 2. Logo Esemka. 3. Spesifikasi dasar mobil Esemka Rajawali Dua. 4. Animasi 3D mobil Esemka Rajawali Dua. Yang akan berputar sesuai menu navigasi yang dipilih. 5. Tombol menu motor penggerak. Memuat spesifikasi motor penggerak. 6. Tombol menu sistem pengereman. Memuat spesifikasi sistem pengereman.
12
7. Tombol menu sistem suspensi. Memuat spesifikasi sistem suspensi. 8. Tombol menu roda. Memuat spesifikasi roda. 9. Tombol menu berat kendaraan. Memuat berat kendaraan Esemka Rajawali Dua. 10. Tombol menu dimensi kendaraan. Memuat dimensi kendaran Esemka Rajawali Dua. 11. Tombol menu kemudi dan interior. Memuat spesifikasi kemudi interior. 12. Tombol menu sistem pembakaran. Memuat spesifikasi sistem pembakaran. 13. Tombol menu transmisi. Memuat spesifikasi transmisi. 14. Tombol menu lain-lain. Memuat spesifikasi yang lain. 15. Tombol exit.
Gambar 5 Rancangan Interface Spesifikasi Motor Penggerak
Halaman ini adalah halaman motor penggerak, terdiri dari : 1. Tombol sound. 2. Logo Esemka. 3. Icon dan Judul spesifikasi 4. Animasi gambar motor penggerak. 5. Spesifikasi motor penggerak. 6. Tombol home, yaitu untuk kembali ke halaman utama atau home. Material Collecting Material Collecting adalah tahap pengumpulan bahan yang akan digunakan untuk perancangan sistem sesuai dengan konsep dan rancangan yang sudah dilakukan. Bahan yang dikumpulkan adalah image atau gambar, foto digital, logo Esemka, data spesifikasi mobil Esemka Rajawali dua, pembuatan blueprint untuk modelling 3D mobil Esemka Rajawali Dua, modelling 3D untuk mobil dan icon menu navigasi, pembuatan grafis dan animasi. Pada prakteknya, tahap ini bisa dilakukan secara paralel dengan tahap assembly. Sebagian materi berupa foto dan data spesifikasi mobil diambil dari dokumen perusahaan yang sudah ada. Sedangkan untuk logo, blueprint mobil, grafis, modelling 3d, dan animasi dibuat menggunakan pengolah gambar 2D, pengolah gambar 3D dan pengolah suara. Assembly Assembly adalah tahapan perakitan objek yang telah dibuat pada tahapan material collecting dengan melakukan penggabungan teks, gambar, suara, dan animasi menjadi suatu kesatuan aplikasi. Tahap perakitan dilakukan dengan melakukan pemrograman terhadap susunan objek berdasarkan tahapan design yang sudah dibuat.
13
7.
Testing Testing dilakukan setelah tahap assembly selesai dijalankan, tahap ini disebut juga dengan tahap pengujian. Cara yang digunakan adalah pengujian black box ( dilakukan oleh pemakai pada lingkungan pengembang) antara lain memeriksa struktur dan desain internal, memeriksa fungsi antarmuka pengguna (user interface), memeriksa sasaran desain, memeriksa definisi kebutuhan user, eksekusi program. Dilakukan pengujian dalam lingkungan pengembang kemudian akan dilakukan pengujian kepada responden Esemka. Pengujian responden ini dilakukan dengan pengujian aplikasi kepada responden Esemka di sertai dengan lembar kuisioner yang kemudian diolah dengan skala Likert. Pengujian ini dilakukan sebagai tolak ukur apakah aplikasi katalog digital ini sudah memenuhi tujuan penelitian ini. Distribution Tahapan yang berupa tahapan penyimpanan aplikasi ke dalam media seperti CD untuk kemudian dapat dilakukan distribusi aplikasi yang sudah layak dikonsumsi oleh user. Implementasi Setelah perancangan sistem selesai dibuat dan sudah layak digunakan, maka aplikasi siap di implementasikan atau dioperasikan sebagaimana mestinya. Jadi gambaran implementasi aplikasi ini yaitu aplikasi ini akan digunakan pihak Esemka untuk mempresentasikan spesifikasi dan model mobil Esemka, digunakan sebagai media dalam tahap pengembangan, dan digunakan dalam memperkenalkan mobil Rajawali Dua dalam pameran berikut juga memperkenalkan kepada pasar. Hasil dan Pembahasan Setelah proses perancangan sistem diselesaikan, selanjutnya akan dibahas implementasi program sesuai dengan perancangan sistem. Akan dibahas hasil implementasi sistem yang berisi hasil jadi aplikasi katalog digital Esemka rajawali dua. Aplikasi ini di produksi dengan ukuran 1366 x 768 pixel. Sehingga pada tahap produksi modelling dan rendering, design interface dan assembly pada flash memiliki standart ukuran yang sama. Sebelum memasuki tahap produksi design interface, dibutuhkan komponen – komponen pendukung yang akan mengisi design interface sesuai perancangan design. Antara lain berupa hasil rendering 3D mobil, icon-icon menu navigasi dan materi pendukung lainnya.
14
Gambar 6 Blueprint Esemka Rajawali Dua
Blueprint Esemka Rajawali dirancang dengan menggunakan penggolah gambar 2D, dieksport dalam format .jpeg, kemudian gambar blueprint akan diimport dalam pengolah gambar 3D untuk modelling 3D mobil Esemka Rajawali Dua.
Gambar 7 3D Modelling Esemka Rajawali Dua
Proses awal tahap 3D modelling mobil Esemka Rajawali Dua. Hasil blueprint dimasukan kedalam textur object plane pada pengolah gambar 3D sebagai pola acuan 3D modelling.
Gambar 8 Pembuatan Animasi 3D Mobil Esemka Rajawali Dua
Tahap ini merupakan tahap pembuatan animasi 3D mobil Esemka Rajawali Dua. Animasi mobil berupa rotasi 360 derajat pada mobil dan animasi lainnya. Hasil rendering akan menghasilkan beberapa gambar hasil render yang kemudian akan digunakan sebagai materi katalog digital.
13
Gambar 9 Contoh Hasil 3D Rendering
Berikut adalah salah satu contoh hasil 3D rendering menggunakan pengolah 3D yang sudah terdapat unsur Global Illumination pada efek rendering dan terdapat unsur interior lighting buatan yang membuat tampilan mobil Esemka menjadi lebih nyata. Hasil rendering dengan ukuran 1366 x 768 pixel dan memiliki perbandingan 1 : 176 dengan ukuran sebenarnya.
Gambar 10 Pembuatan Design Interface
Tahap ini merupakan tahap pembuatan design interface menggunakan pengolah gambar. Proses yang dilakukan adalah layouting tampilan antarmuka aplikasi dan material collecting data spesifikasi mobil . Sample rendering mobil dan icon diimport dan dilayout sehingga gambaran tampilan antarmuka aplikasi dapat dilihat berikut juga tampilan desain penyampaian materi spesifikasi mobil Esemka. Ukuran yang digunakan sama dengan size 3D rendering yaitu 1366 x 768 pixel.
Gambar 11 Assembly Aplikasi Virtual Reality
Tahap ini adalah tahapan proses assembly atau perakitan aplikasi katalog digital mobil Esemka Rajawali Dua dengan menggunakan pengolah animasi. Semua material berupa gambar 3D, design antarmuka, icon, dan audio dimasukan kedalam library pengolah animasi, dilanjutkan dengan menyusun gambar sesuai design tampilan antarmuka. Beberapa gambar dikelompokan ke dalam movieclip.
14
Pada setiap movieclip terdapat kode pemrograman yang akan menghubungkan halaman satu dengan halaman lainnya, dan memiliki fungsi tertentu. Katalog digital mobil Esemka dibangun dengan membuat animasi 3D dengan memasukan gambar-gambar hasil render ke dalam frame menggunakan aplikasi pengolah flash. Dan kemudian diinisialisasi sesuai tiap menunya. Sehingga tiap tombol navigasi memiliki animasi 3D yang berbeda-beda. Saat aplikasi dijalankan pertama kali akan muncul halaman intro, yang berfungsi sebagai halaman pengantar atau pembuka aplikasi.
Gambar 12 Intro Aplikasi Virtual Reality Esemka Rajawali Dua
Setelah proses intro selesai, dilanjutkan menuju halaman utama aplikasi ini. Halaman utama ini dipanggil dengan menggunakan script pada halaman intro Kode Program 1 Intro 1
fscommand("fullscreen", true);
Kode program pada intro digunakan untuk menampilkan secara fullscreen aplikasi ini. Script diletakan pada awal frame pada timeline intro pada flash. Kode Program 2Intro Lanjutan 1
_root.loadMovie("esemka.swf");
Kode program pada intro lanjutan digunakan untuk memanggil halaman utama bernama esemka.swf. Script diletakan pada frame akhir timeline intro pada flash.
Gambar 13Tampilan halaman menu utama
Gambar diatas adalah halaman yang akan muncul setelah intro selesai di jalankan. Dinamakan halaman utama atau home yang di namakan “ esemka.swf ”. Halaman ini berisi 3D modelling mobil Esemka (bagian tengah) yang akan beranimasi ketika user menekan tombol navigasi bagian bawah halaman utama. Setiap tombol navigasi akan membuat gerakan animasi pada 3D modelling, kemudian akan muncul halaman yang berisi materi spesifikasi. Komponen yang terdapat pada halaman utama antara lain : 15
1. Controler Sound : icon speaker. Berfungsi untuk me-aktifkan atau menonaktifkan backsound aplikasi. 2. Movieclip miniatur mobil Esemka Rajawali Dua. Berfungsi dalam menjelaskan posisi spesifikasi yang ingin dimengerti oleh pengguna dalam animasi 3D. 3. Movieclip profil Esemka. Berfungsi menjelaskan profil sederhana mobil Esemka Rajawali Dua. 4. Tombol-tombol navigasi yang memiliki kode program sesuai fungsi masing. Tombol tersebut antara lain : mesin penggerak, sistem pengereman, sistem suspensi, roda, berat kendaraan, dimensi kendaraan, sistem kemudi dan interior, sistem pembakaran, transmisi, lain-lain, dan tombol exit. Berfungsi menampilkan halaman yang berisi spesifikasi sesuai dengan nama tombol navigasinya. Kode Program 3 Speaker Controller 1 2 3 4 5 6 7 8
_root.suara ="on"; var song_sound:Sound = new Sound(); song_sound.loadSound("A.mp3", true); song_sound.setVolume(50); song_sound.onSoundComplete = function() { this.start(0); } stop();
Kode program tersebut digunakan pada tombol speaker pada halaman utama dan tiap halaman. Tombol speaker dalam bentuk movieclip akan memanggil file A.mp3 dan volume diatur pada ukuran 50. Ketika lagu selesai diputar maka lagu akan diputar kembali dengan fungsi looping pada kode program.
Gambar 14Tampilan halaman motor penggerak
Halaman materi motor penggerak akan muncul ketika pengguna menekan tombol motor penggerak. Halaman ini berisi spesifikasi motor penggerak yang digunakan pada mobil Esemka Rajawali Dua, disertai animasi gambar mesin sebenarnya. Kemudian jika pengguna menekan tombol home, maka halaman utama akan muncul kembali. Kode Program 4Tombol Menu Mesin Penggerak 1 2 3
on (release) { _root.car.gotoAndPlay("mesin_start"); }
16
Kode program berikut adalah script yang berada didalam tombol mesin penggerak. Ketika user menekan program akan memanggil movieclip bernama car dan kemudian didalam car di jalankan animasi berinstance name mesin_start. Instance name mesin_start ini akan memulai animasi 3D pada mobil Esemka kemudian pada akhir frame akan berhenti dan dilanjutkan pada kode program selanjutnya. Kode Program 5 Movieclip Car Layer Mesin Mulai 1 2 3
_root.frameborder.spek.gotoAndPlay("spec_out"); _root.navigasi.gotoAndPlay("menu_out"); stop();
Kode program berikut berada di frame dimana animasi 3D mobil berhenti. Kode program ini memiliki fungsi untuk mengeluarkan movieclip pada layer border yang berisi profil sederhana Esemka, dan mengeluarkan tombol-tombol navigasi dari tampilan aplikasi. Kemudian text mesin akan muncul dilayar desktop. Text mesin ini berisi text dan animasi gambar spesifikasi mesin penggerak. Kode Program 6 Tombol Home 1 2 3
on(release){ _root.car.gotoAndPlay("mesin_end"); }
Kode program berikut akan berjalan ketika user menekan tombol home. Tombol tersebut memilki fungsi untuk mengakhiri text mesin dengan memanggil frame dengan instance name mesin_end pada movieclip car. Pada akhir frame pada animasi mesin_end akan dilanjutkan dengan eksekusi script kode program selanjutnya. Kode Program 7 Movieclip Car Layer Mesin Akhir 1 2
_root.frameborder.spek.gotoAndPlay("spec_in"); _root.navigasi.gotoAndPlay("menu_in");
Setelah animasi mobil Esemka berakhir dengan posisi kembali ke semula. Maka kode program di atas akan dieksekusi. Kode program ini memunculkan profil Esemka dan tombol-tombol navigasi sesuai posisi semula seperti pada halaman utama aplikasi. Tombol-tombol lainnya juga memiliki struktur kode program yang sama. Disini yang membedakan hanyalah inisialisasi instance name pada setiap kode program masing-masing tombol, kecuali pada tombol Sistem pembakaran terdapat perbedaan kode program pada halaman spesifikasi sistem pembakaran.
17
Gambar 15 Tampilan Halaman Sistem Pembakaran
Perbedaan tampilan halaman spesifikasi ini dengan halaman spesifikasi yang lain adalah dengan adanya tambahan dropbox berisi text penjelasan sistem pembakaran yang digunakan pada mobil Esemka. Pada tombol dropbox tersebut terdapat kode program. Kode program sebagai berikut. Kode Program 8 Tombol Dropbox Naik 1 2 3 4 5
on(press){ if(teks._y < 0){ teks._y +=40; } }
Kode program ini menjelaskan ketika tombol dropbox naik di tekan maka instance name text akan bergerak naik sesuai sumbu y, angka sumbu y bertambah 40 setiap sekali press tombol dropbox naik, dan akan berhenti ketika angka y sudah mencapai angka 0. Kode Program 9 Tombol Dropbox Turun 1 2 3 4 5
on(press){ if(teks._y >= -1135){ teks._y -= 40; } }
Kode program ini menjelaskan ketika tombol dropbox turun di tekan maka instance name text akan bergerak turun sesuai sumbu y, sumbu y berkurang 40 setiap sekali press tombol dropbox turun, dan akan berhenti ketika angka y sudah mencapai angka -1135. Kode Program 10 Tombol Exit 1 2 3
on(release){ fscommand("quit"); }
Kode program berikut adalah kode program untuk tombol exit pada pada halaman utama. Tombol ini berfungsi untuk mengakhiri penggunaan aplikasi Katalog Digital Esemka Rajawali Dua. 5. Uji Sistem Pengujian aplikasi dibagi dalam dua tahap yaitu pengujian aplikasi menggunakan metode black box dan kuisioner. Pengujian black box dilakukan oleh developer yaitu dengan tujuan untuk mengetahui apakah aplikasi sudah berjalan sesuai storyboard dan struktur navigasinya dan apakah terdapat error ? Kemudian dilanjutkan dengan pengujian aplikasi terhadap responden dengan membagi kuisioner. Kuisioner bermanfaat untuk mengetahui respon user berkaitan dengan ekspresi daya minat dan mengetahui tujuan penelitian ini apakah sudah tercapai sesuai target penelitian. Black box testing berfokus pada kebutuhan fungsional pada software, berdasarkan pada spesifikasi kebutuhan dari software. Kategori error yang akan diketahui melalui black box testing antara lain fungsi yang hilang atau tidak benar, error dari antar-muka, error dari struktur data, error dari kinerja atau tingkah laku, error dari inisialisasi dan terminasi.[11] Berikut black box testing pada aplikasi katalog digital mobil Esemka Rajawali Dua.
18
Tabel 1 Tabel Pengujian Black Box Nama No
Fungsi Yang di Uji
Skenario
Hasil Yang
Hasil
Pengujian
Diharapkan
Kenyataan
Kode
Muncul
program
halaman
pada halaman 1
intro memanggil
intro Eksekusi
kemudian
Sesuai
aplikasi.
dilanjutkan
harapan
halaman
setelah intro
utama.
selesai.
3
Tombol
Klik tombol
Sound
sound
Tombol
Klik tombol
Mesin
Mesin
Penggerak
penggerak
Tombol 4
home setiap
Klik tombol
menu
home
spesifikasi
5
6
7
8
Valid
muncul
esemka.swf
2
Kesimpulan
Sound : off
Sesuai harapan
Valid
Muncul halaman
Sesuai
mesin
harapan
Valid
penggerak Kembali ke halaman utama
Sesuai harapan
Valid
Muncul
Tombol
Klik tombol
Sistem
sistem
Pengereman
pengereman
Tombol
Klik tombol
Sistem
sistem
Suspensi
suspensi
Tombol
Klik tombol
Roda
roda
Tombol
Klik tombol
Muncul
Berat
berat
halaman
Kendaraan
kendaraan
berat
halaman
Sesuai
sistem
harapan
Valid
pengereman Muncul halaman
Sesuai
sistem
harapan
Valid
suspensi Muncul halaman roda
19
Sesuai harapan
Sesuai harapan
Valid
Valid
kendaraan
9
10
11
12
13
14
Tombol
Klik tombol
Dimensi
dimensi
Kendaraan
kendaraan
Tombol
Klik tombol
Kemudi dan
kemudi dan
Interior
Interior
Tombol
Klik tombol
Sistem
sistem
Pembakaran
pembakaran
Tombol
Klik tombol
Transmisi
transmisi
Tombol
Klik tombol
Lain-lain
lain-lain
Tombol Exit
Muncul halaman
Sesuai
dimensi
harapan
Valid
kendaraan Muncul halaman
Sesuai
kemudi dan
harapan
Valid
interior Muncul halaman
Sesuai
sistem
harapan
Valid
pembakaran Muncul
Sesuai
halaman
harapan
transmisi Muncul
Sesuai
halaman
harapan
lain-lain
Klik tombol
Keluar
exit
aplikasi
dari
Sesuai harapan
Valid
Valid
Valid
Dengan pengujian black box diatas dapat disimpulkan bahwa aplikasi katalog digital mobil Esemka Rajawali Dua valid atau dapat disebut tidak terdapat error pada aplikasi. Setelah black box testing kemudian dilakukan pengujian aplikasi terhadap responden dengan kuisioner. Untuk hasil jawaban kuisioner kemudian diolah menggunakan skala likert. Skala likert adalah skala yang digunakan untuk mengukur presepsi, sikap atau pendapat seseorang atau kelompok mengenai sebuah fenomena berdasarkan definisi operasional yang ditetapkan oleh peneliti.[12] Kuisioner diberikan kepada 30 responden pihak Esemka dan siswa SMK Negeri 2 Surakarta. Tabel 2 Skala Likert N o 1
2
Pertanyaan Apakah anda mudah mengoperasikan aplikasi katalog digital mobil Esemka Rajawali Dua ? Apakah tampilan katalog digital mobil secara 3D lebih menarik daripada
Pernyataan
Item SS
S
TS
F
20
8
2
F
21
9
20
Jumlah Skor STS
108
111
tampilan 2D ? Apakah aplikasi ini mempermudah anda dalam mempelajari dan menggambarkan produk mobil secara jelas ? 4 Apakah aplikasi ini lebih efektif dan effisien dalam menyampaikan informasi daripada web ? 5 Apakah informasi spesifikasi sudah memenuhi kebutuhan ? Total Skor Skor Rata Rata 3
F
9
18
3
F
3
15
11
F
3
25
2
96
1
80
91 486 97.2
Tabel 3 Nilai Skor Favorable No Pernyataan Skor 1 SS 4 2 S 3 3 TS 2 4 STS 1
Jumlah skor kriterium (skor tertinggi) = 4 x 30 = 120 Jumlah skor rata-rata terkumpul = 99,8 Kualitas aplikasi di hitung dengan menggunakan rumus persentase skala likert sebagai berikut : Rata – rata Skor Persentase = x 100% Skor Tertinggi Kriteria Intreprestasi Skor : 0% - 25% = Lemah 26% - 50 % = Cukup 51% - 75% = Kuat 76% - 100% = Sangat Kuat Berikut perhitungan persentase skor yang kemudian dibandingkan dengan kriteria intreprestasi skor : 97,2 Persentase = x 100% 120 = 81 % Nilai persentase 81 % terletak pada kriteria sangat kuat. Berdasarkan hasil presentase skala likert pada kuisioner yang dilakukan mendapatkan hasil bahwa aplikasi ini dapat berjalan sesuai fungsi dan menyampaikan informasi yang sesuai harapan, sesuai dengan kebutuhan pihak Esemka. Karena hasil intreprestasi skor yang dihasilkan dari responden berkriteria sangat kuat. 6. Simpulan Berdasarkan hasil pengujian aplikasi katalog digital mobil Esemka Rajawali Dua di pihak Esemka Surakarta dan SMK Negeri 2 Surakarta, maka disimpulkan bahwa aplikasi ini dapat digunakan sebagai media alternative yang lebih menarik, efektif dan inovatif, yaitu dikarenakan user lebih memahami informasi yang diberikan dan mendapat gambaran yang jelas wujud mobil Esemka Rajawali Dua. Gambaran yang jelas ini diperoleh dari visualisasi animasi
21
3D mobil Esemka Rajawali Dua yang didukung teknologi Global Illumination pada pengolah gambar 3D yang menghasilkan tampilan 3D yang lebih nyata serta informasi spesifikasi yang detail. Sehingga penggunaannya dalam pengembangan mobil Esemka, pengenalan produk, dan pembelajaran menjadi lebih menarik dan memiliki daya tarik lebih. Untuk pengembangan yang dapat dilakukan pada penelitian ini dikemudian hari adalah dalam pengembangan berikutnya disarankan aplikasi katalog digital dibangun di dalam web dan terdapat beberapa simulasi mobil esemka. 7. Daftar Pustaka [1] Suyanto, M, 2004, “Aplikasi Desain Grafis Untuk Periklanan”, Yogyakarta : Andi Offset. [2] Christian, Allan, 2011 “Perancangan Intergrated Marketing Communication Mobil Nasional Esemka Digdaya”, Surabaya : Fakultas Seni dan Desain, Universitas Kristen Petra. [3] Firdaus, Septiana, 2012, “Perancangan Aplikasi Multimedia Interaktif Company Profile Generic ( Studi Kasus : CV. Ganetic )”, Garut : Sekolah Tinggi Teknologi Garut. [4] Suyanto, M, 2005, “Multimedia Alat Untuk Meningkatkan Keunggulan Bersaing“, Yogyakarta : Andi Offset. [5]
[6] [7] [8] [9] [10]
[11] [12]
Josaphat, Fidelis, 2004, “Open Source 3D Animation”. Retrived from www.bookidoc.com/text-id/45a62b88h32i0/Blenderbookv01.pdf, diakses tanggal 1 April 2013. http://www.blendwork.biz/manfaat-brosur-digital-katalog-online-dalampromosi-produk-dan-jasa/, diakses tanggal 28 Mei 2013 Yusuf, Rohana, 2004, “Penyelidikan Sains Sosial”, Malaysia : PTS Publications & Distributors Sdn Bhd. Sutopo, Ariesto, dan Hadi, 2003, “Multimedia Interaktif Dengan Flash”, Yogyakarta : Graha Ilmu. IBM, “Flowcharting Techniques”, 821 United Nations Plaza, New York : USA. Anonymous, 2004, “Cross Functional Flowchart”, http://www.edrasoft.com/Cross-Functional-Flowchart.php diakses pada tanggal 2 Juni 2013. Busono, Pranto, 2010, “Testing And Implementasi Black Box Testing”, Jakarta. Riduwan, dan Akdon, 2007, “Rumus dan Data dalam Analisis Statistika”, Penerbit Alfabeta : Bandung.
22
