BAB IV KONSEP PERANCANGAN - WordPress.com

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



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



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


-


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



4.1.2. Sketsa Kasar

Gambar 4.4. Tampilan Sketsa Kasar

39



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



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



 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



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



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



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



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



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


-


Tampilan menu ulasan

Gambar 4.13. Menu Ulasan

- Tampilan menu baca

Gambar 4.14. Menu Baca

48


-


Tampilan menu ilustrasi

Gambar 4.15. Menu lustrasi

49


b.


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



 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



52