Bab III
ANALISA DAN PEMBAHASAN
3.1 Persiapan Membuat Animasi Prinsip dalam pembuatan animasi haruslah interaktif dan menarik agar tidak menimbulkan kebosanan. Yang mana nantinya para pengguna aplikasi ini akan senang jika melihatnya karena selain menampilkan informasi tentang sejarah juga menampilkan animasi yang dapat bergerak dan disertai dengan suara yang dapat menarik para siswa Madrasah Tsanawiyah.
3.2 Mempersiapkan Bahan-Bahan Penulis dapat mengambil bahan untuk membuat sebuah animasi ini, seperti gambar-gambar dan keterangan dari berbagai buku yang menjelaskan tentang sejarah Islam, dan situs-situs yang memuat tentang agama Islam.
3.3 Menentukan Navigasi Dalam membuat aplikasi Multimedia, penulis terlebih dahulu merancang suatu tampilan agar tidak menimbulkan kerancuan informasi. Dalam penulisan ini penulis menggunakan struktur navigasi linear. Setelah menentukan struktur navigasi maka dibuatlah peta navigasi. Peta navigasi menunjukan arah dari perjalanan aplikasi dan merupakan struktur penting dalam pembuatan aplikasi multimedia.
24
25
Intro
Home
Informasi
Profil
Soal
Dinasty Abbasiyah
Dinasty Muawiyah
Gambar 3.1. Diagram Struktur Navigasi
3.4 Desain Antar Muka (Design Interface) Dan Story Board Langkah selanjutnya adalah membuat design antarmuka dan story board. Storyboard adalah rancangan umum suatu aplikasi yang disusun secara berurutan layer demi layer serta dilengkapi dengan penjelasan dan spesifikasi dari setiap gambar, layer, dan teks. Ini harus tetap mengikuti rancangan peta navigasi. Storyboard digunakan untuk merancang antarmuka. Antarmuka atau Interface merupakan bagian dari program yang berhubungan atau berinateraksi langsung dengan user. Antarmuka atau Interface adalah segala sesuatu yang muncul pada layer monitor pemakai. Bertujuan, agar program yang dihasilkan tidak terlihat rumit, mudah digunakan dan menarik. Hal ini harus dipikirkan perancang program karena setiap interaksi pemakai terhadap aplikasi, pasti harus melalui suatu antar muka. Storyboard merupakan rancangan kasar dari suatu tampilan layer, atau hanya merupakan gambaran umum saja.
26
3.5 Rancangan Tampilan
Rancangan tampilan muka harus dilakukan pada proses pembuatan aplikasi multimedia. Interface
adalah titik dimana hubungan dibentuk
diantara dua unsur, sehingga mereka dapat bekerja sama. Tujuan dari Design Interface adalah agar aplikasi yang dihasilkan terlihat sederhana, menarik, dan mudah dimengerti.
Judul Halaman Dinasty Umayyah
1
2
3
4
Dinasty Abbasiyah 5
Home
6
7
Profile
8
Soal
Gambar 3.2 Storyboard Halaman Home
Pada storyboard halaman Home menggambarkan bentuk umum pada halaman Home. Pada halaman ini menampilkan tombol Dinasty Umayyah pada kotak Dinasty Umayyah menampilkan informasi tentang awal terbentuknya Dinasty Umayyah, tombol Dinasty Abbasiyah pada kotak Dinasty Abbasiyah menampilkan informasi tentang awal terbentuknya Dinasty Abbasiyah.
27
Pada kotak yang berlabel 1, 2, 3, 4 menampilkan informasi tentang rajaraja yang berkuasa dalam Dinasty Umayyah, yang berisikan
latar belakang
sampai dengan peninggalan-peninggalan. Pada kotak yang berlabel 5, 6, 7, 8 menampilkan informasi tentang raja-raja yang berkuasa dalam Dinasty Abbasiyah, yang berisikan latar belakang sampai dengan peninggalanpeninggalan. Jika tombol home diklik maka tampilan tidak berubah, jika tombol profile diklik maka tampilan menuju ke halaman profile, jika tombol soal diklik maka tampilan menuju ke halaman soal-soal latihan.
Profile
Isi
Home
Profile
Soal
Gambar 3.3 Storyboard Halaman Profile Pada storyboard halaman profile menggambarkan bentuk umum pada halaman profile. Pada halaman ini menampilkan informasi tentang biodata penulis. Jika tombol home diklik maka, tampilan menuju ke halaman home dan suara akan berhenti, jika tombol soal diklik maka, tampilan menuju halaman soalsoal latihan dan suara akan berhenti
28
Soal-Soal Latihan
Isi
Home
Profile
Soal
Gambar 3.4 Storyboard Halaman Soal
Pada storyboard halaman soal menggambarkan bentuk umum pada halaman soal. Pada halaman ini menampilkan soal-soal latihan. Jika tombol home diklik maka, tampilan akan menuju ke halaman home dan suara akan berhenti, jika tombol profile diklik maka, tampilan menuju halaman profile. Jika tombol soal diklik maka, tampilan tidak berubah dan suara akan berhenti.
3.6 Langkah-langkah Pembuatan
29
3.6.1. Teks Berikut ini dijelaskan langkah-langkah pembuatan teks. 1. Pada bagian Toolbox, pilih alat “Text Tool” yang berlambang “A” 2. Kemudian klik sekali pada stage, tarik lingkaran kecil diujung kanan atas kotak pengetikan teks sesuai dengan lebar yang dibuat. 3. Tuliskan teks yang dimaksud. Flash akan mengetikkan teks selebar kotak tersebut dan memuat teks sisa dibaris berikutnya. 4. untuk mengedit ukuran, huruf, warna, dan lainnya dapat digunakan pada panel karakter. Pada menu bar pilih Window > Panel > Character atau menu bar Text > Character
Gambar 3.5 Teks Awal Terbentuknya Dinasty Umayyah
30 3.6.2 Skin Interface Dalam pembuatan bingkai ini macromedia telah menyediakan bingkai dalam Macromedia Flash 8 , untuk memudahkan penulis membuat bingkai (skin interface) , berikut langkah-langkahnya : 1. klik menu Window > Common Libraries > Learning Interactions
Gambar 3.6 Cara Membuat Bingkai (Skin Interface)
2. Setelah tampil jendela Library-Interactions, klik kanan pada Learning Interation lalu klik pilih menu Expand All Folder 3. Drag ke jendela Library pada panel Interface Skin > background (new) dalam jendela Library Interactions 4. Drag ke jendela Library Component Instrction pada panel Intructions dalam jendela Library Interactions . 5. Drag ke stage komponen background (new) dan Component Instruction dari Jendela Library, kemudian untuk mengatur ukuran bingkai, klik Free Transform Tool (Q) pada Tool Box, tariklah lingkaran kecil di keempat sisi bingkai. 6. Untuk mengatur warna bingkai, klik Color pada Properties, pilih Tint
31
Gambar 3.7 Jendela Learning Interactions
32
Gambar 3.8 Skin Intaerface
33
3.6.3. Animasi Animasi dibuat dengan mengubah dan memindahkan suatu objek pada setiap frame. Pembentukan animasi bisa dilakukan terhadap suatu objek atau banyak objek secara bersamaan.
3.6.3.1. Membuat Animasi Loading Langkah yang dilakukan adalah : 1. Klik Text Tool pada layer 1, lalu tuliskan Teks “Loading “, untuk mengedit jenis, ukuran huruf, klik Properties > BankGothic Md BT >54, untuk mengatur warna huruf, klik Properties > Color > Tint 2. Membuat layer baru (layer 2) diatas layer 1. Pada layer 2 Frame 1 klik Rectangle Tool, lalu gambar objek kotak berwarna merah jambu memanjang horizontal dan letakkan dibawah teks “Loading” 3. Kemudian
di layer 2 masukkan Keyframe pada frame 40,
kemudian klik frame 1 untuk kembali ke frame 1. 4.
Klik Free Transform Tool (Q), dan pilih objek kotak berwarna merah jambu, lalu kecilkan ukurannya secara horizontal
5. Pada layer 2, klik frame 1 lalu pilihlah Tween : Shape pada Properties-nya 6. Klik frame 40, lalu klik menu Insert > Timeline > Create Motion Tween 7. Pada layer 2 klik frame 1, lalu buka Actions panel dan berikan Action ifFrameLoaded (“Scene 1”,1){ gotoAndPlay(“Scene 1”,1); }
34
Gambar 3.9 Animasi Loading
3.6.3.2. Membuat Animasi Kaca Pembesar Langkah yang dilakukan adalah : 1. Buka lembar kerja baru, setelah itu klik Text Tool pada Toolbox, lalu ketik teks “Pengenalan Sejarah Budaya Islam”, untuk mengedit jenis, ukuran huruf, klik Properties > Edwardian Script ITC >54. 2. Mengganti nama layer menjadi Teks kecil 3. Klik frame 30 kemudian klik menu Insert >Timeline > Frame 4. Klik objek teks pada layer Teks kecil, kemudian klik menu Edit > Copy 5. Berikutnya tambahkan layer baru, dengan cara klik menu Inser t> Timelin > layer 6. Pada layer baru diberi nama Teks Besar
35
7. Klik kanan pada stage kosong, kemudian pilih menu Paste in Place untuk menampilkan teks “ Pengenalan Sejarah Budaya Islam” pada posisi yang sama dengan objek teks kecil 8. Memberi warna hijau pada objek teks di layer Teks Besar 9. Langkah selanjutnya, klik Free Transform Tool Pada Tool Box, kemudian perbesar ukuran objek teks 10. Berikutnya tambahkan layer baru, Klik menu Insert > Timeline > layer 11. Pada layer baru, lalu diberi nama Bola Masking 12. Pada frame 1 layer Bola Masking, dibuat objek lingkaran menggunakan Oval Tool, dan tempatkan objek lingkaran di luar stage sisi kiri 13. Klik pada frame 15. lalu klik menu Insert > Timeline > Keyframe, dan pindahkan objek lingkaran sisi kanan diluar stage 14. Klik pada frame 30, kemudian klik menu Insert > Timeline > Keyframe, dan pindahkan objek lingkaran sisi kiri diluar stage 15. Tahap selanjutnya, klik layer Bola Masking, setelah itu klik menu Insert > Timeline > Create Motion Tween 16. Selanjutnya klik layer Bola Masking untuk mengaktifkan seluruh fram layer Bola Masking 17. Lalu klik menu Edit > Timeline > Copy Frames 18. Klik layer teks kecil, lalu tambahkan layer baru 19. Mengganti nama layer menjadi Bola 20. Setelah itu klik frame 1 layer bola, lalu klik menu Edit > Timeline > Paste Frames, 21. Terakhir, klik kanan layer Bola Masking, lalu pilih menu Mask
36
Gambar 3.10 Animasi Pembuka
3.6.3.3. Membuat Animasi Kerlip Bintang Langkah yang dilakukan adalah : 1. Membuka lembar kerja baru, dengan latar belakang warna abu-abu 2. Klik menu Insert > New Symbol, setelah itu diberi nama symbol , dan pilih tipe Movie Clip 3. Langkah berikutnya, klik dan tahan Rectangle Tool pada Toolbox, lalu pilih Polystar 4. Menggambar Objek tiga buah bintang dengan warna merah, kuning, hijau 5. Klik tombol CTRL + L untuk menampilkan jendela Library 6. Setelah itu, klik kanan pada symbol Bintang, lalu pilih menu Linkage
37
7. Setelah tampil jendela Linkage Properties, ketik nama bintang_id, diberi tanda centang pada opsi Export for ActionScript dan Export in First Frame, setelah selesai klik OK 8. Klik frame 1 pada layer 1, kemudian tekan tombol F9 untuk menampilkan jendela Actions, setelah itu Ketik script dibawah ini : function bintangkedip(){ n=random(20); s=”bintang”+String(n); _root.attachMovie(“bintang_id”,s,n); _root[s]._x=random(640); _root[s]._y=random(640); nScale=random(10); _root[s]._xscale=nScale; _root[s]._yScale=nScale; _root[s]._alpha=random(100); } setInterval(bintangkedip,10); 9. Setelah selesai, pada stage akan tampil bidang kosong kecuali huruf a kecil pada frame 1, yang menunjukkan bahwa frame tersebut telah diberi script..
38
Gambar 3.11 Animasi Bintang Berkelip
3.6.4. Suara Aplikasi multimedia tidak akan hidup tanpa dilengkapi dengan efek-efek suara yang menarik. Penggunaan efek suara dalam flash telah disempurnakan hingga dapat mampu mengadaptasi format suara terbaru yaitu mp3, tanpa melupakan format lainnya seperti waf, aif, au, dan mov. Untuk dapat memanfaatkan kemudahan ini terlebih dahuu dilakukan proses import.
39
Gambar 3.12 Efek Suara
3.6.5. Tombol Tombol merupakan hal yang penting dalam aplikasi. Berikut akan dijelaskan bagaimana proses pembuatan tombol itu sendiri dilakukan. Proses pembuatannya adalah sebagai berikut : 1. Buatlah sebuah symbol baru dengan karakteristik sebagai tombol. Pilih menu Insert > New Symbol > Button, lalu diberi nama Dinasty Umayyah 2. Drag salah satu symbol Button ke dalam stage, 3. Impor file suara dengan mengklik menu File > Import 4. Kembalilah ke jendela stage, edit symbol Dinasty Umayyah dengan mengklik ganda tombol Dinasty Umayyah di dalam stage. Setelah
40
5. masuk ke jendela pengeditan symbol Dinasty Umayyah, tambahkan layer baru di dalamnya, dan diberi nama layer Sound. 6. Drag file (Everything I Do) I Do It For You - Bryan Adams.mp3 dari jendela Library ke dalam stage pada frame Over 7. Pada jendela Timeline, di edit panjang frame di layer sound.
Gambar 3.13 Tombol-Tombol
41
3.6.6. Movie Clip Movie clip merupakan wacana dalam macromedia flash 8 yang memungkinkan suatu instance atau objek tertentu terus bergerak secara dinamis tanpa henti hingga kondisi tertentu. Pada dasarnya sebuah movie clip berisi instance-instance yang mungkin juga terdapat sebuah grafik. Instance-instance tersebut juga bisa diberikan efek animasi tertentum namun perbedaaan yang mendasar anatar grafik dan movie clip dapat dijelaskan sebagai berikut: 1. Movie clip memiliki properties sendiri dimana ia dapat diberikan hak untuk memiliki nama sendiri yang dapat dipanggil melalui ActionScript. 2. Dalam suatu aplikasi, movie clip akan terus dimainkan dengan looping tak hingga sampai kondisi tertentu, yaitu diberikan perintah stop () melalui ActionScript. Sedangkan grafik hanya dapat memainkan suatu animasi sepanjang frame yang ada dan dilakukan maksimal sebayak satu kali sajar. Sebagai contoh pembuatan movie clip itu terdapat diatas dalam pembuatan kerlip bintang dan kaca pembesar. Dalam penulisan ini, movie clip banyak digunakan karena memegang peranan yang sangat penting terutama dalam ActionScript.
3.6.7. Masking Masking merupakan suatu efek yang umumnya digunakan untuk menampilkan tampilan dengan tujuan tertentu. Penggunaaan efek masking dalam penulisan ini terutama pada efek teks. Adapun caranya dengan menginsert layer dan letakkan dipaling atas, lalu klik kanan pada layer itu dan pilih mask Dalam gambar dibawah terlihat bahwa sebenarnya masker hanyalah sebuah kotak putih yang terpasang ditengah layer. Namun pada saaat aplikasi dijalankan, kotak tersebut tidak terlihatkan Hal ini dikarenakan oleh sifat kotak tersebut yang berfungsi sebagai masker (penutup) hingga ia tidak terlihat saat aplikasi dijalankan.
42
Gambar 3.14 Masking
3.6.8. Menambahkan Suara Manusia Penambahan suara manusia kedalam program adalah penambahan suara yang dilakukan dengan tujuan suara tersebut dapat membaca isi dari materi pembelajaran sehingga pengguna tidak lagi membaca keterangan-keterangan dari materi pembelajaran, tetapi cukup dengan menekan tombol dari masing-masing materi dan mendengarkannya. Adapun caranya : Pertama dilakukan perekaman terlebih dahulu dengan menggunakan software Free Audio recorder yang dapat di download dari situs www.download.com, kemudian diedit tombol yang akan dimasukan suara dengan mengklik ganda tombol di dalam stage. Setelah masuk ke jendela pengeditan, tambahkan layer baru di dalamnya pada masing-masing tombol, dan diberi nama layer Sound teks.
43
Drag file yang berisi suara manusia dengan foramat suara .Mp3 dari jendela Library ke dalam stage. Pada jendela Timeline, di edit panjang frame di layer sound sehingga hanya frame Down saja yang terpakai.
Gambar 3.15 Sound Teks
3.6.9. Pemrograman Macromedia Flash 8 telah menyempurnakan beberapa fungsinya yang diterapkan dalam ActionScript merupakan sebuah bahasa script yang memiliki peranan yang besar dalam mencipatkan interaktifitas dalam aplikasi. Dengan sintaks yang menyerupai JavaScript, ActionScript akan sangat mudah dipahami bagi perancang yang telah mengerti JavaScript sebelumnya. Contoh pengaplikasinya adalah reaksi aplikasi pada saat suatu tombol ditekan, maka aplikasi akan merespon dengan menampilkan interface baru. Untuk
44
melakukan hal tersebut diperlukan ActionScript yang mengatur segala perubahan yang ada. Penulis akan menguraikan beberapa contoh berikut ini :
1. Script untuk tombol home on (press) { gotoAndStop("home"); } on (press) { stopAllSounds(); } Perintah press berlaku ketika pointer mouse berada diatas area Hit tombol dan mouse sedang ditekan. Setelah klik dilakukan akan memanggil frame yang diberi label “home”, lalu berhenti di frame pada label “home”, karena disini penulis menggunakan perintah gotoAndStop, dan semua suara latar berhenti. Script diatas digunakan juga untuk tombol soal
Gambar 3.16 ActionScript
45
2. Script untuk tombol profile on (press) { gotoAndStop("profile"); } Perintah press berlaku ketika pointer mouse berada di area Hit tombol dan mouse sedang ditekan. Setelah diklik dilakukan akan memanggil frame yang diberi label “profile” , lalu berhenti di frame terakhir pada label “profile”, karena disini penulis menggunakan perintah gotoAndStop 3. Script untuk tombol next on (press) { gotoAndStop("umayyah 2"); } Perintah press berlaku ketika pointer mouse berada di area Hit tombol dan mouse sedang ditekan. Setelah diklik dilakukan akan memanggil frame yang diberi label “umayyah 2” , lalu berhenti di frame terakhir pada label “umayyah 2”, karena disini penulis menggunakan perintah gotoAndStop
4. Script untuk tombol Previous on (press) { gotoAndStop("home"); } Perintah press berlaku ketika pointer mouse berada di area Hit tombol dan mouse sedang ditekan. Setelah diklik dilakukan akan memanggil frame yang diberi label “home” , lalu berhenti di frame terakhir pada label “home”, karena disini penulis menggunakan perintah gotoAndStop
46
3.7 Uji Coba Uji coba dilakukan untuk melihat perkembangan terakhir dari aplikasi yang dibuat. Uji coba juga dilakukan sebagai sarana evaluasi sehingga dapat diketahui letak kekurangan dan kesalahan yang mungkin terdapat didalamnya. Berdasarkan hasil evaluasi yang dilakukan ada beberapa hal yang perlu diperhatikan untuk mendapatkan hasil yang baik. Hal ini yang perlu diperhatikan tersebut ialah mengenai spesifikasi teknisi system yang digunakan dan cara publikasi aplikasi hingga dapat dijalankan dengan format tertentu. Spesifikasi teknisi system yang dimaksud disini adalah perangkat keras dan perangkat lunak yang saling mendukung dan memiliki kemampuan untuk menjalankan aplikasi.
3.7.1. Konfigurasi Sistem Perangkat keras yang digunakan sangat menentukan jalannya aplikasi yang digunakan. Bila perangkat keras yang digunakan kurang memadai, maka hasil yang diperoleh menjadi kurang baik, demikian sebaliknya. Oleh karena itu penulis akan menampilkan konfigurasi minimal system yang dapat digunakan dan konfigurasi yang digunakan oleh penulis sendiri. System yang dipakai penulis :
Hardware : · Prosesor intel Pentium Celeron 2.40 GHz. · Memory DDR 1 GB · Harddisk 40 GB · Monitor SVGA, High Color (32bit) dengan resolusi 1024*768 · Microphone
3.7.2. Software yang digunakan Dalam penulisan ilimiah penulis menggunakan software yang dibuat oleh macromedia yaitu Macromedia flash 8 sebagai software utama yang sudah terkenal dalam pembuatan, pengolahan, penyuntingan gambar dan animasi. Dan
47
dibantu dengan software lain seperti Free Audio Recorder untuk memasukkan suara manusia kedalam komputer dengan format Mp3. 3.8. Persyaratan Menggunakan Macromedia Flash 8 Sebelum menggunakan Macromedia Flash 8 ada baiknya persyaratanpersayaratan untuk menjalankan perangkat lunak ini terpenuhi seperti :
3.8.1. Persyaratan Perangkat Keras (Hardware) · Prosesor Microsoft Windows : Intel Pentium 3 atau 4 Macintosh : Power PC (G3, G4, atau G5) · RAM Microsoft Windows 192 (disarankan 256 MB) Macintosh : 192 (disarankan 256 MB) · Harddisk Microsoft Windows : minimal 146 MB Macintosh : minimal 146 MB · Kartu VGA Microsoft Windows 1024*768 Macintosh 1024 * 768 · Sound Card + Speaker · CD ROM Drive untuk instalasi perangkat lunak
3.8.2. Persyaratan Perangkat Lunak (Software) Perangkat lunak minimum yang diperlukan adalah sebagai berikut : · Perangkat lunak Macromedia Flash 8 Macromedia sebagi pembuatnya mengemas perangkat lunak ini dalam bentuk CD ROM · Sistem Operasi Microsoft Windows : Windows 2000 Service Pack 3 atau Windows Xp Macintosh : Mac Os X 10.2.4, 10.2.5, 10.2.6, 10.2.7
48 · Browser Internet Explorer atau Nestcape navigator
3.9. Mempublikasikan File Flash File animasi flash yang telah dibuat dapat dipublikasikan dalam berbagai format file. Perintah publish dalam flash secara defaultnya membentuk file flash player yang bereksetension swf. Flash menyediakan berbagai macam format yang dapat anda hasilkan dalam publikasi file flash, berikut adalah cara untuk mempublikasikan file flash : 1. Buka menu File > Publish Settings 2. klik tab Format. Tandai kotak Windows Projector (.exe), agar file yang dibuat dapat dijalankan disemua computer 3. Klik Publish untuk menghasilkan format file yang berekstention .exe. Setelah file animasi telah dipublikasikan, maka program dapat dijalankan diberbagai computer dan tampilan outpunya itu terdapat pada lampiran.
Gambar 3.17 Publish
.
