PERANCANGAN INFOGRAFIS ANIMASI 2D “ SIMULASI GRADASI WARNA” DENGAN TEKNIK MOTION GRAPHIC
NASKAH PUBLIKASI
diajukan oleh Melati Ayuning Diaz 12.11.5855
kepada SEKOLAH TINGGI MANAJEMEN INFORMATIKA DAN KOMPUTER AMIKOM YOGYAKARTA YOGYAKARTA 2016
PERANCANGAN INFOGRAFIS ANIMASI 2D “SIMULASI GRADASI WARNA” DENGAN TEKNIK MOTION GRAPHIC Melati Ayuning Diaz1), Melwin Syafrizal 2), 1)
Teknik Informatika STMIK AMIKOM Yogyakarta Sistem Informasi STMIK AMIKOM Yogyakarta Jl Ringroad Utara, Condongcatur, Depok, Sleman, Yogyakarta Indonesia 55283 2)
Email :
[email protected]),
[email protected])
Pada pengamatan peneliti, metode pembelajaran pendidikan anak usia dini masih menggunakan papan tulis, dan kapur untuk menggambar pola dan mewarnai pola tersebut. Sehingga jika metode belajar siswa terkomputerisasi dengan media yang saat ini marak digunakan: proyektor. Terlebih, segmentasi pendidikan anak usia dini banyak yang menengah atas jika ditinjau dari segi ekonomi. Sehingga penggunaan proyektor menjadi hal yang biasa. Adapun pembelajaran di kelas, pada guru bisa memasangkan kabel HDMI dari komputer/laptop untuk dapat tersambung ke layar proyektor. Atau setiap anak usia dini disediakan komputer masing-masing agar siswa tersebut dapat mencoba bereksperimen sendiri.
Abstract - Many students in Early Childhood Education (PAUD) and Kindergarten (TK) who do not understand color gradation, and only learned about the basic colors which taught by their teachers. Researcher are trying to design a color gradation's simulation to facilitate PAUD and TK students in order to know various shades with few portions. In this thesis, the researcher tried to bring up the main points of the existing problems, and try to design interactive applications in order to provide an explanation of the color gradation pattern of PAUD and TK students. This study will generate interactive applications using Adobe Flash, and ActionScript 2.0. The product will be a CD and can be distributed to students of PAUD and TK. Later, interactive applications are expected to provide benefits broadly researchers for PAUD and TK teachers in general, and early childhood and kindergarten students in particular.
1.2 Rumusan Masalah Bagaimana cara merancang infografis animasi 2D sebagai aplikasi interaktif “Simulasi Gradasi Warna”? 1.3 Maksud dan Tujuan Penelitian Merancang aplikasi interaktif “Simulasi Gradasi Warna” yang dapat membantu anak memahami pelajaran mewarnai bagi pendidikan anak usia dini.
Keywords: Interactive application, design, development, testing, implementation, evaluation, teachers, and students.
1.4 Metode Pengumpulan Data
1. Pendahuluan 1.1 Latar Belakang Masalah
1.
Metode Literatur
Metode pengumpulan data menggunakan berbagai macam literatur yaitu mencari informasi diberbagai jurnal dan buku tentang desain aplikasi interaktif.
Penggiat dunia edukasi kini sangat kreatif dalam memberikan materi untuk siswa ataupun mahasiswa. Baik secara langsung, memakai proyektor, bahkan bisa keluar dari lingkup sekolah atau kampus. Khususnya untuk pendidikan anak usia dini. Siswa pasti menginginkan pembelajaran yang asik dan menyenangkan dalam kelasnya..
2.
Metode Wawancara
Metode pengumpulan data dengan mengadakan tanya jawab secara langsung terhadap pihak yang terkait yaitu pendidikan anak usia dini untuk mendapatkan informasi tentang hal-hal yang akan dimasukkan kedalam aplikasi secara tepat dan akurat.
Peneliti mencoba membuat rancangan infografis animasi 2D sebagai aplikasi interaktif berjudul “Simulasi Gradasi Warna” sebagai media pembelajaran mewarnai untuk anak usia dini. Rancangan aplikasi interaktif ini berisikan simulasi gradasi warna serta materi penjelasan yang ada disetiap objek animasi. Simulasi ini dibuat dengan desain yang menarik sehingga dapat digunakan dengan baik oleh anak usia dini pada khususnya, dan bagi orang tua secara umum. Dengan menggunakan software Adobe Flash, peneliti akan membuat aplikasi interaktif gradasi warna tersebut.Disajikan secara sistematik sehingga didapatkan gambaran tentang dasar pembuatan makalah ini dan hasil yang diharapkan.
3.
Metode Obvervasi
Metode pengumpulan data dengan cara mengadakan pengamatan secara langsung terhadap kegiatan yang dilakukan oleh pendidikan anak usia dini. 2. Landasan Teori 2.1 Tinjauan Pustaka Menurut Galih Eko Setiawan (2014) Jurusan Teknik Informatika Universitas Nuswantoro Semarang yang berjudul “Media Pembelajaran Interaktif Simulasi
1
Pembangkit Listrik Tenaga Matahari Untuk Kelas VIII SMPN 15 Semarang” Untuk membuat sebuah media pembelajaran interaktif yang baik, perlu dilakukan beberapa tahapan yang jelas. Dengan demikian proses pembuatan media pembelajaran interaktif dapat dilakukan dengan lancar karena sudah dirancang dalam konsep yang terarah. [1]
2.2
Pengertian Multimedia
Pada buku yang berjudul Multimedia sebagai Alat Untuk meningkatkan keunggulan bersaing karya M.Suyanto (Bab 1 hal 20) multimedia merupakan kombinasi dari komputer dan video atau secara umum multimedia merupakan kombinasi dari tiga elemen. Tiga elemen yang dimaksud yaitu suara, gambar, dan teks. [4]
Menurut Ashif Khairul Anam (2014) Jurusan Sistem Informasi STMIK AMIKOM YOGYAKARTA yang berjudul “Perancangan Multimedia Interaktif Pada Lembah Fitness UGM Sebagai Media Informasi dan Promosi” Pembuatan multimedia interaktif merupakan kemampuan untuk menggabungkan antara kemampuan animasi, text, grafik dan suara dengan kemampuan logika actionscript sehingga bisa dikatakan layak untuk memberikan informasi yang lebih menarik. [2]
2.2.1
Elemen Multimedia
1.
Teks (Text)
Bentuk data multimedia yang paling mudah disimpan dan dikendalikan adalah teks. Teks dapat membentuk kata, surat atau narasi dalam multimedia yang menyajikan bahasa. Kebutuhan teks bergantung kepada penggunaan aplikasi multimedia. 2. Suara (Sound)
Menurut Bayu Susilo (2014) Jurusan Manajemen Informatika STMIK AMIKOM YOGYAKARTA yang berjudul “Perancangan Dan Pembuatan Musik Video The Story After Berjudul “Melody” Berbasis Animasi 2d Menggunakan Teknik Digital Animasi Sebagai Media Promosi" Teknik animasi 2D cenderung mengambil fokus pada manipulasi gambar, sedangkan teknik 3D biasanya membagun dunia maya dengan karakter dan objek-bjek yang saling bergerak dan berinteraksi. Animasi 3D juga dapat membuat gambar yang terlihat realistis bagi pemirsanya. [3]
Audio (suara) atau bunyi dalam PC multimedia, khususnya pada aplikasi bidang bisnis dan game sangat bermanfaat. PC multimedia tanpa bunyi hanya disebut unimedia, bukan multimedia. 3. Grafik (Image) Alasan untuk menggunakan gambar dalam presentasi atau publikasi multimedia kaena lebih menarik perhatian dan dapat mengurangi kebosanan dibanding dengan teks. Gambar dapat meringkas dan menyajikan data kompleks dengan cara yang baru dan lebih berguna. Sering dikatakan bahwa gambar mampu myampaikan seribu kata, tetapi itu hanya berlaku ketika pengunjung dapat menampilkan gambar yang diinginkan saat memerlukannya.
Menurut Cynthia Larasati Manggiasih (2011) Jurusan Sistem Informasi STMIK AMIKOM YOGYAKARTA yang berjudul “Analisis dan Pembuatan Simulasi Perubahan Zat Berbasis Multimedia Interaktif Mengunakan Adobe Flash” Struktur aplikasi multimedia sangat besar fungsinya terutama didalam pembuatan atau perancangan suatu aplikasi multimedia, karena dengan menggunakan struktur tersebut suatu rancangan aplikasi multimedia dapat terbantu dengan mudah. [4]
4. Video Video adalah salah satu media audio visual yang digunakan sebagai media komunikasi dalam pembangunan. 5. Animasi (Animation)
Menurut Muhammad Firiyadi (2014) Jurusan Teknik Informatika STMIK AMIKOM YOGYAKARTA yang berjudul “Peranangan Video Animasi 2D Simulasi Terjadinya Hilal Dengan Teknik Motion Graphic” Animasi 2D biasa disebut dengan animasi kartun. Kartun adalah suatu gambar interpreatif yang simbolis mengenai sikap orang, situasi atau kejadian tertentu. [5]
Kata animasi diambil dari kata animation, to animate. Jadi definisi animasi adalah menghidupkan segala benda atau objek mati. Kata “menghidupkan” disini bukanlah memberi nyawa yang merupakan hak Tuhan, melaikan membuatnya bergerak sehinga terlihat seperti hidup. 2.3
Definisi Animasi 2D Animasi 2D adalah penciptaan gambar bergerak dalam lingkungan dua dimensi. Hal ini dilakukan dengan urutan gambar berturut-turut, atau “frame”, yang mensimulasikan gerak oleh setiap gambar menunjukkan berikutnya dalam perkembangan bertahap langkahlangkah. 2.4 Definisi Desain Grafis Dapat didefinisikan sebagai aplikasi dari keterampilan seni dan komunikasi untuk kebutuhan bisnis dan industri (yang bisa disebut seni komersial). Elemen-elemennya adalah:
Pada buku yang berjudul Multimedia sebagai Alat Untuk meningkatkan keunggulan bersaing karya M.Suyanto (Bab 1 hal 20) multimedia merupakan kombinasi dari komputer dan video atau secara umum multimedia merupakan kombinasi dari tiga elemen. Tiga elemen yang dimaksud yaitu suara, gambar, dan teks. [6] Menurut Suyanto (2003 : 353), agar multimedia dapat menjadi alat kenggulan bersaing perusahaan, pengembangan sistem multimedia harus mengikuti sebelas tahapan pengembangan sistem Multimedia. [7]
2
1. 2. 3. 4.
Garis Bentuk Warna Kontras Nilai
kebutuhan yang dihadapkan, sehingga dapat diusulkan perbaikan-perbaikannya. 3.3.2 Analisis Kelemahan Sistem Tujuan utama dari analisis sistem adalah mengevaluasi dan menentukan permasaahan pada sekolah pendidikan anak usia dini yang sistem pembelajarannya kurang menarik dan belum mengunakan sistem komputerisasi.
2.5
Pengertian Motion Graphic Motion graphic atau motion grafis adalah istilah salah satu media atau salah satu sub dari ilmu desain grafis untuk opening bumper, film, televisi, video clip dan internet. Pada dunia perdagangan, informasi, hiburan adalah suatu tantangan, ketika dimana pemirsa atau audience memutuskan apakah tidak atau akan untuk saluran, keluar dari situs web, atau ketika menonton trailer, untuk melihat film.
3.4
Analisis Kebutuhan Sistem Dalam pembahasan ini menguraikan kebutuhan sistem multimedia dan pembelajaran untuk pendidikan anak usia dini tentang ‘Simulasi Gradasi Warna’ agar dapat diusulkan untuk membantu guru dan anak usia dini dalam menyampaikan dan memahami materi tentang apa itu gradasi warna, dan apa manfaat belajar memahami gradasi warna.
2.6
Pengertian Media Interaktif Media interaktif merupakan istilah untuk gabungan antara berbagai elemen multimedia yang bersifat interakif dan menarik perhatian usernya sehingga terjadi interaksi antara user dan media itu sendiri. 2.7 a. b. c. d. e. f.
3.4.1 Analisis Kebutuhan Fungsional Sistem mampu memberikan informasi penjelasan tentang simulasi gradasi warna mulai
Teori Produksi Multimedia Multimedia Content Production Multimedia Communication Digitalisasi Editing Animasi Computer Based Animation
3.4.2 Analisis Kebutuhan Non Fungsional Analisis kebutuhan non fungsional adalah bagian yang akan mendukung jalan proses pembutuhan aplikasi multimedia intraktif simulasi gradasi warna dengan teknik motion graphic. Kebutuhan in meliputi perangkat keras (hardware), kebutuhan perangkat lunak (software), dan kebutuhan sistem SDM (brainware). Berikut ini beberapa kebutuhan non fungsional tersebut.
2.8
Pengertian Infografis Pengertian Infografis adalah suatu bentuk penyajian data dengan konsep visual yang terdiri dari teks dengan tambahan gambar-gambar ilustrasi yang menarik.
a.
Analisis Kebutuhan Perangkat Keras Perangkat keras yang akan digunakan untuk membangun system aplikasi ini adalah sebuah notebook dengan spesifikasi sebagai berikut : Laptop ASUS A43S Processor Intel Core i3 2330M CPU @ 2,2 GHz RAM 4GB VGA NVIDIA GeForce® GT 610M Hardisk 500 GB
2.9
Pengertian Gradasi Warna Gradasi warna adalah corak warna yang bisa dikembangkan dari dua warna atau lebih. 3. 3.1
Analisis dan Perancangan Deskripsi Aplikasi Aplikasi ini adalah sebuah aplikasi multimedia, yang dapat digunakan atau memilik fungsi sebagai media pengenalan atau pembelajaran tentang simulasi gradasi warna.
b.
3.2
Analisis Kebutuhan Perangkat Lunak Aspek perangkat lunak (Software) adalah semua prangkat lunak atau aplikasi yang diperlukan untuk proses pebuatan animasi 2D ‘simulasi gradasi warna’ adalah sebagai berikut: Adobe Photoshop CS6 Adobe After Effect CS6 Adobe Flash CS6 Adobe Audition CS6
3.3 Analisis Sistem Multimedia 3.3.1 Analisis Sistem Analisis dapat didefinisikan sebagai penguraian dari suatu sistem informasi yang utuh kedalam bagianbagian atau komponennya dengan maksud untuk mengidentifikasi dan mengevaluasi permasalahanpermasalahan, kesempatan, hambatan yang terjadi dan
3.5 Analisis Kelayakan Sistem Analisis kelayakan sistem atau sering disebut studi kelayakan adalah suatu studi yang akan digunakan untuk menentukan kemungkinan apakah pengembangan proyek sistem multimedia layak dieruskan atau dihentikan.
Mengidentifikasi Masalah Pada tahap analisis sistem ini, analisis mempunyai fungsi untuk mengidentifikasi analisis sistem, melakukan studi kelayakan dan menganalisis kebutuhan sistem.
3
3.5.1
Kelayakan Teknologi Teknologi berkembang semakin cepat tak terkendali dengan teknologi komputer. Komputer telah memberikan banyak kemudahan bagi manusia. Hal yang paling berguna adalah dalam proses penyampaian informasi dan menyediakan peluang bagi kemajuan dan mengubah penyampaian informasi cara lama.
3.6.2 Perancangan Tampilan 1. Tampilan Menu Utama
3.5.2
Kelayakan Hukum Pertanyaan mendasar yang harus dijawab untuk menilai kelayakan hukum adalah “Dapatkah media yang baru yaitu media berbasis multimedia interaktif tidak melanggar etika dan hukum?”. Media tersebut tidak melanggar hukum karena media terebut sudah dikemas sesuai dengan materi dan tepat sasaran.
Gambar 2. Rancangan Menu Utama 2.
3.5.3
Kelayakan Operasional Penilaian teradap operasi dilakukan untuk mengatur apakah media yang dibuat tersebut dapat diterima dan dapat berjalan dengan baik. Hal ini menyangkut kemampuan media informasi tersebut dalam memberkan informasi. Pertanyaan mendasar yang harus dijawab untuk menilai kelayakan operasional adalah “Dapatkah media yang baru yaitu media berbasis multimedia interaktif penyampaian materi seputar gradasi warna dapat digunakan dengan mudah dan dapat dimengerti oleh anak usia dini dan guru.
Rancangan Aplikasi
Gambar 3. Rancangan Aplikasi
3.5.4
Kelayakan Jadwal Dari kendala waktu, sistem informasi multimedia yang akan diharapkan jelas tidak ada kendala waktu. Karena perencanaan sebuah sistem ini disesuaikan dengan kurikulum sekolah yang sedang berlaku sehingga pengunaannya tidak kadaluarsa. Dengan demikian dari sisi kelayaka jadwal, pembuatan aplikasi multimedia tersebut layak untuk dilaksanakan.
3.
Kelayakan Strategi Pembelajaran menggunakan media interaktif dimungkinkan akan mempengaruhi strategi pengembangan pendidikan yaitu dalam hal strategi terkomputerisasi yang lebih menarik dan tepat sasaran.
Tampilan Warna yang Dipilih
3.5.5
Gambar 4 Menu Penggabungan Warna
4.
Tampilan Hasil Penggabungan Warna
3.6 3.6.1
Perancangan Sistem Konsep Struktur Navigasi Berikut ini merupakan struktur navigasi dalam aplikasi multimedia simulasi gradasi warna:
Gambar 5. Hasil Penggabungan Warna
Gambar 1. Perancangan Struktur Navigasi
4
5.
Tampilan Menu Credit
4. Tampilan Penggabungan Warna
Gambar 10 Tampilan Penggabungan Warna 5. Tampilan Hasil Penggabungan Warna Gambar 6. Tampilan Menu Credit 4.
Implementasi dan Pembahasan Implementasi merupakan tahapan setelah melakukan analisis dan perancangan sistem pada siklus rekayasa perangkat keras dimana sistem siap dioperasikan pada keadaan yang sebenarnya sehingga dari sini akan dapa diketahui apakah aplikasi interaktif yang telah dibuat benar-benar dapat menghasilkan output atau keluaran yang sudah sesuai dengan tujuan yang diinginkan.
Gambar 11 Hasil Penggabungan Warna
1. Hasil Perancangan Menu Intro
6.
Tampilan Menu Credit
Gambar 7. Menu Intro 2. Tampilan Menu Utama
Gambar 12 Tampilan Menu Credit 4.6
Hasil Pengujian Tabel 1. Tabel Uji Aplikasi
No
Gambar 8 Tampilan Menu Utama
Kasus
Hasil Pengujian Berhasil
1.
Melihat Menu Utama
2.
Menampilkan Menu Gradasi Warna
Berhasil
3.
Menampilkan Menu Penggabungan Warna
Berhasil
4.
Menampilkan Menu Hasil Penggabungan Warna
Berhasil
5.
Menampilkan Menu Credit
Berhasil
3. Tampilan Menu Gradasi Warna
5. Penutup 5.1 Kesimpulan Berdasarkan pembahasan dan penjelasan keseluruhan materi dari bab-bab sebelumnya dengan judul “Perancangan Infografis Animasi 2D ‘Simulasi Gradasi Warna’ dengan Teknik Motion Graphic” serta selesainya
Gambar 9 Tampilan Menu Gradasi Warna
5
penyusunan skripsi dan pembuatan aplikasi ini dapat diambil kesimpulan sebagai berikut: 1. Untuk mempelajari bagaimana bermain gradasi warna itu, dan pengguna akan mengetahui pencampuran warna yang sudah dipilih. 2. Aplikasi simulasi gradasi warna sistemnya menggunakan komputer, jadi para pengguna lebih tertarik untuk mengoperasikannya. banyak warna. Dan aplikasi ini didesain dengan background yang menarik.
[6] Manggiasih, Cynthia Larasati. Analisis dan Pembuatan Simulasi Perubahan Zat Berbasis Multimedia Interaktif Mengunakan Adobe Flash. Yogyakarta: Jurnal STMIK Amikom. 2011. [7] Suyanto, M. Multimedia sebagai Alat Untuk meningkatkan keunggulan bersaing. Yogyakarta. 2003.
5.2 Saran Agar aplikasi ini dapat lebih sempurna, ada beberapa saran dari penulis, diantaranya yaitu: 1. Aplikasi ini dapat terus dikembangkan lebih lanjut dalam hal pemilihan warna, kedepannya diharapkan untuk dapat menggunakan warna yang lebih banyak dan lebih spesifik. 2. Saat ini aplikasi simulasi gradasi warna ini masih pada sistem operasi Windows, harapannya semoga untuk kedepannya dapat dirancang ke dalam sistem operasi lain. 3. Penelitian ini masih dalam ruang lingkup yang terbatas. Peneliti berharap penelitian ini dapat dikembangkan lebih lanjut sehingga dapat memberikan kemudahan bagi pengguna aplikasi simulasi gradasi warna ini. 4. Peneliti berikutnya diharapkan dapat mengembangkan kembali aplikasi simulasi gradasi warna sehingga jauh lebih menarik dan bervariasi untuk digunakan. Untuk kedepannya, bila sistem penentuan tingkat pembelajaran gradasi warna nantinya telah sempurna, maka sistem ini dapat digunakan di Taman Kanakkanak, Pendidikan Anak Usia Dini, dan tempat pendidikan yang kiranya membutuhkan aplikasi multimedia interaktif simulasi gradasi warna ini.
Melati Ayuning Diaz, memperoleh gelar Sarjana Komputer (S.Kom), Jurusan Teknik Informatika STMIK AMIKOM Yogyakarta, lulus tahun 2016.
Biodata Penulis
Melwin Syafrizal, memperoleh gelar Sarjana Komputer (S.Kom), Jurusan Teknik Informasi STMIK AMIKOM Yogyakarta. Memperoleh gelar Master of Engineering (M.Eng) di Universitas Gajah Mada Yogyakarta.
Daftar Pustaka [1] Fatah Sofyan, Amir dan Agus Purwanto. Digital Multimedia: Animasi, Sound Editing, & Video Editing.Yogyakarta: Andi. 2008. [2] Hidayat, Tonny dan Amir Fatah Sofyan. Komputer Grafis: Image Editing, Desain Grafis dan Page Layout.Yogyakarta: Andi. 2008. [3] Lukas Aditya. Perancangan Multimedia Interaktif Sebagai Media Pembelajaran Tentang Pengenalan Global Warning Sejak Usia Dini. Yogyakarta: Jurnal STMIK Amikom Yogyakarta. 2012.. [4] Manggiasih, Cynthia Larasati. Analisis dan Pembuatan Simulasi Perubahan Zat Berbasis Multimedia Interaktif Mengunakan Adobe Flash. Yogyakarta: Jurnal STMIK Amikom. 2011. [5] Hilman, Muhammad Zidny. Pembuatan Aplikasi Multimedia Tes Buta Warna Berbasis Computer Based Test Menggunakan Metode Ishihara. Yogyakarta: Jurnal STMIK Amikom. 2012. 6
