AMIK Wahana Mandiri 2012
Saniya Putri [ 2091310031 ]
[email protected]
BAB IV KONSEP PERANCANGAN
Konsep produksi dimulai dari Preproduction lalu Production dan yang terakhir Postproduction.
Gambar 4.1. Bagan KPM (Konsep Produksi Media) Animasi
4.1.
Preproduction Untuk Preproduction adalah tahapan dimana dimulainya ide, perencanaan dan persiapan dari Konsep Produksi. Ada beberapa langkah Preproduction dalam Konsep Produksi ini, dimulai dari pembentukan ide gagasan, pembuatan sketsa kasar, lalu diikuti dengan pembuatan Storyboard, dan menentukan kerangka isi dari animasi. Semua tahapan yang ada harus sesuai Time Schedule yang ditetapkan seperti yang ada pada bagan ini :
35
AMIK Wahana Mandiri 2012
Saniya Putri [ 2091310031 ]
[email protected]
Tahapan
Juni
Juli
Agustus
September
2012
2012
2012
2012
1 2 3 4 1 2 3 4 1 2 3 4 1 2 3 4
Preproduction
Time Schedule Mencari Referensi Membuat Sketsa Kasar Pembuatan Storyboard Penentuan layout
Production
Persiapan Fasilitas Produksi Konsep Visual Tujuan Visual Proses Kreatif Pengembangan Desain Postproduction
Publikasi CD
Tabel 4.1. Time Schedule
36
AMIK Wahana Mandiri 2012
Saniya Putri [ 2091310031 ]
[email protected]
4.1.1. Ide Gagasan Dalam perancangan animasi pembelajaran ini penulis berusaha membuat sebuah animasi interaktif yang tidak hanya menyampaikan informasi melalui tulisan, namun animasi tersebut dapat memberikan sebuah informasi atas ilustrasi yang dibuat sehingga animasi tersebut tidak terasa membosankan. Hal ini didasari survey yang penulis lakukan terhadap beberapa
animasi
yang
sangan
monoton
dan
terkesan
membosankan. Maka dari itu hal pertama yang penulis lakukan adalah pencarian referensi melalui media internet. Animasi yang menjadi referensi merupakan animasi dari animasi interaktif belajar flash. Referensi tersebut dipilih untuk menjadi acuan dalam menentukan informasi yang akan diberikan. Namun dalam hal perancangan animasi tersebut penulis juga mengacu terhadap referensi lainnya guna mampu memberikan variasi terhadap hasil desain yang akan ditampilkan. Berikut adalah referensi animasi yang penulis gunakan guna menunjang perancangan animasi ini:
37
AMIK Wahana Mandiri 2012
-
Saniya Putri [ 2091310031 ]
[email protected]
http:// indi-smart.com/
Gambar 4.2. Tampilan dari www.indi-smart.com/
-
http://tarbiyahhome.blogspot.com201009tajwid.html
Gambar 4.3. Tampilan dari www. tarbiyahhome.blogspot.com
38
AMIK Wahana Mandiri 2012
Saniya Putri [ 2091310031 ]
[email protected]
4.1.2. Sketsa Kasar
Gambar 4.4. Tampilan Sketsa Kasar
39
AMIK Wahana Mandiri 2012
Saniya Putri [ 2091310031 ]
[email protected]
4.1.3. Story Board
Main Display
850.3 px
JUDUL APLIKASI
tombol tombol
tombol Copyright
Gambar 4.5. Rough layout dari main display
Pada bagian atas terdapat judul aplikasi Pada tampilan awal terdapat 3 tombol menu ( ulasan, baca, ilustrasi ) Dan tombol exit. Copyright
40
596.2 px
tombol
AMIK Wahana Mandiri 2012
Saniya Putri [ 2091310031 ]
[email protected]
tombol
tombol
tombol
PENJELASAN MATERI
Gambar 4.6. Rough layout dari menu ulasan
3 tombol navigasi yang terdiri dari home next dan prev Penjelasan dari materi sesuai dengan judul aplikasi
BACAAN SURAH
tombol
tombol
tombol
Gambar 4.7. Rough layout dari menu baca
41
tombol
AMIK Wahana Mandiri 2012
Saniya Putri [ 2091310031 ]
[email protected]
Isi bacaan dan arti dari surah al ma’un 4 tombol navigasi yang terdiri atas play, stop, next/prev, dan home
tombol
tombol
tombol
Bacaan surah al ma’un 4 tombol navigasi GAMBAR ILUSTRASI
Gambar 4.8. Rough layout dari menu Ilustrasi
3 tombol navigasi yang terdiri dari home, next dam prev Ilustrsi yang berupa gambar beserta keterangannya atau berupa vidio
42
AMIK Wahana Mandiri 2012
Saniya Putri [ 2091310031 ]
[email protected]
4.1.4. Kerangka Animasi a. Main Display Isi dari halaman ini adalah menu utama, yang akan terhubung dengan submenu yang berisi konten pembelajaran. b. Ulasan Isi dari sub menu ini adalah pembahasan mengenai surah al ma’un dan keterangan secara luas mengenai kandungan dari surah al ma’un itu sendiri. c. Baca Isi dari sub menu ini adalah berupa tampilan ayat-ayat dan artinya yang di barengi dengan suara sesuai dengan halaman yang di buka. d. Ilustrasi Isi dari sub menu ini adalah ilustrasi berupa gambaran ataupun vidio yang menerangkan tentang kandungan surah al ma’un.
4.2.
Production 4.2.1. Fasilitas Produksi Dalam merancang desain animasi ini fasilitas utama yang digunakan adalah seperangkat computer dengan spesifikasi sebagai berikut :
43
AMIK Wahana Mandiri 2012
Saniya Putri [ 2091310031 ]
[email protected]
Perangkat Keras Pendukung : Operating System
: Microsoft Windows 7 Ultimate
System Manufacture : TOSHIBA System Model
: Satellite M200
System Type
: X86-based PC
Processor
: Intel(R) Core(TM)2 duo CPU 1.67 GHz
Memory
: 1,50 GB of RAM
Perangkat Lunak Pendukung :
Adobe Flash
Adobe Photoshop
Windows 7 Sound Recorder
Audacity
Total Video Converter
AVI MPEG RM WMV Splitter
4.2.2. Konsep Audio Konsep audio yang digunakan dalam pembuatan aplikasi ini adalah seorang anak perempun yang sedang membaca alquran dan pengertiannya yang nanti suaranya akan ditinggikan dengan program audacity sehingga menghasilkan efek suara seperti chipmunk yang berkesan lucu dan menggemaskan.
44
AMIK Wahana Mandiri 2012
Saniya Putri [ 2091310031 ]
[email protected]
4.2.3. Tujuan Audio Tujuan dari konsep audio yang dibuat adalah untuk memberikan kesan yang lucu dan menarik sehingga siswa didik yang menggunakan aplkasi ini semakin ingin menggunakan dan menyelesaikan aplikasi pembelajaran ini. 4.2.4. Konsep Visual
Konsep visual yang digunakan dalam pembuatan aplikasi ini adalah color full dan kartunis. Maksudnya dalam setiap perancangan layout halaman animasi dikemas sehingga dapat menimbulkan kesan yang menarik dan berwarna. Disertai dengan beberapa effect animasi shingga terlihat tidak monoton. 4.2.5. Tujuan Visual Tujuan dari konsep visual yang dibuat adalah untuk memberikan kesan yang menarik dan tidak membosankan. Segala informasi yang disampaikan harus sesuai dengan tema dan harus searah dengan pembahasan awal.
Oleh karena itu mulai dari
konsep hingga perancangan visual dibuat sebaik mungkin sehingga dapat menimbulkan kesan positif dan memiliki daya tarik bagi yang melihat.
45
AMIK Wahana Mandiri 2012
Saniya Putri [ 2091310031 ]
[email protected]
4.2.6. Proses Kreatif a.
Perancangan Animasi pada Macromedia Flash -
Buat stage berukuran 850.3 x 596.2
Gambar 4.9. New document properties
-
pemilihan warna latar judul
Gambar 4.10. Pemilihan Warna
46
AMIK Wahana Mandiri 2012
Saniya Putri [ 2091310031 ]
[email protected]
Buat lagi shape yg sama namun lebih kecil dan beri gradasi yeng lebih terang, lalu di tumpuk. -
Setelah di tumpuk
Gambar 4.11. Tumpukan shape
-
Tampilan menu utama pada saat pertama kali aplikasi di jalankan
Gambar 4.12. Menu Utama
47
AMIK Wahana Mandiri 2012
-
Saniya Putri [ 2091310031 ]
[email protected]
Tampilan menu ulasan
Gambar 4.13. Menu Ulasan
- Tampilan menu baca
Gambar 4.14. Menu Baca
48
AMIK Wahana Mandiri 2012
-
Saniya Putri [ 2091310031 ]
[email protected]
Tampilan menu ilustrasi
Gambar 4.15. Menu lustrasi
49
AMIK Wahana Mandiri 2012
b.
Saniya Putri [ 2091310031 ]
[email protected]
Action Scrip
Menu utama Tombol Ulasan on (release) { gotoAndStop("1a"); } Tombol Baca on (release) { gotoAndStop("1a"); } Tombol Iustrasi on (release) { gotoAndStop("3a"); } Tombol Exit on(release) { fscommand("quit", true); }
Menu Ulasan Tombol Home on (release) { gotoAndStop("00"); } Tombol Next on (release) { gotoAndStop("1b"); }
50
AMIK Wahana Mandiri 2012
Saniya Putri [ 2091310031 ]
[email protected]
Tombol Prev on (release) { gotoAndStop("1a"); }
Menu Baca Tombol Play on (release) { gotoAndPlay(1); } Tombol Stop on (release) { stopAllSounds(); } Tombol Next on (release) { gotoAndStop("2b"); stopAllSounds(); } Tombol Home on (release) { gotoAndStop("00"); stopAllSounds(); }
51
AMIK Wahana Mandiri 2012
Saniya Putri [ 2091310031 ]
[email protected]
52