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

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 Profil Informasi

Dinasty Muawiyah

Dinasty Abbasiyah

Soal

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

5 6 7 8

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 Home

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 Home Profile

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

Gambar 3.17 Publish

.