TIMELINE MULTIMEDIA PADA PE1\1BUATAN PROFILE PERGURUAN DINIYYAH PUTERI PADANG PANJANG FAIZ FAUZAN EL MUHAMMADY

TIMELINE MULTIMEDIA PADA PE1\1BUATAN PROFILE PERGURUAN DINIYYAH PUTERI PADANG PANJANG

FAIZ FAUZAN EL MUHAMMADY

FAKUL T AS SAINS DAN TEKN«)LOGI UNIVERSITAS ISLAM NEGERI SYARIF 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 UNIVERSITAS ISLAM NEGER! SYARlF HIDAYATULLAH 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 Oleh: Faiz Fauzan El Muhammady 100091020185

Menyetujui P 1bimbing I

Pembimbing 2

~I

~~~

Ir. Adil Siregar

Nurhayati. M. Korn NIP. 150 293 241 Mengetahui, Ketua Jurusan TI/SI

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. Jakarta, Desember 2006 Menyetujui, Dosen Pembimbing mbimbing I,

(

l
Nurhayati, M. Korn NIP. 150 293 241

Mengetahui,

Ketua Jurusan,

ah Ja a Putra M.Sis NIP. 150 317 956

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.

Jakaita, Maret 2006

Dr. Eko Syamsudin Haristo, M.Eng

Penguji II

Nurhayati, M.Kom

NIP. 150 293 241

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 .................................................. J29 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.4. Timeline pada Menu Struktur Organisasi dari Frame 45 sampai 50 ............. 99 Gambar 4.3.5. Timeline pada Menu Struktur Organisasi dari Frame 50 sampai 55 ............. I 00 Gambar 4.3.6. Timeline pada Menu Struktur Organisasi dari Frame 55 sampai 60 ............. 101 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.4.5. Timeline pada Menu Program Pendidikan dari Frame 47 sampai 52 ............ 110 Gambar 4.4.6. Timeline pada Menu Program Pendidikan dari Frame 53 sampai 58 ............ 111 Gambar 4.4.7. Timeline pada Menu Program Pendidikan dari Frame 59 sampai 64 ............ 112 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 kemajuankemajuan 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.

BAB II LANDASAN TEORI

2.1.

Multimedia 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 recorder 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

memungkinkan

dan

pengguna

video

dengan

untuk

alat

melayani,

bantu

yang

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 bentukbentuk 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,

3

lalu

inbetweener dilanjutkan

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

dengan

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, cenderung

bahwa tetap

setiap

benda yang

bergerak,

bahkan

bergerak 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 menggambarkan

yang

baik

penjiwaan

adalah setiap

yang

dapat

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

mempergunakan CD-RW.

ke

dalam

compact Disk,

hams

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) aplikasiaplikasi 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 pengintegrasian

video

dan

authoring.

elemen-elemen

Authoring

adalah

terpisah

dengan

yang

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 transaksitransak'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 tahapanwhapan 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 multimedia 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 objekobjek, 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

dibutuhkan spesifikasi silern sebagai beikut:

10

Aricsto 1-ladi Sutopo, 1'I11/tin1edia Interaktij1>engan /-
MX

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

•

:;) tBYt ·~)g1

•

•

.

·.·

.

D'li'-'====================l" 01\!l===================tfr! 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

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

3

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

PENGURUS YAY ASAN Rahmah El Yunusiyyah

Pin1pinan Perguruan

Wakil Pimpinan Perguruan

--------------

----- -l~__s_e_k_re_l_a_ri_s_~

I Bi dang Sa1uan Penga\vas

Intern

Bi dang Pendidikan Dan Pengajaran

Bidang IZeuangan

Dan Persona1ia

Bi dang Htll11HS Dan I( eI}l

s an1a

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 KETUA SEKOLAH TINGGI ILMU TARBIYYAH (STIT)

KEPALA AS RAMA

I

I

Kepala DMP

Kepa Ml

KEPALA TKI

I

I

I

I

Adm Asrama &Guru

KETUAll BIDANG KEUANGAN

KETUA I AKADEMIK

Asrama

KETUA 111 BIDANG MAHASISWA

WA~ KURIKU UM

WAKA KESISWAAN

I

I KETUA 'RDGRAM :TIT- ST

=I TATA JSAHA

Kepala KM!

I

J

KETUA PROG PGSD

WAKA KURIKULUM

WAKA KURIKULUM

-

KETUA PROG PGTK JURU BAYAR

KURIKULUM

I

-

-

,__

~

UKM

PUSTAKA LAB. IPA, BAHASA_! KOMPUTER

-

I

GURU

I

GURU

I

TATA USAHA

~

TATAI--USAHA

I, BAYAR JURU

~

JURU BAYAR

I

I--

Gambar 2. 13. Struktur Bidang Pendidikan dan Pengajaran

GURU JURU

TATA USAHA

I

I-I--

I

GURU

TATA US AHA JURU BAYAR

I

lj

Bidang Keuangan dan Personalia

KEPALA BIDANG KEUANGAN & PERSONALIA

.

I

AKUNTANSI

I I

KEUANGAN

I I

PERSONALIA

I I

LOGISTIK

Gambar 2.14. Struktur Bidang Keuangan dan Personalia

I I

KOPONTREN

I

Bidang Humas dan Kerjasama KEPALABIDANG HUMAS DAN KERJASAMA

HUMAS DAN KERJASAMA

KEWIRA USAHAAN

I

I

LAUNDRY

I

Gambar 2.15. Struktur Bidang Humas dan Keljasama

I PERCETAKAN I

Bidang Rnmah Tangga

I

DAPUR AS RAMA

I AKTIVA TETAP I

KEPALA BIDANG RUMAH TANGGA

I

KEBERSIHAN

l

I I

TRANSPOR TASI

Gambar 2.16. Struktur Bidang Rumah Tangga

I I

KEAMANAN

I

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.

ANALISIS SI STEM

PEMELIHARAAN SISTEM

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 !.;.)

;.,

i~ = .,'"'

.,= =

00

Menu Utama

ss;

Galeri

"'

'?

l Sejarah Perguman

l

l

Visi dan Misi

Struktur Organisasi

Program Pendidikan

l

l

l

Tenaga Pengajar

Extra Kurikuler

Fasilitas

Gambar 3.3: Hirarki Layar Menu Utama

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 0bJ) ·"O

.... .:: p.. p.. "

::!

~

Q

~.... <:::l

s

~

t.... lt1

'""s° '"IS"'

c3

PENGURUS YAYASAN Rahmah El Yunusiah Pimpinan Perguruan

Wakil Pimpinan Perguruan

I Bidang Satuan Pengawas Internal

I Bidang Pendidikan Dan Pengajaran

Bidang Keuangan Dan Personalia

I Bi dang Satuan Pengawas Internal

Bidang Hunms Dan Kerja Sama

I Bidang Pendidikan Dan Pengajaran

Bi dang Keuangan Dan Personalia

Bidang Humas Dan Kerja Sama

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

I Bidang R. Tangga, Pemb. Infrastruktur& Keamanan

I Bidang R. Tangga, Pemb. Infrastruktur& Keamanan

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

;,, ""

Klik"Menu Utama" tampilkan halaman Menu Utama

Kelu•rrri

Sistem

I

Klik"Menu Utama" tampi!kan ha!aman Menu Utama

'---

Halaman Menu Utarna

,----

I~ I

r,

I'

Klik"Sejarah" tampilkan halaman sejarah

I

I 4 I 4 I

...

I

Klik'Visi dan Misi" tampilkan halaman Vlsi dan Misi Klik"Menu Utama" tampilkan halaman Menu Utama

~I

I

I

-.

r

Klik"Struktur Organisasi" tampilkan halaman Struktur Organisasi

Klik"Menu Utama" tampilkan halaman Menu Utama

K!ik"Program Pendidikan" tamp!!kan halaman Program Pendidikan Klik"Menu Utama" tampi!kan halaman Menu Utama

IJ I

Klik'Tenaga Pengajar" tarnpilkan halarnan Tekat Siswi Klik"Menu Utama" tampilkan halaman Menu Uta ma

.

.

.

Kllk"Ex1ra Kuriku!er" tamp1lkan halaman Extra Kunkuler

0

Visi dan Misi Struktur

Pendidikan

I

111 I

Tekat

Siswi

~xtra

r

I I II ~

'ITT

Kurikuler

~

....

1·as11nas

Klik"Menu Utaman tampllkan halaman Menu Utama

Gambar 3.12. State Transition Diagram Halaman Utama

I

Organisasi

KHknFasilitas" tampitkan halaman Fasmtas

Klik"Menu Utama" tampilkan halaman Menu Utama

I

~gram

1

.

I"

Sejarah

Fasilitas

I

.,..."'

-· ~

"'=

"""'

Halaman Utan1a

K!ik"Sejarah" tampilkan halaman Sejarah Klik"Menu Utama" tampilkan halaman Menu Utama

~

Klik"Sejarah" tampilkan halaman sejarah Klik" Sejarah" tampi!kan halaman Sejarah

I

Klik" Sejarah" tampi!kan ha!aman Sejarah

~

•

i

I

Sejarah

I

Klik" Sejarah" tampilkan halaman Sejarah K!ik~Struktur Organlsasi"

tampi!kan ha1aman Struktur Organisasi

Visi dan Misi Strktur Organisa ·'

Klik'Visl dan Misi" tampilkan halaman Visi dan Misi

Klik "Kel iar'' Ke!uar Si 5tem

Sejarah

r-r

I

Klik'' Sejarah" tampilkan halaman Sejarah

~

Program Pendidik

·-

Tekat Sis\vi

K!ik"Program Pendidikan" tampilkan halaman Program Pendidikan

Klik" Sejarah" tampilkan halaman Sejarah

r

K!ik''Tenaga Pengajar" tampilkan halaman

Tekat Siswi

I<.eluar Klik" Sejarah" tampilkan hafaman Sejarah

~ .:~~.: i

Klik"Extra Kurikufer" tampilkan halaman Extra Kurikufer

Klik" Sejarah" tampilkan halaman Sejarah

Klik"Fasilitas" tampilkan halaman Fasititas

Gambar 3.13. State Transition Diarzram Ha/aman Seiarah

r-+I

Halaman

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

Klik"Menu Utama" tampilkan halaman Menu Utama

Sejarah Ktik"Visi dan Misi" tampilkan halaman Visi dan Misi

'' ', - - - - -:-

Kfik'Visi" tampilkan halaman Visi

Klik" Sejarah" tampilkan halaman Sejarah

: : : :

' ''

' ::

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

~

y· . d ISl

...

an

rl

I

Klik'Visi dan Misi" tampilkan halaman Visi dan Misi

,--

M' . ISi

Strktur Organisasi

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

--

l +!'IL I A

Klik"Misi" tampilkan - - - ha!aman Misi

~I

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

Klik"Struktur Organisasr tampilkan halaman Struktur Organisasi Klik "Keluar" Keluar Sistem ----

Visi dan Misi

I

Klik"Visi dan Misi" tampilkan halaman Visi dan Misi

j

Program Pendidikan

Tekat

SiS\Vi

Klik"Program Pendidikan" tampi!kan halaman Program Pendidikan

Visi

I-

Misi

-'---

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

I

Klik"Tenaga Pengajar" tampilkan halaman

Tekat Sis\Vi

'

I

Keluar

1~

K!ik'Visi dan Misi"tarnoilkan halaman Visi dan Misi

I

Klik"Extra Kurikuler" tam.pilkan halaman Extra Kurikuler

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

r,I,

I

~ ~

--~ n

11

rl

rd:::;uiui:::;

]

I

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

,_

Program Pendidikan

I

fJ

I

Scjarah

Visi dan Misi

,--Strktur Organisasi

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

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

Klik"Struktur Organisasi" tampilkan ha!aman Struktur Organisasi -
J_C ~

Halaman Utama

I

Klik" Program Pend1dikan" tampilkan halaman Program Pendidikan

rr:1

j

-Program Pendidikan

Tekat Sisvvi

K1ik"Program Pendldikan" tampifkan halaman Program Pendidikan

Ex-

K!ik" Program Pendidikan" tampilkan halaman Program Pendidikan

Klik'Tenaga Pengajar" tampi!kan halaman Tekat Siswi

I

I

Keluar

I.

1·

I

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 Utama

Klik" Struktur Organisasi" tampilkan hataman Struktur Organisasi Klik"Menu Utama" tampi!kan halaman Menu Utama

Klik" Struktur Oraanisasi" tami:ilkan halaman Struktur Oroanisasi Klik" Sejarah" tampilkan ha!aman Sejarah

Klik" Struktur Organisasi" tampilkan halaman Struktur Organisasi

Struktur Organisasi

I

I

Klik'Visi dan Misi" tampilkan halaman Visi dan Misi

K!ik" Struktur Organisasr tampilkan halaman Struktur Organisasl Klik"Struktur Klik "Keluar" Ke1uar Sistem --------

Organisasi~·tampilkan halaman Struktur Organisasi

I

K!ik"Struktur Organisasi" tampilkan halarnan Struktur Organisasi

~ r

I

~

Sejarah

Visi dan Misi Strktur

Organisasi Program Pendidikan

~

Tekat Sis\vi

Klik"Program Pendidikan" tampilkan halaman Program Pendidikan Klik"Struktur Organisasl" tampilkan halaman Struktur Organisasi Klik'Tenaga Pengajar" tampilkan halaman Tekat Sis\vi

r

I

1

Keluarc

I

I I

I

K!lk"Struktur Organisasi" tampilkan halaman Stniktur Organisasi Klik"Extra Kurikuler" tamp!!kan halaman Extra Kurikuler

1 Klik"Struktur Organisasi" tampilkan halaman Struktur Organisasi Klik"Fasilitas" tampilkan halaman Fasilitas

Gambar 3.16. State Transition DiarEram Halaman Struktur

F i

~ -I I

.

I

Kllk" Ex-School" tampilkan halaman Ex-School Klik"Menu Utama" tampilkan ha!aman Menu utama

tr

Klikn Ex-Schtior tampilkan halaman Ex-School Klik" Sejarah" tampilkan halaman Sejarah

I

Klikn Ex-School" tampilkan ha!aman Ex-School

.c

I Ex-School

'

'

h

Klik"Struktur Organisasr tampi1kan halaman Struktur Organisasi

Sejarah

Visi dan Misi

Strktur Organisasi

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

Program

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

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

i

Halaman Utama

I

Klik" Ex-School" tampilkan halaman Ex-School

?r= _r-

Pendidikan

Tekat Siswi

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

Klik" Ex-School" tampilkan halaman Ex-Schoo!

Klik'Tenaga Pengajar" tampilkan halaman Tekat Sis\vi

I

I

I

Keluar

1•

.

I

Klik" Ex-School" tampi!kan halaman Ex-School K!fk"Extra Kuriku!er" tampilkan halaman Extra Kurikuler

Klik" Ex-Schoor tampilkan halaman Ex-School Klik"Fasilitas" tampi!kan halaman Fasilitas

Gambar 3.17. State Transition Diagram Halaman Ex-School

l,Qg

~ ri i

Klik" Tenaga Pengajar" tampilkan halaman Tenaga Pengajar

J

Klik"Menu Utama" tampilkan halaman Menu Utama

~laman tam a

~"~"

Klik" Tenaaa Penaaiar" tampilkan halaman Tenaqa Penaaiar Klik" Sejarah" tampilkan halaman Sejarah

Tekat Siswi

I'I

I

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

I

dan Misi

Visi

,--Strktur Organisasi

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

--

rj=1

Klik" Tenaga Pengajar" tampilkan ha!aman Tenaga Pengajar Klik"Struktur Organisasr tampilkan halaman Struktur Organisasi Klik "Keluar'' Keluar Sistem --------

f

~

Klik" Tenaga Pengajar" tampilkan halaman Tenaga Pengajar K!ik"Program Pendidikan" tampilkan llalaman Program Pendidikan

Klik" Tenaga Pengajar" tampilkan halaman Tenaga Pengajar Klik'Tenaga Pengajar" tampilkan halaman Tenaga Pengajar

r K:e~ 4

I

j

Klik~ Tenaga Pengajar· tampilkan halaman Tekat Sis\Vi

Klik"Extra Kurikuler'' tampi!kan halaman Extra Kuriku!er

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

/

IE r

Program Pendidikan

l~ckat

Sis\vi

~ ~

l~s

I 11 r-Jil

Hal am an Utama

K!ik "Fasllitas" tampi!kan ha!aman Fasilitas Klik"Menu Utama" tampilkan halaman Menu Vtama Klik"Play" Vitdeo play

[ ··c;;

II !

'' '

'

r:=r

Klik "Fasilitas" tampilkan halaman Fasilitas

'' '''

Klik" Sejarah" tampilkan halaman Sejarah

L,.

I Fasilitas

' '

I

Klik'Visi dan Misi" tampilkan halaman Visi dan Misi

"

I

Kfik "Fasilitas" tampilkan halaman Fasi!itas Klik''Struktur Organisasi" tampi!kan halaman Struktur Organisasl

Klik "Keluar'' Ke!u ·------Sistem

I

Klik "Fasmtas" tampilkan hafaman Fasilitas

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

I

Keluar

1~

I

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

r

Sejarah

Visi dan

Misi Strktur

~

Organisasi

~

Sisvvi

Program

Pendidikan

Tekat

K!ik "Pie" tampi!kan Pie

PIC 1

PIC2

.. Klik "Pie" tampilkan Pie Galeri

~

Klik "Gateri" tampi!kan halaman Galeri K!ik"Menu Utama" tampilkan halaman Menu Utama

Klik "Pie" tampilkan PiJ

PIC3

~

PIC4

PIC5

• Klik "Pie" tampilkan Pie

-

K!ik "Pie" tampilkan Pie

Gambar 3.20. State Transition Diagram Halaman Galen

Klik "Peta" tampilkan halaman Peta

Peta

Klik"fv1enu Uiama" tampilkan halaman Menu Utama

Halaman Utama

Gambar 3.21. State Transition Diagram Halaman Peta

Halan1an Utan1a

3.2.3. Rancangan Isi dan Naskah

Gambar 3.22: Rancangan Layar Halaman Intro

Scene

: Intro

Title text

: Logo Perguruan Diniyyah Puteri Padang Panjang

Duration

30 detik

Description

Clip perjalanan dari lembah Anai menuju Perguruan Diniyyah Puteri

Padang Panjang, muncul animasi logo dengan latar

belakang gerbang perguruan. Camera

POV perjalanan dari lembah Anai menuju gerbang perguruan

Audio

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

Voiceover

Tidak ada

Animasi Logo

Title Text c·--·-··--.. -

i

I

!li'aleri

Menu Utama Sejarah Visi dan Misi Struktur Organ

SEKILAS KATA PENGATAR TENTANG PERGURUAN DINIYYAH PUTERI PADANG PANJANG

i

i •Peta

1-

Prog. Pend Tekad Siswi Ex-Scool Fasilitas

----" --------- ----~-----------------------------------J

Gambar 3_23_ Rancangan Layar Halaman Menu Utama

Scene

: Menu Utama

Title text

: Perguruan Diniyyah Puteri Padang Panjang

Duration

: On Click

Description

: Pilihan menu navigasi

Camera

: Tidak ada

Audio

: Instrument

Trantition (special effect): Dissolve (DISS) Voiceover

: Tidak ada

11

Keluar

Title Text

Animasi Logo

Menu Utama

A N

Sejarah Visi dan Misi Struktur Organ

I

M SEJARAH PERGURUAN DINIYYAH PUTERI PADANG PANJANG

A

s I

p Prog. Pend

I

c

Tekad Siswi

Gambar 3.24. Rancangan Layar Halaman Sejarah Scene

: Sejarah Perguruan

Title text

: Sejarah Perguruan Diniyyah Puteri Padang Panjang

Duration

: On Click

Description

: - Pada text sejarah perguruan menggunakan scroll bar. - Tombol navigasi kembali ke menu utama

Camera

: Tidak ada

Audio

: Instrument

Trantition (special effect): Dissolve (DISS) Voiceover

: Tidak ada

Animasi Logo

Title Text r~,---·-~·"-···---·-----·---~----·--~-1

I

!

I

Menu Utama

A N

Sejarah Visi dan Misi

VISl/MISI PERGURUAN DINIYYAH PUTERI PADANG PANJANG

Visi

Struktur Organ Misi

I M A

s I

p I

Prog. Pend

c

Tekad Siswi

Gambar 3.25. Rancangm1 Layar Halaman Visi dan Misi

Scene Title text

: Visi dan Misi Perguruan Visi dan Misi Perguruan Diniyyah Puteri Padang Panjang

Duration

: On Click

Description

: - Click pada text visi, maka akan muncul visi - Click pada text misi, maka akan rnuncul misi - Tombol navigasi kembali ke menu utama

Camera

: Tidak ada

Audio

: Instrument

Trantition (special effect): Dissolve (DISS) Voiceover

: Tidak ada

Anlmasi Logo

Title Text

__:::::=--===1

n=======-=--===···-·1-1-· . 11

Menu Utama

Visi dan Misi

Iii

,!

11

I'

Sejarah

I:'I

I11

Ii

1

:1

A N I M A

"

Ii

- I I

• Struktur Organ.. .

1

1

Prag. Pend

STRUKTUR ORGANISASI PERGURUAN DINIYYAH PUTERI PADANG PANJANG

I

STRUKTUR ORGANISASI 1

11 I,

I

I

s

I

I

p

1

I

1 j'

1 1

1I

1;:.-; ilita0 J, ~=·====[·=======:'JI 11

~

____ _JI

.

.

•

Gambar 3.26. Rancangan Layar Halaman Struktur Organisasi Scene

: Struktur Organisasi Pergnruan

Title text

: Struktur Organisasi Perguruan Diniyyah Puteri Padang Panjang

Duration

: On Click

Description

: - Menggunakan Scroll bar - Tombol navigasi kembali ke menu utama

Camera

: Tidakada

Audio

: Instrument

Trantition (special effect) : Dissolve (DISS) Voiceover

: Tidakada

c

Animasi

Title Text

Logo

--,

I

! Menu Utama Sejarah

TK

Visi dan Misi

Ml

Struktur Organ

DMP

Prag. Pend Tekad Siswi

•· PROGRAM PENDIDIKAN PERGURUAN DINIYYAH PUTERI PADANG PANJANG

p I

KMI

II I

r··----, I STIT

'!

Ex-Scool

I

l

A N I M A S. I

'-----···

Fasilitas

•·.·

c

•.

· ...

·.

Gambar 3.27. Rancangan Layar Halaman Program Pendidikan

Scene

: Program Pendidikan Perguruau

Title text

: Program

Pendidikan Pergurnan

Diniyyah

Padang Panjang Duration

: On Click

Description

: - Click pada text navigasi program pendidikan - Tombol navigasi kembali ke menu utama

Camera

: Tidak ada

Audio

: Instrument

Trantition (special effect): Dissolve (DISS) Voiceover

: Tidak ada

·.

Puteri

Animasi Logo

Title Text

l'

! II

Menu Utama Sejarah

I

Visi dan Misi Truktur Organ ,

TEKADSISWI PERGURUAN DINIYYAH PUTERI PADANG PANJANG

II I' I

!

A N I M

A

s I p I

c

Fasmtas

Gambar 3.28. Rancangan Layar Halaman Tekad Siswi Scene

: Tenaga Pengajar Pergnruan

Title text

: Tenaga Pengajar Perguruan Diniyyah Puteri Padang Panjang

Duration

: On Click

Description

: - Menggunakan Scroll bar - Tombol navigasi kembali ke menu utama

Camera

: Tidakada

Audio

: Instrument

Trantition (special effect): Dissolve (DISS) Voiceover

: Tidak ada

Title Text r-----------------------

Menu Utama Sejarah

1

Visi dan Misi

EXTRA KURIKULER PERGURUAN DINIYYAH PUTERI PADANG PANJANG

Struktur Organ Prog. Pend Tekad Siswi Ex-Scool -

Fasmtas

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 - Tombol navigasi kembali ke menu utama Camera

: Lock Down

Audio

: Instrument

Trantition (special effect): Dissolve (DISS) Voiceover

: Menggambarkan kegiatan extra kulikuler Perguruan Diniyyah Puteri Padang Panjang.

Animasi

Title Text

---··------

Menu Utama Sejarah Visi dan Misi . ---------···---,.

Truktur Organ Prag. Pend

.

rr-11

II II

I

II .I

11

I

Logo

A N I

M A

PIC FASILITAS

FASILITAS

s I

11

II

p

I

I

c

'

Tekad Siswi ---·-----Ex~Scool

[___

I

----------

Fasilitas

•.

.

.

Gambar 3.30. Rancangan Layar Halaman Fasilitas Scene

: Fasilitas

Title text

: Fasilitas Perguruan Diniyyah Puteri Padang Panjang

Duration

: On Click

Description

Click text navigasi. Pada layar fasilitas akan menampilkan gambar. Tombol navigasi kembali ke menu utama

Camera

: Tidak ada

Audio

: Instrument

Trantition (special effect): Dissolve (DISS) Voiceover

: Tidakada

Menu· Uta ma

--r-- --- . PIC

--~- .. -

I PIC

PIC

PIC

.... 1

PIC

PIC

PIC

PIC

PIC

PIC

PIC

PIC

PIC

PIC

PIC

PIC

A N I M A

s I p I

c

Gambar 3.31. RancanJ
Scene

: Galeri

Title text

: Galeri

Duration

: On Click

Description

Click text navigasi. Pada

layar galeri

menampilkan gambar. - Tombol navigasi kembali ke menu utama Camera

: Tidakada

Audio

: Instrument

Trantition (special effect) : Dissolve (DISS) Voiceover

: Tidak ada.

akan

Gambar 3.32. Rancanzan Lavar Halaman Peta Scene

: Peta

Title text

: Peta

Duration

: On Click

Description

Click

text

navigasi.

Pada

layar

peta

menampilkan gambar. - Tombol navigasi kembali ke menu utama Camera

: Tidak ada

Audio

: Instrument

Trantition (special effect) : Dissolve (DISS) Voiceover

: Tidak ada.

akan

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

pengembangan

dan

perancangan

diimplementasikan

sebelumnya, kedalam

kemudian

program

dilakukan

editing

akhir

Macromedia Flash. Pemunculan layer dimulai dari kiri atau frame I. layer yang framenya berwarna putih berarti pada saat itu framenya tidak menampilkan apaapa, atau kosong. 4.1. Timeline 4.1.1. Timeline pada Menu Se.iarah.

5

10

Do

15

o

Gamhar 4. I. Timeline pada Menu Sejarah Layer: Sound

: Bomact.mp3.

Line

: Line.png convert to graphic.

Dapdip

: dapdip.png convert to graphic.

Text Sejarah

: Textsejarah.png convert to graphic.

Garis

: Garis.png convert to graphic.

Stop

: Action Scrip - "stop··.

D

4.1.2. Timeline pada Menu Visi Misi. HT Timeline 5

GJ MisiTabText GJ VisiT ab Text GJ Misi Tab GJ Visi Tab GJ MisiTabButton GJ VisiTabButton GJ Abuatas GJ Abuatas GJ LINE GJ Dapdip GJ TEXT VISI GJ bullet ...............

l

l~

D•I

)

• • Ill ...

11.

)

• [El

D•

'

•· • Ill •.• Ill ' •. • liiill ,'

•· • 11'!1 ' •. • Ill ! • • [li'.] ! ' ........... ...... . .•. • flli1 ; .!' • )

111. Do D D

D

D

D

D

D D

1.1

)

•

)

Do

)

Do

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

"r:!

)

)

d DI•

D D

aa

00

Gambar 4.2. Timeline pada menu visi misi Layer: MisiTabText

Dynamic text "Misi". (sebagai label tab dalam posisi on).

VisiTab Text

Dynamic text "Visi". (sebagai label tab dalam posisi on).

MisiTab

Tab II.pug convert to graphic.

VisiTab

: Tab 1.png convert to graphic.

MisiTabButton

: Dynamic text "Misi" convert to button.

VisiTabButton

: Dynamic text "Visi" convert to button.

AbuAtas

: Gambar kotak abu-abu gelap sebagai latar belakang tab button.

AbuAtas

: Gambar kotak abu-abu muda.

Line

: Line.png convert to graphic.

Dapdip

: Gambar kotak putih convert lo graphic.

TextVisi

: Static text.

Bullet

: bullet.png.

TextMisi

: Static text.

I-Iijau

: Gambar kotak hijau sebagai latar belakang

tab. Garis

: Garis.png converl to graphic.

Stop

: action script "stop".

Keterangan : 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

D +-~~~--~~~~-~~~~~~~~~~-

:;:; TBL _} F.IJi'.·1~.H TANGGA

J

0 D

HUMAS D;\N ):E'<Jti5AMA

:..,) KEUANGAN DAr'l PERSONALJA

0

:{

01.

d;:'.;';~.

0 6

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

_,A,_ _ _ _ _ _ _ _

_J____

.

[lo;

;6

=;="'''-----------

~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

Sound Dapdip

: line.png convert to graphic.

Aq uariumM enu. mp3. : 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 l(euangan clan personalia

lo

gaphic.

· !(euangan dan pcrsonalia.png converr lo «?J'GjJhic.

PDDK PENG

: Pdclk_Peng.png convert to

movie clip. STR UT AMA TITLE

: Struktur Utama Tiltle.png

convert to graphic. Struktur Utama

: Struktur Utarna.png convert

to gafic. Garis!

: Garis.png

convert

to

graphic. TBL

Rumah Tangga

: R1nh

~f'angga.png

converr

10

button. Diberi action : ()11 (release) {goto-'ltuf]Jfr~v(56);}

Humas clan Kerjasarna

: HumKer.png convert to

button. Diberi action : ()n (release) {gola-tndP/ay(51);}

J(euangan dtm personalia

: KeuPers convert to button. Di beri action : ()n (release) {goto.-lndJJf(~V(-16);}

Pendidikan dan pengajaran

: PddkPeng. png

converl

lo

button. Diberi action : ()n (release) {gotoAndP/ay(-11);}

Stop

action "'stop··.

Keterangan ~~o~, Q

line2

Q

sound

Q Q Q Q Q Q Q Q

* • __ µ1 • • IBl * • Ii • • lil!I

dapdip RUMAH TANGGA HUMAS DAN KERJASAMA

o)

•

Iii • • lilil 'lo

•

STR UTAMA TITLE

>t

•

STRUKTUR UTAMA garisl

15

'IHI• ~1.

r

1.

f

•

(121

• • Iii!! • • lllil: ,

T

~:

•

HJ• >----4 •

•

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

20

QB

PDDKj'ENG

KEUANGAI" PERSONALIA

10

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.

iill!!D. 7QTBl

Q RUMAH TANGGA Q HUMAS Di\N KERJASAMA Q KE\JANGAN DAN PERSONAUA Q PENDIDIKAN DAN PENGAJARAN

~ .' .

10.

··m~

• • llil • Ill

"

20

25

35

---~====~a;;!.===::;;~~II!_•

~-------,J~lli•==;=::!..!.___ • ·1~!----~~al•.!:=:=;::~I.__ *'--!

· o ~----~al•.!:=:::=!11!...'-~

Q 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. Pada frame 23 sampai dengan frame 33, layer KEUANGAN DAN PERSONALIA mengalami

motion tween perubahan alpha color dari 0% menjadi I 00% dan pergerakan dari kanan ke kiri. Pada frame 26 sampai dengan frame 36, layer HUMAS DAN KERJASAMA mengalami motion

tween perubahan alpha color dari 0% menjadi I 00% dan pergerakan dari kanan ke kiri. Pada frame 29 sampai dengan frame 39, layer 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.

<>l·&\Dfo [iJ line2

45

• • 0

.. ·~~ ·~,·~

• • II - - •

[iJ KEUANGAN PERSONALIA

• [ill~--

• • mi' ••

·.···L ·.

• 1211 ·.11 . ·. D • • lllli •o

•

lo

D• D

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

Pada layer sound, dari frame 46 sampai dengan frame 50 diberi sound AquariumMenu.mp3, yang menyebabkan suarajika frame dijalankan. Pada layer dapdip, gambar kotak putih diberi alpha color 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.

Pada frame 50 layer stop diberi action script "stop". 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 Pada layer sound, dari frame 51 sampai dengan frame 55 diberi sound AquariumMenu.mp3, yang menyebabkan suara j ika frame dijalankan. Pada layer dapdip, gambar kotak putih diberi alpha color 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. Pada frame 55 layer stop diberi action script "stop". 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 Pada layer sound, dari frame 56 sampai dengan frame 60 diberi sound AquariumMenu.mp3, yang menyebabkan 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

,;c~,,So~l )

1s

~5

zo

30

3-;

®

45

so

rs

~o

D l,...!.r----4!" D ~,(.. e.(o D 7l~ ______ D

-.:.) STIT

:;_J KMI

Gl D

.)DMP ~)Ml

ih___

0

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

",) TK'l

D

-:.;; Prog text 5HT -~ Prog text ~Ml

D

,6____

..!) Prog text DMP

• El l

::;J Pto{l text Ml

• 0

J

rn

s

D ~'~----------!!JQC.-.:=JJJsE>::=Jl!SE::JJ121'::::::J!JS~::Jl!2

'..:_)Sound .:.;J line2 ..J clai;d1p

DllHl:--ll!

---·-rr-

1 . . ,...,-. "

6

-

"

lit>-)!11,...__;11

• D ~;_ _ _-."D•l-1<1~<1

Prog text TU

~1 PROG PDC>l~ DEPAN

• D~

~)STU

• D ~;_____ rr_',"'-=-==;=L •Di fl:,

~KMJ

nl.:JG

.:_;) DMP

•D6

-a~"'·==r""--

.:_;)Ml

• D

fh==~'---

~

~) TKI

;c6_ _ _

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!

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

lo

graphic.

: Dynamic text (keterangan STIT) Converr lo

graphic.

ts

Prog text KM!

: Dynamic text (keterangan KMI) Convert to graphic.

Prog text DMP

: Dynamic text (Keterangan DMP) Convert to graphic.

Prog text MI

: Dynamic text (Keterangan Ml) Convert to graphic.

Prog text TKI

: Dynamic text (keterangan TKI) Convert to graphic.

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

: Tb! STIT.png convert to button.

KMI

: Tb! KMI.png convert to button.

DMP

: Tb! DMP.png convert to button.

MI

: Tb! Ml.png convert to button.

TKI

: Tb! TKI.png convert to button.

Garis!

: Garis.png convert to graphic.

Stop

: Action script "stop".

Keterangan :

Q

Sound

t;iiine2 .D dapdip Q Q

STIT

•

• li1

KM!

DDMP QM!

Q TKI

Button

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

[jJ TK!

• • • • • • • ll!l • • fl • • D • fl .

WJ

ProgtextSTIT

•

Q

Prog text KMI

[iJ Sound [iJ ~ne2 [iJ dapdip

[!)

STIT

[jJ

KM!

GJ DMP GJ Ml

GJ p;~-~--t~;to~1p-"-

Q

----··--

20

D

• ~ , OOH•>->• ~----~-"F-~'-'-r---'-9 • !Im . D

• • •

mJ .----·~""-=~=-=io

[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 color 0%, pada frame 25 alpha color 100% dan bergerak keatas. Pada frame 30 bergerak kebawah dengan motion tween tiap perubahan.

Pada layer Prog text DMP, frame 19 ti~xt DMP diberi alpha color 0%, pada frame 22 alpha color 100% dan bergerak

keatas. Pada frame 27 bergerak kebawah dengan motion tween tiap perubahan.

Pada layer Prog text MI, frame 16 text MI diberi alpha color 0%, pada frame 19 alpha color I 00% dan bergerak keatas. Pada frame 24 bergerak kebawah dengan motion tween tiap perubahan.

Pada layer Prog text TKI, frame 13 text TKI diberi alpha color 0%, pada frame 16 alpha color I 00% dan bergerak keatas. Pada frame 21 bergerak kebawah dengan motion tween tiap perubahan.

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

·~~of Q Sound

•

W/line2

STIT

• • Iii • . ~ • • II

Q Q Q Q

KM!

•

Q Q

dapdip

• 1111

•

• • lll!I

MI

• • D

TKI

• • Ill

CiJ

Prog text STIT

•

Q

Prog text KM!

• • Ill

WI

Prog text DMP

•

k::=okl J;Q.1.1.1.1

[§]

DMP

•

45

[fill

-:=gg

r

• IJ¥il

• •

[£) Prcig text MI

•

Prag text TKI

• ffi]

~·;c,

PROG PDDK DEPAN

!

!_

olg

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

frame

41

layer

sound

dimasuk:kan

AquariumMenu.mp3 sampai dengan frame 46. Pada layer dadpdip, dari frame 41 sampai dengan frame 46 gambar kotak putih diberi alpha color 0% dan 100% di tiap framenya

secara bergantian untuk memberikan efek

berkedip-kedip. Layer MI ditampilkan pada frame 46. Pada frame 46, layer stop diberi action script "stop" untuk menghentikan semua pergerakan di timeline utama.

Layer Button STIT, KM!, DMP, Ml, dan TKI tetap ditampilkan. Selain dari yang tersebut tidak ditampilkan. vTimeline

!

.... 1£1 D Q

Sound

[iJ

line2

Q dapdip Q STIT Q

KM!

50

• lllil • Ill

k::::=!llJ

•

•

Q;.1.1.1.1.1

• •

• Im' ---• li1

• •

[Nfil i

GJMI

: : ~ r-=:gg

Q

TKI

•

CiJ WJ

Prog text STIT

CiJDMP

• lllil'

Prog text KM!

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

Button

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

frame

47

layer

sound

dimasukkan

AquariumMenu.mp3 sampai dengan frame 52. Pada layer dadpdip, dari frame 47 sampai dengan frame 52 gambar kotak putih diberi alpha color 0% dan 100% di tiap framenya secara bergantian untuk memberikan efek berkedip-kedip. Layer DMP ditampilkan pada frame 52.

Pada frame 52, layer stop diberi action script "stop" untuk menghentikan semua pergerakan di timeline utama. Layer Button STIT, KM!, DMP, MI, dan TKI tetap ditampilkan. Selain dari yang tersebut tidak ditampilkan. H-,.. Timeline

Button

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

frame

53

layer

sound

dimasukkan

AquariumMenu.mp3 sampai dengan frame 58. Pada layer dadpdip, dari frame 53 sampai dengan frame 58 gambar kotak putih diberi alpha color 0% dan 100% di tiap

framenya secara bergantian untuk memberikan efek berkedip-kedip. Layer KM! ditampilkan pada frame 58. Pada frame 58, layer stop diberi action script "stop" untuk menghentikan semua pergerakan di timeline utama. Layer Button STIT, KMI, DMP, Ml, dan TKJ tetap ditampilkan. Selain dari yang tersebut tidak ditampilkan.

Button

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

Pad a

frame

59

layer

sound

dimasukkan

AquariumMenu.mp3 sampai dengan frame 64. Pada layer dadpdip, dari frame 59 sampai dengan frame 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. Pada frame 64, layer stop diberi action script "stop" untuk menghentikan semua pergerakan di timeline utama. Layer Button ST!T, KMI, DMP, MI, dan TKI tetap ditampilkan. Selain dari yang tersebut tidak ditampilkan.

4.1.5. Timeline pada Menu Tekad Siswi.

Gambar 4.5. Timeli11e pada menu Tekad Siswi Layer: Line2

: Line.png convert to graphic.

Dapdip

: Gambar kotak putih convert to graphic.

TEKAD

: 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 pada menu Ekstra Kurikuler

Layer: DP.mpg

: Dinput.mpg embedded Video.

Layar

: Gambar kotak dengan rectangle tool dengan warna hijau dan lis kuning convert to graphic.

PlayBack: 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. Line

: Line.png convert to graphic.

Garis

: Garis.png convert to graphic.

Stop

: action script "stop".

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

: Anim l .MovieClipt. (berisi gambar garis yang bergerak looping).

Gambar

: Gambar kotak hijau sebagai latar belakang convert

to graphic. Bawah

: bck.MovieClip.

feet menu!

:Gambar kotak dengan rectangle tool convert to

graphic. effect menu2

: Gambar kotak dengan rectangle tool convert to

grafic. F Asrama

: Dynamic

text

Fasilitas

Asrama

convert

to

button.dan diberi action scrip : on (release) {gotoAndStop(31) }. FPDDK

: Dynamic text Fasilitas Pendidikan convert to

button dan diberi action scrip : on (release) {gotoAndStop(31) }. Line

: Line.png convert to graphic.

Garis

: Garis.png convert to graphic.

Stop

: action script "stop".

Keterangan :

10

15

[() Arama [() PDDK [() Anim!

[() Gambar

.QBawah t~J efect menul Ci) efect menu2 [iJ F Asrama

D•~•

[() F PDDK

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.

Gamhar 4.8. Timeline pada menu Galeri

Layer: 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

: Static Text convert to graphic.

Button: Asrama

: AsramaDepan.jpg convert to button. Dengan action scrip :

on (release) {gotoAndStop(106)}. AsramaJadul

: Asrama.jpg convert to button. Dengan action scrip :

on (release) (gotoAndStop(107)}. Ban gun

: Pembangunan.jpg convert to button. Dengan action scrip :

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

: KongresJpg convert to button. Dengan action scrip :

on (release) {gotoAndStop(109)}. MHS

: Mahasiswa.jpg convert to button. Dengan action scrip :

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

: Pelatihan.jpg convert to button. Dengan action scrip :

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

: Upacara.jpg convert to button. Dengan action scrip :

on (release) {gotoAndStop(112)}.

: Pramuka.jpg convert to button.

Pramuka

Dengan action scrip :

on (release) {gotoAndStop(J 13)}. : HN .jpg convert to button.

HN

Dengan action scrip :

011 (release) {gotoA11dStop(l J4)}. : IS.jpg convert to button.

IS

Dengan action scrip :

on (release) {gotoAndStop(115)}. : REY.jpg convert to button.

REY

Dengan action scrip :

011 (release) {gotoAndStop(J 16)). : ZLEY.jpg convert to button.

ZLEY

Dengan action scrip :

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

: 12 buah gambar segi

1~mpat

dengan rectangle

tool convert to grafic. Text~

ButtonMUText

: Static

ButtonMU

: Ova!Button-green dengan action script :

"Menu Utama".

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

: Gambar segi empat tanpa fill color dengan

stroke color kuning. AnimBck

: 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 kebawah pada frame 46 dengan motion tween. 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 kebawah pada frame 52 dengan motion tween. Pada layer Pramuka, Pramuka.button diberi alpha color 0% pada frame 27, 100% pada frame 46, dan sedikit bergerak kebawah pada frame 55 dengan motion tween. 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 0% pada frame 36, 100% pada frame 55, dan sedikit bergerak kebawah pada frame 64 dengan motion tween. Pada layer Kongres, Kongres.button diberi alpha color 0% pada frame 39, 100% pada frame 58, dan sedikit bergerak kebawah pada frame 67 dengan motion tween. Pada layer bangun, Pembangunan.button diberi alpha color 0% pada frame 41, 100% pada frame 61, dan sedikit bergerak kebawah pada frame 70 dengan motion tween.

Pada layer AsramaJadul, Asrama.Jadul.button diberi alpha color 0% pada frame 44, 100% pada frame 64, dan sedikit bergerak kebawah pada frame 73 dengan motion tween. Pada layer Asrama, Asrama.button diberi alpha color 0% pada frame 47, 100% pada frame 67, dan sedikit bergerak kebawah pada frame 76 dengan motion tween. 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..

mil :'i-----~1~'

~------

Gambar 4.8.2. Timeline pa
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. .;i;i!'.

Q ButtonMUT ext [jj ButtonMU ..

~· [J

,}o

: : t~ ~I:

95

100

10

°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 Q Q Q

Asrama AsramaJadul Bangun· Kongres

CiJMHS

Q Pe1atihan Q Upacara

t£J Pramuka CiJHN

• • • • • • •

. mil • • • • •

.

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

• D • • ll!ll • • llll • lill ,, • llEI ,, •

D• , D• D•

Q1s CiJREY

Q

• •

ZLEY"

~ .ButtonBck

Q Q

D D D 0

ButtonMUText

ButtonMU

D D D D 0 0 0 0 0 0 D D D

Gambar 4.8.5. Timeline pada menu Galeri dari ji-ame 106 sampai 117 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 7

Timeline

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

eJ ENDING Q

ENDING

QuNE Q TffiETEXT

Qroo

0

[i)""' [iJ jam ?

Ill

0

8' Anlm logo

0

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

Ill

GJ TEXT LOGO

0

0

CiJtOGO [i) l

Gl Eiil

[i)' [i) 3

IE! :

'f---------'f---------

-\-----------·---~---~-~ ob

'

T-----------------"j'~--c=~--"l

f

T----i·

~1.

'

r .. ,___I.

.

'[] ~'·

I.I.I.I.I._.

' 'r

,,C

I.I.I.I.I. •

r

.

o·i------------·---__J~~,l,~"======·~lW~-·ll~·l.~!·~·..11'

tiJ 'te-;t·b;;tt~n

0 ~---------------------~'~·~' .

o'

?'B-Button

[jJ exit •..-;,Guide: 1 [i) 7 [i) 6 [i) 5 [i);

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

m;~-::::::;:::::::iJ;:;~"~··~~~~~~~~~~~~·=1.·::::::::::=:::::··:::::··:::::~' .:..:..:....::_!. ,,

[i)' .

ci'_f

l'.ii2 ··-- - trii,;·e-~~

r t

---·----·-·-·-~-·

--·· "'(!) ;i<#-~ .--~

-GJ-"iu9ht _______ , "tilcft~--"'""" Gi~Ft'

nl 0

m· nl. .:.:..1.. -- :!-t-"===============•·"-'·--------~·'-'...··-'-'--·.J!'

----

""tti1~-~--;;-~;;h--

---GJ-MASJID -Q-b~,k Ground

........ •. -.. ...,... ..

~

~.+--------~~'-'---'-'-'-'-'-'--'-'-~,.El" -

:.,.,El'.

-

--_

.,

·

..

'-'--.~'"'l

----> ·;_-_.' __ .

,. ------ ___ - -,

- ~---.-1.'f-~---.----. - - - - - - -.~--..•.."'--..~.. -..

~-14,

.

-~"j£i:"~'l 'I--~---------~-"~'_;.._;..~-~···•·c.c·.··c.·= "-·~ ·'~"1'

_____.._·---~·····~-··_ . ·-"Jo··~,,

• • -l!il

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

: Yellowline.png conver to graphic.

TITLE TEXT

: TitleText.png conver to graphic.

TEXT

: TEXT.MovieClip.

l.,ogo

: DPembos.png convert to graphic.

Jam

: Jam.MovieClip.

Anim Logo 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. TextButton

: Dynamic text convert to graphic.

Button 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 : on (release) {gotoAndPlay(61); loadMovieNum(''PROGPENDIDI KAN.swf'. 1);}.

5

:Ova!Button-green dengan

action script: on (release) {gotoAndPlay(61); loadMovieN.'1111("SO.swf', 1);}.

6

: Ova!Button-green dengan

action script: on (release) {gotoAndPlay(61); loadMovieNum("VISI MISl.s11:f'', I);}.

:Ova!Button-green dengan

7

action script : on (release) {gotoAndPlay(61); /oadMovieNum("SEJARAH.swf', I);}.

Gallery

: Galeri.button dengan action scrip: on (release) {gotoAndPlay(61); loadMovieNum("Galeri.si~f',

I);}.

Hiasan Rightline

: Rightline.graphic

Rigt

: right.graphic:

Left line

: Lenftline.graphic.

Left

: Left.graphic.

Line atas bawah : Line alas bawah.graphic. Masjid

: Masjid.png

Back Ground

: Twirl.png convert to graphic dengan alpha color 17%.

Stop

: Ation script "stop".

Keterangan :

~ ~··~···+~-·__

10_ _"_ _" _ _"_ _lll ___"_ _"_ _"_ _ "' _ _ " __ "_.,,:.

v i:JENDJNG

[iJ ENDJNG ~.

GJ LINE

•l!!I

[iJ IDLE TEXT [iJ TEXT [iJ logo

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

Q jam

t-------~

rJ

t------------------~

Gambm· 4.9.1. Timeline pada, layer E11tli11g, Line, TITLE TEXT, TEXT, LOGO da11}am, Timeline pada 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

Q Sound Q LOGO SETENGAH Q TEXT LOGO

WJ LOGO Q

1

Q Q

2

3

Q text button

D

.

cil '

•

•

•

• llill

..

Iii! • • llill • • Em!' • llill • • llill • • • llill • • D •

•

45

50

.

. 55

. 60 '

olo

Do D•>----t• D• r:.----~ •

.

0 0 0 D

.

Do}--..,...---;.• I•>--~•··

•••

D• :-...:.......,.------+ • • •

••• •••

O•>--~•••

D•

0 0 0

Gambar 4. 9.2. Timeline pada 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

SETENGAH, TEXT LOGO dan LOGO.

layer LOGO

;;!;'!I\ 0 f: v 0Button

GJ exit l'ii Gulde: 1 Gl?

5

•• 0 •• 0

.

[]

~.

I,

j

• El j

[j) 6

•D

[j) 5

•O

[j) 4

• filJ

[j) 3

•0

[j) 2 [j) I

• llj

• [fil

rJ,

l

~.

iJ,

~.

.1,

-1

al.,__

r r f

I,

.,I, I,

a!.

I,

~I.

r 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. Layer 6 berisi OvalButton-green yang bergerak mengikuti layer guide dari frame 25 sampai dengan frame 55 dengan menggunakan

motion tween. Berfungsi sebagai button menu visi dan misi. Layer 5 berisi OvalButton-green yang bergerak mengikuti layer guide dari frame 20 sampai dengan frame 50 dengan menggunakan

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

Layer 4 berisi OvalButton-green yang bergerak rnengikuti layer guide dari frame 15 sampai dengan frame 45 dengan menggunakan

motion tween. Berfungsi sebagai button menu program pendidikan. Layer 3 berisi OvalButton-green yang bergerak mengikuti layer guide dari frame 10 sampai dengan frame 40 dengan menggunakan

motion tween. Berfungsi sebagai button menu tekad siswi. Layer 2 berisi OvalButton-green yang bergerak mengikuti layer guide dari frame 5 sampai dengan frame 35 dengan menggunakan

motion tween. Berfungsi sebagai button menu extra kurikuler. Layer 1 berisi OvalButton-green yang bergerak mengikuti layer guide dari frame 1 sampai dengan frame 30 dengan menggunakan

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.

s

10

V>Bhiasan

[ii right line .. [ii Right [ii Left line [ii left [ii line atas bawah [ii MASJID [ii back Ground

..

~

• • Ill

+--------------"'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

lAutoRui1T___

View

Help

---~-·

·-------..-- ____. __ . _____. ______

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.

II E%9

I

I.

.

MyOoetrnel'lt

Gambar4.12. Penyimpanan File inf.

4.2.2. Proses Pembakaran CD. l. Jalankan aplikasi Nero Express. 2. Selanjutnya pilih menu Data> Data Disc.

:J·-

,. (Jj Bootable Data Disc

(~ ""'°''''""'"

®

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

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

Mo ••.

"

Tolal space used· I 1: 1 ·1

I

I

1"1

600MB

.O.OMS

t.:@J:::@::__....:l
,_

r'~+tqn

U\!!.s·"-'"':'l

r-i.11.9'/d

'"'"

0 EXlRA.na fl,- ffiOOlAMPEIJDJDIKAfJ_fu 0' TEKADSJSWl.fla

fl
!,;, ' ' ' ' ' ' I """' @] !£1

"'

;~fTh1.1rrb>.
Folder dcl."1•

51412015 10.10-31.IAM

..,,

m~

T~-pe

1270 rn Appl.:clion IJK[l !Mt~ lllt$e Fiki 11'.!l f!a
: J,t<EWPROlECTT.eY-e

)h(!c,cnne~I'.

Modif.,'il-

cf, '/3

c·:'.J~

LOC
939! KB

Flicl•Do<:1.1ment

560t:fl Flash Doc!JllY'..t'.t 1019111 fhshOocl.lmffit 16!31'.11 Fl3>h Document

® S'TRUKTU>.O!lGANISASJ.fu

ii! STRUKT~ ORGANISAS!Z.lla 11!' fim.fh 4\ NEW PROJECTT.fla

'"'"'

F~hOotummt

"'""

Fla'.'hDo-.--urnent

32KB

fl.sh Om:um<mt

!IBOKB Flli:>h Document

ff Soccid.fh 0 ErlrnX.fll

173265 Kfl fl,,.,hDo..--umcnt J:l7KEI F~I> Oocurnent

ft' Intro.ft. f!' Pelom2.fla

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

(})oP:exe

ez- FASll.lTAS.swf

'];· PROGRAM PENO ID!!( ...

fJ';_ EXTRA.swf

rl. so.~wf

e::

TOO\!)

5ISWJ

q;: SEJMAH,swf

·™

1311'.El Al»hM,,.

451'.B Flash M... AllSh M.•. l
~;_ l(ISI

MJSr.swf C.).Dioput.!co

""' ""

34 byte~

"!AUTOR!M.lff

i:--·i---r1 @]

1--1

...

T... 1 MIJ App!ica ... 979KB AoshM ... ~27Kll F!i!ShM .• , 3131:6 AoshM ... 22"6 A~M. ••

rr-1_·_-1 200MB

lrFJ ""'

1"1'1

Sett;;>!. ..

r·r-1

1"1"\


I~

Mom»

Mo ...

7JG/200S... 0/21/200 ... 10/3/200, ..

llfl9/200... 5}31{200•.• S/31}200... 8/21/2fl0... 9/6/2005 ...

11/lfJJl9...

7/25/209.::J

ITT'l''f}-

""""

llW

li~

- 1--~1- r ·1:-·;r:1·---r--1

3.7MB

800M!l

--

·------~--·--~

.. ---~--

~~I ,_...

li'"'

Gambar 4.16. Daftarfile yang aka11 disaU11 ke CD

reif "··

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.

fCD·RIR\111

v

Dlscnarr.e:

B Allow flies to be .:idded blcr (mu~isession di&e) 0 Veiify data on disc after Wning

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 CV

4:56;50 PM 4:56:!,;0PM

Cl>Ching of fo~ corr('leted Bumpiocess~lruted& 2~•(1tc-0Ktt'o)

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

0.00:03

"" Action ASUS CR\
Tmck

Recorder !;iate Re11d1•

Gambar 4.18. Proses pembakaran CD

Plearewel..

4:5G:50PM 4:56:SJPM

.\:57JSPM

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.

0

Time

Evenl

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

BABV

KESIMPULAN DAN SARAN

5.1. Kesimpulan 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 imatorforum .org/artic Ie/horizon/storytrl Iin g. htm www.usu.edu/alesanderso/m u Itinet/de finiti .htm

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

xix

Lampiran 1

TITLE TEXT

Skiplntro Gambar 3.21: Rancangan Layar Halaman Intro Scene

: Intro

Title text

: Logo

Perguruan Diniyyah Puteri Padang Panjang Duration

: 30 detik

Description

: Clip perjalanan dari lembah Anai menuju Perguruan Diniyyah Puteri

Padang Panjang, muncul animasi logo dengan latar

belakang gerbang perguruan. Camera

: POV perjalanan dari lembah Anai menuju gerbang perguruan

Audio

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

(VB) Voiceover

: Tidak ada

Title Text

Menu Utama

Animasi Logo

!i;.aleri

Sejarah

Visi dan Misi

! Struktur Organ

SEKILAS KATA PENGATAR TENT ANG PERGURUAN DINIYYAH PUTERI PADANG PANJANG

Prag. Pend Tel
l{eluar Gambar 3. 22. Rancangan Layar Halanum Menu Utama

Scene

: Menn Utama

Title text

: Perguruan Diniyyah Puteri Padang Panjang

Duration

: On Click

Description

: Pilihan menn navigasi

Camera

: Tidak ada

Audio

: Instrument I-Iimne Pergnrnan Diniyyah Pnteri

Trantition (special effect): Dissolve (DISS) Voiceover

: Tidak ada

Title Text

Animasi Logo

Menu Utama

A N I M

Sejarah

Visi dan Misi Struktur Organ

SEJARAH PERGURUAN DINIYYAH PUTERI PADANG PANJANG

A

·s I p I

Prag. Pend

c

Tekad Siswi Ex-Scoo!

Fasilitas

Gambar 3.23. Rancangan Layar Halaman Sejarah

Scene

: Sejarah Perguruan

Title text

: Sejarah Pergurnan Diniyyah Puteri Padang Panjang

Duration

: On Click

Description

: - Pada text sejarah pergurnan menggunakan scroll bar. - Tombol navigasi kembali ke menu utama

Camera

: Tidakada

Audio

: Instrument Himne Pergurnan Diniyyah Puteri

Trantition (special effect): Dissolve (DISS) Voiceover

: Tidak ada

Title Text

Animasi Logo

Menu Utan1a

A N

Sejarah

I M

Visi dan Misi

VISI/ MISI PERGURUAN DINIYYAH PllTERI PADANG PANJANG

Visi Struktur Organ Misi

A

s I

p

Prog. Pend

I

c Tekad Siswi Ex-Scool Fasi!itas

Gambar 3.24. Rancangan Layar Halaman Visi dan Misi

Scene

: Visi clan Misi Perguruan

: Visi clan Misi Perguruan Diniyyah Puteri Duration

: On Click

Description

: - Click pacla text visi, maka akan muncul visi - Click pacla teJ-.1 misi, maka akan muncul misi - Tombol navigasi kembali ke menu utmna

Camera

: Tidak acla

Audio

: Instrument Himne Perguruan Diniyyah Puteri

Trantition (special effect): Dissolve (DISS) Voiceover

: Ticlak acla

Title Text

Animasi Logo

Menu Utan1a

A N I

Sejarah

M Visi dan Misi Struktur Organ

STRUKTUR ORGANISASI PERGURUAN DINIYYAH PUTERI PADANG PANJANG

STRUKTUR ORGANISASI

CA

Prog. Pend

s I

p I

c Tekad Siswi Ex~Scoot

Fasilitas

Gambar 3.25. Rancangan Layar Halaman Struktur Organisasi

Scene Title text

: Struktur Organisasi Pergurmm Struktur Organisasi Perguruan Diniyyah Puteri Padm1g Panjang

Duration

: On Click

Description

: - Menggunakan Scroll bar - Tombol navigasi kembali ke menu utama

Camera

: Tidak ada

Audio

: Instrument Himne Perguruan Diniyyah Puteri

Trantition (special effect) : Dissolve (DISS) Voiceover

: Tidak ada

Animasi Logo

Title Text

Menu Utama

A TK

Sejarah

N

I M

Visi dan Misi Struktur Organ Prag. Pend

Ml

A

PROGRAM PEN DIDI KAN PERGURUAN DINIYYAH PLITERI PADANG PANJANG

DMP

s I

KMI

Tekad Siswi

STIT Ex~Scool

Fasilitas

Gambar 3.26. Rancangan Layar Ha Zaman Program Pendidikan

Scene

: Program Pendidikan Perguruan

Title te;-,.i

: Program

Pendidikan

Pergurnan

Diniyyah

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

Trantition (special effect): Dissolve (DISS) Voiceover

: Tidak ada

Puteri

Title Text

Animasi Logo

Menu Utama

A N I

Sejarah

M Visi dan Misi Truktur Organ

TEl
A

s I

p I

Prog. Pend

c

Tekad Siswi

Fasilitas

Gambar 3.27. Rancangan Layar Halaman Tekad Siswi Scene Title text

: Tenaga Pengajar Pergurua11

Tenaga Pengajar Pergurnan Dirnyyah Puteri Padang Panjang

Duration

: On Click

Description

: - Menggunakan Scroll bar - Tombol navigasi kembali ke menu utama

Camera

: Tidak ada

Audio

: Instrnment Himne Pergurnan Diniyyah Puteri

Trantition (special effect): Dissolve (DISS) Voiceover

: Tidak ada

Title Text

Ahimasi Logo

Menu Utama Sejarah Visi dan Misi

EXTRA KURIKULER PERGURUAN DINIYYAH PUTERI PADANG PANJANG

· Struktur Organ

A N I M A

s I p l

Prag. Pend

c

T ekad Sisv-1! Ex-Scoo!

Fasilitas

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

Shot 8: PAN dan TO pada kegiatan shalat be1jama'ah Shot 9: PAN pada kegiatan pemberian mufrhadat - Tombol navigasi kembali ke menu utama Camera

: Lock Do11~1

Audio

: Instrument Himne Perguruan Diniyyah Puteri

Trm1tition (special effect): Dissolve (DISS) : Menggambarkan kegiatan extra k'lllikuler Perguruan

Voiceover

Diniyyah Puteri Padm1g Pm1jang.

Title Text

Animasi Logo

Menu Utama

A N

Sejarah

I

M Visi dan Misi Truktur Organ

FASILITAS

PIG FASIL.ITA8

A

s I

-

p

I

Prog. Pend

c

Tekad Siswi

Fasilitas

.l Gambar 3.29. Rancangan Layar Ha/aman Fasilitas

Scene

: Fasilitas

Title text

: Fasilitas Perguman Diniyyah Puteri Padm1g Panjang

Duration

: On Click

Description

. - Click text nav1gas1. Pacla layar fasilitas akan menarnpilkan garnbar. - Tornbol nayigasi kembali ke menu utama

Carn era

: Ticlak acla

Audio

: Instrument Himne Perguruan Diniyyah Puteri

Trantition (special effect): Dissolve (DISS) Voiceover

: Tidak ada

Animasi Logo

Menu Uta ma

PIC

PIC

PIC

PIC

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

A N I M A

s I p I

c

Description

· - Click text navigasi.

Pada layar fasilitas akan

menampilkan gambar. Tombol navigasi kembali ke menu utama

Camera

: Tidak ada

Audio

: Instrument Himne Perguruan Diniyyah Puteri

Trantition (special effect) : Dissolve (DISS) Voiceover

: 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

n1ena1npilkan gan1bar. Tombol navigasi kembali ke menu utama Camera

: Tidak ada

Audio

: Instrument

Tnmtition (special effect) : Dissolve (DISS)

akan

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" 1

B,md\ln<}2 ;f C-ir<>h,l!ii, w:'' 1u"1 b,)y,1

Gambar 9. Menu Peta