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.
25
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.
Intro
Home Informasi Profil
Dinasty Muawiyah
Dinasty Abbasiyah
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.
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.
Judul Halaman
Home Profile Soal
Dinasty Umayyah
Dinasty Abbasiyah
1 2 3 4
27
Pada kotak yang berlabel 1, 2, 3, 4 menampilkan informasi tentang raja-raja 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 peninggalan-peninggalan.
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.
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 soal-soal latihan dan suara akan berhenti
Profile
Isi
Profile Soal
28
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.
Soal-Soal Latihan
Isi
Soal
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
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.
31
32
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
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,
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
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.
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
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 persyaratan-persayaratan 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.
