Implementasi Metode Straight Ahead and Pose to Pose Dalam Pembuatan Kartun 2D “Global Warning”
SKRIPSI
NOVALINA
111421020
PROGRAM STUDI S1 ILMU KOMPUTER
FAKULTAS ILMU KOMPUTER DAN TEKNOLOGI INFORMASI
UNIVERSITAS SUMATERA UTARA
MEDAN
2015
(2)
IMPLEMENTASI METODE STRAIGHT AHEAD AND POSE TO POSE DALAM PEMBUATAN KARTUN 2D
“GLOBAL WARMING”
SKRIPSI
Diajukan untuk melengkapi tugas akhir dan memenuhi syarat memperoleh ijazah Sarjana Ilmu Komputer
NOVALINA 111421020
PROGRAM STUDIS1 ILMU KOMPUTER
FAKULTAS ILMU KOMPUTER DAN TEKNOLOGI INFORMASI UNIVERSITAS SUMATERA UTARA
MEDAN 2015
(3)
Judul : IMPLEMENTASI METODE STRAIGHT AHEAD AND POSE TO POSE DALAM PEMBUATAN
KARTUN 2D “GLOBAL WARMING”
Kategori : SKRIPSI
Nama : NOVALINA
Nomor Induk Mahasiswa : 111421020
Program Studi : EKSTENSI S1 ILMU KOMPUTER Departemen : ILMU KOMPUTER
Fakultas : ILMU KOMPUTER DAN TEKNOLOGI INFORMASI UNIVERSITAS SUMATERA UTARA
Diluluskan di Medan, Komisi Pembimbing :
Pembimbing 2 Pembimbing 1
Maya Silvi Lydia, B.Sc, M.Sc Drs. Agus Salim Harahap, M.Si NIP.197401272002122001 NIP.195408281981031004
Diketahui/Disetujui oleh
Program Studi S1 Ilmu Komputer Ketua,
Dr. Poltak Sihombing, M.Kom NIP.196203171991031001
(4)
PERNYATAAN
IMPLEMENTASI METODE STRAIGHT AHEAD AND POSE TO POSE DALAM PEMBUATAN KARTUN 2D “GLOBAL WARMING”
SKRIPSI
Saya menyatakan bahwa skripsi ini adalah hasil karya saya sendiri, kecuali beberapa kutipan dan ringkasan yang masing-masing telah disebutkan sumbernya.
Medan, Agustus 2015
Novalina 111421020
(5)
penulis dapat menyelesaikan penyusunan skripsi ini, sebagai syarat untuk memperoleh gelar Sarjana Komputer, pada Program Studi S1 Ilmu Komputer Fakultas Ilmu Komputer dan Teknologi Informasi Universitas Sumatera Utara.
Ucapan terima kasih penulis sampaikan kepada:
1. Bapak Prof. Dr. Muhammad Zarlis selaku Dekan Fakultas Ilmu Komputer dan Teknologi Informasi Universitas Sumatera Utara.
2. Bapak Drs. Agus Salim Harahap, M.Si selaku Dosen Pembimbing I yang telah banyak memberikan bimbingan, saran dan masukan kepada penulis dalam pengerjaan skripsi ini.
3. Ibu Maya Silvi Lydia, B.Sc, M.Sc selaku Dosen Pembimbing II sekaligus Sekretaris Program Studi S1 Ilmu Komputer yang telah memberikan bimbingan, saran dan masukan kepada penulis dalam pengerjaan skripsi ini.
4. Bapak Dr. Poltak Sihombing, M.Kom selaku Dosen Pembanding I sekaligus Ketua Program Studi S1 Ilmu Komputer Universitas Sumatera Utara yang telah memberikan kritik dan saran dalam penyempurnaan skripsi ini.
5. Bapak Syahriol Sitorus, S.Si, M.IT selaku Dosen Pembanding II yang telah memberikan kritik dan saran dalam penyempurnaan skripsi ini.
6. Pembantu Dekan Fakultas Ilmu Komputer dan Teknologi Informasi Universitas Sumatera Utara, seluruh tenaga pengajar dan pegawai di Program Studi S1Ilmu Komputer Fasilkom-TIUSU.
7. Ayahanda Buyung Putih dan Ibunda Raima Melati, Serta Abangda Usriadi, kakanda Suriani dan kakanda Meri Susanti yang selalu memberikan kasih sayang dan dukungannya kepada penulis.
8. Rekan-rekan kuliah, khususnya Saldinata Bobby Ardani, dan teman-teman terbaik, Rizky Novriandri, M. Rizki Nugraha, Fanny Hermina Udrayanti, Rafikah Amelia Nasution, Dhea Fithaloka, Al Zimy Siregar serta angkatan 2011 yang tidak dapat disebutkan satu persatu yang selalu memberikan semangat dan dorongan kepada penulis selama menyelesaikan skripsi ini.
(6)
Semoga Allah SWT senantiasa melimpahkan berkah kepada semua pihak yang telah memberikan bantuan, perhatian, serta dukungan kepada penulis dalam menyelesaikan skripsi ini. Akhir kata, semoga skripsi ini bermanfaat bagi pribadi, keluarga, masyarakat, organisasi dan negara.
Medan, Agustus 2015 Penulis
(7)
Penelitian ini bertujuan untuk merancang sebuah kartun animasi 2D. Sistem aplikasi ini dirancang menggunakan bahasa pemrograman Java dengan menampilkan gambar
sequence (berurutan) untuk animasi berformat JPG dan berformat GIF. Dalam hal ini, untuk membuat kartun animasi 2D tersebut digunakan metode straight ahead and pose to pose dalam menghasilkan sebuah animasi dimana gambar kartun 2D tersebut akan diletakkan dalam penggambaran straight ahead yang bersifat spontan dimulai dari gambar awal hingga selesai. Sedangkan daalam penggambaran Pose to Pose
pembuatan animasi yang lebih terencana dari suatu Pose ke Pose lainnya. Kartun animasi yang dirancang hanya sebatas mengenai informasi global warming, dan pencegahan global warming.
(8)
IMPELEMENTATION OF STRAIGHT AHEAD AND POSE TO POSE METHOD OF 2D MAKING CARTOON
“GLOBAL WARMING” ABSTRACT
This research is to design a animation 2D. The application system to using Java programming language to display a sequence image for animation in JPG and GIF format. In this case, the 2D cartoon is making used methods Straight Ahead and Pose to Pose in producing a cartoon image which the image will be placed in a straight ahead depiction spontan is beginning of the picture start to finish. While the depiction Pose to Pose making animation more planned than a Pose to Pose other. The results from Pose to Pose method softer and easier to edit if there is not improvement without having to change the picture again. Animated cartoon designed only limited information about global warming and global warming prevention.
(9)
Halaman
Persetujuan ii
Pernyataan iii
Penghargaan iv
Abstrak vi
Abstract vii
Daftar Isi xiii
Daftar Tabel x
Daftar Gambar xi
Daftar Lampiran xii
Bab 1 Pendahuluan
1.1 Latar Belakang 1
1.2 Rumusan Masalah 2
1.3 Ruang Ringkup Penelitian 2
1.4 Tujuan Penelitian 3
1.5 Manfaat Penelitian 3
1.6 Metodologi Penelitian 3
1.7 Sistematika Penulisan 4
Bab2 Landasan Teori
2.1 Animasi 6
2.1.1 Jenis Animasi 7
2.2 Pemanasan Global 8
2.3 Interaksi Manusia dan Komputer 8
2.4 Metode Straight Ahead and Pose To Pose 10 2.4.1 Kelebihan dan Kekurangan Straight Ahead and Pose to Pose 11 2.5 Manfaat Media Animasi mengenai Global Warming 11
2.6 Penelitian Terkait 12
Bab 3 Analisis dan Perancangan Sistem
3.1 Analisis Sistem 14
3.1.1Metodologi Pengembangan Sistem 14
3.2 Konsep Dasar 18
3.2.1 Pemodelan Sistem 18
3.3 Perancangan Sistem 18
3.3.1 Perancangan Sistem 18
3.3.2 Perancangan Storyboard 22
3.4 Perancangan Animasi melalui Pemrograman Java 25
3.4.1 Desain Animasi pada Java 25
3.4.2 Desain Pola Gambar Metode Straight Ahead 26 3.4.3 Desain Pola Gambar Metode Pose to Pose 28
(10)
3.6 Penyatuan Gambar Berformat JPG Menjadi Format GIF 33 Bab 4 Implementasi
4.1 Desain Implementasi Program 34
4.2 Analisa Implementasi 38
Bab 5 Kesimpulan dan Saran
5.1 Kesimpulan 43
5.2 Saran 43
(11)
Halaman
3.1 Tabel Material Collecting 16
3.2 Tabel Model Animasi Kartun 18
(12)
DAFTAR GAMBAR
Halaman
3.1 Desain Scene 15
3.2 Assembly 17
3.3 Flowchart Animasi Java dengan Gambar JPG 19 3.4 Flowchart Animasi Java dengan File GIF 21
3.5 Pergerakan Mobil 26
3.6 Pergerakan Asap 27
3.7 Sinar UV Matahari 28
3.8 Pergerakan Kemacetan Mobil 29
3.9 Pergerakan Awan 29
3.10 Penggabungan Object menjadi Gambar Sequence 33 3.11 Hasil Gambar JPG yang digabungkan menjadi GIF 33 4.1 Gambar Pergerakan Mulut dengan Metode Straight Ahead 34 4.2 Gambar Pergerakan Sayap dengan Metode Pose To Pose 35 4.3 Gambar Animasi Berformat JPG disimpan dalam Satu Project 36 4.4 Gambar Animasi ditampilkan secara berurutan dalam Java 38 4.5 Tampilan Heap Memory dalam Pemrograman Java 39 4.6 Tampilan Gambar setelah disatukan menjadi File GIF 40 4.7 Tampilan Animasi dalam Java dengan Suara Narrator 42
(13)
Halaman
A. Listing Program A-1
(14)
ABSTRAK
Penelitian ini bertujuan untuk merancang sebuah kartun animasi 2D. Sistem aplikasi ini dirancang menggunakan bahasa pemrograman Java dengan menampilkan gambar
sequence (berurutan) untuk animasi berformat JPG dan berformat GIF. Dalam hal ini, untuk membuat kartun animasi 2D tersebut digunakan metode straight ahead and pose to pose dalam menghasilkan sebuah animasi dimana gambar kartun 2D tersebut akan diletakkan dalam penggambaran straight ahead yang bersifat spontan dimulai dari gambar awal hingga selesai. Sedangkan daalam penggambaran Pose to Pose
pembuatan animasi yang lebih terencana dari suatu Pose ke Pose lainnya. Kartun animasi yang dirancang hanya sebatas mengenai informasi global warming, dan pencegahan global warming.
(15)
ABSTRACT
This research is to design a animation 2D. The application system to using Java programming language to display a sequence image for animation in JPG and GIF format. In this case, the 2D cartoon is making used methods Straight Ahead and Pose to Pose in producing a cartoon image which the image will be placed in a straight ahead depiction spontan is beginning of the picture start to finish. While the depiction Pose to Pose making animation more planned than a Pose to Pose other. The results from Pose to Pose method softer and easier to edit if there is not improvement without having to change the picture again. Animated cartoon designed only limited information about global warming and global warming prevention.
(16)
PENDAHULUAN
1.1 Latar Belakang
Perkembangan kartun animasi terdapat pada proses pembuatan film kartun animasi, diantaranya adalah secara konvensional dan digital. Film kartun merupakan salah satu dari film animasi yang dibuat dengan menggerakkan gambar baik gambar yang dibuat tangan atau melalui komputer.
Film animasi saat ini sudah semakin banyak macam dan jenisnya, dimulai dari penggunaan dalam penyampaian informasi, komunikasi visual berbasis multimedia dan media penghibur. Film animasi ada 2 jenis yaitu 2D dan 3D. Film animasi penyampaian tentang penyebab pemanasan global ini juga menggunakan animasi 2D, dimana animasi ini dirancang untuk menampilkan alur cerita mengenai Global Warming dan menampilkan sebuah kota yang awalnya memiliki lingkungan yang segar, kemudian dilintasi dengan berbagai kendaraan sehingga terjadinya Global Warming.
Kartun adalah suatu gambar interpreatif yang simbolis mengenai sikap orang, situasi, atau kejadian tertentu. Kartun sering digunakan untuk menyampaikan pesan secara cepat dan ringkas kepada masyarakat, sebab kartun mempunyai kemampuan yang sangat besar untuk menarik perhatian dan menonjolkan isi pesan serta karakter yang mudah dikenal dan dimengerti, bukan pada detailnya. Sedangkan animasi adalah rangkaian gambar yang disusun secara berurutan. Ketika rangkaian gambar tersebut ditampilkan dengan kecepatan yang memadai, rangkaian gambar tersebut akan terlihat bergerak[4].
(17)
Dalam perannya untuk membantu user mencapai suatu tujuan, komputer dapat menjalankan berbagai macam aplikasi dengan tujuan yang berbeda-beda. Aplikasi yang dijalankan berupa gambar animasi menggunakan Pemrograman Java. Dalam pengoperasian sebuah aplikasi diperlukan sebuah antarmuka (interface).
Dari uraian di atas, maka penulis tertarik untuk menyusun skripsi dengan judul
“Implementasi Metode Straight Ahead and Pose to Pose dalam Pembuatan Kartun 2D “Global Warming”
1.2 Rumusan Masalah
Rumusan masalah pada penelitian ini adalah bagaimana memberikan informasi penyebab pemanasan global atau dalam bentuk media animasi yang interaktif dengan menggunakan metode Straight Ahead and Pose To Pose.
1.3 Ruang Lingkup Penelitian
Adapun ruang lingkup penelitian ini adalah:
1. Metode yang digunakan adalah straight ahead and Pose To Pose.
2. Animasi yang dirancang berbentuk 2D (2Dimensi).
3. Animasi yang dirancang hanya sebatas mengenai global warming, bahaya
global warming.
4. Animasi ditampilkan dalam bahasa pemrograman Java dengan IDE Netbeans versi 6.7.1 dan JDK 7.
(18)
1.4 Tujuan Penelitian
Penelitian ini bertujuan untuk menghasilkan animasi yang memberikan informasi penyebab global warming dan menerapkan metode straight ahead and Pose To Pose
dalam menghasilkan sebuah animasi 2D.
1.5 Manfaat Penelitian
Penelitian ini diharapkan sebagai bahan referensi peneliti lain dalam mengembangkan metode Straight Ahead and Pose To Pose. Sebagai salah satu referensi aplikasi dalam membuat animasi yang menarik dan menjadi salah satu media penyampai informasi mengenai penyebab global warming.
1.6 Metodologi Penelitian
Penelitian ini akan dilaksanakan dengan mengikuti beberapa langkah yang akan digunakan penulis, yaitu:
1. Studi Kepustakaan
Pada tahap ini, dilakukan peninjauan terhadap jurnal, buku, tulisan ilmiah, e-book, maupun hasil penelitian yang membahas tentang Animasi 2D menggunakan metode Straight Ahead and Pose To Pose, serta Bahasa Pemrograman Java dengan IDE Netbeans versi 6.7.1 dan JDK 7.
2. Analisis dan Perancangan Sistem
Tahap ini digunakan untuk mengolah data dari hasil studi kepustakaan kemudian melakukan analisis sehingga menjadi suatu informasi. Proses ini meliputi pembuatan algoritma program, flowchart sistem, rancangan aplikasi, dan pembuatan user interface aplikasi.
(19)
3. Implementasi Sistem
Menerapkan Straight Ahead And Pose To Pose ke dalam aplikasi komputer yang sedang dirancang.
4. Pengujian aplikasi
Menguji apakah aplikasi yang dibuat telah berhasil berjalan sesuai dengan keinginan dan melakukan perbaikan kesalahan jika masih terdapat error pada aplikasi.
5. Dokumentasi
Tahap ini berisi kesimpulan akhir dari hasil analisa dan laporan tentang penelitian yang telah dilakukan.
1.7 Sistematika Penulisan
Sistematika penulisan skripsi ini dibagi dalam lima bab, masing-masing bab diuraikan sebagai berikut :
BAB I PENDAHULUAN
Bab ini berisi latar belakang masalah, rumusan masalah, batasan masalah, tujuan penelitian, manfaat penelitian, metodologi penelitian dan sistematika penulisan skripsi.
BAB II LANDASAN TEORI
Bab ini berisi teori-teori yang berkaitan tentang animasi, pemanasan global, interaksi manusia komputer, Straight Ahead and Pose to Pose.
(20)
BAB III PERANCANGAN SISTEM
Bab ini berisi proses pembuatan algoritma program, UML, flowchart sistem, rancangan aplikasi, dan Storyboard.
BAB IV IMPLEMENTASI
Bab ini berisi ulasan dan pengujian terhadap program yang telah diimplementasikan dengan menggunakan bahasa pemrograman Java dengan IDE Netbeans versi 6.7.1 dan JDK 7.
BAB V KESIMPULAN DAN SARAN
Bab ini berisi kesimpulan yang didapat dalam menjalani penelitian dan saran yang berguna dalam usaha untuk melakukan perbaikan dan pengembangan penelitian ini.
(21)
BAB 2
LANDASAN TEORI
2.1 Animasi
Animasi berasal dari kata Yunani yaitu anima yang berarti jiwa, hidup, nyawa, semangat. Animasi juga dapat didefinisikan sebagai proses perubahan bentuk properti objek yang ditampilkan dalam suatu pergerakan tansisi dalam suatu kurun waktu. Sedangkan menurut Tay Vaughan (2004) animasi adalah perubahan visual sepanjang waktu dan memberikan kekuatan besar pada proyek multimedia atau halaman web[2].
Animasi kartun merupakan salah satu dari hasil teknologi multimedia yang paling rumit dan butuh ketekunan animator dalam pengerjaannya. Karena pada awalnya animasi kartun dibuat dengan cara manual yaitu dengan menggunakan kertas sebagai media gambar. Apabila sejumlah kertas yang sudah terdapat gambar dengan sedikit perbedaan, disusun sedemikian rupa sehingga gambar akan terlihat bergerak. Namun dengan berkembang pesatnya teknologi, animasi dapat dikerjakan dengan lebih cepat dan mudah. Dalam pembuatan animasi kartun harus melalui tahap pra produksi, produksi dan pasca produksi. Serta dibutuhkan kesabaran dan teknik-teknik tertentu yang dapat memudahkan animator dalam mengerjakannya dan juga keterampilan animator sangat dibutuhkan sebab dia harus dapat menciptakan ilusi gerakan dari berbagai sudut pengambilan gambar.
Animasi kartun bisa diterapkan didalam banyak kasus yang berbeda, walaupun begitu beberapa point penting dalam membuat animasi kartun adalah sebagai berikut:
a. Menentukan Ide b. Merancang Konsep c. Menentukan Tema d. Membuat Logline
(22)
e. Sinopsis dan Script
f. Membuat Diagram Scene
g. Pengembangan Karakter h. Menyusun Standar Karakter i. Merancang Warna Tokoh Karakter
j. Membuat Desain Standar Properti dan Vegetasi k. Membuat Storyboard
2.1.1 Jenis Animasi
Menurut Heri Purnomo (2011) Animasi yang dulunya mempunyai prinsip yang sederhana, sekarang telah berkembang menjadi beberapa jenis, yaitu[2]:
1. Animasi 2D
Animasi ini yang paling akrab dengan keseharian kita. Biasa juga disebut dengan film kartun. Contohnya banyak sekali, baik yang dari TV maupun di bioskop, misalnya Looney Tones, Tom and Jerry, Lion King, dan banyak lagi.
2. Animasi 3D
Perkembangan teknologi dan komputer membuat teknik pembuatan animasi 3D semakin berkembang dan maju pesat. Animasi 3D adalah pengembangan dari animasi 2D dengan animasi 3D, karakter yang diperlihatkan semakin hidup dan nyata, mendekati wujud manusia aslinya.
3. Animasi Tanah Liat
Film animasi jenis ini paling jarang dibuat. Animasi ini menggunakan plasticin, bahan lentur seperti permen karet yang ditemukan pada tahun 1897. Tokoh-tokoh dalam animasi Clay dibuat memakai rangka khusus untuk kerangka tubuhnya, lalu kerangka tersebut ditutupi dengan plasticin sesuai dengan tokoh yang ingin dibuat.
(23)
4. Animasi Jepang (Anime)
Film-film yang dibahas diatas adalah kebanyakan buatan Amerika dan Eropa. Namun, Jepang pun tak kalah soal animasi. Jepang sudah banyak memproduksi
anime (sebutan film animasi buatan Jepang).
2.2 Pemanasan Global
Pemanasan global bukanlah hal yang biasa dan bisa dibiarkan dan untuk itu perlu dilakukan sebuah informasi mengenai bahaya pemanasan global dalam bentuk media yang interaktif dan menarik sehingga maksud dan tujuan dari media yang dirancang dipahami oleh masyarakat yang menggunakannya. Ada banyak penyebab pemanasan Global yaitu pencemaran udara, efek rumah kaca, aktivitas penebangan pohon, penguapan air dan lain – lain.
Pencemaran udara adalah kehadiran satu atau lebih substansi fisik, kimia, atau biologi di atmosfer dalam jumlah yang dapat membahayakan kesehatan manusia, hewan, dan tumbuhan, mengganggu estetika dan kenyamanan, atau merusak properti. Sumber pencemaran adalah setiap usaha atau kegiatan yang mengeluarkan bahan pencemar ke udara yang menyebabkan udara tidak berfungsi sebagaimana mestinya. Disini penulis mengambil judul membuat animasi 2D, dimana animasi tersebut akan menjelaskan tentang penyebab terjadinya pencemaran udara[7].
2.3 Interaksi Manusia dan Komputer
Bidang ilmu interaksi manusia dan komputer adalah ilmu yang mempelajari tentang bagaimana mendesain, mengevaluasi, dan mengimplementasikan sistem komputer yang interaktif sehingga dapat digunakan oleh manusia dengan mudah. Menurut Hestiningsih (2008) pengertian Interaksi adalah komunikasi 2 arah antara manusia (user) dan sistem komputer. Interaksi menjadi maksimal apabila kedua belah pihak mampu memberikan stimulan dan respon (aksi & reaksi) yang saling mendukung, jika salah satu tidak bisa, maka interaksi akan mengalami hambatan atau bahkan menuju
(24)
pembiasan tujuan. Interaksi manusia komputer didefinisikan sebagai sebuah hubungan antara manusia dan komputer yang mempunyai karakteristik tertentu untuk mencapai suatu tujuan tertentu dengan menjalankan sebuah sistem melalui sebuah antarmuka (interface).
Jadi dapat dikatakan interaksi manusia dan komputer adalah sebuah hubungan antara manusia dan komputer yang mempunyai karakteristik tertentu untuk mencapai suatu tujuan tertentu dengan menjalankan sebuah sistem yang bertopengkan sebuah antarmuka (interface). Prinsip kerja interaksi manusia dan komputer adalah komputer diberikan data yang umumnya berupa deretan angka dan huruf. Kemudian diolah didalam komputer yang menjadi keluaran sesuai dengan kebutuhan dan keinginan manusia[8].
Interaksi bisa dikatakan dialog antara user dengan komputer. Model atau jenis interaksi antara lain :
1. Command line interface (perintah baris tunggal) Contoh: unix, linux, dos.
2. Menu (menu datar atau menu tarik)
Contoh: hampir semua software menggunakan menu. 3. Natural language (bahasa alami)
Contoh: bahasa pemrograman terstruktur (belum objek). 4. Question/answer and query dialogue
Contoh: mysql, dbase interaktif, dll. 5. Form-fills and spreadsheets
Contoh: excel, lotus, dll. 6. WIMP
Contoh: Windows Icon Menu Pointer: button, dialogue boxes, pallettes, dll. Windows Icon Mouse Pulldown Menu.
(25)
Dalam perannya untuk membantu user mencapai suatu tujuan, komputer dapat menjalankan berbagai macam aplikasi dengan tujuan yang berbeda-beda. Aplikasi yang dijalankan berupa kartun 2 dimensi. Dalam pengoperasian sebuah aplikasi diperlukan sebuah antarmuka (interface). Interface yang menjadi jembatan yang dapat menghubungkan user dengan sistem yang dijalankannya. Pengguna selalu mengharapkan layanan, fasilitas dan informasi yang ditampilkan melalui konten informasi yang dapat digunakan dengan mudah oleh user.
2.4 Metode Straight Ahead and Pose To Pose
Straight Ahead and Pose to Pose merupakan metode yang digunakan untuk menggambarkan pergerakan suatu objek dalam animasi, pergerakan suatu animasi sangat penting sehingga karakter atau model yang digambarkan lebih nyata seperti pergerakan pada makhluk hidup, Straight Ahead and Pose to Pose dapat dilakukan dihampir seluruh objek atau model animasi yang dibuat tetapi tidak semua animator bisa menerapkan teknik ini dikarenakan teknik ini sangat susah dan detail dalam mengimplementasikannya.
Straight Ahead and Pose to Pose merupakan metode atau teknik untuk menampilkan gambar animasi yang bersifat sequence (berurutan). Straight Ahead and Pose to Pose bisa dikatakan metode dasar bagi animator atau programmer yang ingin menampilkan animasi. Straight Ahead and Pose to Pose merupakan metode yang digunakan untuk menggambarkan pergerakan suatu objek dalam animasi sehingga karakter atau model yang digambarkan terlebih lebih nyata seperti pergerakan pada makhluk hidup.
Para animator menggunakan 2 pendekatan umum yang biasanya mereka pakai dalam menganimasikan, yaitu Straight Ahead dan Pose to Pose. Straight Ahead and Pose to Pose adalah gerak berdasarkan urutan dalam timing yang bersifat kesinambungan. Straight ahead adalah metode dengan menggambar secara berurutan, dari gambar pertama, kedua, ketiga, dan seterusnya. Straight Ahead Action membuat
(26)
animasi dengan animator menggambarkan satu persatu gambar, frame by frame, dari awal sampai selesai seorang diri. Dalam Pose to Pose, segala pergerakan sudah diplanning terlebih dahulu. Jadi, animator telah menyiapkan gerakan-gerakan utamanya (key pose), kemudian setelahsemuanya oke, dia baru melanjutkan dengan detail gerakan diantara (in-between) masing-masing key pose itu.
2.4.1 Kelebihan dan Kekurangan Metode Straight Ahead and Pose to Pose
Metode Straight Ahead memiliki kekurangan yakni pengerjaan dalam waktu yang lama. Selain itu, jika salah satu bagian bergeser, gambar tercoret dan rusak akan sangat sulit untuk kembali ke bentuk awal dan memperbaikinya. Untuk mempercepat proses pengerjaan, metode Pose to Pose memiliki kelebihan karena menggunakan konsep key dimana gambar dapat dikerjakan oleh orang lain. Kelebihan dari metode ini yakni kualitas gambar yang konsisten karena dikerjakan oleh satu orang saja.
2.5 Manfaat Media Animasi mengenai Global Warming
Media Animasi dalam pembelajaran mampu menyampaikan sesuatu konsep yang kompleks secara visual dan dinamik. Media Animasi digital mampu menarik perhatian pelajar dengan mudah. Animasi mampu menyampaikan suatu pesan dengan lebih baik dibanding penggunaan media yang lain. Animasi digital juga dapat digunakan untuk membantu menyediakan pembelajaran secara maya.
Media Animasi dalam pembelajaran mampu menawarkan satu media yang lebih menyenangkan. Animasi mampu menarik perhatian, meningkatkan motivasi serta merangsang pemikiran pelajar yang lebih berkesan. Persembahan secara visual dan dinamik yang disediakan oleh teknologi animasi mampu memudahkan dalam proses penerapan konsep ataupun demonstrasi.
(27)
2.6 Penelitian Terkait
1. Penelitian Puspasani yang berjudul Pembuatan Film Kartun 2D “Runo, The
Green Caterpillar” Menggunakan Teknik Straight Ahead And Pose To Pose. Film Runo, the Green Caterpillar juga menggunakan animasi 2D, dimana sang karakter utama memiliki ciri-ciri unik dibagian tubuhnya. Runo memiliki satu helai rambut di kepala, tetapi pada umumnya ulat sejenis Runo tidak memiliki satu helai pun rambut. Film Runo, The Green Caterpillar mengoptimalkan pada gerakan tubuh karakter agar terlihat seperti gerakan ulat pada umumnya. Seperti halnya saat si ulat sedang berjalan, bagian belakang tubuh/ekor si ulat diangkat melengkung dan diluruskan kembali untuk dapat bergerak maju.
“Berdasarkan hasil penerapan metode Straight Ahead And Pose To Pose dalam
pembuatan kartun “Runo, The Green Caterpillar” animasi kartun yang
dirancang memiliki interval animasi yang sesuai dengan kenyataan sebenarnya dan objek digambarkan dengan cukup baik.”[6]
2. Penelitian Yuli Atsari Prastiwi yang berjudul Perancangan Film Kartun 2
Dimensi “Ulah si Copy Paste”, berdasarkan ide dari animasi kartun ini adalah bagaimana seorang siswa yang tidak mengerjakan tugas dan dalam keadaan deadline harus mengumpul tugas dan dalam keadaan terdesak akhirnya harus meng - copy file punya temannya sehingga komputer temannya terkena virus, animasi siswa yang sedang meng - copy file pada komputer dan memperhatikan sekeliling apakah ada siswa lain yang melihat apa yang dilakukannya[5].
3. Penelitian Azwin Rakhman Diny yang berjudul “membuat film animasi 2D
pembelajaran fisika bab listrik statis”, animasi ini bercerita tentang pelajaran
fisika mengenai listrik statis, animasi ini menampilkan bagaimana membuat sebuah listrik statis dari dua buah elemen yang bisa menghasilkan listrik, metode poses to pose diterapkan pada model ketika memutar objek yang bisa menghasilkan listrik statis[1].
4. Penelitian Yulianus Kare Patrisno yang berjudul “Pembuatan film animasi 'benjo' menggunakan metode onion skinning”, berdasarkan ide dari animasi ini
(28)
adalah karakter benjo yang ingin membentuk sebuah grup band, animasi ini menerapkan metode Straight Ahead and Pose To Pose ketika Beji sedang memainkan alat musiknya. Dengan metode “Onion Skinning” dapat
menghasilkan animasi kartun yang memiliki gerakan halus dan berkualitas.
Onion Skinning adalah sebuah teknik dari 2D komputer grafis untuk membuat animasi kartun dengan mengedit movie untuk melihat beberapa frame dalam satu tampilan. Dalam hal ini animator dapat memutuskan untuk membuat atau merubah sebuah gambar berdasarkan gambar sebelumnya[3].
(29)
BAB 3
ANALISIS DAN PERANCANGAN SISTEM
3.1 Analisis Sistem
3.1.1Metodologi Pengembangan Sistem
Metodologi pengembangan sistem adalah tata cara yang menentukan proses apa yang akan digunakan. Metodologi pengembangan sistem ini terdiri dari empat tahap, yaitu: 1. Concept (Pengkonsepan).
2. Design (Pendesainan).
3. Material Collecting (Pengumpulan materi). 4. Assembly (Pembuatan).
Keempat tahap ini tidak harus berurutan dalam prakteknya, tahap-tahap tersebut dapat saling bertukar posisi. Meskipun begitu, tahap concept memang harus menjadi hal yang pertama kali dikerjakan.
1. Concept
Pada animasi kartun yang dirancang akan ditampilkan alur cerita mengenai Global Warming dan menampilkan sebuah kota, yang awalnya masih memiliki lingkungan segar, kemudian dilintasi dengan berbagai kendaraan sehingga terjadinya Global Warming.
(30)
2. Design
Design merupakan gambaran dari scene animasi yang dirancang, scene dari animasi yang dirancang banyak menampilkan background bangunan, dan kendaraan yang lalu lalang. Berikut adalah bentuk scene animasi yang dirancang :
Gambar 3.1 Desain Scene
Tahap ini biasanya menggunakan storyboard untuk menggambarkan deskripsi tiap
scene, dengan mencantumkan semua objek multimedia dan tautan ke scene lain dan bagian alir (flowchart) untuk menggambarkan aliran dari satu scene ke scene lain.
(31)
3. Material Collecting
Animasi yang dirancang tentunya memiliki objek-objek yang membuat animasi semakin hidup dan lengkap, salah satunya adalah kelengkapan material dari animasi yang dirancang, masing-masing scene terdapat skenario yang berbeda dan memerlukan objek yang berbeda, berikut adalah beberapa objeknya :
Tabel 3.1 Material Collecting
No Gambar Keterangan
1 Gambar disamping
merupakan gambar beberapa mobil yang terdapat pada
material collecting.
2 Gambar disamping
merupakan gambar langit, awan dan lapisan ozon.
3 Gambar disamping
merupakan gambar matahari dan asap
(32)
4 Gambar disamping merupakan gambar cahaya sinarUV
Tahap ini dapat dikerjakan secara paralel dengan tahap assembly. Namun, pada beberapa kasus, tahap material collecting dan tahap assembly akan dikerjakan secara linear dan tidak paralel.
4. Assembly
Tahap ini adalah tahap penggabungan objek-objek yang ada sehingga menjadi animasi, penggabungan semua objek seperti mobil, asap, awandan sebagainya, Salah satunya seperti pada gambar berikut ini :
Gambar 3.2 Assembly
Tahap ini biasanya menggunakan perangkat lunak authoring, seperti
(33)
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 :
(34)
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
(35)
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.
(36)
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
(37)
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
berformatGIF.
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 :
(38)
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.
(39)
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.
(40)
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 :
(41)
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.
(42)
\
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.
(43)
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.
(44)
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
(45)
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
Setelah gambar object dan pergerakannya berdasarkan metode, selanjutnya gambar
object tersebut disatukan sehingga menjadi satu file yang berformat JPG. Gambar berformat JPG tercipta sebanyak 980 gambar dengan durasi dubbing 40 detik yang menjelaskan terjadinya global warming. Gambar berformat JPG tersebut diberi nama yang mudah seperti penamaan dengan angka. Gambar yang dihasilkan juga menghasilkan gambar yang bersifat sequence (berurutan). Berikut merupakan hasil gabungan object menjadi satu gambar berformat JPG :
(46)
(47)
(48)
Gambar 3.10 Penggabungan Object Menjadi Gambar Sequence
3.6 Penyatuan Gambar Berformat JPG Menjadi Format GIF
Selanjutnya, gambar JPG yang telah berurutan tersebut dikonversi menjadi satu format GIF. Format gambar GIF yakni format gambar yang menampilkan animasi dengan kualitas yang tidak begitu tinggi. Adapun penggunaan format ini agar animasi dapat diimplementasikan dalam pemrograman Java.
(49)
BAB 4
IMPLEMENTASI
4.1 Design Implementasi Program
Tahap implementasi sistem merupakan lanjutan dari tahap analisis dan perancangan sistem. Sistem ini dibangun menggunakan bahasa pemrograman Java. Proses implementasi sistem yang terjadi di dalam aplikasi yang dirancang jika dicermati, kedua metode ini memiliki perbedaan. Perbedaan tersebut terletak dari teknik pergerakan animasi. Metode Straight Ahead lebih menggambarkan pergerakan yang tidak begitu lembut namun tetap menjadi gambar yang saling berurutan. Contoh dalam implementasi terlihat pada gambar berikut :
Gambar 4.1 Gambar Pergerakan Mulut dengan Metode Straight Ahead
Pada Gambar 4.1 terlihat pergerakan mulut yang digambar secara berurutan namun tidak menjadikan pergerakan animasi menjadi lebih smooth karena tujuannya menyamakan suara dubber dalam animasi tersebut. Teknik Straight Ahead digunakan untuk melakukan pergerakan animasi yang cepat namun masih nyaman dinikmati.
(50)
Berbeda dengan metode Pose to Pose yang menggambarkan objek bergerak secara smooth dan tersusun lebih detail. Gambar 4.2 menunjukkan pergerakan sayap burung yang lembut dari satu frame menuju frame berikutnya.
Gambar 4.2 Gambar Pergerakan Sayap dengan Metode Pose to Pose
Penggunaan metode Straight Ahead and Pose to Pose tidak menutup kemungkinan dapat diimplementasikan dalam pemrograman. Animasi digunakan dalam pemrograman biasanya digunakan sebagai indikator aplikasi yang dijalankan sedang melakukan proses di belakang layar yang meminta user harus menunggu hingga proses selesai. Dalam implementasi ini, digunakan bahasa pemrograman Java.
Banyaknya gambar yang dibutuhkan didasari pada panjangnya narasi yang dibacakan oleh dubber atau narator. Dalam topik penyebab pemanasan global, narasi yang dibacakan oleh dubber atau naratormemiliki waktu selama 40 detik dan gambar yang dibutuhkan untuk menyamakan narasi berjumlah 980 gambar berurutan. Semua gambar tersebut diletakkan dalam satu project agar memudahkan dalam pemanggilan gambar.
1 2 3 4
(51)
Gambar 4.3 Gambar Animasi Berformat JPG disimpan dalam Satu Project
Gambar tersebut disimpan dalam satu variable array dengan banyak index array 980 dan dilakukan perulangan sebanyak gambar yang terdapat dalam project. Potongan source code sebagai berikut :
…
frames = new Image[980]; int i;
int start=0;
for (i = 1; i <= 980; i++) {
if (i < 10) {
String sequence = String.valueOf(i); String images = "0000" + sequence+".jpg"; frames[start] = toolkit.getImage(images);
System.out.println("adding ke"+i+":"+images); }
(52)
{
String sequence = String.valueOf(i); String images = "000" + sequence+".jpg"; frames[start] = toolkit.getImage(images);
System.out.println("adding ke"+i+":"+images); }
else if (i <= 980 && i >= 100) {
String sequence = String.valueOf(i); String images = "00" + sequence+".jpg"; frames[start] = toolkit.getImage(images);
System.out.println("adding ke"+i+":"+images); }
else
{ }
System.out.println("Array ke :"+start); start++;
}
…
Setelah gambar disimpan di dalam array, gambar tersebut ditampilkan dengan jeda waktu selama 1 detik untuk pergantian antar gambar. Gambar ditampilkan dimulai dari array berindex 0 hingga berindex 979. Berikut potongan source code
menampilkan gambar:
…
public void paint(Graphics g) {
g.drawImage(frames[currentFrame], 0, 0, this); System.out.println("eksekusi ke :"+currentFrame); }
public void run() {
do
{
long time = System.currentTimeMillis(); if (time - lastDisplay > frameDelay) { repaint(); try { Thread.sleep(frameDelay); }
catch (InterruptedException ex) {
}
++currentFrame; currentFrame %= numFrames;
(53)
lastDisplay = time; }
} while (true); }
…
Animasi yang ditampilkan dengan menampilkan susunan gambar yang tersimpan dalam array sebagai berikut :
Gambar 4.4 Gambar Animasi ditampilkan Secara Berurutan dalam Java
4.2 Analisa Implementasi
Dengan menggunakan pemrograman Java, gambar animasi yang berurutan akan menjadi masalah dalam pemrograman apabila gambar yang ditampilkan mencapai ratusan gambar atau lebih. Menampilkan animasi dengan ratusan gambar yang
(54)
ditampilkan secara berurutan menyebabkan terjadinya Heap Memory. Heap Memory
merupakan istilah yang digunakan apabila Java Virtual Machine kehabisan space
untuk melakukan compile source code aplikasi dan Heap Memory dalam Java Virtual Machine tidak dapat dieskalasi atau diperbesar. Gambar 4.5 menunjukkan terjadinya
Heap Memory.
Gambar 4.5 Tampilan Heap Memory dalam Pemrograman Java
Apabila dilihat dari output, Heap Memory terjadi pada gambar yang ke 133 dari 980 gambar yang telah tersimpan di dalam array. Disamping itu, animasi yang
ditampilkan tidak mulus atau terlihat seperti ‘patah-patah’.
Sebagai solusi alternatif, Java dapat menampilkan animasi yakni dengan menjadikan seluruh gambar berurutan menjadi satu file animasi berformat GIF. Keseluruhan gambar yang berjumlah 980 gambar disatukan sehingga menjadi satu format GIF seperti pada Gambar 4.6
(55)
Gambar 4.6 Tampilan Gambar Setelah disatukan Menjadi File GIF
Dalam hal ini, pembuatan GIF dilakukan dengan menggunakan aplikasi Adobe Flash Creative Suite 5. Hasil penyatuan gambar melalui Adobe Flash yakni warna pada animasi dengan format GIF yang dihasilkan tidak secerah pada gambar sebelum penggabungan.
Dalam pemrograman Java, file GIF diimport bersama dengan filesource code
dalam package project. Untuk dapat menampilkan animasi, dibutuhkan area yang biasa dinamakan JFrame. Berikut merupakan potongan source code program untuk membentuk area animasi.
…
setDefaultCloseOperation(EXIT_ON_CLOSE); contentPanel = (JPanel) getContentPane(); contentPanel.setLayout(new BorderLayout()); setSize(new Dimension(800, 600));
setTitle("animasi pada java");
…
Selanjutnya, memanggil file narrator berekstensi WAV dengan potongan
(56)
…
File soundFile = new File("dubber.wav"); AudioInputStream audioIn =
AudioSystem.getAudioInputStream(soundFile); Clip clip = AudioSystem.getClip();
clip.open(audioIn); clip.start();
…
Kemudian, memanggil file animasi berekstensi GIF. Berikut potongan source code memanggil file GIF:
…
ImageIcon ii = new ImageIcon(this.getClass().getResource("-.gif")); imageLabel.setIcon(ii);
contentPanel.add(imageLabel, java.awt.BorderLayout.CENTER); this.setLocationRelativeTo(null);
this.setVisible(true);
…
Setelah file WAV dan GIF dipanggil, selanjutnya membuat object dari class
itu sendiri agar animasi dapat dijalankan. Object diletakkan dalam main seperti potongan source code berikut.
…
public static void main(String[] args) {
// TODO code application logic here
GlobalWarming_GIFVer globalWarming_GIFVer = new GlobalWarming_GIFVer();
}
(57)
Gambar 4.7 Tampilan Animasi dalam Java dengan Suara Narrator
Jika project dijalankan, maka akan tampil seperti pada Gambar 4.7 Animasi berjalan mulus dan dilengkapi dengan narator yang menjelaskan tentang animasi.
(58)
BAB 5
KESIMPULAN DAN SARAN
5.1 Kesimpulan
Berdasarkan hasil studi literatur, analisis, perancangan, implementasi dan pengujian sistem ini, maka didapat kesimpulan sebagai berikut:
1. Rancangan animasi dirancang menggunakan bahasa pemrograman Java sehingga memungkinkan sebuah program untuk menampilkan dengan cara melakukan import file animasi lainnya seperti GIF.
2. Dengan mengimplementasikan di dalam sebuah aplikasi, diharapkan memberikan kemudahan untuk seluruh pengguna yang ingin melihat animasi tanpa harus menyediakan software khusus untuk memainkan animasi.
5.2 Saran
Adapun saran-saran yang dapat penulis berikan untuk pengembangan dan perbaikan sistem ini adalah sebagai berikut:
1. Diharapkan untuk dapat memperhalus, mendukung semua media animasi dan melengkapi GUI (graphical user interface) aplikasi.
2. Diharapkan dapat ditambah seperti interaksi berupa kuis untuk materi animasi yang ditayangkan dalam sebuah aplikasi sehingga tidak hanya dinikmati dengan cara dilihat tapi dapat menstimulasi pemahaman pengguna berdasarkan usia.
(59)
Diny, Rakhman, Azwin. 2011. “Membuat Fim Animasi 2D Pembelajaran Fisika
Bab Listrik Statis”. Yogyakarta: Amikom.
[2] Patmore, Chris. 2003. The Complete Animation Course. United Kingdom: Thames And Hudson.
[3] Patrisno, Kare, Yulianus. 2011. Pembuatan Film animasi “Benjo” Menggunakan
Metode Onion Skinning”. Yogyakarta: Amikom.
[4] Peaty, Kevin Dan Glenn Kirkpatrick. 2002. Flash Cartoon Animation. UK: Friends of ED.
[5] Pratiwi, Atsari, Yuli. 2011. Perancangan Film Kartun 2 Dimensi “Ulah si Copy Pate”. Yogyakarta: Amikom.
[6] Puspasani, 2013. Pembuatan Film Kartun 2D “Runo, The Green Caterpillar”
Menggunakan Teknik Straight Ahead and Pose to Pose”. Yogyakarta: Amikom.
[7] Swardhana, Arya, Wisnu. 2004. Dampak Pencemaran Lingkungan. Yogyakarta: ANDI.
[8]
(60)
LISTING PROGRAM
Program animasi Frame by Frame dalam bahasa pemrograman Java
import java.awt.*;
import java.awt.event.*;
public class Animasi_Pose_To_Pose extends Frame implements Runnable
{
Thread animation; int frameDelay = 100; Image frames[];
int numFrames;
int currentFrame = 0; long lastDisplay = 0; int screenWidth = 400; int screenHeight = 400;
public static void main(String args[]) {
Animasi_Pose_To_Pose app = new Animasi_Pose_To_Pose(); }
public Animasi_Pose_To_Pose() {
super("Animasi Pose To Pose"); setup();
setSize(screenWidth, screenHeight);
addWindowListener(new WindowEventHandler()); show();
animation = new Thread(this); animation.start();
}
void setup() {
setupMenuBar();
setFont(new Font("default", Font.BOLD, 18)); Toolkit toolkit = getToolkit();
frames = new Image[9]; // objek yang akan ditampilkan
frames[0] = toolkit.getImage("1.gif"); frames[1] = toolkit.getImage("2.gif");
(61)
frames[6] = toolkit.getImage("7.gif"); frames[7] = toolkit.getImage("8.gif"); frames[8] = toolkit.getImage("9.gif"); numFrames = frames.length;
}
void setupMenuBar() {
MenuBar menuBar = new MenuBar(); Menu fileMenu = new Menu("File");
MenuItem fileExit = new MenuItem("Exit");
fileExit.addActionListener(new MenuItemHandler()); fileMenu.add(fileExit);
menuBar.add(fileMenu); setMenuBar(menuBar); }
public void paint(Graphics g) {
g.drawImage(frames[currentFrame], 125, 80, this); }
public void run() {
// Perulangan animasi do
{
long time = System.currentTimeMillis(); if (time - lastDisplay > frameDelay) { repaint(); try { Thread.sleep(frameDelay); }
catch (InterruptedException ex) {
}
++currentFrame;
currentFrame %= numFrames; lastDisplay = time;
} }
while (true); }
(62)
class MenuItemHandler implements ActionListener, ItemListener
{
public void actionPerformed(ActionEvent ev) {
String s = ev.getActionCommand(); if (s == "Exit")
{
System.exit(0); }
}
public void itemStateChanged(ItemEvent e) {
} }
//Kelas yang digunakan agar tombol close pada frame bisa berfungsi
class WindowEventHandler extends WindowAdapter {
public void windowClosing(WindowEvent e) {
System.exit(0); }
} }
(63)
* To change this template, choose Tools | Templates * and open the template in the editor.
*/
package globalwarming_gifver; /**
*
* @author Windows */
//import for images and swing layout import java.awt.BorderLayout; import java.awt.Dimension; import java.io.File; import java.io.IOException; import javax.sound.sampled.*; import javax.swing.ImageIcon; import javax.swing.JFrame; import javax.swing.JLabel; import javax.swing.JPanel;
public class GlobalWarming_GIFVer extends JFrame {
JPanel contentPanel;
JLabel imageLabel = new JLabel(); //JLabel headerLabel = new JLabel(); /**
* @param args the command line arguments */ public GlobalWarming_GIFVer() { try { setDefaultCloseOperation(EXIT_ON_CLOSE); contentPanel = (JPanel) getContentPane(); contentPanel.setLayout(new BorderLayout()); setSize(new Dimension(800, 600));
setTitle("animasi pada java");
File soundFile = new File("dubber.wav"); AudioInputStream audioIn =
AudioSystem.getAudioInputStream(soundFile); Clip clip = AudioSystem.getClip(); clip.open(audioIn);
(64)
ImageIcon ii = new
ImageIcon(this.getClass().getResource("-.gif")); imageLabel.setIcon(ii);
contentPanel.add(imageLabel, java.awt.BorderLayout.CENTER);
this.setLocationRelativeTo(null); this.setVisible(true); }
catch (UnsupportedAudioFileException | IOException | LineUnavailableException e)
{
e.printStackTrace(); }
}
public static void main(String[] args) {
// TODO code application logic here
GlobalWarming_GIFVer globalWarming_GIFVer = new GlobalWarming_GIFVer();
} }
(65)
Nama : Novalina
Tempat / Tanggal Lahir : Binjai / 12 November 1989 Alamat : Jl. Imam Bonjol Lk. IV
Agama : Islam
Jenis Kelamin : Perempuan
Alamat Email : novalinatandjung@gmail.com
No. Hp : 081370129089
PENDIDIKAN FORMAL
2011-2014 S1 Ekstensi Ilmu Komputer Fasilkom-TI USU, Medan. 2008-2011 D3 Teknik Informatika USU, Medan.
2005-2008 SMA Swasta Taman Siswa Binjai 2002-2005 SMP Negeri 5 Binjai
1996-2002 SD Negeri 024776
SEMINAR, KURSUS
2010 Peserta Seminar Teknologi Informasi “Welcome The Future With Information Technology” Universitas Sumatera Utara 2008 Peserta Seminar Teknologi Informasi “Workshop
Networking Windows Server Work Station” Universitas Sumatera Utara
2009 Peserta Seminar Nasional dengan Tema “SUMUT GO OPEN SOURCE” PRSU – Tapian Daya Medan
KEAHLIAN
Bahasa Indonesia, Inggris
Bahasa Pemrograman C++, VB, PHP, MySQL.
PENGALAMAN ORGANISASI
(1)
LISTING PROGRAM
Program animasi Frame by Frame dalam bahasa pemrograman Java
import java.awt.*;
import java.awt.event.*;
public class Animasi_Pose_To_Pose extends Frame implements Runnable
{
Thread animation; int frameDelay = 100; Image frames[];
int numFrames;
int currentFrame = 0; long lastDisplay = 0; int screenWidth = 400; int screenHeight = 400;
public static void main(String args[]) {
Animasi_Pose_To_Pose app = new Animasi_Pose_To_Pose(); }
public Animasi_Pose_To_Pose() {
super("Animasi Pose To Pose"); setup();
setSize(screenWidth, screenHeight);
addWindowListener(new WindowEventHandler()); show();
animation = new Thread(this); animation.start();
}
void setup() {
setupMenuBar();
setFont(new Font("default", Font.BOLD, 18)); Toolkit toolkit = getToolkit();
frames = new Image[9]; // objek yang akan ditampilkan
(2)
frames[2] = toolkit.getImage("3.gif"); frames[3] = toolkit.getImage("4.gif"); frames[4] = toolkit.getImage("5.gif"); frames[5] = toolkit.getImage("6.gif"); frames[6] = toolkit.getImage("7.gif"); frames[7] = toolkit.getImage("8.gif"); frames[8] = toolkit.getImage("9.gif"); numFrames = frames.length;
}
void setupMenuBar() {
MenuBar menuBar = new MenuBar(); Menu fileMenu = new Menu("File");
MenuItem fileExit = new MenuItem("Exit");
fileExit.addActionListener(new MenuItemHandler()); fileMenu.add(fileExit);
menuBar.add(fileMenu); setMenuBar(menuBar); }
public void paint(Graphics g) {
g.drawImage(frames[currentFrame], 125, 80, this); }
public void run() {
// Perulangan animasi do
{
long time = System.currentTimeMillis(); if (time - lastDisplay > frameDelay) {
repaint(); try
{
Thread.sleep(frameDelay); }
catch (InterruptedException ex) {
}
++currentFrame;
currentFrame %= numFrames; lastDisplay = time;
} }
while (true); }
(3)
class MenuItemHandler implements ActionListener, ItemListener
{
public void actionPerformed(ActionEvent ev) {
String s = ev.getActionCommand(); if (s == "Exit")
{
System.exit(0); }
}
public void itemStateChanged(ItemEvent e) {
} }
//Kelas yang digunakan agar tombol close pada frame bisa berfungsi
class WindowEventHandler extends WindowAdapter {
public void windowClosing(WindowEvent e) {
System.exit(0); }
} }
(4)
Program animasi GIF dalam bahasa pemrograman Java
/*
* To change this template, choose Tools | Templates * and open the template in the editor.
*/
package globalwarming_gifver; /**
*
* @author Windows */
//import for images and swing layout import java.awt.BorderLayout;
import java.awt.Dimension; import java.io.File;
import java.io.IOException; import javax.sound.sampled.*; import javax.swing.ImageIcon; import javax.swing.JFrame; import javax.swing.JLabel; import javax.swing.JPanel;
public class GlobalWarming_GIFVer extends JFrame {
JPanel contentPanel;
JLabel imageLabel = new JLabel(); //JLabel headerLabel = new JLabel(); /**
* @param args the command line arguments */
public GlobalWarming_GIFVer() {
try {
setDefaultCloseOperation(EXIT_ON_CLOSE); contentPanel = (JPanel) getContentPane(); contentPanel.setLayout(new BorderLayout()); setSize(new Dimension(800, 600));
setTitle("animasi pada java");
File soundFile = new File("dubber.wav"); AudioInputStream audioIn =
AudioSystem.getAudioInputStream(soundFile); Clip clip = AudioSystem.getClip(); clip.open(audioIn);
clip.start();
(5)
ImageIcon ii = new
ImageIcon(this.getClass().getResource("-.gif")); imageLabel.setIcon(ii);
contentPanel.add(imageLabel, java.awt.BorderLayout.CENTER);
this.setLocationRelativeTo(null); this.setVisible(true); }
catch (UnsupportedAudioFileException | IOException | LineUnavailableException e)
{
e.printStackTrace(); }
}
public static void main(String[] args) {
// TODO code application logic here
GlobalWarming_GIFVer globalWarming_GIFVer = new GlobalWarming_GIFVer();
} }
(6)