3.2 Konsep Dasar
3.2.1. Pemodelan Sistem
Pada tahapan ini dibuat model pengembangan dari rancangan tampilan dan isi aplikasi. Adapun model animasi kartun global warming adalah sebagai berikut:
Tabel 3.2 Model Animasi Kartun
No Materi
Keterangan Action
1 Penyebab pemanasan
global Menampilkan
informasi mengenai
pemanasan global seperti efek rumah
kaca dengan menampilkan visual
efek penyebab
pemanasan global 1.
Otomatis jalan 2.
Animasi objek berdasarkan
narrator
Tabel diatas merupakan bentuk pemodelan sistem yang akan dirancang didalam animasi yang menceritakan penyebab pemanasan global.
3.3 Perancangan Sistem
3.3.1 Perancangan Sistem Perancangan sistem terdiri dari rancangan flowchart yang penulis rancang, berikut
adalah penjelasan dari masing-masing diagram :
Universitas Sumatera Utara
1. Flowchart Animasi dalam Pemograman Java dengan Gambar JPG
Mulai
Simpan gambar dalam variable array Inisialisasi variable time,
dimensi, array, loop
Bangun dimensi layar 800x600 px
Tampilkan gambar dari variable array
Waktu sekarang waktu tunggu ?
Ingin keluar ? Tidak
Selesai Ya
Ya
Tidak
Gambar 3.3 Flowchart Animasi Java dengan Gambar JPG
Universitas Sumatera Utara
Pada Gambar 3.3, menggambarkan alur proses animasi yang dijalankan melalui aplikasi Java dengan konsep menampilkan gambar satu dengan gambar
lainnya. Gambar – gambar tersebut ditampung dalam sebuah variable tipe array dan
dimunculkan dalam sebuah perulangan. Syarat yang diperlukan bagi gambar adalah memiliki nama file yang diikuti dengan angka sehingga nama-nama file tersebut dapat
disimpan dan dipanggil melalui array dengan bantuan proses perulangan. Selain variable bertipe array sebagai penyimpan atau buffer gambar yang akan ditampilkan,
dibutuhkan variable pendukung lainnya seperti waktu delay dari satu gambar ke gambar berikutnya.
Setelah deklarasi variable yang dibutuhkan, maka tahap berikutnya adalah menentukan dimensi jendela layar animasi yang akan ditampilkan. Dalam hal ini,
dipakai ukuran 800 x 600 pixel. Langkah awal teknis yang dilakukan adalah menentukan berapa banyak perulangan yang akan dilakukan untuk menyimpan semua
nama file dalam sebuah array. Banyaknya perulangan dapat dilihat dari banyaknya file gambar yang akan ditampilkan.
Setelah gambar berhasil disimpan, lakukan perulangan lagi dengan banyaknya perulangan sama dengan perulangan saat menyimpan gambar. Perulangan ini
ditujukan untuk menampilkan semua gambar dengan waktu jeda. Waktu jeda untuk menampilkan satu gambar adalah 1 detik per gambar. Perubahan gambar juga melihat
timestamp dari sebuah thread. Apabila waktu sekarang lebih besar dari waktu sebelumnya, munculkan gambar berikutnya. Jadi, setiap satu detik, terjadi perubahan
gambar berikutnya dengan membandingkan timestamp secara realtime. Selama aplikasi berjalan, aplikasi akan menampilkan animasi. Aplikasi akan keluar apabila
animasi dihentikan dengan menutup jendela layar aplikasi.
Universitas Sumatera Utara
2. Flowchart Animasi dalam Pemograman Java dengan Gambar GIF.
Mulai
Ambil suara wav dan gambar gif dalam project Inisialisasi variable panel dan
label
Bangun dimensi layar 800x600 px
Tampilkan suara dan gambar animasi
Selesai
Gambar 3.4 Flowchart Animasi Java dengan File GIF
Pada Gambar 3.4, menerangkan bahwa animasi dapat dijalankan dalam pemograman Java dengan konsep menjadikan semua gambar yang sebelumnya
memiliki format JPG menjadi format GIF. Menjadi sebuah format animasi yang dapat
Universitas Sumatera Utara
dimainkan terpisah dari platform Java. Suara narator yang mendukung animasi juga diinclude dalam aplikasi ini.
Sebagai langkah awal, diperlukan adalah menentukan variable seperti variable panel untuk jendela layar, label, objek dari class file dan objek dari class Image Icon.
Jendela layar untuk menentukan dimensi animasi yang ditampilkan, label dibutuhkan untuk memberi judul pada layar, objek dari class file dibutuhkan untuk melakukan
import suara dan objek dari class Image Icon dibutuhkan untuk memanggil file berformat GIF.
Sebagai langkah teknis, jendela layar animasi dibangun dengan ukuran 800 pixel x 600 pixel. Kemudian, objek yang dibangun melalui class file melalukan
pemanggilan suara narator yang diperlukan. Suara tersebut akan mulai berjalan saat aplikasi menjalankan animasi. Lalu, objek dari Image Icon memanggil file animasi
dengan format GIF ke dalam aplikasi dan memunculkan gambar saat aplikasi dijalankan. Jadi, gambar dan suara dapat sinkron satu sama lain pada saat dimainkan
dalam aplikasi pemrograman Java.
3.3.2 Perancangan Storyboard Storyboard adalah visualisasi ide dari aplikasi yang akan dibangun, sehingga dapat
memberikan gambaran dari aplikasi yang akan dihasilkan. Storyboard dapat dikatakan juga visual script yang akan dijadikan outline dari sebuah proyek, ditampilkan shot by
shot yang biasa disebut dengan istilah scene, berikut adalah storyboard dari animasi dalam format GIF yang akan diimplementasikan ke dalam program Java terlihat
dalam Tabel 3.3 berikut :
Universitas Sumatera Utara
Tabel 3.3 Storyboard Animasi dalam GIF
No Scene
Keterangan
1 Scene
ini menggambarkan
keadaan lingkungan
yang masih segar tanpa
asap dan belum terjadi
global warming
2 Asap sudah mulai
bermunculan dari asap
kendaraan bermotor
tapi lingkungan belum
terjadi pemanasan global
3. Kendaraan
bermotor sudah
mulai banyak dan asap
kendaraan yang
timbulkan juga banyak. Asap
tersebut terbang ke udara
menuju lapisan ozon.
Universitas Sumatera Utara
4. Asap
kendaraan yang mengandung
CFC berada
di lapisan
ozon. Disini,
diperlihatkan panas
matahari masih
keadaan normal
karena sinarultraviolet
masih tersaring
oleh lapisan ozon.
5 Kendaraan
bertambah banyak yang menunjukkan
instesitas asap di lapisan ozon.
Universitas Sumatera Utara
6. Reaksi
asap kendaraan
yang mengandung CFC
menyebabkan lubang
pada lapisan ozon.
7. Lapisan
ozon sudah
berlubang dan
sinar UV
memasuki bumi
sehingga menimbulkan
pemanasan global
3.4 Perancangan Animasi melalui Pemrograman Java
3.4.1 Design Animasi pada Java Animasi yang akan diimplementasikan dalam bahasa pemrograman Java bisa
dilakukan dengan menampilkan gambar sequence berurutan untuk animasi berformat JPG dan berformat GIF untuk gambar animasi. Untuk melakukan
implementasi dalam pemrograman Java, dibutuhkan perancangan sebagai berikut :
Universitas Sumatera Utara
1. Dimensi frame gambar dan frame jendela program berukuran 800 x 600 pixel.
2. Waktu yang dibutuhkan untuk menampilkan gambar satu dengan gambar lainnya
selama 1 detik. 3.
Untuk animasi yang telah disatukan menjadi format GIF, waktu pergantian antar gambar selama 0,5 detik.
3.4.2 Desain Pola Gambar Metode Straight Ahead Penggambaran Straight Ahead menekankan pada penggambaran yang bersifat spontan
dimulai dari gambar awal hingga selesai. Straight Ahead, memiliki cara kerja seperti menggambar pada buku catatan yang tebal dan gambar tersebut di mulai dari halaman
yang paling luar hingga pada akhir halaman terakhir. Untuk menyaksikan animasi, perlu dilakukan mem-Flip buku tersebut dimulai dari halaman awal hingga halaman
akhir. Beberapa objek animasi menggunakan teknik penggambaran metode Straight
Ahead sebagai berikut :
Gambar 3.5 Pergerakan Mobil
Pada Gambar 3.5 pergerakan mobil digambarkan dengan metode Straight Ahead. Penggambaran ini tidak membutuhkan pergerakan step by step karena hasil
yang diinginkan adalah perpindahan mobil dengan cepat dari posisi angka satu, hingga ke posisi angka 5.
Universitas Sumatera Utara
\
Gambar 3.6 Pergerakan Asap
Gambar 3.6 menggambarkan pergerakan asap yang digambarkan secara tidak step by step. Penggambaran ini menunjukkan bahwa pergerakan asap dengan cepat
dari posisi angka satu hingga berhenti di posisi angka dua.
Universitas Sumatera Utara
Gambar 3.7 Sinar UV Matahari
Gambar 3.7 menggambarkan sinar UV matahari yang menyinari bumi pada animasi. Sinar UV matahari digambarkan secara Straight Ahead yang hanya
menampilkan dua state. State pertama menampilkan sinar UV matahari yang belum muncul. Gambar state kedua menggambarkan sinar UV matahari yang telah muncul
atau bersinar.
3.4.3 Desain Pola Gambar Metode Pose to Pose. Berbeda dengan metode Straight Ahead, dalam Pose to Pose pembuatan animasi yang
lebih terencana dan terpeta dengan kunci gambar pada interval tertentu, dari suatu Pose ke Pose selanjutnya. Ukuran, volume, dan proporsi akan lebih mudah diatur
dengan teknik ini, dalam suatu aksi sehingga animator tidak usah membuat seluruh gambar pada scene dan lebih terkonsentrasi pada perencanaan animasi yang lain.
Universitas Sumatera Utara
Ada beberapa properti yang dianimasikan dengan menggukanan teknik penggambaran metode Pose to Pose. Berikut merupakan gambar perancangan metode
Pose to Pose :
Gambar 3.8 Pergerakan Kemacetan Mobil
Pada Gambar 3.8 terlihat posisi pergerakan ditandai dengan pemberian angka satu hingga angka enam. Angka satu merupakan posisi awal mobil. Kemudian diikuti
dengan angka dua, tiga, empat, lima dan enam. Pada angka enam, posisi akhir dari pergerakan animasi mobil.
Gambar 3.9 Pergerakan Awan 1 2 3 4 5 6
Universitas Sumatera Utara
Pada Gambar 3.9 Pergerakan awan digambarkan dengan perpindahan yang smooth dari kiri ke kanan. Angka satu menunjukan posisi awal awan. Angka dua, tiga,
empat dan lima merupakan gambar pergerakan awan dari kiri ke kanan. Angka lima menggambarkan akhir pergerakan animasi awan.
3.5 Penyatuan Gambar Object
Kategori