Bab III.pdf

3.1 Persiapan Membuat Animasi
Bab III
ANALISA DAN PEMBAHASAN
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

Home
Dinasty
Muawiyah
Informasi
Intro
Profil
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.
Soal
Dinasty
Abbasiyah
25

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.
Home
Judul Halaman
Dinasty Umayyah
1 2 3 4
Dinasty Abbasiyah
5 6 7 8
Profile 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.
26

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.
Home
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
27

Soal-Soal Latihan
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.
Isi
Home Profile
Soal
28

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

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
30

Gambar 3.7 Jendela Learning Interactions
31

Gambar 3.8 Skin Intaerface
32

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);
33

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
34

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
35

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
36

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..
37

3.6.4. Suara
Gambar 3.11 Animasi Bintang Berkelip
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.
38

3.6.5. Tombol
Gambar 3.12 Efek Suara
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
39

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
40

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.
41

3.6.8. Menambahkan Suara Manusia
Gambar 3.14 Masking
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.
42

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.
3.6.9. Pemrograman
Gambar 3.15 Sound Teks
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
43

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
44

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
45

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
46

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
47

· 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
48