1buatan profile perguruan diniyyah puteri...

TIMELINE MULTIMEDIA PADA PE1\1BUATAN PROFILE

PERGURUAN DINIYYAH PUTERI PADANG PANJANG

FAIZ FAUZAN EL MUHAMMADY

F AKUL T AS SAINS DAN TEKN«)LOGI

UNIVERSITAS ISLAM NEGERI

SY ARIF HIDA YATULLAI-I

JAKARTA

2006 M/1427 H

TIMELINE MULTIMEDIA PADA PEMBUATAN PROFILE

PERGURUAN DINIYYAH PUTERI PADAN.G PANJANG

OLEH:

FAIZ FAUZAN EL MUHAMMAI>Y

100091020185

Skripsi Sebagai Salah Satu Syarat Untuk Memperoleh Gelar

Sarjana Komputer

Fakultas Sains dan Teknologi Universitas Islam Negeri SyarifHidayatullah Jakarta

FAKULTAS SAINS DAN TEKNOLOGI

UNIVERSIT AS ISLAM NEGER! SY ARlF HIDAY ATULLAH

JAKARTA

2006 M/1427 H

Timeline Multimedia pada Pembuatan Profile

Perguruan Diniyyah Puteri Padang P:anjang

Skripsi

Sebagai salah satu syarat untuk memperoleh gelar

Saijana Komputer

Fakultas Sains dan Teknologi

Universits Islam Negeri Syarif Hidayatullah Jakarta

P 1bimbing I

~~~ Ir. Adil Siregar

Oleh:

Faiz Fauzan El Muhammady

100091020185

Menyetujui

Mengetahui, Ketua Jurusan TI/SI

Pembimbing 2

~I Nurhayati. M. Korn NIP. 150 293 241

r AA.:..-.---'.:::--~ --Ir. Bakri La Katjong, MT, M.Kom

NIP. 470 035 764

JURUSAN TEKNIK INFORMATIKA

FAKULTAS SAINS DAN TEKNOLOGI

UINSYARIFHIDAYATULLAHJAKARTA

-Dengan ini menyatakan bahwa Skripsi yang ditulis oleh:

Nama NIM Program Studi Judul Skripsi

: Faiz Fauzan El Muhammady : 100091020 l 85 : Teknik Informatika : Timeline Multimedia pad a Pembuatan Profile

Perguruan Diniyyah Puteri Padang Panjang

Dapat diterima sebagai syarat kelulusan untuk memperoleh gelar Sarjana Komputer pada Jurusan Teknik Infonnatika, Fakultas Sains dan Teknologi UIN SyarifHidayatullah Jakarta.

mbimbing I,

l<Ab

ah Ja a Putra NIP. 150 317 956

Jakarta, Desember 2006 Menyetujui,

Dosen Pembimbing

Mengetahui,

( Nurhayati, M. Korn NIP. 150 293 241

Ketua J urusan,

M.Sis Ir. Bakri La Katjong. MT, M.Kom NIP. 470 035 764

LEMEAR PENGESAHAN UJIAN

Skripsi ini be1judul TJMELINE MULTIMEDIA PADA PEMBUATAN PROFILE PERGURUAN DINIYYAH PUTERI PADANG PANJANG. Telah diuji dan dinyatakan lulus dalam Sidang Munaqosyah Fakultas Sains dan Teknologi Universitas Islam Negeri Syarif Hidayatullah Jakarta, pada hari Senin, 13 Maret 2006. Skripsi ini telah diterima sebagai salah satu syarat untuk memperoleh gelar Sarjana Strata I (SI) pada Jurusan Teknik Informatika.

Penguji II

Nurhayati, M.Kom NIP. 150 293 241

Dr. Eko Syamsudin Haristo, M.Eng

J akaita, Maret 2006

Penguji Ill

ABSTRAK

Faiz Fauzan El Muhammady, Timeline Mutimedia pada Pembuatan Profile Perguruan Diniyyah Puteri Padang Panjang. (Di bawah bimbingan Ir. Adil Siregar dan Nurhayati, M.Kom).

Perguruan Diniyyah Puteri Padang Panjang merasa agak sedikit kurang dalam mempromosikan dan menjelaskan tentang perguruan. Promosi dengan selembar kertas brosur mempunyai banyak keterbatasan. Baik dari segi ruang tulis, gambar dan lain sebagainya. Multimedia merupakan gabungan antara teknologi dan seni, yang mana kehadirannya tanpa disadari sangat dibutuhkan dalam perkembangan kehidupan manusia. Baik dalam segi hiburan, bisnis, proses ajar-mengajar dan banyak hal lainnya yang ternyata membutuhkan teknologi multimedia.

Untuk itu penulis mencoba memberikan usu! untuk menggunakan teknologi multimedia dan CD (compacl disk) sebagai media penyampaian promosi. Dengan memiliki banyak ruang, bisa menjelaskan lebih banyak tentang Perguruan Diniyyah Puteri Padang Panjang, dan yang tak kalah penting dapat mencerminkan perguruan yang solid, professional, dan elegan. Beranjak dari ide itulah penulis menampilkan judul Timeline Multimedia pada Pembuatan Profile Perguruan Diniyyah Puteri Padang Panjang. Pada skripsi ini penulis membatasi masalah pada pengolahan timeline. Karena timeline salah satu ha! terpenting bahkan bisa dikatakan inti dari proses pergerakan animasi yang menghasilkan suatu aplikasi multimedia. Karena banyaknya timeline, penulis hanya akan menjabarkan timeline utama pada tiap menu.

Pada proses perancangan ini penulis melakukan tinjauan ke Perguruan Diniyyah Puteri sambil mengumpulkan beberapa data, mencoba memberikan beberapa rancangan aplikasi, melakukan studi pustaka, dan memulai pembuatan aplikasi. Sistem multimedia sebagai alat untuk keunggulan bersaing, maim pengembangan sistem multimedia harus mengikuti tahapan pengembangan mendefinisikan masalah, merancang isi, menulis naskah, memproduksi sistem, melakukan tes pemakai, menggunakan sistem dan memelihara sistem.

Alhasil, penulis menghasilkan sebuah CD interaktif dengan animasi tentang perguruan Diniyyah Puteri Padang Panjang. Aplikasi yang dapat dipakai dengan mengklik tombol-tombol nafigasi yang ada. Aplikasi ini terdiri dari gambar-gambar yang bergerak (animasi) dan clip video kegiatan sehari-hari di perguruan Diniyyah Puteri Padang Panjang.

Dengan CD interaktif ini, perguruan Diniyyah puteri akan dapat lebih leluasa dalam mempromosikan diri. Dan semoga aplikasi ini dapat dikembangkan dengan disain yang lebih menarik, isi yang lebih lengkap, dan ukuran file yang lebih ringan.

Kata Kunci : CD, Compact Disk, media tempat penyimpanan data. xxxv halaman + I 47 halaman + 93 gambar + 3 lampiran. DaftarPustaka: 10 (1989-2004).

Kata Pengantar

Puji dan syukur kepada Allah SWT, atas karunia dan rahmat-Nya sehingga

penulis dapat menyelesaikan penyusunan skripsi ini dengan judul "Timeline

Multimedia pada Pembuatau Profile Pcguruan Diniyyah Puteri Padang

Panjang" sebagai salah satu syarat yang harus ditempuh oleh seluruh mahasiswa

Teknik lnformatika untuk mencapai gelar Sarjana Komputer pada Fakultas Sains

dan Teknologi Universitas Islam Negeri (UIN) Syarif Hidayatullah Jakmta.

Dalam penulisan skripsi ini, penulis menyadari masih banyak kekurangan

sehingga skripsi ini jauh dari kesempurnaan karena keterbatasan ilmu

pengetahuan yang dimiliki, oleh karena itu penulis mengharapkan kritik dan saran

dari pem baca guna perbaikan pad a masa yang akan datang.

Dengan selesainya penulisan skripsi ini maka dengan rasa syukur dan

honnat penulis mengucapkan terima kasih yang tulus kepada semua pihak yang

turut membantu sehingga tersusunnya penulisan skripsi ini, karena tanpa bantuan,

petunjuk, bimbingan dan saran-saran mungkin penulis tidak dapat menyusun

penulisan skripsi ini. Pada kesempatan ini penulis ingin mengucapkan terima

kasih yang sebesar-besarnya kepada:

I. Papa dan !bu yang tercinta, yang telah memberikan begitu banyak kasih

sayang kepada Ananda se1ta dorongan baik moril maupun materil sehingga

dapat menyelesaikan skripsi ini dengan baik,.

2. Bapak Ir. Adil Siregar dan !bu Nurhayati, M.Kom, selaku dosen

pembimbing yang dengan tulus hati mau membagi ihnunya dan meluangkan

waktu dan tenaga untuk memberikan bimbingan yang berharga serta

petunjuk dan saran dalam penyusunan skripsi ini.

3. Bapak DR. Syopiansyah Jaya Putra, M.Sis selaku dekan Fakultas Sains dan

Teknologi Universitas Islam Negeri (UJN) Syarif Hidayatullah Jakarta.

4. Bapak Ir. Bakri La Katjong, MT, M.Kom selaku ketua jurusan Teknik

Informatika Universitas Islam Negeri (UJN) Syarif Hidayatullah Jakarta.

5. lbu Khodijah Hulliyah, S.Kom, terima kasih atas segala dukungannya.

6. Perguruan Diniyyah Puteri Padang Panjang.

7. lbu Zikra clan lbu Fauziah selaku pimpinan dan wakil pimpinan Perguruan

Diniyyah Puteri Padang Panjang.

8. lvfy BigBro and BigSisl yang menjadi inspirasi untuk cepat lulus, Wan

Fawaz, Kak Zie, Kak Fie, Kak Na, and Wan Uj. Terima kasih.

9. Special untuk Fadhilah Tsani, Rahmat (Tapal) Arief, Fachrie (B-Genk),

Zaenal, Rusdiana, Al Hady Mustaqim, Ernawati, Da Andi, Ajo Royo,

Zulkarnain (tunuk) Sahar yang tanpa bosan memberi semangat untuk

menyelesaikan skripsi ini.

I 0. Teman-teman Teknik Jnformatika angkatan 2000, khususnya Enno, Kiki,

. Mumun, Nung, Riris, Mia, Nani, Nana, Dedi, Hadi, Irfan, Mahfudz, Eqi,

Helmi, Dadan, Asep, Fachrurrozi, Fachri, Jean, Reza, Riza, Safari, Risydi,

Ilham, dan semuanya semoga kesuksesan selalu mengikuti diri kalian.

11. My firend in Tapak Suci Indonesian Maitial Art, khususnya Faizal (azonx)

Haizar, Apis, Ajo Royo, Yeepung, Saepul (Chile) Anwar, Ara, Rigki (Q-

Boom) Rifai, Buyung, dan teman-teman yang belum tersebutkan namanya.

Thanx U all ....

12. And yang terpenting dan terdalam for my computer. I love You ...... I Love

You ..... .

13. Semua pihak yang secara langsung maupun tidak langsung telah

memberikan bantuan dan dukungan untuk penulis dalam penulisan skripsi

ini.

Akhirnya kepada Allah SWT jualah, penulis menghara:pkan agar usaha yang

sederhana ini dapat mencapai sasaran yang maksimal, membantu Perguruan

Diniyyah Puteri Padang Panjang dalam mensosialisasikan perguruan yang akan

dapat membangun muslimah sejati sebagai salah satu penyangga kekuatan Islam

dan bumi pertiwi.

Jakarta, Maret 2006

Penulis

DAFTARISI Halaman

Halaman Judul Luar ........................................................................................... .

Halaman Judul Dalam .......................................................................................... ii

Halaman Pengesahan Pembimbing ...................................................................... 111

Halaman Persetujuan........................................................................................... iv

Abstrak .............................................................................................................. v

Kata Pengantar ........ ....... ....................................... .............................................. vi

Daftar Isi ........ ............ .... .............................................................................. ....... 1x

Daftar Garn bar ..... ...... ...... ......................................................................... ....... ... xiii

Daftar Lampiran ................................................................................................... xviii

Daftar Pustaka ............................. ............................................. .......................... xix

Lampiran ............................................................................................................ xx

BAB I PENDAHULUAN ................................................................................... 1

1.1. Latar Belakang Masalalt.................................................................. 2

1.2. Rumusan Masalalt ........................................................................... 2

1.3. Ruang Lingkup Permasalaltan ....................................................... 3

1.4. Tujuan Penulisan ............................................................................ 3

1.5. Sasaran ............................................................................................ 3

1.6. Metode Pengembangan................................................................... 4

1.6.1. Metode Observasi ................................................................... 4

1.6.2. Metode Studi Pustaka............................................................. 4

1.6.3. Metode Pengembangan Multimedia....................................... 4

1.7. Sistematika Penulisan ..................................................................... 5

BAB II LANDASAN TEORI ........................................................................... 7

2.1. Multimedia ...................................................................................... 7

2.1.1. Pengertian Multimedia............................................................. 8

2.1.2. Elemen-elemen Multimedia..................................................... I 0

2.1.2.1. Teks ............................................................................ IO

2.1.2.2. Gambar ....................................................................... 11

2.1.2.3. Ani1nasi ...................................................................... 13

2.1.2.4. S11ara/Audio ................................................................ 23

2.1.2.5. Video .......................................................................... 25

2.1.3. Peralatan Multimedia ............................................................... 25

2.1.4. Aplikasi Multimedia ................................................................ 28

2.1.5. Manfaat Penggunaan Multimedia ............................................ 31

2.1.6. Langkah-langkah dalam Mengembangkan Sistem Multimedia............................................................................... 32

2.2 Sistem ................................................................................................. 34

2.3 Informasi ........................................................................................... 35

2.4. Macromedia Flash MX ................................................................... 35

Spesifikasi Sistem Macromedia Flash .............................................. 37

2.5. Adobe Photoshop 7.0 ....................................................................... 38

Spesifikasi Sistem Adobe Photoshop 7.0 .......................................... 39

2.6. Adobe Premier Pro7.0 ..................................................................... 40

Spesifikasi Sistem Adobe Premier Pro7.0 ......................................... 41

2. 7. Cool Edit ........................................................................................... 42

Spesifikasi Sistem Cool Edit.. ........................................................... 43

2.8. Time Line ........................................................................................ 44

Timeline Pada Macromedia Flash MX ............................................. 45

2.8.1. Layer ....................................................................................... 46

2.8.2. Frame ....................................................................................... 47

2.8.3. Playhead .................................................................................. 48

2.9. Profile Pcrguruan Diniyyah Puteri Padang Panjang .................. 48

2.9.1. S"'jarah Singkat Perguruan Diniyyah Puteri ........................... 48

2.9.2. Visi dan Misi Perguruan Diniyyah Puteri ............................... 50

2.9.3. Struktur Organisasi Perguruan Diniyyah Puteri ..................... 51

BAB III METODELOGI DAN PERANCANGAN SISTEM .......................... 56

3.1. Analisis Sistem ................................................................................. 56

Mendefinisikan Masalah ................................................................... 58

3.2. Disain Sistem ................................................................................... 59

3 .2.1. Rancangan Konsep ................................................................. 60

3 .2.2. Detail Konsep ......................................................................... 66

3.2.3. Rancangan fsi dan Naskah ...................................................... 75

3.2.4. Rancangan Grafik ................................................................... 87

3.3. Mcmproduksi Sistem .................................................................... 87

BAB IV PENGEMBANGAN DAN IMPLEMENTASI SISTEM .................... 89

4.1. Timeline ........................................................................................... 89

4.1.1. Timeline pada Menu Sejarah .................................................. 89

4.1.2. Timeline pada Menu Visi dan Misi ........................................ 91

4.1.3. Timeline pada Menu Struktur Organisasi ............................... 94

4.1.4. Timeline pada Menu Program Pendidikan ............................ .! 03

4.1.5. Timeline pada Menu Tekad Siswi .......................................... 114

4. 1 .6. Timeline pada Menu Ekstra Kurikuler .................................. .115

4.1.7. Timeline pada Menu Fasilitas ............................................... 117

4. 1 .8. Timeline pada Menu Galeri .................................................. 121

4.1.9. Timeline pada Menu Utama .................................................. J 29

4.1, 10. Timeline pada Menu Peta ..................................................... 137

4.2. Autorun CD ..................................................................................... 139

4.2.1. Konfigurasi File INF ............................................................... 139

4.2.2. Proses Pembakaran CD ........................................................... 140

4.3. Spesifikasi Komputer Pengguna .................................................... 146

BAB V KESIMPULAN DAN SARAN ............................................................. 144

5.1. Kesimpulan ...................................................................................... 144

5.2. Saran ................................................................................................. 144

DAFTAR GAMBAR

Halaman

Gambar 2.1. Tampilan Macromedia Flash MX ..................................................................... 37

Gambar 2.2. Tampilan Adobe Photoshop 7.0 ....................................................................... 39

Gambar 2.3. Tampilan Adobe Premiere Pro 7.0 ................................................................... 41

Gambar 2.4. Tampilan Cool Edit... ........................................................................................ 43

Gambar 2.5. Timeline pada Adobe Premiere Pro 7.0 ............................................................ 44

Gambar 2.6. Timeline pada Cool Edit.. ................................................................................. 45

Gambar 2.7. Timeline pada Macromedia Flash MX ............................................................. 45

Gambar 2.8. Timcline pada Flash ........................................................................................... 45

Gambar 2.9. Ilustrasi Layer Secara Fisik .............................................................................. 46

Gambar 2.10. Gambar Layer "hantu" dan Layer "ta! i" ......................................................... 46

Gambar 2.11. Ilustrasi Frame pada Roi Film ........................................................................ 47

Gambar 2.12. Struktur Utama Perguruan Diniyyah Puteri Padang Panjang ......................... 52

Gambar 2.13. Struk'tur Bidang Pendidikan dan Pengajaran .................................................. 53

Gambar 2.14. Struktur Bidang Keuangan dan Personalia .................................................... 54

Gambar 2.15. Struk'tur Bidang Humas dan Kerjasama .......................................................... 55

Gambar 2.16. Struktur Bidang Rumah Tangga ..................................................................... 56

Gambar 3.1. Siklus Pengembangan Aplikasi Multimedia ..................................................... 58

Gambar 3.2. Rincian Siklus Pengembangan Aplikasi Multimedia ....................................... 58

Gambar 3.3. Hirarki Layar Menu Utama .............................................................................. 61

Gambar 3.4. Hirarki Layar Menu Sejarah ............................................................................. 62

Gambar 3.5. Hirarki Layar Menu Visi dan Misi .................................................................. 62

Gambar 3.6. Hirarki Layar Menu Program Pendidikan ........................................................ 63

Gambar 3.7. Hirarki Layar Menu Struktur Organisasi .......................................................... 64

Gambar 3.8. Hirarki Layar Menu Tekad Siswi ..................................................................... 65

Gambar 3.9. Hirarki Layar Menu Ekstra Kurikuler .............................................................. 65

Gambar 3.10. Hirarki Layar Menu Fasilitas .......................................................................... 66

Gambar 3.11. Hirarki Layar Menu Galeri ............................................................................. 66

Gambar 3.12. State Transition Diagram Halaman Utama ..................................................... 67

Gambar 3.13. State Transition Diagram Halaman Sejarah .................................................... 68

Gambar 3.14. State Transition Diagram Halaman Visi dan Misi .......................................... 69

Gambar 3.15. State Transition Diagram Halaman Program Pendidikan ............................... 70

Gambar 3.16. State Transition Diagram Halaman Struktur .................................................. 71

Gambar 3.17. State Transition Diagram Halaman Ex-School... ............................................ 72

Gambar 3.18. State Transition Diagram Halaman Tekad Siswi. ........................................... 73

Gambar 3.19. State Transition Diagram Halaman Fasilitas .................................................. 74

Gambar 3.20. State Transition Diagram Halaman Galeri ...................................................... 75

Gambar 3.21. State Transition Diagram Halaman Peta ......................................................... 75

Gambar 3.22. Rancangan Layar Halaman Intro .................................................................... 76

Gambar 3.23. Rancangan Layar Halaman Menu Utama ....................................................... 77

Gambar 3.24. Rancangan Layar Halaman Sejarah ................................................................. 78

Gambar 3.25. Rancangan Layar Halaman Visi dan Misi ...................................................... 79

Gambar 3.26. Rancangan Layar Halaman Struhur Organisasi.. ............................................ 80

Gambar 3.27. Rancangan Layar Halaman Program Pendidikan ........................................... 81

Gambar 3.28. Rancangan Layar Halaman Tekad Siswi ........................................................ 82

Gambar 3.29. Rancangan Layar Halaman Ekstra Kurikuler ................................................. 83

Gambar 3.30. Rancangan Layar Halaman Fasilitas ............................................................... 85

Gambar 3 .31 . Rancangan Layar Halaman Galeri ............................. ..................................... 86

Gambar 3.32. Rancangan Layar Halaman Peta ..................................................................... 87

Gambar 4.1. Timeline pada Menu Sejarah ............................................................................ 89

Gambar 4.2. Timeline pada Menu Visi Misi ........................................................................ 91

Gambar 4.3. Timeline pada Menu Struktur Organisasi. ........................................................ 94

Gambar 4.3.1. Timeline pada Menu Struktur Organisasi dari Frame I sampai 20 ............... 96

Gambar 4.3.2. Timeline pada Menu Struktur Organisasi dari Frame I sampai 40 ............... 97

Gambar 4.3.3. Timeline pada Menu Struktur Organisasi dari Frame 40 sampai 45 ............. 98


Gambar 4.3.5. Timeline pada Menu Struktur Organisasi dari Frame 50 sampai 55 ............. I 00


Gambar 4.4. Timeline pada Menu Program Pendidikan ....................................................... I 03

Gambar 4.4. l. Timeline pada Menu Program Pendidikan dari Frame I sampai 10 .............. 104

Gambar 4.4.2. Timeline pada Menu Program Pendidikan dari Frame 10 sampai 33 ............ I 05

Gambar 4.4.3. Timeline pada Menu Program Pendidikan dari Frame 34 sampai 40 ............ 107

Gambar 4.4.4. Timeline pada Menu Program Pendidikan dari Frame 41 sampai 46 ............ I 09




Gambar 4.5. Timeline pada Menu Tekad Siswi .................................................................... 114

Gambar 4.6. Timeline pada Menu Ekstra Kurikuler ............................................................. 115

Gambar 4.7. Timeline pada Menu Fasilitas .......................................................................... .117

Gambar 4.7. I. Timeline pada Menu Fasilitas dari Frame 1 sampai 16 ................................. 119

Garn bar 4.7.2. Timeline pada Menu Fasilitas dari Frame 17 sampai 32 ............................... 120

Gambar 4.8. Timeline pada Menu Galeri .............................................................................. 121

Gambar 4.8.1. Timeline pada Menu Galeri dari Frame I sampai 76 .................................... 124

Garn bar 4.8.2. Timeline pada Menu Galeri dari Frame I sampai 15 ................................... .126

Gambar 4.8.3. Timeline pada Menu Galeri dari Frame 76 sampai 90 pada Layer Title ...... 127

Garn bar 4.8.4. Timeline layer ButtonMUText dan ButtonMU ............................................. 127

Gambar 4.8.5. Timeline pada Menu Galeri dari Frame 106 sampai 117 .............................. 128

Gambar 4.9.2. Timeline pada Menu Utama .......................................................................... 129

Gambar 4.9.1. Timeline pada, layer Ending, Line, TITLE TEXT, TEXT, LOGO danjam ........ 133

Gambar 4.9.1. Timeline pada Layer Anim Logo dan layer text button ............................... .134

Gambar 4.9.3. Timeline pada Menu Utama Frame 1 sampai 65 pada Layergroup Button ... 135

Gambar 4.9.4. Timeline pada Layer Hiasan, Masjid, Background, dan Stop ...................... .137

Gambar 4.10. Timeline pada Menu Peta ............................................................................... 137

Gambar4.l l. Notepad ........................................................................................................... 139

Gambar 4.12. Penyimpanan File inf ...................................................................................... 139

Gambar 4.13. Memilih Data Disc ........................................................................................... 140

Gambar 4.14. Tekan Tombol Add untuk Memasukkan File ................................................ .141

Gambar 4.15. Memilih File ................................................................................................... 142

Gambar 4.16. Daftar File yang akan Disalin Ke CD ............................................................. 142

Gambar 4.17. Mengisi Recorder, Nama/Volume, Writing Speed ........................................ .143

Gambar4.18. Proses Pembakaran CD ................................................................................... 144

Gambar 4.19. Pemberitahuan Selesainya Pembakaran CD ................................................... 144

Gambar 4.20. Pembakaran Telah Selesai .............................................................................. 145

Gambar 4.21. Keluar Dari Nero Expres ................................................................................ 145

DAFTAR LAMPIRAN

Halaman

Lampiran I: Rancangan Naskah ............................................................................... xx

Lampiran 2: Tampilan Menu Aplikasi. ..................................................................... xxxi

BABI

PENDAHULUAN

Perguruan Diniyyah Puleri Padang Panjang merupakan Pondok Pesanlren

Moderen Khusus Puleri lerlelak di kawasan kola Padang Panjang Sumatera Baral.

Didirikan oleh Ibunda Rahmah El Yunusiyyah pada langgal I November 1923

pada zaman pemerinlahan Belanda di Indonesia. Saal ini, Perguruan Diniyyah

Puleri Padang Panjang lelah berkembang jauh dengan memiliki Iima program

pendidikan mulai dari tingkal Taman Kanak-kanak sampai Sekolah Tinggi.

Menjelang usia ke 80 lahun, pada bulan Aguslus 2003, Perguruan

Diniyyah Puleri melakukan reengineering dalam persiapan menuju pusal

pendidikan Islam berbasis leknologi. Unluk ilu, secara bertahap dan

berkesinambungan, seluruh elemen perguruan melakukan perubahan dan

perbaikan besar unluk mencapai lujuan mulia "MENCERDASKAN GENERASI

ISLAM".

Seiring dengan keinginan unluk memajukan diri, perguruan Diniyyah

Puteri Padang Panjang melakukan sosialisasi kepada masyarakal dari semua

kalangan. Dengan berbekal brosur peguruan Diniyyah Puteri berusaha untuk

menujuldrnn kemajuan-kemajuan dan keunggulan-keunggulan yang lelah

meningkal selama ini.

Dalam ha! penggalangan danapun perguruan Diniyyah Puleri berusaha

untuk memperkenalkan diri dalam presentasi. Tenlu saja profile perguruan, segala

jenis kegiatan fasililas, dan semua yang berlmbungan dengan perguruan dan palul

untuk dipresentasikan harus di terangkan. Tapi presentasi yang dilakukan hanya

menggunakan plastic transparansi dengan alat bantu OHP, yang terkadang

menyebabkan minat para audien akan materi presentasi profile tersebut agak

berkurang.

Begitu juga dengan brosur. Hanya dengan gambar dan keterangan pada

brosur tidak cukup untuk menjelaskan perubahan-perubahan dan kemajuan

kemajuan yang telah dialami perguruan Diniyyah Puteri Padang Panjang. Tak

jarang pula setelah brosur dibaca beberapa detik brosur tersebut segera menjadi

hiasan tempat sampah.

1.1. Latar Belakang Masalah

Oleh sebab itu munculah beberapa permasalahan yang timbul

yaitu:

I. Media apa yang dapat digunakan agar dapat memberikan informasi

yang lebih banyak.

2. Bagaimana agar penyampaian infonnasi tentang Perguruan Diniyyah

Puteri menjadi lebih menarik.

3. Bagai mana cara penyampaian informasi agar berkesan lebih

professional.

1.2. Rumusan Masalah

Berdasarkan permasalahan diatas, penulis merumuskan masalah

tersebut "bagaimana mcnyajikan informasi tentang Pcrguruan

Diniyyah Puteri menjadi lebih lengkap, menari.k dan professional

dengan me11gg11naka11 teknologi multimedia sebagai media promosi".

1.3. Rnang Lingknp Permasalahau

Pada skripsi ini penulis akan mencoba mengembangkan

permasalahan tersebut dengan membuat CD interaktif company profile

tentang Perguruan Diniyyah Puteri Padang Panjang menggunakan

program editing utama yaitu Macromedia Flash. Dimana pada penulisan

skripsi ini hanya menjelaskan timeline akhir pada tiap-tiap menu. Yaitu

bagaimana pengaturan timeline akhir yang berupa gabungan dari gambar,

video, suara dan timeline-timeline Jain.

1.4. Tujuan Pennlisan

Tujuan penulisan adalah merancang sebuah CD multimedia

interaktif sebagai media promosi bagi Perguruan Diniyyah Puteri yang

memberikan informasi yang Jebih lengkap, lebih menarik dan professional

yang pada pembuatannya dititik beratkan pada pengaturan timeline.

1.5. Sasaran

Sasaran hasil akhir pengguna CD interaktifini adalah :

I. Para audien pada seminar dan presentasi tentang perguruan Diniyyah

Puteri.

2. Para tamu penting seperti pejabat negara, dan tamu luar negeri.

3. Bagi para cal on pem beri bantuan.

4. Para Murid ketika penerimaan murid baru ( diharapkan dapat

memperlihatkan pada kerabatnya).

1.6. Metode Pengembangan

Dalam rangka menyusun skripsi ini, diperlukan data-data

informasi yang relatif lengkap sebagai bahan yang dapat mendukung

kebenaran materi uraian dan pembahasan. Oleh karena itu, metode yang

akan digunakan dalam pembuatan Company Profile Perguruan Diniyyah

Puteri yaitu:

1.6.1. Metode Observasi

Pengumpulan data dan informasi dengan cara meninjau

dan mengamati semua kegiatan atau apapun yang patut

dimasukkan dalam iklan.

1.6.2. Mctode Studi Pustaka

Pengumpulan data dan informasi dengan cara membaca

buku-buku referensi yang dapat dijadikan acuan pembahasan

dalam masalah ini.

1.6.3. Metodc Pengembangan Multimedia

Metode yang akan digunakan dalam pembuatan profile

Perguruan Diniyyah Puteri dilakukan berdasarkan 3 tahap, yaitu:

1. Praproduksi

Pada tahap ini dilakukan pengumpulan bahan dan

data, pembuatan konsep, dan pembuatan perancangan.

2. Produksi

Pada tahap ini semua seluruh objek multimedia

dibuat. Pembuatan aplikasi berdasarkan slo1J1board, flowchart

view, struktur navigasi, atau diagram ot~jek yang berasal dari

tahap design.

3. Pasca Produksi

Periode semua pekerjaan dan aktivitas yang te~jadi

setelah multimedia diproduksi, meliputi pengetesan aplikasi

dan penggandaan.

1.7. Sistematilrn Penulisan

Penyusunan skripsi ini dibagi alas lima bab dan masing-masing

bab dibagi menjadi beberapa sub bab yang secara garis besar diuraikan

sebagai berikut :

BAB l PENDAHULUAN

Penjelasan mengenai latar belakang masalah, rumusan masalah,

ruang lingkup masalah, tujuan dan manfaat, metode penelitian

dan sistematika penulisan.

BAB II LANDASAN TEO RI

Penjelasan mengenai multimedia, software yang dipakai,

mengenai teori yang diperlukan dalam penulisan dan sekilas

tentang Perguruan Diniyyah Puteri Padang Panjang.

BAB III METODOLOGI DAN PERANCANGAN SISTEM

Penjelasan tentang tahapan pengembangan multimedia

berdasarkan pra produksi, produksi, dan pas·:a produksi.

BAB IV PENGEMBANGAN DAN IMPLEMENTASJ SISTEM

Penjelasan proses aplikasi dari multimedia yang dibuat

berdasarkan representasi pengetahuan yang di dapatkan, design,

storyboarding. Penjelasan tentang jalannya pembuatan company

profile khususnya pada bagian timeline.

BAB V KESIMPULAN DAN SARAN

Penjelasan tentang kesimpulan dari hasil bahasan seluruh bab

serta saran-saran yang kiranya dapat bermanfaat bagi pembuatan

iklan selanjutnya.

2.1. Multimedia

BAB II

LANDASAN TEORI

Kata multimedia bukanlah baru, tetapi sudah digunakan bahkan

sebelum komputer menampilkan presentasi atau penyajian yang

menggunakan beberapa macam cara. Pada awal tahun 1990, multimedia

bera1ii kombinasi dan teks dengan document image. Perkembangan

teknologi document image dilengkapi dengan penggunaan faksimile, yang

mengkonversi dokumen dengan pengkodean yang menyimpan informasi

setiap piksel dengan nilai putih atau hitam. Bila kepadatan piksel

bertambah sesuai dengan kualitas mesin, ukuran informasi menjadi lebih

besar.

Contoh lainnya, penggunaan slide 35 111111 dengan rekarnan audio

merupakan bentuk multimedia. Dalarn kehidupan sehari-hari, setiap orang

rnenggunakan bermacam-rnacarn panca indera untuk rnenerima informasi

dan lingkungan yang menggunakan berbagai media. Hal yang sama, PC

menyajikan output pada screen clan hardcopy dengan printer, karena

screen dan printer merupakan media yang berbeda.

Audio, image, dan video dalam kehidupan yang merupakan objek

analog, mempunyai nilai kontinyu untuk ruang clan waktu. Beberapa

macam alat perekam seperti kamera foto, kamera video, televisi, audio re

corder rnerupakan ala! perekam analog. Komputer adalah digital, yang

berarti data yang disimpan mempunyai nilai diskrit, dikelompokkan dalam

sejumlah bit (binary digit). Bentuk digital melekat dalam komputer yang

mempunyai kemampuan seperti akurasi, dapat diprogram, dan fleksibel.

Akurasi tidak diperlukan dalam objek multimedia analog yang digunakan

untuk pengembangan dengan komputer. Di samping itu banyak sistem

telah dibuat dan disimpan dalam bentuk analog untuk menyajikan video

dan audio. Sistem hybrid analog-digital mempunyai kemungkinan yang

fleksibel untuk menangani keduajenis data.

Faktor kemampuan dan artistik dalam peke~jaan fotografi,

perekaman suara, atau videografi juga diperlukan pada multimedia

komputer seperti halnya dalam pembuatan media untuk televisi, audio, dan

film. Suatu multimedia mungkin merupakan presentasi sederhana yang

berjalan sendiri menceritakan sesuatu, atau merupakan program interaktif

yang kompleks termasuk path yang dapat dipilih oleh user.

2.1.1. Pengertian Multimedia

Menurut Burger (1993, p6 I 6), multimedia adalah gabungan

dari 2 media atau lebih. Media juga bisa dikatakan sebagai suatu

tempat dimana informasi dapat bergerak atau mengalir. Kata media

itu sendiri mengacu kepada sesuatu yang berbeda atau terletak di

tengah-tengah.

Menurut Andleigh (1996, p3), multimedia adalah suatu

istilah umum yang sering digunakan untuk menjelaskan

penyebaran informasi, aplikasi, presentasi dan dokumen lain yang

menggunakan gabungan kombinasi dari teks, grafik, animasi, dan

video.

Menurut Hoffstetter (2001, p2), multimedia adalah

penggunaan komputer untuk menyajikan dan mengkombinasikan

teks, grafik, audio dan video dengan alat bantu yang

memungkinkan pengguna untuk melayani, berinteraksi,

menciptakan dan berkomunikasi. Sesuai denga,n gambaran definisi

tentang "multimedia" diatas terdapat 4 komponen penting yang

dibutuhkan dalam "multimedia" yaitu :

1. Adanya sebuah komputer yang berguna sebagai pengkoordinasi

apa yang dilihat, didengar, dan berinteraksi.

2. Adanya hubungan (links) yang dapat menghubungkan

pengguna dengan informasi yang dikehends.ki.

3. Adanya alat bantu yang dibutuhkan pengguna untuk melintasi

informasi yang terhubung.

4. Pengguna harus dapat mengumpulkan, memproses dan

berkomunikasi dengan informasi dan ide sendiri.

Sedangkan bila diterjemahkan secara bebas, sesuai

namanya "multimedia" dapat berarti lebih dari satu media.

Bermacam media yang akan dipakai nantinya digabungkan

menjadi satu kesatuan yang paling mendukung. Artinya media

yang dipilih untuk dipergunakan harus dapat "bekerja sama"

dengan media yang lain yang juga telah dipilih untuk membentuk

satu kesatuan yang harmonis.

Dari berbagai macam pengertian tentang multimedia diatas,

dapat dilihat bahwa multimedia dibentuk dari penggabungan

beberapa elem en, berupa gambar bergerak ( animasi/video ), suara

(audio), gambar (grafik), dan teks yang digabungkan kedalam

sebuah komputer dan dijalankan secara interaktif.

2.1.2. Elemen - elemen multimedia

Untuk membuat aplikasi multimedia, diperlukan

penggabungan dari beberapa elemen, yaitu:

2.1.2.1. Teks

Teks merupakan elemen multimedia yang paling

sederhana dan membutuhkan ruang penyimpanan yang

paling kecil dibanding dengan elemen multimedia yang

lainnya. Dengan penggunaan teks, informasi menjadi

lebih mudah disampaikan dan dimengerti oleh pengguna.

Teks dapat dibagi menjadi 4 macam yaitu :

1 . Teks tercetak

Adalah teks yang sering digunakan pada umumnya

yaitu teks yang dicetak pada kertas.

2. Scanned text

Adalah suatu teks yang pada mulanya discan oleh

scanner kemudian teks tersebut diubah menjadi suatu

teks yang dapat dibaca pada komputer.

3. Teks elektronik

Adalah teks yang dapat langsung dibaca pada

komputer.

4. Hypertext

Adalah sebuah aplikasi atau metode pemberian indeks

pada teks secara cepat untuk mendapatkan teks yang

diinginkan dalam sebuah dokumen atau lebih.

2.1.2.2. Gambar

Menurut Andleighl dan Thakrar (1999, p33)

image/gambar adalah semua obye:k yang diwakilkan

dalam bentuk grafik dan nongrafik atau konsep yang

berbentuk kode dimana tidak ada relasi dengan waktu dan

statis.

Biasanya gambar yang digunakan dalam

multimedia dapat berupa gambar sintetis, artinya gambar

yang dibuat dengan program pengolah gambar seperti

Adobe Photoshop, dapat juga bernpa gambar hasil

scanning dari photo atau lukisan tangan, atau berupa

gabungan antara hasil scanning dan editing.

Selain gambar pada multimedia juga biasanya

digunakan grafik, grafik itu biasanya berupa grafik

batang, grafik lingkaran, dan berbagai macam bentuk

grafik lainnya yang berbentuk 2 maupun 3 dimensi.

Grafik merupakan elem en multimedia yang

dipresentasikan dalam 2 atau 3 dimensi sebagai media

ilustrasi yang memperjelas penyampaian informasi.

Grafik terdiri dari dua bentuk dasar yaitu : grafik bitmap

dan grafik vektor.

Grafik bitmap disusun sebagai matrik, nilai

numerik yang terdapat dalam matrik tersebut

mempresentasikan setiap titik-titik atau pixel. Grafik

bitmap digunakan untuk menyimpan foto dan gambar

rumit yang membutuhkan rincian secara halus. Biasanya

grafik bitmap mempunyai ukuran yang besar dan semakin

tinggi resolusinya maka gambar yang dihasilkan semakin

haius tetapi ukuran.fi/enya bertambah besar.

Sedangkan grafik vektor disusun dari bentuk

bentuk grafis seperti lingkaran, garis, elips, persegi

panjang, segi banyak dan sebagainya yang ditempatkan

dengan koordinat, ukuran, keteba.lan sisi dan pola

pengisian pada bidang. Grafik vektor biasanya digunakan

untuk menyimpan gambar-gambar kartun dalam bentuk 2

dimensi.

Image atau gambar terdiri dari 3 bagian yaitu :

I. Visible

Image atau gambar yang dikategorikan dalam visible

adalah image yang dapat dilihat oleh mata, antara lain

adalah gambar, dokumen-dokumen, lukisan (baik

lukisan yang discan ke dalam komputer maupun

lukisan yang dibuat dari aplikasi-aplikasi komputer),

foto-foto, hasil rekaman dari kamera video.

2. Non visible

Obyek ini seharusnya tidak termasuk dalam

gambarlimage, akan tetapi ditampilkan dalam bentuk

image. Contohnya seperti ukuran suhu.

3. Abstrak

Abstrak image seharusnya tidak pernah ada di dalam

dunia nyata. Abstrak image biasanya dihasilkan oleh

!computer berdasarkan beberapa kalkulasi aritmatika.

Contohnya: fractal.

2.1.2.3. Animasi

Adalah pembentukan gerakan dari berbagai

macam media/obyek yang divariasikan dengan efek-efek,

gerakan transisi juga suara yang selaras dengan gerakan

animasi tersebut.

Animasi berarti gerakan image atau video, seperti

gerakan orang yang sedang berjalan melakukan suatu

kegiatan, dan lain-lain. Konsep dari animasi adalah

menggambarkan sulitnya menyajikan informasi dengan

satu gambar saja, atau sekumpulan gambar. Demikian

juga tidak dapat menggunakan teks untuk menerangkan

informasi 1•

Defenisi lain dari animasi adalah satu teknik dan

proses memberikan gerakan yang nampak pada obyek

yang mati yang dirangkaikan dengan perbedaan gerak

yang minim pada setiap frame. Animasi merupakan

elemen multimedia yang membutuhkan kapasitas

penyimpanan yang besar. Animasi menurut media

pembuatannya dapat dibagi menjadi 2 yaitu:

1. Computer Based Animation

Animasi yang dihasilkan oleh komputer untuk

membuat efek visual seperti perubahan posisi,

bentuk wama, struktur suatu obyek dan

perubahan dalam pencahayaan, sudut pandang,

orientasi dan fokus.

2. Full Motion Video

Proses animasi dimanaframe atau gambar yang

terdapat didalam file merupakan hasil

pengambilan dari kamera video yang diolah

1 Ariesto Hadi Sutopo, Multimedia Interaktif Dengan Flash, Gakarta: Graha Ilmu), h. 12

kedalam bentuk komputerisasi. Jadi, bila dalam

catego1y computer based information frame

gambar yang dihasilkan merupakan hasil dari

aplikasi komputer, sedangkan dalam kategori

full motion video, frame atau gambar yang

dihasilkan merupakan hasil dari pengambilan

gambar dengan kamera.

Pembuatan animasi dapat dibagi menjadi 5 jenis, yaitu:

1. Page flipping, merupakan teknik untuk

menampilkan gambar secara bergantian dengan

cepat sehingga menimbulkan efok pergerakan.

2. Animasi tradisional, biasanya diterapkan dalam

pembuatan film kartun dengan menampilkan

gambar pada latar kemudian difoto.

3. Animasi cell, adalah kompute:risasi dari animasi

tradisional.

4. Animasi obyek, merupakan pergerakan dari obyek

yang diatur padajalur te1tentu, sehingga obyek yang

bergerak menjalankan obyek yang berubah-ubah

bentuk.

5. Wire frame modeling adalah bentuk kerangka suatu

obyek dengan kumpulan polygon, lingkaran, elips

dan bentuk kubus yang didukung dengan splins

yang merupakan bentuk kurva yang dihasilkan dari

relasi matematika dari 2 titik atau lebih.

Animasi berdasarkan teknik pembuatannya menjadi 3

bagian yaitu2:

I. Stop motion Animation

Sering disebut claymai'ion karena dalam

perkembangannya sering menggunakan clay (tanah

liat) sebagai obyek yang digerakkan. Teknik ini

ditemukan oleh Stuart Blakton pada tahun 1906,

dengan menggambar ekspresi wajah sebuah tokoh

kartun pada papan tulis, diambftl gambarnya dengan

still camera, lain dihapus untuk menggambar ekspresi

wajah selanjutnya. Teknik ini mulai sering digunakan

dalam efek visual untuk film tahun 60-an sampai saat

ini.

2. Traditional Animation

Adalah teknik animasi yang dikenal sampai saat

ini. Dinamakan tradisional karena telah digunakan

sejak animasi dikembangkan pertama kali. Sering

disebut cell animation karena teknik pengerjaannya

yang dilakukan pada celluloid transparent yang

sekilas mirip dengan transparansi OHP.

2 W\V\V.anirnatorforum.org/article/horizon/storytrlling.htm

3. Computer Graphics Animation

Dengan berkembangnya teknologi komputer,

lahir teknik animasi baru yang seluruh penger:jaannya

menggunakan komputer yang disebut computer

animation atau lebih dikenal dengan animasi 3

dimensi. Untuk membedakan animasi 3 dimensi yang

proses pengerjaan seluruhnya dengan komputer, cell

animation lalu disebut animasi 2 dimensi.

Terdapat 12 prinsip dasar animasi yang terdiri dari 3:

I. Pose dan Gerakan Antara (pose to pose and

inbetween)

Sulit untuk menggambarkan gerakan tiap

fiwne dalam satu animasi, agar lebih mudah

gerakan dibagi menjadi 2 bagian, yaitu pose dan

gerakan antara (pose to pose and in between). Pose

adalah gerakan paling ekstrim dari tiap gerakan

yang ada, sedangkan inbetween adalah gerakan

antara suatu pose ke pose lainnya

Pada animasi 2 dimensi akan digambarkan

keypose, lalu inbetweener dilanjutkan dengan

3 www.animatorforum.org/article/horizon/storytelling.htm

membuat gerakan antara satu pose ke pose yang

lainnya. Sedangkan dalam 3 dimensi dilakukan

setup karakter dan mengatur pose. Jnbetween

dilakukan oleh !computer secara (hampir) otomatis

yang dikontrol dengan modifikasi pada graphics

editor atau junction curve.

2. Pengaturan waktu (timing)

Pengaturan waktu adalah ''.iiwa" dari suatu

animasi. Dengan mengatur du1rasi gerakan, suatu

karakter bisa terlihat berbeda dengan karakter yang

lain. Meskipun posenya sama, 1tetapi dengan durasi

gerak yang berbeda, maka karakter bisa terlihat

berjalan santai (jarak antara key pose cukup jauh),

berjalan biasa (jarak antara key pose sedang), atau

terlihat tergesa-gesa berlari (jarak antara key pose

lebih dekat).

3. Gerakan Sekunder (secondary action)

Adalah gerakan yang tei:iadi akibat gerakan

lain. Gerakan ini merupakan kesatuan sistem yang

tidak terpisahkan dari gerakan utama. Misalnya

pada saat melangkah, tangan akan mengimbangi

langkah kaki, pinggang ikut berputar dan badan ikut

condong bergerak ke kiri atau ke kanan. Tentu saja

gerakan ini merupakan akibat gerakan utama, yaitu

langkah kaki untuk menciptakan gerakan yang

terlihat alami, maka gerakan sekunder tidak boleh

melebihi gerakan utama.

4. Akselerasi (ease in and out)

Sesuai dengan hukum kelembaman Newton,

maka setiap benda diam cenderung tetap diam, dan

setiap benda bergerak akan tetap bergerak, kecuali

mengalami percepatan atau akselerasi. Dari suatu

pose yang diam ke sebuah gerakan akan terjadi

percepatan, dan dari gerakan ke sebuah pose akan

terjadi perlambatan.

Prinsip yang sama berlaku pada animasi,

dimana pada pergerakan suatu model, akan

diberikan "percepatan" pada awal pergerakan dan

"perlambatan" pada akhir pergerakan.

5. Antisipasi (anticipation)

Pada dasamya semua gerakan terjadi dalam 3

bagian, bagian awal yang disebut antisipasi, gerakan

itu sendiri dan gerakan akhir yang disebut gerakan

penutup (follow through). Sebagai contoh pada

gerakan meloncat, akan dilakukan gerakan

pendahuluan ( antisipasi) dengan penekukan kedua

kaki, membungkukkan badan dan menarik kedua

tangan ke bawah, baru meloncat.

6. Gerakan Lanjutan dan Perbedaan Waktu Gerak

(Follow through and overlapping action)

Kembali mengacu pada hukum kelembaman

Newton, bahwa setiap benda yang bergerak

cenderung tetap bergerak, bahkan setelah

mendapatkan gaya yang menghentikannya. Maka

setiap gerakan hams mempunyai sedikit "gerakan

berlebih" pada tiap akhir gerakan yang disebut

dengan gerakan penutup (follow through).

Tidak semua gerakan teirjadi atau berhenti

pad a saat yang bersamaan. Sela! u ada perbedaan

waktu antara langkah kaki dan ayunan tangan.

Seringkali gerakan tersebut terasa bertindihan.

Prinsip ini dikenal sebagai overlapping action.

Sebagai contoh pada saat melompat kedua kaki

tidak mungkin menginjak tanah pada saat yang

bersamaan. Kedua tangan tidak langsung berhenti

berayun pada saat bersamaan, rnelainkan cenderung

terns berayun untuk mengim bangi tubuh agar

kembali stabil. Sehingga gerakan melompat tersebut

kelihatan tidak kaku seperti robot.

7. Gerakan melengkung (Arc)

Prinsip yang diterapkan pada animasi adalah

pada saat terjadi pergerakan, maim akan disertai

dengan gerakan sedikit melengkung kearah alas atau

bawah yang membentuk li:ngkaran. Penerapan

prinsip ini bertuj uan agar animasi tidak terlihat kaku

seperti robot sehingga terlebih luwes dan dinamis.

8. Dramatisasi Gerakan (Exaggeration)

Adalah tindakan yang dilakukan untuk

mempertegas apa yang sedang dilakukan. Sebagai

contoh gerakan orang yang sedang menangis akan

dilengkapi dengan tangan yang mengusap air mata.

Namun prinsip ini tidak berlaku umum. Bila

mampu menampilkan ekspresi yang mendukung,

maka dramatisasi gerakan ticlak cliperlukan.

9. Elastisitas (squash and stretch)

Prinsip elastisitas bisa digambarkan seperti

bola karet yang dilempar ke atas, pada saat bola itu

kembali ke bawah agak seclikit terlihat menempel

clengan lantai terlebih dahulu barn memantul

kcmbali ke atas. Dibutuhkan gerakan model yang

lentur untuk menghinclari kesan kaku dan menjacli

an eh.

I 0. Penempatan di Bidang Gambar (staging)

Penempatan karakter dihadapan kamera

mutlak diperlukan. Dengan menempatkan kamera

atau karakter secara tepat, konsep yang diinginkan

dapat terbaca dengan mudah oleh penonton. Prinsip

yang paling penting adalah prinsip sincmatography

dan prinsip silluet.

Penempatan kamera yang rendah akan

menciptakan karakter yang terlihat besar dan

menakutkan. Sedang penempatan kamera yang

terlalu tinggi akan membuat karakter terlihat kecil

atau terlihat bingung. Penempatan kamera dengan

arah miring (rolling) akan membuat gerakan terlihat

dinamis.

Memberi silluet akan memberikan ketegasan

pose sebuah karakter. Jika silluet karakter terlihat

ambigu (tidak jelas), maka penonton akan sulit

mengerti aksi yang dilakukan oleh pelaku atau

karakter.

11. Daya Tarik Karakter (appea[)

Karakter dalam animasi harus mempunyai

daya tarik yang unik. Kesan unik bisa dibentuk dari

desain, atau penggambaran ekspresi. Daya tarik

karakter atau bukan hanya terlihat pada penampilan

(rupa karakter, desain pakaian, atau aksesori) namun

juga digambarkan pada keseluruhan gerak, tingkah

laku dan sikap karakter tersebut.

12. Penjiwaan Peran (personality)

Animasi yang baik adalah yang dapat

menggambarkan penjiwaan setiap modelnya.

Penjiwaan peran adalah "roh" setiap karah.ier yang

memberi kesan unik, tampak lebih hidup dan lebih

"be1jiwa".

Penting untuk mengetahui latar belakang

setiap karakter. Mulai dan latar belakang hidup,

tingkah laku sampai hubungan interaksi dengan

Imgiomgan.

2.1.2.4. Suara I Audio

Suara dalam suatu animasi mempunyai fungsi

untuk menciptakan suatu suasana, mempertegas suatu

kondisi dan menghidupkan aplikasi multimedia tersebut.

Menurut Burger (1992, p263) suara dapat didefinisikan

sebagai getaran atau goyangan dari tekanan udara yang

merangsang gendang telinga, lebih luasnya merangsang

saraf dan otak. Dengan kata lain suara didefinisikan

sebagai fenomena fisik yang dihasilkan oleh adanya

pergetaran materi.

Dalam multimedia dikenal ada 3 macam suara

yaitu:

I. Suara percakapan yang dihasilkan dari 2 orang atau

lebih yang sedang berbicara.

2. Suara yang dihasilkan oleh suatu alat musik baik alat

musik tradisional maupun alat musik modern.

3. Suara yang berada diluar suatu p1~rcakapan dan suara

yang dihasilkan oleh alat musik, contohnya seperti

suara gelas pecah, suara tembakan, suara halilintar.

Jenis suara ini sering disebut dengan efek suara.

Macam format suara yang sering digunakan untuk

multimedia :

I . MIDI (Musical Instrument Digital Inteiface)

Merupakan media penghubung atau protokol yang

menghubungkan komputer dan alat musik untuk

dapat saling berhubungan satu dengan yang lainnya.

Biasanya MIDI dapat digunakan untuk beberapa

pemakaian message voice mail. Ukuran file MIDI

tidak terlalu besar jika dibandingkan dengan file

digital audio. File ini disimpan dengan extension

*.mid.

2. WAVE (Wave Audio File Formats)

Merupakan format file digital audio yang disimpan

dalam bentuk extension *.wav. Dengan digital audio,

orang dapat merekam dan memainkan efek-efek

suara yang nyata, seperti: halillintar, suara mobil,

suara binatang dan lain-lainnya.

2.1.2.5. Video

Video merupakan elemen multimedia yang paling

kompleks. Video mampu menggambarkan gerakan yang

sulit diterangkan dengan kata-kata. Penyampaian

informasi lebih komunikatif dibandingkan gambar biasa.

Walaupun video terdiri dari elemen-elemen yang sama

seperti grafik, suara, dan teks, na.mun bentuk video

.berbeda dengan animasi.

Perbedaan terletak pada cara penyajiannya. Dalam

video, informasi disajikan dalam kesatuan utuh dari

obyek, sedangkan animasi menyajikan gabungan

beberapa obyek yang dimodifikasi sehingga terlihat

sating mendukung penggambaran yang seakan terlihat

hidup.

2.1.3. Peralatan Multimedia

Untuk menjalankan berbagai elemen multimedia diatas,

diperlukan komponen utama agar dihasilkan aplikasi multimedia

yang menarik, yaitu:

I. Prosessor

Adalah chip elektronik yang mampu merespon dan memproses

instruksi yang diberikan lalu mengeluarkan basil dari instruksi

yang diberikan. Terletak pada motherboard di dalam Central

Processing Unit (CPU). Jadi prosessor bisa dianggap sebagai

"otak" dari suatu komputer.

2. Monitor

Adalah suatu perangkat keras yang biasa disebut layar tampilan

karena mampu menampilkan bermacam bentuk format sesuai

dengan jenis kartu grafik I VGA Card yang digunakan.

3. Memory

Adalah perangkat keras yang digunakan untuk menyimpan

informasi untuk sementara waktu maupun pennanen. Ada dua

jenis memory yang dapat dipergunakan, seperti Random Access

Memory (RAM) atau biasa disebut memory utama dan Read

Only Memory (ROM).

4. Kartu grafik I VGA Card

VGA (Video Grafic Adaptor) Card Adalah salah satu kmiu yang

terpasang pada motherboard yang berfungsi untuk menampilkan

format warna atau tulisan yang akan terlihat di monitor. Dalam

pengerjaan suatu animasi biasanya dibutuhkan suatu katiu grafik

yang mempunyai kualitas yang tinggi, ha! ini dimaksudkan agar

dalam pembuatan animasi hasil yang didapat bisa dilihat

dengan sangat bagus.

4. Kmtu suara I Sound Card

Adalah kartu yang dipasang pada motherboard untuk

memanipulasi, merekam suara dari CD-ROM atau dari peralatan

audio lain dan mengeluarkan suara melalui speaker setelah

diproses didalam komputer.

5. Speaker

Adalah alat yang mampu mengeluarkan suara yang dikirim dari

kartu suara. Selain digunakan pada komputer, speaker juga bisa

digunakan untuk keperluan alat elektronik lainnya seperti TV,

tape dan lain-lain.

6. HardDisk

Adalah sebuah piringan keras dari magnetik yang berfungsi

untuk menyimpan data ke dalam komputer. Kata ''Hard!keras"

disini dimaksudkan untuk membedakan denganjloppy disk yang

biasa disebut dengan piringan lunak.

7. CD-ROM

Adalah suatu perangkat keras yang mampu membaca data yang

disimpan dalam piringan Compact Disk. Untuk menulis data

yang akan disimpan ke dalam compact Disk, hams

mempergunakan CD-RW.

2.1.4. Aplikasi Multimedia

Aplikasi multimedia pada zaman sekarang ini telah

diterapkan di berbagai kegiatan dalam kegiatan sehari-hari seperti

dibidang hiburan, bisnis, pendidikan dan lain-lain. Hal yang

dipentingkan dalam penyampaian informasi tidak hanya tergantung

dengan kecepatan dan keakuratan data saja. Tetapi, tampilan yang

menarik juga harus diperhatikan. Dengan tampilan yang menarik

maka pengguna akan lebih mengingatnya.

Ada 2 jenis aplikasi multimedia, yaitu4 :

1. Aplikasi multimedia non-interaktif

Aplikasi multimedia non-interaktif atau disebut juga

dengan aplikasi multimedia linier adalah aplikasi multimedia

yang terdiri dari elemen teks, grafik, suara dan video, yang

hanya dapat dinikmati atau ditonton oleh pemakai saja.

2. Aplikasi multimedia interaktif

Adalah aplikasi multimedia yang memungkinkan terjadi

interaksi dengan pemakai, sehingga pemakai dapat mengatur

urutan jalannya aplikasi, terutama dalam memilih bagian mana

yang mau dilihat dan bagian mana yang tidak mau dilihat.

Diperlukan tahapan langkah yang jelas dan mudah agar tidak

4 \V\VW.usu.edu/-sanderso/multinet/deftniti.htm

membingungkan pemakai dapat disebut juga dengan authoring

sistem.

Menurut Andleigh dan Thekrar (1966, p383 - 389) aplikasi

aplikasi multimedia dapat dikategorikan menjadi enam bagian,

yaitu:

I. Game sistem

Game sistem barn menggunakan teknologi multimedia untuk

dua alasan, yaitu: pangsa pasar yang besa.r dan keutuhan akan

kualitas. Game sistem dirancang untuk penggunaan dengan

tampilan sistem yang bervariasi dan menyediakan kemampuan

kepada pengguna untuk menangkap clan menggabungkan

gambar video mereka sendiri atau full motion video.

Pada saat ini banyak sekali permainan .dengan teknologi

multimedia yang diproduksi oleh perusahaan pembuat game.

Game yang diproduksi seharusnya mempunyai tampilan yang

menarik, sehingga pengguna akan memperoleh rasa kepuasan

setelah memainkan game tersebut.

2. Multimedia repositories

Multimedia repositories digunakan untuk menyimpan basis data

multimedia. Letak perbedaan sistem ini dengan sistem

permainan adalah ukuran basis data dan kebutuhan urutan tiap

komponen dalam multimedia penyimpanan informasi.

3. Interactive TV

Sistem ini menggunakan kabel converter yang menghubungkan

kabel bagian satelit degan televisi, sehingga pengguna dapat

memilih saluran dari beberapa stasiun dan diusahakanjuga agar

pengguna dapat berinteraksi dengan program.

8. Video and Phoneconferencing and hypermedia Mal Message

Dengan sistem ini pengguna dapat saling berkomunikasi secara

visual melalui jaringan. Selain itu, juga dapat mengakses

dokumen, mentransfer file maupun mengekspresikan ide dalam

virtual share white board.

9. Shared Workspace and Shared Execution Environment

Konsep "Shared Workspace" dapat terikat pada sistem video

konferensi. Workstation yang dihubungkan ke LAN yang dibuat

dengan sistem shared workspaces, aksi tiap workstation saling

mempengaruhi, setiap perobahan yang dilakukan pada

workstation lain.

10. Business Process Worliflow Application

Biasanya digunakan dalam diskusi. Tujuannya adalah

menampilkan informasi dengan cara yang lebih menarik untuk

mempermudah dalam penggunaan dan dapat dimengerti oleh

pengguna.

2.1.5. Manfaat Penggunaan Multimedia

Penggunaan multimedia dalam proses penginformasian

pesan atau berita memberikan beberapa manfaat, yaitu5:

!. Baik bagi para pemula pengguna kompw:er

Bagi pemakai yang merasa kesulitan dengan penggunaan

papan tombol komputer (keyboard) dan instruksi yang

kompleks, maka akan merasa lebih nyaman menggunakan

mouse atau layar sendiri (touch screen) dalam

pengoperasiannya.

2. Memperbaiki presentasi audio-video tradisional

Penonton akan lebih tertarik dengan presentasi dengan

menggunakan aplikasi multimedia dibandingkan

menggnnakan slide ataupnn proyektor transparan.

3. Peningkatan penyampaian pesan I berita yang hanya berbentuk

teks.

Penyampaian berita yang berupa teks saja akan terlihat

membosankan. Dengan adanya multimedia presentasi berita

dalam bentuk teks akan menjadi lebih menarik dengan

menambahkan gambar, suara/efek-efek tertentu. Jika dalam

aplikasi multimedia hanya menggunakan gambar saja maka

orang tidak akan dapat mengerti makna yang terkandung

didalamnya. Oleh karena itu harus ada teks juga yang

5 http://www/usu.edu/-sandero/multinet/mu!tiadv.html

berfungsi sebagai penjelas maksud yang 1terkandung.

4. Menarik perhatian dan mempertahankannya

Pada umumnya orang lebih tertarik pada penyampaian dengan

multimedia yang menggabungkan elem1:n teks, grafik, suara

dan video dibandingkan dengan tampilan teks yang cenderung

monoton.

5. Multimedia selain bersifat menghibur juga mendidik.

2.1.6. Langkah-langkah dalam Mengembangkan Sistem Multimedia

Menurut McLeod (1996, pl39- 140) terdapat beberapa

langkah yang dapat digunakan dalam mengembangkan sistem

multimedia, antara lain:

I. Mendefinisikan masalah

Analisis sistem mengidentifikasikan kebutuhan pengguna dan

menentukan bahwa pemecahannya memerlukan multimedia.

2. Merancang konsep

Analisis sistem dan pengguna, mungkin bekerja sama dengan

professional komunikasi seperti prosedur, sntradara, dan teknisi

video, terlibat dalam rancangan konsep yang menentukan

keseluruhan pesan dan memeriksa semua unit utama.

3. Merancang isi

Pengembang terlibat dalam rancangan isi dengan menyiapkan

spesifikasi aplikasi yang rinci. Media dipilih dan perlu

menghindari menyatukan terlalu banyak multimedia tang tidak

begitu berguna pada sistem.

4. Merancang naskah

Dialog dan semua elemen sudah terurul dari semua yang terinci.

5. Merancang grafik

Grafik dipilih yang mendukung dialog. Latar belakang atau

perlengkapan yang perlu digunakan dalam perancangan video.

6. Memproduksi sistem

Pengembangan sistem produksi berbagai bagian dan

menyatukannya dengan sistem. Selain mengembangkan piranti

lunak aplikasi, tugasnya mencakup kegiatan khusus seperti

menshooting video dan authoring. Authoring adalah

pengintegrasian elemen-elemen yang terpisah dengan

menggunakan piranti lunak siap pakai khu:ms.

7. Melakukan pengujian kepada pengguna

Analisis sistem mendidik pengguna dalam menggunakan sistem

dan memberikan kesempatan lagi bagi pemakai untuk akrab

dengan semua feature. Jika sistem mernuaskan maka pengguna

akan rnenggunakannya. Jika tidak, proses prototyping diulang

dengan kernbali ke langkah yang lebih awal. Proses interaktif ini

diulangi sampai pengguna puas dengan sisi:em.

8. Menggunakan sistem

Pengguna memanfaatkan sistem yang telah dihasilkan.

9. Memelihara sistem

Setelah sistem digunakan, maka sistem akan dievaluasi oleh

user untuk diputuskan apakah sistem yang baru sesuai dengan

tujuan semula dan diputuskan apakah ada revisi atau modifikasi.

2.2. Sistem

Terdapat dua kelompok dalam mendefinisikan sistem, yaitu yang

menekankan pada prosedurnya dan menekankan pada komponen atau

elemennya. Pendekatan sistem yang lebih menekankan pada prosedur

mendefinisikan sistem sebagai berikut ini.

Suatu sis/em adalah suatu jaringan kerja dari prosedur-prosedur

yang saling berhubungan, berkumpul bersama-sama untuk melakukan

suatu kegiatan a/au menye/esaikan sasaran terten/u."

Pendekatan sistem yang lebih merupakan jaringan kerja dari

prosedur lebih menekankan urut-urutan operasi di dalam sistem. Prosedur

(Procedure) didefinisikan oleh Richard F. Neuschel sebagai berikut ini.

Suatu prosedur adalah operasi klerikal (tu/is-menu/fa~. biasanya

melibatkan beberapa orang didalam satu atau lebih departemen, yang

diterapkan untuk menjamin penanganan yang seragam dari transaksi-

transak'i bisnis yang terjadi. 7

Lebih lanjut Jerry FitzGerald, Arda F. FitzGerald, Warren D.

Stallings, Jr., mendefinisikan prosedur sebagai berikut:

6 Jerry FitzGerald, Arda F. FitzGerald, \Varren D. Stallings, Jr., Fundamentals ofSysten1 Analysis (Edisi kedua; New York: John Willey & Sons, 1981),hal 5. 7 Analisis dan Disain Siste1n Jnrormasi, Jogianto. I-IM, Penerbit Andi OfJSet Yogyakarta, ha! 1.

Suatu prosedur adalah umt-urutan yang tepat dari tahapan

whapan instruksi J'lmg menerangkan apa yang horus diker1aka11. siapa

mengerjakan. kapan diker1c1kan. dan bagmmana menger1afm1111ya8

Pendekatan sistem vang lebih menekankm1 pada elemen atau

kornponennya mendefinisikan sistem sebagai berikt ini.

Sistem ada!ah kwnpulan dari elemen-elemen yang berinteraksi

utnuk 1nenca11ai sualu f?,~juan tertentu.

2.3. lnformasi

lnformasi dapat didefinisikan sebagai berikut

lnfimnasi adalah data JW1g te/ah 1/iolah men;adi bentuk yang lebih

ber,r:una llan lebih berari bagi .J'Cll2,'S 111eneri1nanaJ'O. 9

2.4. Promosi

Menurut Peter clan Olson (1999, p397). promosi merupakan

informasi yang clikembangkan pemasar uniuk memperkenalkan procluk

mereka clan mevakinkan konsumen untuk membelinya.

2.5. Macromedia Flash MX

Macromeclia Flash MX aclalah software aplikasi untuk animasi

vang digunakan untuk internet. Dengan Macrorneclia Flash MX, aplikasi

Web clapat clilengkapi dengan beberapa rnacam imimasi, audio, internktif

animasi clan lain-lain. Animasi hasil dari Macromeclia Flash MX dapat

diubah ke dalarn format lain untuk digunakan pad a pernbuatru1 desain web

8 ;\nnlisis clan J)isain Siste111 Infonnasi, Jogianto. HM, Pcncrhit 1\ndi ()fl.Set Yogyakarta, hal 2.

•) i\nalisis Jan l)isain Siste1n Infr)rnu:1si, Jogianto. I-fl'vL Pcnerbit Andi ()J1Sct Yogyakarta, hal 8.

yang tidak langsung 1nengadaptasi Flash.

Macromedia Flash MX memiliki pernrograrnan ActionScripL dan

dapal merupakan authoring tool berbasis tirneline dan terstruktur. Mulai

dengan Flash 5, ActionScripl merupakan pernrograrnan berorientasi objek.

Flash MX mernpunyai kelebihan yang rnenonjol dibandingkan dengan

F!Dsh 5, di m1taranya dapat rnenggunakan m1imasi dengan format file AVI.

Dengan demikian dapal digunakan pada pengembm1gan multime

dia inleraktif untuk produksi CD. jaringan, maupun penggunaan pada

Web. Dalarn multimedia dapal dilihat teks, gambar, animasi dan digital

video bersan1a-san1a tainpil pada satu saat dan penggunaan button sebagai

ala! interaktif.

fvfovie Flash terdiri alas grafik, teks, animasi, dm1 aplikasi untuk

situs 1veb maupun persentasi multimedia. Senmanya letap menggunakan

grafik bebasis vector. Jadi, aksesnya lebih cepat d:m akan lerlihat halus

pada skala resolusi layer berapa pun, selain itu juga mempunyai

kernampuan untuk mengirnpor video, garnbar, dm1 suara dari aplikasi di

luarnya.

Movie !'lash juga bisa rnemasukkan interaktif dalam movie-nya

rnenggunakan ActionScript (suatu bahasa pemograman berorienlasi objek),

yang nantinya user atau pengguna bisa berinte:raksi dengan nzovie.,,

rnenggunakan keyboard atau mouse unluk berpinclali ke bagian-bagian

yang berbeda dari sebuali movie. mengontrol movie, memindahkan objek

objek, memasukkkan informasi melaJuifimn dan operasi-operasi lainnya.

Perkembangan multimedia yang pesat dapat dilihat dengan makin

diperlukannya presentasi bisnis, menampilkan ne\\sletter dalam internet

dan menambahkan audio, teks dru1 lain-lain. Macromedia Flash MX adalah

salah satu alat authoring tool untuk produksi mu!.timedia dan internet.

Flash tidak hanya menggabungkan elemen multimedia ke dalam portable

movie, lelapi di samping ilu dengan AclionScript, Flash mernptmyai

kemampuan dalarn mernbuat interactive scripting. tAriesto Hadi Sutopo,

2002)10

Gambar 2.1 : Ta1npilan Macromedia Flash MX

Spesifilrnsi Sistem Macromedia Flash MX

Untuk dapat rnenjalakan program Macornedia Flash MX

dibutuhkan spesifikasi silern sebagai beikut:

10 Aricsto 1-ladi Sutopo, 1'I11/tin1edia Interaktij1>engan /-<lash, tjakarta (iraha Ihnu), h, 60

untuk cetakan web dru1 lainnya. Photoshop menciptakan gambar mudah

diakses ke data file. memperlancru· desian web. lebih cepaL mengolah foto

berkualitas professional dru1 lebih bru1yak lagi 12.

~. T, f-.--'.

Gambar 2.2 · Tampilan Adobe Photoshop 7-0

Spesifilrnsi Sistem Adobe l'hotoshop 7.0

Untuk dapat menjalankru1 program Adobe Photosop 7.0

diperlukan komputer yru1g berspesifikasi sebagai berikul:

Unluk sistem operasi Microso11 Windows : Minimal menggunakan

processor teknologi Intel Pentium Ill atau 4. Dengan Windows 98 SE.

Windows ME, Windows NT 4.0, Windows 2000 dengan service pack 2.

alau Windows XP. Kebutuhan RAM Sebesar 128 MB (sangat d.isarankan

l 92 MB keatas), kapasitas harddisk kosong minimal 280 MR monitor

L'. lvI. Suyanio, lvlulti1nc<lia Alat untuh Jv1cningkntkan l(cunggulan I3crsa1ng, ( Yog:yakarta: 1\nJi), h: 23

dengan kemampuan penampilan \rnrna minimal 16 bit dengm1 resolusi

I 024 x 768 dan CD-ROM drive.

Untuk sistem operasi Machintosh Minimal Power Machintosh

Processor (G3. G4. atau G4 dual). Dengan Mac OS 9.1 (atau versi

sesudahnya), atau Mac OS X versi 19.0 ( atau versi sesudahnya).

Kebutuhm1 RAM sebesar 128 MB (sm1gat disarankan 192 MB keatas).

kapasitas harddisk kosong minimal 320 MB, monitor dengan kemampuan

penampilan warna minimal I G bit dengan resolus1 !024 x 768 dengan

menggunakan VGA Card yang mendukung Mac OS dm1 CD-ROM drive.

2.7. Adobe Premier Pro 7.0

Adobe Premiere adalah program video editing. Pada program ini

kita dapat menambahkan efek-efek khusus. memotong. menambah.

menggabungkan video-video yang telah diambil alau istilah populemya

shooting. Semua kegiatan tersebut dapat dilakukan pada timeline Adobe

Premiere. Semakin berkembm1gnya teknologi, maka lahirlah progrm11

Adobe Premiere Pro 7. 0

Adobe Premiere Merupakm1 video editing professional karena

mempunyai beberapa fasilitas antara lain: real preview, title designer.

peralatan rekayasa suara yang powerful!, pengolahan audio dua tract real-

lime, custom length, royalily free audio track, fleksibilitas maksimum

bekerja dengan Windows Media Audio dan file-file video"-

'j. : ~'

,.,,.,,, -,0-1 ~·~'<¥-'

Gambar 2.3 _· Tampilan Adobe Premiere Pro 7.0

Spesililrnsi Sistem Adobe Premier Pro 7.0

Unluk dapal menjalankan program Adobe Premiere Pro 7.0

diperlukan komputer vang berspesifikasi sebagai berikul:

Unluk sistem operasi Microsoft Windows : Minimal menggunakan

processor lenologi Intel Pentium Ill atau 4. Dengan Windows 98 SE.

Windows ME. Windows NT 4.0. Windows 2000 dengan service pack 2,

atau Windmvs XP. Kebuluhan RAM Sebesar l 28 MB (sangat disarankan

l 92 MB keatas), kapasilas harddisk kosong minimal 280 MB, monitor

dengan kemampuan penampilan warna minimal l 6 bit dengan resolusi

l 024 x 768 dru1 CD-ROM drive.

P 1\1. Suyanto, Multi1ncdia J\lat untuk Jvleningkatkan J(cunggulan l3crsatng, ( Yogyakarta: 1\n<li), h: 217

mempunyai kemampuan unluk mendrag dan drop file-file dan efek-efek

dalam multi track sebaik mengakses shor1c111ji:ivori1 user.

Fasililas Mixer yang dapal mengubah level, meug-adjusl pan,

menggunakan real lime track EQ, menambah efek-efek lain secara real

lime mencakup DirectX. bus tract dan sebagainya 14.

Gamhar 2.4: Tampi/an Cool Edit

Spesifikasi Sistem Cool Edit

Unluk dapat menjalankan progrru11 Cool Edi! diperlukan komputer

rnng berpesifikasi sebagai berikul :

Untuk sistem operasi l'vlicrosofl Windows : Minimal menggunakan

processor leknologi Intel Pentium Ill atau 4. Dengru1 Windows 98 SE.

Windows ME. Windows NT 4.0. Winclovvs 2000 dengan service pack 2.

atau Windows XI'. Kebu!uhan RAM Sebesar 128 MB (sru1ga1 d1sarankan

u M. Suyanto, Jv1ultln1cdiu Alat untuk Mcningkatkan J(cunggulan Bersai:ng, (_Yogyakmia: Andi)_ h: 199

Gambar 2. 6: 1/mcline pada Cool Edit

. ·.· .

::J a2 • D'li'-'====================l" :;) tBYt • 01\!l===================tfr! ·~)g1 • 0

~) Layer6

·!,).f::~·LJ

Gan1bar 2. 7: Timeline pada Macromedia Flash MX

Timeline Pada Macromedia Flash MX

Dalam Macromedia Flash semua jalan cerila dialur pada ttmeline,

kapan aktor harus rnuncul dan kapan menghilang, atau kapan efek suara

harus ada. alau musik latar mengalun, atau kapan munculnya suatu objek.

Masalah kapan disini adalah masalah waktu. Sehingga limcline

rnernpunyai tugas mengatur waktu cerita dan pernunculru1 objek-objek

tertentu. Kornponen ulama dari rime/inc adalah layer. jiwne. dan

playhead

Playhead

Layer Kumpulan Frame

Gambar 2.8: 7/tne Line pada flash

macam objek rumah. tumbuhan. dtm manusia. Sulit bagi

kila untuk mengubah objek tumbuhan sajajika ada objek

manusia diatasnya karena gambar tersebut telab menjadi

satu kesatuan. Lain halnya jika kita menggambar diatas

kertas transparan vang berbeda. akan mudah bagi kita

untuk mengubah masing-masing objek.

Untuk animasi setiap layer memiliki satu timeline.

Artinya layer ""hantu" memiliki timeline dan begitu pula

layer ""tali", masing-masing memiliki gerakan sendiri yang

diatur oleh time/inc. Banyak layer berarti banvak timeline

yang disebut multiple limeline.

Layer tidak hanya untuk objek gambar s11ja,

n1elainkan dapat berupa suara dan tulisan. sehingga akan

lengkaplah movie kita bila terdapat gambar bergerak yang

dilengkapi suara.

2.9 .2. Frame

Hame adalah sebuah gambar dari kumpulan

banyak gambar. Dapat dilihat pada ilustrasi berikut ini.

FRAME 1 2 4 3

Gamhar 2. l J: Jlustrasi Fi"ame pada Roi Film

Perguruan ini memasukkan mata pelajaran umum kedalam

kurikulumnya. Seperti Bahasa lnggris. Belanda. lnclonesia.

berhitung dan lainnva. Selain itu dikenalkan Sistem Perpustakaan

dengan mengimpor atau membeli buku-buku ke luar negeri. la

sendiri rajin 1nengarang buku pel'liaran uniuk perguruannya.

Perguruan Diniyyah Puteri Pad~mg Panjang merupakan

Pondok Pesantren Modern Khusus Puteri terletak di kawasan kota

Padang Panjang Sumatera Barnt Didirikan oleh lbunda Rahrnah

EL Yunusiyyah pada tanggal 1 November 1923 pada zmmm

pemerintahan Belanda di Indonesia. Rahmah EL Yunusin·ah

mendirikan Perguruan Diniyyah Puleri pada saat beliau berusia 23

tahun setelah mendapatkan inspirasi ketika mengikuli pendidikan

pada Dini\'yal1 School yang didirikan oleh kakak kandungnya

Zainuddin Labay EL YunusY di tahun 1915.

Pada awal berdiri, Perguruan Diniyyah Puteri Padang

Pru1jang hanya menyediakan progran1 pendidikan se1ingkat

Madrasah Tsanawiyah dengan nama Diniyyah Menengal1 Pertama

(DMP). Kernudian. se!elah beijalan 15 tahun. lbunda Rahmah EL

Yunusi\'yah membuka program pendidikan lm1julan setingkat

Madrasal1 Aliyah dengan nama Kulliyatul Mu'alimal EL

lslamiyyah (KM!). Pendidikan yang diselenggarakan bertujuan

mencetak para kader-kader muslimah yang mampu menjadi ibu

pendidik di tengah masyarakat. Sistem yang diterapkan adalal1

'hoarding school' yakni pembinaan anak didik secara terpadu baik

di sekolah maupun di asrama

Saat ini, Perguruan Diniyyah Puteri Padru1g Panjang telah

berkembang jauh dengan memiliki lima program pendidikan mulai

dari tingkat Tamm1 Kanak-kanak sampm Sekolah Tinggi.

Menjelm1g usia ke 80 tahun, pada bulmi Agustus 2003, Pergurum1

Diniyyah Puteri melakukan reengineering dalam persiapan menuju

pusat pendidikan !slain berbasis teknologi. Untuk itu. secara

bertahap dm1 berkesinambungan, seluruh elemen pergurumi

melakukan perubahan dan perbaikan besar untuk mencapai tujuan

mulia ·'MENCERDASKAN GENERASI !SLAM".

2.10.2. Visi dan Misi Pergurmm Diniyyah !'uteri

Visi Perguruan Diniyyah Puteri Menjadi lembaga

pendidikm1 Islam yang terus-menerus menyeimbangkan pola

penga.1aran terpadu: Al Qur'm1, hadist, dan keilmum1 modern

terkini dalam nmgka pembentukmi generasi muda Islam Indonesia

vang profesionaL beriman. bertaqwa, dan siap menghadapi

tru1tangan zan1an.

Misi Perguruan Diniyyah Puteri :

L Membentuk puteri yang ber:iiwa Islam dan ibu pendidik yang

cakap dan aktif serla bertm1ggung jawab tentang kesejahteraan

masyarakat dan tanah air alas dasar pengabdian pada Allah

Subhmiahu Wata'ala.

2. Mengembangkan pola pengajaran Islam berbasis !eknologi

secara berkesina1nbungan dalru11 upaya 1nen1perkaya khasanah

dunia pendidikan Islam sampai akhir zaman.

30 Merancang, n1engen1bangkan dan n1en1berikan pengaJaran

Islam sebagai solusi kehidupan dalam bentuk kajian praklis

dalam rangka pengabdian kepada masyaraka! clan tanah air.

2.l0.3. Stmktur Organisasi Pergurnan Diniyyah Pnteri

I Bi dang Sa1uan

Penga\vas Intern

PENGURUS YA Y ASAN Rahmah El Yunusiyyah

Pin1pinan Perguruan

Wakil Pimpinan Perguruan

------------------- -l~ __ s_e_k_re_l_a_ri_s_~

Bi dang Bidang Pendidikan IZeuangan

Dan Dan Pengajaran Persona1ia

Bi dang ll11HS

Dan Ht

I( eI}l

an1a s

Bidang R. Tangga.

Pcmb. In1fastruktur&

1(ca1nanan

Gambar 2. l 2. Srrukrur Uta ma Perguruan /JiniJJ'ah Pu1eri Padang Panjang

Bidang Pendidikan dan Pengajaran

KEPALA BIDANG PENDIDIKAN & PENGAJARAN

I I I I

KEPALA KETUA SEKOLAH Kepala KM! Kepala DMP Kepa Ml KEPALA TKI

TINGGI ILMU AS RAMA TARBIYYAH

I (STIT)

I I I I

Adm KETUA I KETUAll KETUA 111 WAKA WAKA WAKA Asrama BIDANG BIDANG WA~ KESISWAAN KURIKULUM KURIKULUM KURIKULUM &Guru AKADEMIK KEUANGAN MAHASISWA

KURIKU UM Asrama

I I -KETUA KE TUA KETUA

'RDGRAM PROG PROG :TIT- ST PGSD PGTK -

- JURU - ~ ,__ I GURU I GURU I GURU I GURU I =I

BAYAR UKM PUSTAKA I

TATA J I TATA ~ TATAI--- JURU I-- TATA lj LAB. IPA, - USAHA USAHA US AHA BAHASA_!

JSAHA KOMPUTER

I JURU ~ JURU I-- TATA I-- JURU , BAYAR BAYAR USAHA BAYAR

Gambar 2. 13. Struktur Bidang Pendidikan dan Pengajaran

Bidang Keuangan dan Personalia

KEPALA BIDANG KEUANGAN & PERSONALIA

.

I AKUNTANSI I I KEUANGAN I I PERSONALIA I I LOGISTIK I I KOPONTREN I

Gambar 2.14. Struktur Bidang Keuangan dan Personalia

Bidang Humas dan Kerjasama

KEPALABIDANG HUMAS DAN KERJASAMA

HUMAS DAN KEWIRA KERJASAMA USA HAAN

I

I LAUNDRY I I PERCETAKAN I

Gambar 2.15. Struktur Bidang Humas dan Keljasama

Bidang Rnmah Tangga

I KEPALA BIDANG l RUMAH TANGGA

DAPUR I AKTIVA TETAP I I KEBERSIHAN I I TRANSPOR TASI I I KEAMANAN I AS RAMA

Gambar 2.16. Struktur Bidang Rumah Tangga

BAB III

METODOLOGI DAN PERANCANGAN SISTEM

3.1. Analisis Sistem

Teknik promosi Perguruan Diniyyah Puteri s·ebelum menggunakan

teknologi multimedia adalah menggunkan brosur. Yaitu selembar kertas

dengan beberapa gambar dan keterangan tentang perguruan. Karena hanya

menggunakan selembar kertas, tentunya keinginan perguruan untuk

menyampaikan informasi kurang dapat dipenuhi. Selain itu kertaspun

membatasi gerak dalam mendesain penampilan yang menarik.

Untuk itu penulis mencoba teknologi multimedia dalam promosi

Perguruan Diniyyah Puteri. Dengan multimedia informasi yang ingin

disampaikan bisa jauh lebih banyak, lebih menarik, dan lebih berkesan

professional yang tentunya menjadi salah satu keunggulan bersaing dengan

perguruan-perguruan lainnya.

Sistem multimedia sebagai alat untuk keunggulan bersaing, malrn

pengembangan sistem multimedia harus mengikuti tahapan pengembangan

sebagai berikut: mendefinisikan masalah, merancang isi, menulis naskah,

memproduksi sistem, melakukan tes pemakai, menggunakan sistem dan

memelihara sistem gambar 3.1 menunjukkan siklus pengembangan aplikasi

multimedia.

PEMELIHARAAN SISTEM

ANALISIS SI STEM

IMPLEMANTASI SI STEM

Gan1bar 3.1: Siklus penge111bangan aplikasi 1111dtin1edia

Gambar diatas dapat dirinci dan ditunjukkan pada gambar 3.2.

Mendefinisikan Masalah

Merancang Konsep

Merancang Isi

Merancang Naskah

Merancang Grafik

Memproduksi Sistem

Mentes Sistem

Menggunakan Sistem

Memelihara Sistem

Ga111bar 3.2: Rincian siklus pe11ge1nbangan aplikasi 1111J/tin1edia

Aplikasi multimedia sering bernilai strategis atau mempunyai kemampuan

untuk meningkatkan keunggulan bersaing sehingga mempunyai kelayakan

strategis.

Mendefinisikan Masalah

Pada tahap analisis sistem, analisis mempunyai tugas mendefinisikan

masalah sistem, melakukan studi kelayakan dan menganalisis kebutuhan

aplikasi multimedia. Terdapat tiga pertanyaan kunci yang harus dijawab

untuk mendefinisikan masalah, yaitu:

• Apa masalah yang harus diselesaikan dengan multimedia?

• Apa penyebabnya?

• Siapa pemakai akhir yang terlibat?

Maka dari pertanyaan di atas dapat dijawab sebagai berikut :

• Masalah yang harus diselesaikan dengan multimedia adalah bagaimana

menyampaikan informasi sebanyak-banyaknya, menarik dan berkesan

professional dalam mempromosikan Perguruan Diniyyah Puteri.

• Penyebabnya adalah promosi Perguruan Diniyyah Puteri yang selama ini

menggunakan selembar brosur kurang menarik dan kurang

menggambarkan suasana perguruan.

• Pemakai akhirnya adalah Perguruan Diniyyah Puteri Padang Panjang yang

nantinya akan disebarkan pada seminar promosi perguruan dan kalangan

lain yang dinginkan perguruan.

Masalah yang dipelajari dengan Analisis Sistem adalah masalah yang

dihadapi . pemakai. Dengan mempelajari masalah ini, maka analisis

beke1jasama dengan pemakai untuk mendapatkan permasalahan secara kasar.

Langkah-langkah yang hams dijalakan adalah :

1. Mendefinisikan batasan dan sasaran

2. Mendefinisikan masalah yang dihadapi pemakai.

3. Mengidentifikasi penyebab masalah dan ti tile keputusan.

4. Mengidentifikasi pemakai akhir sistem.

5. Memilih prioritas penanganan masalah.

6. Memperkirakan biaya dan manfaat secara kasar

7. Membuat laporan hasil pendefinisian masalah (Proposal Aplikasi).

3.2. Disain Sistem

Pada tahap ini, penulis terlibat dengan perguruan untuk merancang

konsep, isi dan naskah yang menentukan keseluruhan pesan dan isi dari

aplikasi yang akan dibuat. Yang kemudian menghasilkan rancangan sebagai

berikut:

Intro

Menu Utama

l l l l Sejarah Visi dan Struktur Program Tenaga

Perguman Misi Organisasi Pendidikan Pengajar

Gambar 3.3: Hirarki Layar Menu Utama

Galeri

l l Extra Fasilitas

Kurikuler

!.;.)

;., i-~ = '"' ., = 00 ., = s s; "' '?

Sejarah

Sejarah

Gambar 3.4: Hirarki Layar Menu Sejarah

Visi dan Misi

! i

Visi Misi

Gambar 3.5: Hirarki Layar Menu Visi dan lvlisi

:;:: J;1

- ~ ~ ~

t c':; ;:i

§ ::!

§ :::1 ~

~ .... "O bJ) ·-

.... 0 "O <:::l .... .:: Q s

p.. " p.. ~

t .... lt1 '° "" s '""' IS c3

PEN GURUS YA YASAN Rahmah El Yunusiah

Pimpinan Perguruan

Wakil Pimpinan Perguruan

I I I Bidang Bidang Bidang Bidang Bidang Satuan Pendidikan Keuangan Hunms R. Tangga, Pemb.

Pengawas Dan Dan Personalia Dan Infrastruktur&

Internal Pengajaran Kerja Sama Keamanan

I I I Bi dang Bidang Bi dang Bidang Bidang Sa tu an Pendidikan Keuangan Humas R. Tangga, Pemb.

Pengawas Dan Dan Personalia Dan Infrastruktur&

Internal Pengajaran Kerja Sama Keamanan

Gambar 3. 7: Hirarki Layar 1\lfenu Struktur Organisasi

Tekad Siswi

'

Tekad Siswi

Gambar 3.8: Hirarki Layar Menu Tekaa' Siswi.

Extra Kurikuler

Extra Kurikuler

Gambar 3.9: Hirarki Layar Menu Extra Kurikuler

Fasilitas

'

Fasilitas

Gambar 3.10: Hirarki Layar Menu Fasilitas

Galeri

'

Galeri

Gambar 3. 11: Hirarki Layar Menu Galeri

Keluar I I Klik"Menu Utama" tampilkan halaman Menu Utama

Menu Utan1a

Kelu•rrri Sistem

I I

'---,---- Halaman I~ Menu Utarna I

r, 4 I ... I 4 I

"" Klik"Menu Utama" tampilkan halaman Menu Utama ;,,

I' Sejarah I"

Klik"Sejarah" tampilkan halaman sejarah 0 "'

~I I ... .,

I Visi dan -· Klik"Menu Utama" tampi!kan ha!aman Menu Utama I Misi ~ = Klik'Visi dan Misi" tampilkan halaman Vlsi dan Misi I "' I "'

r Struktur "" Klik"Menu Utama" tampilkan halaman Menu Utama -. Organisasi

Klik"Struktur Organisasi" tampilkan halaman Struktur Organisasi ~gram Pendidikan

Klik"Menu Utama" tampilkan halaman Menu Utama I

111 Tekat K!ik"Program Pendidikan" tamp!!kan halaman Program Pendidikan Siswi

Klik"Menu Utama" tampi!kan halaman Menu Utama 1 ~xtra

. Klik'Tenaga Pengajar" tarnpilkan halarnan Tekat Siswi I I r I Kurikuler

I I Klik"Menu Utama" tampilkan halaman Menu Uta ma I I ~ ~ .... . . . 'ITT 1·as11nas I J Kllk"Ex1ra Kuriku!er" tamp1lkan halaman Extra Kunkuler

KHknFasilitas" tampitkan halaman Fasmtas

Klik"Menu Utaman tampllkan halaman Menu Utama

Klik"Menu Utama" tampilkan halaman Menu Utama Fasilitas

Gambar 3.12. State Transition Diagram Halaman Utama

Klik "Kel Si

iar'' Ke!uar 5tem

r I<.eluar

Sejarah

~

•

K!ik"Sejarah" tampilkan halaman Sejarah

Klik"Menu Utama" tampilkan halaman Menu Utama

Klik"Sejarah" tampilkan halaman sejarah

Klik" Sejarah" tampi!kan halaman Sejarah

Klik" Sejarah" tampi!kan ha!aman Sejarah

I

I Klik'Visl dan Misi" tampilkan halaman Visi dan Misi

Klik" Sejarah" tampilkan halaman Sejarah

K!ik~Struktur Organlsasi" tampi!kan ha1aman Struktur Organisasi I Klik'' Sejarah" tampilkan halaman Sejarah

K!ik"Program Pendidikan" tampilkan halaman Program Pendidikan


K!ik''Tenaga Pengajar" tampilkan halaman Tekat Siswi

Klik" Sejarah" tampilkan hafaman Sejarah

Klik"Extra Kurikufer" tampilkan halaman Extra Kurikufer


Klik"Fasilitas" tampilkan halaman Fasititas

Gambar 3.13. State Transition Diarzram Ha/aman Seiarah

Halaman Utan1a

~ Sejarah

Visi dan

I i Misi

Strktur Organisa

·'

r-r Program Pendidik

·-

Tekat

~ Sis\vi

~ .:~~.: i r-+I

Klik'Visi dan Misi" tampilkarr - - - - ., halaman Visi :

dan Misi :

' ' ' Kfik'Visi" - - - - -:- , tampilkan : :

halaman Visi : :

' ' ' ' Klik'Visi dan y· . d M' .

Misi" tampilkan ISl an ISi


Ktik"Visi dan Misi" tampilkan halaman Visi dan Misi


Klik'Visi dan Misi" tampilkan halaman Visi dan Misi

Halaman Uta ma

Sejarah

I rl Visi dan

Misi

,--Strktur ~

:: ...

halaman Visi - - -- K!ik'Visi dan Misi" tampi!kan halaman Visi dan Misi dan Misi

Organisasi

Klik"Misi" tampilkan - - - -

ha!aman Misi

Klik "Keluar" Keluar Sistem ----

Visi I-Misi -'---

'

I Keluar 1~ I

~ l +!'IL I A --

~I Program

Pendidikan

j Tekat SiS\Vi

Klik'Visi dan Misi" tampifkan ha!aman Visi dan Misi

Klik"Struktur Organisasr tampilkan halaman Struktur Organisasi I Klik"Visi dan Misi" tampilkan halaman Visi dan Misi

Klik"Program Pendidikan" tampi!kan halaman Program Pendidikan

r,~ ~

I Klik"Tenaga Pengajar" tampilkan halaman Tekat Sis\Vi I I, --~

K!ik'Visi dan Misi"tarnoilkan halaman Visi dan Misi n rd:::;uiui:::; ]

Klik"Visi dan Mis!" tampi!kan halaman Visi dan Misi

Klik"Extra Kurikuler" tam.pilkan halaman Extra Kurikuler 11 rl I

Klik"Visi dan Mist tampilkan halaman Visi dan Misi

Klik"Fasili!as" tampilkan halaman Fasilitas

Gambar 3.14. State Transition Diaeram Halaman Visi dan Misi

J_C Halaman Utama

~ Scjarah

I fJ Visi dan

Misi

,---Strktur

Klik" Program Pendidikan" tampilkan halaman Program Pendidikan

Klik"Menu Utama" tampi!kan halaman Menu Utama

Klik" Program Pendidikan" tampilkan halaman Program Pendidikan

Ktik" Sejarah" tampi!kan halaman Sejarah

Klik" Program Pendidikan" tampi!kan halaman Program Pendidikan

I ,_ Program

Pendidikan Klik"Visi dan Misi" tampilkan ha!aman Visi dan Misi Organisasi

--

-<lik "Ke!uar" Keluar Sistem --------·

rr:1 Program Pendidikan

j Tekat Sisvvi

K!iJ.( Program Pendidikan" tampilkan halaman Program Pendidikan

Klik"Struktur Organisasi" tampilkan ha!aman Struktur Organisasi I Klik" Program Pend1dikan" tampilkan halaman Program Pendidikan

K1ik"Program Pendldikan" tampifkan halaman Program Pendidikan

K!ik" Program Pendidikan" tampilkan halaman Program Pendidikan Ex-

Klik'Tenaga Pengajar" tampi!kan halaman Tekat Siswi

I Keluar I. I I 1· I Klik"Extra Kurikuler" tampilkan halaman Extra Kuriku!er 111

Ktik" Program Pendidikan" tampilkan ha!aman Program Pendidikan

K!ik"Fasilitas" tampilkan ha!aman Fasilftas

Gambar 3.15. State Transition Diagram Halaman Program Pendidikan

Halainan

Klik" Struktur Organisasi" tampilkan hataman Struktur Organisasi Utama

Klik"Menu Utama" tampi!kan halaman Menu Utama

~ Sejarah

Klik" Struktur Oraanisasi" tami:ilkan halaman Struktur Oroanisasi

Klik" Sejarah" tampilkan ha!aman Sejarah

Visi dan

Klik" Struktur Organisasi" tampilkan halaman Struktur Organisasi I r Misi

I Struktur Strktur

Organisasi I Klik'Visi dan Misi" tampilkan halaman Visi dan Misi

~ Organisasi

K!ik" Struktur Organisasr tampilkan halaman Struktur Organisasl Program Pendidikan

Klik"Struktur Organisasi~·tampilkan halaman Struktur Organisasi I Klik "Keluar" Ke1uar Tekat

Sistem -------- K!ik"Struktur Organisasi" tampilkan halarnan Struktur Organisasi ~ Sis\vi

Klik"Program Pendidikan" tampilkan halaman Program Pendidikan

r

1

1 I Keluarc I

Klik"Struktur Organisasl" tampilkan halaman Struktur Organisasi

F Klik'Tenaga Pengajar" tampilkan halaman Tekat Sis\vi

~ I I I K!lk"Struktur Organisasi" tampilkan halaman Stniktur Organisasi

Klik"Extra Kurikuler" tamp!!kan halaman Extra Kurikuler i -I I

Klik"Struktur Organisasi" tampilkan halaman Struktur Organisasi

Klik"Fasilitas" tampilkan halaman Fasilitas

Gambar 3.16. State Transition DiarEram Halaman Struktur

Halaman

I .

Kllk" Ex-School" tampilkan halaman Ex-School Utama

Klik"Menu Utama" tampilkan ha!aman Menu utama

tr Sejarah

Klikn Ex-Schtior tampilkan halaman Ex-School


Visi dan Klikn Ex-School" tampilkan ha!aman Ex-School I i Misi

.c I Ex-School h Strktur

Klik"Visi dan Misi" tampi!kan halaman Visi dan Misi Organisasi

' ' Klik" Ex-School" tampi!kan halaman Ex-School

?r= Program

Pendidikan

Klik"Struktur Organisasr tampi1kan halaman Struktur Organisasi I Klik "Keluar'' Keluar Tekat

Sistem -------- Klik" Ex-School" tampilkan halaman Ex-School _r- Siswi

Klik"Program Pendidikan" tampi!kan ha!aman Program Pendidikan

l,Qg Klik" Ex-School" tampilkan halaman Ex-Schoo!

Klik'Tenaga Pengajar" tampilkan halaman Tekat Sis\vi

~ Klik" Ex-School" tampi!kan halaman Ex-School

K!fk"Extra Kuriku!er" tampilkan halaman Extra Kurikuler ri i

I I .

I Keluar 1• I

Klik" Ex-Schoor tampilkan halaman Ex-School

Klik"Fasilitas" tampi!kan halaman Fasilitas

Gambar 3.17. State Transition Diagram Halaman Ex-School

Klik" Tenaga Pengajar" tampilkan halaman Tenaga Pengajar

~laman J tam a

~"~" I I'I

Visi dan Misi

,---Strktur

Organisasi


Klik" Tenaaa Penaaiar" tampilkan halaman Tenaqa Penaaiar


K!ik" Tenaga Pengajar" tampifkan ha!aman Tenaga Pengajar

I Tekat

Siswi Klik'Visi dan Misi" tampitkan ha!aman Visi dan Misi

--

rj=1 Program Pendidikan

~ l~ckat

Sis\ vi

Klik "Keluar'' Keluar Sistem --------

Klik" Tenaga Pengajar" tampilkan ha!aman Tenaga Pengajar

Klik"Struktur Organisasr tampilkan halaman Struktur Organisasi f

Klik" Tenaga Pengajar" tampilkan halaman Tenaga Pengajar

K!ik"Program Pendidikan" tampilkan llalaman Program Pendidikan

IE~ Klik" Tenaga Pengajar" tampilkan halaman Tenaga Pengajar / ~

Klik'Tenaga Pengajar" tampilkan halaman Tenaga Pengajar r l~s

j Klik~ Tenaga Pengajar· tampilkan halaman Tekat Sis\Vi I 11 r-Jil

Klik"Extra Kurikuler'' tampi!kan halaman Extra Kuriku!er r K:e~4 I

Klik" Tenaga Pengajar'' tampi!kan halaman Tenaga Peng ajar

K!ik"Fasilitas" tampilkan halaman Fasi!itas

Gambar 3.18. State Transition Diaeram Halaman Tekat Siswi

I !

[ ··c;; I

Klik "Keluar'' Ke!u Sistem

Klik"Play" Vitdeo play

' ' ' ' ' ' ' ' ' L,.

" ·-------

I Keluar 1~ I

Fasilitas

' '

K!ik "Fasllitas" tampi!kan ha!aman Fasilitas

Klik"Menu Utama" tampilkan halaman Menu Vtama

Klik "Fasilitas" tampilkan halaman Fasilitas


Klik "Fasmtas" tampilkan hafaman Fasilitas

I I Klik'Visi dan Misi" tampilkan halaman Visi dan Misi

Kfik "Fasilitas" tampilkan halaman Fasi!itas

Klik''Struktur Organisasi" tampi!kan halaman Struktur Organisasl I Klik "Fasititas" tampilkan halaman Fasilitas

Klik"Program Pendidikan" tampilkan halaman Program Pendidikan

K!ik "Fasmtas" tampi!kan ha!aman Fasmtas

Klik"Tenaga Pengajar" tampilkan halaman Tekat Siswi

Klik "FasiJitas" tampilkan halaman Fasi!itas

Klik"Extra Kuriku!er'' tampilkan halaman Extra Kurikuler

Klik "Fasmtas" tampilkan hafaman Fasilitas

Klik"Fasilitas" tampilkan halaman Fasilitas

Gambar 3.19. State Transition Diagram Halaman Fasilitas

Hal am an Uta ma

r:=r Sejarah

Visi dan

I r Misi

~ Strktur

Organisasi

I Program Pendidikan

Tekat

~ Sisvvi

PIC 1 K!ik "Pie" tampi!kan Pie

PIC2 .. Klik "Pie" tampilkan Pie

~ Klik "Gateri" tampi!kan halaman Galeri

Galeri Halan1an

Klik "Pie" tampilkan PiJ K!ik"Menu Utama" tampilkan halaman Menu Utama Utan1a

PIC3 ~

PIC4 • Klik "Pie" tampilkan Pie

PIC5 K!ik "Pie" tampilkan Pie

-Gambar 3.20. State Transition Diagram Halaman Galen

Klik "Peta" tampilkan halaman Peta Halaman

Peta Klik"fv1enu Uiama" tampilkan halaman Menu Utama Utama

Gambar 3.21. State Transition Diagram Halaman Peta

3.2.3. Rancangan Isi dan Naskah

Scene

Title text

Duration

Description

Camera

Audio

Voiceover

Gambar 3.22: Rancangan Layar Halaman Intro

: Intro

: Logo


30 detik

Clip perjalanan dari lembah Anai menuju Perguruan Diniyyah

Puteri Padang Panjang, muncul animasi logo dengan latar

belakang gerbang perguruan.

POV perjalanan dari lembah Anai menuju gerbang perguruan

Instrument Saluang.Trantition (special effect): Venetian Blind

(VB)

Tidak ada

Menu Utama

Sejarah

Visi dan Misi

Struktur Organ

Prog. Pend

Tekad Siswi

Ex-Scool

Fasilitas

Scene

Title text

Duration

Description

Camera

Audio

c·--·-··-- .. -i

Title Text

SEKILAS KATA PENGATAR TENTANG PERGURUAN DINIYYAH PUTERI

PADANG PANJANG

Animasi Logo

I !li'aleri i i •Peta 1-

11 Keluar ----" --------- ----~-----------------------------------J

Gambar 3_23_ Rancangan Layar Halaman Menu Utama

: Menu Utama

: Perguruan Diniyyah Puteri Padang Panjang

: On Click

: Pilihan menu navigasi

: Tidak ada

: Instrument

Trantition (special effect): Dissolve (DISS)

Voiceover : Tidak ada

Menu Utama

Sejarah

Visi dan Misi

Struktur Organ

Prog. Pend

Tekad Siswi

Scene

Title text

Duration

Description

Camera

Audio

Title Text

SEJARAH PERGURUAN DINIYYAH PUTERI

PADANG PANJANG

Gambar 3.24. Rancangan Layar Halaman Sejarah

: Sejarah Perguruan

: Sejarah Perguruan Diniyyah Puteri Padang Panjang

: On Click

Animasi Logo

A N I M A s I

p I c

: - Pada text sejarah perguruan menggunakan scroll bar.

- Tombol navigasi kembali ke menu utama

: Tidak ada

: Instrument



Menu Utama

Sejarah

Visi dan Misi

Struktur Organ

Prog. Pend

Tekad Siswi

Scene

Title text

Duration

Description

Camera

Audio

Visi

Misi

Title Text

r~,---·-~·"-···---·-----·---~----·--~-1

! I

I

VISl/MISI PERGURUAN DINIYYAH PUTERI

PADANG PANJANG

Gambar 3.25. Rancangm1 Layar Halaman Visi dan Misi

: Visi dan Misi Perguruan

Animasi Logo

A N I M A s I

p I c

Visi dan Misi Perguruan Diniyyah Puteri Padang

Panjang

: On Click

: - Click pada text visi, maka akan muncul visi

- Click pada text misi, maka akan rnuncul misi


: Tidak ada

: Instrument



Title Text

_ _:::::=--===1 I: 'I I 1

ii " Ii

STRUKTUR ORGANISASI STRUKTUR ORGANISASI 11 I PERGURUAN DINIYYAH I 1 I, I

• Struktur Organ.. . 1

1 PUTERI PADANG PANJANG I I 1

Prag. Pend 1

1 1 j'

I

1;:.-;;ilita01

J1,1

~ =·====[· =======:'JI ~ ____ _JI

n=======-=--===···-·1-1-· . Ii I 11 11 11 ,!

I' :1 - I

Visi dan Misi

Menu Utama

Sejarah

Gambar 3.26. Rancangan Layar Halaman Struktur Organisasi

Scene : Struktur Organisasi Pergnruan

Anlmasi Logo

.

.

•

A N I M A s I

p I c

Title text : Struktur Organisasi Perguruan Diniyyah Puteri Padang

Panjang

Duration : On Click

Description : - Menggunakan Scroll bar


Camera : Tidakada

Audio : Instrument

Trantition (special effect) : Dissolve (DISS)

Voiceover : Tidakada

Menu Utama

Sejarah

Visi dan Misi

Struktur Organ

Prag. Pend

Tekad Siswi

Ex-Scool

Fasilitas

TK

Ml

DMP

KMI

r··----, I STIT '!

'-----···

Title Text

PROGRAM PENDIDIKAN PERGURUAN DINIYYAH PUTERI

PADANG PANJANG

--, I !

I l

I I

I

Gambar 3.27. Rancangan Layar Halaman Program Pendidikan

Scene : Program Pendidikan Perguruau

Animasi Logo

A N

•· I M A S. I

p I

•·.· c ·. •.

· ...

·.

Title text : Program Pendidikan Pergurnan Diniyyah Puteri

Padang Panjang

Duration : On Click

Description : - Click pada text navigasi program pendidikan


Camera : Tidak ada

Audio : Instrument



Title Text

Menu Utama

Sejarah

Visi dan Misi

Truktur Organ ,

TEKADSISWI PERGURUAN DINIYYAH PUTERI

PADANG PANJANG

Fasmtas

Gambar 3.28. Rancangan Layar Halaman Tekad Siswi

Scene : Tenaga Pengajar Pergnruan

Animasi Logo

l ' ! I A

I N I I I M I A ' I s I I !

p I c

Title text : Tenaga Pengajar Perguruan Diniyyah Puteri Padang

Panjang

Duration : On Click



Camera : Tidakada

Audio : Instrument



Menu Utama

Sejarah

Visi dan Misi

Struktur Organ

Prog. Pend

Tekad Siswi

Ex-Scool

-

Fasmtas

Title Text

r-----------------------

1

EXTRA KURIKULER PERGURUAN DINIYYAH PUTERI

PADANG PANJANG

Gambar 3-29. Rancangan Layar Halaman Extra Kurikuler

Scene : Extra Knrikulcr

Title text : Extra Kurikuler Perguruan Diniyyah Puteri Padang Panjang

Duration : 180 detik

Description : - Click tombol play pada layer clip

- Video kegiatan extra lnirikuler

Shot 1: Zoom in for CU latihan tenun

Shot 2: Cat dan PAN pada pelatihan Computer

Shot 3: TO dan PAN pada kegiatan muhadharah

Shot 4: CUT dan MS pada latihan Marching Band

Shot 5: CUT dan MS pada latihan Pramuka

Shot 6: Zoom out pada latihan seni puisi

Shot 7: MS pada latihan tari

Shot 8: PAN dan TO pada kegiatan shalat berjama'ah

Shot 9: PAN pada kegiatan pemberian mufrhadat


Camera : Lock Down

Audio : Instrument


Voiceover : Menggambarkan kegiatan extra kulikuler Perguruan

Diniyyah Puteri Padang Panjang.

---··------ rr-Menu Utama 11 II Sejarah

11

II Visi dan Misi I

. ---------···---,. 11 Truktur Organ

II Prag. Pend

Tekad Siswi ---·------

Ex~Scool [___ ----------

Fasilitas

Scene

Title text

Duration

Description

Camera

Audio

Title Text

I I I I .

FASILITAS

I

PIC FASILITAS

'

I .

Gambar 3.30. Rancangan Layar Halaman Fasilitas

: Fasilitas

: Fasilitas Perguruan Diniyyah Puteri Padang Panjang

: On Click

Animasi Logo

A N I M A s I

p I c

.

•.

.

Click text navigasi. Pada layar fasilitas akan

menampilkan gambar.

Tombol navigasi kembali ke menu utama

: Tidak ada

: Instrument


Voiceover : Tidakada

Menu· Uta ma

--r-- --- . PIC I PIC

--~- .. - .... 1

PIC PIC

PIC PIC

PIC PIC

PIC PIC

PIC PIC

PIC PIC

PIC PIC

Gambar 3.31. RancanJ<an Lavar Halaman Galeri

Scene : Galeri

Title text : Galeri

Duration : On Click

A N I

M A s I p I c

Description Click text navigasi. Pada layar galeri akan

menampilkan gambar.


Camera : Tidakada

Audio : Instrument


Voiceover : Tidak ada.

Scene

Title text

Duration

Description

Camera

Audio

Gambar 3.32. Rancanzan Lavar Halaman Peta

: Peta

: Peta

: On Click

Click text navigasi. Pada layar peta akan

menampilkan gambar.


: Tidak ada

: Instrument



3.2.4. Rancangan Grafik

Setelah rancangan isi dan naskah dilakukan perancangan grafic

berupa pengeditan gambar yang akan dimasukkan, merancang suara,

dan merancang gambar animasi.

3.2.5. Memprodnksi Sistem

Pada tahap ini seluruh rancangan dan desain digabungkan dan

disusun dalam timeline pada Macromedia Flash MX yang nantinya

menjadi sebuah aplikasi dan di test. Jika ada yang kurang memuaskan

maka akan diedit ulang.

BAB IV

PENGEMBANGAN DAN IMPLEMENTASI SISTEM

Setelah dilakukan perancangan sebelumnya, kemudian dilakukan

pengembangan dan diimplementasikan kedalam program editing akhir

Macromedia Flash. Pemunculan layer dimulai dari kiri atau frame I. layer yang

framenya berwarna putih berarti pada saat itu framenya tidak menampilkan apa

apa, atau kosong.

4.1. Timeline

4.1.1. Timeline pada Menu Se.iarah.

5 10 15

Do o D

Gamhar 4. I. Timeline pada Menu Sejarah Layer:

Sound

Line

Dapdip

Text Sejarah

Garis

Stop

: Bomact.mp3.

: Line.png convert to graphic.

: dapdip.png convert to graphic.

: Textsejarah.png convert to graphic.

: Garis.png convert to graphic.

: Action Scrip - "stop··.

4.1.2. Timeline pada Menu Visi Misi.

HT Timeline

GJ MisiT ab Text

GJ VisiT ab Text

GJ Misi Tab

GJ Visi Tab

GJ MisiT abButton

GJ VisiT abButton

GJ Abuatas

GJ Abuatas

GJ LINE

GJ Dapdip

GJ TEXT VISI GJ bullet ...............

• • Ill ... • [El

•· • Ill •.• Ill •. • liiill

•· • 11'!1 •. • Ill • • [li'.]

)

)

' ' ' , '

! )

! ' ........... ...... .. .•. • flli1 ; .! '

• )

)

)

5 l~ l D•I

11. D•

111. Do D

D D

D D

D D

D 1.1

• Do

Do

..... ~,cc<:::: ........................................................................ ~~i~ I

) d D

DI•

Layer:

MisiTabText

VisiTab Text

MisiTab

VisiTab

MisiTabButton

VisiTabButton

" r :!

)

)

Gambar 4.2. Timeline pada menu visi misi

D aa 00

Dynamic text "Misi". (sebagai label tab

dalam posisi on).

Dynamic text "Visi". (sebagai label tab

dalam posisi on).

Tab II.pug convert to graphic.

: Tab 1.png convert to graphic.

: Dynamic text "Misi" convert to button.

: Dynamic text "Visi" convert to button.

AbuAtas

AbuAtas

Line

Dapdip

TextVisi

Bullet

TextMisi

I-Iijau

tab.

Garis

Stop

Keterangan :

: Gambar kotak abu-abu gelap sebagai latar

belakang tab button.

: Gambar kotak abu-abu muda.


: Gambar kotak putih convert lo graphic.

: Static text.

: bullet.png.

: Static text.

: Gambar kotak hijau sebagai latar belakang

: Garis.png converl to graphic.

: action script "stop".

Pada frame 1, gambar line.png ditampilkan

Pada frame 1, gambar kotak putih pada layer dapdip

mengalami pergerakan motion tween sampai frame 10. dengan

intensitas alpha color dari 0% pada frame 1 dan 100% pada

frame 10, kemudian menghilang pada frame 11.

Pad a frame 10, gambar Garis.png pada layer garis ditampilkan.

Pada frame 11, layer VisiTabButton, MisiTabButton, Abuatas,

dan Hijau ditampilkan.

Pada Frame 12, layer VisiTabText, VisiTab, dan Text Visi

ditampilkan.

Pada layer stop frame 12 diberikan action script "stop" untuk

menghentikan pergerakan.

Pada frame 13, layer MisiTabText, MisiTab, Bullet dan Text

Misi ditampilkan.

Pada layer stop frame 13 diberikan action script "stop" untuk

menghentikan pergerakan.

Pada layer MisiTabButton, tombol misi diberikan action script

: on (press) {gotoAndStop(J3); }.

Pada layer VisiTabButton, tombol visi diberikan action script :

on (press) {gotoAndStop(J 3); }.

4.1.3. Timeline pada Menu Stmktur Organisasi.

v Timeline

..,:) k1e2

~') ;ou~d

,.:) d0pdip

'..!.) RIJ~'AH TAIJGGA

..;) HUNAS DA!·J f'.EIUt.SAMA

:0.) r:EUANGAN PERSO~!AUA

.) PDDi'.__P~NG

_) STRUTAM/l TFl.E

... ) STRUKTUR UTf.,MA

~ g:ll'ill

:;:; TBL

_} F.IJi'.·1~.H TANGGA

J HUMAS D;\N ):E'<Jti5AMA

:..,) KEUANGAN DAr'l PERSONALJA

_) FENDWJ!'.AIJ DAN PENGAJAJl,AN ~) :{

D +-~~~--~~~~-~~~~~~~~~~-0 _,A, ________ 01. ; 6

D d;:'.;';~. 0 6 . [lo; =;="'''-----------0 _J____ ~oi---• nl D 2b ________________ __.0~1~c__~o~''--~'~!l~c__~o~l~'--~0~1~I

(i11111b11r 4.3. Timeline pat/a menu Stmkwr Organisasi

Layer:

Line2 : line.png convert to graphic.

Sound Aq uariumM enu. mp3.

Dapdip : Gambar bujur sangkar

dengan rectangle tool putih

convert to grajic.

Ru1nah Tangga : Run1ah Tangga. png convert

to ~sraphic.

Humas dan kerjasama : Humas dan kerjasama. png

convert lo gaphic.

l(euangan clan personalia · !(euangan dan pcrsonalia.png

converr lo «?J'GjJhic.

PDDK PENG

STR UT AMA TITLE

Struktur Utama

Garis!

TBL

Rumah Tangga

Humas clan Kerjasarna

J(euangan dtm personalia

: Pdclk_Peng.png convert to

movie clip.

: Struktur Utama Tiltle.png

convert to graphic.

: Struktur Utarna.png convert

to gafic.

: Garis.png

graphic.

convert to

: R1nh ~f'angga.png converr 10

button. Diberi action :

()11 (release) {goto-'ltuf]Jfr~v(56);}

: HumKer.png convert to

button.

Diberi action :

()n (release) {gola-tndP/ay(51);}

: KeuPers convert to button.

Di beri action :

()n (release) {goto.-lndJJf(~V(-16);}

Pendidikan dan pengajaran : PddkPeng. png converl lo

Stop

button. Diberi action :

()n (release) {gotoAndP/ay(-11);}

action "'stop··.

Keterangan

Q line2

Q sound

Q dapdip

Q RUMAH TANGGA

Q HUMAS DAN KERJASAMA

Q KEUANGAI" PERSONALIA

Q PDDKj'ENG

Q STR UTAMA TITLE

Q STRUKTUR UTAMA

Q garisl

~~o~, 10

* • __ µ1 'I HI• ~1. • • IBl r * • Ii • • lil!I o) • QB 'lo • Iii • • lilil >t • (121

• • Iii!! • • lllil: f ~:

, HJ• >----4 • T

15

Gambar 4.3.1. Timeline pada menu Strnktur Organisasi dari ji·ame 1sampai20

Pada frame 1 sampai dengan fram 4, layer line2 dan garis 1

mengalami motion tween dari alpha color 0% sampai

dengan 75%.

Pada frame 4 sampai dengan frame 10, layer line2 dan

garisl mengalami motion tween perubahan ukuran

mengecil.

Pada frame 10 sampai dengan frame 20 :

- Layer line2 dan garis 1 mengalami motion tween

melebar.

- Layer STR UTAMA TITLE dan STRUKTUR

UTAMA mengalami motion tween dan alpha

color 0% menjadi 100% dan melebar.

Selain dari yang tersebut belum ditampilkan.

20

1.

• • •

20 25 35

7QTBl iill!!D. ~ .' . 10. "

··m~

Q

Q RUMAH TANGGA

Q HUMAS Di\N KERJASAMA

Q KE\JANGAN DAN PERSONAUA

Q PENDIDIKAN DAN PENGAJARAN

• • llil *'--! ---~====~a;;!. ===::;;~~II!_• • Ill ~-------,J~lli• ==;=::!..!.___

• ·1~!----~~al • .!:=:=;::~I. __ · o ~----~al•.!:=:::=!11!...' -~

iJ o "'-------------'a"'~ Gambar 4.3.2. Timeline pada menu Struktur Organisasi

dari ft·ame 1sampai40

Pada layer TBL :

Pada frame 20 sampai dengan frame 30, layer

PENDIDIKAN DAN PENGAJARAN mengalami

motion tween perubahan alpha color dari 0%

menjadi 100% dan pergerakan dari kanan ke kiri.


KEUANGAN DAN PERSONALIA mengalami

motion tween perubahan alpha color dari 0%

menjadi I 00% dan pergerakan dari kanan ke kiri.


HUMAS DAN KERJASAMA mengalami motion

tween perubahan alpha color dari 0% menjadi I 00%

dan pergerakan dari kanan ke kiri.


RUMAH TANGGA mengalami motion tween

perubahan alpha color dari 0% menjadi I 00% dan

pergerakan dari kanan ke kiri.

- Pada frame 40 layer stop diberi action script "stop", untuk

menghentikan seluruh pergerakan pada timeline utama.

[iJ line2

[iJ KEUANGAN PERSONALIA

<>l·&\Dfo 45

• • 0 . ·~~ . ·~,·~ • • II ---• • [ill~--• • mi'

• ·.11 .. · .. ·.···L .. · D• D • • 1211 D

• • lllli •o

• lo ol~ Gambar 4.3.3. Timeline pada menu Siruktur Orga11isasi

dari ji·ame 40 sampai 45

Pada layer sound, dari frame 41 sampai dengan frame 45

diberi sound AquariumMenu.mp3, yang menyebabkan

suarajika frame dijalankan.

Pada layer dapdip, gambar kotak putih diberi alpha color

0% pada frame 41, 100% pada frame 43, dan 0% pada

frame 45 dengan motion tween yang; menghasilkan efek

berkedip.

Pada frame 43, layer PDDK_PENG (Pddk_Peng.png)

ditampilkan.

Pada frame 45 layer stop diberi action script "stop".

Layer RUMAH TANGGA, HUMAS DAN KERJASAMA,

KEUANGAN DAN PERSONALJA, STR UTAMA

TITLE, dan STRUKTUR UTAMA tidak ditampilkan.

~tfilDJ11s so



suarajika frame dijalankan.


0% pad a frame 46, 100% pada frame 48, dan 0% pada

frame 50 dengan motion tween yang menghasilkan efek

berkedip.

Pada frame 48, layer KEUANGAN DAN PERSONALIA

(Keuangan dan Personalia.png) ditampilkan.


Layer RUMAH TANGGA, HUMAS DAN KERJASAMA,

PDDK_PENG, STR UTAMA TITLE, dan STRUKTUR

UTAMA tidak ditampilkan.

Gambar 4.3.5. Timeline pada menu Struktur Organisasi dari jiw11e 50 sampai SS



suara j ika frame dijalankan.


0% pada frame 51, 100% pada frame 53, dan 0% pada

frame 55 dengan motion tween yang menghasilkan efek

berkedip.

Pada frame 53, layer HUMAS DAN KERJASAMA

(1-!umas dan Kejasama.png) ditampilkan.


Layer RUMAH TANGGA, KEUANGAN DAN

PERSONALIA, PDDK_PENG, STR UTAMA TITLE, dan

STRUKTUR UTAMA tidak ditampilkan.

Gambar 4.3. 6. Timeline pada menu Struktur Organisasi dari frame 55 sampai 60



suara j ika frame dijalankan.

Pada layer dapdip, gambar kotak putih diberi alpha color i

0% pada frame 56, 100% pada frame 58,.; dan 0% pada

4.l.4. Timeline pada Menu Program Pemliclilrnn.

v Timeline

'..:_)Sound

.:.;J line2

..J clai;d1p

-.:.) STIT

:;_J KMI

.)DMP

~)Ml

",) TK'l

-:.;; Prog text 5HT

-~ Prog text ~Ml

..!) Prog text DMP

::;J Pto{l text Ml

J Prog text TU

,;c~,,So~l s rn 1s zo ~5 30 3-; ® 45 so rs ~o ts )

D ~'~----------!!JQC.-.:=JJJsE>::=Jl!SE::JJ121'::::::J!JS~::Jl!2 D l,...!.r----4!" D ~,( .. e.(o D ~ D 7l _____ _

Gl i D 0h __ _

D 6 D c~--------~~-"~·-=

D ,6____ DllHl:--ll!

• El l ---·-rr-1 .. ,...,-. " - "

• 0 6 lit>-)!11,...__;11

~1 PROG PDC>l~ DEPAN

~)STU

• D ~; ___ -."D•l-1<1~<1 • D ~ nl.:JG • D ~;_____ rr_',"'-=-==;=L

~KMJ .:_;) DMP

.:_;)Ml

~) TKI

•Di fl:- , • D 6 -a~"'· ==r""--• D ;c6 ___ fh==~'---~ 0 6

(iambar 4.4. Time!i11e pada menu Program Pemlidika11

Layer:

Sound : AquariumMenu.mp3.

Line2 : Line. png Conver! to graphic.

Dapdip : Gambar bujur sangkar dengan rectangle

tool putih converr ro graphic.

STIT : STIT png Conver! lo graphic.

KM! : KMLpng Convert ro graphic.

DMP : DMP.png Conver! lo graphic.

Ml : ML png Conver! to graphic.

TKI : TKJ.png Conver! ro graphic.

Prog text STIT : Dynamic text (keterangan STIT) Converr lo

graphic.

Prog text KM!

Prog text DMP

Prog text MI

Prog text TKI

: Dynamic text (keterangan KMI) Convert to

graphic.

: Dynamic text (Keterangan DMP) Convert

to graphic.

: Dynamic text (Keterangan Ml) Convert to

graphic.

: Dynamic text (keterangan TKI) Convert to

graphic.

Prog PDDK Depan: ProgPDDK bgr.png Convert to graphic.

STIT

KMI

DMP

MI

TKI

Garis!

Stop

: Tb! STIT.png convert to button.

: Tb! KMI.png convert to button.

: Tb! DMP.png convert to button.

: Tb! Ml.png convert to button.

: Tb! TKI.png convert to button.


: Action script "stop".

Keterangan :

Button

Q Sound

t;iiine2 .D dapdip

Q STIT

Q KM!

DDMP

QM!

Q TKI

• • li1

Pada layer line2, line.png pada fram<: 1 diberi alpha color

0%, 75% pada frame 4 dan melebar pada frame 10 dengan

motion tween

Pada layer dapdip, kotak putih diberi alpha color 0% pada

frame 1, 100% pada frame 3, dan 0% pada frame 4 untuk

mengasilkan efek berkedip.

Pada layer garisl, garis.png pada frame 1 diberi alpha color

0%, 75% pada frame 4 dan melebar pada frame 10 dengan

motion tween.

Layer Sound, STIT sampai TKI belum ditampilkan.

15 20

[iJ Sound [iJ ~ne2

• •

[iJ dapdip

[!) STIT

[jJ KM!

• • •

•

•

D

ll!l GJ DMP • • fl GJ Ml • • D [jJ TK! • fl . WJ ProgtextSTIT • • ~ , OOH•>->•

~----~-"F-~'-'-r---'-9 Q Prog text KMI • !Im . D GJ p;~-~--t~;to~1p-"- • • mJ .----·~""-=~=-=io Q ----··-- • [i -, D

······························ ····· ~_,~r-c~~~~~-~--"j

D

Gambar 4.4.2. Timeline pada menu Program Pendidikan dari frame 10 sampai 33

Pada layer Prog text STIT, frame 25 t·ext STIT diberi alpha

color 0%, pada frame 28 alpha color 100% dan bergerak

keatas. Pada frame 33 bergerak kebawah dengan motion

tween tiap perubahan.

Pada layer Prog text KMI, frame 22 text KMI diberi alpha




Pada layer Prog text DMP, frame 19 ti~xt DMP diberi alpha




Pada layer Prog text MI, frame 16 text MI diberi alpha

color 0%, pada frame 19 alpha color I 00% dan bergerak



Pada layer Prog text TKI, frame 13 text TKI diberi alpha

color 0%, pada frame 16 alpha color I 00% dan bergerak



Pada layer Prog PDDK DEPAN, diberi alpha color 0%

pada frame 12 dan 100% pada frame 15 untuk memberikan

efekfad in dengan motion tween.

Pada layer STIT, STIT button diberi alpha color 0% pada

frame 19, dan 100% pada frame 29 dengan dipindahkan Ice

kiri motion tween.

Pada layer KMI, KMI button diberi alpha color 0% pada

frame 17, dan 100% pada frame 27 dengan dipindahkan ke

kiri motion tween.

Pada layer DMP, DMP button diberi alpha color 0% pada

frame 15, dan 100% pada frame 25 dengan dipindahkan ke

kiri motion tween.

Pada layer MI, MI button diberi alpha Golor 0% pada frame

13, dan I 00% pada frame 23 dengan dipindahkan ke kiri

motion tween.

Pada layer TKI, TKI button diberi alpha color 0% pada

frame I I, dan 100% pada frame 21 dengan dipindahkan ke

kiri motion tween.

Pada layer stop, frame 33 diberi action script "stop".

Layer line2 dan garis tetap ditampilkan.

Selain Sound, dapdip sampai TKI belum ditampilkan.

Button

Pad a frame 34 layer sound dimasukkan

AquariumMenu.mp3 sampai dengan frame 40.

Pada layer dadpdip, dari frame 34 sampai dengan frame 40

gambar kotak putih diberi alpha color 0% dan 100% di tiap

framenya secara bergantian untuk memberikan efek

berkedip-kedip.

Layer TKI ditampilkan pada frame 40.

Pada frame 40, layer stop diberi action script "stop" untuk

menghentikan semua pergerakan di timeline utama.

Layer Button STIT, KMI, DMP, MI, dan TKI tetap

ditampilkan.

Selain dari yang tersebut tidak ditampilkan.

v-Timeline

Q Sound

W/line2

Q dapdip

Q STIT

Q KM!

Q DMP

Q MI

Q TKI

CiJ Prog text STIT Q Prog text KM!

WI Prog text DMP

[£) Prcig text MI

Prag text TKI ~·;c,

PROG PDDK DEPAN

·~~of 45

• • 1111 k::=okl • • Iii • . ~ J;Q.1.1.1.1 • • II • • [§]

• • lll!I • • D • • Ill • • [fill

• • Ill • • IJ¥il

• • • • ffi]

-:=gg r

! !_ olg

Gambar 4.4.4. Timeline pada menu Program Pendidikan dari frame 41 sampai 46

Pad a frame 41 layer sound dimasuk:kan





berkedip-kedip.

Layer MI ditampilkan pada frame 46.



Button

Layer Button STIT, KM!, DMP, Ml, dan TKI tetap

ditampilkan.


vTimeline

Q Sound

[iJ line2

Q dapdip

Q STIT

Q KM!

CiJDMP

GJMI

Q TKI

CiJ Prog text STIT

WJ Prog text KM!

• CiJ r;~; t~;t 0~1;; GJ P_r.~g- _t~~~-!~I ______ _

! 50

k::::=!llJ .... 1£1 D • • lllil • • Ill • • [Nfil Q;.1.1.1.1.1 • • Im'

----• • li1 i

: : ~ r-=:gg • • lllil'

Gambar 4.4.5. Timeline pada menu Program Pe11didika11 dariji·ame 47 sampai 52






berkedip-kedip.

Layer DMP ditampilkan pada frame 52.



Layer Button STIT, KM!, DMP, MI, dan TKI tetap

ditampilkan.


H -,.. Timeline

Button

Gambar 4.4.6. Timeline pada menu Program Pe11didika11 dariframe 53 sampai 58

Pada frame 53 layer sound dimasukkan




Button


berkedip-kedip.

Layer KM! ditampilkan pada frame 58.



Layer Button STIT, KMI, DMP, Ml, dan TKJ tetap

ditampilkan.


Gambar 4.4. 7. Timeli11e pada menu Program Pe11didika11 dari frame 59 sampai 64




gambar kotak putih diberi alpha color 0% dan I 00% di tiap

framenya secara bergantian unluk memberikan efek

berkedip-kedip.

Layer STIT ditampilkan pada frame 64.



Layer Button ST!T, KMI, DMP, MI, dan TKI tetap

ditampilkan.


4.1.5. Timeline pada Menu Tekad Siswi.

Layer:

Gambar 4.5. Timeli11e pada menu Tekad Siswi

Line2

Dapdip

TEKAD


: Gambar kotak putih convert to graphic.

: Tekad.png Convert to graphic.

Garis : Garis.png convert to graphic.

Stop : action script "stop".

Keterangan :

- Pada frame 1, layer line2 ditampilkan.

- Pada layer dapdip, gambar kotak putih ditampilkan dari

frame I sampai frame 7 dengan intensitas alpha color

bergantian setiap framenya 0% dan I 00% dimulai pada

frame I dengan intensitas alpha color I 00%.

- Pada frame 7, layer tekad dan layer garis ditampilkan.

- Pada frame 7, layer stop diberi action scrip "stop".

4.1.6. Timeline pada Menu Extra Kurikuler.

Gambar 4. 6. Timeline pad a menu Ekstra Kurikuler

Layer:

DP.mpg

Layar

: Dinput.mpg embedded Video.

: Gambar kotak dengan rectangle tool dengan warna

hijau dan lis kuning convert to graphic.

PlayBack:

Line

Garis

Stop

GetFwd : Button get forward yang diberi action

script: on (press) {nextFrameOJ.

Getback : Button get back yang diberi action scrip :

on (press) {prev1'rame0}.

Play : Button play yang diberi action scrip: on

(press) {playO}.

Pause : Button pause yang diberi action scrip: on

(press) {stopOJ.

Stop : Button stop yang diberi action scrip: on

(press) {gotoAndStop(l)}.

Playback : LatarPB.png.




Keterangan :

Pada frame DP.mpg, Dinput.mpg ditampilkan pada frame 1

sampai frame 11.000.

Gambar pada layer berfungsi sebagai latar DP.mpg yang

ditampilkan dari frame 1 sampai l l.000.

Layer Playback yang terdiri dari GetFwd, Getback, Play,

Pause, Stop berfungsi sebagai navigasi video dan layer

playback sebagai latar tombol navigasi.

Layer Line dan Garis ditampilkan pada frame sampai

frame 11.000.

Pada layer Stop diberi action script "stop" pada frame I

dan 11.000.

4.1.7. Timeline pada Menu Fasilitas.

20 30

D

D

• D

Gambar 4. 7. Timeli11e pada menu Fasilitas

Layer:

Asrama : Fasilitas Asrama.MovieClip.

PDDK : Fasilitas PDDK.MovieClip.

Animl

Gambar

Bawah

feet menu!

: Anim l .MovieClipt. (berisi gambar garis yang

bergerak looping).

: Gambar kotak hijau sebagai latar belakang convert

to graphic.

: bck.MovieClip.

: Gambar kotak dengan rectangle tool convert to

graphic.

effect menu2 : Gambar kotak dengan rectangle tool convert to

grafic.

F Asrama

FPDDK

Line

Garis

Stop

: Dynamic text Fasilitas Asrama convert to

button.dan diberi action scrip : on (release)

{gotoAndStop(31) }.

: Dynamic text Fasilitas Pendidikan convert to

button dan diberi action scrip : on (release)

{gotoAndStop(31) }.




Keterangan :

[() Arama

[() PDDK

[() Anim!

[() Gambar .QBawah t~J efect menul Ci) efect menu2

[iJ F Asrama

[() F PDDK

10 15

D•~•

Gambar 4. 7.1. Timeline pada menu F'asilitas dari frame 1sampai16

- Pada layer Anim I, Anim 1.MovieCip ditarnpilkan pada frame.

- Pada layer Gambar, gambar kotak hijau ditampilkan pada

frame I.

- Pada layer effect menu2 terdapat gambar kotak dengan warna

radial gradient hijau putih, dimana pada frame 1 bergerak ke

kiri sampai frame 6 dengan alpha color 50%, kemudian alpha

color 0% pada frame 10 dengan motion tween. yang

menghasilkan efek seolah-olah tombol fasilitas asrama muncul

melesat.

- Pada layer effect menul terdapat gambar kotak dengan warna

radial gradient hijau putih, dimana pada frame 6 bergerak ke

kiri sampai frame 11 dengan alpha color 50%, kemudian alpha

color 0% pada frame 15 dengan motion tween. yang

menghasilkan efek seolah-olah tombol fasilitas pendidikan

muncul melesat.

- Pada layer F PDDK, tombol fasilitas pendidikan diberi alpha

color 0% pada frame 6 dan 100% pada frame 11 dengan motion

tween.

- Pada layer F Asrama, tombol fasilitas pendidikan diberi alpha

color 0% pada frame 11 dan 100% pada frame 16 dengan

111otion 11veen.

- Pada layer line, line.png ditampilkan pada frame 1.

- Pada layer garis, garis.png ditampilkan pada frame 1.

- Layer yang belum disebutkan belum ditampilkan.

Pada layer Bawah, bck.MovieClip diberi alpha color 0% pada

frame 1 clan 100% pada frame 30 dengan motion tween.

Pada layer stop, frame 30, 31, dan 32 diberi action scrip "stop"

untuk menghentikan pergerakan pada timeline utama.

Pada frame 31, menu fasilitas pendidikan pada layer PDDK

ditampilkan.

Pada frame 32, menu fasilitas pendidikan tidak ditampilkan dan

menu fasilitas asrama pada layer asrama ditampilkan.

4.1.8. Timeline pada Menu Galeri.

Layer:

Gamhar 4.8. Timeline pada menu Galeri

Back : Static Text convert to bu/Ion.

PIC : ZLEY.jpg, REY jpg, IS.jpg, HN.jpg, Pramukajpg,

Upacara.jpg, Pelatihan.jpg, Mahasiswa.jpg,

Kongresjpg, Pembangunan.jpg, Asrama.jpg, dan

AsramaDepan.jpg.

TITLE

Button:

: Static Text convert to graphic.

Asrama : AsramaDepan.jpg convert to button.

Dengan action scrip :

on (release) {gotoAndStop(106)}.

AsramaJadul : Asrama.jpg convert to button.

Ban gun

Kongres

MHS

Pelatihan

Upacara


on (release) (gotoAndStop(107)}.

: Pembangunan.jpg convert to button.


on (release) {gotoAndStop(l 08)}.

: KongresJpg convert to button.



: Mahasiswa.jpg convert to button.


on (release) fr;otoAndStop(l 10)}.

: Pelatihan.jpg convert to button.


on (release) {gotoAndStop(l l l)}.

: Upacara.jpg convert to button.



Pramuka

HN

IS

REY

ZLEY

ButtonBck

: Pramuka.jpg convert to button.


on (release) {gotoAndStop(J 13)}.

: HN .jpg convert to button.


011 (release) {gotoA11dStop(l J4)}.

: IS.jpg convert to button.



: REY.jpg convert to button.


011 (release) {gotoAndStop(J 16)).

: ZLEY.jpg convert to button.


on (release) {gotoAndStop(J 17)).

: 12 buah gambar segi 1~mpat dengan rectangle

tool convert to grafic.

ButtonMUText : Static Text~ "Menu Utama".

ButtonMU : Ova!Button-green dengan action script :

Lis

AnimBck

on (l·elease) {loadMovieNum("MU.swf', 0) }.

: Gambar segi empat tanpa fill color dengan

stroke color kuning.

: AnimPic.MovieClip.

Logo : DPEmbos.png convert 10 Movie Clip.

1-Iiasan Gambar dengan rectangle tool convert to

graphic.

Garis : garis.png convert to graphic.

Stop : Action scrip "stop".

Keterangan :

Gambar 4.8.1. Time/i11e pada menu Galeri dari frame 1 sampai 76

Pada layer ZLEY, ZLEY .button diberi alpha color 0% pada

frame 15, I 00% pada frame 34, dan sedikit bergerak

kebawah pada frame 43 dengan motion tween.

Pada layer REY, REY.button diberi alpha color 0% pada

frame 18, 100% pada frame 37, dan sedikit bergerak


Pada layer IS, IS.button diberi alpha color 0% pada frame

21, I 00% pada frame 40, dan sedikit bergerak kebawah

pada frame 49 dengan motion tween.

Pada layer HN, I-IN.button diberi alpha color 0% pada

frame 24, I 00% pada frame 43, clan sedikit bergerak


Pada layer Pramuka, Pramuka.button diberi alpha color 0%

pada frame 27, 100% pada frame 46, dan sedikit bergerak


Pada layer Upacara, Upacara.button diberi alpha color 0%

pada frame 30, l 00% pada frame 49, dan sedikit bergerak

kebawah pada frame 5 8 dengan motion tween.

Pada layer Pelatihan, Pelatihan.button diberi alpha color

0% pada frame 33, 100% pada frame 52, dan sedikit

bergerak kebawah pada frame 61 dengan motion tween.

Pada layer Mahasiswa, Mahasiswa.button diberi alpha color



Pada layer Kongres, Kongres.button diberi alpha color 0%



Pada layer bangun, Pembangunan.button diberi alpha color



Pada layer AsramaJadul, Asrama.Jadul.button diberi alpha

color 0% pada frame 44, 100% pada frame 64, dan sedikit


Pada layer Asrama, Asrama.button diberi alpha color 0%



Pada timeline diatas dapat dilihat bahwa layer yang berisi

button yang pertama muncul atau ditampilkan adalah layer

ZLEY yang berisi button ZLEY yang kemudian diikuti

layer lain berurutan kebawah.

5 10 15

I~

1 ..

mill :'i-----~-1~' ~------

Gambar 4.8.2. Timeline pa<la menu Galeri <lari frame 1 sampai 15

ButtonBck.graphic pada layer ButtonBck, frame 1 diberi

alpha color 0% pada frame 1 dan 100% pada frame 15

dengan 1110/ion tlveen.

Layer buttonMUText dan Button MU belum ditampilkan.

Layer Lis, AnimBack, Line, Hiasan, dan Garis ditampilkan

dari frame 1 .

Logo.MovieClip pada layer Logo, frame 1 diberi alpha

color 0% pada frame I dan I 00% pada frame 15 sambil

bergerak ke kanan dengan motion tween.

TITLE

G11mb11r 4.8.3. Timeline p11d11 menu Galeri dari frame 76 s11mp11i 90 p11d11 /11yer TITLE

Pada frame 76, Title.Graphic pada layer TITLE diberi alpha

color 0%, dan I 00% pada frame 90 dengan motion tween.

Q ButtonMUT ext [jj ButtonMU ..

.;i;i!'. ~· [J ,}o 95 100 10

: : t~ ~I: °1:::1:1 G11mb11r 4.8.4. Timeline p11d11 layer ButtonMUText dnn

ButtonMU, Timeline pada menu Galeri dari frame 91

sampai I 05 pada layer ButtonMUText dan ButtonMU

Pada frame 91, Ova!Button pada layer ButtonMlJ diberi

alpha color 0%, dan posisi dipindahkan kebawah pada

frame 100 dengan alpha color 100%, kemudian posisi

sedikit dipindahkan ke atas pada frame 105.

Q Back Qprc Q TITLE

v Beutton

UJ Asrama

Q AsramaJadul

Q Bangun·

Q Kongres

CiJMHS

Q Pe1atihan

Q Upacara

t£J Pramuka

CiJHN

Q1s

CiJREY

Q ZLEY"

~ .ButtonBck

Q ButtonMUText

Q ButtonMU

• . mil • • GB • • ll!ll • • lill • • [fill D• • • G D• • . lill D•

• D D• • • ll!ll , D•

• • llll D• • lill

,, • llEI ,, •

• •

Gambar 4.8.5. Timeline pada menu Galeri dari ji-ame 106 sampai 117

D

D D 0

D D

D D 0

0 0 0

0 0 D

D D

Pada frame 106, layer Back, TITLE, Asrama, AsramaJadul, Bangun,

Kongres, MHS, Pelatihan, Upacara, HN, IS, REY,. ZLEY, ButtonBck,

ButtonMUText, ButtonMU, Lis, AnimBck, dan Logo isinya diberi alpha

color 20 %.

Frame l 06 pada layer PIC ditampilan ZLEY.MovieClip, REY.MovieClip

pada frame 107, IS.MovieClip pada frame 108, IS.MovieClip pada frame

109, HN.MovieClip pada frame 110, Pramuka.MovieC!ip pada frame 111,

Upacara.MovieClip pada frame 112, Pelatihan.MovieClip pada frame 113,

Kongres.MovieClip pada frame 114, Pembangunan.MovieClip pada frame

115, Asrama.MovieClip pada frame 116, dan AsramaDepan.MovieClip

pada frame 117.

Pada layer Stop, frame 106 sampai dengan frame J 17 dibgeri action scrip

"stop" di setiap framenya.

4.1.7. Timeline pada Menu Utama.

i: v Timeline

7 eJ ENDING

Q ENDING QuNE Q TffiETEXT Qroo [i)""' [iJ jam

? 8' Anlm logo

[i)"'""" (iJ LOGO SETENG'\H

GJ TEXT LOGO

CiJtOGO [i) l

[i)' [i) 3

tiJ 'te-;t·b;;tt~n ?'B-Button

[jJ exit

• ..-;,Guide: 1

[i) 7

[i) 6

[i) 5 [i); [i)' . l'.ii2 ··-- - trii-

,;·e-~~ ---·----·-·-·-~-·

--·· "'(!) ;i<#-~ .--~ -GJ-"iu9ht _______ , -"tilcft~--"'""" Gi~Ft' ---

""tti1~-~--;;-~;;h-----GJ-MASJID -Q-b~,k Ground

~~~1 ; : ~ :::: .. ===========--------'":!~=. " ~.i 0

Ill 'f----------0 'f---------0 -\-----------·---~---~-~ Ill ob 0 T-----------------"j'~--c=~--"l '

f ~1. ' 0 r .. ,___I. ' .

' ~'· . ' Eiil [] I.I.I.I.I._. r Gl T----i·

o·i------------·---__J~~,l,~"======·~lW~-·ll~·l.~!·~·..11' IE! : , ,C I.I.I.I.I. • r

0 ~---------------------~'~·~' . o' m ,1-------'""'''===========o============='="'·'--!1' 0 'f-----------·~·-------"--~·r-'l 0 ~--------~--'""''1'~o=========='===o;='="''"-'..J1 ID nl. >----:---- • --

0 .l------~-J!!.rn••to=='==='=o====='====r=="1!:•~-·-·-..J1' m;~-::::::;:::::::iJ;:;~"~··~~~~~~~~~~~~·=1.·::::::::::=:::::··:::::··:::::~' ci'_f nl0 .:..:..:....::_!. - ,, r

m· nl. .:.:..1.. -- -- - t

:!-t-"===============•·"-'·--------~·'-'...··-'-'--·.J!' ~ ........ · ., ~.+--------~~'-'---'-'-'-'-'-'--'-'-~,.-•. -.. ...,... ... '-'--.~ .. '"'l El" - --_ ----> ·;_-_.' __ .

:.,.,El'. - ,. ------ ___ - -, -~---.-1.'f-~---.-----.-------.. ~--.-.•.. "'--..~ .. -.. ~-14, .

-~"j£i:"~'l 'I--~---------~-"~-'_;.._;..~-~···•·c.c· .··c. ·= "-·~ ·'~"1' •• -l!il _____ .. _·---~·····~-··_ .. ·-"Jo··~,,

y~1j~~r;:tr:W;b~1ii?1!il~RMr@~t~4t17Z1!;1:t~fl'.l,!I.: ·-----------------------=""•" .,_,,,.~ Gambar 4.9. Timeline pada Menu Utama

Layer:

Ending:

Ending : Ending.MovieClip.

Line

TITLE TEXT

TEXT

l.,ogo

Jam

Anim Logo

TextButton

Button

: Yellowline.png conver to graphic.

: TitleText.png conver to graphic.

: TEXT.MovieClip.

: DPembos.png convert to graphic.

: Jam.MovieClip.

Sound : Whoosh.mp3

LOGO SETENGAH : LOGO SPARO.png

conver to graphic.

TEXT LOGO Bitmap4.png convert to

gnqJhic.

LOGO : DPembos.png convert to graphic.

I: LOGO SPARO.png convert to graphic.

2: Bitmap4.png convert to graphic.

3: DPembos.png convert to graphic.

: Dynamic text convert to graphic.

Exit : Exit button dengan action script :

on (release) {unloadMovieNum(l);

gotoAndStop{65);}.

Guid : Layer guid.

: OvalButton-green dengan action

script:

on (release) {gotoAndPlay(61);

loadMovieNum("FASILITAS.swf',

l);}.

2 : OvalButton··green dengan action

script:

on (i·elease) (gotoAndPlay(61);

loadMovieNum(''film.s11f", l);}.

3 : OvalButton-green dengan

action script :

011 (release) {gotoAndPlay(61);

loadMovieN1n11("TEKAD

SISWLsttf", 1);}.

4 : Ova!Button -green dengan

action script :


loadMovieNum(''PROGPENDIDI

KAN.swf'. 1);}.

5 :Ova!Button-green dengan

action script:


loadMovieN.'1111("SO.swf', 1);}.

6 : Ova!Button-green dengan

action script:


loadMovieNum("VISI MISl.s11:f'', I);}.

Hiasan

Masjid

7 :Ova!Button-green dengan

action script :

Gallery

Rightline

Rigt

Left line

Left


/oadMovieNum("SEJARAH.swf',

I);}.

: Galeri.button dengan action

scrip:


loadMovieNum("Galeri.si~f', I);}.

: Rightline.graphic

: right.graphic:

: Lenftline.graphic.

: Left.graphic.

Line atas bawah : Line alas bawah.graphic.

: Masjid.png

Back Ground : Twirl.png convert to graphic dengan alpha

color 17%.

Stop : Ation script "stop".

Keterangan :

v i:JENDJNG

[iJ ENDJNG

GJ LINE

[iJ IDLE TEXT

[iJ TEXT

[iJ logo

Q jam

~ ~··~···+~-· __ 10 __ " __ " __ " __ lll ___ " __ " __ " __ "' __ " __ "_.,,:.

•l!!I ~. rJ t-------~

• D t--------·-·------~"~·•>->~c.·~rn ·rn ~.1 t-----------• Ill " t-------------------'1 • Ill " t------------------~

Gambm· 4.9.1. Timeline pada, layer E11tli11g, Line, TITLE TEXT, TEXT, LOGO da11}am, Timeline pad a Menu Utama dari ji-ame I sampai 65 pada layer Ending, Line, TITLE TEXT, TEXT, LOGO dan jam.

Pada layer ENDING, Ending.MovieClip ditampilkan pada

frame 65.

Pada layer LINE, yellowline.png ditampilkan pada frame

55 sebagai garis batas title text dengan text isi.

Pada layer TITLE TEXT, TileText.png pada frame 55

diberi alpha color 0% dan pada frame 60 I 00% dengan

motion tween.

Pada layer TEXT, text.MovieClip ditampilkan pada frame

60.

DPembos.png pada layer logo diberi aipha color 17% pada

frame pertama sampai frame 65.

Jam.MovieClip pada layer jam ditampilkan pada frame I

sampai frame 65.

~I§\

v [Q> Anim Logo • •

. . . . D 45 50 55 60

cil ' '

Q Sound • • llill Do olo 0 ..

Q LOGO SETENGAH • • Iii! D•>----t• 0 Q TEXT LOGO • • llill D • r:.----~ • . 0 WJ LOGO • • Em!'

. Do}--..,...---;.• D

Q 1 • llill I•>--~•·· ••• Q 2 •• llill • D • :-...:.......,.------+ • • • ••• 0 Q 3 •• llill O•>--~••• ••• 0

Q text button • • D D• 0

Gambar 4. 9.2. Timeline pad a Layer Anim Logo dan layer text button Timeline pada Menu Utama dari frame 1 sampai 65 pada layergroup Anim logo dan layer text button

Pada layer Sound, frame 44 diberi sound whoosh.mp3

sebagai efek suara bagi pergerakan logo Diniyyah Puteri.

Logo Sparo.png pada layer LOGO SETENGAH diberi

alpha color 0% pada frame 44 dan 100% pada frame 53

dengan bergerak dari kiri kekanan menggunakan motion

tween.

Bitmap4.png pada layer TEXT LOGO diberi alpha color

0% pada frame 44 dan 100% pada frame 53 dengan

bergerak dari kiri kekanan menggunalrnn motion tween.

DPembos.png pada layer LOGO diberi alpha color 0%

pada frame 44 dan 100% pada frame 53 dengan bergerak

dari kiri kekanan menggunakan motion tween.

Layer 1, 2, dan 3 bergerak dengan jarak frame yang lebih

panjang sebagai efek bayangan dari layer LOGO

SETENGAH, TEXT LOGO dan LOGO.

v 0Button

GJ exit

l'ii Gulde: 1

Gl? [j) 6

[j) 5

[j) 4

[j) 3

[j) 2

[j) I

;;!;'!I\ 0 f: 5 •• 0 •• 0 . []

• El • D •O • filJ • 0 • llj

• [fil

j j

l iJ,

a!.

~. I, r r

rJ, -1.1, f

al.,__ I,

~. .,I, ~. I,

I, r ~I. r

~~

Gambar 4.9.3. Timeline pada Menu Utama fi'ame I sampai 65 pada layergroup Button

Pada layer exit, exit button ditampilkan pada frame 15 dengan

alpha color 0% dan 100% pada frame 59 dengan menggunakan

n1otion t1veen.

Layer guide berisi garis yang berfungsi sebagai jalur atau rel dalam

pergerakan animasi, yang pada saat ini digunakan sebagai jalur

bagi pergerakan menu button, namun tidak terlihat.

Layer 7 berisi OvalButton-green yang bergerak mengikuti layer

guide dari frame 30 sampai dengan frame 60 dengan menggunakan

motion tween. Berfungsi sebagai button menu sejarah.



motion tween. Berfungsi sebagai button menu visi dan misi.



motion tween. Berftmgsi sebagai button menu struh.'tur organisasi.

Layer 4 berisi OvalButton-green yang bergerak rnengikuti layer


motion tween. Berfungsi sebagai button menu program pendidikan.



motion tween. Berfungsi sebagai button menu tekad siswi.



motion tween. Berfungsi sebagai button menu extra kurikuler.



motion tween. Berfungsi sebagai button menu fasilitas.

Dari susunan timeline diatas, menghasilkan tombol-tombol menu

tersebut muncul satu persatu dari atas dimulai dari layer 1 yang

berfungsi sebagai menu sejarah yang diikuti Jrnyer selanjutnya

sampai layer 7. Dan ditengah-tengah proses munculnya 7 buah

tombol, muncul tombol exit.

V>Bhiasan

[ii right line

.. [ii Right

[ii Left line

[ii left

[ii line atas bawah

[ii MASJID

[ii back Ground

.. ~ • • Ill

s 10

+--------------"'l • • II; +---• 1£ ll1lil' +--------------=i .. :i-------~~~

------', _,.-----------==--""" Gambar 4.9.4. Timeline pada layer hiasa11, masjid, back Ground dan stop,

Timeline pada Menu Utama dari jiwne 1 sampai 65 pada layergroup Hiasan dan layer MASJID, back Ground dan stop

Layer right line, right, left line, left, line atas bawah, MASJID dan

Background berfungsi sebagai hiasan background yang

ditampilkan dari frame I sampai dengan frame 62.

Layer stop diberi action scrip "stop" pada frame I, 60, 62 dan 65

untuk menghentikan pergerakan di timeline utama.

4.1.10. Timeline pada Menu Peta

Gambar 4.10. Timeline pada menuPeta

Layer:

Peta: Indonesia.jpg convert to MovieC!ip

Keterangan

Pada Indonesia.MovieClip terdapat Sumbar.MovieClip,

PadangPanjang.MovieCJip dan DP.graphic. Gambar akan merinci jika

mengklik titik radar.

4.2. Autorun CD

4.2.1. Koufigurasi File inf.

Buka program notepad.exe dan ketikkan tulisan dibawah ini:

[AutoRun]

OPEN=DP.exe

ICON=Dinput.ico

File Edit Format View Help lAut oRui1T___ ---~-· ·-------.. -- ____ .. __ .. _____ .. _____ _ OPEN=DP.exe ICON=Dinput.ico I

Gambar4.11. Notepad.

Kemudian klik menu file, kemudian pilih save as dan beri nama

autorun.inf, pilih tempat penyimpanan dan klik Save.

I E%9 I I MyOoetrnel'lt

I. .

Gambar4.12. Penyimpanan File inf.

4.2.2. Proses Pembakaran CD.

l. Jalankan aplikasi Nero Express.

2. Selanjutnya pilih menu Data> Data Disc.

,. (Jj Bootable Data Disc

(~ ""'°''''""'" :J ··-® Copy Entire Di>c

Dkc lmaQe or Saved p~,)~Ct

0 D••• To start a project, simply move.\'\"-" moose pointer ta lhe mel'\IJ on lhe right, ffillkC }'Our $el~ction, !hen dick or use the mrow keys.

Gambar 4.13. Memilih Data Disc.

3. Selanjutnya mendaftarkan file-file yang akan menjadi isi (content

dari CD-R. klik tombol Add untuk memulai memilih file yang akan

dimasukkan kedalam daftar.

Add dolo to yoor di$C.

My Disc

Name Size T ... Mo ••.

I 1: 1 ·1 I I 1"1

600MB

Ii<> .ii"' . .. ~JI

"

T olal space used·

.O.OMS

t.:@J:::@::__....:l<Y=,. ·=""=' :=:..:I I~=· ="'='"':::::...:! lbi=. ='"=' :;:;'....I: ~~I Gambar 4.14. Tekan tombol Add untuk memasukkanfite

4. Selanjutnya akan muncul jendela "select Files and Folders" yang

berfungsi untuk memilih file ataupun direktori secara satu persatu

maupun sekaligus.

5. Pilih file autorun.inf yang telah dibuat tadi kemudian tekan tombol

Add. Dan pilih semua file flash yang telah dibuat, kemudian klik

tombol Finish.

LOC<llion c·:'.J~ cf, '/3 m~

r'~+tqn ,_ "'

..,, T~-pe

U\!!.s·"-'"':'l : J,t<EWPROlECTT.eY-e 1270 rn Appl.:clion )h(!c,cnne~I'.

;~fTh1.1rrb>.<ll IJK[l !Mt~ lllt$e Fiki Folder dcl."1•

'"'" r-i.11.9'/d 11'.!l f!a<h Debug File

0 EXlRA.na 7035 KB f!;r.;h Document

fl<l-fol:let fl,- ffiOOlAMPEIJDJDIKAfJ_fu 939! KB Flicl•Do<:1.1ment 0' TEKADSJSWl.fla 560t:fl Flash Doc!JllY'..t'.t

Modif.,'il- 51412015 ® S'TRUKTU>.O!lGANISASJ.fu 1019111 fhshOocl.lmffit

!,;, ' ' ' ' ' ' I 10.10-31.IAM ii! STRUKT~ ORGANISAS!Z.lla 16!31'.11 Fl3>h Document

"""' 11!' fim.fh '"'"' F~hOotummt

4\ NEW PROJECTT.fla !IBOKB Flli:>h Document

@] !£1 ff Soccid.fh "'"" Fla'.'hDo-.--urnent 0 ErlrnX.fll 173265 Kfl fl,,.,hDo..--umcnt ft' Intro.ft. J:l7KEI F~I> Oocurnent f!' Pelom2.fla 32KB fl.sh Om:um<mt

-'.'!

Fikltypes: [ Add

Gambar 4.15. Memililt file

6. Pastikan semua file yang ingin dimasukkan ke dalam CD sudah

masuk kedalam daftar file. Jika semua telah benar tekan tombol

Next.

Add data to your dsc.

- Ore ... T ... Mo ... (})oP:exe 1 MIJ App!ica ... 7JG/200S ... ez- FASll.lTAS.swf 979KB AoshM ... 0/21/200 ... '];· PROGRAM PENO ID!!( ... ~27Kll F!i!ShM .• , 10/3/200, .. fJ';_ EXTRA.swf 3131:6 AoshM ... llfl9/200 ... rl. so.~wf 22"6 A~M. •• 5}31{200 •.•

e:: TOO\!) 5ISWJ ·™ 1311'.El Al»hM,,. S/31}200 ... q;: SEJMAH,swf 451'.B Flash M ... 8/21/2fl0 ... ~;_ l(ISI MJSr.swf ""' AllSh M .•. 9/6/2005 ... C.).Dioput.!co "" l<oo 11/lfJJl9 ...

"!AUTOR!M.lff 34 byte~ Sett;;>!. .. 7/25/209.::J

i:--·i---r1 1--1 rr-1_·_-1 1"1'1 r·r-1 1"1"\ ITT'l''f}- -- 1--~1- r ·1:-·;r:1·---r--1 3.7MB

200MB <OOMB """" 800M!l

-- ·------~--·--~ .. ---~--

@] lrFJ ""' I~ Mom» llW li~ ~~I li'"' reif "·· ,_... Gambar 4.16. Daftarfile yang aka11 disaU11 ke CD

7. Proses selanjutnya menentukan CD-RW Drive yang akan digunakan

untuk membakar CD. Selain itu, terdapat pilihan untuk writing

speed, dan Label CD.

8. Pada label CD masukkan Diniyyah Puteri, dan pada writing speed

pilih 24X (3.600 KB/s). kemudian klik tombol Burn.

Dick 'llurn' to start !he iecrnding process.

O.mcnl recorder.

Dlscnarr.e:

fCD·RIR\111

B Allow flies to be .:idded blcr (mu~isession di&e)

0 Veiify data on disc after Wning

v

Gambar 4.17. Mengisi recorder, 11amalvol11me .• writing speed

9. Proses pembakaran CD berlangsung sampai muncul jendela dialog

yang menyatakan bahwa proses pembakaran telah selesai.

Time Evi;.nt

Cf) 4:5&50PM Cachirig of file• •lC>tted 0 4:56;50 PM Cl>Ching of fo~ corr('leted CV 4:56:!,;0PM Bumpiocess~lruted& 2~•(1tc-0Ktt'o)

c.;;;;;,;·p;;11·s';, ;,,;io•rn~i<>n U•ed 1e11d bullet:

ASUS CR\</·5232AS Action Tmck

Recorder !;iate Re11d1•

Gambar 4.18. Proses pembakaran CD

Plearewel ..

4:5G:50PM 4:56:SJPM .\:57JSPM

15~

0.00:03

""

Gambar 4.19. Pemberitalman selesaiya pembakara11 CD

l 0. Klik tombol OK, dan beberapa saat kemudian CD akan keluar dari

CD-RW Drive. Tekan tombol Next untuk menutup proses

pembakanran CD.

Time Evenl 0 4:%:50PM C11chingoflileut<11ted 0) 4:56:50PM C<1ching of!ikt: COfl'l'llelcd

'0) 4_56'50PM Burn[llocms;t31led3112x[l.800KB/s) G) 4:57:1SPM a uni process COtllJleled ruxetd~at 12;((1.flOOKB/sl

-C..,-1erii:~-.:;i;;irn.;,\i0ii __ _

Writin<J Iii 1?ii (1,800 K81s)

Gambar 4.20. Pembakaran telah selesai

11. Tekan tombol Exit untuk keluar dari Nero Express.

Gambar 4.21. Keluar dari Nero Express

v

4.3. Spesifikasi Komputer Peugguna

Program ini akan be1jalan dengan baik pada computer dengan spesifikasi

minimal sebagai berikut :

• Processor : 500 Mhz

• Memory: 128 MB

• CDROOM : 24 X

• VGA: 16MB

• Monitor

• Soundcard

• Speaker Aktif

5.1. Kesimpulan

BABV

KESIMPULAN DAN SARAN

Setelah menganalisa aplikasi yang dibuat, penulis dapat menyimpulkan

bahwa:

• Dengan teknologi multimedia dapat membantu Perguruan Diniyyah

Puteri Padang Panjang dalam promosi dengan isi yang lebih lengkap,

menarik dan lebih berkesan professional.

• Dengan menggunakan timeline, dapat mempennudah pembuatan

company profile.

5.2. Saran

Saran-saran yang dapat penulis berikan untuk pengembangan CD

interaktifprofile ini lebih lanjut, antara lain:

• CD interaktif ini agar dapat dikembangkan dengan desain yang lebih

menarik.

• Company profile agar dapat dikembangkan menjadi sebuah situs yang

dapat diakses oleh lebih banyak masyarakat.

• Dikembangkan dengan menghasilkan isi yang lebih detail tapi dengan

ukuran file yang lebih ringan.

DAFTAR PUSTAKA

Chandra, Handi. (2003). Adobe Premiere Pro 7.0 untuk Orang Awam. Maxikom.

Jakarta.

FAKULTAS SAINS DAN TEKNOLOGI UNIVERSITAS ISLAM NEGERI

JAKARTA, Pedoman Penulisan Sla·ipsi (Jakarta: FST-UIN, 2004)

Hakim, Lukmanul. (2004). Cara Ampuh Menguasai A1acromedia Flash MX 2004.

Penerbit PT. Elex Media Komputindo. Jakarta

Hakim, Lukmanul. (2004). 111 Rahasia dan Trik Kreatif Macromedia Flash MX ..

Penerbit PT. Elex Media Komputindo. Jakarta

Jolmtefon. (2003). Digital Imaging. Elex Media Komputindo. Jakarta.

Suciadi, Andi, Andreas. (2003). Menguasai Pembuatan Animasi dengan Flash

MX. Elex Media Komputindo. Jakarta.

Sutopo, Hadi, Ariesto. (2003). Multimedia Interaktif dengan Flash. Penerbit

Graha Ilmu. Jakarta.

Suyanto, M. (2003). Multimedia A/at untuk Meningkatkan Keunggulan Bersaing,

Penerbit Andi. Y ogyakarta

Tim Penerbit Andi. (2004). Mudah dan Cepat Mengolah Audio Menggunakan

Cool Edit 2000, Ed. I, Penerbit Andi Yoyakarta. Yogyakarta

Jogianto, H.M (1989). Analisis & Disain Sistem Informasi, Penerbit Andi Offset.

Yogyakarta

www .an i matorforum .org/ artic I e/horizon/storytrl I in g. htm

www.usu.edu/alesanderso/m u I tinet/ de finiti .htm

lill!J ://www /usu. edu/ alesandero/m ultinet/m ul ti adv.html

xix

Lampiran 1

Scene

Title text

Duration

Description

Camera

Audio

(VB)

Voiceover

TITLE TEXT

Gambar 3.21: Rancangan Layar Halaman Intro

: Intro

: Logo


: 30 detik

Skiplntro

: Clip perjalanan dari lembah Anai menuju Perguruan Diniyyah

Puteri Padang Panjang, muncul animasi logo dengan latar

belakang gerbang perguruan.

: POV perjalanan dari lembah Anai menuju gerbang perguruan

: Instrument Saluang.Trantition (special effect): Venetian Blind

: Tidak ada

Menu Utama

Sejarah

Visi dan Misi

! Struktur Organ

Prag. Pend

Tel<ad Siswi

Ex-Scool

Scene

Title text

Duration

Description

Camera

Audio

Title Text

SEKILAS KATA PENGATAR TENT ANG PERGURUAN DINIYYAH PUTERI

PADANG PANJANG

Gambar 3. 22. Rancangan Layar Halanum Menu Utama

: Menn Utama

: Perguruan Diniyyah Puteri Padang Panjang

: On Click

: Pilihan menn navigasi

: Tidak ada

: Instrument I-Iimne Pergnrnan Diniyyah Pnteri



Animasi Logo

!i;.aleri

l{eluar

Menu Utama

Sejarah

Visi dan Misi

Struktur Organ

Prag. Pend

Tekad Siswi

Ex-Scoo!

Fasilitas

Scene

Title text

Duration

Description

Camera

Audio

Title Text

SEJARAH PERGURUAN DINIYYAH PUTERI

PADANG PANJANG

Gambar 3.23. Rancangan Layar Halaman Sejarah

: Sejarah Perguruan

: Sejarah Pergurnan Diniyyah Puteri Padang Panjang

: On Click

Animasi Logo

A N I

M A

·s I

p I c

: - Pada text sejarah pergurnan menggunakan scroll bar.


: Tidakada

: Instrument Himne Pergurnan Diniyyah Puteri



Menu Utan1a

Sejarah

Visi dan Misi

Struktur Organ

Prog. Pend

Tekad Siswi

Ex-Scool

Fasi!itas

Scene

Duration

Description

Camera

Audio

Visi

Misi

Title Text

VISI/ MISI PERGURUAN DINIYYAH PllTERI

PADANG PANJANG

Gambar 3.24. Rancangan Layar Halaman Visi dan Misi

: Visi clan Misi Perguruan

: Visi clan Misi Perguruan Diniyyah Puteri

: On Click

: - Click pacla text visi, maka akan muncul visi

- Click pacla teJ-.1 misi, maka akan muncul misi

- Tombol navigasi kembali ke menu utmna

: Tidak acla

: Instrument Himne Perguruan Diniyyah Puteri


Voiceover : Ticlak acla

Animasi Logo

A N I

M A s I

p I c

Menu Utan1a

Sejarah

Visi dan Misi

Struktur Organ

Prog. Pend

Tekad Siswi

Ex~Scoot

Fasilitas

Title Text

STRUKTUR ORGANISASI PERGURUAN DINIYYAH

PUTERI PADANG PANJANG

STRUKTUR ORGANISASI

Gambar 3.25. Rancangan Layar Halaman Struktur Organisasi

Scene : Struktur Organisasi Pergurmm

Animasi Logo

A N I M

CA s I

p I c

Title text Struktur Organisasi Perguruan Diniyyah Puteri Padm1g

Panjang

Duration : On Click



Camera : Tidak ada

Audio : Instrument Himne Perguruan Diniyyah Puteri



Menu Utama

Sejarah

Visi dan Misi

Struktur Organ

Prag. Pend

Tekad Siswi

Ex~Scool

Fasilitas

TK

Ml

DMP

KMI

STIT

Title Text

PROGRAM PEN DIDI KAN PERGURUAN DINIYYAH PLITERI

PADANG PANJANG

Gambar 3.26. Rancangan Layar Ha Zaman Program Pendidikan

Scene : Program Pendidikan Perguruan

Animasi Logo

A N I

M A s I

Title te;-,.i : Program Pendidikan Pergurnan Diniyyah Puteri

Padang Panjang

Duration : On Click

Description : - Click pada te;-,.i navigasi program pendidikan

- Tombol navigasi kembali ke menu utarna

Camera : Tidak ada

Audio : Instrument Himne Pergurnan Diniyyah Puteri



Menu Utama

Sejarah

Visi dan Misi

Truktur Organ

Prog. Pend

Tekad Siswi

Fasilitas

Scene

Title text

Duration

Description

Camera

Audio

Title Text

TEl<AD SISWI PERGURUAN DINIYYAH PUTERI

PADANG PANJANG

Gambar 3.27. Rancangan Layar Halaman Tekad Siswi

: Tenaga Pengajar Pergurua11

Animasi Logo

A N I M A s I

p I c

Tenaga Pengajar Pergurnan Dirnyyah Puteri Padang

Panjang

: On Click

: - Menggunakan Scroll bar


: Tidak ada

: Instrnment Himne Pergurnan Diniyyah Puteri



Menu Utama

Sejarah

Visi dan Misi

· Struktur Organ

Prag. Pend

T ekad Sisv-1!

Ex-Scoo!

Fasilitas

Title Text

EXTRA KURIKULER PERGURUAN DINIYYAH PUTERI

PADANG PANJANG

Gambar 3.28. RancanganLayar HalamanExtra Kurikuler

Scene : Extra Kurikuler

Title text : Extra Kurila1ler Pergurnan Diniyyah Puteri Padang Panjang

Duration : 180 detik

Description : - Click tombol play pada layer clip

- Video kegiatan e>.ira kurikuler

Shot 1: Zoom in for CU latihan tenun

Shot 2: Cat dan PAN pada pelatihan Computer

Shot 3: TO dan PAN pad a kegiatan muhadharah

Shot 4: CUT dan MS pada latihan Marching Band

Shot 5: CUT dan MS pada latihan Pran1uka

Shot 6: Zoom out pada latihm1 seni puisi

Shot 7: MS pada latihan tari

Ahimasi Logo

A N I

M A s I

p l c

Shot 8: PAN dan TO pada kegiatan shalat be1jama'ah

Shot 9: PAN pada kegiatan pemberian mufrhadat


Camera : Lock Do11~1


Trm1tition (special effect): Dissolve (DISS)

Voiceover : Menggambarkan kegiatan extra k'lllikuler Perguruan

Menu Utama

Sejarah

Visi dan Misi

Truktur Organ -

Prog. Pend

Tekad Siswi

Fasilitas . l

Scene

Title text

Diniyyah Puteri Padm1g Pm1jang.

Title Text

FASILITAS PIG FASIL.ITA8

Gambar 3.29. Rancangan Layar Ha/aman Fasilitas

: Fasilitas

: Fasilitas Perguman Diniyyah Puteri Padm1g Panjang

Animasi Logo

A N I M A s I

p

I c

Duration : On Click

Description . - Click text nav1gas1. Pacla layar fasilitas akan

menarnpilkan garnbar.

- Tornbol nayigasi kembali ke menu utama

Carn era : Ticlak acla



Voiceover

Menu Uta ma

PIC

PIC

PIC

PIC

: Tidak ada

PIC PIC PIC

PIC PIC PIC

PIC PIC PIC

PIC PIC PIC

Gambar 3.30. Rancanzan Lavar Halaman Cia/eri

Scene : Galeri

Title texi : Galeri

Duration : On Click

Animasi Logo

A N I

M A s I p I c

Description · - Click text navigasi. Pada layar fasilitas akan

menampilkan gambar.


Camera : Tidak ada




Gambar 3.32. Rancanl!.an Lavar Halaman Peta

Scene : Peta

Title text : Peta

Duration : On Click

Description - Click text nav1gas1. Pada layar peta akan

n1ena1npilkan gan1bar.


Camera : Tidak ada

Audio : Instrument

Tnmtition (special effect) : Dissolve (DISS)

Lampinm2

Tampilan Me1111 Aplikasi

Gamba I. J'Vfenu Utama

Gambar 2. Menu Sejarah

Gambar 3. Menu Visi dan Misi

Gambar 4. Menu Struktur Organisai

Gambar 5. Menu Program Pendidikan

Gambar 6. f'vfenu Ekslra Kurilwlcr

Gambar 7. A;fem1 Fasilitas

Gambar 8. Menu Ga/cry

, i:u.1l<1,Lumn1u'

r•/""""t" B,md\ln<}2 ;f1C-ir<>h,l!ii, w:'' 1u"1b,)y,1

Gambar 9. Menu Peta

;:

1buatan profile perguruan diniyyah puteri...

Documents