perancangan aplikasi katalog digital mobil esemka...
TRANSCRIPT
1
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
2
3
4
5
6
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)
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
7
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]
8
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
9
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.
10
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
11
Animasi : Mobil Esemka Rajawali Dua (semi-prototype)
dalam 3D dan Isi Menu Spesifikasi Mobil
Esemka Rajawali Dua.
Interface Aplikasi : Flash
Spesifikasi hardware dan software yang mendukung dalam perancangan
sistem. Hardware yang digunakan untuk membuat aplikasi ini adalah HP G42-
361TX 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.
12
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.
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.
Gambar 4 Rancangan Interface Halaman Utama
13
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.
14
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.
7. 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.
13
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.
14
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.
15
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 ber-
animasi 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 :
16
1. Controler Sound : icon speaker. Berfungsi untuk me-aktifkan atau me-
nonaktifkan 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");
}
17
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.
18
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.
19
Tabel 1 Tabel Pengujian Black Box
No
Nama
Fungsi Yang
di Uji
Skenario
Pengujian
Hasil Yang
Diharapkan
Hasil
Kenyataan Kesimpulan
1
Kode
program
pada
halaman
intro
memanggil
esemka.swf
setelah intro
selesai.
Eksekusi
aplikasi.
Muncul
halaman
intro
kemudian
dilanjutkan
muncul
halaman
utama.
Sesuai
harapan Valid
2 Tombol
Sound
Klik tombol
sound Sound : off
Sesuai
harapan Valid
3
Tombol
Mesin
Penggerak
Klik tombol
Mesin
penggerak
Muncul
halaman
mesin
penggerak
Sesuai
harapan Valid
4
Tombol
home setiap
menu
spesifikasi
Klik tombol
home
Kembali ke
halaman
utama
Sesuai
harapan Valid
5
Tombol
Sistem
Pengereman
Klik tombol
sistem
pengereman
Muncul
halaman
sistem
pengereman
Sesuai
harapan Valid
6
Tombol
Sistem
Suspensi
Klik tombol
sistem
suspensi
Muncul
halaman
sistem
suspensi
Sesuai
harapan Valid
7 Tombol
Roda
Klik tombol
roda
Muncul
halaman
roda
Sesuai
harapan Valid
8
Tombol
Berat
Kendaraan
Klik tombol
berat
kendaraan
Muncul
halaman
berat
Sesuai
harapan Valid
20
kendaraan
9
Tombol
Dimensi
Kendaraan
Klik tombol
dimensi
kendaraan
Muncul
halaman
dimensi
kendaraan
Sesuai
harapan Valid
10
Tombol
Kemudi dan
Interior
Klik tombol
kemudi dan
Interior
Muncul
halaman
kemudi dan
interior
Sesuai
harapan Valid
11
Tombol
Sistem
Pembakaran
Klik tombol
sistem
pembakaran
Muncul
halaman
sistem
pembakaran
Sesuai
harapan Valid
12 Tombol
Transmisi
Klik tombol
transmisi
Muncul
halaman
transmisi
Sesuai
harapan Valid
13 Tombol
Lain-lain
Klik tombol
lain-lain
Muncul
halaman
lain-lain
Sesuai
harapan Valid
14 Tombol Exit Klik tombol
exit
Keluar dari
aplikasi
Sesuai
harapan 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 Pertanyaan Item
Pernyataan Jumlah Skor
SS S TS STS
1 Apakah anda mudah
mengoperasikan
aplikasi katalog digital
mobil Esemka Rajawali
Dua ?
F 20 8 2 108
2 Apakah tampilan
katalog digital mobil
secara 3D lebih
menarik daripada
F 21 9 111
21
tampilan 2D ?
3 Apakah aplikasi ini
mempermudah anda
dalam mempelajari dan
menggambarkan produk
mobil secara jelas ?
F 9 18 3 96
4 Apakah aplikasi ini
lebih efektif dan effisien
dalam menyampaikan
informasi daripada web
?
F 3 15 11 1 80
5 Apakah informasi
spesifikasi sudah
memenuhi kebutuhan ?
F 3 25 2 91
Total Skor
Skor Rata Rata
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 :
Persentase = Rata – rata Skor
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 :
Persentase = 97,2
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
22
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] Josaphat, Fidelis, 2004, “Open Source 3D Animation”. Retrived from
www.bookidoc.com/text-id/45a62b88h32i0/Blenderbookv01.pdf, diakses
tanggal 1 April 2013.
[6] http://www.blendwork.biz/manfaat-brosur-digital-katalog-online-dalam-
promosi-produk-dan-jasa/, diakses tanggal 28 Mei 2013
[7] Yusuf, Rohana, 2004, “Penyelidikan Sains Sosial”, Malaysia : PTS
Publications & Distributors Sdn Bhd.
[8] Sutopo, Ariesto, dan Hadi, 2003, “Multimedia Interaktif Dengan Flash”,
Yogyakarta : Graha Ilmu.
[9] IBM, “Flowcharting Techniques”, 821 United Nations Plaza, New York :
USA.
[10] Anonymous, 2004, “Cross Functional Flowchart”,
http://www.edrasoft.com/Cross-Functional-Flowchart.php diakses pada
tanggal 2 Juni 2013.
[11] Busono, Pranto, 2010, “Testing And Implementasi Black Box Testing”,
Jakarta.
[12] Riduwan, dan Akdon, 2007, “Rumus dan Data dalam Analisis Statistika”,
Penerbit Alfabeta : Bandung.